Skip to content

release: promote dev → main — landing storytelling sections #427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AndreLiar merged 2 commits into from
Jun 14, 2026
Merged

release: promote dev → main — landing storytelling sections #427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9ec1da8
feat(landing): add storytelling sections (problem, diff, trust, faq, …
AndreLiar Jun 14, 2026
47e5160
Merge pull request #426 from AndreLiar/feat/landing-storytelling-sect…
AndreLiar Jun 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
193 changes: 193 additions & 0 deletions frontend/src/components/marketing/landing-page-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ import Link from 'next/link';
import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import {
AlertTriangle,
ArrowRight,
Bell,
Bot,
CheckCircle2,
ChevronDown,
ClipboardCheck,
Database,
FileSearch,
Expand All @@ -16,7 +18,10 @@ import {
Gauge,
ListChecks,
Lock,
ScrollText,
Server,
ShieldCheck,
Sparkles,
Upload,
} from 'lucide-react';

Expand Down Expand Up @@ -87,6 +92,24 @@ export function LandingPageContent() {

<VideoHero />

{/* Problem */}
<section className="bg-muted/50 py-24">
<div className="container mx-auto px-4 max-w-4xl text-center">
<h2 className="text-3xl font-bold mb-4">{t('landing.problem.heading')}</h2>
<p className="text-muted-foreground mb-12 text-lg">{t('landing.problem.subtitle')}</p>
<div className="grid sm:grid-cols-2 gap-6 text-left">
{['manual', 'slow', 'endless', 'accountable'].map((k) => (
<div key={k} className="flex gap-3 rounded-xl border bg-card p-5">
<AlertTriangle className="h-5 w-5 shrink-0 text-warning" />
<p className="text-sm text-muted-foreground leading-relaxed">
{t(`landing.problem.points.${k}`)}
</p>
</div>
))}
</div>
</div>
</section>

<section className="container mx-auto px-4 py-24">
<h2 className="text-3xl font-bold text-center mb-12">{t('landing.featuresHeading')}</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
Expand Down Expand Up @@ -138,6 +161,32 @@ export function LandingPageContent() {
</div>
</section>

{/* Differentiation */}
<section className="container mx-auto px-4 py-24">
<div className="text-center mb-12">
<h2 className="text-3xl font-bold mb-4">{t('landing.differentiation.heading')}</h2>
<p className="text-muted-foreground text-lg">{t('landing.differentiation.subtitle')}</p>
</div>
<div className="grid md:grid-cols-3 gap-6">
{[
{ k: 'grc', icon: <Database className="h-6 w-6" />, highlight: false },
{ k: 'chatgpt', icon: <Bot className="h-6 w-6" />, highlight: false },
{ k: 'retrieva', icon: <Sparkles className="h-6 w-6" />, highlight: true },
].map(({ k, icon, highlight }) => (
<div
key={k}
className={`rounded-xl border p-6 ${highlight ? 'border-primary bg-primary/5' : 'bg-card'}`}
>
<div className={`mb-4 ${highlight ? 'text-primary' : 'text-muted-foreground'}`}>{icon}</div>
<h3 className="text-lg font-semibold mb-2">{t(`landing.differentiation.${k}.title`)}</h3>
<p className="text-sm text-muted-foreground leading-relaxed">
{t(`landing.differentiation.${k}.desc`)}
</p>
</div>
))}
</div>
</section>

<section className="bg-muted/50 py-24">
<div className="container mx-auto px-4">
<motion.div
Expand Down Expand Up @@ -228,7 +277,151 @@ export function LandingPageContent() {
</div>
</section>

{/* Regulatory credibility */}
<section className="container mx-auto px-4 py-24 max-w-3xl text-center">
<ScrollText className="mx-auto h-10 w-10 text-primary mb-4" />
<h2 className="text-3xl font-bold mb-4">{t('landing.credibility.heading')}</h2>
<p className="text-muted-foreground mb-10 text-lg">{t('landing.credibility.subtitle')}</p>
<ul className="space-y-4 text-left">
{['grounded', 'cited', 'signoff'].map((k) => (
<li key={k} className="flex gap-3 rounded-xl border bg-card p-5">
<CheckCircle2 className="h-5 w-5 shrink-0 text-success" />
<span className="text-sm text-muted-foreground leading-relaxed">
{t(`landing.credibility.points.${k}`)}
</span>
</li>
))}
</ul>
</section>

{/* Security & data */}
<section className="bg-muted/50 py-24">
<div className="container mx-auto px-4 max-w-5xl">
<div className="text-center mb-12">
<ShieldCheck className="mx-auto h-10 w-10 text-primary mb-4" />
<h2 className="text-3xl font-bold mb-4">{t('landing.security.heading')}</h2>
<p className="text-muted-foreground text-lg">{t('landing.security.subtitle')}</p>
</div>
<div className="grid sm:grid-cols-2 gap-6">
{[
{ k: 'isolation', icon: <Lock className="h-5 w-5" /> },
{ k: 'selfHosted', icon: <Server className="h-5 w-5" /> },
{ k: 'encryption', icon: <ShieldCheck className="h-5 w-5" /> },
{ k: 'erasure', icon: <Database className="h-5 w-5" /> },
].map(({ k, icon }) => (
<div key={k} className="flex gap-3 rounded-xl border bg-card p-5">
<span className="text-primary shrink-0">{icon}</span>
<div>
<h3 className="font-semibold text-sm mb-1">
{t(`landing.security.points.${k}.title`)}
</h3>
<p className="text-sm text-muted-foreground leading-relaxed">
{t(`landing.security.points.${k}.desc`)}
</p>
</div>
</div>
))}
</div>
</div>
</section>

<PricingSection />

{/* FAQ */}
<section className="container mx-auto px-4 py-24 max-w-3xl">
<h2 className="text-3xl font-bold text-center mb-12">{t('landing.faq.heading')}</h2>
<div className="space-y-3">
{['data', 'replace', 'frameworks', 'language', 'speed'].map((k) => (
<details key={k} className="group rounded-xl border bg-card p-5">
<summary className="flex cursor-pointer list-none items-center justify-between font-medium">
{t(`landing.faq.items.${k}.q`)}
<ChevronDown className="h-4 w-4 shrink-0 transition-transform group-open:rotate-180" />
</summary>
<p className="mt-3 text-sm text-muted-foreground leading-relaxed">
{t(`landing.faq.items.${k}.a`)}
</p>
</details>
))}
</div>
</section>

{/* Final CTA */}
<section className="container mx-auto px-4 pb-24">
<div className="rounded-2xl border bg-primary/5 p-12 text-center">
<h2 className="text-3xl font-bold mb-4">{t('landing.finalCta.heading')}</h2>
<p className="text-muted-foreground mb-8 text-lg max-w-2xl mx-auto">
{t('landing.finalCta.subtitle')}
</p>
<div className="flex flex-wrap justify-center gap-4">
<Link href="/register">
<Button size="lg">
{t('landing.finalCta.primary')}
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
</Link>
<Link href="/login">
<Button size="lg" variant="outline">
{t('landing.finalCta.secondary')}
</Button>
</Link>
</div>
</div>
</section>

{/* Footer */}
<footer className="border-t bg-muted/30">
<div className="container mx-auto px-4 py-12">
<div className="grid gap-8 md:grid-cols-4">
<div>
<div className="text-lg font-bold mb-2">Retrieva</div>
<p className="text-sm text-muted-foreground">{t('landing.footer.tagline')}</p>
</div>
<div>
<div className="font-semibold text-sm mb-3">{t('landing.footer.product')}</div>
<ul className="space-y-2 text-sm text-muted-foreground">
<li>
<Link href="/register" className="hover:text-foreground">
{t('landing.footer.getStarted')}
</Link>
</li>
<li>
<Link href="/login" className="hover:text-foreground">
{t('landing.footer.signin')}
</Link>
</li>
</ul>
</div>
<div>
<div className="font-semibold text-sm mb-3">{t('landing.footer.resources')}</div>
<ul className="space-y-2 text-sm text-muted-foreground">
<li>
<a
href="https://andreliar.github.io/Retrieva/"
target="_blank"
rel="noreferrer"
className="hover:text-foreground"
>
{t('landing.footer.docs')}
</a>
</li>
</ul>
</div>
<div>
<div className="font-semibold text-sm mb-3">{t('landing.footer.company')}</div>
<ul className="space-y-2 text-sm text-muted-foreground">
<li>
<a href="mailto:contact@retrieva.online" className="hover:text-foreground">
{t('landing.footer.contact')}
</a>
</li>
</ul>
</div>
</div>
<div className="mt-10 border-t pt-6 text-center text-xs text-muted-foreground">
© {new Date().getFullYear()} Retrieva — {t('landing.footer.rights')}
</div>
</div>
</footer>
</div>
);
}
Expand Down
99 changes: 99 additions & 0 deletions frontend/src/shared/i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,6 +417,105 @@
"title": "Export Evidence",
"desc": "Generate regulator-ready outputs including the Register of Information and gap remediation artefacts."
}
},
"problem": {
"heading": "DORA vendor reviews are slow, manual, and never finished",
"subtitle": "Every ICT third party (Articles 28–30) has to be assessed — and re-assessed — continuously. By hand, that doesn't scale.",
"points": {
"manual": "An analyst reads a 50-page contract against a checklist — for every single vendor.",
"slow": "Weeks per assessment, inconsistent between analysts, and expensive when you outsource it.",
"endless": "New vendors, renewals, annual reviews — the work never stops.",
"accountable": "DORA has applied since January 2025, and the financial entity stays accountable for every provider."
}
},
"differentiation": {
"heading": "Not another GRC suite. Not ChatGPT.",
"subtitle": "Most tools make you fill in registers by hand, or give you an answer you can't defend.",
"grc": {
"title": "GRC suites",
"desc": "Powerful but heavy, expensive, and months to deploy — and you still fill the registers and read the documents yourself."
},
"chatgpt": {
"title": "ChatGPT & spreadsheets",
"desc": "Fast, but a throwaway answer: no citations, no audit trail, no sign-off, no view of your whole portfolio."
},
"retrieva": {
"title": "Retrieva",
"desc": "Reads the actual evidence — the contract, SOC 2, ISO — cites every finding, and lets your expert review-and-sign, across your entire vendor portfolio."
}
},
"credibility": {
"heading": "Grounded in the regulation — not the model's memory",
"subtitle": "Every finding is traceable back to the source text. Built to be audited, not to impress.",
"points": {
"grounded": "Built on the verbatim DORA articles plus the RTS/ITS (EUR-Lex), versioned and dated so you know exactly which text was used.",
"cited": "Every gap and every answer is cited back to its source — auditable evidence, not a confident guess.",
"signoff": "Article 30 contract review checks the mandatory clauses, and your expert signs off clause by clause."
}
},
"security": {
"heading": "Built for regulated data",
"subtitle": "Your vendors' documents are sensitive. They're treated that way.",
"points": {
"isolation": {
"title": "Strict tenant isolation",
"desc": "Each vendor's documents are walled off — enforced at both the database and the vector layers, so nothing leaks across workspaces."
},
"selfHosted": {
"title": "Self-hosted embeddings",
"desc": "Your documents are vectorised in-house — they are not sent to a third-party embedding API."
},
"encryption": {
"title": "Encrypted & hardened",
"desc": "Field-level AES-256 encryption at rest, httpOnly session cookies, and per-IP rate limiting on credential surfaces."
},
"erasure": {
"title": "Real erasure",
"desc": "Delete a vendor and its data goes with it — documents, vectors, assessments and files are purged."
}
}
},
"faq": {
"heading": "Questions",
"items": {
"data": {
"q": "Is my data safe?",
"a": "Vendor documents are isolated per workspace, encrypted at rest, and embedded in-house (never sent to a third-party embedding API). Deleting a vendor erases its data."
},
"replace": {
"q": "Do I have to replace my GRC tool?",
"a": "No. Retrieva does the evidence-heavy part — reading documents and producing cited DORA gap reports — and complements your existing registry or GRC."
},
"frameworks": {
"q": "What does it cover?",
"a": "DORA ICT third-party risk: gap analysis against Articles 28–30, Article 30 contract review with clause sign-off, due diligence questionnaires, and a Register of Information export."
},
"language": {
"q": "Does it work in French?",
"a": "Yes. The interface is bilingual (FR/EN) and the assistant answers in the language of your question."
},
"speed": {
"q": "How fast do I get value?",
"a": "Upload a contract or a vendor's security documents and get a cited DORA gap report in minutes — not days."
}
}
},
"finalCta": {
"heading": "Turn a stack of vendor documents into a defensible DORA file.",
"subtitle": "Upload the evidence, get a cited gap report, review and sign. Start free — no credit card.",
"primary": "Get started",
"secondary": "Sign in"
},
"footer": {
"tagline": "DORA compliance intelligence — read the evidence, cite the gaps, sign off.",
"product": "Product",
"resources": "Resources",
"company": "Company",
"docs": "Documentation",
"getStarted": "Get started",
"signin": "Sign in",
"contact": "Contact",
"rights": "All rights reserved."
}
},
"assessments": {
Expand Down
Loading
Loading