ar.badieiandCursor
c2376b3b9e
Build & Push Docker Image / build (push) Has been cancelled
Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
93 lines
2.7 KiB
Markdown
93 lines
2.7 KiB
Markdown
# 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)
|