feat: proper footer links

src/components/Footer.jsx

 import React from "react";
+import { NavLink } from "react-router-dom";
 
 const Footer = () => {
   return (
@@ -15,76 +16,78 @@ const Footer = () => {
             sdílet za stejných podmínek.
           </p>
         </section>
-        <section className="footer__main-links bg-grey-700 text-white lg:grid grid-cols-3 gap-4"></section>
+        <section className="footer__main-links bg-grey-700 text-white lg:grid grid-cols-3 gap-4">
+          <div className="pt-8 pb-4 lg:py-0">
+            <div className="footer-collapsible">
+              <span className="text-xl uppercase text-white footer-collapsible__toggle">
+                CF 2021
+              </span>{" "}
+              <div className="">
+                <ul className="mt-6 space-y-2 text-grey-200">
+                  <li>
+                    <NavLink to="/">Přímý přenos</NavLink>
+                  </li>
+                  <li>
+                    <NavLink to="/program">Program</NavLink>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div className="py-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
+            <div className="footer-collapsible">
+              <span className="text-xl uppercase text-white footer-collapsible__toggle">
+                Otevřenost
+              </span>{" "}
+              <div className="">
+                <ul className="mt-6 space-y-2 text-grey-200">
+                  <li>
+                    <a href="https://ucet.pirati.cz">Transparentní účet</a>
+                  </li>{" "}
+                  <li>
+                    <a href="https://smlouvy.pirati.cz">Registr smluv</a>
+                  </li>{" "}
+                  <li>
+                    <a href="https://wiki.pirati.cz/fo/otevrene_ucetnictvi">
+                      Otevřené účetnictví
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </section>
         <section className="footer__social lg:text-right">
           <div className="flex flex-col md:flex-row lg:flex-col lg:items-end space-y-2 md:space-y-0 md:space-x-2 lg:space-x-0 lg:space-y-2">
-            <button className="btn btn--icon btn--blue-300 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth">
+            <a
+              href="https://dary.pirati.cz"
+              rel="noopener noreferrer"
+              target="_blank"
+              className="btn btn--icon btn--cyan-200 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth"
+            >
+              <div className="btn__body-wrap">
+                <div className="btn__body ">Přispěj</div>{" "}
+                <div className="btn__icon ">
+                  <i className="ico--pig"></i>
+                </div>
+              </div>
+            </a>{" "}
+            <a
+              href="https://nalodeni.pirati.cz"
+              rel="noopener noreferrer"
+              target="_blank"
+              className="btn btn--icon btn--blue-300 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth"
+            >
               <div className="btn__body-wrap">
-                <div className="btn__body ">Pomoz nám</div>{" "}
+                <div className="btn__body ">Naloď se</div>{" "}
                 <div className="btn__icon ">
                   <i className="ico--anchor"></i>
                 </div>
               </div>
-            </button>
+            </a>
           </div>
         </section>
       </div>
-      <section className="bg-black py-4 lg:py-12">
-        <div className="container container--default">
-          <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
-            <div className="badge w-full">
-              <div className="avatar avatar--sm badge__avatar">
-                <img src="http://placeimg.com/100/100/people" alt="Avatar" />
-              </div>
-              <div className="badge__body">
-                <span className="head-heavy-2xs badge__title">
-                  Andrej Ramašeuski
-                </span>
-                <p className="badge__occupation">Kontakt pro dobrovolníky</p>
-                <a
-                  href="mailto:example@example.com"
-                  className="contact-line contact-line--responsive icon-link badge__link"
-                >
-                  <i className="ico--phone"></i>
-                  <span>+420 777 123 123</span>
-                </a>
-                <a
-                  href="mailto:example@example.com"
-                  className="contact-line contact-line--responsive icon-link badge__link"
-                >
-                  <i className="ico--envelope"></i>
-                  <span>example@example.com</span>
-                </a>
-              </div>
-            </div>
-            <div className="badge w-full">
-              <div className="avatar avatar--sm badge__avatar">
-                <img src="http://placeimg.com/100/100/people" alt="Avatar" />
-              </div>
-              <div className="badge__body">
-                <span className="head-heavy-2xs badge__title">
-                  Andrea Linhartová
-                </span>
-                <p className="badge__occupation">Kontakt pro média</p>
-                <a
-                  href="mailto:example@example.com"
-                  className="contact-line contact-line--responsive icon-link badge__link"
-                >
-                  <i className="ico--phone"></i>
-                  <span>+420 777 123 123</span>
-                </a>
-                <a
-                  href="mailto:example@example.com"
-                  className="contact-line contact-line--responsive icon-link badge__link"
-                >
-                  <i className="ico--envelope"></i>
-                  <span>example@example.com</span>
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
     </footer>
   );
 };