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