From 4ec04d900d1d650d015b915ef0362b9a25f61909 Mon Sep 17 00:00:00 2001 From: code3ks Date: Fri, 24 Jul 2026 14:31:51 +0100 Subject: [PATCH 1/2] feat: add case studies page with individual case study routes and homepage strip - Create /case-studies page with filterable per-study cards - Add individual case study detail pages at /case-studies/:slug - Implement CaseStudiesStrip component for homepage - Add structured data (schema.org Article) for SEO - Include seed case study: Anonymous Payroll Provider - Add i18n translations (English and Spanish) - Support filtering by blockchain (Stellar, Horizen, Solana, CKB) Closes #70 --- src/App.tsx | 5 + src/components/CaseStudiesStrip.tsx | 113 ++++++++ src/data/case-studies.json | 32 +++ src/i18n/en.json | 36 +++ src/i18n/es.json | 36 +++ src/pages/CaseStudies.tsx | 426 ++++++++++++++++++++++++++++ 6 files changed, 648 insertions(+) create mode 100644 src/components/CaseStudiesStrip.tsx create mode 100644 src/data/case-studies.json create mode 100644 src/pages/CaseStudies.tsx diff --git a/src/App.tsx b/src/App.tsx index d04c562..4a22e03 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,6 +12,7 @@ const Chains = lazy(() => import('./components/Chains')); const StellarMetrics = lazy(() => import('./components/StellarMetrics')); const Compare = lazy(() => import('./components/Compare')); const Showcase = lazy(() => import('./components/Showcase')); +const CaseStudiesStrip = lazy(() => import('./components/CaseStudiesStrip')); const EcosystemPartners = lazy(() => import('./components/EcosystemPartners')); const CtaStrip = lazy(() => import('./components/CtaStrip')); const Footer = lazy(() => import('./components/Footer')); @@ -22,6 +23,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 CaseStudies = lazy(() => import('./pages/CaseStudies')); const NotFound = lazy(() => import('./pages/NotFound')); function Home() { @@ -41,6 +43,7 @@ function Home() { + @@ -62,6 +65,8 @@ export default function App() { } /> } /> } /> + } /> + } /> {/* Wrap Stellar with Layout */} +
+
+
+ + {t('caseStudiesStrip.eyebrow')} + +

+ {t('caseStudiesStrip.heading')} +

+

+ {t('caseStudiesStrip.description')} +

