From 7cc9988b3204d341e3a6ec66755c033ef2101f1f Mon Sep 17 00:00:00 2001
From: odarome132 <monteropeace@gmail.com>
Date: Mon, 27 Jul 2026 12:58:40 +0000
Subject: [PATCH 1/2] feat: add /grants page with wave data, FAQ, and tests

---
 src/App.tsx                   |   2 +
 src/__tests__/grants.test.tsx | 174 ++++++++++++++++++++++
 src/components/Header.tsx     |  13 ++
 src/data/wave.json            |  82 +++++++++++
 src/i18n/en.json              |   3 +-
 src/i18n/es.json              |   3 +-
 src/pages/Grants.tsx          | 262 ++++++++++++++++++++++++++++++++++
 7 files changed, 537 insertions(+), 2 deletions(-)
 create mode 100644 src/__tests__/grants.test.tsx
 create mode 100644 src/data/wave.json
 create mode 100644 src/pages/Grants.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 11cbb9c..cc6c572 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,6 +24,7 @@ const Privacy = lazy(() => import('./pages/Privacy'));
 const UseCases = lazy(() => import('./pages/UseCases'));
 const Stellar = lazy(() => import('./pages/Stellar'));
 const Roadmap = lazy(() => import('./pages/Roadmap'));
+const Grants = lazy(() => import('./pages/Grants'));
 const CaseStudies = lazy(() => import('./pages/CaseStudies'));
 const NotFound = lazy(() => import('./pages/NotFound'));
 
