From c70d5afd31017b87fb904d098dff02d31fd8d6cb Mon Sep 17 00:00:00 2001
From: samuelisi <samuelisiguzor@gmail.com>
Date: Mon, 27 Jul 2026 11:30:14 +0000
Subject: [PATCH 1/4] refactor(frontend): extract FeatureCard/Step/FooterColumn
 from LandingPage

The three feature cards, four how-it-works steps, and three footer
sections were each near-identical hand-copied JSX blocks. Extract
shared components and drive them from small local data arrays via
.map() to remove the duplication and shrink LandingPage.tsx.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 frontend/src/components/LandingPage.tsx       | 116 ++++++------------
 .../__tests__/LandingPage.dataDriven.test.tsx |  45 +++++++
 .../src/components/landing/FeatureCard.tsx    |  15 +++
 .../src/components/landing/FooterColumn.tsx   |  37 ++++++
 frontend/src/components/landing/Step.tsx      |  13 ++
 5 files changed, 148 insertions(+), 78 deletions(-)
 create mode 100644 frontend/src/components/__tests__/LandingPage.dataDriven.test.tsx
 create mode 100644 frontend/src/components/landing/FeatureCard.tsx
 create mode 100644 frontend/src/components/landing/FooterColumn.tsx
 create mode 100644 frontend/src/components/landing/Step.tsx

diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx
index 4b76c2ff..200a5e7c 100644
--- a/frontend/src/components/LandingPage.tsx
+++ b/frontend/src/components/LandingPage.tsx
@@ -6,6 +6,9 @@ import { api } from '../lib/api/client';
 import { Statistics } from './Statistics';
 import { ErrorBoundary } from './ErrorBoundary';
 import { LoadingSpinner } from './LoadingSpinner';
+import { FeatureCard } from './landing/FeatureCard';
+import { Step } from './landing/Step';
+import { FooterColumn } from './landing/FooterColumn';
 
 interface LandingPageProps {
   className?: string;
@@ -61,6 +64,32 @@ export const LandingPage: React.FC<LandingPageProps> = ({ className }) => {
     }
   };
 
