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>
59 lines
1.6 KiB
Markdown
59 lines
1.6 KiB
Markdown
# Footer
|
|
|
|
Canonical footer: `components/footer.tsx` (`FooterSection`).
|
|
|
|
## Structure
|
|
|
|
1. **Newsletter band** — headline + short copy + email form.
|
|
2. **Link columns** — site maps (pages, services, contact, legal).
|
|
3. **Brand / social / legal meta** — logo mark, social icon buttons, copyright.
|
|
|
|
## Layout
|
|
|
|
```tsx
|
|
<footer className={cn("section-shell bg-section-muted", layout.sectionY)}>
|
|
<div className="section-decor" aria-hidden>…</div>
|
|
<Container className="section-content">
|
|
{/* newsletter */}
|
|
{/* link grid */}
|
|
{/* bottom bar */}
|
|
</Container>
|
|
</footer>
|
|
```
|
|
|
|
| Region | Grid / spacing |
|
|
| --- | --- |
|
|
| Newsletter | `grid-cols-1 lg:grid-cols-2 gap-10`, bottom border, `mb-14 pb-14` |
|
|
| Links | `grid-cols-2 sm:grid-cols-4 gap-x-6 gap-y-10`, `py-10 lg:py-16` |
|
|
| Column titles | `type.h4` + `mb-5` |
|
|
| Links | `type.link` + `space-y-4` |
|
|
|
|
## Form
|
|
|
|
- `Input` height aligned to `Button size="lg"` via `h-[var(--btn-height-lg)]`.
|
|
- Stack vertically on mobile (`flex-col`), horizontal from `sm`.
|
|
|
|
## Social icons
|
|
|
|
- Use `Button variant="ghost" size="icon"` with accessible `aria-label`.
|
|
- Icons from `lucide-react`.
|
|
|
|
## Visual
|
|
|
|
- Background: `bg-section-muted` (not a hard gray box).
|
|
- Optional top wash gradient in `.section-decor` using primary at ≤ 4% opacity.
|
|
- Borders: semantic `border-border`.
|
|
|
|
## Rules
|
|
|
|
1. Stay on the shared `Container`—footer columns must align with header/content.
|
|
2. Do not introduce a second footer component for marketing pages.
|
|
3. Keep link lists scannable; avoid paragraph walls.
|
|
4. Dark mode comes from tokens automatically.
|
|
|
|
## Related
|
|
|
|
- [sections.md](./sections.md)
|
|
- [forms.md](./forms.md)
|
|
- [icons.md](./icons.md)
|