@@ -69,6 +70,7 @@ export default function App() {
           <Route path="/roadmap" element={<Roadmap />} />
           <Route path="/case-studies" element={<CaseStudies />} />
           <Route path="/case-studies/:slug" element={<CaseStudies />} />
+          <Route path="/grants" element={<Grants />} />
           {/* Wrap Stellar with Layout */}
           <Route
             path="/stellar"
diff --git a/src/__tests__/grants.test.tsx b/src/__tests__/grants.test.tsx
new file mode 100644
index 0000000..f58c0a9
--- /dev/null
+++ b/src/__tests__/grants.test.tsx
@@ -0,0 +1,174 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import App from '../App';
+import waveData from '../data/wave.json';
+
+describe('Grants page', () => {
+  it('renders the grants page for the /grants route', async () => {
+    window.history.replaceState({}, '', '/grants');
+
+    render(<App />);
+
+    expect(
+      await screen.findByRole('heading', { level: 1, name: /build private payments/i }),
+    ).toBeInTheDocument();
+  });
+
+  it('renders the current wave section with name and budget', async () => {
+    window.history.replaceState({}, '', '/grants');
+
+    render(<App />);
+
+    const currentWave = waveData.currentWave;
+    if (currentWave) {
+      expect(
+        await screen.findByRole('heading', { level: 2, name: currentWave.name }),
+      ).toBeInTheDocument();
+      expect(screen.getByText(currentWave.budget)).toBeInTheDocument();
+      expect(screen.getAllByText(currentWave.fundingSource).length).toBeGreaterThanOrEqual(1);
+    }
+  });
+
+  it('renders the apply button with correct URL when wave is open', async () => {
+    window.history.replaceState({}, '', '/grants');
+
+    render(<App />);
+
+    const currentWave = waveData.currentWave;
+    if (currentWave?.status === 'open') {
+      const applyLink = await screen.findByRole('link', { name: /apply on drips/i });
+      expect(applyLink).toHaveAttribute('href', currentWave.applyUrl);
+      expect(applyLink).toHaveAttribute('target', '_blank');
+    }
+  });
+
+  it('renders eligibility and review criteria lists', async () => {
+    window.history.replaceState({}, '', '/grants');
+
+    render(<App />);
+
+    const currentWave = waveData.currentWave;
+    if (currentWave) {
+      await screen.findByRole('heading', { level: 3, name: /eligibility/i });
+      expect(
+        screen.getByRole('heading', { level: 3, name: /review criteria/i }),
+      ).toBeInTheDocument();
+
+      for (const item of currentWave.eligibility) {
+        expect(screen.getByText(item)).toBeInTheDocument();
+      }
+
+      for (const item of currentWave.reviewCriteria) {
+        expect(screen.getByText(item)).toBeInTheDocument();
+      }
+    }
+  });
+
+  it('renders past waves section when past waves exist', async () => {
+    window.history.replaceState({}, '', '/grants');
+
+    render(<App />);
+
+    const pastWaves = waveData.pastWaves;
+    if (pastWaves.length > 0) {
+      expect(await screen.findByText(/past waves/i)).toBeInTheDocument();
+
+      for (const wave of pastWaves) {
+        expect(screen.getByRole('heading', { level: 2, name: wave.name })).toBeInTheDocument();
+        expect(screen.getByText((content) => content.startsWith(wave.budget))).toBeInTheDocument();
+      }
+    }
+  });
+
+  it('renders past wave recipients when present', async () => {
+    window.history.replaceState({}, '', '/grants');
+
+    render(<App />);
+
+    const pastWaves = waveData.pastWaves;
+    if (pastWaves.length > 0) {
+      for (const wave of pastWaves) {
+        if (wave.recipients && wave.recipients.length > 0) {
+          await screen.findByText(/recipients/i);
+          for (const r of wave.recipients) {
+            expect(screen.getByText(r.name)).toBeInTheDocument();
+            expect(screen.getByText(r.project)).toBeInTheDocument();
+            expect(screen.getByText(r.grantAmount)).toBeInTheDocument();
+          }
+        }
+      }
+    }
+  });
+
+  it('renders the FAQ section with all entries', async () => {
+    window.history.replaceState({}, '', '/grants');
+
+    render(<App />);
+
+    expect(
+      await screen.findByRole('heading', { level: 2, name: /frequently asked questions/i }),
+    ).toBeInTheDocument();
+
+    const faqEntries = waveData.faq;
+    for (const entry of faqEntries) {
+      expect(screen.getByText(entry.question)).toBeInTheDocument();
+    }
+  });
+
+  it('toggles FAQ answers open and closed', async () => {
+    window.history.replaceState({}, '', '/grants');
+    const user = userEvent.setup();
+
+    render(<App />);
+
+    const faqEntries = waveData.faq;
+    if (faqEntries.length > 0) {
+      const firstQuestion = faqEntries[0];
+      const toggleButton = await screen.findByRole('button', {
+        name: new RegExp(firstQuestion?.question ?? ''),
+      });
+
+      await user.click(toggleButton);
+      expect(screen.getByText(firstQuestion?.answer ?? '')).toBeInTheDocument();
+
+      await user.click(toggleButton);
+      expect(screen.queryByText(firstQuestion?.answer ?? '')).not.toBeInTheDocument();
+    }
+  });
+
+  it('shows Drips as a link in the hero section', async () => {
+    window.history.replaceState({}, '', '/grants');
+
+    render(<App />);
+
+    const dripsLinks = await screen.findAllByRole('link', { name: /drips/i });
+    const dripsLink = dripsLinks.find(
+      (l) => l.getAttribute('href') === 'https://www.drips.network',
+    );
+    expect(dripsLink).toBeDefined();
+    expect(dripsLink).toHaveAttribute('target', '_blank');
+  });
+
+  it('links back to the home page', async () => {
+    window.history.replaceState({}, '', '/grants');
+
+    render(<App />);
+
+    const backLinks = await screen.findAllByRole('link', { name: /back home/i });
+    expect(backLinks.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('has no axe violations on the grants page', async () => {
+    const { axe } = await import('vitest-axe');
+    window.history.replaceState({}, '', '/grants');
+
+    const { container } = render(<App />);
+
+    await screen.findByRole('heading', { level: 1, name: /build private payments/i });
+
+    const results = await axe(container);
+
+    expect(results.violations).toEqual([]);
+  });
+});
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 2f8f05a..7ea17e3 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -132,6 +132,12 @@ export default function Header() {
           >
             {t('header.nav.useCases')}
           </a>
+          <Link
+            to="/grants"
+            className="font-body text-[13px] text-outline transition-colors duration-150 hover:text-on-surface-variant"
+          >
+            {t('header.nav.grants')}
+          </Link>
           <Link
             to="/stellar"
             className="font-body text-[13px] text-outline transition-colors duration-150 hover:text-on-surface-variant"
@@ -284,6 +290,13 @@ export default function Header() {
             >
               {t('header.nav.useCases')}
             </a>
+            <Link
+              to="/grants"
+              onClick={closeMenu}
+              className="font-body text-[13px] text-outline transition-colors duration-150 hover:text-on-surface-variant"
+            >
+              {t('header.nav.grants')}
+            </Link>
             <Link
               to="/stellar"
               onClick={closeMenu}
diff --git a/src/data/wave.json b/src/data/wave.json
new file mode 100644
index 0000000..e0836a8
--- /dev/null
+++ b/src/data/wave.json
@@ -0,0 +1,82 @@
+{
+  "currentWave": {
+    "id": "wave-1",
+    "name": "Wave 1: Stealth Address Infrastructure",
+    "status": "open",
+    "openDate": "2025-06-01",
+    "closeDate": "2025-08-31",
+    "budget": "$150,000",
+    "fundingSource": "Drips + External",
+    "description": "Funding for teams building stealth address infrastructure, SDK integrations, and developer tooling. If you are building privacy-preserving payment rails, stealth-address middleware, or tooling that makes unlinkable payments easier to ship, this wave is for you.",
+    "howToApply": "Submit your proposal through the Drips platform. Include a clear scope, timeline, and budget breakdown with defined milestones.",
+    "applyUrl": "https://drips.network/grants/wraith/wave-1",
+    "rewardRange": "$5,000 – $50,000",
+    "eligibility": [
+      "Open to individual developers and teams",
+      "Projects must be open source",
+      "Must be building on or integrating with Wraith Protocol",
+      "Previous experience with blockchain development preferred"
+    ],
+    "reviewCriteria": [
+      "Technical feasibility and clarity of scope",
+      "Impact on the Wraith ecosystem",
+      "Team's experience and track record",
+      "Alignment with Wraith's privacy mission",
+      "Realistic timeline and budget planning"
+    ]
+  },
+  "pastWaves": [
+    {
+      "id": "wave-0",
+      "name": "Wave 0: Protocol Foundation",
+      "status": "closed",
+      "budget": "$75,000",
+      "fundingSource": "External",
+      "highlights": [
+        "Funded the initial SDK development",
+        "Supported stealth address implementation for EVM chains",
+        "Granted documentation and tutorial creation"
+      ],
+      "recipients": [
+        { "name": "Stealth Labs", "project": "EVM Stealth Address SDK", "grantAmount": "$25,000" }
+      ]
+    }
+  ],
+  "faq": [
+    {
+      "id": "what-is-drips",
+      "question": "What is Drips?",
+      "answer": "Drips is a protocol for recurring funding of open-source projects. Wraith grants are managed through Drips, which provides transparent, automated fund distribution on a milestone basis."
+    },
+    {
+      "id": "how-is-grant-funded",
+      "question": "How is the grant funded?",
+      "answer": "Each wave is funded through a combination of Drips recurring revenue and external contributions from ecosystem partners and the Wraith treasury. The funding source is listed per wave."
+    },
+    {
+      "id": "who-can-apply",
+      "question": "Who can apply?",
+      "answer": "Any developer or team building privacy-preserving payment infrastructure, stealth address tooling, or complementary SDK integrations. Both individual contributors and established teams are welcome."
+    },
+    {
+      "id": "how-are-grants-reviewed",
+      "question": "How are grants reviewed?",
+      "answer": "Proposals are reviewed by the Wraith core team based on technical merit, ecosystem impact, team capability, and alignment with Wraith's privacy mission. We aim to respond within two weeks of submission."
+    },
+    {
+      "id": "what-is-timeline",
+      "question": "What is the timeline?",
+      "answer": "Each wave runs for a fixed period. Applicants are notified of decisions within two weeks of the wave closing. Grant distributions are made through Drips on a milestone basis."
+    },
+    {
+      "id": "are-milestones-required",
+      "question": "Are milestones required?",
+      "answer": "Yes. Grants are distributed based on milestone completion. Each proposal should define clear, verifiable deliverables with associated funding tranches."
+    },
+    {
+      "id": "can-i-apply-multiple-waves",
+      "question": "Can I apply to multiple waves?",
+      "answer": "Yes. Unfunded proposals from previous waves are welcome to reapply. Past grantees can also apply for follow-up grants in subsequent waves."
+    }
+  ]
+}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index e275f0c..557be17 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -11,7 +11,8 @@
       "console": "Console",
       "press": "Press",
       "useCases": "Use Cases",
-      "roadmap": "Roadmap"
+      "roadmap": "Roadmap",
+      "grants": "Grants"
     },
     "launchApp": "Launch App",
     "github": "GitHub ↗",
diff --git a/src/i18n/es.json b/src/i18n/es.json
index 1f4ca21..31828a2 100644
--- a/src/i18n/es.json
+++ b/src/i18n/es.json
@@ -11,7 +11,8 @@
       "console": "Consola",
       "press": "Prensa",
       "useCases": "Casos de uso",
-      "roadmap": "Hoja de ruta"
+      "roadmap": "Hoja de ruta",
+      "grants": "Subvenciones"
     },
     "launchApp": "Abrir app",
     "github": "GitHub ↗",
diff --git a/src/pages/Grants.tsx b/src/pages/Grants.tsx
new file mode 100644
index 0000000..a98f37f
--- /dev/null
+++ b/src/pages/Grants.tsx
@@ -0,0 +1,262 @@
+import { useState } from 'react';
+import Footer from '../components/Footer';
+import waveData from '../data/wave.json';
+
+type Wave = (typeof waveData)['currentWave'];
+type PastWave = (typeof waveData)['pastWaves'][number];
+type FaqEntry = (typeof waveData)['faq'][number];
+
+const currentWave = waveData.currentWave as Wave;
+const pastWaves = waveData.pastWaves as PastWave[];
+const faqEntries = waveData.faq as FaqEntry[];
+
+const labelStyles = 'font-mono text-[10px] font-semibold uppercase tracking-[1.8px] text-outline';
+
+export default function Grants() {
+  const [openFaqId, setOpenFaqId] = useState<string | null>(null);
+
+  return (
+    <div className="min-h-screen bg-surface text-on-surface">
+      <header className="flex items-center justify-between px-6 py-5 md:px-12">
+        <a href="https://usewraith.xyz" className="flex items-center gap-3">
+          <img src="/logo.png" alt="Wraith" width={30} height={24} className="h-6 opacity-90" />
+          <span className="font-heading text-[13px] font-bold tracking-[2px] text-on-surface">
+            WRAITH PROTOCOL
+          </span>
+        </a>
+        <a
+          href="https://usewraith.xyz"
+          className="font-body text-[13px] text-outline transition-colors hover:text-on-surface"
+        >
+          Back home
+        </a>
+      </header>
+
+      <main className="mx-auto flex max-w-[1120px] flex-col px-6 py-10 md:px-12 md:py-16">
+        {/* Hero */}
+        <section className="flex flex-col gap-6 border-b border-outline-variant pb-12">
+          <span className={labelStyles}>Grants</span>
+          <div className="flex max-w-[700px] flex-col gap-3">
+            <h1 className="font-heading text-[34px] font-bold tracking-[-1.2px] text-on-surface sm:text-[48px]">
+              Build private payments. Get funded.
+            </h1>
+            <p className="font-body text-[15px] leading-[1.7] text-on-surface-variant">
+              Wraith runs a grant program supported by{' '}
+              <a
+                href="https://www.drips.network"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary underline underline-offset-2 transition-colors hover:brightness-110"
+              >
+                Drips
+              </a>{' '}
+              recurring revenue and external ecosystem funding. Each wave funds teams building
+              stealth address infrastructure, SDK integrations, and privacy-preserving payment
+              tooling.
+            </p>
+          </div>
+        </section>
+
+        {/* Current wave */}
+        {currentWave && (
+          <section className="flex flex-col gap-6 border-b border-outline-variant py-12">
+            <span className={labelStyles}>Current wave</span>
+            <div className="flex flex-col gap-4 rounded-sm border border-outline-variant bg-surface-container p-6">
+              <div className="flex flex-wrap items-start justify-between gap-4">
+                <div className="flex flex-col gap-2">
+                  <h2 className="font-heading text-[22px] font-bold tracking-[-0.5px] text-on-surface">
+                    {currentWave.name}
+                  </h2>
+                  <p className="font-body text-[14px] text-on-surface-variant">
+                    {currentWave.description}
+                  </p>
+                </div>
+                <div className="flex flex-col gap-1 rounded-sm border border-outline-variant px-4 py-3">
+                  <span className="font-mono text-[10px] font-semibold uppercase tracking-[2px] text-outline">
+                    Budget
+                  </span>
+                  <span className="font-heading text-[18px] font-semibold text-on-surface">
+                    {currentWave.budget}
+                  </span>
+                  <span className="font-mono text-[10px] text-outline-variant">
+                    {currentWave.fundingSource}
+                  </span>
+                </div>
+              </div>
+
+              <div className="flex flex-wrap gap-2">
+                <span className="rounded-sm border border-tertiary px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-[1.2px] text-tertiary">
+                  {currentWave.status === 'open' ? 'Open for applications' : currentWave.status}
+                </span>
+                <span className="rounded-sm border border-outline-variant px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-[1.2px] text-outline">
+                  {currentWave.rewardRange} per grant
+                </span>
+              </div>
+
+              <div className="flex flex-col gap-3 border-t border-outline-variant pt-4">
+                <p className="font-body text-[14px] leading-[1.7] text-on-surface-variant">
+                  {currentWave.howToApply}
+                </p>
+                <a
+                  href={currentWave.applyUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex h-11 w-fit items-center justify-center bg-primary px-6 font-heading text-[13px] font-semibold uppercase tracking-[1.5px] text-surface transition-[filter] duration-150 hover:brightness-110"
+                >
+                  Apply on Drips
+                </a>
+              </div>
+            </div>
+
+            {/* Eligibility */}
+            <div className="grid gap-6 md:grid-cols-2">
+              <div className="flex flex-col gap-3">
+                <h3 className="font-heading text-[16px] font-semibold text-on-surface">
+                  Eligibility
+                </h3>
+                <ul className="flex flex-col gap-2">
+                  {currentWave.eligibility.map((item) => (
+                    <li
+                      key={item}
+                      className="flex gap-2.5 font-body text-[14px] leading-[1.6] text-on-surface-variant"
+                    >
+                      <span className="mt-1.5 h-1.5 w-1.5 shrink-0 bg-primary" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div className="flex flex-col gap-3">
+                <h3 className="font-heading text-[16px] font-semibold text-on-surface">
+                  Review criteria
+                </h3>
+                <ul className="flex flex-col gap-2">
+                  {currentWave.reviewCriteria.map((item) => (
+                    <li
+                      key={item}
+                      className="flex gap-2.5 font-body text-[14px] leading-[1.6] text-on-surface-variant"
+                    >
+                      <span className="mt-1.5 h-1.5 w-1.5 shrink-0 bg-primary" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </section>
+        )}
+
+        {/* Past waves */}
+        {pastWaves.length > 0 && (
+          <section className="flex flex-col gap-6 border-b border-outline-variant py-12">
+            <span className={labelStyles}>Past waves</span>
+            <div className="grid gap-4">
+              {pastWaves.map((wave) => (
+                <div
+                  key={wave.id}
+                  className="flex flex-col gap-4 rounded-sm border border-outline-variant bg-surface-container p-6"
+                >
+                  <div className="flex flex-wrap items-start justify-between gap-4">
+                    <div className="flex flex-col gap-1">
+                      <h2 className="font-heading text-[18px] font-semibold text-on-surface">
+                        {wave.name}
+                      </h2>
+                      <span className="font-mono text-[10px] font-semibold uppercase tracking-[2px] text-outline">
+                        {wave.budget} &middot; {wave.fundingSource}
+                      </span>
+                    </div>
+                    <span className="rounded-sm border border-outline-variant px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-[1.2px] text-outline">
+                      Closed
+                    </span>
+                  </div>
+
+                  {wave.highlights && wave.highlights.length > 0 && (
+                    <ul className="flex flex-col gap-1.5">
+                      {wave.highlights.map((highlight) => (
+                        <li
+                          key={highlight}
+                          className="flex gap-2.5 font-body text-[13px] leading-[1.6] text-on-surface-variant"
+                        >
+                          <span className="mt-[5px] h-1 w-1 shrink-0 bg-outline" />
+                          {highlight}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+
+                  {wave.recipients && wave.recipients.length > 0 && (
+                    <div className="flex flex-col gap-2 border-t border-outline-variant pt-3">
+                      <span className="font-mono text-[10px] font-semibold uppercase tracking-[2px] text-outline">
+                        Recipients
+                      </span>
+                      <div className="flex flex-col gap-2">
+                        {wave.recipients.map((r) => (
+                          <div
+                            key={r.name}
+                            className="flex flex-wrap items-center justify-between gap-2 font-body text-[13px]"
+                          >
+                            <span className="text-on-surface font-medium">{r.name}</span>
+                            <span className="text-on-surface-variant">{r.project}</span>
+                            <span className="font-mono text-[11px] text-outline">
+                              {r.grantAmount}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* FAQ */}
+        {faqEntries.length > 0 && (
+          <section className="flex flex-col gap-6 py-12">
+            <span className={labelStyles}>FAQ</span>
+            <h2 className="font-heading text-[22px] font-bold tracking-[-0.5px] text-on-surface">
+              Frequently asked questions
+            </h2>
+            <div className="flex flex-col gap-3">
+              {faqEntries.map((entry) => {
+                const isOpen = openFaqId === entry.id;
+                return (
+                  <div
+                    key={entry.id}
+                    className="rounded-sm border border-outline-variant bg-surface-container"
+                  >
+                    <div className="px-4 py-4 sm:px-5">
+                      <h3 className="font-heading text-[16px] font-semibold tracking-[-0.3px] text-on-surface">
+                        <button
+                          type="button"
+                          aria-expanded={isOpen}
+                          onClick={() => setOpenFaqId(isOpen ? null : entry.id)}
+                          className="flex w-full items-center justify-between text-left"
+                        >
+                          <span>{entry.question}</span>
+                          <span className="font-mono text-[10px] font-semibold uppercase tracking-[1.6px] text-outline">
+                            {isOpen ? 'Hide' : 'Show'}
+                          </span>
+                        </button>
+                      </h3>
+                    </div>
+                    {isOpen && (
+                      <div className="border-t border-outline-variant px-4 py-4 sm:px-5">
+                        <p className="font-body text-[14px] leading-[1.7] text-on-surface-variant">
+                          {entry.answer}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </section>
+        )}
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

From 6aba87ddb5baeddf980644df148f7ef059dec587 Mon Sep 17 00:00:00 2001
From: odarome132 <monteropeace@gmail.com>
Date: Thu, 30 Jul 2026 11:32:51 +0000
Subject: [PATCH 2/2] fix(grants): wire /grants route, fix Layout integration
 and a11y

- Add missing /grants Route in App.tsx (Grants was imported but not wired)
- Remove duplicate header/main/footer from Grants.tsx (Layout provides them)
- Preserve container styling with wrapper div
- Fix grants test to verify Layout header brand link
- Resolve axe violations from duplicate landmarks
---
 public/feed.xml               |   2 +-
 public/sitemap.xml            |  14 +-
 src/App.tsx                   |   8 +
 src/__tests__/grants.test.tsx |   6 +-
 src/pages/Grants.tsx          | 423 ++++++++++++++++------------------
 5 files changed, 220 insertions(+), 233 deletions(-)

diff --git a/public/feed.xml b/public/feed.xml
index e988933..8b96570 100644
--- a/public/feed.xml
+++ b/public/feed.xml
@@ -5,7 +5,7 @@
     <link>https://usewraith.xyz/blog</link>
     <description>Notes on stealth payments, private infrastructure, and the Wraith ecosystem.</description>
     <language>en-us</language>
-    <lastBuildDate>Mon, 27 Jul 2026 17:10:48 GMT</lastBuildDate>
+    <lastBuildDate>Thu, 30 Jul 2026 11:32:01 GMT</lastBuildDate>
     <atom:link href="https://usewraith.xyz/feed.xml" rel="self" type="application/rss+xml" />
 
   <item>
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 4b90d66..6566f1c 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -2,43 +2,43 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://usewraith.xyz</loc>
-    <lastmod>2026-07-26</lastmod>
+    <lastmod>2026-07-30</lastmod>
     <changefreq>daily</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://usewraith.xyz/blog</loc>
-    <lastmod>2026-07-26</lastmod>
+    <lastmod>2026-07-30</lastmod>
     <changefreq>daily</changefreq>
     <priority>0.8</priority>
   </url>
   <url>
     <loc>https://usewraith.xyz/compare</loc>
-    <lastmod>2026-07-26</lastmod>
+    <lastmod>2026-07-30</lastmod>
     <changefreq>daily</changefreq>
     <priority>0.8</priority>
   </url>
   <url>
     <loc>https://usewraith.xyz/faq</loc>
-    <lastmod>2026-07-26</lastmod>
+    <lastmod>2026-07-30</lastmod>
     <changefreq>daily</changefreq>
     <priority>0.8</priority>
   </url>
   <url>
     <loc>https://usewraith.xyz/privacy</loc>
-    <lastmod>2026-07-26</lastmod>
+    <lastmod>2026-07-30</lastmod>
     <changefreq>daily</changefreq>
     <priority>0.8</priority>
   </url>
   <url>
     <loc>https://usewraith.xyz/stellar</loc>
-    <lastmod>2026-07-26</lastmod>
+    <lastmod>2026-07-30</lastmod>
     <changefreq>daily</changefreq>
     <priority>0.8</priority>
   </url>
   <url>
     <loc>https://usewraith.xyz/use-cases</loc>
-    <lastmod>2026-07-26</lastmod>
+    <lastmod>2026-07-30</lastmod>
     <changefreq>daily</changefreq>
     <priority>0.8</priority>
   </url>
diff --git a/src/App.tsx b/src/App.tsx
index 132a646..01e239e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -93,6 +93,14 @@ export default function App() {
                 </Layout>
               }
             />
+            <Route
+              path="/grants"
+              element={
+                <Layout>
+                  <Grants />
+                </Layout>
+              }
+            />
             <Route
               path="/about"
               element={
diff --git a/src/__tests__/grants.test.tsx b/src/__tests__/grants.test.tsx
index f58c0a9..3869fc6 100644
--- a/src/__tests__/grants.test.tsx
+++ b/src/__tests__/grants.test.tsx
@@ -150,13 +150,13 @@ describe('Grants page', () => {
     expect(dripsLink).toHaveAttribute('target', '_blank');
   });
 
-  it('links back to the home page', async () => {
+  it('renders the layout header with brand link back home', async () => {
     window.history.replaceState({}, '', '/grants');
 
     render(<App />);
 
-    const backLinks = await screen.findAllByRole('link', { name: /back home/i });
-    expect(backLinks.length).toBeGreaterThanOrEqual(1);
+    const brandLink = await screen.findByRole('link', { name: /^wraith$/i });
+    expect(brandLink).toHaveAttribute('href', 'https://usewraith.xyz');
   });
 
   it('has no axe violations on the grants page', async () => {
diff --git a/src/pages/Grants.tsx b/src/pages/Grants.tsx
index a98f37f..6131c96 100644
--- a/src/pages/Grants.tsx
+++ b/src/pages/Grants.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import Footer from '../components/Footer';
 import waveData from '../data/wave.json';
 
 type Wave = (typeof waveData)['currentWave'];
@@ -16,247 +15,227 @@ export default function Grants() {
   const [openFaqId, setOpenFaqId] = useState<string | null>(null);
 
   return (
-    <div className="min-h-screen bg-surface text-on-surface">
-      <header className="flex items-center justify-between px-6 py-5 md:px-12">
-        <a href="https://usewraith.xyz" className="flex items-center gap-3">
-          <img src="/logo.png" alt="Wraith" width={30} height={24} className="h-6 opacity-90" />
-          <span className="font-heading text-[13px] font-bold tracking-[2px] text-on-surface">
-            WRAITH PROTOCOL
-          </span>
-        </a>
-        <a
-          href="https://usewraith.xyz"
-          className="font-body text-[13px] text-outline transition-colors hover:text-on-surface"
-        >
-          Back home
-        </a>
-      </header>
+    <div className="mx-auto flex max-w-[1120px] flex-col px-6 py-10 md:px-12 md:py-16">
+      {/* Hero */}
+      <section className="flex flex-col gap-6 border-b border-outline-variant pb-12">
+        <span className={labelStyles}>Grants</span>
+        <div className="flex max-w-[700px] flex-col gap-3">
+          <h1 className="font-heading text-[34px] font-bold tracking-[-1.2px] text-on-surface sm:text-[48px]">
+            Build private payments. Get funded.
+          </h1>
+          <p className="font-body text-[15px] leading-[1.7] text-on-surface-variant">
+            Wraith runs a grant program supported by{' '}
+            <a
+              href="https://www.drips.network"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary underline underline-offset-2 transition-colors hover:brightness-110"
+            >
+              Drips
+            </a>{' '}
+            recurring revenue and external ecosystem funding. Each wave funds teams building stealth
+            address infrastructure, SDK integrations, and privacy-preserving payment tooling.
+          </p>
+        </div>
+      </section>
 
-      <main className="mx-auto flex max-w-[1120px] flex-col px-6 py-10 md:px-12 md:py-16">
-        {/* Hero */}
-        <section className="flex flex-col gap-6 border-b border-outline-variant pb-12">
-          <span className={labelStyles}>Grants</span>
-          <div className="flex max-w-[700px] flex-col gap-3">
-            <h1 className="font-heading text-[34px] font-bold tracking-[-1.2px] text-on-surface sm:text-[48px]">
-              Build private payments. Get funded.
-            </h1>
-            <p className="font-body text-[15px] leading-[1.7] text-on-surface-variant">
-              Wraith runs a grant program supported by{' '}
+      {/* Current wave */}
+      {currentWave && (
+        <section className="flex flex-col gap-6 border-b border-outline-variant py-12">
+          <span className={labelStyles}>Current wave</span>
+          <div className="flex flex-col gap-4 rounded-sm border border-outline-variant bg-surface-container p-6">
+            <div className="flex flex-wrap items-start justify-between gap-4">
+              <div className="flex flex-col gap-2">
+                <h2 className="font-heading text-[22px] font-bold tracking-[-0.5px] text-on-surface">
+                  {currentWave.name}
+                </h2>
+                <p className="font-body text-[14px] text-on-surface-variant">
+                  {currentWave.description}
+                </p>
+              </div>
+              <div className="flex flex-col gap-1 rounded-sm border border-outline-variant px-4 py-3">
+                <span className="font-mono text-[10px] font-semibold uppercase tracking-[2px] text-outline">
+                  Budget
+                </span>
+                <span className="font-heading text-[18px] font-semibold text-on-surface">
+                  {currentWave.budget}
+                </span>
+                <span className="font-mono text-[10px] text-outline-variant">
+                  {currentWave.fundingSource}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+              <span className="rounded-sm border border-tertiary px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-[1.2px] text-tertiary">
+                {currentWave.status === 'open' ? 'Open for applications' : currentWave.status}
+              </span>
+              <span className="rounded-sm border border-outline-variant px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-[1.2px] text-outline">
+                {currentWave.rewardRange} per grant
+              </span>
+            </div>
+
+            <div className="flex flex-col gap-3 border-t border-outline-variant pt-4">
+              <p className="font-body text-[14px] leading-[1.7] text-on-surface-variant">
+                {currentWave.howToApply}
+              </p>
               <a
-                href="https://www.drips.network"
+                href={currentWave.applyUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-primary underline underline-offset-2 transition-colors hover:brightness-110"
+                className="inline-flex h-11 w-fit items-center justify-center bg-primary px-6 font-heading text-[13px] font-semibold uppercase tracking-[1.5px] text-surface transition-[filter] duration-150 hover:brightness-110"
               >
-                Drips
-              </a>{' '}
-              recurring revenue and external ecosystem funding. Each wave funds teams building
-              stealth address infrastructure, SDK integrations, and privacy-preserving payment
-              tooling.
-            </p>
+                Apply on Drips
+              </a>
+            </div>
+          </div>
+
+          {/* Eligibility */}
+          <div className="grid gap-6 md:grid-cols-2">
+            <div className="flex flex-col gap-3">
+              <h3 className="font-heading text-[16px] font-semibold text-on-surface">
+                Eligibility
+              </h3>
+              <ul className="flex flex-col gap-2">
+                {currentWave.eligibility.map((item) => (
+                  <li
+                    key={item}
+                    className="flex gap-2.5 font-body text-[14px] leading-[1.6] text-on-surface-variant"
+                  >
+                    <span className="mt-1.5 h-1.5 w-1.5 shrink-0 bg-primary" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div className="flex flex-col gap-3">
+              <h3 className="font-heading text-[16px] font-semibold text-on-surface">
+                Review criteria
+              </h3>
+              <ul className="flex flex-col gap-2">
+                {currentWave.reviewCriteria.map((item) => (
+                  <li
+                    key={item}
+                    className="flex gap-2.5 font-body text-[14px] leading-[1.6] text-on-surface-variant"
+                  >
+                    <span className="mt-1.5 h-1.5 w-1.5 shrink-0 bg-primary" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
           </div>
         </section>
+      )}
 
-        {/* Current wave */}
-        {currentWave && (
-          <section className="flex flex-col gap-6 border-b border-outline-variant py-12">
-            <span className={labelStyles}>Current wave</span>
-            <div className="flex flex-col gap-4 rounded-sm border border-outline-variant bg-surface-container p-6">
-              <div className="flex flex-wrap items-start justify-between gap-4">
-                <div className="flex flex-col gap-2">
-                  <h2 className="font-heading text-[22px] font-bold tracking-[-0.5px] text-on-surface">
-                    {currentWave.name}
-                  </h2>
-                  <p className="font-body text-[14px] text-on-surface-variant">
-                    {currentWave.description}
-                  </p>
-                </div>
-                <div className="flex flex-col gap-1 rounded-sm border border-outline-variant px-4 py-3">
-                  <span className="font-mono text-[10px] font-semibold uppercase tracking-[2px] text-outline">
-                    Budget
-                  </span>
-                  <span className="font-heading text-[18px] font-semibold text-on-surface">
-                    {currentWave.budget}
-                  </span>
-                  <span className="font-mono text-[10px] text-outline-variant">
-                    {currentWave.fundingSource}
+      {/* Past waves */}
+      {pastWaves.length > 0 && (
+        <section className="flex flex-col gap-6 border-b border-outline-variant py-12">
+          <span className={labelStyles}>Past waves</span>
+          <div className="grid gap-4">
+            {pastWaves.map((wave) => (
+              <div
+                key={wave.id}
+                className="flex flex-col gap-4 rounded-sm border border-outline-variant bg-surface-container p-6"
+              >
+                <div className="flex flex-wrap items-start justify-between gap-4">
+                  <div className="flex flex-col gap-1">
+                    <h2 className="font-heading text-[18px] font-semibold text-on-surface">
+                      {wave.name}
+                    </h2>
+                    <span className="font-mono text-[10px] font-semibold uppercase tracking-[2px] text-outline">
+                      {wave.budget} &middot; {wave.fundingSource}
+                    </span>
+                  </div>
+                  <span className="rounded-sm border border-outline-variant px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-[1.2px] text-outline">
+                    Closed
                   </span>
                 </div>
-              </div>
 
-              <div className="flex flex-wrap gap-2">
-                <span className="rounded-sm border border-tertiary px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-[1.2px] text-tertiary">
-                  {currentWave.status === 'open' ? 'Open for applications' : currentWave.status}
-                </span>
-                <span className="rounded-sm border border-outline-variant px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-[1.2px] text-outline">
-                  {currentWave.rewardRange} per grant
-                </span>
-              </div>
-
-              <div className="flex flex-col gap-3 border-t border-outline-variant pt-4">
-                <p className="font-body text-[14px] leading-[1.7] text-on-surface-variant">
-                  {currentWave.howToApply}
-                </p>
-                <a
-                  href={currentWave.applyUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex h-11 w-fit items-center justify-center bg-primary px-6 font-heading text-[13px] font-semibold uppercase tracking-[1.5px] text-surface transition-[filter] duration-150 hover:brightness-110"
-                >
-                  Apply on Drips
-                </a>
-              </div>
-            </div>
+                {wave.highlights && wave.highlights.length > 0 && (
+                  <ul className="flex flex-col gap-1.5">
+                    {wave.highlights.map((highlight) => (
+                      <li
+                        key={highlight}
+                        className="flex gap-2.5 font-body text-[13px] leading-[1.6] text-on-surface-variant"
+                      >
+                        <span className="mt-[5px] h-1 w-1 shrink-0 bg-outline" />
+                        {highlight}
+                      </li>
+                    ))}
+                  </ul>
+                )}
 
-            {/* Eligibility */}
-            <div className="grid gap-6 md:grid-cols-2">
-              <div className="flex flex-col gap-3">
-                <h3 className="font-heading text-[16px] font-semibold text-on-surface">
-                  Eligibility
-                </h3>
-                <ul className="flex flex-col gap-2">
-                  {currentWave.eligibility.map((item) => (
-                    <li
-                      key={item}
-                      className="flex gap-2.5 font-body text-[14px] leading-[1.6] text-on-surface-variant"
-                    >
-                      <span className="mt-1.5 h-1.5 w-1.5 shrink-0 bg-primary" />
-                      {item}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-              <div className="flex flex-col gap-3">
-                <h3 className="font-heading text-[16px] font-semibold text-on-surface">
-                  Review criteria
-                </h3>
-                <ul className="flex flex-col gap-2">
-                  {currentWave.reviewCriteria.map((item) => (
-                    <li
-                      key={item}
-                      className="flex gap-2.5 font-body text-[14px] leading-[1.6] text-on-surface-variant"
-                    >
-                      <span className="mt-1.5 h-1.5 w-1.5 shrink-0 bg-primary" />
-                      {item}
-                    </li>
-                  ))}
-                </ul>
+                {wave.recipients && wave.recipients.length > 0 && (
+                  <div className="flex flex-col gap-2 border-t border-outline-variant pt-3">
+                    <span className="font-mono text-[10px] font-semibold uppercase tracking-[2px] text-outline">
+                      Recipients
+                    </span>
+                    <div className="flex flex-col gap-2">
+                      {wave.recipients.map((r) => (
+                        <div
+                          key={r.name}
+                          className="flex flex-wrap items-center justify-between gap-2 font-body text-[13px]"
+                        >
+                          <span className="text-on-surface font-medium">{r.name}</span>
+                          <span className="text-on-surface-variant">{r.project}</span>
+                          <span className="font-mono text-[11px] text-outline">
+                            {r.grantAmount}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
               </div>
-            </div>
-          </section>
-        )}
+            ))}
+          </div>
+        </section>
+      )}
 
-        {/* Past waves */}
-        {pastWaves.length > 0 && (
-          <section className="flex flex-col gap-6 border-b border-outline-variant py-12">
-            <span className={labelStyles}>Past waves</span>
-            <div className="grid gap-4">
-              {pastWaves.map((wave) => (
+      {/* FAQ */}
+      {faqEntries.length > 0 && (
+        <section className="flex flex-col gap-6 py-12">
+          <span className={labelStyles}>FAQ</span>
+          <h2 className="font-heading text-[22px] font-bold tracking-[-0.5px] text-on-surface">
+            Frequently asked questions
+          </h2>
+          <div className="flex flex-col gap-3">
+            {faqEntries.map((entry) => {
+              const isOpen = openFaqId === entry.id;
+              return (
                 <div
-                  key={wave.id}
-                  className="flex flex-col gap-4 rounded-sm border border-outline-variant bg-surface-container p-6"
+                  key={entry.id}
+                  className="rounded-sm border border-outline-variant bg-surface-container"
                 >
-                  <div className="flex flex-wrap items-start justify-between gap-4">
-                    <div className="flex flex-col gap-1">
-                      <h2 className="font-heading text-[18px] font-semibold text-on-surface">
-                        {wave.name}
-                      </h2>
-                      <span className="font-mono text-[10px] font-semibold uppercase tracking-[2px] text-outline">
-                        {wave.budget} &middot; {wave.fundingSource}
-                      </span>
-                    </div>
-                    <span className="rounded-sm border border-outline-variant px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-[1.2px] text-outline">
-                      Closed
-                    </span>
+                  <div className="px-4 py-4 sm:px-5">
+                    <h3 className="font-heading text-[16px] font-semibold tracking-[-0.3px] text-on-surface">
+                      <button
+                        type="button"
+                        aria-expanded={isOpen}
+                        onClick={() => setOpenFaqId(isOpen ? null : entry.id)}
+                        className="flex w-full items-center justify-between text-left"
+                      >
+                        <span>{entry.question}</span>
+                        <span className="font-mono text-[10px] font-semibold uppercase tracking-[1.6px] text-outline">
+                          {isOpen ? 'Hide' : 'Show'}
+                        </span>
+                      </button>
+                    </h3>
                   </div>
-
-                  {wave.highlights && wave.highlights.length > 0 && (
-                    <ul className="flex flex-col gap-1.5">
-                      {wave.highlights.map((highlight) => (
-                        <li
-                          key={highlight}
-                          className="flex gap-2.5 font-body text-[13px] leading-[1.6] text-on-surface-variant"
-                        >
-                          <span className="mt-[5px] h-1 w-1 shrink-0 bg-outline" />
-                          {highlight}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-
-                  {wave.recipients && wave.recipients.length > 0 && (
-                    <div className="flex flex-col gap-2 border-t border-outline-variant pt-3">
-                      <span className="font-mono text-[10px] font-semibold uppercase tracking-[2px] text-outline">
-                        Recipients
-                      </span>
-                      <div className="flex flex-col gap-2">
-                        {wave.recipients.map((r) => (
-                          <div
-                            key={r.name}
-                            className="flex flex-wrap items-center justify-between gap-2 font-body text-[13px]"
-                          >
-                            <span className="text-on-surface font-medium">{r.name}</span>
-                            <span className="text-on-surface-variant">{r.project}</span>
-                            <span className="font-mono text-[11px] text-outline">
-                              {r.grantAmount}
-                            </span>
-                          </div>
-                        ))}
-                      </div>
+                  {isOpen && (
+                    <div className="border-t border-outline-variant px-4 py-4 sm:px-5">
+                      <p className="font-body text-[14px] leading-[1.7] text-on-surface-variant">
+                        {entry.answer}
+                      </p>
                     </div>
                   )}
                 </div>
-              ))}
-            </div>
-          </section>
-        )}
-
-        {/* FAQ */}
-        {faqEntries.length > 0 && (
-          <section className="flex flex-col gap-6 py-12">
-            <span className={labelStyles}>FAQ</span>
-            <h2 className="font-heading text-[22px] font-bold tracking-[-0.5px] text-on-surface">
-              Frequently asked questions
-            </h2>
-            <div className="flex flex-col gap-3">
-              {faqEntries.map((entry) => {
-                const isOpen = openFaqId === entry.id;
-                return (
-                  <div
-                    key={entry.id}
-                    className="rounded-sm border border-outline-variant bg-surface-container"
-                  >
-                    <div className="px-4 py-4 sm:px-5">
-                      <h3 className="font-heading text-[16px] font-semibold tracking-[-0.3px] text-on-surface">
-                        <button
-                          type="button"
-                          aria-expanded={isOpen}
-                          onClick={() => setOpenFaqId(isOpen ? null : entry.id)}
-                          className="flex w-full items-center justify-between text-left"
-                        >
-                          <span>{entry.question}</span>
-                          <span className="font-mono text-[10px] font-semibold uppercase tracking-[1.6px] text-outline">
-                            {isOpen ? 'Hide' : 'Show'}
-                          </span>
-                        </button>
-                      </h3>
-                    </div>
-                    {isOpen && (
-                      <div className="border-t border-outline-variant px-4 py-4 sm:px-5">
-                        <p className="font-body text-[14px] leading-[1.7] text-on-surface-variant">
-                          {entry.answer}
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          </section>
-        )}
-      </main>
-
-      <Footer />
+              );
+            })}
+          </div>{' '}
+        </section>
+      )}
     </div>
   );
 }