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

بازطراحی صفحه اصلی سایت raoofigroup.com با Next.js.

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

---

اجرا

npm install

npm run dev

سپس http://localhost:3000

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 است، اما تمام محتوا از صفحه درباره ما سایت رئوفی برداشته شده است.

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

ویژگی	مرجع (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 منفی) و با کیبورد و لمس کار می‌کند.