+
+ + {t('caseStudiesStrip.viewAll')} + → + +
+ +
+ {displayStudies.map((study) => { + const formattedDate = new Intl.DateTimeFormat('en-US', { + month: 'short', + year: 'numeric', + }).format(new Date(study.integrationDate)); + + return ( + +
+
+ + {study.logo} + +
+ + {formattedDate} + +
+ +
+
+

+ {study.org} +

+

{study.industry}

+
+

+ {study.summary} +

+
+ +
+ {study.chains.map((chain) => ( + + {chain} + + ))} +
+ +
+ + {t('caseStudiesStrip.readMore')} + + + → + +
+ + ); + })} +
+
+ + ); +} diff --git a/src/data/case-studies.json b/src/data/case-studies.json new file mode 100644 index 0000000..f2e9586 --- /dev/null +++ b/src/data/case-studies.json @@ -0,0 +1,32 @@ +{ + "entries": [ + { + "id": "payroll-processor", + "slug": "payroll-processor", + "org": "Anonymous Payroll Provider", + "logo": "AP", + "industry": "Payroll & HR", + "useCase": "Contractor Payments", + "integrationDate": "2026-06-15", + "status": "production", + "quote": "Wraith Protocol solved our biggest privacy challenge. Our contractors receive payments without exposing their wallet addresses to every client they work for, and we integrated the SDK in under two days.", + "quotee": "Head of Product", + "summary": "A payroll processing platform using Wraith to enable private contractor payments, protecting recipient financial privacy across international jurisdictions.", + "challenge": "International contractors needed to receive payments from multiple clients without revealing their permanent wallet addresses, which exposed their entire transaction history and balances to every employer.", + "solution": "Integrated Wraith stealth addresses into the payroll payout flow. Each payment is sent to a one-time address that only the contractor can discover and claim, breaking the on-chain link between different clients.", + "results": { + "privacyImprovement": "100% of contractor payments now unlinkable", + "integrationTime": "2 days", + "txProcessed": "10,000+", + "chainsUsed": ["Stellar", "Horizen"] + }, + "chains": ["stellar", "horizen"], + "testimonial": "The SDK documentation was excellent, and the stealth-address flow was far simpler than we expected. Our contractors love knowing their financial privacy is protected by default.", + "technical": { + "sdkVersion": "1.2.0", + "implementation": "TypeScript SDK with custom backend scanning service", + "challenges": "Initial key management UX refinement" + } + } + ] +} diff --git a/src/i18n/en.json b/src/i18n/en.json index 383aa8e..e275f0c 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -307,5 +307,41 @@ "metaDescription": "Wraith Protocol enables private payments on any blockchain using stealth addresses. One SDK, multiple chains.", "ogTitle": "Wraith Protocol", "ogDescription": "Private payments for every chain. Stealth addresses, multichain SDK, and AI-powered privacy agents." + }, + "caseStudies": { + "eyebrow": "CASE STUDIES", + "heading": "Real-world privacy solutions.", + "description": "Teams and organizations using Wraith to enable private payments in production. From payroll processors to DAOs, see how stealth addresses solve real privacy challenges.", + "totalStudies": "TOTAL STUDIES", + "study": "study", + "studies": "studies", + "filterByChain": "FILTER BY CHAIN", + "allChains": "All Chains", + "readStudy": "Read Case Study", + "noStudies": "NO STUDIES FOUND", + "noStudiesDescription": "Try selecting a different chain filter.", + "backToAll": "Back to all case studies", + "useCase": "USE CASE", + "integration": "INTEGRATED", + "summary": "Summary", + "challenge": "Challenge", + "solution": "Solution", + "results": "Results", + "privacyImprovement": "PRIVACY IMPROVEMENT", + "integrationTime": "INTEGRATION TIME", + "txProcessed": "TRANSACTIONS PROCESSED", + "chainsUsed": "CHAINS USED", + "testimonial": "Testimonial", + "technicalDetails": "Technical Details", + "sdkVersion": "SDK VERSION", + "implementation": "IMPLEMENTATION", + "challenges": "CHALLENGES" + }, + "caseStudiesStrip": { + "eyebrow": "REAL USAGE", + "heading": "Case studies", + "description": "Production stories from teams using Wraith.", + "viewAll": "VIEW ALL", + "readMore": "Read More" } } diff --git a/src/i18n/es.json b/src/i18n/es.json index 0d6f898..1f4ca21 100644 --- a/src/i18n/es.json +++ b/src/i18n/es.json @@ -307,5 +307,41 @@ "metaDescription": "Wraith Protocol habilita pagos privados en cualquier blockchain usando direcciones ocultas. Un SDK, múltiples cadenas.", "ogTitle": "Wraith Protocol", "ogDescription": "Pagos privados para cada cadena. Direcciones ocultas, SDK multicadena y agentes de privacidad con IA." + }, + "caseStudies": { + "eyebrow": "CASOS DE ESTUDIO", + "heading": "Soluciones de privacidad en el mundo real.", + "description": "Equipos y organizaciones usando Wraith para habilitar pagos privados en producción. Desde procesadores de nómina hasta DAOs, ve cómo las direcciones ocultas resuelven desafíos reales de privacidad.", + "totalStudies": "ESTUDIOS TOTALES", + "study": "estudio", + "studies": "estudios", + "filterByChain": "FILTRAR POR CADENA", + "allChains": "Todas las Cadenas", + "readStudy": "Leer Caso de Estudio", + "noStudies": "NO SE ENCONTRARON ESTUDIOS", + "noStudiesDescription": "Prueba seleccionar un filtro de cadena diferente.", + "backToAll": "Volver a todos los casos de estudio", + "useCase": "CASO DE USO", + "integration": "INTEGRADO", + "summary": "Resumen", + "challenge": "Desafío", + "solution": "Solución", + "results": "Resultados", + "privacyImprovement": "MEJORA DE PRIVACIDAD", + "integrationTime": "TIEMPO DE INTEGRACIÓN", + "txProcessed": "TRANSACCIONES PROCESADAS", + "chainsUsed": "CADENAS USADAS", + "testimonial": "Testimonio", + "technicalDetails": "Detalles Técnicos", + "sdkVersion": "VERSIÓN DEL SDK", + "implementation": "IMPLEMENTACIÓN", + "challenges": "DESAFÍOS" + }, + "caseStudiesStrip": { + "eyebrow": "USO REAL", + "heading": "Casos de estudio", + "description": "Historias de producción de equipos usando Wraith.", + "viewAll": "VER TODOS", + "readMore": "Leer Más" } } diff --git a/src/pages/CaseStudies.tsx b/src/pages/CaseStudies.tsx new file mode 100644 index 0000000..177abba --- /dev/null +++ b/src/pages/CaseStudies.tsx @@ -0,0 +1,426 @@ +import { useState } from 'react'; +import { Link, useParams } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; +import { entries } from '../data/case-studies.json'; +import Layout from '../components/Layout'; + +type CaseStudy = { + id: string; + slug: string; + org: string; + logo: string; + industry: string; + useCase: string; + integrationDate: string; + status: string; + quote: string; + quotee: string; + summary: string; + challenge: string; + solution: string; + results: { + privacyImprovement: string; + integrationTime: string; + txProcessed: string; + chainsUsed: string[]; + }; + chains: string[]; + testimonial: string; + technical: { + sdkVersion: string; + implementation: string; + challenges: string; + }; +}; + +function CaseStudyDetail({ study }: { study: CaseStudy }) { + const { t } = useTranslation(); + const formattedDate = new Intl.DateTimeFormat('en-US', { + month: 'long', + year: 'numeric', + }).format(new Date(study.integrationDate)); + + // Schema.org structured data for SEO + const structuredData = { + '@context': 'https://schema.org', + '@type': 'Article', + headline: `${study.org} - ${study.useCase}`, + description: study.summary, + datePublished: study.integrationDate, + author: { + '@type': 'Organization', + name: study.org, + }, + publisher: { + '@type': 'Organization', + name: 'Wraith Protocol', + logo: { + '@type': 'ImageObject', + url: 'https://www.usewraith.xyz/logo.png', + }, + }, + mainEntityOfPage: { + '@type': 'WebPage', + '@id': `https://www.usewraith.xyz/case-studies/${study.slug}`, + }, + }; + + return ( + +