feat: redesign landing page with brand system and section blocks

Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-23 17:00:55 +03:30
parent f0c290786e
commit c2376b3b9e
352 changed files with 34442 additions and 2760 deletions
@@ -0,0 +1,92 @@
+# Sections
+
+Every major page band is a **section** with shared shell, rhythm, and background language.
+
+## Required pattern
+
+```tsx
+import { Container } from "@/components/container";
+import { layout } from "@/lib/layout";
+import { type, typeSpacing } from "@/lib/typography";
+import { cn } from "@/lib/utils";
+
+<section
+  id="services"
+  className={cn("section-shell bg-section-canvas", layout.sectionY, layout.scrollMargin)}
+>
+  <div className="section-decor" aria-hidden>
+    {/* optional ambient glow */}
+  </div>
+  <Container className="section-content">
+    <div className={cn("mx-auto max-w-2xl text-center", typeSpacing.sectionStack)}>
+      <p className={type.eyebrow}>…</p>
+      <h2 className={type.h2}>…</h2>
+      <p className={type["section-intro"]}>…</p>
+    </div>
+    {/* section body */}
+  </Container>
+</section>
+```
+
+## One job per section
+
+- One purpose, one headline, usually one supporting sentence.
+- Do not combine unrelated marketing goals in a single band.
+- Secondary actions belong in the CTA group, not as parallel headline systems.
+
+## Background variants
+
+| Utility | Intent |
+| --- | --- |
+| `bg-section-canvas` | Default continuous wash (subtle primary tint) |
+| `bg-section-muted` | Soft muted band (replaces hard gray patches) |
+| `bg-gradient-hero` | Hero atmosphere |
+| `bg-gradient-featured` | Featured / highlight band |
+| `bg-gradient-cta` | Strong brand CTA panel |
+| `bg-background` | Flat canvas when wash is unnecessary |
+
+Alternate canvas ↔ muted between adjacent sections to create rhythm without hard blocks.
+
+## Vertical rhythm
+
+- Use `layout.sectionY` (`py-16 md:py-20`) so every block-to-block gap is the same (8rem / md:10rem).
+- First section under header: `layout.sectionTopWithHeader` (homepage hero uses this too).
+- Anchors: always add `layout.scrollMargin`.
+
+## Intro block
+
+Prefer centered or start-aligned intro using `typeSpacing.sectionStack`:
+
+- Eyebrow → Heading → Section intro
+- Constrain measure with `max-w-2xl` / `max-w-3xl` on the **intro only**
+
+## Decorative layers
+
+```tsx
+<div className="section-decor" aria-hidden>
+  <div className="absolute start-1/2 top-0 size-[min(32rem,80vw)] -translate-x-1/2 rounded-full bg-glow-primary" />
+</div>
+```
+
+Rules:
+
+- Must sit in `.section-decor`.
+- `pointer-events-none`, no layout participation.
+- Never `position: fixed` for section atmosphere.
+- Opacity kept low (see [gradients.md](./gradients.md)).
+
+## Motion
+
+Wrap section bodies with `MotionReveal` / `MotionRevealItem` for scroll entrance. Keep stagger ≤ ~8 children.
+
+## Forbidden
+
+- Random `py-12` / `py-24` section padding.
+- Hard `bg-gray-100` patches disconnected from `bg-section-*`.
+- Multiple competing H2s in one section.
+
+## Related
+
+- [layout.md](./layout.md)
+- [gradients.md](./gradients.md)
+- [footer.md](./footer.md)