From 97e64ea679fbeeb91fec8737c9c396295832900d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20N=C3=BDvlt?= <ondrej@nyv.lt>
Date: Tue, 20 Feb 2024 13:04:24 +0100
Subject: [PATCH] Improve footer

---
 src/views/Footer.tsx | 135 ++++++++++++++++++++++++-------------------
 1 file changed, 76 insertions(+), 59 deletions(-)

diff --git a/src/views/Footer.tsx b/src/views/Footer.tsx
index c3c868a..2e3d9ba 100644
--- a/src/views/Footer.tsx
+++ b/src/views/Footer.tsx
@@ -6,7 +6,7 @@ function Illustration() {
   return (
     <div class="grid md:grid-cols-3 pb-6">
       <img
-        src="/images/spekacky.webp"
+        src={asset("/images/spekacky.webp")}
         width="6072"
         height="2242"
         alt=""
@@ -14,7 +14,7 @@ function Illustration() {
       />
       <div class="grid place-content-center">
         <img
-          src="/images/logo-white.webp"
+          src={asset("/images/logo-white.webp")}
           width="1024"
           height="493"
           class="max-w-[240px] lg:max-w-[300px]"
@@ -25,72 +25,77 @@ function Illustration() {
   );
 }
 
+function Logos() {
+  return (
+    <div class="flex md:flex-col md:items-start gap-6 opacity-75 md:border-r border-gray-700 md:mr-8">
+      <ResetLogo class="h-8" />
+      <InsureOurFutureLogo class="max-w-[80px] mb-6" />
+    </div>
+  );
+}
+
 function ColophonReset() {
   return (
-    <nav class="opacity-75">
-      <p class="mb-4">
-        <ResetLogo class="h-8" />
-      </p>
-      <p class="flex flex-wrap gap-3 items-baseline">
-        <a
-          class="link"
-          href="https://re-set.cz/about-us"
-          target="_blank"
-        >
-          About <strong>Re-set</strong>
-        </a>
-        <a
-          class="link"
-          href="https://www.facebook.com/PlatformaReset"
-          target="_blank"
-        >
-          Facebook
-        </a>
-        <a
-          class="link"
-          href="https://twitter.com/reset_platforma"
-          target="_blank"
-        >
-          X
-        </a>
-      </p>
+    <nav class="opacity-75 md:border-r border-gray-700 md:mr-8">
+      <h2 class="font-bold mb-2">Re-set</h2>
+      <ul class="flex flex-col gap-1">
+        <li>
+          <a
+            class="link"
+            href="https://re-set.cz/about-us"
+            target="_blank"
+          >
+            About
+          </a>
+        </li>
+        <li>
+          <a
+            class="link"
+            href="https://www.facebook.com/PlatformaReset"
+            target="_blank"
+          >
+            Facebook
+          </a>
+        </li>
+        <li>
+          <a
+            class="link"
+            href="https://twitter.com/reset_platforma"
+            target="_blank"
+          >
+            X
+          </a>
+        </li>
+      </ul>
     </nav>
   );
 }
 
 function ColophonGwa() {
   return (
-    <nav class="flex gap-8 items-center flex-1">
-      <InsureOurFutureLogo class="opacity-75 max-w-[80px]" />
-      <div class="opacity-75">
-        <p class="mb-2">
-          Part of{" "}
-          <strong>
+    <nav class="opacity-75">
+      <h2 class="font-bold mb-2">Insure our Future</h2>
+      <div>
+        <ul class="flex flex-col gap-1">
+          <li>
             <a
               class="link"
-              href="https://global.insure-our-future.com/global-week-of-action-2024/"
+              href="https://global.insure-our-future.com/"
               target="_blank"
             >
-              Global Week of Action 2024
+              About
             </a>
-          </strong>
-        </p>
-        <p class="mb-2 flex flex-wrap gap-4">
-          <a
-            class="link"
-            href="https://global.insure-our-future.com/"
-            target="_blank"
-          >
-            About <strong>Insure our Future</strong>
-          </a>
-          <a
-            class="link"
-            href="https://www.instagram.com/insure.our.future/"
-            target="_blank"
-          >
-            Instagram
-          </a>
-        </p>
+          </li>
+          <li>
+            <a
+              class="link"
+              href="https://www.instagram.com/insure.our.future/"
+              target="_blank"
+            >
+              Instagram
+            </a>
+          </li>
+        </ul>
       </div>
     </nav>
   );
@@ -101,13 +106,25 @@ export function Footer() {
     <footer class="sticky top-[100vh]">
       <Illustration />
       <div class="bg-black">
-        <div class="max-w-screen-xl px-6 mx-auto pt-12">
-          <div class="flex flex-col md:flex-row flex-wrap gap-y-16 pb-12">
+        <div class="max-w-screen-xl px-6 mx-auto pt-8">
+          <p class="pb-8 mb-8 opacity-75 border-b border-gray-700">
+            Part of{" "}
+            <strong>
+              <a
+                class="link"
+                href="https://global.insure-our-future.com/global-week-of-action-2024/"
+                target="_blank"
+              >
+                Global Week of Action 2024
+              </a>
+            </strong>
+          </p>
+          <div class="grid md:grid-cols-3 gap-y-12 mb-12">
+            <Logos />
             <ColophonReset />
-            <div class="border-r opacity-25 hidden md:block pr-24 mr-12" />
             <ColophonGwa />
           </div>
-          <p class="opacity-50 pb-4">
+          <p class="opacity-50 text-sm pb-4">
             created by{" "}
             <a class="link" href="https://druit.org/" target="_blank">
               druit.org