From b0892b79465ebaf476566e6271560fb40b9e8aba Mon Sep 17 00:00:00 2001
From: mohanadft <mohanadfteha@gmail.com>
Date: Mon, 13 Jul 2026 18:13:28 +0300
Subject: [PATCH 1/2] fix(seo): address verified findings from -new pages
 SEO/GEO/AEO audit

- Add YouTube, Discord, TikTok, and Bluesky to the sitewide Organization
  sameAs schema so it matches the profiles actually linked in the footer
- Standardize title tag branding to "Page | Tech for Palestine" across
  contact-new, get-involved-new, e4p-new, ideas-new, and media-new, and
  fix help/hire-new's inconsistent hyphen separator
- Lengthen help/hire-new's meta description to a more useful length
- Add Person schema for founder Paul Biggar on about-new, matching the
  pattern already used on team-new
---
 src/layouts/HomeLayout.astro     |  4 ++++
 src/pages/about-new.astro        | 15 +++++++++++++++
 src/pages/contact-new.astro      |  2 +-
 src/pages/e4p-new.astro          |  2 +-
 src/pages/get-involved-new.astro |  2 +-
 src/pages/help/hire-new.astro    |  4 ++--
 src/pages/ideas-new.astro        |  2 +-
 src/pages/media-new.astro        |  2 +-
 8 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/layouts/HomeLayout.astro b/src/layouts/HomeLayout.astro
index 0782c5e..4e0e233 100644
--- a/src/layouts/HomeLayout.astro
+++ b/src/layouts/HomeLayout.astro
@@ -49,6 +49,10 @@ const organizationSchema = {
     "https://github.com/TechForPalestine/",
     "https://www.linkedin.com/company/techforpalestine/",
     "https://infosec.exchange/@tech4palestine",
+    "https://www.youtube.com/@tech4palestine",
+    "https://techforpalestine.org/discord-invite",
+    "https://www.tiktok.com/@techforpalestine",
+    "https://bsky.app/profile/techforpalestine.org",
   ],
 };
 ---
diff --git a/src/pages/about-new.astro b/src/pages/about-new.astro
index 38bb391..5240883 100644
--- a/src/pages/about-new.astro
+++ b/src/pages/about-new.astro
@@ -6,6 +6,18 @@ import Button from "../components/ui/Button.astro";
 import SignUpForm from "../structures/SignUpForm.astro";
 
 const membershipLive = getEnv("MEMBERSHIP_LIVE", Astro.locals) === "true";
+
+const founderSchema = {
+  "@context": "https://schema.org",
+  "@type": "Person",
+  name: "Paul Biggar",
+  jobTitle: "Founder",
+  worksFor: {
+    "@type": "NonprofitOrganization",
+    name: "Tech for Palestine",
+  },
+  sameAs: ["https://blog.paulbiggar.com/", "https://circleci.com", "https://darklang.com"],
+};
 ---
 
 <HomeLayout
@@ -13,6 +25,9 @@ const membershipLive = getEnv("MEMBERSHIP_LIVE", Astro.locals) === "true";
   description="Tech for Palestine is a 501(c)(3) nonprofit that incubates and scales tech and advocacy projects for Palestinian liberation."
   noindex={true}
 >
+  <Fragment slot="head">
+    <script type="application/ld+json" set:html={JSON.stringify(founderSchema)} />
+  </Fragment>
   <HomeNavbar membershipLive={membershipLive} alwaysVisible />
   <main class="pt-20">
     <!-- Hero -->
diff --git a/src/pages/contact-new.astro b/src/pages/contact-new.astro
index 3be8847..c94d7dd 100644
--- a/src/pages/contact-new.astro
+++ b/src/pages/contact-new.astro
@@ -6,7 +6,7 @@ const membershipLive = getEnv("MEMBERSHIP_LIVE", Astro.locals) === "true";
 ---
 
 <HomeLayout
-  title="Contact Us"
+  title="Contact Us | Tech for Palestine"
   description="Get in touch with Tech for Palestine — general questions, media inquiries, or request an endorsement for your campaign."
   noindex={true}
 >
