feat: light product redesign across the whole site

[DataDave-Dev]

Rediseño completo a tema claro (dirección "producto claro": color + densidad), consistente en toda la web.

Landing

• Hero claro con CTA índigo + "ventana de producto" (code window + grafo a color).
• Sistema editorial: eyebrows numerados (01–07), headings a la izquierda, hairlines, grilla bento.
• Secciones nuevas: Showcase (call graph + ER), Languages, Use cases, FAQ, CTA + open source.
• Acento semántico: índigo (marca), verde (calls/run), naranja (FK).
• Superficie uniforme, glows difuminados, footer integrado.

App / Docs / 404

• /app: editor + diagrama React Flow re-tematizados a claro (nodos blancos, aristas semánticas, controles y leyenda claros).
• /docs: rediseño tipo docs-pro (rail con acento de marca, H1 editorial, prev/next como cards).
• 404: claro.

i18n

• Claves nuevas (showcase, languages, use cases, FAQ, CTA) en en/es.

Test plan

• pnpm typecheck / pnpm lint / pnpm build OK
• Verificado visualmente: landing, /app, /docs, 404

Summary by CodeRabbit

• New Features

  • Added new homepage sections: showcase, supported languages, use cases, and FAQ
  • Added call-to-action section with open-source contribution links

• Design Updates

  • Implemented light theme throughout the application
  • Updated documentation navigation with redesigned card-based layout
  • Refreshed visual styling across components including header, footer, and buttons

[ecc-tools]

ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 3c95678a-a603-494e-9b60-de4f63659361

📥 Commits

Reviewing files that changed from the base of the PR and between 86c1f81 and 77cf17f.

📒 Files selected for processing (26)

• src/app/[lang]/app/page.tsx
• src/app/[lang]/docs/[slug]/page.tsx
• src/app/[lang]/docs/layout.tsx
• src/app/[lang]/page.tsx
• src/app/globals.css
• src/app/not-found.tsx
• src/components/docs/DocsSidebar.tsx
• src/components/docs/Prose.tsx
• src/components/docs/pages/Languages.tsx
• src/components/layout/Footer.tsx
• src/components/layout/Header.tsx
• src/components/sections/CallToAction.tsx
• src/components/sections/Faq.tsx
• src/components/sections/Features.tsx
• src/components/sections/Hero.tsx
• src/components/sections/HeroPreview.tsx
• src/components/sections/HowItWorks.tsx
• src/components/sections/SectionHeading.tsx
• src/components/sections/Showcase.tsx
• src/components/sections/SupportedLanguages.tsx
• src/components/sections/UseCases.tsx
• src/components/ui/CodeWorkspace.tsx
• src/components/ui/Diagram.tsx
• src/components/ui/ScrollReveal.tsx
• src/i18n/dictionaries/en.json
• src/i18n/dictionaries/es.json

---

📝 Walkthrough

Walkthrough

Migrates the entire application from a dark to a light theme by introducing new CSS custom properties, making Header accept a variant prop, and restyling every section, layout, docs, and UI component. Adds five new homepage sections (Showcase, SupportedLanguages, UseCases, Faq, CallToAction) with a shared SectionHeading primitive and EN/ES i18n copy. Extends ScrollReveal to animate .js-draw connectors.

Changes

Light-theme redesign and new homepage sections

Layer / File(s)	Summary
Global CSS light-theme tokens and base styling src/app/globals.css	Replaces dark CSS variables with a new light token set (--color-accent, --color-brand, --color-ink*, --color-paper, --color-line), switches body to light paper background, adds :focus-visible focus ring, .grain overlay with prefers-reduced-motion, and replaces dark React Flow overrides with light ones.
Header variant prop (light/dark) src/components/layout/Header.tsx	Adds optional variant prop (default "dark"), derives a light boolean, and conditionally applies all header styles (background, logo, nav links, "Get started" button, language picker) based on light and scrolled state.
New section components src/components/sections/SectionHeading.tsx, src/components/sections/Showcase.tsx, src/components/sections/SupportedLanguages.tsx, src/components/sections/UseCases.tsx, src/components/sections/Faq.tsx, src/components/sections/CallToAction.tsx	Adds SectionHeading (shared eyebrow/title with tone prop), Showcase (call graph SVG + schema mini visualizer), SupportedLanguages (bordered language rows), UseCases (numbered card grid), Faq (<details> accordion), and CallToAction (two-column CTA with GitHub star/contribute links).
Home page assembly and i18n src/app/[lang]/page.tsx, src/i18n/dictionaries/en.json, src/i18n/dictionaries/es.json	Wires the five new sections into Home after Features, wraps the body in a light container, passes variant="light" to Header, constructs appHref from lang, and adds EN/ES translation keys for all new sections.
Existing sections restyled + ScrollReveal src/components/sections/Hero.tsx, src/components/sections/HeroPreview.tsx, src/components/sections/HowItWorks.tsx, src/components/sections/Features.tsx, src/components/ui/ScrollReveal.tsx	Updates Hero gradient and chip colors; simplifies HeroPreview SVG node/edge fills; refactors HowItWorks and Features to use SectionHeading with a light card layout. Extends ScrollReveal to batch-animate .js-draw connectors with a left-to-right scaleX reveal.
Layout components restyled src/app/[lang]/app/page.tsx, src/app/[lang]/docs/layout.tsx, src/app/[lang]/docs/[slug]/page.tsx, src/components/layout/Footer.tsx	Passes variant="light" to Header in all page layouts. Reskins Footer to light theme (brand area, ColHeading, FooterLink, bottom bar). Updates docs layout grid dimensions. Redesigns docs prev/next navigation as a two-column card grid with localized labels.
Docs components restyled src/components/docs/DocsSidebar.tsx, src/components/docs/Prose.tsx, src/components/docs/pages/Languages.tsx	Switches DocsSidebar to a border-left active-link scheme. Reskins all Prose typography primitives, code blocks, and callouts to the light palette. Updates the Languages matrix table colors to teal/gray.
UI and 404 components restyled src/components/ui/CodeWorkspace.tsx, src/components/ui/Diagram.tsx, src/app/not-found.tsx	Reskins CodeWorkspace tabs, editor, action bar, and diagram pane throughout. Updates Diagram edge colors, node styles, React Flow panel, and legend. Reskins the 404 page SVG nodes/edges and action buttons to the explicit light palette.

Sequence Diagram(s)

The conditions for a sequence diagram are not met — the changes are primarily a visual retheme and new static section components without new multi-component async flows.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• DataDave-Dev/weftmap#4: Directly overlaps with the Hero.tsx background gradient/overlay markup that this PR replaces with a single brand-tinted gradient layer.
• DataDave-Dev/weftmap#8: Overlaps with the docs prev/next navigation in src/app/[lang]/docs/[slug]/page.tsx and DocsSidebar.tsx active-link behavior, both of which are restyled in this PR.
• DataDave-Dev/weftmap#31: Directly overlaps with Footer.tsx component rendering and brand link markup, which this PR reskins from dark/metallic to a light theme.

Poem

🐇 Hop, hop — the dark has gone away,
Light paper and ink are here to stay!
New sections bloom like spring's first shoots,
SectionHeading lays down stylish roots.
The grain, the glow, the teal-check mark —
A bright new coat for what was dark. ✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/landing-revamp

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}