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>
46 lines
2.0 KiB
Plaintext
46 lines
2.0 KiB
Plaintext
---
|
|
description: Global layout container rules for all page sections and blocks
|
|
globs: app/**/*.tsx,components/**/*.tsx
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Layout & Container Rules
|
|
|
|
Every imported or newly created block MUST follow the site's global layout container.
|
|
|
|
Full documentation: `docs/design-system/layout.md`, `docs/design-system/container.md`, `docs/design-system/sections.md`.
|
|
|
|
## Shared tokens
|
|
|
|
Use `Container` from `@/components/container` and tokens from `@/lib/layout`:
|
|
|
|
- `layout.container` / `<Container>` — `mx-auto w-full max-w-[76.8rem] px-6`
|
|
- `layout.sectionY` — vertical section rhythm (`py-16 md:py-20`; adjacent gap = 8rem / md:10rem)
|
|
- `layout.sectionTopWithHeader` — first section under the fixed header (`pt-28 pb-16 md:pt-32 md:pb-20`)
|
|
- `layout.scrollMargin` — for in-page anchors under the fixed header
|
|
|
|
## Rules
|
|
|
|
- Never let a block extend beyond the site's main content width (`max-w-[76.8rem]`).
|
|
- Always use the project's standard container width, max-width, and horizontal padding (`px-6`).
|
|
- Preserve consistent left and right alignment with all other sections.
|
|
- Do not use a different container size unless explicitly required by the design.
|
|
- Full-width backgrounds are allowed, but the content inside must remain constrained to `<Container>`.
|
|
- Maintain consistent spacing between sections via `layout.sectionY`.
|
|
- Prefer `section-shell` + optional `section-decor` / `section-content` for atmospheric sections.
|
|
- If a Shadcn/Tailark block has its own container or max-width, replace it with `<Container>` / `layout.container`.
|
|
- Remove any hardcoded width, max-width, or horizontal padding that conflicts with the site's layout.
|
|
- Before finishing a block, verify visual alignment with previous/next sections.
|
|
|
|
## Pattern
|
|
|
|
```tsx
|
|
<section className={cn("section-shell bg-section-canvas", layout.sectionY)}>
|
|
<Container>
|
|
{/* section content */}
|
|
</Container>
|
|
</section>
|
|
```
|
|
|
|
Inner text measure (`max-w-xl`, `max-w-3xl` on a heading/paragraph) is fine for readability — do not use those as section shells.
|