diff --git a/src/pages/e4p-new.astro b/src/pages/e4p-new.astro
index 6461b30..fdc68eb 100644
--- a/src/pages/e4p-new.astro
+++ b/src/pages/e4p-new.astro
@@ -158,7 +158,7 @@ const peopleSchema = [...testimonials, ...founders].map((person) => ({
 ---
 
 <HomeLayout
-  title="Entrepreneurs for Palestine"
+  title="Entrepreneurs for Palestine | Tech for Palestine"
   description="Entrepreneurs for Palestine is a global community of founders and CEOs joining forces to stand up for what's right and make a difference for the Palestinian cause."
   noindex={true}
 >
diff --git a/src/pages/get-involved-new.astro b/src/pages/get-involved-new.astro
index 3c4f690..43b1023 100644
--- a/src/pages/get-involved-new.astro
+++ b/src/pages/get-involved-new.astro
@@ -9,7 +9,7 @@ const membershipLive = getEnv("MEMBERSHIP_LIVE", Astro.locals) === "true";
 ---
 
 <HomeLayout
-  title="Get Involved"
+  title="Get Involved | Tech for Palestine"
   description="Join our mission-driven community building tools and projects for Palestinian liberation. Volunteer, mentor, build, and more."
   noindex={true}
 >
diff --git a/src/pages/help/hire-new.astro b/src/pages/help/hire-new.astro
index 78b2072..5d1eb55 100644
--- a/src/pages/help/hire-new.astro
+++ b/src/pages/help/hire-new.astro
@@ -154,8 +154,8 @@ const hireItemListSchema = {
 ---
 
 <HomeLayout
-  title="Jobs for Palestinians - Tech for Palestine"
-  description="Find organizations that connect Palestinian job seekers with employers."
+  title="Jobs for Palestinians | Tech for Palestine"
+  description="Find organizations that connect Palestinian job seekers with employers, from recruitment platforms to freelance networks built for the movement."
   noindex={true}
 >
   <Fragment slot="head">
diff --git a/src/pages/ideas-new.astro b/src/pages/ideas-new.astro
index 1aa88b4..4ec4b3d 100644
--- a/src/pages/ideas-new.astro
+++ b/src/pages/ideas-new.astro
@@ -31,7 +31,7 @@ const startedIdeas = rawIdeas.filter((i) => i.category === "started").map(mapIde
 ---
 
 <HomeLayout
-  title="Project Ideas"
+  title="Project Ideas | Tech for Palestine"
   description="Browse and lead Palestinian advocacy project ideas from the Tech for Palestine Incubator — new, existing, and already-started initiatives."
   noindex={true}
 >
diff --git a/src/pages/media-new.astro b/src/pages/media-new.astro
index db9ce7e..be724bd 100644
--- a/src/pages/media-new.astro
+++ b/src/pages/media-new.astro
@@ -159,7 +159,7 @@ const pressSchema = {
 ---
 
 <HomeLayout
-  title="Media & Press"
+  title="Media & Press | Tech for Palestine"
   description="Interviews, news coverage, press kit, and media resources for Tech for Palestine."
   noindex={true}
 >

From dc614c9fc6892fd5660d2a074d5633c99760be9c Mon Sep 17 00:00:00 2001
From: mohanadft <mohanadfteha@gmail.com>
Date: Tue, 14 Jul 2026 11:24:02 +0300
Subject: [PATCH 2/2] feat(e4p): add pledge-new page with PledgeForm and
 SignatoriesNew

Adds a new orphan draft page for the E4P pledge flow, excluded from
the sitemap per the -new page convention, and links to it from the
e4p-new landing page.
---
 astro.config.mjs                  |   1 +
 src/components/PledgeForm.tsx     | 194 +++++++++++++++++++++++++++++
 src/components/SignatoriesNew.tsx | 108 ++++++++++++++++
 src/pages/e4p-new.astro           |   4 +-
 src/pages/e4p/pledge-new.astro    | 197 ++++++++++++++++++++++++++++++
 5 files changed, 502 insertions(+), 2 deletions(-)
 create mode 100644 src/components/PledgeForm.tsx
 create mode 100644 src/components/SignatoriesNew.tsx
 create mode 100644 src/pages/e4p/pledge-new.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index 8644063..5795cd1 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -91,6 +91,7 @@ export default defineConfig({
           "/events-new/",
           "/home-new/",
           "/endorsements-new/",
+          "/e4p/pledge-new/",
         ];
         return !exclude.some((path) => page.endsWith(path));
       },
diff --git a/src/components/PledgeForm.tsx b/src/components/PledgeForm.tsx
new file mode 100644
index 0000000..3f0e64d
--- /dev/null
+++ b/src/components/PledgeForm.tsx
@@ -0,0 +1,194 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import TextField from "@mui/material/TextField";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Button from "@mui/material/Button";
+import Alert from "@mui/material/Alert";
+import CircularProgress from "@mui/material/CircularProgress";
+import Box from "@mui/material/Box";
+
+type FormData = {
+  name: string;
+  email: string;
+  company: string;
+  position: string;
+  linkedin: string;
+  agreement: boolean;
+};
+
+const inputSx = {
+  backgroundColor: "white",
+  borderRadius: "8px",
+  "& .MuiInputBase-input": {
+    backgroundColor: "white",
+  },
+};
+
+export default function PledgeForm() {
+  const [submitted, setSubmitted] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<FormData>({
+    defaultValues: { agreement: false },
+  });
+
+  const onSubmit = async (data: FormData) => {
+    setSubmitting(true);
+    setError(null);
+
+    try {
+      const body = new FormData();
+      body.set("name", data.name);
+      body.set("email", data.email);
+      body.set("company", data.company);
+      body.set("position", data.position);
+      body.set("linkedin", data.linkedin);
+      if (data.agreement) body.set("agreement", "on");
+
+      const response = await fetch("/api/e4p-pledge-sign", {
+        method: "POST",
+        body,
+      });
+
+      if (!response.ok) {
+        const body = await response.json();
+        throw new Error(body.error || "Submission failed");
+      }
+
+      reset();
+      setSubmitted(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} noValidate>
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
+        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" }, gap: 3 }}>
+          <TextField
+            label={
+              <span>
+                Name <span style={{ color: "#AB4956" }}>*</span>
+              </span>
+            }
+            fullWidth
+            sx={inputSx}
+            error={!!errors.name}
+            helperText={errors.name?.message}
+            {...register("name", { required: "Name is required" })}
+          />
+          <TextField
+            label={
+              <span>
+                Email <span style={{ color: "#AB4956" }}>*</span>
+              </span>
+            }
+            type="email"
+            fullWidth
+            sx={inputSx}
+            error={!!errors.email}
+            helperText={errors.email?.message}
+            {...register("email", {
+              required: "Email is required",
+              pattern: { value: /^\S+@\S+\.\S+$/, message: "Invalid email address" },
+            })}
+          />
+        </Box>
+
+        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" }, gap: 3 }}>
+          <TextField
+            label={
+              <span>
+                Your company <span style={{ color: "#AB4956" }}>*</span>
+              </span>
+            }
+            fullWidth
+            sx={inputSx}
+            error={!!errors.company}
+            helperText={errors.company?.message}
+            {...register("company", { required: "Company is required" })}
+          />
+          <TextField
+            label={
+              <span>
+                Your position <span style={{ color: "#AB4956" }}>*</span>
+              </span>
+            }
+            fullWidth
+            sx={inputSx}
+            error={!!errors.position}
+            helperText={errors.position?.message}
+            {...register("position", { required: "Position is required" })}
+          />
+        </Box>
+
+        <TextField
+          label={
+            <span>
+              LinkedIn URL <span style={{ color: "#AB4956" }}>*</span>
+            </span>
+          }
+          type="url"
+          fullWidth
+          placeholder="https://linkedin.com/in/your-profile"
+          sx={inputSx}
+          error={!!errors.linkedin}
+          helperText={errors.linkedin?.message}
+          {...register("linkedin", {
+            required: "LinkedIn URL is required",
+            pattern: {
+              value: /^https?:\/\/.+/,
+              message: "Must be a valid URL starting with http:// or https://",
+            },
+          })}
+        />
+
+        <FormControlLabel
+          control={<Checkbox {...register("agreement", { required: true })} />}
+          label="I agree that my submitted data will be processed and stored by Entrepreneurs for Palestine and that my name, position and company will be listed under the Signatories section of this pledge."
+        />
+        {errors.agreement && (
+          <Alert severity="error" sx={{ mt: -2 }}>
+            You must agree before signing the pledge.
+          </Alert>
+        )}
+
+        {error && <Alert severity="error">{error}</Alert>}
+
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+          <Button
+            type="submit"
+            variant="contained"
+            disabled={submitting}
+            startIcon={submitting ? <CircularProgress size={16} color="inherit" /> : null}
+            sx={{
+              backgroundColor: "#AB4956",
+              "&:hover": { backgroundColor: "#D35464" },
+              px: 4,
+              py: 1.5,
+              fontWeight: 600,
+            }}
+          >
+            {submitting ? "Signing..." : "Sign pledge"}
+          </Button>
+          {submitted && (
+            <Alert severity="success">
+              <strong>Thank you for signing the pledge.</strong> We will include you in the list of
+              signatories once your submission has been verified.
+            </Alert>
+          )}
+        </Box>
+      </Box>
+    </form>
+  );
+}
diff --git a/src/components/SignatoriesNew.tsx b/src/components/SignatoriesNew.tsx
new file mode 100644
index 0000000..8cd677a
--- /dev/null
+++ b/src/components/SignatoriesNew.tsx
@@ -0,0 +1,108 @@
+import { useState, useEffect } from "react";
+
+interface Signatory {
+  id: string;
+  name: string;
+  company: string;
+  position: string;
+  linkedinUrl: string;
+  signedAt: string;
+  approved: boolean;
+}
+
+interface SignatoriesNewProps {
+  initialSignatories?: Signatory[];
+  loading?: boolean;
+}
+
+export default function SignatoriesNew({
+  initialSignatories = [],
+  loading: initialLoading = false,
+}: SignatoriesNewProps) {
+  const [signatories, setSignatories] = useState<Signatory[]>(initialSignatories);
+  const [loading, setLoading] = useState(initialLoading);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchSignatories = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await fetch("/api/e4p-signatories");
+      if (!response.ok) {
+        throw new Error("Failed to fetch signatories");
+      }
+
+      const data = await response.json();
+      setSignatories(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch signatories");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (initialSignatories.length === 0) {
+      fetchSignatories();
+    }
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="space-y-3">
+        {[...Array(5)].map((_, i) => (
+          <div key={i} className="animate-pulse">
+            <div className="h-4 w-3/4 rounded bg-butter"></div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="py-8 text-center">
+        <p className="ts-body-large mb-4 text-brand">{error}</p>
+        <button
+          onClick={fetchSignatories}
+          className="ts-label rounded-pill bg-brand px-5 py-3 text-white transition-colors hover:bg-brand-hover"
+        >
+          Try Again
+        </button>
+      </div>
+    );
+  }
+
+  if (signatories.length === 0) {
+    return (
+      <div className="py-8">
+        <p className="ts-body-large text-ink-secondary">
+          No signatories yet. Be the first to sign the pledge!
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <p className="ts-label mb-6 text-ink-secondary">
+        {signatories.length} {signatories.length === 1 ? "signatory" : "signatories"}
+      </p>
+
+      <ul>
+        {signatories.map((signatory) => (
+          <li
+            key={signatory.id}
+            className="flex flex-wrap items-baseline gap-x-1.5 border-b border-butter py-3 last:border-b-0"
+          >
+            <span className="ts-label text-ink">{signatory.name}</span>
+            <span className="ts-body-small text-ink-secondary">
+              {signatory.position} at {signatory.company}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/src/pages/e4p-new.astro b/src/pages/e4p-new.astro
index fdc68eb..dcb1910 100644
--- a/src/pages/e4p-new.astro
+++ b/src/pages/e4p-new.astro
@@ -197,7 +197,7 @@ const peopleSchema = [...testimonials, ...founders].map((person) => ({
             <Button href="/e4p/sign-up" variant="primary" size="md" arrow>
               Join the Community
             </Button>
-            <Button href="/e4p/pledge" variant="ghost" size="md"> Sign the E4P Pledge </Button>
+            <Button href="/e4p/pledge-new" variant="ghost" size="md"> Sign the E4P Pledge </Button>
           </div>
         </div>
       </div>
@@ -278,7 +278,7 @@ const peopleSchema = [...testimonials, ...founders].map((person) => ({
             >.&rdquo;
           </blockquote>
           <a
-            href="/e4p/pledge"
+            href="/e4p/pledge-new"
             class="ts-label inline-flex min-h-[44px] items-center gap-2 rounded-pill border border-butter px-5 py-3.5 text-brand transition-colors duration-150 hover:bg-butter"
           >
             Sign the E4P Pledge
diff --git a/src/pages/e4p/pledge-new.astro b/src/pages/e4p/pledge-new.astro
new file mode 100644
index 0000000..125507b
--- /dev/null
+++ b/src/pages/e4p/pledge-new.astro
@@ -0,0 +1,197 @@
+---
+import { getEnv } from "../../utils/getEnv";
+import HomeLayout from "../../layouts/HomeLayout.astro";
+import HomeNavbar from "../../components/home/HomeNavbar.astro";
+import Button from "../../components/ui/Button.astro";
+import SignatoriesNew from "../../components/SignatoriesNew.tsx";
+import PledgeForm from "../../components/PledgeForm.tsx";
+
+const membershipLive = getEnv("MEMBERSHIP_LIVE", Astro.locals) === "true";
+---
+
+<HomeLayout
+  title="E4P Pledge | Tech for Palestine"
+  description="Entrepreneurs and founders pledging to steer their companies' hiring, operations, and fundraising in support of Palestinian liberation."
+  noindex={true}
+>
+  <HomeNavbar membershipLive={membershipLive} alwaysVisible />
+
+  <main class="pt-20">
+    <!-- Hero -->
+    <section class="bg-page px-6 py-14 min-[810px]:px-10 min-[810px]:py-20">
+      <div class="mx-auto max-w-[1400px]">
+        <div class="pledge-animate max-w-[680px]">
+          <p class="ts-overline mb-6 text-ink-secondary">Entrepreneurs for Palestine</p>
+          <h1 class="ts-editorial mb-6 text-ink">
+            The <span class="text-brand">E4P Pledge</span>
+          </h1>
+          <p class="ts-body-large mb-10 max-w-[65ch] text-ink-secondary">
+            An open letter from entrepreneurs, founders, and CEOs pledging to use our companies'
+            hiring, operations, and fundraising to support the Palestinian struggle for justice,
+            equality, and liberation.
+          </p>
+          <Button href="#sign" variant="primary" size="md" arrow>Sign the pledge</Button>
+        </div>
+      </div>
+    </section>
+
+    <!-- The Pledge -->
+    <section class="bg-sand px-6 py-14 min-[810px]:px-10 min-[810px]:py-20">
+      <div class="mx-auto max-w-[1400px]">
+        <div class="pledge-animate max-w-[65ch]">
+          <p class="ts-overline mb-6 text-ink-secondary">Our pledge</p>
+          <h2 class="ts-heading mb-8 text-ink">What we're signing</h2>
+
+          <div class="flex flex-col gap-6">
+            <p class="ts-body-large text-ink-secondary">
+              We, entrepreneurs, founders, and CEOs, as witnesses of the genocide in Gaza and the
+              77-year long colonization and occupation of Palestine, are signing this open letter
+              in order to pledge our support for the Palestinian struggle for justice, equality
+              and liberation and to boycott Israeli businesses and all businesses who are
+              complicit in perpetuating the Israeli colonial system of oppression and apartheid in
+              Palestine.
+            </p>
+
+            <p class="ts-body-large text-ink-secondary">
+              The private sector, and especially the tech and startup industry, has historically
+              played a very important role in legitimizing the state of Israel and deepening the
+              ongoing dispossession of Palestinians. Now is the time for private businesses to
+              take a strong stance against the current genocide in Gaza, and against the
+              colonization of Palestine.
+            </p>
+
+            <p class="ts-body-large text-ink-secondary">
+              We assert that all companies, no matter where they are based, can make an impact by
+              adopting this position across their activities: hiring, supply chain, trade
+              relations, raising capital, and more.
+            </p>
+
+            <p class="ts-body-large text-ink-secondary">
+              Therefore <span class="font-medium text-ink"
+                >we pledge to steer our companies' hiring policies, operations, delivery of goods,
+                provision of services, fundraising, and PR activities in order to support Palestine
+                and Palestinians in their fight for self-determination and ownership of the land
+                despite military, political, and economic efforts to displace and eliminate them.
+                This may include:</span
+              >
+            </p>
+
+            <ul class="flex flex-col gap-4">
+              <li class="ts-body-large flex gap-3 text-ink-secondary">
+                <span class="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-brand"></span>
+                <span>
+                  Hiring Palestinian talent, donating to Palestinian causes, incorporating
+                  Palestinian suppliers in our supply chains, and raising money from investors who
+                  support the Palestinian cause.
+                </span>
+              </li>
+              <li class="ts-body-large flex gap-3 text-ink-secondary">
+                <span class="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-brand"></span>
+                <span>
+                  Carrying out strategic boycotts of Israeli and other businesses, entities and
+                  individuals who support Zionism and are complicit in the current genocide and the
+                  ongoing colonization of Palestine, to the extent permitted by law.
+                </span>
+              </li>
+            </ul>
+
+            <p class="ts-body-large text-ink-secondary">
+              In making this pledge, we reject any kind of discrimination on the basis of
+              ethnicity, race, or religion, including antisemitism and islamophobia. We stand
+              against Zionism as an ideology and we promote values such as democracy, equality,
+              self-determination and justice.
+            </p>
+
+            <p class="ts-body-large text-ink-secondary">
+              Through this pledge, we join the wider BDS movement and we aim to exert pressure on
+              Israel and its economy, following the example of successful international campaigns
+              such as the anti-apartheid movement in the case of South Africa.
+            </p>
+
+            <p class="ts-body-large text-ink-secondary">
+              We call on entrepreneurs globally to sign this letter and to join the movement for a
+              free Palestine.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Pull-quote signature moment -->
+    <section class="bg-cream px-6 py-14 min-[810px]:px-10 min-[810px]:py-20">
+      <div class="mx-auto max-w-[1400px]">
+        <div class="pledge-animate max-w-[860px]">
+          <p class="ts-overline mb-8 text-ink-secondary">The commitment</p>
+          <blockquote class="ts-display mb-10 font-serif italic leading-tight text-ink">
+            &ldquo;We pledge to steer our companies' <span class="text-brand">hiring policies</span
+            >, operations, delivery of goods, provision of services, <span class="text-brand"
+              >fundraising</span
+            >, and PR activities in order to support Palestine.&rdquo;
+          </blockquote>
+        </div>
+      </div>
+    </section>
+
+    <!-- Sign now -->
+    <section id="sign" class="bg-page px-6 py-14 min-[810px]:px-10 min-[810px]:py-20">
+      <div class="mx-auto max-w-[720px]">
+        <div class="pledge-animate">
+          <p class="ts-overline mb-6 text-ink-secondary">Sign now</p>
+          <h2 class="ts-heading mb-10 text-ink">Add your name</h2>
+          <PledgeForm client:only="react" />
+        </div>
+      </div>
+    </section>
+
+    <!-- Signatories -->
+    <section class="bg-sand px-6 py-14 min-[810px]:px-10 min-[810px]:py-20">
+      <div class="mx-auto max-w-[1400px]">
+        <div class="pledge-animate">
+          <p class="ts-overline mb-6 text-ink-secondary">Full list</p>
+          <h2 class="ts-heading mb-10 text-ink">Signatories</h2>
+          <SignatoriesNew client:only="react" />
+        </div>
+      </div>
+    </section>
+  </main>
+</HomeLayout>
+
+<style>
+  .pledge-animate {
+    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);
+  }
+  .pledge-animate.in-view {
+    opacity: 1;
+    translate: none;
+  }
+  :global(html.no-js) .pledge-animate {
+    opacity: 1;
+    translate: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pledge-animate {
+      opacity: 1;
+      translate: none;
+      transition: none;
+    }
+  }
+</style>
+
+<script>
+  const obs = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((e) => {
+        if (e.isIntersecting) {
+          e.target.classList.add("in-view");
+          obs.unobserve(e.target);
+        }
+      });
+    },
+    { threshold: 0.15 }
+  );
+  document.querySelectorAll(".pledge-animate").forEach((el) => obs.observe(el));
+</script>