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

بازطراحی صفحه اصلی سایت 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 منفی) و با کیبورد و لمس کار می‌کند.

8.9 KiB Raw Blame History