diff --git a/.gitignore b/.gitignore
index b20740ac..4d2edbf1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@
 
 # build output
 dist/
+.wrangler/
 
 # generated types
 .astro/
diff --git a/.impeccable/design.json b/.impeccable/design.json
new file mode 100644
index 00000000..7b71ba58
--- /dev/null
+++ b/.impeccable/design.json
@@ -0,0 +1,136 @@
+{
+  "schemaVersion": 2,
+  "generatedAt": "2026-05-25T00:00:00Z",
+  "title": "Design System: Tech for Palestine",
+  "extensions": {
+    "colorMeta": {
+      "page":         { "role": "neutral",   "displayName": "Warm Parchment",    "canonical": "oklch(99% 0.005 80)",  "tonalRamp": ["oklch(15% 0.005 80)","oklch(30% 0.005 80)","oklch(45% 0.005 80)","oklch(60% 0.005 80)","oklch(75% 0.005 80)","oklch(88% 0.005 80)","oklch(95% 0.005 80)","oklch(99% 0.005 80)"] },
+      "cream":        { "role": "neutral",   "displayName": "Cream",             "canonical": "oklch(97% 0.008 65)",  "tonalRamp": ["oklch(15% 0.008 65)","oklch(30% 0.008 65)","oklch(45% 0.008 65)","oklch(60% 0.008 65)","oklch(75% 0.008 65)","oklch(88% 0.008 65)","oklch(94% 0.008 65)","oklch(97% 0.008 65)"] },
+      "butter":       { "role": "neutral",   "displayName": "Butter",            "canonical": "oklch(95% 0.015 75)",  "tonalRamp": ["oklch(15% 0.015 75)","oklch(30% 0.015 75)","oklch(45% 0.015 75)","oklch(60% 0.015 75)","oklch(75% 0.015 75)","oklch(87% 0.015 75)","oklch(92% 0.015 75)","oklch(95% 0.015 75)"] },
+      "sand":         { "role": "neutral",   "displayName": "Sand",              "canonical": "oklch(96% 0.010 80)",  "tonalRamp": ["oklch(15% 0.010 80)","oklch(30% 0.010 80)","oklch(45% 0.010 80)","oklch(60% 0.010 80)","oklch(75% 0.010 80)","oklch(88% 0.010 80)","oklch(93% 0.010 80)","oklch(96% 0.010 80)"] },
+      "ink":          { "role": "neutral",   "displayName": "Ink",               "canonical": "oklch(20% 0.008 350)", "tonalRamp": ["oklch(20% 0.008 350)","oklch(32% 0.008 350)","oklch(44% 0.008 350)","oklch(56% 0.008 350)","oklch(68% 0.008 350)","oklch(80% 0.008 350)","oklch(90% 0.008 350)","oklch(97% 0.008 350)"] },
+      "ink-secondary":{ "role": "neutral",   "displayName": "Ink Secondary",     "canonical": "oklch(48% 0.012 350)", "tonalRamp": ["oklch(15% 0.012 350)","oklch(28% 0.012 350)","oklch(40% 0.012 350)","oklch(48% 0.012 350)","oklch(62% 0.012 350)","oklch(74% 0.012 350)","oklch(85% 0.012 350)","oklch(95% 0.012 350)"] },
+      "ink-muted":    { "role": "neutral",   "displayName": "Ink Muted",         "canonical": "oklch(74% 0.002 0)",   "tonalRamp": ["oklch(20% 0.002 0)","oklch(35% 0.002 0)","oklch(50% 0.002 0)","oklch(62% 0.002 0)","oklch(74% 0.002 0)","oklch(84% 0.002 0)","oklch(91% 0.002 0)","oklch(97% 0.002 0)"] },
+      "ink-divider":  { "role": "neutral",   "displayName": "Ink Divider",       "canonical": "oklch(85% 0.002 0)",   "tonalRamp": ["oklch(20% 0.002 0)","oklch(35% 0.002 0)","oklch(50% 0.002 0)","oklch(65% 0.002 0)","oklch(75% 0.002 0)","oklch(85% 0.002 0)","oklch(92% 0.002 0)","oklch(97% 0.002 0)"] },
+      "brand":        { "role": "primary",   "displayName": "Pomegranate",       "canonical": "oklch(50% 0.12 352)",  "tonalRamp": ["oklch(18% 0.12 352)","oklch(27% 0.12 352)","oklch(36% 0.12 352)","oklch(44% 0.12 352)","oklch(50% 0.12 352)","oklch(62% 0.12 352)","oklch(75% 0.10 352)","oklch(90% 0.06 352)"] },
+      "brand-hover":  { "role": "primary",   "displayName": "Pomegranate Light", "canonical": "oklch(57% 0.13 352)",  "tonalRamp": ["oklch(20% 0.13 352)","oklch(30% 0.13 352)","oklch(40% 0.13 352)","oklch(50% 0.13 352)","oklch(57% 0.13 352)","oklch(68% 0.11 352)","oklch(80% 0.08 352)","oklch(93% 0.04 352)"] }
+    },
+    "typographyMeta": {
+      "display":  { "displayName": "Display",          "purpose": "Hero headlines. Used once per page." },
+      "headline": { "displayName": "Headline/Editorial","purpose": "Section-opening statements. Manifesto, portfolio header." },
+      "title":    { "displayName": "Title",             "purpose": "Project names, sub-section headings." },
+      "body":     { "displayName": "Body",              "purpose": "Primary body copy. Max 65-75ch line length." },
+      "label":    { "displayName": "Label/Eyebrow",     "purpose": "Section annotations, button text. Always uppercase." }
+    },
+    "shadows": [
+      { "name": "logo-frame-ambient", "value": "0 6px 20px rgba(0,0,0,0.06)",                           "purpose": "Rotated butter accent behind logo frames." },
+      { "name": "logo-frame-lift",    "value": "0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05)", "purpose": "Logo card foreground — structural lift over accent." }
+    ],
+    "motion": [
+      { "name": "blur-in",      "value": "opacity 0 filter blur(12px) translateY(20px) → opacity 1 filter blur(0) translateY(0)", "duration": "1.2s", "easing": "ease-out", "purpose": "Hero headline entrance. Used for primary copy only." },
+      { "name": "fade-up",      "value": "opacity 0 translateY(12px) → opacity 1 translateY(0)",         "duration": "0.6s", "easing": "ease-out", "purpose": "CTA and logo entrance after headline." },
+      { "name": "card-in",      "value": "opacity 0 scale(0.96) → opacity 1 scale(1)",                   "duration": "0.8s", "easing": "ease-out", "purpose": "Hero glass card entrance." },
+      { "name": "ken-burns",    "value": "scale(1) → scale(1.08) → scale(1)",                            "duration": "14s",  "easing": "ease-in-out", "purpose": "Subtle image life. Full-bleed hero and collage photos only. Always motion-reduce:animate-none." },
+      { "name": "portfolio-in", "value": "opacity 0 translateY(32px) → opacity 1 translateY(0)",         "duration": "0.7s", "easing": "ease-out", "purpose": "Portfolio card scroll-triggered entrance." },
+      { "name": "fade-left",    "value": "opacity 0 translateX(-16px) → opacity 1 translateX(0)",        "duration": "0.6s", "easing": "ease-out", "purpose": "Motif row icon stagger." }
+    ],
+    "breakpoints": [
+      { "name": "sm",  "value": "640px",  "note": "Mobile collage and motif adjustments" },
+      { "name": "md",  "value": "810px",  "note": "Hero layout switch: mobile scroll → desktop glass card" },
+      { "name": "lg",  "value": "1024px", "note": "Portfolio card 2-col, collage all 4 visible" },
+      { "name": "xl",  "value": "1200px", "note": "Logo repositions to bottom-right in hero card; type scale top step" }
+    ]
+  },
+  "components": [
+    {
+      "name": "Primary Button",
+      "kind": "button",
+      "refersTo": "button-primary",
+      "description": "Primary CTA. Used for Become a Member and Apply to Incubator.",
+      "html": "<button class=\"ds-btn-primary\">Become a Member</button>",
+      "css": ".ds-btn-primary { display: inline-flex; align-items: center; gap: 8px; font-family: 'Outfit', system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: #FFFBF5; background-color: #AB4956; border: 1px solid transparent; border-radius: 999px; padding: 14px 20px; cursor: pointer; transition: background-color 0.15s ease; } .ds-btn-primary:hover { background-color: #D35464; } .ds-btn-primary:active { transform: scale(0.98); } .ds-btn-primary:focus-visible { outline: 2px solid #AB4956; outline-offset: 2px; }"
+    },
+    {
+      "name": "Ghost Button",
+      "kind": "button",
+      "refersTo": "button-ghost",
+      "description": "Secondary CTA. Used alongside Primary to offer a softer alternate action.",
+      "html": "<button class=\"ds-btn-ghost\">See what we've built <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M12 5v14M5 13l7 7 7-7\"/></svg></button>",
+      "css": ".ds-btn-ghost { display: inline-flex; align-items: center; gap: 8px; font-family: 'Outfit', system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: #2A2428; background-color: transparent; border: 1px solid #2A2428; border-radius: 999px; padding: 14px 20px; cursor: pointer; transition: background-color 0.15s ease; } .ds-btn-ghost:hover { background-color: rgba(42,36,40,0.05); } .ds-btn-ghost:active { transform: scale(0.98); } .ds-btn-ghost:focus-visible { outline: 2px solid #AB4956; outline-offset: 2px; }"
+    },
+    {
+      "name": "Text Link Button",
+      "kind": "button",
+      "refersTo": "button-text",
+      "description": "Inline text action. Used for tertiary options and body-copy links.",
+      "html": "<button class=\"ds-btn-text\">Read article →</button>",
+      "css": ".ds-btn-text { display: inline-flex; align-items: center; gap: 4px; font-family: 'Outfit', system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: #AB4956; background: none; border: none; border-radius: 0; padding: 0; cursor: pointer; transition: text-decoration 0.15s ease; } .ds-btn-text:hover { text-decoration: underline; } .ds-btn-text:focus-visible { outline: 2px solid #AB4956; outline-offset: 2px; }"
+    },
+    {
+      "name": "Eyebrow Label",
+      "kind": "custom",
+      "refersTo": null,
+      "description": "Section annotation. Uppercase, tracked, Ink Secondary. Prefixed with an em-dash by convention.",
+      "html": "<p class=\"ds-eyebrow\">— Our portfolio</p>",
+      "css": ".ds-eyebrow { font-family: 'Outfit', system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: #73656E; margin: 0; }"
+    },
+    {
+      "name": "Portfolio Card",
+      "kind": "card",
+      "refersTo": "portfolio-card",
+      "description": "Signature content container. Full-width editorial strip, not a grid card. Part of the sticky-scroll stack on desktop.",
+      "html": "<article class=\"ds-portfolio-card\"><div class=\"ds-portfolio-card__content\"><h3 class=\"ds-portfolio-card__title\">UpScrolled</h3><p class=\"ds-portfolio-card__body\">The social platform with no shadowbans and no algorithmic games. Every voice gets equal reach.</p><dl class=\"ds-portfolio-card__stats\"><div><dt class=\"ds-portfolio-card__stat-label\">Global App Store</dt><dd class=\"ds-portfolio-card__stat-value\">#1</dd></div></dl></div><div class=\"ds-portfolio-card__logo\"><div class=\"ds-portfolio-logo-back\"></div><div class=\"ds-portfolio-logo-front\"><img src=\"\" alt=\"UpScrolled logo\" width=\"200\" height=\"100\" style=\"max-height:100px;object-fit:contain;\"/></div></div></article>",
+      "css": ".ds-portfolio-card { display: grid; grid-template-columns: 1fr; gap: 32px; background: #F7F2E8; border: 1px solid #F7EAD4; border-radius: 20px; padding: 24px; } @media (min-width: 768px) { .ds-portfolio-card { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 40px; padding: 40px; } } .ds-portfolio-card__content { display: flex; flex-direction: column; } .ds-portfolio-card__title { font-family: 'Fraunces', serif; font-size: clamp(32px, 3vw, 38px); font-weight: 400; line-height: 1.22; color: #2A2428; margin: 0; } .ds-portfolio-card__body { font-family: 'Outfit', system-ui, sans-serif; font-size: clamp(16px, 1.5vw, 18px); font-weight: 400; line-height: 1.48; color: #73656E; margin: 20px 0 0; } .ds-portfolio-card__stats { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; } .ds-portfolio-card__stat-label { font-family: 'Outfit', system-ui, sans-serif; font-size: 18px; color: #73656E; margin: 0; } .ds-portfolio-card__stat-value { font-family: 'Fraunces', serif; font-size: clamp(42px, 4vw, 60px); font-weight: 400; line-height: 1; color: #AB4956; margin: 8px 0 0; } .ds-portfolio-card__logo { position: relative; width: 100%; min-height: 160px; } .ds-portfolio-logo-back { position: absolute; inset: 0; border-radius: 16px; background: #EFE3D4; transform: rotate(-3deg); box-shadow: 0 6px 20px rgba(0,0,0,0.06); } .ds-portfolio-logo-front { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 160px; border-radius: 16px; background: #fff; padding: 32px; box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05); }"
+    },
+    {
+      "name": "Stats Cell",
+      "kind": "custom",
+      "refersTo": "stats-cell",
+      "description": "Impact number with supporting label. Lives inside the sand stats grid. Counter animates on scroll entry (JS); always degrades gracefully without animation.",
+      "html": "<div class=\"ds-stat-cell\"><p class=\"ds-stat-cell__value\">80<span class=\"ds-stat-cell__plus\">+</span></p><p class=\"ds-stat-cell__label\">Projects Incubated</p></div>",
+      "css": ".ds-stat-cell { } .ds-stat-cell__value { font-family: 'Fraunces', serif; font-size: clamp(36px, 4vw, 48px); font-weight: 400; line-height: 1.22; color: #2A2428; margin: 0; } .ds-stat-cell__plus { color: #AB4956; } .ds-stat-cell__label { font-family: 'Outfit', system-ui, sans-serif; font-size: clamp(16px, 1.5vw, 20px); font-weight: 400; line-height: 1.48; color: #73656E; margin: 6px 0 0; }"
+    }
+  ],
+  "narrative": {
+    "northStar": "The Steadfast Press",
+    "overview": "This system is built like a publication produced by people who care deeply: warm paper stock, purposeful type, nothing decorative that doesn't earn its place. The Fraunces serif carries editorial authority; Outfit brings it back down to earth. The palette reads like late-afternoon light on linen, not a tech product, not a protest poster.\n\nThe design is warm without being sentimental, serious without being cold, and direct without being aggressive. It reflects a community of skilled professionals who know what they're doing and aren't apologetic about why. Complexity is prohibited not because the cause is simple, but because clarity is respect for the visitor's time and attention.\n\nThis system explicitly rejects: SaaS gradient aesthetics, corporate nonprofit polish, excessive motion or interactivity, vague social-good language, and anything that hedges on what T4P stands for.",
+    "keyCharacteristics": [
+      "Editorial serif (Fraunces) paired with a clean humanist sans (Outfit)",
+      "Warm parchment neutrals with a single pomegranate accent, used sparingly",
+      "Flat-by-default surfaces with tonal depth through background steps",
+      "Motion is restrained: entrances only, no looping decorative animation",
+      "Every screen ends with a clear, direct call to action"
+    ],
+    "rules": [
+      { "name": "The One Accent Rule",         "body": "Pomegranate appears on less than 10% of any screen. It marks action and emphasis only. A second accent would dilute it to decoration.", "section": "colors" },
+      { "name": "The Tonal Depth Rule",        "body": "Depth is created by stepping through the neutral stack (Parchment → Cream → Sand → Butter), not by drop shadows. Shadows are reserved for interactive elements that need structural lift.", "section": "colors" },
+      { "name": "The No Pure Values Rule",     "body": "Never use #000000 or #ffffff. Every neutral carries a warm tint. Pure values feel clinical; tinted neutrals feel inhabited.", "section": "colors" },
+      { "name": "The Fraunces Hierarchy Rule", "body": "Fraunces is exclusively for display, headline, and title roles. It is never used for body, label, or interface copy.", "section": "typography" },
+      { "name": "The Line Length Rule",        "body": "Body copy never exceeds 75 characters per line. On wide viewports, constrain with max-w-[75ch] or equivalent.", "section": "typography" },
+      { "name": "The Flat-By-Default Rule",    "body": "A surface that doesn't move does not get a shadow. If adding a shadow is the first instinct, ask whether a background step solves the same problem.", "section": "elevation" },
+      { "name": "The No Nested Card Rule",     "body": "Never place a card inside a card. The logo frame within a portfolio card is a logo display element, not a card.", "section": "components" }
+    ],
+    "dos": [
+      "Use Pomegranate (#AB4956) only on CTAs, brand emphasis, and active states",
+      "Step through the neutral stack to create depth rather than adding shadows",
+      "Use Fraunces exclusively for display, headline, and title roles",
+      "Cap body text at 65–75ch line length on all viewport widths",
+      "Guard every animation with prefers-reduced-motion",
+      "End every page section with a progression toward the primary CTA",
+      "Use real faces, real event photos, and real project logos",
+      "State T4P's mission explicitly and early — the cause is named, not implied"
+    ],
+    "donts": [
+      "Don't use excessive interactivity or motion — clarity takes priority over spectacle",
+      "Don't hedge or use vague social-good language — T4P is explicitly pro-Palestine",
+      "Don't use cold or corporate visual language: blues, grays, geometric icons, corporate-sans",
+      "Don't use gradient text (background-clip: text) — use solid Pomegranate",
+      "Don't use side-stripe borders (border-left > 1px as colored accent)",
+      "Don't repeat the hero metric pattern (big number + small label + gradient) as SaaS feature grid",
+      "Don't use glassmorphism decoratively — the hero glass card is purposeful, everywhere else is solid",
+      "Don't use #000000 or #ffffff",
+      "Don't add shadows to surfaces that don't move or need structural lift",
+      "Don't use generic nonprofit design: blue-and-white palettes, stock photo heroes, 'we believe in a better world' copy"
+    ]
+  }
+}
diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 00000000..52d121b7
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,222 @@
+---
+name: Tech for Palestine
+description: A community of professionals incubating tech and advocacy projects for Palestinian liberation.
+colors:
+  page: "#FFFBF5"
+  cream: "#FBF2ED"
+  butter: "#F7EAD4"
+  sand: "#F7F2E8"
+  ink: "#2A2428"
+  ink-secondary: "#73656E"
+  ink-muted: "#B5B5B5"
+  ink-divider: "#D6D6D6"
+  brand: "#AB4956"
+  brand-hover: "#D35464"
+typography:
+  display:
+    fontFamily: "Fraunces, serif"
+    fontSize: "clamp(42px, 5vw, 60px)"
+    fontWeight: 400
+    lineHeight: 1.22
+    letterSpacing: "normal"
+  headline:
+    fontFamily: "Fraunces, serif"
+    fontSize: "clamp(36px, 4vw, 48px)"
+    fontWeight: 400
+    lineHeight: 1.18
+    letterSpacing: "-0.01em"
+  title:
+    fontFamily: "Fraunces, serif"
+    fontSize: "clamp(32px, 3vw, 38px)"
+    fontWeight: 400
+    lineHeight: 1.22
+  body:
+    fontFamily: "Outfit, system-ui, sans-serif"
+    fontSize: "clamp(16px, 1.5vw, 20px)"
+    fontWeight: 400
+    lineHeight: 1.48
+  label:
+    fontFamily: "Outfit, system-ui, sans-serif"
+    fontSize: "12px"
+    fontWeight: 500
+    lineHeight: 1
+    letterSpacing: "0.12em"
+rounded:
+  sm: "8px"
+  md: "16px"
+  lg: "24px"
+  pill: "999px"
+spacing:
+  section-y: "96px"
+  section-y-lg: "128px"
+  container-x: "24px"
+  container-x-md: "40px"
+  card: "24px"
+  card-md: "40px"
+  card-lg: "56px"
+components:
+  button-primary:
+    backgroundColor: "{colors.brand}"
+    textColor: "#FFFFFF"
+    rounded: "{rounded.pill}"
+    padding: "14px 20px"
+    typography: "{typography.label}"
+  button-primary-hover:
+    backgroundColor: "{colors.brand-hover}"
+  button-ghost:
+    backgroundColor: "transparent"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.pill}"
+    padding: "14px 20px"
+    typography: "{typography.label}"
+  button-text:
+    backgroundColor: "transparent"
+    textColor: "{colors.brand}"
+    rounded: "0"
+    padding: "0"
+    typography: "{typography.label}"
+  portfolio-card:
+    backgroundColor: "{colors.sand}"
+    rounded: "20px"
+    padding: "{spacing.card}"
+  stats-cell:
+    backgroundColor: "{colors.sand}"
+    textColor: "{colors.ink}"
+---
+
+# Design System: Tech for Palestine
+
+## 1. Overview
+
+**Creative North Star: "The Steadfast Press"**
+
+This system is built like a publication produced by people who care deeply: warm paper stock, purposeful type, nothing decorative that doesn't earn its place. The Fraunces serif carries editorial authority; Outfit brings it back down to earth. The palette reads like late-afternoon light on linen, not a tech product, not a protest poster.
+
+The design is warm without being sentimental, serious without being cold, and direct without being aggressive. It reflects a community of skilled professionals who know what they're doing and aren't apologetic about why. Complexity is prohibited not because the cause is simple, but because clarity is respect for the visitor's time and attention.
+
+This system explicitly rejects: SaaS gradient aesthetics, corporate nonprofit polish, excessive motion or interactivity, vague social-good language, and anything that hedges on what T4P stands for.
+
+**Key Characteristics:**
+- Editorial serif (Fraunces) paired with a clean humanist sans (Outfit)
+- Warm parchment neutrals with a single pomegranate accent, used sparingly
+- Flat-by-default surfaces with tonal depth through background steps (page → cream → sand → butter)
+- Motion is restrained: entrances only, no looping decorative animation, always `prefers-reduced-motion` safe
+- CTAs appear where they are contextually earned, not mandated at the end of every section
+
+## 2. Colors: The Parchment and Pomegranate Palette
+
+A warm neutral stack grounded in off-white parchment, with a single saturated accent used only where it signals action or emphasis. The palette reads as editorial, human, and grounded — not tech-blue, not activist-red, not nonprofit-green.
+
+### Primary
+- **Pomegranate** (`#AB4956`): The sole accent. Used on CTAs, active states, brand emphasis, and the `text-brand` utility class. Forbidden as a background for large surface areas. Its rarity is its power.
+- **Pomegranate Light** (`#D35464`): Hover state only. Never appears at rest. Lighter than base for a lift feel.
+
+### Neutral
+- **Warm Parchment** (`#FFFBF5`): The page background. The surface everything rests on. Never pure white.
+- **Cream** (`#FBF2ED`): Slightly elevated surface — light card backgrounds, hover fills.
+- **Butter** (`#F7EAD4`): Card borders, warm dividers, the rotated accent behind logo frames.
+- **Sand** (`#F7F2E8`): Recessed surfaces — stats grids, input backgrounds.
+- **Ink** (`#2A2428`): All primary text. Warm near-black, never pure black.
+- **Ink Secondary** (`#73656E`): Body copy, descriptions, supporting text.
+- **Ink Muted** (`#B5B5B5`): Placeholders, disabled states, metadata.
+- **Ink Divider** (`#D6D6D6`): Horizontal rules, section separators.
+
+### Named Rules
+**The One Accent Rule.** Pomegranate appears on less than 10% of any screen. It marks action and emphasis only. A second accent would dilute it to decoration.
+
+**The Tonal Depth Rule.** Depth is created by stepping through the neutral stack (Parchment → Cream → Sand → Butter), not by drop shadows on every surface. Shadows are reserved for interactive elements that need structural lift.
+
+**The No Pure Values Rule.** Never use `#000000` or `#ffffff`. Every neutral carries a warm tint toward the brand hue. Pure values feel clinical; tinted neutrals feel inhabited.
+
+## 3. Typography
+
+**Display Font:** Fraunces (with Fraunces Placeholder, serif fallback)
+**Body Font:** Outfit (with system-ui, sans-serif fallback)
+
+**Character:** Fraunces carries optical weight and editorial warmth — it reads like a serious publication, not a startup homepage. Outfit is clean and humanist, grounding the editorial tone in clarity. Neither font performs. Together they communicate: "people who know what they're doing built this."
+
+### Hierarchy
+
+- **Display** (400, clamp 42–60px, line-height 1.22): Hero headlines. Used once per page. The largest typographic statement.
+- **Headline / Editorial** (400, clamp 36–48px, line-height 1.18, tracking –0.01em): Section-opening statements. The manifesto headline, portfolio section header. Slightly tighter tracking for editorial character.
+- **Heading** (400, clamp 32–38px, line-height 1.22): Project names in portfolio cards. Sub-section headings. Maps to `.ts-heading`.
+- **Body Large** (Outfit, 400, clamp 18–20px, line-height 1.48): Primary body copy. Section descriptions, project descriptions. Line length capped at 65–75ch.
+- **Body** (Outfit, 400, clamp 16–18px, line-height 1.22): Secondary body copy, card support text. Use sparingly — prefer Body Large where possible.
+- **Label / Eyebrow** (Outfit, 500, 12px, tracking 0.12em, uppercase): Section labels, button text, `— Our portfolio` style annotations. All uppercase, generous tracking. Never Fraunces.
+
+### Named Rules
+**The Fraunces Hierarchy Rule.** Fraunces is exclusively for display, headline, and title roles. It is never used for body, label, or interface copy. Mixing the serif into UI text breaks the editorial/UI distinction the system depends on.
+
+**The Line Length Rule.** Body copy never exceeds 75 characters per line. On wide viewports, constrain with `max-w-[75ch]` or equivalent, not just container padding.
+
+## 4. Elevation
+
+This system is flat by default. Surfaces rest without shadow; the tonal neutral stack (parchment → cream → sand → butter) creates perceived depth through background steps, not drop shadows.
+
+Shadows appear in two specific contexts only: (1) interactive elements that need structural lift to signal they are "above" the page (logo frames in portfolio cards), and (2) the hero glass card overlay, which uses a semi-transparent white backdrop rather than a traditional shadow.
+
+### Shadow Vocabulary
+- **Logo Frame Ambient** (`0 6px 20px rgba(0,0,0,0.06)`): The rotated Butter accent behind logo frames. Provides depth without weight. Never used on text containers.
+- **Logo Frame Lift** (`0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05)`): The logo card itself. Layered shadow creates subtle three-dimensional presence.
+
+### Named Rules
+**The Flat-By-Default Rule.** A surface that doesn't move does not get a shadow. If adding a shadow is the first instinct, ask whether a background step (parchment → sand) solves the same problem without visual noise.
+
+## 5. Components
+
+### Buttons
+
+Clean pill form. The shape is soft but the intent is direct. Two meaningful variants; a third for inline text links.
+
+- **Shape:** Fully rounded pill (999px radius). Softness signals approachability, not weakness.
+- **Primary:** Pomegranate background (`#AB4956`), White text (`#FFFFFF` — max contrast on brand surface), Outfit 500 label weight, 14px 20px padding. Hover lightens to Pomegranate Light (`#D35464`). Active state compresses to 98% scale.
+- **Ghost:** Transparent background, Ink border and text, same pill shape and padding as Primary. Hover fills with `ink/5` (5% ink tint). Used for secondary actions alongside a Primary CTA.
+- **Text:** No border, no background. Pomegranate text, no radius. Underlines on hover. Used inline in body copy or as a tertiary option.
+- **Focus:** `outline-2 outline-offset-2 outline-brand` for all variants. Keyboard navigation must be visually unambiguous.
+
+### Cards / Containers
+
+The portfolio card is the signature container of this system. It is not a standard card grid — each card is a full-width editorial strip with intentional layout.
+
+- **Portfolio Card:** Sand background, Butter border (1px), 20px radius, internal padding steps (24px mobile / 40px tablet / 56px desktop). Two-column grid on desktop (text left, logo right). Cards stack with a scroll-scale depth effect on desktop.
+- **Stats Cell:** Sand background, no border, no shadow. Stats live on the tonal surface without additional framing.
+- **Logo Frame:** Butter rotated accent (–3deg) behind a white foreground frame. The rotation is the design element. Ambient shadow only.
+
+**The No Nested Card Rule.** Never place a card inside a card. The logo frame within a portfolio card is a logo display element, not a card — it has no interactive behavior and no content hierarchy of its own.
+
+### Navigation
+
+The `HomeLayout.astro` renders the page without a navigation bar. Future navigation should follow: Outfit label weight, Ink text, horizontal link list, no active-state underline, Pomegranate for a single CTA button (same primary button spec).
+
+### Signature Components
+
+**Portfolio Stack:** Six portfolio cards rendered as a sticky-scroll stack. On desktop, each card stacks behind the one above it using `position: sticky` with staggered `top` offsets (40px, 64px, 88px...) and a scroll-driven scale reduction (minimum 0.88). Cards enter with a `translateY(32px) → 0` fade. This is the design centerpiece of the homepage — do not simplify it to a carousel or grid.
+
+**Collage Cluster:** Four photos in a tight cluster with rotations (–8deg, +6deg, –5deg, +7deg), absolutely positioned to overlap a recessed stats grid. The collage is decorative evidence of community and events. Motion: ken-burns scale pulse (1→1.08→1, 14s, ease-in-out). Always `motion-reduce:animate-none`.
+
+**Motif Row:** Overlapping T4P logos with staggered fade-left entrance. Negative margin creates the overlap (`-space-x-[18px→22px→30px]`). Purely decorative; `aria-hidden`.
+
+## 6. Do's and Don'ts
+
+### Do:
+- **Do** use Pomegranate (`#AB4956`) only on CTAs, brand emphasis, and active states. Its scarcity is its meaning.
+- **Do** step through the neutral stack (Parchment → Cream → Sand → Butter) to create depth rather than adding shadows.
+- **Do** use Fraunces exclusively for display, headline, and title roles. Outfit owns all body, label, and interface text.
+- **Do** cap body text at 65–75ch line length on all viewport widths.
+- **Do** guard every animation with `prefers-reduced-motion`. The CSS blanket `* { animation: none !important }` must be replaced with per-element guards.
+- **Do** place CTAs where they are contextually earned — after evidence, after a clear invitation, not mechanically at the end of every section.
+- **Do** use real faces, real event photos, and real project logos. Stock photography is prohibited.
+- **Do** state T4P's mission explicitly and early. The cause is not implied; it is named.
+- **Do** use the portfolio stack component (sticky scroll with depth) for featured projects. It is the homepage's signature interaction.
+
+### Don't:
+- **Don't** use excessive interactivity or motion. Clarity of communication takes priority over visual spectacle. If an animation doesn't aid comprehension, remove it.
+- **Don't** hedge or use vague "social good" language. T4P is explicitly pro-Palestine. Every headline must say so.
+- **Don't** use cold or corporate visual language: blues, grays, geometric icons, or corporate-sans typography. This is a community, not a product.
+- **Don't** use gradient text (`background-clip: text`). Use a single solid Pomegranate. Emphasis through weight or scale.
+- **Don't** use side-stripe borders (`border-left > 1px` as a colored accent). Use full borders, background tints, or nothing.
+- **Don't** repeat the hero metric pattern (big number, small label, supporting stats, gradient accent). The stats exist as proof points, not as a SaaS feature grid.
+- **Don't** use glassmorphism as a decorative default. The hero glass card is purposeful (it must be legible over a full-bleed image). Everywhere else: solid tonal surfaces only.
+- **Don't** use `#000000` or `#ffffff`. Every neutral is warm-tinted.
+- **Don't** add a shadow to a surface that does not move or need structural lift. Flat surfaces stay flat.
+- **Don't** use generic nonprofit design: blue-and-white palettes, stock photo heroes, "we believe in a better world" copy.
diff --git a/PRODUCT.md b/PRODUCT.md
new file mode 100644
index 00000000..e75aa03a
--- /dev/null
+++ b/PRODUCT.md
@@ -0,0 +1,57 @@
+# Product
+
+## Register
+
+brand
+
+## Users
+
+White-collar professionals, with an emphasis on tech workers (engineers, designers, founders, investors, lawyers). They already want to support Palestine but haven't found an outlet that matches their skillset. They arrive knowing they have a problem; T4P's job is to offer the clearest, most credible answer to "how do I help in a meaningful way?"
+
+## Product Purpose
+
+Tech for Palestine is a 501(c)(3) nonprofit that incubates and scales tech and advocacy projects for Palestinian liberation. The homepage is the front door to the movement. The primary conversion is **membership** (recurring donation + access to working committees). Secondary: tools downloads, incubator applications, volunteer sign-ups.
+
+Mission: "To harness technology and human innovation for a free and truly sovereign Palestine."
+
+Success in 3 months: measurable increase in membership sign-ups and tools downloads.
+
+## Brand Personality
+
+Warm, grounded, purposeful. T4P is honest and direct about its mission — there is no hedging, no ambiguity about what it stands for. It is human and community-forward, explicitly rejecting the norms of the tech establishment. It takes itself seriously without being heavy or institutional.
+
+Brand is often misunderstood because of a lack of cohesion so far — the design system launch is meant to fix this.
+
+## Anti-references
+
+- **Excessive complexity**: No over-engineered interactions, no motion for its own sake. "Less is more" is a core constraint. Accessibility and clarity of communication over visual spectacle.
+- **Superficiality or hesitation**: T4P is explicitly pro-Palestine. That must be self-evident, not buried. No vague "social good" language.
+- **Cold or corporate**: This is a community and a movement, not a startup or NGO. Nothing should feel like a pitch deck or a press release.
+- Generic nonprofit sites: stock photo heroes, blue-and-white palettes, "we believe in a better world" copy.
+- SaaS-style tech branding: metric dashboards, gradient blobs, glassmorphism cards.
+- Advocacy sites that lead with despair: heavy, dark, guilt-driven.
+
+## Design Principles
+
+1. **Clarity first, craft second** — every design choice serves comprehension. If a visitor has to think about the layout, the layout has failed.
+2. **Show the work, not the cause** — the 80+ real projects and their measurable impact carry the emotional argument. Stats and logos beat slogans.
+3. **Human and warm** — use real faces, real community, real events. The palette (warm cream, pomegranate accent) should feel like a gathering space, not a product site.
+4. **Earn each scroll** — every section must offer something new, not a re-skin of the pitch above it. Hierarchy: problem → evidence → invitation → action.
+5. **Direct and unhesitating** — copy is mission-driven, specific, and never apologetic about what T4P stands for.
+
+## Accessibility & Inclusion
+
+Aim for WCAG AA in practice: color contrast, keyboard navigability, screen reader support. Scroll animations must respect `prefers-reduced-motion`. Complexity in interactions should be minimal by default (per brand anti-reference above). No formal certification target yet.
+
+## Key Stats (current, from brief)
+
+- 80+ supported projects
+- 10,000+ Discord community of advocates
+- 200+ pro-innovation builders (entrepreneurs)
+
+## Competitor References
+
+- Apricot International — faces, key stats, "how it works" clarity
+- YCombinator — easy to read, range of projects
+- 500.co — visual appeal, easy-to-read stats, project variety
+- impacttoolbox.org — video with faces, project highlights
diff --git a/astro.config.mjs b/astro.config.mjs
index 21b4cc43..1aa5e41e 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -11,6 +11,9 @@ import sentry from "@sentry/astro";
 export default defineConfig({
   site: "https://techforpalestine.org",
   output: "server",
+  prefetch: {
+    defaultStrategy: "hover",
+  },
   adapter: cloudflare({
     imageService: "cloudflare",
   }),
diff --git a/package.json b/package.json
index 68ddae37..c1bd4807 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,8 @@
     "@astropub/icons": "^0.2.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
+    "@fontsource/fraunces": "^5.2.9",
+    "@fontsource/outfit": "^5.2.8",
     "@iconify-json/simple-icons": "^1.2.54",
     "@mui/icons-material": "^6.5.0",
     "@mui/material": "^6.5.0",
@@ -43,6 +45,7 @@
     "axios": "^1.15.0",
     "install": "^0.13.0",
     "leaflet": "^1.9.4",
+    "lenis": "^1.3.23",
     "marked": "^15.0.12",
     "moderndash": "^3.12.0",
     "react": "^19.2.0",
@@ -90,6 +93,7 @@
     "@types/react-slick": "^0.23.13",
     "prettier": "^3.6.2",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.7.1"
+    "prettier-plugin-tailwindcss": "^0.7.1",
+    "wrangler": "^4.85.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index babb9eb8..0ec72b55 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,6 +57,12 @@ importers:
       '@emotion/styled':
         specifier: ^11.14.1
         version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0)
+      '@fontsource/fraunces':
+        specifier: ^5.2.9
+        version: 5.2.9
+      '@fontsource/outfit':
+        specifier: ^5.2.8
+        version: 5.2.8
       '@iconify-json/simple-icons':
         specifier: ^1.2.54
         version: 1.2.54
@@ -105,6 +111,9 @@ importers:
       leaflet:
         specifier: ^1.9.4
         version: 1.9.4
+      lenis:
+        specifier: ^1.3.23
+        version: 1.3.23(react@19.2.0)
       marked:
         specifier: ^15.0.12
         version: 15.0.12
@@ -172,6 +181,9 @@ importers:
       prettier-plugin-tailwindcss:
         specifier: ^0.7.1
         version: 0.7.1(prettier-plugin-astro@0.14.1)(prettier@3.6.2)
+      wrangler:
+        specifier: ^4.85.0
+        version: 4.85.0(@cloudflare/workers-types@4.20251011.0)
 
 packages:
 
@@ -957,6 +969,12 @@ packages:
     peerDependencies:
       '@opentelemetry/api': ^1.9.0
 
+  '@fontsource/fraunces@5.2.9':
+    resolution: {integrity: sha512-XDzuddBtoC7BZgZdBn6b7hsFZY2+V1hgN7yca5fBTKuHjb/lOd45a0Ji8dTUgFhPoL7RdGupo+bC2BFSt6UH8Q==}
+
+  '@fontsource/outfit@5.2.8':
+    resolution: {integrity: sha512-rXC6g0MqD7cOBjht0bMqc43qM6lRqDLML9KXsmg9uykz0wLQhy8Z/ajrMG6iyoT3NJR+MYgU+OEHp7uHoTb+Yw==}
+
   '@iconify-json/bi@1.2.6':
     resolution: {integrity: sha512-fWfLr1/+DJDe8+rIUXxMwvmWBZFlxRtM59sYnrezJ2xX87QKyXVw3QuforJ4kF2Orrz85J+JTRG6305vaJ7flA==}
 
@@ -2785,6 +2803,20 @@ packages:
   leaflet@1.9.4:
     resolution: {integrity: sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==}
 
+  lenis@1.3.23:
+    resolution: {integrity: sha512-YxYq3TJqj9sJNv0V9SkyQHejt14xwyIwgDaaMK89Uf9SxQfIszu+gTQSSphh6BWlLTNVKvvXAGkg+Zf+oFIevg==}
+    peerDependencies:
+      '@nuxt/kit': '>=3.0.0'
+      react: '>=17.0.0'
+      vue: '>=3.0.0'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      react:
+        optional: true
+      vue:
+        optional: true
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -4927,6 +4959,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@fontsource/fraunces@5.2.9': {}
+
+  '@fontsource/outfit@5.2.8': {}
+
   '@iconify-json/bi@1.2.6':
     dependencies:
       '@iconify/types': 2.0.0
@@ -7037,6 +7073,10 @@ snapshots:
 
   leaflet@1.9.4: {}
 
+  lenis@1.3.23(react@19.2.0):
+    optionalDependencies:
+      react: 19.2.0
+
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
diff --git a/public/images/logo.avif b/public/images/logo.avif
new file mode 100644
index 00000000..3a68deb1
Binary files /dev/null and b/public/images/logo.avif differ
diff --git a/public/images/new-homepage/Media_Bias.webp b/public/images/new-homepage/Media_Bias.webp
deleted file mode 100644
index ea1937f4..00000000
Binary files a/public/images/new-homepage/Media_Bias.webp and /dev/null differ
diff --git a/public/images/new-homepage/a-ween-raeh.jpeg b/public/images/new-homepage/a-ween-raeh.jpeg
deleted file mode 100644
index c70e7e7a..00000000
Binary files a/public/images/new-homepage/a-ween-raeh.jpeg and /dev/null differ
diff --git a/public/images/new-homepage/hero/hero.webp b/public/images/new-homepage/hero/hero.webp
new file mode 100644
index 00000000..675c1144
Binary files /dev/null and b/public/images/new-homepage/hero/hero.webp differ
diff --git a/public/images/new-homepage/hero/t4p-logo.webp b/public/images/new-homepage/hero/t4p-logo.webp
new file mode 100644
index 00000000..63cb55ba
Binary files /dev/null and b/public/images/new-homepage/hero/t4p-logo.webp differ
diff --git a/public/images/new-homepage/manifesto/who-are-we-1.webp b/public/images/new-homepage/manifesto/who-are-we-1.webp
new file mode 100644
index 00000000..648a4d0a
Binary files /dev/null and b/public/images/new-homepage/manifesto/who-are-we-1.webp differ
diff --git a/public/images/new-homepage/manifesto/who-are-we-2.webp b/public/images/new-homepage/manifesto/who-are-we-2.webp
new file mode 100644
index 00000000..b3970e9a
Binary files /dev/null and b/public/images/new-homepage/manifesto/who-are-we-2.webp differ
diff --git a/public/images/new-homepage/manifesto/who-are-we-3.webp b/public/images/new-homepage/manifesto/who-are-we-3.webp
new file mode 100644
index 00000000..5138d769
Binary files /dev/null and b/public/images/new-homepage/manifesto/who-are-we-3.webp differ
diff --git a/public/images/new-homepage/manifesto/who-are-we-4.webp b/public/images/new-homepage/manifesto/who-are-we-4.webp
new file mode 100644
index 00000000..b0d0feb0
Binary files /dev/null and b/public/images/new-homepage/manifesto/who-are-we-4.webp differ
diff --git a/public/images/new-homepage/portfolio/proj-logo-1.webp b/public/images/new-homepage/portfolio/proj-logo-1.webp
new file mode 100644
index 00000000..989545a9
Binary files /dev/null and b/public/images/new-homepage/portfolio/proj-logo-1.webp differ
diff --git a/public/images/new-homepage/portfolio/proj-logo-2.webp b/public/images/new-homepage/portfolio/proj-logo-2.webp
new file mode 100644
index 00000000..3ef55bdb
Binary files /dev/null and b/public/images/new-homepage/portfolio/proj-logo-2.webp differ
diff --git a/public/images/new-homepage/portfolio/proj-logo-3.webp b/public/images/new-homepage/portfolio/proj-logo-3.webp
new file mode 100644
index 00000000..59bbb398
Binary files /dev/null and b/public/images/new-homepage/portfolio/proj-logo-3.webp differ
diff --git a/public/images/new-homepage/portfolio/proj-logo-4.webp b/public/images/new-homepage/portfolio/proj-logo-4.webp
new file mode 100644
index 00000000..ea00cb4f
Binary files /dev/null and b/public/images/new-homepage/portfolio/proj-logo-4.webp differ
diff --git a/public/images/new-homepage/portfolio/proj-logo-5.webp b/public/images/new-homepage/portfolio/proj-logo-5.webp
new file mode 100644
index 00000000..b691467b
Binary files /dev/null and b/public/images/new-homepage/portfolio/proj-logo-5.webp differ
diff --git a/public/images/new-homepage/portfolio/proj-logo-findaprotest.webp b/public/images/new-homepage/portfolio/proj-logo-findaprotest.webp
new file mode 100644
index 00000000..6fd362dc
Binary files /dev/null and b/public/images/new-homepage/portfolio/proj-logo-findaprotest.webp differ
diff --git a/public/images/new-homepage/press/team-2.webp b/public/images/new-homepage/press/team-2.webp
new file mode 100644
index 00000000..49fef871
Binary files /dev/null and b/public/images/new-homepage/press/team-2.webp differ
diff --git a/public/images/new-homepage/support/team.webp b/public/images/new-homepage/support/team.webp
new file mode 100644
index 00000000..ff939120
Binary files /dev/null and b/public/images/new-homepage/support/team.webp differ
diff --git a/public/images/new-homepage/testimonials/hani.webp b/public/images/new-homepage/testimonials/hani.webp
new file mode 100644
index 00000000..971b104b
Binary files /dev/null and b/public/images/new-homepage/testimonials/hani.webp differ
diff --git a/public/images/new-homepage/testimonials/issam-hijazi.webp b/public/images/new-homepage/testimonials/issam-hijazi.webp
new file mode 100644
index 00000000..6b11144a
Binary files /dev/null and b/public/images/new-homepage/testimonials/issam-hijazi.webp differ
diff --git a/public/images/new-homepage/testimonials/newscord.webp b/public/images/new-homepage/testimonials/newscord.webp
new file mode 100644
index 00000000..6f5b526a
Binary files /dev/null and b/public/images/new-homepage/testimonials/newscord.webp differ
diff --git a/public/images/new-homepage/testimonials/said.webp b/public/images/new-homepage/testimonials/said.webp
new file mode 100644
index 00000000..044c02ea
Binary files /dev/null and b/public/images/new-homepage/testimonials/said.webp differ
diff --git a/public/images/new-homepage/why/paul.webp b/public/images/new-homepage/why/paul.webp
new file mode 100644
index 00000000..022fa897
Binary files /dev/null and b/public/images/new-homepage/why/paul.webp differ
diff --git a/public/logos/logo-dark-no-padding.webp b/public/logos/logo-dark-no-padding.webp
new file mode 100644
index 00000000..f934ee83
Binary files /dev/null and b/public/logos/logo-dark-no-padding.webp differ
diff --git a/public/logos/logo-dark.webp b/public/logos/logo-dark.webp
new file mode 100644
index 00000000..7dd442ed
Binary files /dev/null and b/public/logos/logo-dark.webp differ
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index c7d9ab01..8dc82c05 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -20,9 +20,8 @@ const navigation: Map<string, { href: string; submenu: [string, string][] | null
       href: "/about",
       submenu: [
         ["Our Organization", "/about"],
-        // ["Mission & Vision", "/coming-soon"],
         ["Team", "/team"],
-        ["Media", "/media"],
+        ["FAQ", "/faq"],
         ["Contact Us", "/contact"],
       ] as [string, string][],
     },
@@ -44,35 +43,37 @@ const navigation: Map<string, { href: string; submenu: [string, string][] | null
     {
       href: "/get-involved",
       submenu: [
-        ["Overview", "/get-involved"],
-        ["Join our Discord", "https://techforpalestine.org/discord-invite"],
+        ["Become a Member", "/membership"],
+        ["Donate", "/donate"],
+        ["Join the Incubator", "https://techforpalestine.org/project-application-form"],
+        ["Volunteer", "/volunteer"],
         ["Entrepreneurs for Palestine", "/e4p"],
-        // ["Investors for Palestine", "/coming-soon"],
         ["Be a Mentor", "/mentorship"],
-        ["Volunteer", "/volunteer"],
-        ["Join the Incubator", "https://techforpalestine.org/project-application-form"],
         ["Hire Palestinians", "/help/hire"],
+        ["Join our Discord", "https://techforpalestine.org/discord-invite"],
       ] as [string, string][],
     },
   ],
   [
-    "Events and Updates",
+    "Events",
     {
-      href: "/faq",
+      href: "/events",
       submenu: [
-        ["London 2025", "/london-gathering"],
-        ["Bay Area 2026", "https://summit.techforpalestine.org"],
-        ["Barcelona 2026", "https://barcelona2026.techforpalestine.org/"],
-        ["Brussels 2026", "https://brussels2026.techforpalestine.org/"],
-        ["Past Updates", "https://updates.techforpalestine.org"],
         ["Past Events", "/events"],
-        // ["Shopping Ethically", "/coming-soon"],
-        // ["How to Boycott", "/coming-soon"],
-        // ["Tech Complicity", "/coming-soon"],
-        ["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"],
       ] as [string, string][],
     },
   ],
+  [
+    "Updates",
+    {
+      href: "https://updates.techforpalestine.org",
+      submenu: null,
+    },
+  ],
 ]);
 
 // TODO: MOVE BANNER TO LAYOUT
