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.3 KiB

Raw Permalink Blame History

Cards

Canonical card: @/components/ui/card.

Use cards for interactive or grouped content units (settings panels, post previews, pricing cells). Do not wrap every section in a card. Do not put cards in the hero.

Anatomy

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  CardAction,
} from "@/components/ui/card";

<Card>
  <CardHeader>
    <CardTitle>عنوان</CardTitle>
    <CardDescription>توضیح کوتاه</CardDescription>
    <CardAction>{/* optional */}</CardAction>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>…</CardFooter>
</Card>

Spec

Property	Value
Background	`bg-card`
Text	`text-card-foreground`
Radius	`rounded-xl` (≈ `--radius-xl`)
Border	`border border-border`
Shadow	`shadow-glow-sm` → hover `shadow-glow-primary` (dark hover `shadow-glow-lg`)
Padding	Vertical `py-6`; header/content/footer `px-6`
Internal stack	`flex flex-col gap-6`
Title type	`type["card-title"]`
Description type	`type["card-desc"]`
Transition	`duration-200` on border + shadow

Hover

Mode	Behavior
Light	`hover:border-primary/30 hover:shadow-glow-primary`
Dark	`dark:hover:border-primary/40 dark:hover:shadow-glow-lg`

Hover is subtle—cards should not jump (translate) or scale aggressively. Timeline roadmap cards are a special case with their own CSS in globals.css.

Dark mode

Cards use semantic card tokens (#1c2424 in dark). Do not force bg-white on cards.

Spacing with grids

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

Blog / media cards

Blog surfaces may use rounded-blog (--radius-blog: 0.9375rem) on images/figures. Prefer shared Card for structured panels; media-heavy tiles may compose Card + Image with object-cover and consistent aspect ratios (images.md).

Forbidden

Nested cards inside cards for decoration.
Heavy multi-layer drop shadows.
Random rounded-2xl / rounded-md overrides without reason.
Cards as the only way to create section background (use bg-section-* instead).

2.3 KiB Raw Permalink Blame History