Restyle homepage to match membership's design + font/footer fixes

src/components/Container.astro

@@ -1,3 +1,3 @@
-<div class="mx-auto w-full max-w-screen-lg px-6 md:px-8">
+<div class="mx-auto w-full max-w-[1400px] px-6 md:px-8">
   <slot />
 </div>

src/components/FlagStripe.astro

@@ -0,0 +1,43 @@
+---
+// Animated Palestinian-flag-color divider, used as a recurring section
+// separator on /membership and the homepage.
+---
+
+<div class="flag-stripe" aria-hidden="true"></div>
+
+<style>
+  @keyframes flagFlow {
+    from {
+      background-position: 0% 50%;
+    }
+    to {
+      background-position: -200% 50%;
+    }
+  }
+
+  .flag-stripe {
+    height: 4px;
+    margin: 0 0 10px;
+    background: linear-gradient(
+        to right,
+        #101010,
+        #ffffff,
+        #157a3e,
+        #ce1126,
+        #101010,
+        #ffffff,
+        #157a3e,
+        #ce1126,
+        #101010
+      )
+      0% 0% / 200% 100%;
+    animation: flagFlow 14s linear infinite;
+    box-shadow: 0 0 0 1px rgba(16, 16, 16, 0.12);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .flag-stripe {
+      animation: none;
+    }
+  }
+</style>

src/components/Footer.astro

@@ -2,15 +2,14 @@
 import Container from "./Container.astro";
 import Socials from "./Socials.astro";
 