diff --git a/src/components/home/CtaSection.astro b/src/components/home/CtaSection.astro
new file mode 100644
index 00000000..df257a33
--- /dev/null
+++ b/src/components/home/CtaSection.astro
@@ -0,0 +1,125 @@
+---
+import Button from "../ui/Button.astro";
+
+interface Props {
+  membershipLive?: boolean;
+}
+
+const { membershipLive = false } = Astro.props;
+
+const amounts = [
+  { label: "$25", href: "/donate?amount=25" },
+  { label: "$50", href: "/donate?amount=50" },
+  { label: "$100", href: "/donate?amount=100" },
+  { label: "Custom", href: "/donate?amount=custom" },
+];
+---
+
+<section class="px-4 pb-4 min-[810px]:px-6 min-[810px]:pb-6" aria-labelledby="cta-heading">
+  <div class="cta-wrapper rounded-3xl bg-ink-dark pt-14 pb-14 min-[810px]:pt-20 min-[810px]:pb-20">
+    <div class="mx-auto max-w-[1400px] px-6 min-[810px]:px-10">
+
+      <div class="cta-hero mx-auto max-w-[640px] text-center">
+        <h2 id="cta-heading" class="ts-editorial text-page leading-[1.2]">
+          You've seen what we've built.<br />
+          <span class="text-brand-light">Now build with us.</span>
+        </h2>
+        <p class="ts-body mt-6 text-page/60 max-w-[480px] mx-auto leading-relaxed">
+          Join the coalition of professionals turning their skills into tools for liberation. Membership is free. The impact is real.
+        </p>
+        <p class="ts-body-small mt-4 text-page/50 max-w-[480px] mx-auto leading-relaxed">
+          {membershipLive
+            ? "Join to support our mission and get access to our member Hub, where you can volunteer your skills, connect with the community and receive advanced updates."
+            : "Join to support our mission. Volunteer your skills, connect with the community and make an impact."}
+        </p>
+        <div class="mt-10">
+          {membershipLive
+            ? <Button href="/membership" variant="primary" size="lg" arrow>Become a member</Button>
+            : <Button href="/get-involved" variant="primary" size="lg" arrow>Get involved</Button>}
+        </div>
+      </div>
+
+      <div class="cta-donate mt-20 rounded-[20px] border border-page/20 bg-ink-dark p-6 min-[810px]:p-8 min-[810px]:mt-24">
+        <p class="ts-body-small text-page/50">Can't join right now?</p>
+        <h3 class="ts-quote text-page mt-2">Donate to keep it running</h3>
+        <p class="ts-body mt-3 text-page/50 max-w-[420px] leading-relaxed">
+          One-time or recurring. Your donation helps us scale existing projects and launch new supported initiatives for a free Palestine.
+        </p>
+
+        <div class="mt-6 flex flex-wrap gap-3">
+          {amounts.map((a) => (
+            <a
+              href={a.href}
+              class="ts-label inline-flex items-center justify-center rounded-pill border border-page/20 px-6 py-3 text-page transition-colors duration-150 hover:border-page/40 hover:bg-page/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand min-h-[44px]"
+            >
+              {a.label}
+            </a>
+          ))}
+        </div>
+
+        <p class="ts-body-small mt-6 text-page/50">
+          T4P is a 501(c)(3). Donations are tax deductible in the US.
+        </p>
+        <p class="ts-body-small mt-2 text-page/50">
+          <a href="/donate?variant=validaid" class="text-brand-light hover:underline inline-flex items-center min-h-[44px]" aria-label="Donate in the UK with Gift Aid">Click here</a> to donate in the UK with Gift Aid.
+        </p>
+      </div>
+
+    </div>
+  </div>
+</section>
+
+<style>
+  .cta-hero {
+    opacity: 0;
+    translate: 0 24px;
+    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
+      translate 0.8s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+  .cta-hero.in-view {
+    opacity: 1;
+    translate: none;
+  }
+
+  .cta-donate {
+    opacity: 0;
+    translate: 0 24px;
+    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.15s,
+      translate 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.15s;
+  }
+  .cta-donate.in-view {
+    opacity: 1;
+    translate: none;
+  }
+
+  :global(html.no-js) .cta-hero,
+  :global(html.no-js) .cta-donate {
+    opacity: 1;
+    translate: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cta-hero,
+    .cta-donate {
+      opacity: 1;
+      translate: none;
+      transition: none;
+    }
+  }
+</style>
+
+<script>
+  const ctaObs = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("in-view");
+          ctaObs.unobserve(entry.target);
+        }
+      });
+    },
+    { threshold: 0.15 }
+  );
+
+  document.querySelectorAll<HTMLElement>(".cta-hero, .cta-donate").forEach((el) => ctaObs.observe(el));
+</script>
diff --git a/src/components/home/FooterSection.astro b/src/components/home/FooterSection.astro
new file mode 100644
index 00000000..2692dcdc
--- /dev/null
+++ b/src/components/home/FooterSection.astro
@@ -0,0 +1,140 @@
+---
+import { Icon } from "astro-icon/components";
+
+const navigation: Record<string, [string, string][]> = {
+  About: [
+    ["Our Organization", "/about"],
+    ["Team", "/team"],
+    ["FAQ", "/faq"],
+    ["Contact Us", "/contact"],
+  ],
+  Incubator: [
+    ["Overview", "/incubator"],
+    ["Projects", "/projects"],
+    ["Ideas", "/ideas"],
+    ["Tools", "/tools"],
+  ],
+  "Get Involved": [
+    ["Become a Member", "/membership"],
+    ["Donate", "/donate"],
+    ["Join the Incubator", "https://techforpalestine.org/project-application-form"],
+    ["Volunteer", "/volunteer"],
+    ["Entrepreneurs for Palestine", "/e4p"],
+    ["Hire Palestinians", "/help/hire"],
+  ],
+  Events: [
+    ["Past Events", "/events"],
+    ["Brussels 2026", "https://brussels2026.techforpalestine.org/"],
+    ["Barcelona 2026", "https://barcelona2026.techforpalestine.org/"],
+    ["Bay Area 2026", "https://summit.techforpalestine.org"],
+    ["London 2025", "/london-gathering"],
+    ["Updates", "https://updates.techforpalestine.org"],
+  ],
+};
+
+const socials: { name: string; url: string; icon: string }[] = [
+  { name: "Instagram", url: "https://www.instagram.com/techforpalestine", icon: "mdi:instagram" },
+  { name: "Twitter", url: "https://twitter.com/tech4palestine", icon: "mdi:twitter" },
+  { name: "YouTube", url: "https://www.youtube.com/@tech4palestine", icon: "mdi:youtube" },
+  { name: "GitHub", url: "https://github.com/TechForPalestine/", icon: "mdi:github" },
+  { name: "LinkedIn", url: "https://www.linkedin.com/company/techforpalestine/", icon: "mdi:linkedin" },
+  { name: "Discord", url: "https://techforpalestine.org/discord-invite", icon: "ic:baseline-discord" },
+  { name: "Mastodon", url: "https://infosec.exchange/@tech4palestine", icon: "mdi:mastodon" },
+  { name: "TikTok", url: "https://www.tiktok.com/@techforpalestine", icon: "ic:baseline-tiktok" },
+  { name: "Bluesky", url: "https://bsky.app/profile/techforpalestine.org", icon: "simple-icons:bluesky" },
+  { name: "UpScrolled", url: "https://share.upscrolled.com/en/user/39494e76-22a4-47ee-a67d-cd7049835a53/", icon: "/upscrolled-icon.svg" },
+];
+---
+
+<footer class="bg-ink-dark pt-20 pb-12">
+  <div class="mx-auto max-w-7xl px-6 md:px-8">
+    <!-- Main footer grid -->
+    <div class="grid grid-cols-1 gap-12 lg:grid-cols-12 lg:gap-8">
+      <!-- Brand column -->
+      <div class="lg:col-span-4">
+        <a href="/" class="inline-block">
+          <img
+            src="/logos/logo-dark-no-padding.webp"
+            alt="Tech for Palestine"
+            width="352"
+            height="112"
+            class="h-14 w-auto"
+          />
+        </a>
+
+        <p class="ts-body mt-6 max-w-xs leading-relaxed text-white/60">
+          A coalition of professionals harnessing technology and human innovation
+          for a free and sovereign Palestine.
+        </p>
+
+        <ul class="mt-8 flex flex-wrap gap-4">
+          {socials.map((s) => (
+            <li>
+              <a
+                href={s.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-white/40 transition-colors duration-200 hover:text-white"
+                title={s.name}
+              >
+                <span class="sr-only">{s.name}</span>
+                {s.icon.startsWith("/") ? (
+                  <img src={s.icon} alt={s.name} class="h-5 w-5 opacity-40 transition-opacity duration-200 hover:opacity-100" />
+                ) : (
+                  <Icon name={s.icon} class="h-5 w-5" />
+                )}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <!-- Navigation columns -->
+      <nav class="grid grid-cols-2 gap-8 sm:grid-cols-4 lg:col-span-8" aria-label="Footer">
+        {Object.entries(navigation).map(([category, links]) => (
+          <div>
+            <h3 class="ts-overline text-white/40">{category}</h3>
+            <ul class="mt-4 space-y-3">
+              {links.map(([label, href]) => (
+                <li>
+                  <a
+                    href={href}
+                    class="ts-body-small text-white/60 transition-colors duration-200 hover:text-white"
+                    target={href.startsWith("http") ? "_blank" : "_self"}
+                    rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
+                  >
+                    {label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </nav>
+    </div>
+
+    <!-- Divider -->
+    <hr class="mt-16 border-white/10" />
+
+    <!-- Bottom bar -->
+    <div class="mt-8 flex flex-col items-center justify-between gap-4 sm:flex-row">
+      <p class="ts-body-small text-white/40">
+        &copy; {new Date().getFullYear()} Tech for Palestine. All rights reserved. 501(c)(3) nonprofit &middot; EIN 99-3441367
+      </p>
+      <div class="flex gap-6">
+        <a href="/privacy-policy" class="ts-body-small text-white/40 transition-colors duration-200 hover:text-white">
+          Privacy
+        </a>
+        <a href="/terms" class="ts-body-small text-white/40 transition-colors duration-200 hover:text-white">
+          Terms
+        </a>
+        <a href="/legal" class="ts-body-small text-white/40 transition-colors duration-200 hover:text-white">
+          Legal &amp; Financial
+        </a>
+        <a href="/media" class="ts-body-small text-white/40 transition-colors duration-200 hover:text-white">
+          Media Kit
+        </a>
+      </div>
+    </div>
+  </div>
+</footer>
diff --git a/src/components/home/HeroSection.astro b/src/components/home/HeroSection.astro
new file mode 100644
index 00000000..385d0da3
--- /dev/null
+++ b/src/components/home/HeroSection.astro
@@ -0,0 +1,82 @@
+---
+import Button from "../ui/Button.astro";
+---
+
+<section data-hero class="px-4 pt-4 pb-6 sm:px-6 sm:pt-6 min-[810px]:pb-10">
+  <div class="relative overflow-hidden rounded-3xl">
+    <!-- Background image -->
+    <img
+      src="/images/new-homepage/hero/hero.webp"
+      alt="Palestinian children playing near the separation wall"
+      width="1106"
+      height="1113"
+      fetchpriority="high"
+      class="h-[calc(100svh-2rem)] min-h-[500px] w-full object-cover object-center animate-ken-burns motion-reduce:animate-none sm:h-[calc(100svh-3rem)]"
+    />
+
+    <!-- Mobile overlay (below 810px): logo + scroll down -->
+    <div class="absolute inset-0 flex flex-col items-center gap-6 pt-16 min-[810px]:hidden">
+      <div class="hero-logo">
+        <img src="/logos/logo-dark.webp" alt="Tech for Palestine" width="163" height="48" class="h-12 w-auto" />
+      </div>
+      <a href="#mobile-content" class="hero-cta-a ts-label text-brand flex flex-col items-center gap-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand rounded-sm">
+        Scroll down
+        <svg class="scroll-indicator" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+          <path d="M12 5v14M5 13l7 7 7-7" />
+        </svg>
+      </a>
+    </div>
+
+    <!-- Desktop overlay (810px+): full hero card -->
+    <div class="absolute inset-0 hidden items-center justify-center min-[810px]:flex">
+      <div class="hero-card mx-auto w-[90%] max-w-[1008px] rounded-3xl bg-[#ffffffa3] px-3 py-4 min-[900px]:px-5 min-[900px]:py-6">
+        <!-- Logo: top-left below 1200px, bottom-right at 1200px+ -->
+        <div class="hero-logo mb-4 min-[1200px]:hidden">
+          <img src="/logos/logo-dark.webp" alt="Tech for Palestine" width="163" height="48" class="h-12 w-auto" />
+        </div>
+
+        <p class="ts-display mb-7 text-left text-ink" aria-hidden="true">
+          <span class="hero-h1-a inline">Join the movement behind 90+ projects for </span><span class="hero-h1-b inline text-brand">Palestine</span>
+        </p>
+        <div class="flex flex-wrap items-center justify-start gap-5 min-[1200px]:justify-between">
+          <div class="flex flex-wrap items-center">
+            <div class="hero-cta-a">
+              <Button href="#portfolio" variant="ghost" class="!border-transparent hover:!bg-transparent">
+                See what we've built
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
+                  <path d="M12 5v14M5 13l7 7 7-7" />
+                </svg>
+              </Button>
+            </div>
+            <div class="hero-cta-b">
+              <Button href="/get-involved" variant="primary" size="lg" arrow>Become a member</Button>
+            </div>
+          </div>
+          <div class="hero-logo hidden items-center gap-2 min-[1200px]:flex">
+            <img src="/logos/logo-dark.webp" alt="Tech for Palestine" width="163" height="48" class="h-12 w-auto" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile content below hero (below 810px) -->
+  <div id="mobile-content" class="pt-20 min-[810px]:hidden">
+    <h1 class="ts-display hero-h1-a mb-8 text-left text-ink">
+      Join the movement behind 90+ projects for Palestine
+    </h1>
+    <div class="flex flex-col items-start gap-4">
+      <div class="hero-cta-a">
+        <Button href="#portfolio" variant="ghost" class="!border-transparent hover:!bg-transparent">
+          See what we've built
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
+            <path d="M12 5v14M5 13l7 7 7-7" />
+          </svg>
+        </Button>
+      </div>
+      <div class="hero-cta-b">
+        <Button href="/get-involved" variant="primary" size="lg" arrow>Become a member</Button>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/components/home/HomeNavbar.astro b/src/components/home/HomeNavbar.astro
new file mode 100644
index 00000000..91df3b39
--- /dev/null
+++ b/src/components/home/HomeNavbar.astro
@@ -0,0 +1,436 @@
+---
+import Button from "../ui/Button.astro";
+
+interface Props {
+  membershipLive?: boolean;
+  currentPath?: string;
+}
+
+const { membershipLive = false } = Astro.props;
+const currentPath = Astro.url.pathname;
+
+const navItems = [
+  {
+    label: "About",
+    href: "/about",
+    children: [
+      { label: "Our Organization", href: "/about" },
+      { label: "Team", href: "/team" },
+      { label: "FAQ", href: "/faq" },
+      { label: "Contact Us", href: "/contact" },
+    ],
+  },
+  {
+    label: "Incubator",
+    href: "/incubator",
+    children: [
+      { label: "Overview", href: "/incubator" },
+      { label: "Projects", href: "/projects" },
+      { label: "Ideas", href: "/ideas" },
+      { label: "Tools", href: "/tools" },
+    ],
+  },
+  {
+    label: "Get Involved",
+    href: "/get-involved",
+    children: [
+      { label: "Become a Member", href: "/membership" },
+      { label: "Donate", href: "/donate" },
+      { label: "Join the Incubator", href: "https://techforpalestine.org/project-application-form" },
+      { label: "Volunteer", href: "/volunteer" },
+      { label: "Entrepreneurs for Palestine", href: "/e4p" },
+      { label: "Be a Mentor", href: "/mentorship" },
+      { label: "Hire Palestinians", href: "/help/hire" },
+      { label: "Join our Discord", href: "https://techforpalestine.org/discord-invite" },
+    ],
+  },
+  {
+    label: "Events",
+    href: "/events",
+    children: [
+      { label: "Past Events", href: "/events" },
+      { label: "Brussels 2026", href: "https://brussels2026.techforpalestine.org/" },
+      { label: "Barcelona 2026", href: "https://barcelona2026.techforpalestine.org/" },
+      { label: "Bay Area 2026", href: "https://summit.techforpalestine.org" },
+      { label: "London 2025", href: "/london-gathering" },
+    ],
+  },
+  {
+    label: "Updates",
+    href: "https://updates.techforpalestine.org",
+  },
+];
+
+function isActive(itemHref: string, path: string): boolean {
+  if (itemHref.startsWith("http")) return false;
+  return path === itemHref || path.startsWith(itemHref + "/");
+}
+
+function isGroupActive(item: typeof navItems[number], path: string): boolean {
+  if (isActive(item.href, path)) return true;
+  return item.children?.some(c => isActive(c.href, path)) ?? false;
+}
+---
+
+<nav
+  class="home-navbar fixed top-0 left-0 right-0 z-50"
+  aria-label="Main navigation"
+>
+  <div class="home-navbar-inner mx-auto flex max-w-[1400px] items-center justify-between px-6 py-3 min-[1050px]:px-10">
+    <a href="/" class="shrink-0 rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand">
+      <img
+        src="/logos/logo-dark.webp"
+        alt="Tech for Palestine"
+        width="136"
+        height="40"
+        class="h-10 w-auto"
+      />
+    </a>
+
+    <!-- Desktop nav -->
+    <ul class="hidden min-[1050px]:flex items-center gap-8 list-none p-0 m-0" role="list">
+      {navItems.map((item) => (
+        <li class={item.children ? "nav-dropdown relative" : ""}>
+          <a
+            href={item.href}
+            class:list={[
+              "ts-label transition-colors duration-150 inline-flex items-center gap-1.5 py-2 rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand",
+              isGroupActive(item, currentPath) ? "text-brand" : "text-ink-secondary hover:text-ink",
+            ]}
+            target={item.href.startsWith("http") ? "_blank" : "_self"}
+            rel={item.href.startsWith("http") ? "noopener noreferrer" : undefined}
+            aria-current={isGroupActive(item, currentPath) ? "true" : undefined}
+            {...(item.children ? { "aria-haspopup": "true", "aria-expanded": "false" } : {})}
+          >
+            {item.label}
+            {item.children && (
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="nav-chevron" aria-hidden="true">
+                <path d="M6 9l6 6 6-6" />
+              </svg>
+            )}
+          </a>
+          {item.children && (
+            <div class="nav-dropdown-menu absolute top-full left-0 pt-2">
+              <ul class="nav-dropdown-panel min-w-[220px] rounded-lg border border-butter bg-page p-2.5 list-none m-0" role="list">
+                {item.children.map((child) => (
+                  <li>
+                    <a
+                      href={child.href}
+                      class:list={[
+                        "ts-body-small block rounded-md px-4 py-3 transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand",
+                        isActive(child.href, currentPath) ? "bg-butter text-ink hover:bg-butter/70" : "text-ink-secondary hover:bg-cream hover:text-ink",
+                      ]}
+                      target={child.href.startsWith("http") ? "_blank" : "_self"}
+                      rel={child.href.startsWith("http") ? "noopener noreferrer" : undefined}
+                      aria-current={isActive(child.href, currentPath) ? "page" : undefined}
+                    >
+                      {child.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </li>
+      ))}
+    </ul>
+
+    <div class="hidden min-[1050px]:block">
+      <Button
+        href={membershipLive ? "/membership" : "/get-involved"}
+        variant="primary"
+        size="md"
+        arrow
+        class="!px-7 !py-[1.125rem]"
+      >
+        Become a member
+      </Button>
+    </div>
+
+    <!-- Mobile burger -->
+    <button
+      class="home-navbar-burger min-[1050px]:hidden flex items-center justify-center w-11 h-11 rounded-lg text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+      aria-label="Open menu"
+      aria-expanded="false"
+    >
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+        <path d="M4 7h16M4 12h16M4 17h16" />
+      </svg>
+    </button>
+  </div>
+
+  <!-- Mobile drawer -->
+  <div class="home-navbar-drawer min-[1050px]:hidden" role="dialog" aria-label="Navigation menu">
+    <ul class="flex flex-col gap-1 px-6 py-4 pb-6 list-none p-0 m-0" role="list">
+      {navItems.map((item) => (
+        <li>
+          {item.children ? (
+            <button
+              class="mobile-accordion ts-label flex w-full items-center justify-between py-3 text-ink-secondary transition-colors duration-150 hover:text-brand focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand rounded-sm"
+              aria-expanded="false"
+            >
+              {item.label}
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="mobile-accordion-chevron" aria-hidden="true">
+                <path d="M6 9l6 6 6-6" />
+              </svg>
+            </button>
+          ) : (
+            <a
+              href={item.href}
+              class="ts-label block py-3 text-ink-secondary transition-colors duration-150 hover:text-brand focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand rounded-sm"
+              target={item.href.startsWith("http") ? "_blank" : "_self"}
+              rel={item.href.startsWith("http") ? "noopener noreferrer" : undefined}
+            >
+              {item.label}
+            </a>
+          )}
+          {item.children && (
+            <div class="mobile-accordion-panel">
+              <ul class="pl-4 pb-2 list-none m-0" role="list">
+                {item.children.map((child) => (
+                  <li>
+                    <a
+                      href={child.href}
+                      class="ts-body-small block py-3 text-ink-secondary/70 transition-colors duration-150 hover:text-brand focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand rounded-sm"
+                      target={child.href.startsWith("http") ? "_blank" : "_self"}
+                      rel={child.href.startsWith("http") ? "noopener noreferrer" : undefined}
+                    >
+                      {child.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </li>
+      ))}
+      <li class="pt-2">
+        <Button
+          href={membershipLive ? "/membership" : "/get-involved"}
+          variant="primary"
+          size="lg"
+          arrow
+        >
+          Become a member
+        </Button>
+      </li>
+    </ul>
+  </div>
+</nav>
+
+<style>
+  .home-navbar {
+    transform: translateY(-100%);
+    opacity: 0;
+    background: #FFFBF5;
+    box-shadow: 0 1px 0 #F7EAD4, 0 4px 16px rgba(42, 36, 40, 0.06);
+    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
+                opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+    pointer-events: none;
+  }
+
+  .home-navbar.visible {
+    transform: translateY(0);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .nav-dropdown-panel {
+    box-shadow: 0 8px 24px rgba(42, 36, 40, 0.08), 0 2px 6px rgba(42, 36, 40, 0.04);
+  }
+
+  /* Dropdown menus - open on hover OR focus-within for keyboard access */
+  .nav-dropdown-menu {
+    opacity: 0;
+    transform: translateY(-4px);
+    pointer-events: none;
+    transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1),
+                transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+
+  .nav-dropdown:hover .nav-dropdown-menu,
+  .nav-dropdown:focus-within .nav-dropdown-menu {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  /* Bridge: keep hover alive while cursor crosses the gap between trigger and panel */
+  .nav-dropdown-menu::before {
+    content: "";
+    position: absolute;
+    top: -8px;
+    left: 0;
+    right: 0;
+    height: 8px;
+  }
+
+  .nav-chevron {
+    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+
+  .nav-dropdown:hover .nav-chevron,
+  .nav-dropdown:focus-within .nav-chevron {
+    transform: rotate(180deg);
+  }
+
+  .home-navbar-drawer {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    visibility: hidden;
+    background: #FFFBF5;
+    transition: grid-template-rows 0.35s cubic-bezier(0.25, 1, 0.5, 1),
+                opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1),
+                visibility 0s 0.35s;
+  }
+
+  .home-navbar-drawer.open {
+    border-top: 1px solid #F7EAD4;
+    grid-template-rows: 1fr;
+    opacity: 1;
+    visibility: visible;
+    transition: grid-template-rows 0.35s cubic-bezier(0.25, 1, 0.5, 1),
+                opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1),
+                visibility 0s;
+  }
+
+  .home-navbar-drawer > * {
+    overflow: hidden;
+  }
+
+  .mobile-accordion-chevron {
+    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+
+  .mobile-accordion[aria-expanded="true"] .mobile-accordion-chevron {
+    transform: rotate(180deg);
+  }
+
+  .mobile-accordion-panel {
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition: grid-template-rows 0.3s cubic-bezier(0.25, 1, 0.5, 1),
+                opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+
+  .mobile-accordion-panel.open {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+
+  .mobile-accordion-panel > * {
+    overflow: hidden;
+  }
+
+  :global(html.no-js) .home-navbar {
+    transform: none;
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .home-navbar,
+    .nav-dropdown-menu,
+    .mobile-accordion-panel,
+    .home-navbar-drawer {
+      transition: none;
+    }
+  }
+</style>
+
+<script>
+  const navbar = document.querySelector<HTMLElement>(".home-navbar");
+
+  if (navbar) {
+    const threshold = window.innerHeight / 2;
+    const updateVisibility = () => {
+      navbar.classList.toggle("visible", window.scrollY >= threshold);
+    };
+    updateVisibility();
+    window.addEventListener("scroll", updateVisibility, { passive: true });
+  }
+
+  const burger = document.querySelector<HTMLButtonElement>(".home-navbar-burger");
+  const drawer = document.querySelector<HTMLElement>(".home-navbar-drawer");
+
+  function openDrawer() {
+    if (!burger || !drawer) return;
+    drawer.classList.add("open");
+    burger.setAttribute("aria-expanded", "true");
+    document.documentElement.classList.add("overflow-hidden");
+  }
+
+  function closeDrawer() {
+    if (!burger || !drawer) return;
+    drawer.classList.remove("open");
+    burger.setAttribute("aria-expanded", "false");
+    document.documentElement.classList.remove("overflow-hidden");
+  }
+
+  if (burger && drawer) {
+    burger.addEventListener("click", () => {
+      const isOpen = drawer.classList.contains("open");
+      if (isOpen) {
+        closeDrawer();
+      } else {
+        openDrawer();
+      }
+    });
+
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && drawer.classList.contains("open")) {
+        closeDrawer();
+        burger.focus();
+      }
+    });
+  }
+
+  // Close mobile drawer when resizing past desktop breakpoint
+  const desktopQuery = window.matchMedia("(min-width: 1050px)");
+  desktopQuery.addEventListener("change", (e) => {
+    if (e.matches) closeDrawer();
+  });
+
+  // Desktop dropdown keyboard support: update aria-expanded on focus
+  document.querySelectorAll<HTMLElement>(".nav-dropdown").forEach((dropdown) => {
+    const trigger = dropdown.querySelector<HTMLAnchorElement>("a[aria-haspopup]");
+    if (!trigger) return;
+
+    dropdown.addEventListener("focusin", () => {
+      trigger.setAttribute("aria-expanded", "true");
+    });
+
+    dropdown.addEventListener("focusout", (e) => {
+      if (!dropdown.contains((e as FocusEvent).relatedTarget as Node)) {
+        trigger.setAttribute("aria-expanded", "false");
+      }
+    });
+
+    dropdown.addEventListener("mouseenter", () => {
+      trigger.setAttribute("aria-expanded", "true");
+    });
+
+    dropdown.addEventListener("mouseleave", () => {
+      if (!dropdown.contains(document.activeElement)) {
+        trigger.setAttribute("aria-expanded", "false");
+      }
+    });
+  });
+
+  document.querySelectorAll<HTMLButtonElement>(".mobile-accordion").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const expanded = btn.getAttribute("aria-expanded") === "true";
+      btn.setAttribute("aria-expanded", (!expanded).toString());
+      const panel = btn.nextElementSibling as HTMLElement | null;
+      if (panel?.classList.contains("mobile-accordion-panel")) {
+        panel.classList.toggle("open");
+      }
+    });
+  });
+</script>
diff --git a/src/components/home/ManifestoSection.astro b/src/components/home/ManifestoSection.astro
new file mode 100644
index 00000000..a2146619
--- /dev/null
+++ b/src/components/home/ManifestoSection.astro
@@ -0,0 +1,164 @@
+---
+const stats = [
+  { value: "90", label: "Projects Incubated" },
+  { value: "400", label: "Global Volunteers" },
+  { value: "30", label: "Expert Mentors" },
+  { value: "50", label: "Investors for Palestine" },
+  { value: "350", label: "Entrepreneurs for Palestine" },
+];
+
+const photos = [
+  {
+    alt: "Tech for Palestine speaker at a Building Ethical Technology event",
+    src: "/images/new-homepage/manifesto/who-are-we-4.webp",
+  },
+  {
+    alt: "Pro-Palestine protest outside a neoclassical government building",
+    src: "/images/new-homepage/manifesto/who-are-we-2.webp",
+  },
+  {
+    alt: "Immigration lawyer holding flowers at a Tech for Palestine event",
+    src: "/images/new-homepage/manifesto/who-are-we-1.webp",
+  },
+  {
+    alt: "Demonstrator in traditional Palestinian embroidery raising flowers at a street protest",
+    src: "/images/new-homepage/manifesto/who-are-we-3.webp",
+  },
+];
+---
+
+<section class="overflow-x-clip bg-page px-6 pt-14 pb-14 min-[810px]:px-10 min-[810px]:pt-20 min-[810px]:pb-20">
+  <div class="mx-auto max-w-[1400px]">
+    <!-- Motif row -->
+    <div class="mb-10 flex items-center -space-x-[18px] sm:-space-x-[24px] min-[810px]:-space-x-[30px] motif-row" role="presentation" aria-hidden="true">
+      {[1, 2, 3, 4].map((_, i) => (
+        <img src="/images/logo.avif" alt="" width="128" height="163" loading="lazy" decoding="async" class={`w-20 sm:w-24 min-[810px]:w-32 shrink-0 motif-icon${i === 3 ? " hidden sm:block" : ""}`} data-index={i} />
+      ))}
+    </div>
+
+    <!-- Editorial headline -->
+    <h2 class="ts-editorial mb-14 max-w-[52ch] text-ink min-[810px]:mb-20 manifesto-headline">
+      <span class="manifesto-text-a">Thousands of founders, tech workers, business professionals and advocates building tools and products that </span><span class="manifesto-text-b text-brand">protect, inform, resist, and rebuild.</span>
+    </h2>
+
+    <p class="ts-body-large max-w-[60ch] mx-auto text-center text-ink-secondary manifesto-body">
+      Tens of thousands of well-funded hasbara (Israeli propaganda) projects exist. We're building tens of thousands of liberation initiatives to match them. Nonprofits and businesses can join our Incubator, or you can become a member to support and build with us.
+    </p>
+  </div>
+
+  <!-- Stats + collage wrapper -->
+  <div class="mx-auto max-w-[1400px]">
+    <dl class="stats-grid grid grid-cols-2 gap-x-8 gap-y-8 rounded-lg bg-sand px-8 pb-56 pt-10 sm:grid-cols-3 min-[810px]:px-12 min-[810px]:pt-12 lg:grid-cols-5 lg:pb-64">
+      {stats.map((s) => (
+        <div class="last:col-span-2 sm:last:col-span-1">
+          <dt class="ts-stat text-ink" aria-label={`${s.value}+`}>
+            <span class="stat-value" data-target={s.value} aria-hidden="true">{s.value}</span><span class="text-brand" aria-hidden="true">+</span>
+          </dt>
+          <dd class="ts-body-large mt-1.5 text-ink-secondary">{s.label}</dd>
+        </div>
+      ))}
+    </dl>
+
+    <!-- Photo collage — pulled up over the stats padding -->
+    <div class="relative -mt-48 lg:-mt-56">
+      <div class="flex items-end justify-center">
+        {photos.map((p, i) => (
+          <div class={`collage-card collage-card-${i + 1} flex-1 overflow-hidden rounded-lg${i === 1 ? " hidden lg:block" : ""}${i === 3 ? " hidden sm:block" : ""}`}>
+            <img
+              src={p.src}
+              alt={p.alt}
+              width="400"
+              height="400"
+              loading="lazy"
+              class="h-[370px] w-full object-cover animate-ken-burns motion-reduce:animate-none"
+              decoding="async"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+</section>
+
+<script>
+  const row = document.querySelector(".motif-row");
+  if (row) {
+    const icons = row.querySelectorAll(".motif-icon");
+    icons.forEach((icon) => icon.classList.add("animate"));
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            icons.forEach((icon, i) => {
+              (icon as HTMLElement).style.animationDelay = `${i * 0.15}s`;
+              icon.classList.add("visible");
+            });
+            observer.disconnect();
+          }
+        });
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(row);
+  }
+
+  const headline = document.querySelector(".manifesto-headline");
+  if (headline) {
+    headline.classList.add("animate");
+    const headlineObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            headline.classList.add("visible");
+            headlineObserver.disconnect();
+          }
+        });
+      },
+      { threshold: 0.3 }
+    );
+    headlineObserver.observe(headline);
+  }
+
+  function animateCount(el: HTMLElement) {
+    const target = parseInt(el.dataset.target || "0", 10);
+    if (isNaN(target)) {
+      el.textContent = el.dataset.target || "0";
+      return;
+    }
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      el.textContent = target.toString();
+      return;
+    }
+    const duration = 1600;
+    const start = performance.now();
+    function tick(now: number) {
+      const elapsed = now - start;
+      const progress = Math.min(elapsed / duration, 1);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      el.textContent = Math.round(eased * target).toString();
+      if (progress < 1) requestAnimationFrame(tick);
+    }
+    requestAnimationFrame(tick);
+  }
+
+  const statsGrid = document.querySelector(".stats-grid");
+  if (statsGrid) {
+    const values = statsGrid.querySelectorAll<HTMLElement>(".stat-value");
+    values.forEach((el) => { el.textContent = "0"; });
+
+    const statsObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            values.forEach((el, i) => {
+              setTimeout(() => animateCount(el), i * 120);
+            });
+            statsObserver.disconnect();
+          }
+        });
+      },
+      { threshold: 0.3 }
+    );
+    statsObserver.observe(statsGrid);
+  }
+</script>
diff --git a/src/components/home/OpeningsSection.astro b/src/components/home/OpeningsSection.astro
new file mode 100644
index 00000000..598836cb
--- /dev/null
+++ b/src/components/home/OpeningsSection.astro
@@ -0,0 +1,211 @@
+---
+import Button from "../ui/Button.astro";
+
+interface Role {
+  id: string;
+  title: string;
+  skillCategories: string[];
+  timeCommitment: string | null;
+  team: { name: string } | null;
+}
+
+interface Props {
+  membershipLive?: boolean;
+  roles: Role[];
+}
+
+const { membershipLive = false, roles } = Astro.props;
+const visible = roles.slice(0, 4);
+
+function applyHref(roleId: string): string {
+  return membershipLive ? `/membership?targetRoleId=${roleId}` : "/get-involved";
+}
+---
+
+<section class="bg-page pt-14 min-[810px]:pt-20 pb-14 min-[810px]:pb-20">
+  <div class="mx-auto max-w-[1400px] px-6 min-[810px]:px-10">
+
+    <div class="openings-header grid grid-cols-1 gap-6 min-[810px]:grid-cols-[1fr_1fr] min-[810px]:items-end mb-12 min-[810px]:mb-16">
+      <div>
+        <p class="ts-overline mb-8 text-ink-secondary">Current team openings</p>
+        <h2 class="ts-editorial text-ink leading-[1.2]">
+          Teams waiting for their <span class="text-brand">next volunteer</span>
+        </h2>
+      </div>
+      <p class="ts-body text-ink-secondary min-[810px]:text-right min-[810px]:max-w-[400px] min-[810px]:ml-auto">
+        {membershipLive
+          ? "This could be you. Become a member to fill one of these impactful openings."
+          : "This could be you. Get involved to fill one of these impactful openings."}
+      </p>
+    </div>
+
+    <div class="border-t border-ink-divider mb-12 min-[810px]:mb-16"></div>
+
+    <ul class="flex flex-col gap-4 mb-16 min-[810px]:mb-24 list-none p-0 m-0" role="list">
+      {visible.map((role) => (
+        <li class="opening-card-wrap">
+          <div class="opening-card rounded-[20px] border border-butter bg-sand p-6 min-[810px]:p-8 grid grid-cols-1 gap-4 min-[810px]:grid-cols-[200px_1fr_auto_auto] min-[810px]:items-center min-[810px]:gap-8">
+            <p class="ts-subheading text-ink">{role.team?.name ?? "T4P"}</p>
+            <div>
+              <p class="ts-label text-ink">{role.title}</p>
+              {role.skillCategories.length > 0 && (
+                <p class="ts-body-small text-ink-secondary mt-0.5">{role.skillCategories.join(" · ")}</p>
+              )}
+            </div>
+            {role.timeCommitment && (
+              <p class="ts-body-small text-ink-secondary">{role.timeCommitment}</p>
+            )}
+            <a
+              href={applyHref(role.id)}
+              class="ts-label flex items-center gap-2 text-brand focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+            >
+              Apply
+              <svg
+                class="opening-arrow"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                aria-hidden="true"
+              >
+                <path d="M5 12h14M13 6l6 6-6 6" />
+              </svg>
+            </a>
+          </div>
+        </li>
+      ))}
+    </ul>
+
+    <div class="openings-cta flex justify-center">
+      <Button href={membershipLive ? "/membership" : "/get-involved"} variant="primary" size="lg" arrow>{membershipLive ? "Fill an opening now" : "Get involved"}</Button>
+    </div>
+
+  </div>
+</section>
+
+<style>
+  /* Header entrance */
+  .openings-header {
+    opacity: 0;
+    translate: 0 24px;
+    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
+      translate 0.8s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+  .openings-header.in-view {
+    opacity: 1;
+    translate: none;
+  }
+
+  /* Card staggered entrance */
+  .opening-card-wrap {
+    opacity: 0;
+    translate: 0 24px;
+  }
+  .opening-card-wrap.in-view {
+    opacity: 1;
+    translate: none;
+    transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1),
+      translate 0.7s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+
+  /* Card hover */
+  .opening-card {
+    transition: background-color 0.2s ease;
+  }
+  .opening-card:hover {
+    background-color: var(--color-butter);
+  }
+
+  /* Arrow slide on hover */
+  .opening-arrow {
+    transition: translate 0.2s ease;
+  }
+  .opening-card:hover .opening-arrow {
+    translate: 4px 0;
+  }
+
+  /* CTA entrance */
+  .openings-cta {
+    opacity: 0;
+    translate: 0 24px;
+    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
+      translate 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
+  }
+  .openings-cta.in-view {
+    opacity: 1;
+    translate: none;
+  }
+
+  /* no-js fallback */
+  :global(html.no-js) .openings-header,
+  :global(html.no-js) .opening-card-wrap,
+  :global(html.no-js) .openings-cta {
+    opacity: 1;
+    translate: none;
+  }
+
+  /* reduced motion fallback */
+  @media (prefers-reduced-motion: reduce) {
+    .openings-header,
+    .opening-card-wrap,
+    .openings-cta {
+      opacity: 1;
+      translate: none;
+      transition: none;
+    }
+    .opening-card:hover .opening-arrow {
+      translate: none;
+    }
+  }
+</style>
+
+<script>
+  const prefersReducedMotion = window.matchMedia(
+    "(prefers-reduced-motion: reduce)"
+  ).matches;
+
+  if (prefersReducedMotion) {
+    document
+      .querySelectorAll<HTMLElement>(
+        ".openings-header, .opening-card-wrap, .openings-cta"
+      )
+      .forEach((el) => el.classList.add("in-view"));
+  } else {
+    const openingsHeaderObs = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("in-view");
+            openingsHeaderObs.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.15 }
+    );
+
+    document
+      .querySelectorAll<HTMLElement>(".openings-header, .openings-cta")
+      .forEach((el) => openingsHeaderObs.observe(el));
+
+    const openingsCardObs = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("in-view");
+            openingsCardObs.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+
+    document
+      .querySelectorAll<HTMLElement>(".opening-card-wrap")
+      .forEach((card, i) => {
+        card.style.transitionDelay = `${i * 0.1}s`;
+        openingsCardObs.observe(card);
+      });
+  }
+</script>
diff --git a/src/components/home/PortfolioSection.astro b/src/components/home/PortfolioSection.astro
new file mode 100644
index 00000000..90deb6f0
--- /dev/null
+++ b/src/components/home/PortfolioSection.astro
@@ -0,0 +1,297 @@
+---
+const LOGO_DEFAULTS = {
+  bg: "bg-white",
+  padding: "p-8 md:p-4 lg:p-8",
+  imgClass: "max-h-[170px] w-full max-w-[340px] object-contain",
+};
+
+const projects = [
+  {
+    name: "UpScrolled",
+    url: "https://upscrolled.com/en/",
+    description:
+      "Meta and other social media apps are controlled by billionaires and suppress pro-Palestine content. This social platform has no shadowbans and no algorithmic games. Launched and scaled via the T4P incubator and ecosystem partners.",
+    logo: { src: "/images/new-homepage/portfolio/proj-logo-5.webp", alt: "UpScrolled logo" },
+    stats: [
+      { label: "in App Store", value: "#1" },
+      { label: "users", value: "5M+" },
+    ],
+  },
+  {
+    name: "Boycat",
+    url: "https://www.boycat.io/",
+    description:
+      "Makes boycotting easy. Scan any product to check its ethical compliance and find alternatives to products complicit in the genocide in real time. Official BDS partner app, connected through T4P.",
+    logo: { src: "/images/new-homepage/portfolio/proj-logo-3.webp", alt: "Boycat logo" },
+    stats: [
+      { label: "users", value: "3M+" },
+      { label: "redirected to ethical brands", value: "$500M+" },
+    ],
+  },
+  {
+    name: "Find a Protest",
+    url: "https://www.findaprotest.info/",
+    description:
+      "Find and subscribe to protests for Palestine in your area, powered by organizers, communities, and volunteer data collectors. Powered by volunteers & strategic guidance through T4P.",
+    logo: {
+      src: "/images/new-homepage/portfolio/proj-logo-findaprotest.webp",
+      alt: "Find a Protest logo",
+      imgClass: "max-h-[120px] w-full max-w-[220px] object-contain",
+    },
+    stats: [
+      { label: "monthly users", value: "200k+" },
+      { label: "protests & solidarity events listed", value: "10k+" },
+    ],
+  },
+  {
+    name: "Thaura.ai",
+    url: "https://thaura.ai/home",
+    description:
+      "Mainstream LLM models are designed with imperialist and Zionist bias. Thaura is AI built ethically, pro-Palestine, designed around environmental, social, and privacy concerns. Launched via the T4P network to profitability.",
+    logo: { src: "/images/new-homepage/portfolio/proj-logo-4.webp", alt: "Thaura.ai logo" },
+    stats: [
+      { label: "less energy than ChatGPT per query", value: "94%" },
+      { label: "data sold to third parties", value: "0" },
+    ],
+  },
+  {
+    name: "Newscord",
+    url: "https://newscord.org/",
+    description:
+      "Exposes media bias against Palestine with AI-powered news summaries across hundreds of sources, and tracking of biased headlines & responsible news outlets. T4P marketing support & connections to ecosystem partners.",
+    logo: {
+      src: "/images/new-homepage/portfolio/proj-logo-1.webp",
+      alt: "Newscord logo",
+      bg: "bg-black",
+      padding: "px-14 py-0",
+      imgClass: "max-h-[170px] w-[180px] max-w-full object-contain",
+    },
+    stats: [{ label: "accounts reached monthly", value: "10M+" }],
+  },
+  {
+    name: "Apricot",
+    url: "https://apricotinternational.org/",
+    description:
+      "Connecting top tech talent from the Middle East, including Palestinian refugees, with US tech companies. Customer introductions and strategic advice via T4P.",
+    logo: { src: "/images/new-homepage/portfolio/proj-logo-2.webp", alt: "Apricot logo" },
+    stats: [
+      { label: "paid to placed talent", value: "$1M+" },
+      { label: "candidates", value: "10k+" },
+    ],
+  },
+];
+---
+
+<section id="portfolio" class="bg-page px-6 pt-14 pb-14 min-[810px]:px-10 min-[810px]:pt-20 min-[810px]:pb-20">
+  <div class="mx-auto max-w-[1400px]">
+    <p class="ts-overline mb-10 text-ink-secondary">Our portfolio</p>
+
+    <div class="grid grid-cols-1 gap-8 pb-10 min-[810px]:grid-cols-2 min-[810px]:gap-16 min-[810px]:pb-14">
+      <h2 class="ts-editorial text-ink">
+        Projects that came through <span class="text-brand">T4P</span>
+      </h2>
+      <div>
+        <p class="ts-body-large text-ink-secondary">
+          Each of these projects was scaled through T4P. Powered by volunteers, mentors, and people like you.
+        </p>
+        <p class="ts-body mt-4 text-ink-secondary">
+          If you have a business or nonprofit that supports Palestine, <a href="/incubator" class="text-brand hover:underline">Apply to the Incubator</a>.
+        </p>
+      </div>
+    </div>
+
+    <div class="mb-6 h-px w-full bg-ink-divider min-[810px]:mb-8"></div>
+  </div>
+
+  <div class="mx-auto max-w-[1400px]">
+  <ul class="portfolio-stack list-none p-0" role="list">
+      {projects.map((p, i) => (
+        <li
+          class="portfolio-card-wrap"
+          data-i={i}
+        >
+          <article class="portfolio-card grid w-full grid-cols-1 gap-8 rounded-[20px] border border-butter bg-sand p-6 min-[810px]:grid-cols-[1.2fr_1fr] min-[810px]:items-center min-[810px]:gap-10 min-[810px]:p-10 lg:grid-cols-2 lg:gap-12 lg:p-14">
+            <div class="flex min-w-0 flex-col">
+              <h3 class="ts-heading text-ink break-words">{p.name}</h3>
+              <p class="ts-body mt-5 max-w-[65ch] text-ink-secondary break-words">
+                {p.description}
+              </p>
+              <dl class="mt-10 flex flex-col gap-y-6 lg:mt-auto lg:flex-row lg:gap-x-10 lg:pt-12">
+                {p.stats.map((s) => (
+                  <div>
+                    <dt class="ts-body-large text-ink-secondary">{s.label}</dt>
+                    <dd class="ts-stat-large mt-2 text-brand">
+                      {s.value}
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+              {p.url && (
+                <a
+                  href={p.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="ts-label mt-8 inline-flex items-center gap-2 min-h-[44px] py-2 text-brand hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+                >
+                  Visit {p.name}
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3" />
+                  </svg>
+                </a>
+              )}
+            </div>
+
+            <div class="logo-frame relative w-full min-h-[150px] min-[810px]:min-h-0 min-[810px]:h-[190px]">
+              <div class="logo-frame-back" aria-hidden="true"></div>
+              <div class:list={["logo-frame-front relative flex items-center justify-center rounded-[16px] w-full h-full", p.logo.padding ?? LOGO_DEFAULTS.padding, p.logo.bg ?? LOGO_DEFAULTS.bg]}>
+              <img
+                src={p.logo.src}
+                alt={p.logo.alt}
+                loading="lazy"
+                decoding="async"
+                width="340"
+                height="170"
+                sizes="(max-width: 810px) 280px, 340px"
+                class={p.logo.imgClass ?? LOGO_DEFAULTS.imgClass}
+              />
+              </div>
+            </div>
+          </article>
+        </li>
+      ))}
+  </ul>
+  </div>
+</section>
+
+<style>
+  .portfolio-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .portfolio-card {
+    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+
+  .logo-frame-back {
+    position: absolute;
+    inset: 0;
+    border-radius: 16px;
+    background: var(--color-logo-frame);
+    transform: rotate(-3deg);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
+  }
+  .logo-frame-front {
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
+  }
+
+  .portfolio-card-wrap {
+    opacity: 0;
+    translate: 0 32px;
+    width: 100%;
+  }
+  .portfolio-card-wrap.in-view {
+    opacity: 1;
+    translate: none;
+    transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1), translate 0.7s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+
+  @media (min-width: 810px) {
+    .portfolio-card-wrap {
+      position: sticky;
+      transform-origin: top center;
+      opacity: 0;
+      transition: scale 0.35s ease, opacity 0.7s ease-out;
+      will-change: scale, translate;
+    }
+    .portfolio-card-wrap.in-view { opacity: 1; transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1), translate 0.7s cubic-bezier(0.25, 1, 0.5, 1); }
+    .portfolio-card-wrap[data-i="0"] { top: 40px; }
+    .portfolio-card-wrap[data-i="1"] { top: 64px; }
+    .portfolio-card-wrap[data-i="2"] { top: 88px; }
+    .portfolio-card-wrap[data-i="3"] { top: 112px; }
+    .portfolio-card-wrap[data-i="4"] { top: 136px; }
+    .portfolio-card-wrap[data-i="5"] { top: 160px; }
+  }
+
+  :global(html.no-js) .portfolio-card-wrap {
+    opacity: 1;
+    translate: none;
+    position: static;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .portfolio-card-wrap {
+      position: static;
+      opacity: 1;
+      translate: none;
+      scale: 1;
+    }
+    .portfolio-card { transition: none; }
+  }
+</style>
+
+<script>
+  const cards = Array.from(
+    document.querySelectorAll<HTMLElement>(".portfolio-card-wrap")
+  );
+
+  if (cards.length) {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            (entry.target as HTMLElement).classList.add("in-view");
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.15 }
+    );
+    cards.forEach((card, i) => {
+      card.style.transitionDelay = `${i * 0.1}s`;
+      observer.observe(card);
+    });
+
+    const prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+    const isDesktop = window.matchMedia("(min-width: 810px)").matches;
+
+    if (!prefersReducedMotion && isDesktop) {
+      const SCALE_STEP = 0.025;
+      const MIN_SCALE = 0.88;
+
+      const updateStackScales = () => {
+        // Find the index of the bottom-most card that has reached its sticky top.
+        let activeIdx = -1;
+        cards.forEach((card, i) => {
+          const rect = card.getBoundingClientRect();
+          const stickyTop = parseFloat(getComputedStyle(card).top);
+          if (rect.top <= stickyTop + 0.5) activeIdx = i;
+        });
+
+        cards.forEach((card, i) => {
+          const depth = activeIdx - i;
+          const scale =
+            depth > 0 ? Math.max(MIN_SCALE, 1 - depth * SCALE_STEP) : 1;
+          card.style.scale = scale.toString();
+        });
+      };
+
+      let ticking = false;
+      const onScroll = () => {
+        if (ticking) return;
+        ticking = true;
+        requestAnimationFrame(() => {
+          updateStackScales();
+          ticking = false;
+        });
+      };
+
+      window.addEventListener("scroll", onScroll, { passive: true });
+      window.addEventListener("resize", onScroll, { passive: true });
+      updateStackScales();
+    }
+  }
+</script>
diff --git a/src/components/home/PressSection.astro b/src/components/home/PressSection.astro
new file mode 100644
index 00000000..14387823
--- /dev/null
+++ b/src/components/home/PressSection.astro
@@ -0,0 +1,251 @@
+---
+const logos = [
+  { src: "https://upload.wikimedia.org/wikipedia/commons/7/75/The_Guardian_2018.svg",            alt: "The Guardian"                     },
+  { src: "https://e7.pngegg.com/pngimages/669/74/png-clipart-tc-techcrunch-logo-illustration-techcrunch-logo-icons-logos-emojis-iconic-brands.png", alt: "TechCrunch" },
+  { src: "https://upload.wikimedia.org/wikipedia/en/thumb/8/8f/Al_Jazeera_Media_Network_Logo.svg/1280px-Al_Jazeera_Media_Network_Logo.svg.png", alt: "Al Jazeera" },
+  { src: "https://upload.wikimedia.org/wikipedia/commons/d/d6/Inc._%28business_magazine%29_logo.svg", alt: "Inc."                        },
+  { src: "https://ssir.org/images/resources/SSIR_Logo.RGB_Black_984x234.png",                    alt: "Stanford Social Innovation Review"},
+  { src: "https://upload.wikimedia.org/wikipedia/commons/4/4f/TRT_World_logosu.png", alt: "TRT World" },
+];
+
+const articles = [
+  {
+    publication: "Stanford Social Innovation Review",
+    date: "2024",
+    headline: "Tech for Palestine Business Incubator Supports Entrepreneurs Protecting Human Rights",
+    url: "https://ssir.org/articles/entry/tech-against-genocide",
+  },
+  {
+    publication: "TechCrunch",
+    date: "Jan 2024",
+    headline: "Tech for Palestine launches to provide tools to help support Palestinians",
+    url: "https://techcrunch.com/2024/01/02/tech-for-palestine-launches-to-provide-tools-and-projects-to-help-advocate-for-palestinians/",
+  },
+  {
+    publication: "Al Jazeera",
+    date: "Jan 2026",
+    headline: "What's UpScrolled, the app gaining popularity after TikTok's US takeover?",
+    url: "https://www.aljazeera.com/news/2026/1/29/whats-upscrolled-the-app-gaining-popularity-after-tiktoks-us-takeover",
+  },
+  {
+    publication: "The Guardian",
+    date: "Nov 2025",
+    headline: "Fundraisers warn of 'catastrophic' drop in donations to Gaza since ceasefire",
+    url: "https://www.theguardian.com/global-development/2025/nov/21/fundraisers-warn-catastrophic-drop-donations-aid-palestinians-gaza-israel-ceasefire",
+  },
+  {
+    publication: "TRT World",
+    date: "2024",
+    headline: "Tech for Palestine initiative supports advocacy and accountability amid Israel's use of AI",
+    url: "https://www.trtworld.com/video/18268907",
+  },
+  {
+    publication: "Counter Points",
+    date: "2024",
+    headline: "Paul on Counter Points, Tech for Palestine",
+    url: "https://www.youtube.com/watch?v=UldcFPEZBM4&t=4388s",
+  },
+];
+---
+
+<section class="bg-page pt-14 min-[810px]:pt-20 pb-14 min-[810px]:pb-20">
+  <div class="mx-auto max-w-[1400px] px-6 min-[810px]:px-10">
+
+    <p class="ts-overline mb-8 text-ink-secondary">In the press</p>
+    <h2 class="press-heading ts-editorial text-ink mb-12 min-[810px]:mb-16">Making headlines</h2>
+
+    <!-- Publication logos -->
+    <div class="press-logos border-t border-b border-ink-divider py-6 min-[810px]:py-8">
+      <ul
+        class="flex flex-wrap items-center justify-center gap-x-10 gap-y-10 min-[810px]:gap-y-6 list-none p-0 max-w-[1000px] mx-auto w-full"
+        role="list"
+        aria-label="Publications that have covered T4P"
+      >
+        {logos.map((logo) => (
+          <li class="flex items-center">
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              loading="lazy"
+              decoding="async"
+              class="w-[150px] min-[810px]:w-[210px] object-contain"
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+
+    <!-- Article cards -->
+    <ul
+      class="mt-12 min-[810px]:mt-16 mb-16 min-[810px]:mb-24 grid grid-cols-1 gap-4 min-[810px]:grid-cols-2 lg:grid-cols-3 list-none p-0"
+      role="list"
+    >
+      {articles.map((article, i) => (
+        <li class="press-card-wrap flex" data-i={i}>
+          <a
+            href={article.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="press-card flex flex-1 flex-col rounded-[20px] border border-butter bg-sand p-6 min-[810px]:p-8 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+          >
+            <p class="ts-caption text-ink-secondary mb-5">
+              {article.publication}
+              <span class="mx-1.5" aria-hidden="true">·</span>
+              {article.date}
+            </p>
+            <h3 class="ts-subheading text-ink flex-1 leading-snug">{article.headline}</h3>
+            <span class="ts-label mt-6 flex items-center gap-2 text-brand">
+              Read article<span class="sr-only"> (opens in new tab)</span>
+              <svg
+                class="press-arrow"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                aria-hidden="true"
+              >
+                <path d="M5 12h14M13 6l6 6-6 6" />
+              </svg>
+            </span>
+          </a>
+        </li>
+      ))}
+    </ul>
+
+    <!-- Community photo -->
+    <div class="press-photo overflow-hidden rounded-2xl">
+      <img
+        src="/images/new-homepage/press/team-2.webp"
+        alt="Tech for Palestine community gathered at a workshop and strategy session"
+        width="2400"
+        height="1600"
+        loading="lazy"
+        decoding="async"
+        class="w-full h-[480px] min-[810px]:h-[560px] object-cover object-center animate-ken-burns motion-reduce:animate-none"
+      />
+    </div>
+
+  </div>
+</section>
+
+<style>
+  /* Heading entrance */
+  .press-heading {
+    opacity: 0;
+    translate: 0 24px;
+    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
+      translate 0.8s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+  .press-heading.in-view {
+    opacity: 1;
+    translate: none;
+  }
+
+  /* Logo row entrance */
+  .press-logos {
+    opacity: 0;
+    translate: 0 16px;
+    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.1s,
+      translate 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.1s;
+  }
+  .press-logos.in-view {
+    opacity: 1;
+    translate: none;
+  }
+
+  /* Article card staggered entrance */
+  .press-card-wrap {
+    opacity: 0;
+    translate: 0 24px;
+  }
+  .press-card-wrap.in-view {
+    opacity: 1;
+    translate: none;
+    transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1),
+      translate 0.7s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+
+  /* Card hover */
+  .press-card {
+    transition: background-color 0.2s ease;
+  }
+  .press-card:hover {
+    background-color: var(--color-butter);
+  }
+
+  /* Arrow slide on card hover */
+  .press-arrow {
+    transition: translate 0.2s ease;
+  }
+  .press-card:hover .press-arrow {
+    translate: 4px 0;
+  }
+
+  /* Full-bleed photo entrance */
+  .press-photo {
+    opacity: 0;
+    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
+  }
+  .press-photo.in-view {
+    opacity: 1;
+  }
+
+  :global(html.no-js) .press-heading,
+  :global(html.no-js) .press-logos,
+  :global(html.no-js) .press-card-wrap,
+  :global(html.no-js) .press-photo {
+    opacity: 1;
+    translate: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .press-heading,
+    .press-logos,
+    .press-card-wrap,
+    .press-photo {
+      opacity: 1;
+      translate: none;
+      transition: none;
+    }
+    .press-card:hover .press-arrow {
+      translate: none;
+    }
+  }
+</style>
+
+<script>
+  const sectionObs = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("in-view");
+          sectionObs.unobserve(entry.target);
+        }
+      });
+    },
+    { threshold: 0.15 }
+  );
+
+  document
+    .querySelectorAll<HTMLElement>(".press-heading, .press-logos, .press-photo")
+    .forEach((el) => sectionObs.observe(el));
+
+  const cardObs = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("in-view");
+          cardObs.unobserve(entry.target);
+        }
+      });
+    },
+    { threshold: 0.1 }
+  );
+
+  document.querySelectorAll<HTMLElement>(".press-card-wrap").forEach((card, i) => {
+    card.style.transitionDelay = `${i * 0.1}s`;
+    cardObs.observe(card);
+  });
+</script>
diff --git a/src/components/home/SupportSection.astro b/src/components/home/SupportSection.astro
new file mode 100644
index 00000000..41c3fd0d
--- /dev/null
+++ b/src/components/home/SupportSection.astro
@@ -0,0 +1,161 @@
+---
+const items = [
+  {
+    number: "01",
+    heading: "Mentorship",
+    body: "Strategy sessions and optional weekly office hours. Real guidance from people who've built, shipped, and scaled before.",
+    label: "30+ expert mentors · async + live",
+  },
+  {
+    number: "02",
+    heading: "Community",
+    body: "Access to a global network of skilled members: engineers, marketers, designers and more, with a dedicated recruitment team to match you to the people you need. Connections to NGOs, advocacy groups, civil society organizations, influencers, and funders.",
+    label: "400+ global volunteers",
+  },
+  {
+    number: "03",
+    heading: "Operations",
+    body: "Engineering expertise, security support, marketing campaigns and early users through press, influencers, ecosystem partners, and the T4P community. We help projects reach the people who need them.",
+    label: "Tailored for your needs",
+  },
+  {
+    number: "04",
+    heading: "Funding",
+    body: "Small grants for most accepted projects. Simple process, no strings attached. We fund what works, not what looks good on a deck.",
+    label: "Rolling basis",
+  },
+];
+---
+
+<section class="bg-page px-6 pt-14 pb-14 min-[810px]:px-10 min-[810px]:pt-20 min-[810px]:pb-20">
+  <div class="mx-auto max-w-[1400px]">
+    <p class="ts-overline mb-10 text-ink-secondary">Our support</p>
+
+    <h2 class="ts-editorial pb-6 text-ink">
+      How do we enable projects to <span class="text-brand">succeed?</span>
+    </h2>
+    <p class="ts-body-large pb-10 min-[810px]:pb-14 text-ink-secondary max-w-[52ch]">
+      We give teams and projects the support they need to ship, scale, and make an impact.
+    </p>
+
+    <div class="mb-14 h-px w-full bg-ink-divider min-[810px]:mb-16"></div>
+
+    <div class="support-photo mb-16 overflow-hidden rounded-2xl min-[810px]:mb-24">
+      <img
+        src="/images/new-homepage/support/team.webp"
+        alt="Tech for Palestine community gathered at the Barcelona conference, April 2026"
+        width="1600"
+        height="1067"
+        loading="lazy"
+        decoding="async"
+        class="w-full h-[480px] object-cover object-center md:h-[560px] animate-ken-burns motion-reduce:animate-none"
+      />
+    </div>
+
+    <ul class="list-none p-0" role="list">
+      {items.map((item, i) => (
+        <li
+          class="support-item rounded-[20px] bg-sand px-8 py-10 min-[810px]:grid min-[810px]:grid-cols-[4.5rem_1fr] min-[810px]:gap-x-6 min-[810px]:px-12 min-[810px]:py-12"
+          data-i={i}
+        >
+          <span class="ts-body-large mb-3 block text-ink-secondary min-[810px]:mb-0 min-[810px]:pt-1">{item.number}</span>
+          <div>
+            <h3 class="ts-subheading text-ink">{item.heading}</h3>
+            <p class="ts-body mt-4 max-w-[52ch] text-ink-secondary">{item.body}</p>
+            <p class="ts-label mt-6 text-brand">{item.label}</p>
+          </div>
+        </li>
+      ))}
+    </ul>
+  </div>
+</section>
+
+<style>
+  .support-photo {
+    opacity: 0;
+    transform: translateY(12px);
+    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+  .support-photo.in-view {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .support-item {
+    opacity: 0;
+    transform: translateY(40px) scale(0.97);
+    transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1), transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease;
+    margin-bottom: 12px;
+  }
+  .support-item.in-view {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  @media (hover: hover) and (min-width: 810px) {
+    .support-item:hover {
+      background-color: var(--color-butter);
+      transform: translateX(8px);
+    }
+    .support-item.in-view:hover {
+      transform: translateX(8px);
+    }
+  }
+
+  :global(html.no-js) .support-photo,
+  :global(html.no-js) .support-item {
+    opacity: 1;
+    transform: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .support-photo,
+    .support-item {
+      opacity: 1;
+      transform: none;
+      transition: background-color 0.2s ease;
+    }
+    .support-item:hover,
+    .support-item.in-view:hover {
+      transform: none;
+    }
+  }
+</style>
+
+<script>
+  const photo = document.querySelector<HTMLElement>(".support-photo");
+  if (photo) {
+    const photoObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("in-view");
+            photoObserver.disconnect();
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+    photoObserver.observe(photo);
+  }
+
+  const supportItems = Array.from(
+    document.querySelectorAll<HTMLElement>(".support-item")
+  );
+  if (supportItems.length) {
+    const itemObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("in-view");
+            itemObserver.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+    supportItems.forEach((item, i) => {
+      item.style.transitionDelay = `${i * 0.12}s`;
+      itemObserver.observe(item);
+    });
+  }
+</script>
diff --git a/src/components/home/TestimonialsSection.astro b/src/components/home/TestimonialsSection.astro
new file mode 100644
index 00000000..642c8b55
--- /dev/null
+++ b/src/components/home/TestimonialsSection.astro
@@ -0,0 +1,300 @@
+---
+const testimonials = [
+  {
+    quote:
+      "The valuable advice and launch support from T4P was exactly what we needed to finally hit cash-flow positive and build our impact.",
+    name: "Hani & Said Chihabi",
+    role: "Founders, Thaura",
+    logo: "/thaura.svg",
+    headshots: [
+      "/images/new-homepage/testimonials/hani.webp",
+      "/images/new-homepage/testimonials/said.webp",
+    ],
+  },
+  {
+    quote:
+      "Tech for Palestine has been a true partner to UpScrolled from the early days, opening doors to their ecosystem and standing by us at every step of the journey.",
+    name: "Issam Hijazi",
+    role: "Founder, UpScrolled",
+    logo: "/upscrolled-icon.svg",
+    headshot: "/images/new-homepage/testimonials/issam-hijazi.webp",
+  },
+  {
+    quote:
+      "With the volunteers and partnerships provided, we went from a minimally viable concept to a full-fledged global platform reaching millions of accounts each month.",
+    name: "Nima Akram",
+    role: "Founder, Newscord",
+    logo: "/newscord.svg",
+    headshot: "/images/new-homepage/testimonials/newscord.webp",
+  },
+];
+---
+
+<section class="bg-page pt-14 min-[810px]:pt-20 pb-14 min-[810px]:pb-20">
+  <div class="mx-auto max-w-[1400px] px-6 min-[810px]:px-10">
+
+    <div class="testimonials-header grid grid-cols-1 gap-6 min-[810px]:grid-cols-[1fr_1fr] min-[810px]:items-end mb-12 min-[810px]:mb-16">
+      <div>
+        <p class="ts-overline mb-8 text-ink-secondary">From the people building with us</p>
+        <h2 class="ts-editorial text-ink leading-[1.2]">
+          What it's like to <span class="text-brand">work with T4P</span>
+        </h2>
+      </div>
+      <p class="ts-body text-ink-secondary min-[810px]:text-right min-[810px]:max-w-[400px] min-[810px]:ml-auto">
+        Project leaders, mentors, and members on their time inside the coalition.
+      </p>
+    </div>
+
+    <div class="border-t border-ink-divider mb-12 min-[810px]:mb-16"></div>
+
+    <div class="testimonials-marquee -mx-6 min-[810px]:-mx-10 overflow-hidden" aria-label="Testimonials carousel">
+      <div class="marquee-track flex gap-4 min-[810px]:gap-6 w-max will-change-transform">
+        {[...testimonials, ...testimonials, ...testimonials].map((t, i) => (
+          <div class:list={["testimonial-card flex flex-col rounded-[20px] border border-butter bg-sand p-6 min-[810px]:p-8 min-w-[300px] max-w-[300px] min-[810px]:min-w-[420px] min-[810px]:max-w-[420px] shrink-0", i >= testimonials.length && "marquee-dupe"]}>
+            <svg
+              class="text-brand mb-6 shrink-0"
+              width="32"
+              height="32"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z" />
+            </svg>
+            <p class="ts-quote text-ink flex-1">{t.quote}</p>
+            <footer class="mt-8 flex items-center gap-3">
+              {t.headshots ? (
+                <div class="relative w-12 h-12 shrink-0">
+                  <img
+                    src={t.headshots[0]}
+                    alt=""
+                    width="36"
+                    height="36"
+                    loading="lazy"
+                    decoding="async"
+                    class="testimonial-avatar absolute top-0 -left-2 h-8 w-8 rounded-full object-cover z-10"
+                  />
+                  <img
+                    src={t.headshots[1]}
+                    alt=""
+                    width="36"
+                    height="36"
+                    loading="lazy"
+                    decoding="async"
+                    class="testimonial-avatar absolute bottom-0 right-0 h-8 w-8 rounded-full object-cover"
+                  />
+                </div>
+              ) : (
+                <img
+                  src={t.headshot}
+                  alt=""
+                  width="48"
+                  height="48"
+                  loading="lazy"
+                  decoding="async"
+                  class="testimonial-avatar h-12 w-12 rounded-full object-cover"
+                />
+              )}
+              <div>
+                <p class="ts-label text-ink">{t.name}</p>
+                <p class="ts-body-small mt-0.5 text-ink-secondary">{t.role}</p>
+              </div>
+            </footer>
+          </div>
+        ))}
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<style>
+  .testimonial-avatar {
+    box-shadow: 0 0 0 1px var(--color-ink-ring);
+  }
+
+  /* Header entrance */
+  .testimonials-header {
+    opacity: 0;
+    translate: 0 24px;
+    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
+      translate 0.8s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+  .testimonials-header.in-view {
+    opacity: 1;
+    translate: none;
+  }
+
+  /* Card hover */
+  .testimonial-card {
+    transition: background-color 0.2s ease;
+  }
+  .testimonial-card:hover {
+    background-color: var(--color-butter);
+  }
+
+  :global(html.no-js) .testimonials-header {
+    opacity: 1;
+    translate: none;
+  }
+  :global(html.no-js) .marquee-dupe {
+    display: none;
+  }
+  :global(html.no-js) .testimonials-marquee {
+    overflow: visible;
+    margin: 0;
+  }
+  :global(html.no-js) .marquee-track {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    justify-content: center;
+  }
+  :global(html.no-js) .testimonial-card {
+    flex: 1 1 300px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .testimonials-header {
+      opacity: 1;
+      translate: none;
+      transition: none;
+    }
+    .marquee-dupe {
+      display: none;
+    }
+    .testimonials-marquee {
+      overflow: visible;
+      margin: 0;
+    }
+    .marquee-track {
+      width: 100%;
+      flex-wrap: wrap;
+      gap: 1.5rem;
+      justify-content: center;
+    }
+    .testimonial-card {
+      flex: 1 1 300px;
+    }
+  }
+</style>
+
+<script>
+  const testimonialsHeaderObs = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("in-view");
+          testimonialsHeaderObs.unobserve(entry.target);
+        }
+      });
+    },
+    { threshold: 0.15 }
+  );
+
+  document
+    .querySelectorAll<HTMLElement>(".testimonials-header")
+    .forEach((el) => testimonialsHeaderObs.observe(el));
+
+  // Transform-based infinite scroll — no native scroll limits
+  const marquee = document.querySelector<HTMLElement>(".testimonials-marquee");
+  const track = document.querySelector<HTMLElement>(".marquee-track");
+  if (marquee && track) {
+    const oneSetWidth = track.scrollWidth / 3;
+    let offset = -oneSetWidth; // start at middle set
+    let paused = false;
+    let resumeTimer: ReturnType<typeof setTimeout>;
+    const speed = 0.5;
+
+    function wrap() {
+      if (offset <= -oneSetWidth * 2) offset += oneSetWidth;
+      else if (offset >= 0) offset -= oneSetWidth;
+    }
+
+    function render() {
+      track!.style.transform = `translateX(${offset}px)`;
+    }
+
+    function step() {
+      if (!paused) offset -= speed;
+      wrap();
+      render();
+      requestAnimationFrame(step);
+    }
+
+    // Touch
+    let touchStartX = 0;
+    let touchOffset = 0;
+    marquee.addEventListener("touchstart", (e) => {
+      paused = true;
+      clearTimeout(resumeTimer);
+      touchStartX = e.touches[0].clientX;
+      touchOffset = offset;
+    }, { passive: true });
+
+    marquee.addEventListener("touchmove", (e) => {
+      offset = touchOffset + (e.touches[0].clientX - touchStartX);
+      wrap();
+      render();
+    }, { passive: true });
+
+    marquee.addEventListener("touchend", () => {
+      resumeTimer = setTimeout(() => { paused = false; }, 2000);
+    });
+
+    // Mouse drag with momentum
+    let isDragging = false;
+    let dragStartX = 0;
+    let dragOffset = 0;
+    let velocity = 0;
+    let lastX = 0;
+    let lastTime = 0;
+
+    marquee.addEventListener("mousedown", (e) => {
+      isDragging = true;
+      paused = true;
+      clearTimeout(resumeTimer);
+      dragStartX = e.clientX;
+      dragOffset = offset;
+      lastX = e.clientX;
+      lastTime = performance.now();
+      velocity = 0;
+      e.preventDefault();
+    });
+
+    window.addEventListener("mousemove", (e) => {
+      if (!isDragging) return;
+      const now = performance.now();
+      const dt = now - lastTime;
+      const dx = e.clientX - lastX;
+      if (dt > 0) velocity = dx / dt;
+      lastX = e.clientX;
+      lastTime = now;
+      offset = dragOffset + (e.clientX - dragStartX);
+      wrap();
+      render();
+    });
+
+    window.addEventListener("mouseup", () => {
+      if (!isDragging) return;
+      isDragging = false;
+
+      const fling = () => {
+        if (Math.abs(velocity) > 0.01) {
+          offset += velocity * 16;
+          velocity *= 0.95;
+          wrap();
+          render();
+          requestAnimationFrame(fling);
+        } else {
+          resumeTimer = setTimeout(() => { paused = false; }, 2000);
+        }
+      };
+      requestAnimationFrame(fling);
+    });
+
+    if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      requestAnimationFrame(step);
+    }
+  }
+</script>
diff --git a/src/components/home/WhySection.astro b/src/components/home/WhySection.astro
new file mode 100644
index 00000000..22b03259
--- /dev/null
+++ b/src/components/home/WhySection.astro
@@ -0,0 +1,150 @@
+---
+---
+
+<section class="bg-page px-6 pt-14 pb-14 min-[810px]:px-10 min-[810px]:pt-20 min-[810px]:pb-20">
+  <div class="mx-auto max-w-[1400px]">
+    <div class="grid grid-cols-1 gap-12 lg:grid-cols-[1.15fr_1fr] lg:gap-16 xl:gap-24 lg:items-center">
+
+      <!-- Video placeholder -->
+      <div class="why-video">
+        <div class="relative overflow-hidden rounded-2xl aspect-video">
+          <div class="why-video-bg absolute inset-0"></div>
+          <div class="why-horizon"></div>
+          <div class="absolute inset-0 flex items-center justify-center">
+            <button
+              class="why-play flex items-center justify-center w-16 h-16 rounded-full border border-white/20 bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+              aria-label="Watch Paul Biggar explain why T4P exists"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="text-white/80 ml-1" aria-hidden="true">
+                <path d="M8 5v14l11-7z" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Quote -->
+      <div class="why-quote flex flex-col">
+        <p class="ts-overline mb-8 text-ink-secondary">Why T4P exists</p>
+        <blockquote>
+          <p class="ts-editorial text-ink leading-[1.3]">
+            <span class="why-text-a">"Tens of thousands of well-funded hasbara projects exist. We're building </span><span class="why-text-b text-brand">tens of thousands of liberation initiatives</span><span class="why-text-a"> to match them."</span>
+          </p>
+        </blockquote>
+        <footer class="mt-10 flex items-center gap-4">
+          <img
+            src="/images/new-homepage/why/paul.webp"
+            alt="Paul Biggar, Founder of Tech for Palestine"
+            width="56"
+            height="56"
+            loading="lazy"
+            decoding="async"
+            class="why-avatar h-14 w-14 rounded-full object-cover"
+          />
+          <div>
+            <p class="ts-label text-ink">Paul Biggar</p>
+            <p class="ts-body-small mt-1 text-ink-secondary">Founder, Tech for Palestine</p>
+          </div>
+        </footer>
+      </div>
+
+    </div>
+  </div>
+</section>
+
+<style>
+  .why-video-bg {
+    background: linear-gradient(
+      180deg,
+      #1c3549 0%,
+      #0e2231 40%,
+      #060e18 75%,
+      #020608 100%
+    );
+  }
+
+  .why-horizon {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 42%;
+    height: 1px;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.04) 30%,
+      rgba(255, 255, 255, 0.07) 50%,
+      rgba(255, 255, 255, 0.04) 70%,
+      transparent 100%
+    );
+  }
+
+  .why-play {
+    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
+  }
+  .why-play:hover {
+    background-color: rgba(255, 255, 255, 0.18);
+    border-color: rgba(255, 255, 255, 0.4);
+    transform: scale(1.08);
+  }
+
+  .why-avatar {
+    box-shadow: 0 0 0 1px var(--color-ink-ring);
+  }
+
+/* Entrance animations */
+  .why-video {
+    opacity: 0;
+    translate: 0 24px;
+    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
+      translate 0.8s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+  .why-video.in-view {
+    opacity: 1;
+    translate: none;
+  }
+
+  .why-quote {
+    opacity: 0;
+    translate: 0 24px;
+    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.15s,
+      translate 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.15s;
+  }
+  .why-quote.in-view {
+    opacity: 1;
+    translate: none;
+  }
+
+  :global(html.no-js) .why-video,
+  :global(html.no-js) .why-quote {
+    opacity: 1;
+    translate: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .why-video,
+    .why-quote {
+      opacity: 1;
+      translate: none;
+      transition: none;
+    }
+  }
+</style>
+
+<script>
+  const whyObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("in-view");
+          whyObserver.unobserve(entry.target);
+        }
+      });
+    },
+    { threshold: 0.15 }
+  );
+
+  document
+    .querySelectorAll<HTMLElement>(".why-video, .why-quote")
+    .forEach((el) => whyObserver.observe(el));
+</script>
diff --git a/src/components/ui/Button.astro b/src/components/ui/Button.astro
new file mode 100644
index 00000000..8bb72d9e
--- /dev/null
+++ b/src/components/ui/Button.astro
@@ -0,0 +1,43 @@
+---
+interface Props {
+  variant?: "primary" | "ghost" | "text";
+  size?: "md" | "lg";
+  href?: string;
+  arrow?: boolean;
+  class?: string;
+}
+
+const { variant = "primary", size = "md", href, arrow = false, class: className = "" } = Astro.props;
+
+const base =
+  "ts-label inline-flex items-center gap-2 transition-all duration-150 cursor-pointer border focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand min-h-[44px]";
+
+const sizes = {
+  md: "px-5 py-3.5",
+  lg: "px-10 py-5 min-[810px]:px-11",
+};
+
+const variants = {
+  primary:
+    "bg-brand text-white border-transparent rounded-pill hover:bg-brand-hover active:scale-[0.98]",
+  ghost:
+    "bg-transparent text-ink border-ink rounded-pill hover:bg-ink/5 active:scale-[0.98]",
+  text: "bg-transparent text-brand border-transparent p-0 rounded-none hover:underline",
+};
+
+const paddingClass = variant === "text" ? "" : sizes[size];
+
+const Tag = href ? "a" : "button";
+---
+
+<Tag
+  href={href}
+  class={`${base} ${paddingClass} ${variants[variant]} ${className}`}
+>
+  <slot />
+  {arrow && (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+      <path d="M5 12h14M13 6l6 6-6 6" />
+    </svg>
+  )}
+</Tag>
diff --git a/src/layouts/HomeLayout.astro b/src/layouts/HomeLayout.astro
new file mode 100644
index 00000000..b92d53b6
--- /dev/null
+++ b/src/layouts/HomeLayout.astro
@@ -0,0 +1,177 @@
+---
+import FooterSection from "../components/home/FooterSection.astro";
+import "@fontsource/fraunces/latin-400.css";
+import "@fontsource/outfit/latin-400.css";
+import "@fontsource/outfit/latin-500.css";
+import "../styles/base.css";
+import "../styles/design-system.css";
+
+interface Props {
+  title: string;
+  description?: string;
+  image?: string;
+}
+
+const {
+  title,
+  description = "T4P is an incubator for Palestine advocacy projects.",
+  image = "https://techforpalestine.org/t4p-social-logo.png",
+} = Astro.props;
+
+const canonicalUrl = new URL(
+  Astro.url.pathname,
+  Astro.site || "https://techforpalestine.org"
+).toString();
+---
+
+<!doctype html>
+<html lang="en" class="no-js">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content={description} />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+    <link rel="me" href="https://infosec.exchange/@tech4palestine" />
+    <link rel="preconnect" href="https://pal-chat.net" />
+    <link rel="preconnect" href="https://plausible.io" />
+    <meta name="generator" content={Astro.generator} />
+    <meta name="csp-nonce" content={Astro.locals.cspNonce} />
+    <script is:inline>
+      (function () {
+        document.documentElement.classList.remove("no-js");
+        function applyStyleString(el, value) {
+          while (el.style.length > 0) el.style.removeProperty(el.style.item(0));
+          if (!value) return;
+          value.split(";").forEach(function (part) {
+            var idx = part.indexOf(":");
+            if (idx > 0) {
+              var prop = part.slice(0, idx).trim();
+              var val = part.slice(idx + 1).trim();
+              if (!prop) return;
+              var priority = "";
+              if (/!important\s*$/.test(val)) {
+                priority = "important";
+                val = val.replace(/\s*!important\s*$/, "").trim();
+              }
+              el.style.setProperty(prop, val, priority);
+            }
+          });
+        }
+
+        var m = document.querySelector('meta[name="csp-nonce"]');
+        var n = m && m.getAttribute("content");
+        if (n) {
+          var origCreate = document.createElement.bind(document);
+          document.createElement = function (tag) {
+            var el = origCreate.apply(this, arguments);
+            if (typeof tag === "string" && tag.toLowerCase() === "style") el.nonce = n;
+            return el;
+          };
+        }
+
+        var origSetAttr = Element.prototype.setAttribute;
+        Element.prototype.setAttribute = function (name, value) {
+          if (name === "style") {
+            applyStyleString(this, value);
+            return;
+          }
+          origSetAttr.apply(this, arguments);
+        };
+
+        var origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, "innerHTML");
+        if (origInnerHTMLDesc && origInnerHTMLDesc.set) {
+          Object.defineProperty(Element.prototype, "innerHTML", {
+            get: origInnerHTMLDesc.get,
+            set: function (value) {
+              if (typeof value !== "string" || value.indexOf("style=") === -1) {
+                origInnerHTMLDesc.set.call(this, value);
+                return;
+              }
+              var cleaned = value
+                .replace(/\bstyle\s*=\s*"([^"]*)"/gi, 'data-csp-style="$1"')
+                .replace(/\bstyle\s*=\s*'([^']*)'/gi, "data-csp-style='$1'");
+              origInnerHTMLDesc.set.call(this, cleaned);
+              var els = this.querySelectorAll("[data-csp-style]");
+              for (var i = 0; i < els.length; i++) {
+                var sv = els[i].getAttribute("data-csp-style");
+                els[i].removeAttribute("data-csp-style");
+                applyStyleString(els[i], sv);
+              }
+            },
+            configurable: true,
+            enumerable: origInnerHTMLDesc.enumerable,
+          });
+        }
+      })();
+    </script>
+    <link rel="canonical" href={canonicalUrl} />
+    <title>{title}</title>
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:image" content={image} />
+    <meta property="og:url" content={canonicalUrl} />
+    <meta property="og:type" content="website" />
+    <meta property="twitter:card" name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:site" name="twitter:site" content="@tech4palestine" />
+    <meta property="twitter:title" name="twitter:title" content={title} />
+    <meta property="twitter:description" name="twitter:description" content={description} />
+    <meta property="twitter:image" name="twitter:image" content={image} />
+    <meta property="twitter:creator" name="twitter:creator" content="@tech4palestine" />
+
+    <slot name="head" />
+
+    <script>
+      import Lenis from "lenis";
+
+      if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+        const lenis = new Lenis({
+          duration: 1.8,
+          easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+          smoothWheel: true,
+        });
+
+        document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
+          anchor.addEventListener("click", (e) => {
+            const href = (anchor as HTMLAnchorElement).getAttribute("href");
+            if (!href) return;
+            const target = document.querySelector(href);
+            if (target) {
+              e.preventDefault();
+              lenis.scrollTo(target as HTMLElement);
+            }
+          });
+        });
+
+        function raf(time: number) {
+          lenis.raf(time);
+          requestAnimationFrame(raf);
+        }
+        requestAnimationFrame(raf);
+      }
+    </script>
+
+    <script defer src="https://pal-chat.net/pal-chat-lite/latest/ChatBox.js"></script>
+    <script async src="https://plausible.io/js/pa-gMn1NrWB3uBANu6ua9M8N.js"></script>
+    <script>
+      (window as any).plausible =
+        (window as any).plausible ||
+        function () {
+          (((window as any).plausible as any).q = ((window as any).plausible as any).q || []).push(
+            arguments
+          );
+        };
+      ((window as any).plausible as any).init =
+        ((window as any).plausible as any).init ||
+        function (i: any) {
+          ((window as any).plausible as any).o = i || {};
+        };
+      ((window as any).plausible as any).init();
+    </script>
+  </head>
+  <body class="relative flex min-h-screen flex-col bg-page text-ink">
+    <div class="flex-grow">
+      <slot />
+    </div>
+    <FooterSection />
+  </body>
+</html>
diff --git a/src/pages/donate.astro b/src/pages/donate.astro
index 336050d2..3b456552 100644
--- a/src/pages/donate.astro
+++ b/src/pages/donate.astro
@@ -206,72 +206,55 @@ const isUK = country === "GB";
   </div>
 
   <script is:inline define:vars={{ isUK }}>
