# 🎨 صفحه اصلی کامل فروشگاه

## صفحه اصلی کامل با تمام بخش‌ها

```jsx
// src/pages/HomePage.jsx
import React from 'react';
import HomeFeatures from '../components/HomePage/HomeFeatures';
import ProductShowcases from '../components/HomePage/ProductShowcases';
import Banners from '../components/HomePage/Banners';
import Categories from '../components/HomePage/Categories';

const HomePage = () => {
  return (
    <div className="min-h-screen bg-white">
      {/* Hero Banners */}
      <Banners />

      {/* Home Features */}
      <HomeFeatures />

      {/* Product Showcases */}
      <ProductShowcases />

      {/* Categories (اختیاری) */}
      <Categories />
    </div>
  );
};

export default HomePage;
```

---

## کامپوننت Banners (Hero Section)

```jsx
// src/components/HomePage/Banners.jsx
import React, { useEffect, useState } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

const Banners = () => {
  const [banners, setBanners] = useState([]);
  const [currentSlide, setCurrentSlide] = useState(0);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchBanners();
  }, []);

  useEffect(() => {
    if (banners.length > 1) {
      const timer = setInterval(() => {
        setCurrentSlide((prev) => (prev + 1) % banners.length);
      }, 5000); // تغییر هر 5 ثانیه

      return () => clearInterval(timer);
    }
  }, [banners.length]);

  const fetchBanners = async () => {
    try {
      const response = await fetch('http://localhost:8000/api/banners');
      const data = await response.json();
      setBanners(data.data);
    } catch (error) {
      console.error('Error fetching banners:', error);
    } finally {
      setLoading(false);
    }
  };

  const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % banners.length);
  };

  const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + banners.length) % banners.length);
  };

  if (loading) {
    return (
      <div className="w-full h-96 bg-gray-200 animate-pulse"></div>
    );
  }

  if (banners.length === 0) return null;

  return (
    <section className="relative w-full h-96 md:h-[500px] overflow-hidden bg-gray-900">
      {/* Banners */}
      <div className="relative w-full h-full">
        {banners.map((banner, index) => (
          <div
            key={banner.id}
            className={`absolute inset-0 transition-all duration-700 ${
              index === currentSlide ? 'opacity-100 scale-100' : 'opacity-0 scale-105'
            }`}
          >
            <img
              src={banner.image_url}
              alt={banner.title}
              className="w-full h-full object-cover"
            />
            
            {/* Overlay Gradient */}
            <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/30 to-transparent"></div>

            {/* Content */}
            <div className="absolute inset-0 flex items-center">
              <div className="container mx-auto px-4">
                <div className="max-w-2xl text-white">
                  {banner.title && (
                    <h1 className="text-4xl md:text-6xl font-bold mb-4 drop-shadow-2xl animate-fadeInUp">
                      {banner.title}
                    </h1>
                  )}
                  {banner.subtitle && (
                    <p className="text-xl md:text-2xl mb-8 drop-shadow-lg animate-fadeInUp animation-delay-200">
                      {banner.subtitle}
                    </p>
                  )}
                  {banner.link && (
                    <a
                      href={banner.link}
                      className="inline-block bg-gradient-to-r from-blue-600 to-blue-700 text-white px-8 py-4 rounded-xl font-bold text-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-300 transform hover:scale-105 shadow-2xl animate-fadeInUp animation-delay-400"
                    >
                      مشاهده محصولات
                    </a>
                  )}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Navigation Buttons */}
      {banners.length > 1 && (
        <>
          <button
            onClick={prevSlide}
            className="absolute left-4 top-1/2 -translate-y-1/2 z-10 bg-white/30 backdrop-blur-sm hover:bg-white/50 rounded-full p-3 transition-all duration-300 hover:scale-110"
            aria-label="بنر قبلی"
          >
            <ChevronLeft size={24} className="text-white" />
          </button>
          <button
            onClick={nextSlide}
            className="absolute right-4 top-1/2 -translate-y-1/2 z-10 bg-white/30 backdrop-blur-sm hover:bg-white/50 rounded-full p-3 transition-all duration-300 hover:scale-110"
            aria-label="بنر بعدی"
          >
            <ChevronRight size={24} className="text-white" />
          </button>
        </>
      )}

      {/* Dots Indicator */}
      {banners.length > 1 && (
        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-10 flex gap-2">
          {banners.map((_, index) => (
            <button
              key={index}
              onClick={() => setCurrentSlide(index)}
              className={`h-2 rounded-full transition-all duration-300 ${
                index === currentSlide 
                  ? 'w-8 bg-white' 
                  : 'w-2 bg-white/50 hover:bg-white/75'
              }`}
              aria-label={`برو به بنر ${index + 1}`}
            />
          ))}
        </div>
      )}
    </section>
  );
};

export default Banners;
```

