move to gitea

src_backup/app/page.tsx

@@ -0,0 +1,214 @@
+// src/app/page.tsx
+
+import { Suspense } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { WooCommerceService } from '@/lib/woocommerce';
+import ProductCard from '@/components/product/ProductCard';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ArrowRight, Star, Truck, Shield, Heart } from 'lucide-react';
+
+
+// Composants pour les sections de la page d'accueil
+import HeroSection from '@/components/sections/HeroSection';
+import FeaturedProductsSection from '@/components/sections/FeaturedProductsSection';
+import PromoSection from '@/components/sections/PromoSection';
+import NewsletterSection from '@/components/sections/NewsletterSection';
+
+export default async function HomePage(): Promise<JSX.Element> {
+  // Récupérer les données des produits
+  const [featuredProducts, saleProducts, newArrivals] = await Promise.all([
+    WooCommerceService.getFeaturedProducts(6),
+    WooCommerceService.getSaleProducts(4),
+    WooCommerceService.getNewArrivals(8),
+  ]);
+
+  return (
+    <main className="min-h-screen bg-white">
+      {/* Hero Section */}
+      <HeroSection />
+
+      {/* Promo Banner */}
+      <PromoSection />
+
+      {/* Featured Products */}
+      <section className="py-20 bg-gray-50">
+        <div className="max-w-[1400px] mx-auto px-6">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-light mb-4 tracking-wide">
+              Produits Vedettes
+            </h2>
+            <p className="text-gray-600 max-w-2xl mx-auto">
+              Découvrez notre sélection de melhfa d&apos;exception, alliant tradition mauritanienne et élégance contemporaine
+            </p>
+          </div>
+
+          {/* Grid de produits vedettes avec design asymétrique */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-12">
+            {/* Produit principal - grande taille */}
+            <div className="lg:row-span-2">
+              <div className="relative h-[600px] lg:h-[824px] overflow-hidden rounded-lg group cursor-pointer">
+                <Image
+                  src="/images/melhfa-featured-1.jpg"
+                  alt="Collection Sahara"
+                  fill
+                  className="object-cover transition-transform duration-700 group-hover:scale-105"
+                />
+                <div className="absolute top-6 right-6">
+                  <Badge className="bg-red-500 text-white">-25%</Badge>
+                </div>
+                <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
+                <div className="absolute bottom-0 left-0 right-0 p-8 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
+                  <h3 className="text-2xl font-light mb-3 tracking-wide">Collection Sahara</h3>
+                  <p className="text-sm opacity-90 mb-4">
+                    Melhfa artisanale aux motifs berbères traditionnels, tissée à la main dans nos ateliers de Nouakchott.
+                  </p>
+                  <div className="flex items-center justify-between">
+                    <div className="text-xl font-medium">
+                      42.000 MRU{" "}
+                      <span className="text-sm line-through opacity-70">56.000 MRU</span>
+                    </div>
+                    <Button className="bg-white text-black hover:bg-gray-100">
+                      Découvrir
+                    </Button>
+
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Produits secondaires */}
+            <div className="space-y-6">
+              <div className="relative h-[400px] overflow-hidden rounded-lg group cursor-pointer">
+                <Image
+                  src="/images/melhfa-featured-2.jpg"
+                  alt="Melhfa Élégance"
+                  fill
+                  className="object-cover transition-transform duration-700 group-hover:scale-105"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
+                <div className="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
+                  <h3 className="text-xl font-light mb-2 tracking-wide">Melhfa Élégance</h3>
+                  <p className="text-sm opacity-90 mb-3">Design moderne pour femme active</p>
+                  <div className="text-lg font-medium">32.000 MRU</div>
+                </div>
+              </div>
+
+              <div className="relative h-[400px] overflow-hidden rounded-lg group cursor-pointer">
+                <Image
+                  src="/images/melhfa-featured-3.jpg"
+                  alt="Melhfa Océan"
+                  fill
+                  className="object-cover transition-transform duration-700 group-hover:scale-105"
+                />
+                <div className="absolute top-6 right-6">
+                  <Badge className="bg-red-500 text-white">-15%</Badge>
+                </div>
+                <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
+                <div className="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
+                  <h3 className="text-xl font-light mb-2 tracking-wide">Melhfa Océan</h3>
+                  <p className="text-sm opacity-90 mb-3">Nuances bleues inspirées de l&apos;Atlantique</p>
+                  <div className="text-lg font-medium">
+                    29.000 MRU{" "}
+                    <span className="text-sm line-through opacity-70">34.000 MRU</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* New Arrivals Products */}
+      <section className="py-20">
+        <div className="max-w-[1400px] mx-auto px-6">
+          <div className="flex items-center justify-between mb-16">
+            <div>
+              <h2 className="text-4xl font-light mb-4 tracking-wide">Nouvelle Collection</h2>
+              <p className="text-gray-600">Les dernières créations de nos artisans</p>
+            </div>
+            <Button variant="outline" className="hidden md:flex" asChild>
+              <Link href="/boutique">
+                Voir tout
+                <ArrowRight className="w-4 h-4 ml-2" />
+              </Link>
+            </Button>
+          </div>
+
+          <Suspense fallback={<ProductGridSkeleton />}>
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+              {newArrivals.success && newArrivals.data.map((product) => (
+                <ProductCard
+                  key={product.id}
+                  product={product}
+                  className="animate-fade-in-up"
+                />
+              ))}
+            </div>
+          </Suspense>
+
+          <div className="text-center mt-12 md:hidden">
+            <Button variant="outline" asChild>
+              <Link href="/boutique">
+                Voir tout
+                <ArrowRight className="w-4 h-4 ml-2" />
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-20 bg-gray-50">
+        <div className="max-w-[1400px] mx-auto px-6">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="text-center group">
+              <div className="w-16 h-16 mx-auto mb-4 bg-black rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                <Truck className="w-8 h-8 text-white" />
+              </div>
+              <h3 className="text-lg font-medium mb-2">Livraison gratuite</h3>
+              <p className="text-sm text-gray-600">À partir de 50.000 MRU dans tout Nouakchott</p>
+            </div>
+
+            <div className="text-center group">
+              <div className="w-16 h-16 mx-auto mb-4 bg-black rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                <Shield className="w-8 h-8 text-white" />
+              </div>
+              <h3 className="text-lg font-medium mb-2">Garantie qualité</h3>
+              <p className="text-sm text-gray-600">Retour gratuit sous 30 jours</p>
+            </div>
+
+            <div className="text-center group">
+              <div className="w-16 h-16 mx-auto mb-4 bg-black rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                <Heart className="w-8 h-8 text-white" />
+              </div>
+              <h3 className="text-lg font-medium mb-2">Fait main</h3>
+              <p className="text-sm text-gray-600">Chaque melhfa est unique et artisanale</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Newsletter Section */}
+      <NewsletterSection />
+    </main>
+  );
+}
+
+// Composant de skeleton pour le chargement
+function ProductGridSkeleton(): JSX.Element {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+      {[...Array(8)].map((_, i) => (
+        <div key={i} className="animate-pulse">
+          <div className="aspect-[3/4] bg-gray-200 rounded-lg mb-4" />
+          <div className="space-y-2">
+            <div className="h-4 bg-gray-200 rounded w-3/4" />
+            <div className="h-4 bg-gray-200 rounded w-1/2" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}