main: free pages

main/ui-main/.gitignore

 node_modules
+public/styles.css

main/ui-main/public/index.html

@@ -144,10 +144,57 @@
     </div>
   </div>
 </main>
-<footer></footer>
-
-<footer>
 
+<footer class="bg-black text-white pt-12">
+  <div class="container">
+    <div class="font-alt mb-10 text-right text-2xl">
+      Zůstaňte s námi v konaktu
+    </div>
+    <div class="footer__social">
+      <div>
+        <a href="">
+          <i class="ico--facebook"></i>
+          @ceska.piratska.strana
+        </a>
+      </div>
+      <div>
+        <a href="">
+          <i class="ico--twitter"></i>
+          #piratskastrana
+        </a>
+      </div>
+      <div>
+        <a href="">
+          <i class="ico--instagram"></i>
+          @pirati.cz
+        </a>
+      </div>
+      <div>
+        <a href="">
+          <i class="ico--youtube"></i>
+          pirati.cz
+        </a>
+      </div>
+    </div>
+    <div class="w-full">
+      <div>
+        <h6 class="font-alt text-2xl mb-12">
+          Navigace
+        </h6>
+        <div class="flex flex-col max-h-60">
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Jak pracujeme
+          </a>
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Program
+          </a>
+          <a class="cursor-pointer hover:no-underline mb-5">
+            Lidé
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
 </footer>
 </body>
 </html>

main/ui-main/src/css/organisms/footer.pcss

+footer {
+    clip-path: polygon(0 7%, 100% 0, 100% 100%, 0% 100%);
+
+    a {
+        @apply no-underline;
+    }
+}
+
+.footer__social {
+    @apply flex justify-end mb-2;
+
+    a {
+        @apply mr-8;
+    }
+}
+
+.footer__social i {
+    @apply mr-1;
+}

main/ui-main/src/css/style.pcss

@@ -25,7 +25,7 @@
 
 @import "./molecules/box.pcss";
 
-
+@import "./organisms/footer.pcss";
 @import "./organisms/navbar.pcss";