---

## انیمیشن‌های CSS اضافی

```css
/* src/index.css */

/* Fade In Up Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animation-delay-200 {
  animation-delay: 0.2s;
  opacity: 0;
}

.animation-delay-400 {
  animation-delay: 0.4s;
  opacity: 0;
}

/* Shimmer Effect for Loading */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    #f0f0f0 0px,
    #f8f8f8 40px,
    #f0f0f0 80px
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}
```

---

## تنظیمات Tailwind برای انیمیشن‌ها

```javascript
// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      animation: {
        'fadeInUp': 'fadeInUp 0.6s ease-out forwards',
        'shimmer': 'shimmer 2s infinite',
        'pulse': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
      },
      keyframes: {
        fadeInUp: {
          '0%': {
            opacity: '0',
            transform: 'translateY(30px)',
          },
          '100%': {
            opacity: '1',
            transform: 'translateY(0)',
          },
        },
        shimmer: {
          '0%': { backgroundPosition: '-1000px 0' },
          '100%': { backgroundPosition: '1000px 0' },
        },
      },
    },
  },
  plugins: [],
}
```

---

## مثال استفاده نهایی

```jsx
// src/App.jsx
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import ProductPage from './pages/ProductPage';
import ShowcasePage from './pages/ShowcasePage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/products/:id" element={<ProductPage />} />
        <Route path="/showcases/:id" element={<ShowcasePage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;
```

---

## ✨ ویژگی‌های طراحی صفحه اصلی

### Home Features:
- ✅ **اسکرول افقی** برای بیش از 4 آیتم
- ✅ **دکمه‌های Navigation** با انیمیشن
- ✅ **Gradient Fade** در کنار‌های اسکرول
- ✅ **Hover Effects** با Scale و Rotate
- ✅ **Border Glow** هنگام Hover
- ✅ **Decorative Blurred Circles**

### Product Showcases:
- ✅ **دکمه "مشاهده همه"** برای بیش از 4 محصول
- ✅ **اسکرول افقی نرم** با دکمه‌های Navigation
- ✅ **کارت محصول زیبا** با:
  - Image Hover Zoom
  - Discount Badge متحرک
  - Quick View Overlay
  - دکمه "افزودن به سبد"
  - قیمت با تخفیف
- ✅ **Grid View** برای 4 محصول یا کمتر
- ✅ **Carousel View** برای محصولات بیشتر

### Hero Banners:
- ✅ **Auto-play Slider** (تغییر هر 5 ثانیه)
- ✅ **Navigation Buttons** با Blur Effect
- ✅ **Dots Indicator**
- ✅ **Fade & Scale Animation**
- ✅ **Overlay Gradient** روی تصاویر
- ✅ **Call-to-Action** دکمه زیبا

---

## 📱 Responsive Design

همه کامپوننت‌ها کاملاً Responsive هستند:

- **موبایل** (< 640px): 1-2 ستون
- **تبلت** (640px - 1024px): 2-3 ستون
- **دسکتاپ** (> 1024px): 4 ستون یا اسکرول افقی

---

## 🚀 نصب و استفاده

```bash
# نصب پکیج‌ها
npm install lucide-react

# اجرا
npm run dev
```

**همه چیز آماده! صفحه اصلی زیبا و حرفه‌ای شما آماده است! 🎉**