+  const features = [
+    { icon: '/icons/decentralized.svg', title: t('features.decentralized.title'), description: t('features.decentralized.description') },
+    { icon: '/icons/secure.svg', title: t('features.secure.title'), description: t('features.secure.description') },
+    { icon: '/icons/fast.svg', title: t('features.fast.title'), description: t('features.fast.description') },
+  ];
+
+  const steps = [
+    { title: t('howItWorks.step1.title'), description: t('howItWorks.step1.description') },
+    { title: t('howItWorks.step2.title'), description: t('howItWorks.step2.description') },
+    { title: t('howItWorks.step3.title'), description: t('howItWorks.step3.description') },
+    { title: t('howItWorks.step4.title'), description: t('howItWorks.step4.description') },
+  ];
+
+  const footerColumns = [
+    { heading: t('footer.title'), headingLevel: 'h2' as const, tagline: t('footer.tagline') },
+    { heading: t('footer.linksHeading'), links: [
+      { href: '/docs', label: t('footer.documentation') },
+      { href: '/github', label: t('footer.github') },
+      { href: '/discord', label: t('footer.discord') },
+    ] },
+    { heading: t('footer.legalHeading'), links: [
+      { href: '/privacy', label: t('footer.privacy') },
+      { href: '/terms', label: t('footer.terms') },
+    ] },
+  ];
+
   return (
     <div className={className}>
       {/* Skip to main content link */}
@@ -237,47 +266,9 @@ export const LandingPage: React.FC<LandingPageProps> = ({ className }) => {
           <h2 id="features-heading">{t('features.heading')}</h2>
           
           <div className="features-grid">
-            <article className="feature-card">
-              <img 
-                src="/icons/decentralized.svg" 
-                alt="" 
-                aria-hidden="true"
-                width="64"
-                height="64"
-              />
-              <h3>{t('features.decentralized.title')}</h3>
-              <p>
-                {t('features.decentralized.description')}
-              </p>
-            </article>
-
-            <article className="feature-card">
-              <img 
-                src="/icons/secure.svg" 
-                alt="" 
-                aria-hidden="true"
-                width="64"
-                height="64"
-              />
-              <h3>{t('features.secure.title')}</h3>
-              <p>
-                {t('features.secure.description')}
-              </p>
-            </article>
-
-            <article className="feature-card">
-              <img 
-                src="/icons/fast.svg" 
-                alt="" 
-                aria-hidden="true"
-                width="64"
-                height="64"
-              />
-              <h3>{t('features.fast.title')}</h3>
-              <p>
-                {t('features.fast.description')}
-              </p>
-            </article>
+            {features.map((feature) => (
+              <FeatureCard key={feature.title} {...feature} />
+            ))}
           </div>
         </section>
 
@@ -286,22 +277,9 @@ export const LandingPage: React.FC<LandingPageProps> = ({ className }) => {
           <h2 id="how-it-works-heading">{t('howItWorks.heading')}</h2>
           
           <ol className="steps-list">
-            <li>
-              <h3>{t('howItWorks.step1.title')}</h3>
-              <p>{t('howItWorks.step1.description')}</p>
-            </li>
-            <li>
-              <h3>{t('howItWorks.step2.title')}</h3>
-              <p>{t('howItWorks.step2.description')}</p>
-            </li>
-            <li>
-              <h3>{t('howItWorks.step3.title')}</h3>
-              <p>{t('howItWorks.step3.description')}</p>
-            </li>
-            <li>
-              <h3>{t('howItWorks.step4.title')}</h3>
-              <p>{t('howItWorks.step4.description')}</p>
-            </li>
+            {steps.map((step) => (
+              <Step key={step.title} {...step} />
+            ))}
           </ol>
         </section>
 
@@ -320,27 +298,9 @@ export const LandingPage: React.FC<LandingPageProps> = ({ className }) => {
       {/* Footer */}
       <footer role="contentinfo" id="contact">
         <div className="footer-content">
-          <div className="footer-section">
-            <h2>{t('footer.title')}</h2>
-            <p>{t('footer.tagline')}</p>
-          </div>
-          
-          <div className="footer-section">
-            <h3>{t('footer.linksHeading')}</h3>
-            <ul>
-              <li><a href="/docs">{t('footer.documentation')}</a></li>
-              <li><a href="/github">{t('footer.github')}</a></li>
-              <li><a href="/discord">{t('footer.discord')}</a></li>
-            </ul>
-          </div>
-          
-          <div className="footer-section">
-            <h3>{t('footer.legalHeading')}</h3>
-            <ul>
-              <li><a href="/privacy">{t('footer.privacy')}</a></li>
-              <li><a href="/terms">{t('footer.terms')}</a></li>
-            </ul>
-          </div>
+          {footerColumns.map((column) => (
+            <FooterColumn key={column.heading} {...column} />
+          ))}
         </div>
         
         <div className="footer-bottom">
diff --git a/frontend/src/components/__tests__/LandingPage.dataDriven.test.tsx b/frontend/src/components/__tests__/LandingPage.dataDriven.test.tsx
new file mode 100644
index 00000000..cf48206e
--- /dev/null
+++ b/frontend/src/components/__tests__/LandingPage.dataDriven.test.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import LandingPage from '../LandingPage';
+import { api } from '../../lib/api/client';
+
+describe('LandingPage data-driven sections', () => {
+  beforeEach(() => {
+    jest
+      .spyOn(api, 'getStatistics')
+      .mockResolvedValue({ totalMarkets: 128, totalVolume: 45000, activeUsers: 512 });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('renders one feature-card article per feature entry with translated copy', () => {
+    render(<LandingPage />);
+    const cards = document.querySelectorAll('.feature-card');
+    expect(cards).toHaveLength(3);
+    expect(screen.getByRole('heading', { name: 'Fully Decentralized' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Secure & Audited' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Lightning Fast' })).toBeInTheDocument();
+  });
+
+  it('renders the how-it-works steps as an ordered list with one item per step', () => {
+    render(<LandingPage />);
+    const steps = document.querySelectorAll('.steps-list > li');
+    expect(steps).toHaveLength(4);
+    expect(screen.getByRole('heading', { name: 'Create a Market' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Claim Winnings' })).toBeInTheDocument();
+  });
+
+  it('renders footer columns, including link lists, from the data array', () => {
+    render(<LandingPage />);
+    const columns = document.querySelectorAll('.footer-section');
+    expect(columns).toHaveLength(3);
+
+    expect(screen.getByRole('link', { name: 'Documentation' })).toHaveAttribute('href', '/docs');
+    expect(screen.getByRole('link', { name: 'GitHub' })).toHaveAttribute('href', '/github');
+    expect(screen.getByRole('link', { name: 'Discord' })).toHaveAttribute('href', '/discord');
+    expect(screen.getByRole('link', { name: 'Privacy Policy' })).toHaveAttribute('href', '/privacy');
+    expect(screen.getByRole('link', { name: 'Terms of Service' })).toHaveAttribute('href', '/terms');
+  });
+});
diff --git a/frontend/src/components/landing/FeatureCard.tsx b/frontend/src/components/landing/FeatureCard.tsx
new file mode 100644
index 00000000..33849519
--- /dev/null
+++ b/frontend/src/components/landing/FeatureCard.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export interface FeatureCardProps {
+  icon: string;
+  title: string;
+  description: string;
+}
+
+export const FeatureCard: React.FC<FeatureCardProps> = ({ icon, title, description }) => (
+  <article className="feature-card">
+    <img src={icon} alt="" aria-hidden="true" width="64" height="64" />
+    <h3>{title}</h3>
+    <p>{description}</p>
+  </article>
+);
diff --git a/frontend/src/components/landing/FooterColumn.tsx b/frontend/src/components/landing/FooterColumn.tsx
new file mode 100644
index 00000000..1b726c62
--- /dev/null
+++ b/frontend/src/components/landing/FooterColumn.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+export interface FooterColumnLink {
+  href: string;
+  label: string;
+}
+
+export interface FooterColumnProps {
+  heading: string;
+  headingLevel?: 'h2' | 'h3';
+  tagline?: string;
+  links?: FooterColumnLink[];
+}
+
+export const FooterColumn: React.FC<FooterColumnProps> = ({
+  heading,
+  headingLevel = 'h3',
+  tagline,
+  links,
+}) => {
+  const Heading = headingLevel;
+  return (
+    <div className="footer-section">
+      <Heading>{heading}</Heading>
+      {tagline && <p>{tagline}</p>}
+      {links && (
+        <ul>
+          {links.map((link) => (
+            <li key={link.href}>
+              <a href={link.href}>{link.label}</a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
diff --git a/frontend/src/components/landing/Step.tsx b/frontend/src/components/landing/Step.tsx
new file mode 100644
index 00000000..33e009b0
--- /dev/null
+++ b/frontend/src/components/landing/Step.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export interface StepProps {
+  title: string;
+  description: string;
+}
+
+export const Step: React.FC<StepProps> = ({ title, description }) => (
+  <li>
+    <h3>{title}</h3>
+    <p>{description}</p>
+  </li>
+);

From 090345a79c5f1338edb2c60aae97b3d37527b305 Mon Sep 17 00:00:00 2001
From: samuelisi <samuelisiguzor@gmail.com>
Date: Mon, 27 Jul 2026 11:31:41 +0000
Subject: [PATCH 2/4] refactor(frontend): remove any type from i18n lookup

The i18n.t() lookup used `let value: any` to walk the translation
tree, bypassing strict type checking for the function that resolves
all UI copy. Type it as Translations | string and rely on the
existing typeof narrowing.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 frontend/src/lib/__tests__/i18n.test.ts | 10 ++++++++++
 frontend/src/lib/i18n.ts                |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/__tests__/i18n.test.ts b/frontend/src/lib/__tests__/i18n.test.ts
index 8f0776b8..c594f16b 100644
--- a/frontend/src/lib/__tests__/i18n.test.ts
+++ b/frontend/src/lib/__tests__/i18n.test.ts
@@ -44,6 +44,16 @@ describe('i18n', () => {
       const result = i18n.t('features.decentralized.title');
       expect(result).toBe('Fully Decentralized');
     });
+
+    it('should return default value when a key resolves to a nested object rather than a string', () => {
+      const result = i18n.t('features', 'default');
+      expect(result).toBe('default');
+    });
+
+    it('should return the key when a key resolves to a nested object and no default is provided', () => {
+      const result = i18n.t('features');
+      expect(result).toBe('features');
+    });
   });
 
   describe('loadLocaleFromStorage', () => {
diff --git a/frontend/src/lib/i18n.ts b/frontend/src/lib/i18n.ts
index 92eefea6..99b463f4 100644
--- a/frontend/src/lib/i18n.ts
+++ b/frontend/src/lib/i18n.ts
@@ -114,7 +114,7 @@ class I18n {
 
   t(key: string, defaultValue?: string): string {
     const keys = key.split('.');
-    let value: any = translations[this.currentLocale];
+    let value: Translations | string = translations[this.currentLocale];
 
     for (const k of keys) {
       if (value && typeof value === 'object' && k in value) {

From e65d6cb782bd363cf785a9c27ed7309d1755c9cc Mon Sep 17 00:00:00 2001
From: samuelisi <samuelisiguzor@gmail.com>
Date: Mon, 27 Jul 2026 11:33:30 +0000
Subject: [PATCH 3/4] refactor(frontend): dedupe .visually-hidden CSS rule

.visually-hidden was defined identically in accessibility.css
(globally imported) and again verbatim in LoadingSpinner.css and
Skeleton.css. Remove the duplicates and rely on the global rule.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 frontend/src/components/LoadingSpinner.css    | 13 ----------
 frontend/src/components/Skeleton.css          | 13 ----------
 .../__tests__/accessibility.css.test.ts       | 25 +++++++++++++++++++
 3 files changed, 25 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/styles/__tests__/accessibility.css.test.ts

diff --git a/frontend/src/components/LoadingSpinner.css b/frontend/src/components/LoadingSpinner.css
index 13fe9829..c3faf8c8 100644
--- a/frontend/src/components/LoadingSpinner.css
+++ b/frontend/src/components/LoadingSpinner.css
@@ -35,17 +35,4 @@
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
-}
-
-/* Visually hidden text for screen readers */
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
 }
\ No newline at end of file
diff --git a/frontend/src/components/Skeleton.css b/frontend/src/components/Skeleton.css
index 4223577b..7f1c02a6 100644
--- a/frontend/src/components/Skeleton.css
+++ b/frontend/src/components/Skeleton.css
@@ -26,17 +26,4 @@
   100% {
     background-position: 200% 0;
   }
-}
-
-/* Visually hidden text for screen readers */
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
 }
\ No newline at end of file
diff --git a/frontend/src/styles/__tests__/accessibility.css.test.ts b/frontend/src/styles/__tests__/accessibility.css.test.ts
new file mode 100644
index 00000000..a2f66550
--- /dev/null
+++ b/frontend/src/styles/__tests__/accessibility.css.test.ts
@@ -0,0 +1,25 @@
+import fs from 'fs';
+import path from 'path';
+
+const SRC_DIR = path.resolve(__dirname, '../../');
+
+function findCssFiles(dir: string): string[] {
+  return fs.readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      return findCssFiles(fullPath);
+    }
+    return entry.name.endsWith('.css') ? [fullPath] : [];
+  });
+}
+
+describe('.visually-hidden utility class', () => {
+  it('is defined exactly once across the stylesheet tree', () => {
+    const cssFiles = findCssFiles(SRC_DIR);
+    const definitions = cssFiles.filter((file) =>
+      fs.readFileSync(file, 'utf-8').match(/\.visually-hidden\s*\{/)
+    );
+
+    expect(definitions).toEqual([path.resolve(SRC_DIR, 'styles/accessibility.css')]);
+  });
+});

From 0802136cd2a77ccb17556aeedf0699ef7e75d18d Mon Sep 17 00:00:00 2001
From: samuelisi <samuelisiguzor@gmail.com>
Date: Mon, 27 Jul 2026 11:35:41 +0000
Subject: [PATCH 4/4] refactor(frontend): remove redundant double loading
 fallback on home page

next/dynamic's ssr: true already manages its own loading boundary, so
wrapping it in an outer <Suspense> rendered two different fallbacks
(with mismatched aria-labels) for the same loading state. Drop the
outer Suspense and keep a single consistent fallback.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 frontend/src/app/__tests__/page.test.tsx | 39 +++++++++++-------------
 frontend/src/app/page.tsx                | 12 +++-----
 2 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/frontend/src/app/__tests__/page.test.tsx b/frontend/src/app/__tests__/page.test.tsx
index 03cb3a5b..39496e74 100644
--- a/frontend/src/app/__tests__/page.test.tsx
+++ b/frontend/src/app/__tests__/page.test.tsx
@@ -1,29 +1,24 @@
-import React, { Suspense } from 'react';
-import { render, screen } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { LoadingSpinner } from '../../components/LoadingSpinner';
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import Home from '../page';
 
-expect.extend(toHaveNoViolations);
+jest.mock('../../components/LandingPage', () => ({
+  LandingPage: () => <div data-testid="landing-page-stub" />,
+}));
 
-describe('Home page loading fallback', () => {
-  it('LoadingSpinner fallback has role=status', () => {
-    render(<LoadingSpinner aria-label="Loading page" />);
-    expect(screen.getByRole('status')).toBeInTheDocument();
-  });
+describe('Home page dynamic loading fallback', () => {
+  it('renders exactly one loading indicator with a consistent aria-label while the dynamic import resolves', async () => {
+    render(<Home />);
 
-  it('LoadingSpinner fallback has aria-live=polite', () => {
-    render(<LoadingSpinner aria-label="Loading page" />);
-    expect(screen.getByRole('status')).toHaveAttribute('aria-live', 'polite');
-  });
+    const indicators = screen.getAllByRole('status');
+    expect(indicators).toHaveLength(1);
+    expect(indicators[0]).toHaveAttribute('aria-label', 'Loading page');
+    expect(indicators[0]).toHaveAttribute('aria-live', 'polite');
 
-  it('LoadingSpinner fallback has an accessible label', () => {
-    render(<LoadingSpinner aria-label="Loading page" />);
-    expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Loading page');
-  });
+    await waitFor(() => {
+      expect(screen.getByTestId('landing-page-stub')).toBeInTheDocument();
+    });
 
-  it('LoadingSpinner fallback has no axe violations', async () => {
-    const { container } = render(<LoadingSpinner aria-label="Loading page" />);
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
+    expect(screen.queryAllByRole('status')).toHaveLength(0);
   });
 });
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index d61f8b3e..9b9830c4 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,18 +1,14 @@
 'use client';
 import dynamic from 'next/dynamic';
-import { Suspense } from 'react';
 import { LoadingSpinner } from '../components/LoadingSpinner';
 
-// Dynamic import with code splitting
+// Dynamic import with code splitting. With ssr: true, next/dynamic manages
+// its own loading boundary, so no outer <Suspense> is needed here.
 const LandingPage = dynamic(() => import('../components/LandingPage').then(mod => ({ default: mod.LandingPage })), {
-  loading: () => <LoadingSpinner aria-label="Loading" />,
+  loading: () => <LoadingSpinner aria-label="Loading page" />,
   ssr: true,
 });
 
 export default function Home() {
-  return (
-    <Suspense fallback={<LoadingSpinner aria-label="Loading page" />}>
-      <LandingPage />
-    </Suspense>
-  );
+  return <LandingPage />;
 }