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,89 @@
+# Grid
+
+Grid rules for marketing sections, card layouts, and footers. Grids always live **inside** `<Container>`.
+
+## Defaults
+
+| Concern | Standard |
+| --- | --- |
+| Framework | Tailwind CSS Grid / Flexbox |
+| Gap scale | Spacing tokens only (`gap-4`, `gap-6`, `gap-8`, `gap-10` …) — see [spacing.md](./spacing.md) |
+| Columns | Mobile-first: 1 → 2 → 3/4 as viewport grows |
+| Alignment | Start-aligned in RTL; use logical properties (`ms-`, `me-`, `ps-`, `pe-`) when offsetting |
+
+## Common patterns
+
+### Two-column feature / split
+
+```tsx
+<div className="grid grid-cols-1 gap-10 lg:grid-cols-2 lg:gap-16">
+  <div>…copy…</div>
+  <div>…media…</div>
+</div>
+```
+
+### Card grid (services / posts)
+
+```tsx
+<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+  {items.map(…)}
+</div>
+```
+
+### Footer link columns
+
+```tsx
+<nav className="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-4">
+  …
+</nav>
+```
+
+### Newsletter / CTA split
+
+```tsx
+<div className="grid grid-cols-1 gap-10 lg:grid-cols-2">
+  …
+</div>
+```
+
+## Breakpoint guidance
+
+| Viewport | Typical columns |
+| --- | --- |
+| &lt; 640px (`default`) | 1 |
+| `sm` ≥ 640px | 2 for dense cards |
+| `md` ≥ 768px | 2–3 |
+| `lg` ≥ 1024px | 2–4 marketing grids |
+| `xl` ≥ 1280px | Same as `lg`; prefer more whitespace over more columns |
+
+Exact breakpoints: [responsive.md](./responsive.md).
+
+## Gap rules
+
+Prefer these gaps:
+
+| Context | Gap |
+| --- | --- |
+| Dense UI (forms, chips) | `gap-2` / `gap-3` (8 / 12) |
+| Card grids | `gap-6` (24) |
+| Section split layouts | `gap-10` / `gap-16` (40 / 64) |
+| Footer columns | `gap-x-6 gap-y-10` |
+
+Do not use arbitrary gaps (`gap-[13px]`, `gap-[1.1rem]`).
+
+## Alignment & RTL
+
+- Site is Persian / RTL. Prefer `start` / `end` over `left` / `right`.
+- For asymmetric hero layouts, mirror with logical classes (`lg:ms-auto`, not `lg:ml-auto` unless intentional LTR islands).
+
+## Forbidden
+
+- CSS Grid that sets `width` wider than the container without clipping.
+- Mixing Bootstrap / custom 12-column frameworks.
+- Absolute-positioned “fake grids” for primary content.
+
+## Related
+
+- [layout.md](./layout.md)
+- [spacing.md](./spacing.md)
+- [cards.md](./cards.md)