# گروه ساختمانی رئوفی — وب‌سایت شرکتی

بازطراحی صفحه اصلی سایت [raoofigroup.com](https://www.raoofigroup.com/) با Next.js.

- **زبان:** فارسی (`lang="fa"`)
- **جهت:** راست‌به‌چپ (`dir="rtl"`)
- **فریم‌ورک:** Next.js 15 (App Router) + TypeScript + Tailwind CSS v4

---

## اجرا

```bash
npm install
```

```bash
npm run dev
```

سپس <http://localhost:3000>

```bash
npm run build
```

---

## ساختار

```
src/
├── app/
│   ├── layout.tsx        # ریشه — تنظیم lang/dir، متادیتا، فونت‌ها
│   ├── page.tsx          # صفحه اصلی
│   ├── aboutus/page.tsx  # درباره ما
│   ├── our-services/page.tsx # خدمات ما
│   ├── fonts.ts          # بارگذاری محلی ایران‌یکان و Montserrat
│   └── globals.css       # توکن‌های رنگ/تایپوگرافی و انیمیشن‌ها (Tailwind v4 @theme)
├── components/
│   ├── shared/           # اجزای مشترک صفحات داخلی
│   │   ├── PageHero.tsx      # هدر تمام‌صفحه + بردکرامب
│   │   ├── Editorial.tsx     # ستون مرکزی: کپشن → تیتر → متن
│   │   ├── FullBleed.tsx     # تصویر تمام‌عرض ۱۶:۹
│   │   ├── ProjectGallery.tsx# کروسل پروژه‌ها
│   │   └── PageCta.tsx       # بخش پایانی تیره
│   ├── about/
│   │   └── Pillars.tsx       # سه بنیان
│   ├── services/
│   │   └── ServiceGrid.tsx   # گرید ۳×۲ شش حوزه تخصصی
│   ├── SiteHeader.tsx    # هدر شناور + منوی موبایل
│   ├── Hero.tsx          # اسلایدر تمام‌صفحه (نسخه دسکتاپ/موبایل)
│   ├── About.tsx         # معرفی + آمار کلیدی
│   ├── Marquee.tsx       # نوار متحرک BUILDING YOUR DREAMS
│   ├── Projects.tsx      # کروسل ۱۵ پروژه (اسکرول افقی RTL)
│   ├── Services.tsx      # شش حوزه خدمات
│   ├── ServiceIcons.tsx  # آیکون‌های خطی خدمات (SVG درون‌خطی)
│   ├── News.tsx          # سه خبر آخر
│   ├── ContactCta.tsx    # بخش دعوت به تماس
│   ├── SiteFooter.tsx    # فوتر
│   └── Reveal.tsx        # انیمیشن ظاهرشدن هنگام اسکرول
├── data/
│   └── site.ts           # تمام محتوا و متن‌ها در یک فایل
└── assets/
    ├── images/           # تصاویر دانلودشده از سایت فعلی (بدون تغییر)
    └── fonts/            # ایران‌یکان + Montserrat
```

## تصاویر

تمام تصاویر از سایت فعلی دانلود و **بدون هیچ تغییری** (بدون فشرده‌سازی، تغییر اندازه یا
تبدیل فرمت) در `src/assets/images/` ذخیره شده‌اند. فقط نام فایل‌ها برای خوانایی
تغییر کرده است.

از آنجا که تصاویر داخل `src/` قرار دارند (نه `public/`)، با `import` ایستا استفاده
می‌شوند؛ به این ترتیب `next/image` ابعاد را در زمان build می‌شناسد، `placeholder="blur"`
خودکار تولید می‌شود و خروجی در زمان سرو به AVIF/WebP بهینه می‌شود.

| بخش | مسیر | منبع |
| --- | --- | --- |
| لوگو | `images/brand/logo.png` | `n2Q43WNHJx.png` |
| اسلایدر (دسکتاپ) | `images/hero/hero-{1,2,3}.jpg` | `FRJAsJUMeL`, `itzQB5xwKn`, `ttGmf0CgcC` |
| اسلایدر (موبایل) | `images/hero/hero-{1,2,3}-mobile.jpg` | `4qKc62Tffq`, `a3NXbr7zHb`, `qrTNGmxAeG` |
| درباره ما | `images/about/about.jpg` | `PlUVEXnNA7.jpg` |
| پروژه‌ها (۱۵) | `images/projects/*.jpg` | گالری پروژه‌های سایت |
| اخبار (۳) | `images/news/*.jpg` | سه خبر آخر سایت |

### آیکون خدمات

شش آیکون خدمات در سایت فعلی از CDN پاسخ **۴۰۴** می‌گیرند و آنجا هم به‌صورت
تصویر شکسته (۰×۰) رندر می‌شوند. به جای آن‌ها آیکون‌های خطی SVG در
`src/components/ServiceIcons.tsx` طراحی شده که رنگ طلایی برند را به ارث می‌برند و
درخواست شبکه‌ای اضافه ندارند.

## فونت‌ها

ایران‌یکان (همان فونت سایت فعلی، نسخه `fanum` که ارقام لاتین را با اعداد فارسی
نمایش می‌دهد) و Montserrat برای عناوین لاتین — هر دو به‌صورت محلی از طریق
`next/font/local` بارگذاری می‌شوند تا وابستگی به CDN خارجی حذف شود.

## پالت رنگ

| نقش | مقدار |
| --- | --- |
| مشکی (ink) | `#0e1013` |
| کاغذی (paper) | `#fbfaf8` |
| شنی (sand) | `#f2eee8` |
| متن بدنه (muted) | `#5c6873` — برگرفته از سایت فعلی |
| طلایی (gold) | `#b08d57` |

## صفحه «درباره ما»

ظاهر این صفحه الهام‌گرفته از [omniyat.com/omniyat-atelier](https://www.omniyat.com/omniyat-atelier)
است، اما **تمام محتوا از صفحه درباره ما سایت رئوفی** برداشته شده است.

سیستم چیدمانِ برگرفته از مرجع:

| ویژگی | مرجع (Omniyat) | پیاده‌سازی |
| --- | --- | --- |
| ریتم عمودی بلوک متن | `192px 48px` | `192px 48px` (موبایل: `96px 24px`) |
| کپشن بالای تیتر | ۱۴px، `letter-spacing: 1.4px` | همان — فقط روی بخش لاتین |
| تیتر بخش | ۴۸px، وزن سبک، `max-width: 927px` | همان |
| متن بدنه | ۱۶px، `max-width: 738px`، وسط‌چین | همان |
| پس‌زمینه بخش‌ها | سفید ↔ خاکستری روشن | `paper` ↔ `sand` |
| تصاویر | تمام‌عرض بین بلوک‌های متن | همان (۱۶:۹) |

دو تفاوت عمدی برای فارسی:

- **`letter-spacing` روی متن فارسی اعمال نشده** — فاصله‌گذاری حروف، اتصال حروف فارسی
  را می‌شکند. این ویژگی فقط روی `span`های لاتین (`OVERVIEW`، `PHILOSOPHY`، …) اعمال شده است.
- **`line-height` بازتر** (تیتر ۱.۳ و متن ۲.۱ در برابر ۱.۰۵ و ۱.۷۵ در مرجع) چون خط فارسی
  به فضای عمودی بیشتری نیاز دارد.

تصویر اختصاصی این صفحه (`images/about/atelier.jpg`) از همان صفحه سایت رئوفی گرفته شده.
تصویر بنر آن صفحه در سایت فعلی **۴۰۴** می‌دهد (لینکش بدون پسوند فایل است)، بنابراین برای
هدر از یکی از تصاویر اسلایدر استفاده شده است.

## صفحه «خدمات ما»

همان سیستم چیدمان صفحه درباره ما (الهام‌گرفته از Omniyat Atelier).

**نکته‌ی مهم درباره‌ی محتوا:** صفحه‌ی خدمات سایت فعلی فقط شامل شش عنوان خدمت و تیتر
«با خدمات ما بیشتر آشنا شوید...» است — هیچ توضیحی برای خدمات ندارد و لینک همه‌ی
کارت‌ها به `/` می‌رود.

| بخش | منبع |
| --- | --- |
| تیتر صفحه، بردکرامب، شش عنوان خدمت (فارسی + لاتین) | عیناً از سایت رئوفی |
| بنر صفحه (`images/services/services-hero.jpg`) | عیناً از سایت رئوفی |
| توضیح یک‌خطی هر خدمت (`serviceDetails[].blurb`) | **نوشته‌شده برای این بازطراحی** |
| متن مقدمه و تیترهای بخش‌ها | **نوشته‌شده برای این بازطراحی** |

متن‌های نوشته‌شده صرفاً توضیح می‌دهند هر حوزه‌ی تخصصی *چیست* و هیچ ادعایی درباره‌ی
شرکت مطرح نمی‌کنند. همه در `src/data/site.ts` متمرکز شده‌اند تا با متن رسمی کارفرما
جایگزین شوند.

یک ناهماهنگی در سایت مبدأ: صفحه‌ی خدمات «طراح و معماری» نوشته ولی صفحه‌ی اصلی
«طراحی و معماری». نسخه‌ی صفحه اصلی استفاده شد.

## نکات

- لینک‌های ناوبری به مسیرهای واقعی سایت (`/portfolios`، `/news`، …) اشاره می‌کنند
  ولی تاکنون فقط صفحه اصلی و درباره ما طراحی شده‌اند.
- انیمیشن‌ها به `prefers-reduced-motion` احترام می‌گذارند.
- کروسل پروژه‌ها برای RTL نوشته شده (`scrollLeft` منفی) و با کیبورد و لمس کار می‌کند.
