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

1.9 KiB

Raw Permalink Blame History

Responsive

Mobile-first layout using Tailwind default breakpoints.

Breakpoints

Name	Min width	Typical device
default	0	Mobile phones
`sm`	640px	Large phones / small tablets
`md`	768px	Tablets
`lg`	1024px	Laptops
`xl`	1280px	Desktops
`2xl`	1536px	Large desktops

Project usage notes:

Header desktop nav appears at xl (not lg) to protect crowded Persian labels.
Section padding steps at md (py-16 → md:py-20).
Hero top padding steps at md (pt-24 → md:pt-36).

Layout adaptations

Concern	Mobile	Desktop
Container gutter	`px-6`	same
Max width	`76.8rem`	same
Section Y	64px	80px
Grids	1 col	2–4 cols
Nav	Sheet menu	Inline `NavigationMenu`
Forms (newsletter)	Stacked	Horizontal `sm:flex-row`

Typography scaling

Scale variants already encode responsive steps (e.g. h2: text-2xl md:text-3xl lg:text-4xl). Prefer those over manual overrides.

Inputs use text-base md:text-sm to prevent iOS focus zoom.

Spacing adaptations

Increase gaps at larger breakpoints (gap-10 lg:gap-16) using the spacing scale.
Do not shrink container padding on mobile below px-6.
Collapse multi-column footers to grid-cols-2 before sm:grid-cols-4.

Touch & pointer

Minimum target ~40px for primary icon buttons (size="icon" → 40px).
Keep tap areas separated (gap-1.5–gap-2 in toolbars).

Overflow

Test at 320–360px widths for Persian word wrapping.
No horizontal page scroll; clip section decorations.
Tables: wrap in horizontal scroll regions (blog tables already do).

QA matrix (minimum)

375×812 (mobile)
768×1024 (tablet)
1280×800 (desktop)
Light + dark on each

1.9 KiB Raw Permalink Blame History Unescape Escape