feat(home): rebuild the homepage visual system

public/llms.txt

@@ -6,6 +6,7 @@ Tech for Palestine's mission is to harness technology and human innovation for a
 
 ## Key pages
 
+- [Homepage](https://techforpalestine.org/): The incubator behind 90+ projects for a free Palestine — headline portfolio outcomes, what T4P provides to projects, and press coverage.
 - [About](https://techforpalestine.org/about): Mission, founder, and organizational background.
 - [Donate](https://techforpalestine.org/donate): Support Tech for Palestine's work; donations are generally tax-deductible in the US.
 - [Incubator](https://techforpalestine.org/incubator): How the T4P Incubator supports early-stage advocacy projects with mentorship, volunteers, and funding.
@@ -23,6 +24,22 @@ Tech for Palestine's mission is to harness technology and human innovation for a
 - [Entrepreneurs for Palestine](https://techforpalestine.org/e4p): A global community of founders and CEOs pledging to steer hiring, sourcing, and fundraising in support of Palestinian liberation.
 - [Legal & Financial Notice](https://techforpalestine.org/legal): 501(c)(3) status, EIN, and financial transparency.
 
+## Scale
+
+- 90+ projects incubated
+- 3,000+ volunteers worldwide
+- 350+ Entrepreneurs for Palestine signatories
+- 50+ Investors for Palestine
+
+## Selected portfolio outcomes
+
+- Upscrolled — 5M users in 7 months and #1 on the global App Store. A social platform with no shadowbans or algorithmic ranking. Launched and scaled through the T4P incubator.
+- Boycat — $500M of products boycotted across 3M+ users. Scan a product for ethical compliance and find alternatives; the official BDS partner app. Connected to the BDS partnership by T4P.
+- Find a Protest — 500k visits per week. Protest listings powered by organizers and volunteer data collectors. Refocused and volunteer-powered through T4P.
+- Apricot — $1M+ paid to placed talent, connecting Middle Eastern and Palestinian refugee tech workers with US companies. Customer introductions and strategic refocus via T4P.
+- Newscord — 40k+ messages sent to hold outlets accountable for biased reporting, plus AI news summaries across hundreds of sources. MVP refocused with T4P ecosystem partners.
+- Thaura.ai — profitable, an ethical alternative to the major LLMs built around environmental, social, and privacy concerns. Launched via the T4P network.
+
 ## Organization facts
 
 - Legal name: Tech for Palestine

src/components/Footer.astro

@@ -61,7 +61,7 @@ const footerNavigation: Record<string, { href?: string; links: [string, string][
               <img
                 src="/mark-transparent.png"
                 alt="Tech for Palestine logo"
-                class="h-16 w-auto transition-transform duration-200 group-hover:scale-105"
+                class="h-16 w-auto transition-transform duration-200 motion-safe:group-hover:scale-105"
               />
             </a>
           </div>
@@ -76,7 +76,7 @@ const footerNavigation: Record<string, { href?: string; links: [string, string][
           <div class="pt-6">
             <a
               href="/donate"
-              class="inline-flex transform items-center rounded-lg bg-gradient-to-r from-green-600 to-green-700 px-6 py-3 font-semibold text-white shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:from-green-700 hover:to-green-800 hover:shadow-md"
+              class="inline-flex items-center rounded-lg bg-accent px-6 py-3 font-semibold text-white transition duration-200 hover:bg-accent-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 active:scale-[0.98] motion-safe:hover:-translate-y-0.5"
             >
               Support Our Work
               <svg
@@ -101,17 +101,21 @@ const footerNavigation: Record<string, { href?: string; links: [string, string][
           {
             Object.entries(footerNavigation).map(([category, { href, links }]) => (
               <div class="space-y-4">
-                <a
-                  href={href}
-                  class="block text-base font-bold text-gray-900 transition-colors duration-200 hover:text-blue-600"
-                >
-                  {category}
-                </a>
+                {href ? (
+                  <a
+                    href={href}
+                    class="block text-base font-semibold text-gray-900 transition-colors duration-200 hover:text-accent"
+                  >
+                    {category}
+                  </a>
+                ) : (
+                  <p class="block text-base font-semibold text-gray-900">{category}</p>
+                )}
                 <div class="space-y-3">
                   {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:text-gray-900 motion-safe:hover:translate-x-1"
                       target={
                         linkHref.startsWith("http") || linkHref.startsWith("mailto:")
                           ? "_blank"
@@ -141,17 +145,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="-mx-2 inline-flex min-h-[44px] items-center whitespace-nowrap px-2 transition-colors duration-200 hover:text-gray-900"
             >Privacy Policy</a
           >
           <a
             href="/terms"
-            class="whitespace-nowrap transition-colors duration-200 hover:text-gray-900"
+            class="-mx-2 inline-flex min-h-[44px] items-center whitespace-nowrap px-2 transition-colors duration-200 hover:text-gray-900"
             >Terms of Service</a
           >
           <a
             href="/legal"
-            class="whitespace-nowrap transition-colors duration-200 hover:text-gray-900"
+            class="-mx-2 inline-flex min-h-[44px] items-center whitespace-nowrap px-2 font-medium underline decoration-1 underline-offset-4 transition-colors duration-200 hover:text-gray-900"
             >Legal & Financial</a
           >
         </div>

src/layouts/HomeLayout.astro

@@ -1,6 +1,7 @@
 ---
 import FooterSection from "../components/home/FooterSection.astro";
 import { getEnv } from "../utils/getEnv";
+import { organizationSchema as organizationSchema_ } from "../utils/organizationSchema";
 import "@fontsource/fraunces/latin-400.css";
 import "@fontsource/outfit/latin-400.css";
 import "@fontsource/outfit/latin-500.css";
@@ -43,35 +44,7 @@ const canonicalUrl =
   canonicalUrlOverride ||
   new URL(normalizedPathname, Astro.site || "https://techforpalestine.org").toString();
 
-const organizationSchema = {
-  "@context": "https://schema.org",
-  "@type": "NonprofitOrganization",
-  "@id": "https://techforpalestine.org/#organization",
-  ...organizationSchemaExtra,
-  name: "Tech for Palestine",
-  url: "https://techforpalestine.org",
-  logo: "https://techforpalestine.org/t4p-social-logo.png",
-  taxID: "99-3441367",
-  address: {
-    "@type": "PostalAddress",
-    streetAddress: "548 Market St #266950",
-    addressLocality: "San Francisco",
-    addressRegion: "CA",
-    postalCode: "94104-5401",
-    addressCountry: "US",
-  },
-  sameAs: [
-    "https://www.instagram.com/techforpalestine",
-    "https://twitter.com/tech4palestine",
-    "https://github.com/TechForPalestine/",
-    "https://www.linkedin.com/company/techforpalestine/",
-    "https://infosec.exchange/@tech4palestine",
-    "https://www.youtube.com/@tech4palestine",
-    "https://techforpalestine.org/discord-invite",
-    "https://www.tiktok.com/@techforpalestine",
-    "https://bsky.app/profile/techforpalestine.org",
-  ],
-};
+const organizationSchema = organizationSchema_(organizationSchemaExtra);
 ---
 
 <!doctype html>

src/layouts/Layout.astro

@@ -1,6 +1,16 @@
 ---
 import Navigation from "../components/Navigation.astro";
 import Footer from "../components/Footer.astro";
+import { organizationSchema } from "../utils/organizationSchema";
+// ?url lets Vite resolve the content-hashed asset path for the preload hints.
+import frauncesWoff2 from "@fontsource/fraunces/files/fraunces-latin-400-normal.woff2?url";
+import outfitWoff2 from "@fontsource/outfit/files/outfit-latin-400-normal.woff2?url";
+// Site fonts live in the layout (not per-page) so the shared Navigation and
+// Footer render in the brand faces on every page, not just the homepage.
+import "@fontsource/fraunces/latin-400.css";
+import "@fontsource/outfit/latin-400.css";
+import "@fontsource/outfit/latin-500.css";
+import "@fontsource/outfit/latin-600.css";
 interface Props {
   title: string;
   description?: string;
@@ -33,6 +43,9 @@ const canonicalUrl = new URL(
     <link rel="canonical" href={canonicalUrl} />
     {noindex && <meta name="robots" content="noindex, nofollow" />}
     <link rel="me" href="https://infosec.exchange/@tech4palestine" />
+    <link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href={frauncesWoff2} />
+    <link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href={outfitWoff2} />
+    <script type="application/ld+json" set:html={JSON.stringify(organizationSchema())} />
     <script type="speculationrules">
       {
         "prerender": [{ "urls": ["/", "/about", "/incubator", "/tools", "/help/hire"] }]
@@ -153,6 +166,12 @@ const canonicalUrl = new URL(
     </script>
   </head>
   <body class="relative flex min-h-screen flex-col bg-white text-gray-900">
+    <a
+      href="#main-content"
+      class="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[1001] focus:rounded-md focus:bg-accent focus:px-4 focus:py-2 focus:text-white focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2"
+    >
+      Skip to content
+    </a>
     <Navigation />
 
     <!-- Floating Donate Button -->
@@ -167,7 +186,7 @@ const canonicalUrl = new URL(
       )
     }
 
-    <div class="flex-grow">
+    <div id="main-content" tabindex="-1" class="flex-grow focus:outline-none">
       <slot />
     </div>
     <Footer />