# 🎨 کامپوننت‌های صفحه اصلی فروشگاه - زیبا و جذاب

## 1. Home Features - ویژگی‌های صفحه اصلی

```jsx
// src/components/HomePage/HomeFeatures.jsx
import React, { useEffect, useState, useRef } from 'react';
import * as Icons from 'lucide-react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

const HomeFeatures = () => {
  const [features, setFeatures] = useState([]);
  const [loading, setLoading] = useState(true);
  const scrollRef = useRef(null);
  const [canScrollLeft, setCanScrollLeft] = useState(false);
  const [canScrollRight, setCanScrollRight] = useState(false);

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

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

  useEffect(() => {
    checkScroll();
    window.addEventListener('resize', checkScroll);
    return () => window.removeEventListener('resize', checkScroll);
  }, [features]);

  const checkScroll = () => {
    if (scrollRef.current) {
      const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
      setCanScrollLeft(scrollLeft > 0);
      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10);
    }
  };

  const scroll = (direction) => {
    if (scrollRef.current) {
      const scrollAmount = 300;
      scrollRef.current.scrollBy({
        left: direction === 'left' ? -scrollAmount : scrollAmount,
        behavior: 'smooth'
      });
      setTimeout(checkScroll, 300);
    }
  };

  if (loading) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {[1, 2, 3, 4].map((i) => (
            <div key={i} className="animate-pulse">
              <div className="bg-gray-200 rounded-2xl h-32"></div>
            </div>
          ))}
        </div>
      </div>
    );
  }

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

  const showScrollButtons = features.length > 4;

  return (
    <section className="py-12 bg-gradient-to-b from-gray-50 to-white">
      <div className="container mx-auto px-4">
        {/* Desktop Grid View (4 items or less) */}
        {!showScrollButtons && (
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {features.map((feature) => {
              const IconComponent = Icons[feature.icon] || Icons.Box;
              
              return (
                <div
                  key={feature.id}
                  className="group relative overflow-hidden rounded-2xl p-6 text-center transition-all duration-500 hover:scale-105 hover:shadow-2xl cursor-pointer"
                  style={{
                    backgroundColor: feature.bg_color,
                    color: feature.text_color
                  }}
                >
                  {/* Decorative Elements */}
                  <div className="absolute top-0 right-0 w-20 h-20 rounded-full opacity-10 blur-2xl group-hover:opacity-20 transition-opacity"
                    style={{ backgroundColor: feature.icon_color }}
                  ></div>
                  <div className="absolute bottom-0 left-0 w-16 h-16 rounded-full opacity-10 blur-2xl group-hover:opacity-20 transition-opacity"
                    style={{ backgroundColor: feature.icon_color }}
                  ></div>

                  {/* Content */}
                  <div className="relative z-10">
                    <div className="mb-4 transform transition-transform duration-500 group-hover:scale-110 group-hover:rotate-12">
                      <IconComponent
                        size={48}
                        style={{ color: feature.icon_color }}
                        className="mx-auto drop-shadow-lg"
                        strokeWidth={2}
                      />
                    </div>
                    <h3 className="text-lg font-bold mb-2 drop-shadow-sm">
                      {feature.title}
                    </h3>
                    <p className="text-sm opacity-90 leading-relaxed">
                      {feature.description}
                    </p>
                  </div>

                  {/* Hover Border Effect */}
                  <div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                    style={{
                      boxShadow: `inset 0 0 0 2px ${feature.icon_color}`
                    }}
                  ></div>
                </div>
              );
            })}
          </div>
        )}

        {/* Scrollable View (more than 4 items) */}
        {showScrollButtons && (
          <div className="relative">
            {/* Scroll Left Button */}
            {canScrollLeft && (
              <button
                onClick={() => scroll('left')}
                className="absolute left-0 top-1/2 -translate-y-1/2 z-20 bg-white shadow-xl rounded-full p-3 hover:bg-gray-100 transition-all duration-300 hover:scale-110"
                aria-label="اسکرول به چپ"
              >
                <ChevronLeft size={24} className="text-gray-800" />
              </button>
            )}

            {/* Scroll Right Button */}
            {canScrollRight && (
              <button
                onClick={() => scroll('right')}
                className="absolute right-0 top-1/2 -translate-y-1/2 z-20 bg-white shadow-xl rounded-full p-3 hover:bg-gray-100 transition-all duration-300 hover:scale-110"
                aria-label="اسکرول به راست"
              >
                <ChevronRight size={24} className="text-gray-800" />
              </button>
            )}

            {/* Scrollable Container */}
            <div
              ref={scrollRef}
              onScroll={checkScroll}
              className="flex gap-6 overflow-x-auto scrollbar-hide scroll-smooth px-12"
              style={{
                scrollbarWidth: 'none',
                msOverflowStyle: 'none',
              }}
            >
              {features.map((feature) => {
                const IconComponent = Icons[feature.icon] || Icons.Box;
                
                return (
                  <div
                    key={feature.id}
                    className="group relative flex-shrink-0 w-64 overflow-hidden rounded-2xl p-6 text-center transition-all duration-500 hover:scale-105 hover:shadow-2xl cursor-pointer"
                    style={{
                      backgroundColor: feature.bg_color,
                      color: feature.text_color
                    }}
                  >
                    {/* Decorative Elements */}
                    <div className="absolute top-0 right-0 w-20 h-20 rounded-full opacity-10 blur-2xl group-hover:opacity-20 transition-opacity"
                      style={{ backgroundColor: feature.icon_color }}
                    ></div>
                    <div className="absolute bottom-0 left-0 w-16 h-16 rounded-full opacity-10 blur-2xl group-hover:opacity-20 transition-opacity"
                      style={{ backgroundColor: feature.icon_color }}
                    ></div>

                    {/* Content */}
                    <div className="relative z-10">
                      <div className="mb-4 transform transition-transform duration-500 group-hover:scale-110 group-hover:rotate-12">
                        <IconComponent
                          size={48}
                          style={{ color: feature.icon_color }}
                          className="mx-auto drop-shadow-lg"
                          strokeWidth={2}
                        />
                      </div>
                      <h3 className="text-lg font-bold mb-2 drop-shadow-sm">
                        {feature.title}
                      </h3>
                      <p className="text-sm opacity-90 leading-relaxed">
                        {feature.description}
                      </p>
                    </div>

                    {/* Hover Border Effect */}
                    <div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                      style={{
                        boxShadow: `inset 0 0 0 2px ${feature.icon_color}`
                      }}
                    ></div>
                  </div>
                );
              })}
            </div>

            {/* Gradient Fade Effects */}
            {canScrollLeft && (
              <div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-white to-transparent pointer-events-none z-10"></div>
            )}
            {canScrollRight && (
              <div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-white to-transparent pointer-events-none z-10"></div>
            )}
          </div>
        )}
      </div>
    </section>
  );
};

export default HomeFeatures;
```

