ar.badiei/aragrp

Fork 0

Files

T

ar.badieiandCursor c2376b3b9e

Build & Push Docker Image / build (push) Has been cancelled

Details

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

2.2 KiB

Raw Permalink Blame History

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
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

<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)

<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
  {items.map(…)}
</div>

Footer link columns

<nav className="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-4">
  …
</nav>

<div className="grid grid-cols-1 gap-10 lg:grid-cols-2">
  …
</div>

Breakpoint guidance

Viewport	Typical columns
< 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.

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.

2.2 KiB Raw Permalink Blame History Unescape Escape