Create

README.md

@@ -0,0 +1,165 @@
+# گروه ساختمانی رئوفی — وب‌سایت شرکتی
+
+بازطراحی صفحه اصلی سایت [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` منفی) و با کیبورد و لمس کار می‌کند.