---

## 2. Product Showcases - ویترین محصولات

```jsx
// src/components/HomePage/ProductShowcases.jsx
import React, { useEffect, useState, useRef } from 'react';
import { ChevronLeft, ChevronRight, ArrowLeft } from 'lucide-react';
import { Link } from 'react-router-dom';

const ProductShowcases = () => {
  const [showcases, setShowcases] = useState([]);
  const [loading, setLoading] = useState(true);

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

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

  if (loading) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="space-y-12">
          {[1, 2].map((i) => (
            <div key={i} className="animate-pulse">
              <div className="h-8 bg-gray-200 rounded w-48 mb-4"></div>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {[1, 2, 3, 4].map((j) => (
                  <div key={j} className="bg-gray-200 rounded-xl h-64"></div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

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

  return (
    <div className="space-y-16 py-12">
      {showcases.map((showcase) => (
        <ShowcaseSection key={showcase.id} showcase={showcase} />
      ))}
    </div>
  );
};

const ShowcaseSection = ({ showcase }) => {
  const scrollRef = useRef(null);
  const [canScrollLeft, setCanScrollLeft] = useState(false);
  const [canScrollRight, setCanScrollRight] = useState(false);
  const [showViewAll, setShowViewAll] = useState(false);

  useEffect(() => {
    checkScroll();
    window.addEventListener('resize', checkScroll);
    return () => window.removeEventListener('resize', checkScroll);
  }, [showcase.products]);

  const checkScroll = () => {
    if (scrollRef.current) {
      const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
      setCanScrollLeft(scrollLeft > 0);
      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10);
      
      // نمایش دکمه "مشاهده همه" اگر محصولات بیشتر از 4 باشند
      setShowViewAll(showcase.products.length > 4);
    }
  };

  const scroll = (direction) => {
    if (scrollRef.current) {
      const scrollAmount = 300;
      scrollRef.current.scrollBy({
        left: direction === 'left' ? -scrollAmount : scrollAmount,
        behavior: 'smooth'
      });
      setTimeout(checkScroll, 300);
    }
  };

  const displayType = showcase.display_type || 'grid';
  const products = showcase.products || [];

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

  return (
    <section
      className="py-12 relative overflow-hidden"
      style={{ backgroundColor: showcase.bg_color }}
    >
      <div className="container mx-auto px-4">
        {/* Header */}
        <div className="flex items-center justify-between mb-8">
          <div>
            <h2
              className="text-3xl md:text-4xl font-bold mb-2 drop-shadow-sm"
              style={{ color: showcase.title_color }}
            >
              {showcase.title}
            </h2>
            {showcase.subtitle && (
              <p className="text-gray-600 text-lg">{showcase.subtitle}</p>
            )}
          </div>
          {showViewAll && (
            <Link
              to={`/showcases/${showcase.id}`}
              className="group flex items-center gap-2 px-6 py-3 bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105"
              style={{ color: showcase.title_color }}
            >
              <span className="font-medium">مشاهده همه</span>
              <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
            </Link>
          )}
        </div>

        {/* Products Display */}
        {displayType === 'grid' && products.length <= 4 ? (
          /* Grid View for 4 or less products */
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {products.map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        ) : (
          /* Scrollable View for more products or carousel type */
          <div className="relative">
            {/* Scroll Buttons */}
            {canScrollLeft && (
              <button
                onClick={() => scroll('left')}
                className="absolute left-0 top-1/2 -translate-y-1/2 z-20 bg-white shadow-2xl rounded-full p-4 hover:bg-gray-100 transition-all duration-300 hover:scale-110"
              >
                <ChevronLeft size={24} className="text-gray-800" />
              </button>
            )}
            {canScrollRight && (
              <button
                onClick={() => scroll('right')}
                className="absolute right-0 top-1/2 -translate-y-1/2 z-20 bg-white shadow-2xl rounded-full p-4 hover:bg-gray-100 transition-all duration-300 hover:scale-110"
              >
                <ChevronRight size={24} className="text-gray-800" />
              </button>
            )}

            {/* Products Container */}
            <div
              ref={scrollRef}
              onScroll={checkScroll}
              className="flex gap-6 overflow-x-auto scrollbar-hide scroll-smooth px-12"
              style={{
                scrollbarWidth: 'none',
                msOverflowStyle: 'none',
              }}
            >
              {products.map((product) => (
                <div key={product.id} className="flex-shrink-0 w-72">
                  <ProductCard product={product} />
                </div>
              ))}
            </div>

            {/* Gradient Fade */}
            {canScrollLeft && (
              <div className="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-current to-transparent pointer-events-none z-10"
                style={{ color: showcase.bg_color || '#ffffff' }}
              ></div>
            )}
            {canScrollRight && (
              <div className="absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-current to-transparent pointer-events-none z-10"
                style={{ color: showcase.bg_color || '#ffffff' }}
              ></div>
            )}
          </div>
        )}
      </div>
    </section>
  );
};

// Product Card Component
const ProductCard = ({ product }) => {
  const [imageLoaded, setImageLoaded] = useState(false);
  const hasDiscount = product.discount_price && product.discount_price < product.price;
  const discountPercent = hasDiscount
    ? Math.round(((product.price - product.discount_price) / product.price) * 100)
    : 0;

  return (
    <Link
      to={`/products/${product.id}`}
      className="group block bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-500 hover:scale-105"
    >
      {/* Image Container */}
      <div className="relative aspect-square bg-gray-100 overflow-hidden">
        {!imageLoaded && (
          <div className="absolute inset-0 bg-gray-200 animate-pulse"></div>
        )}
        <img
          src={product.primaryImage?.url || '/placeholder.jpg'}
          alt={product.name}
          className={`w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700 ${
            imageLoaded ? 'opacity-100' : 'opacity-0'
          }`}
          onLoad={() => setImageLoaded(true)}
        />
        
        {/* Discount Badge */}
        {hasDiscount && (
          <div className="absolute top-3 left-3 bg-gradient-to-r from-red-500 to-pink-500 text-white px-3 py-1 rounded-full text-sm font-bold shadow-lg animate-pulse">
            {discountPercent}% تخفیف
          </div>
        )}

        {/* Quick View Overlay */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <span className="text-white text-sm font-medium">مشاهده سریع</span>
        </div>
      </div>

      {/* Content */}
      <div className="p-4">
        {/* Category */}
        {product.category && (
          <span className="text-xs text-gray-500 mb-1 block">
            {product.category.name}
          </span>
        )}

        {/* Title */}
        <h3 className="font-bold text-gray-800 mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors">
          {product.name}
        </h3>

        {/* Price */}
        <div className="flex items-center gap-2 flex-wrap">
          {hasDiscount ? (
            <>
              <span className="text-xl font-bold text-red-600">
                {Number(product.discount_price).toLocaleString()}
              </span>
              <span className="text-sm text-gray-400 line-through">
                {Number(product.price).toLocaleString()}
              </span>
            </>
          ) : (
            <span className="text-xl font-bold text-gray-800">
              {Number(product.price).toLocaleString()}
            </span>
          )}
          <span className="text-sm text-gray-600">تومان</span>
        </div>
      </div>

      {/* Add to Cart Button */}
      <div className="px-4 pb-4">
        <button className="w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white py-3 rounded-xl font-medium hover:from-blue-700 hover:to-blue-800 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl">
          افزودن به سبد خرید
        </button>
      </div>
    </Link>
  );
};

export default ProductShowcases;
```

ادامه دارد...
