mirror of
https://git.meshkee.com/Meshkee-Websites/raoufi-group.git
synced 2026-08-11 20:29:33 +04:30
166 lines
8.9 KiB
Markdown
166 lines
8.9 KiB
Markdown
# گروه ساختمانی رئوفی — وبسایت شرکتی
|
|
|
|
بازطراحی صفحه اصلی سایت [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` منفی) و با کیبورد و لمس کار میکند.
|