-// Footer navigation matching the new navbar structure
+// Mirrors the navbar's categories/links exactly (src/components/NavBar.svelte navigation map)
 const footerNavigation: Record<string, { href?: string; links: [string, string][] }> = {
   About: {
     href: "/about",
     links: [
       ["Our Organization", "/about"],
-      // ["Mission & Vision", "/coming-soon"],
       ["Team", "/team"],
-      ["Media", "/media"],
+      ["FAQ", "/faq"],
       ["Contact Us", "/contact"],
     ],
   },
@@ -26,31 +25,29 @@ const footerNavigation: Record<string, { href?: string; links: [string, string][
   "Get Involved": {
     href: "/get-involved",
     links: [
-      ["Overview", "/get-involved"],
-      ["Join our Discord", "https://techforpalestine.org/discord-invite"],
-      ["E4P", "/e4p"],
-      // ["Investors for Palestine", "/coming-soon"],
-      ["Volunteer", "/volunteer"],
+      ["Become a Member", "/membership"],
+      ["Donate", "/donate"],
       ["Join the Incubator", "https://techforpalestine.org/project-application-form"],
+      ["Volunteer", "/volunteer"],
+      ["E4P", "/e4p"],
       ["Hire Palestinians", "/help/hire"],
+      ["Join our Discord", "https://techforpalestine.org/discord-invite"],
     ],
   },
-  Learn: {
-    // href: "/coming-soon",
+  Events: {
+    href: "/events",
     links: [
-      ["Past Updates", "https://updates.techforpalestine.org"],
       ["Past Events", "/events"],
-      // ["Shopping Ethically", "/coming-soon"],
-      // ["How to Boycott", "/coming-soon"],
-      // ["Tech Complicity", "/coming-soon"],
-      ["Vercel", "/vercel"],
-      ["FAQ", "/faq"],
+      ["Brussels 2026", "https://brussels2026.techforpalestine.org/"],
+      ["Barcelona 2026", "https://barcelona2026.techforpalestine.org/"],
+      ["Bay Area 2026", "https://summit.techforpalestine.org"],
+      ["London 2025", "/london-gathering"],
     ],
   },
 };
 ---
 
-<footer class="mt-20 border-t border-gray-200 bg-gradient-to-br from-gray-50 to-gray-100">
+<footer class="mt-20 border-t border-gray-200 bg-white">
   <Container>
     <div class="py-20">
       <div class="grid grid-cols-1 gap-16 lg:grid-cols-12">
@@ -111,7 +108,7 @@ const footerNavigation: Record<string, { href?: string; links: [string, string][
                   {links.map(([label, linkHref]) => (
                     <a
                       href={linkHref}
-                      class="block whitespace-nowrap text-sm text-gray-600 transition-all duration-200 hover:translate-x-1 hover:text-gray-900"
+                      class="block whitespace-nowrap text-sm text-gray-600 transition-all duration-200 hover:translate-x-1 hover:text-blue-600"
                       target={
                         linkHref.startsWith("http") || linkHref.startsWith("mailto:")
                           ? "_blank"
@@ -141,17 +138,17 @@ const footerNavigation: Record<string, { href?: string; links: [string, string][
         >
           <a
             href="/privacy-policy"
-            class="whitespace-nowrap transition-colors duration-200 hover:text-gray-900"
+            class="whitespace-nowrap transition-colors duration-200 hover:text-blue-600"
             >Privacy Policy</a
           >
           <a
             href="/terms"
-            class="whitespace-nowrap transition-colors duration-200 hover:text-gray-900"
+            class="whitespace-nowrap transition-colors duration-200 hover:text-blue-600"
             >Terms of Service</a
           >
           <a
             href="/legal"
-            class="whitespace-nowrap transition-colors duration-200 hover:text-gray-900"
+            class="whitespace-nowrap transition-colors duration-200 hover:text-blue-600"
             >Legal & Financial</a
           >
         </div>

src/components/membership/MembershipMain.astro

@@ -1,5 +1,6 @@
 ---
 import JoinFlow from "./JoinFlow";
+import FlagStripe from "../FlagStripe.astro";
 import { getTestimonials } from "../../data/testimonials";
 
 interface Props {
@@ -206,7 +207,7 @@ const cx = designSystem
         </a>
       </div>
     </div>
-    <div class="flag-stripe" aria-hidden="true"></div>
+    <FlagStripe />
   </section>
 
   <section id="inside" class={`${cx.shellPad} ${designSystem ? "bg-page" : ""}`}>
@@ -308,7 +309,7 @@ const cx = designSystem
         }
       </div>
     </div>
-    <div class="flag-stripe" aria-hidden="true"></div>
+    <FlagStripe />
   </section>
 
   <section id="dues" class={`${cx.shellPad} ${designSystem ? "bg-page" : ""}`}>
@@ -429,43 +430,6 @@ const cx = designSystem
   </a>
 </div>
 
-<style>
-  @keyframes flagFlow {
-    from {
-      background-position: 0% 50%;
-    }
-    to {
-      background-position: -200% 50%;
-    }
-  }
-
-  .flag-stripe {
-    height: 4px;
-    margin: 0 0 10px;
-    background: linear-gradient(
-        to right,
-        #101010,
-        #ffffff,
-        #157a3e,
-        #ce1126,
-        #101010,
-        #ffffff,
-        #157a3e,
-        #ce1126,
-        #101010
-      )
-      0% 0% / 200% 100%;
-    animation: flagFlow 14s linear infinite;
-    box-shadow: 0 0 0 1px rgba(16, 16, 16, 0.12);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .flag-stripe {
-      animation: none;
-    }
-  }
-</style>
-
 <script>
   document.querySelectorAll<HTMLElement>("[data-track-join-click]").forEach((anchor) => {
     anchor.addEventListener("click", () => {

src/layouts/Layout.astro

@@ -1,6 +1,15 @@
 ---
 import Navigation from "../components/Navigation.astro";
 import Footer from "../components/Footer.astro";
+// Outfit 400/500/600/700/800 — matches the weights used across the site's
+// font-normal/medium/semibold/bold/extrabold classes. Without the actual
+// weight files, the browser synthesizes ("faux") bold from whichever weight
+// IS loaded, which reads as cramped/squished at larger sizes.
+import "@fontsource/outfit/latin-400.css";
+import "@fontsource/outfit/latin-500.css";
+import "@fontsource/outfit/latin-600.css";
+import "@fontsource/outfit/latin-700.css";
+import "@fontsource/outfit/latin-800.css";
 interface Props {
   title: string;
   description?: string;