-    // A/B Test Logic
-    document.addEventListener("DOMContentLoaded", function () {
-      // Check for URL parameter override (for testing)
-      var urlParams = new URLSearchParams(window.location.search);
-      var forceVariant = urlParams.get("variant");
+    document.addEventListener("DOMContentLoaded", () => {
+      const urlParams = new URLSearchParams(window.location.search);
+      const forceVariant = urlParams.get("variant");
 
-      var trackingVariant;
-      var formToShow;
+      let trackingVariant;
+      let formToShow;
 
       if (forceVariant === "qgiv") {
-        // Force show qgiv form with link
         formToShow = "form-qgiv-link";
         trackingVariant = "qgiv + link";
       } else if (forceVariant === "validaid") {
-        // Force show ValidAid form with link
         formToShow = "form-validaid-link";
         trackingVariant = "Validaid + link";
       } else {
-        // Randomly assign A/B test variant (50/50 split)
-        var testGroup = Math.random() < 0.5 ? "A" : "B";
+        const testGroup = Math.random() < 0.5 ? "A" : "B";
 
         if (testGroup === "A") {
-          // Control: qgiv only, no link
           formToShow = "form-qgiv-only";
           trackingVariant = "qgiv";
+        } else if (isUK) {
+          formToShow = "form-validaid-link";
+          trackingVariant = "Validaid + link";
         } else {
-          // Variant B: Geo-targeted
-          if (isUK) {
-            // UK visitors: ValidAid form + link to qgiv
-            formToShow = "form-validaid-link";
-            trackingVariant = "Validaid + link";
-          } else {
-            // Non-UK visitors: qgiv form + link to ValidAid
-            formToShow = "form-qgiv-link";
-            trackingVariant = "qgiv + link";
-          }
+          formToShow = "form-qgiv-link";
+          trackingVariant = "qgiv + link";
         }
       }
 
-      // Show the appropriate form
-      var targetForm = document.getElementById(formToShow);
+      const targetForm = document.getElementById(formToShow);
       if (targetForm) {
         targetForm.style.display = "block";
       }
 
-      // Load appropriate scripts based on which form is shown
       if (formToShow === "form-qgiv-only" || formToShow === "form-qgiv-link") {
-        // Load qgiv script
-        (function (w, d, s, id) {
-          var js,
-            fjs = d.getElementsByTagName(s)[0];
-          if (d.getElementById(id)) return;
-          js = d.createElement(s);
-          js.id = id;
+        if (!document.getElementById("qgiv-embedjs")) {
+          const js = document.createElement("script");
+          js.id = "qgiv-embedjs";
           js.src = "https://secure.qgiv.com/resources/core/js/embed.js";
+          const fjs = document.getElementsByTagName("script")[0];
           fjs.parentNode?.insertBefore(js, fjs);
-        })(window, document, "script", "qgiv-embedjs");
+        }
       } else if (formToShow === "form-validaid-link") {
-        // Handle ValidAid iframe resize
-        window.addEventListener("message", function (event) {
+        window.addEventListener("message", (event) => {
           if (event.origin !== "https://validaid.org") return;
           if (
             event.data.type === "validaid-resize" &&
             event.data.iframeId === "validaid-iframe-event-236"
           ) {
-            var iframe = document.getElementById("validaid-iframe-event-236");
+            const iframe = document.getElementById("validaid-iframe-event-236");
             if (iframe) {
               iframe.style.height = event.data.height + "px";
             }
@@ -320,6 +303,18 @@ const isUK = country === "GB";
       if (typeof window.plausible !== "undefined") {
         window.plausible("Donate Form", { props: { donate_form_variant: trackingVariant } });
       }
+
+      const presetAmount = urlParams.get("amount");
+      if (presetAmount && (formToShow === "form-qgiv-only" || formToShow === "form-qgiv-link")) {
+        const amountToId = { "25": "1620628", "50": "1620629", "100": "1620630", "500": "1620631", "custom": "1620632" };
+        const targetId = amountToId[presetAmount];
+        if (targetId) {
+          document.querySelectorAll(".qgiv-embed-container[data-embed]").forEach((el) => {
+            const base = el.getAttribute("data-embed");
+            el.setAttribute("data-embed", base.replace(/\/amount\/\d+\//, "/amount/" + targetId + "/"));
+          });
+        }
+      }
     });
   </script>
 </Layout>
diff --git a/src/pages/home-new.astro b/src/pages/home-new.astro
new file mode 100644
index 00000000..3a0370e5
--- /dev/null
+++ b/src/pages/home-new.astro
@@ -0,0 +1,51 @@
+---
+import { getEnv } from "../utils/getEnv";
+import HomeLayout from "../layouts/HomeLayout.astro";
+import HeroSection from "../components/home/HeroSection.astro";
+import ManifestoSection from "../components/home/ManifestoSection.astro";
+import WhySection from "../components/home/WhySection.astro";
+import PortfolioSection from "../components/home/PortfolioSection.astro";
+import SupportSection from "../components/home/SupportSection.astro";
+import TestimonialsSection from "../components/home/TestimonialsSection.astro";
+import OpeningsSection from "../components/home/OpeningsSection.astro";
+import PressSection from "../components/home/PressSection.astro";
+import CtaSection from "../components/home/CtaSection.astro";
+import HomeNavbar from "../components/home/HomeNavbar.astro";
+
+const membershipLive = getEnv("MEMBERSHIP_LIVE", Astro.locals) === "true";
+
+let openRoles: Array<{
+  id: string;
+  title: string;
+  skillCategories: string[];
+  timeCommitment: string | null;
+  team: { name: string } | null;
+}> = [];
+
+try {
+  const res = await fetch("https://hub.techforpalestine.org/api/public/open-roles");
+  if (res.ok) {
+    openRoles = await res.json();
+  }
+} catch {}
+---
+
+<HomeLayout
+  title="Tech For Palestine"
+  description="A coalition of thousands of founders, engineers, product marketers, investors and other professionals working in support of Palestinian liberation."
+>
+  <link rel="preload" as="image" href="/images/new-homepage/hero/hero.webp" fetchpriority="high" slot="head" />
+  <link rel="preload" as="image" href="/images/new-homepage/manifesto/who-are-we-4.webp" slot="head" />
+  <HomeNavbar membershipLive={membershipLive} />
+  <main>
+    <HeroSection />
+    <ManifestoSection />
+    <PortfolioSection />
+    <SupportSection />
+    <WhySection />
+    <TestimonialsSection />
+    {openRoles.length > 0 && <OpeningsSection membershipLive={membershipLive} roles={openRoles} />}
+    <PressSection />
+    <CtaSection membershipLive={membershipLive} />
+  </main>
+</HomeLayout>
diff --git a/src/styles/design-system.css b/src/styles/design-system.css
new file mode 100644
index 00000000..97450c63
--- /dev/null
+++ b/src/styles/design-system.css
@@ -0,0 +1,297 @@
+/* Tech for Palestine Design System — Typography Scale
+   Three breakpoints: 390 (base) / 810 (sm) / 1200 (lg)
+   Fraunces for editorial, Outfit for UI.
+   Fonts are loaded via <link> in the layout head. */
+
+/* CSS custom property bridge — exposes design tokens to scoped <style> blocks */
+:root {
+  --color-ink: #2A2428;
+  --color-ink-dark: #201D1E;
+  --color-ink-secondary: #73656E;
+  --color-ink-divider: #D6D6D6;
+  --color-brand-light: #E8727F;
+  --color-butter: #F7EAD4;
+  --color-logo-frame: #EFE3D4;
+  --color-ink-ring: rgba(42, 36, 40, 0.12);
+}
+
+/* Brand hover utility — defined here so JIT scanning is not required */
+.hover\:bg-brand-hover:hover {
+  background-color: theme('colors.brand.hover');
+}
+
+/* Fraunces — editorial */
+.ts-editorial {
+  font-family: "Fraunces", "Fraunces Placeholder", serif;
+  font-weight: 400;
+  line-height: 1.18;
+  font-size: 36px;
+  letter-spacing: -0.01em;
+}
+.ts-display {
+  font-family: "Fraunces", "Fraunces Placeholder", serif;
+  font-weight: 400;
+  line-height: 1.22;
+  font-size: 42px;
+}
+.ts-stat {
+  font-family: "Fraunces", "Fraunces Placeholder", serif;
+  font-weight: 400;
+  line-height: 1.22;
+  font-size: 36px;
+}
+.ts-stat-large {
+  font-family: "Fraunces", "Fraunces Placeholder", serif;
+  font-weight: 400;
+  line-height: 1;
+  font-size: 42px;
+}
+.ts-heading {
+  font-family: "Fraunces", "Fraunces Placeholder", serif;
+  font-weight: 400;
+  line-height: 1.22;
+  font-size: 32px;
+}
+.ts-subheading {
+  font-family: "Fraunces", "Fraunces Placeholder", serif;
+  font-weight: 400;
+  line-height: 1.22;
+  font-size: 28px;
+}
+.ts-quote {
+  font-family: "Fraunces", "Fraunces Placeholder", serif;
+  font-weight: 400;
+  line-height: 1.32;
+  font-size: 22px;
+}
+.ts-eyebrow {
+  font-family: "Fraunces", "Fraunces Placeholder", serif;
+  font-weight: 400;
+  line-height: 1.32;
+  font-size: 18px;
+}
+
+/* Outfit — UI */
+.ts-body-large {
+  font-family: "Outfit", system-ui, sans-serif;
+  font-weight: 400;
+  line-height: 1.48;
+  font-size: 18px;
+}
+.ts-body {
+  font-family: "Outfit", system-ui, sans-serif;
+  font-weight: 400;
+  line-height: 1.22;
+  font-size: 16px;
+}
+.ts-label {
+  font-family: "Outfit", system-ui, sans-serif;
+  font-weight: 500;
+  line-height: 1;
+  font-size: 16px;
+}
+.ts-body-small {
+  font-family: "Outfit", system-ui, sans-serif;
+  font-weight: 400;
+  line-height: 1.22;
+  font-size: 14px;
+}
+.ts-caption {
+  font-family: "Outfit", system-ui, sans-serif;
+  font-weight: 400;
+  line-height: 1;
+  font-size: 14px;
+}
+.ts-overline {
+  font-family: "Outfit", system-ui, sans-serif;
+  font-weight: 500;
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+/* 810px breakpoint */
+@media (min-width: 810px) {
+  .ts-editorial     { font-size: 42px; }
+  .ts-display       { font-size: 52px; }
+  .ts-stat          { font-size: 42px; }
+  .ts-stat-large    { font-size: 52px; }
+
+  .ts-heading       { font-size: 36px; }
+  .ts-subheading    { font-size: 30px; }
+  .ts-quote         { font-size: 24px; }
+  .ts-eyebrow { font-size: 19px; }
+  .ts-body-large    { font-size: 20px; }
+  .ts-body          { font-size: 18px; }
+  .ts-label         { font-size: 18px; }
+  .ts-body-small    { font-size: 16px; }
+}
+
+/* 1200px breakpoint */
+@media (min-width: 1200px) {
+  .ts-editorial     { font-size: 48px; }
+  .ts-display       { font-size: 60px; }
+  .ts-stat          { font-size: 48px; }
+  .ts-stat-large    { font-size: 60px; }
+  .ts-heading       { font-size: 38px; }
+  .ts-subheading    { font-size: 32px; }
+  .ts-quote         { font-size: 26px; }
+  .ts-eyebrow { font-size: 24px; }
+  .ts-body-large    { font-size: 20px; }
+}
+
+html.no-js {
+  scroll-behavior: smooth;
+}
+
+html.no-js .hero-card,
+html.no-js .hero-h1-a,
+html.no-js .hero-h1-b,
+html.no-js .hero-cta-a,
+html.no-js .hero-cta-b,
+html.no-js .hero-logo {
+  animation: none;
+  opacity: 1;
+  transform: none;
+  filter: none;
+}
+
+html.no-js .scroll-indicator {
+  animation: none;
+}
+
+@keyframes blurIn {
+  from { opacity: 0; filter: blur(12px); transform: translateY(20px); }
+  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
+}
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes cardIn {
+  from { opacity: 0; transform: scale(0.96); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+.hero-card   { animation: cardIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) both; }
+.hero-h1-a   { animation: blurIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
+.hero-h1-b   { animation: blurIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; }
+.hero-cta-a  { animation: fadeUp 0.6s cubic-bezier(0.25, 1, 0.5, 1) 1s both; }
+.hero-cta-b  { animation: fadeUp 0.6s cubic-bezier(0.25, 1, 0.5, 1) 1.15s both; }
+.hero-logo   { animation: fadeUp 0.6s cubic-bezier(0.25, 1, 0.5, 1) 1.3s both; }
+
+@keyframes kenBurns {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.08); }
+}
+.animate-ken-burns {
+  animation: kenBurns 14s ease-in-out infinite;
+}
+
+/* Motif staggered fade */
+@keyframes fadeLeft {
+  from { opacity: 0; transform: translateX(-16px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+.motif-icon.animate {
+  opacity: 0;
+}
+.motif-icon.animate.visible {
+  animation: fadeLeft 0.6s cubic-bezier(0.25, 1, 0.5, 1) both;
+}
+
+.manifesto-headline.animate {
+  opacity: 0;
+}
+.manifesto-headline.animate.visible {
+  opacity: 1;
+}
+.manifesto-headline.animate.visible .manifesto-text-a {
+  animation: blurIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
+}
+.manifesto-headline.animate.visible .manifesto-text-b {
+  animation: blurIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
+}
+
+/* Collage cards */
+.collage-card-1 { transform: rotate(-10deg); }
+.collage-card-2 { transform: rotate(6deg); }
+.collage-card-3 { transform: rotate(-2deg); }
+.collage-card-4 { transform: rotate(8deg); }
+
+@media (min-width: 1024px) {
+  .collage-card-1 { transform: rotate(-8deg); }
+  .collage-card-2 { transform: rotate(6deg); }
+  .collage-card-3 { transform: rotate(-5deg); }
+  .collage-card-4 { transform: rotate(7deg); }
+}
+
+@media (max-width: 639px) {
+  .collage-card-1 { transform: rotate(-6deg); }
+  .collage-card-3 { transform: rotate(5deg); }
+}
+
+/* Ken-burns stagger — one card animating at a time */
+.collage-card-1 img { animation-delay: 0s; }
+.collage-card-2 img { animation-delay: 3.5s; }
+.collage-card-3 img { animation-delay: 7s; }
+.collage-card-4 img { animation-delay: 10.5s; }
+
+/* Scroll indicator bounce */
+@keyframes scrollBounce {
+  0%, 100% { transform: translateY(0); opacity: 1; }
+  50% { transform: translateY(6px); opacity: 0.6; }
+}
+.scroll-indicator {
+  animation: scrollBounce 1.8s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Hero — show at final resting state immediately */
+  .hero-card {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+  .hero-h1-a,
+  .hero-h1-b,
+  .hero-cta-a,
+  .hero-cta-b,
+  .hero-logo {
+    animation: none;
+    opacity: 1;
+    transform: none;
+    filter: none;
+  }
+
+  /* Scroll indicator — stop bouncing */
+  .scroll-indicator {
+    animation: none;
+  }
+
+  /* Ken-burns — disable on all images */
+  .animate-ken-burns {
+    animation: none;
+  }
+
+  /* Motif row — show all at full opacity immediately */
+  .motif-icon.animate {
+    opacity: 1;
+  }
+  .motif-icon.animate.visible {
+    animation: none;
+    transform: none;
+  }
+
+  /* Manifesto headline — show at full opacity immediately */
+  .manifesto-headline.animate {
+    opacity: 1;
+  }
+  .manifesto-headline.animate.visible .manifesto-text-a,
+  .manifesto-headline.animate.visible .manifesto-text-b {
+    animation: none;
+    opacity: 1;
+    transform: none;
+    filter: none;
+  }
+}
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index e1412130..fc1f9f22 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -12,6 +12,34 @@ export default {
       animation: {
         fadeIn: "fadeIn 0.5s ease-out forwards",
       },
+      colors: {
+        page: "#FFFBF5",
+        cream: "#FBF2ED",
+        butter: "#F7EAD4",
+        sand: "#F7F2E8",
+        ink: {
+          DEFAULT: "#2A2428",
+          dark: "#201D1E",
+          secondary: "#73656E",
+          muted: "#B5B5B5",
+          divider: "#D6D6D6",
+        },
+        brand: {
+          DEFAULT: "#AB4956",
+          hover: "#D35464",
+          light: "#E8727F",
+        },
+      },
+      fontFamily: {
+        serif: ["Fraunces", "Fraunces Placeholder", "serif"],
+        sans: ["Outfit", "system-ui", "sans-serif"],
+      },
+      borderRadius: {
+        sm: "8px",
+        md: "16px",
+        lg: "24px",
+        pill: "999px",
+      },
       red: {
         50: "#fff1f3",
         100: "#ffe0e3",