---
alwaysApply: true
description: استانداردهای سازماندهی و مدیریت کامپوننت‌ها در پروژه
---

# استاندارد سازماندهی کامپوننت‌ها

این پروژه از یک ساختار پوشه‌بندی استاندارد برای سازماندهی کامپوننت‌ها استفاده می‌کند.

## ساختار پوشه‌بندی

کامپوننت‌ها در پوشه `components/` بر اساس نوع و کاربردشان سازماندهی شده‌اند:

### 1. `components/layout/`
کامپوننت‌های مرتبط با ساختار کلی صفحه:
- `conditional-layout.tsx` - لایه‌بندی شرطی برای صفحات
- `theme-provider.tsx` - ارائه‌دهنده تم
- `top-progress-bar.tsx` - نوار پیشرفت بالا

### 2. `components/navigation/`
کامپوننت‌های مرتبط با ناوبری و هدر/فوتر:
- `header.tsx` - هدر اصلی
- `header-main.tsx` - هدر اصلی (نسخه tailark)
- `footer.tsx` - فوتر
- `logo.tsx` - لوگو
- `logo-main.tsx` - لوگو اصلی (نسخه tailark)
- `theme-toggle.tsx` - دکمه تغییر تم

### 3. `components/sections/`
کامپوننت‌های بخش‌های مختلف صفحه که به زیرپوشه‌ها تقسیم می‌شوند:

#### `sections/hero/`
بخش‌های Hero:
- `hero-product.tsx` - Hero صفحه محصول
- `hero-partners.tsx` - Hero صفحه همکاران
- `hero-home.tsx` - Hero صفحه اصلی
- `hero-section-main.tsx` - Hero اصلی (نسخه tailark)
- `hero-alternative.tsx` - Hero جایگزین

#### `sections/feature/`
بخش‌های ویژگی‌ها:
- `feature-text-section.tsx` - بخش متن ویژگی
- `feature-grid-with-icons.tsx` - شبکه ویژگی با آیکون
- `feature-carousel-grid.tsx` - شبکه کاروسل ویژگی
- `feature-list-section.tsx` - بخش لیست ویژگی
- `feature-carousel.tsx` - کاروسل ویژگی
- `features-card-grid.tsx` - شبکه کارت ویژگی
- `features-icon-grid.tsx` - شبکه آیکون ویژگی
- `features-primary.tsx` - ویژگی‌های اصلی

#### `sections/cta/`
بخش‌های Call-to-Action:
- `cta-product.tsx` - CTA صفحه محصول
- `cta-home.tsx` - CTA صفحه اصلی
- `cta-default.tsx` - CTA پیش‌فرض
- `cta-alternative.tsx` - CTA جایگزین

#### `sections/other/`
سایر بخش‌های صفحه:
- `timeline-section.tsx` - بخش تایم‌لاین
- `pricing-section.tsx` - بخش قیمت‌گذاری
- `pricing-comparator.tsx` - مقایسه‌کننده قیمت
- `faqs-section.tsx` - بخش سوالات متداول
- `logo-cloud.tsx` - ابر لوگو
- `solutions-showcase.tsx` - نمایش راهکارها
- `apple-cards-carousel.tsx` - کاروسل کارت‌های اپل
- `content-section.tsx` - بخش محتوا

### 4. `components/blog/`
کامپوننت‌های مرتبط با وبلاگ:
- `blog-blockquote.tsx` - نقل قول وبلاگ
- `blog-card.tsx` - کارت وبلاگ
- `blog-collapse-section.tsx` - بخش تاشو وبلاگ
- `blog-post-card.tsx` - کارت پست وبلاگ
- `blog-post-meta.tsx` - متادیتای پست وبلاگ
- `blog-pullquote.tsx` - نقل قول کشیده وبلاگ
- `blog-tip.tsx` - نکته وبلاگ
- `blog-toc.tsx` - فهرست مطالب وبلاگ
- `featured-posts-grid.tsx` - شبکه پست‌های ویژه

### 5. `components/utilities/`
کامپوننت‌های کمکی:
- `scroll-to-top.tsx` - اسکرول به بالا

### 6. `components/ui/`
کامپوننت‌های UI پایه (از shadcn/ui) - این پوشه دست نخورده باقی می‌ماند.

### 7. `components/home-page/`
کامپوننت‌های اختصاصی صفحه اصلی - این پوشه دست نخورده باقی می‌ماند.

### 8. `components/motion-primitives/`
پریمییتیوهای انیمیشن - این پوشه دست نخورده باقی می‌ماند.

## قوانین نام‌گذاری

### نام فایل‌ها
- از نام‌های توصیفی و معنادار استفاده کنید
- از camelCase برای نام فایل‌ها استفاده کنید
- نام فایل باید نوع کامپوننت را مشخص کند (مثلاً `hero-product.tsx` نه `hero47.tsx`)
- برای کامپوننت‌های مشابه، از پسوندهای واضح استفاده کنید (مثلاً `-home`, `-product`, `-alternative`)

### نام Export ها
- نام export باید با نام فایل همخوانی داشته باشد و معنادار باشد
- از PascalCase برای نام کامپوننت‌ها استفاده کنید
- از نام‌های عددی یا غیرمعنادار (مثل Hero47، Feature55) خودداری کنید
- نام export باید نوع و کاربرد کامپوننت را مشخص کند (مثلاً `HeroProduct` نه `Hero47`)

## قوانین Import

هنگام import کردن کامپوننت‌ها، از مسیرهای کامل و نام‌های معنادار استفاده کنید:

```typescript
// ✅ درست
import { HeroProduct } from '@/components/sections/hero/hero-product'
import { FeatureTextSection } from '@/components/sections/feature/feature-text-section'
import { FeatureCarousel } from '@/components/sections/feature/feature-carousel'
import Footer5 from '@/components/navigation/footer'
import CtaHome from '@/components/sections/cta/cta-home'

// ❌ اشتباه
import { Hero47 } from '@/components/hero47'
import { Feature55 } from '@/components/feature55'
import { Feature240 } from '@/components/feature240'
```

## افزودن کامپوننت جدید

هنگام افزودن کامپوننت جدید:

1. **تعیین نوع کامپوننت**: کامپوننت شما در کدام دسته قرار می‌گیرد؟
   - Layout → `components/layout/`
   - Navigation → `components/navigation/`
   - Hero Section → `components/sections/hero/`
   - Feature Section → `components/sections/feature/`
   - CTA Section → `components/sections/cta/`
   - Other Section → `components/sections/other/`
   - Blog Component → `components/blog/`
   - Utility → `components/utilities/`

2. **نام‌گذاری مناسب**: نام فایل باید توصیفی باشد و نوع کامپوننت را مشخص کند.

3. **به‌روزرسانی این فایل**: اگر دسته جدیدی ایجاد کردید، این فایل را به‌روزرسانی کنید.

## نکات مهم

- **پوشه‌های موجود**: پوشه‌های `ui/`, `home-page/`, و `motion-primitives/` دست نخورده باقی می‌مانند.
- **سازماندهی مداوم**: همیشه کامپوننت‌های جدید را در پوشه مناسب قرار دهید.
- **یکپارچگی**: از قرار دادن فایل‌ها در root پوشه `components/` خودداری کنید (به جز پوشه‌های خاص).