move to gitea
This commit is contained in:
Mamadou Sall
123
src_backup/components/sections/HeroSection.tsx
Normal file
123
src_backup/components/sections/HeroSection.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
// src/components/sections/HeroSection.tsx
|
||||
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
|
||||
export default function HeroSection(): JSX.Element {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsVisible(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="relative min-h-screen flex items-center bg-gray-50 mt-16">
|
||||
<div className="max-w-[1400px] mx-auto px-6 w-full">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
{/* Content */}
|
||||
<div className={`space-y-8 ${isVisible ? 'animate-fade-in-up' : 'opacity-0'}`}>
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-5xl md:text-6xl lg:text-7xl font-extralight leading-none tracking-tight text-black">
|
||||
MELHFA
|
||||
<br />
|
||||
<span className="font-light">ÉLÉGANTE</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg md:text-xl text-gray-600 font-light leading-relaxed max-w-lg">
|
||||
Découvrez l'art mauritanien à travers nos voiles d'exception,
|
||||
alliant tradition ancestrale et élégance contemporaine.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-6 items-start sm:items-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-black text-white hover:bg-gray-800 px-12 py-4 text-sm uppercase tracking-[2px] transition-all duration-300 hover:scale-105"
|
||||
asChild
|
||||
>
|
||||
<Link href="/boutique">
|
||||
Découvrir
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="link"
|
||||
className="text-black hover:opacity-60 text-sm uppercase tracking-[2px] p-0 h-auto border-b border-black pb-1"
|
||||
asChild
|
||||
>
|
||||
<Link href="/collections">
|
||||
Collections
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image Section */}
|
||||
<div className={`relative ${isVisible ? 'animate-fade-in-up' : 'opacity-0'} lg:order-2`}>
|
||||
<div className="relative">
|
||||
{/* Image principale */}
|
||||
<div className="relative h-[600px] lg:h-[700px] w-full rounded-2xl overflow-hidden shadow-2xl">
|
||||
<Image
|
||||
src="/images/melhfa-hero.jpg"
|
||||
alt="Melhfa Élégante"
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
/>
|
||||
|
||||
{/* Badge sur l'image */}
|
||||
<div className="absolute top-6 right-6">
|
||||
<Badge className="bg-black/80 text-white px-4 py-2 text-xs uppercase tracking-wide">
|
||||
Nouvelle Collection
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Carte flottante */}
|
||||
<div className="absolute -bottom-8 -left-8 bg-white/95 backdrop-blur-xl p-6 rounded-xl shadow-xl max-w-[200px] border border-white/20">
|
||||
<div className="space-y-4">
|
||||
<div className="relative h-24 w-full rounded-lg overflow-hidden">
|
||||
<Image
|
||||
src="/images/melhfa-thumbnail.jpg"
|
||||
alt="Melhfa Premium"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xs font-medium uppercase tracking-wide text-black">
|
||||
Melhfa Premium
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 font-light">
|
||||
À partir de 28.000 MRU
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Éléments décoratifs */}
|
||||
<div className="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-gray-200 to-gray-300 rounded-full opacity-60 -z-10" />
|
||||
<div className="absolute -bottom-12 -right-12 w-32 h-32 bg-gradient-to-tl from-gray-100 to-gray-200 rounded-full opacity-40 -z-10" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scroll indicator */}
|
||||
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 hidden lg:block">
|
||||
<div className="animate-bounce">
|
||||
<div className="w-1 h-12 bg-gray-400 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
156
src_backup/components/sections/NewsletterSection.tsx
Normal file
156
src_backup/components/sections/NewsletterSection.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
// src/components/sections/NewsletterSection.tsx
|
||||
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Mail, CheckCircle } from 'lucide-react';
|
||||
|
||||
export default function NewsletterSection(): JSX.Element {
|
||||
const [email, setEmail] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent): Promise<void> => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!email || !email.includes('@')) {
|
||||
setError('Veuillez entrer une adresse email valide');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
// Simuler l'appel API
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
setIsSubmitted(true);
|
||||
setEmail('');
|
||||
|
||||
// Reset après 3 secondes
|
||||
setTimeout(() => {
|
||||
setIsSubmitted(false);
|
||||
}, 3000);
|
||||
} catch (err) {
|
||||
setError('Une erreur est survenue. Veuillez réessayer.');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isSubmitted) {
|
||||
return (
|
||||
<section className="py-20 bg-gray-50">
|
||||
<div className="max-w-[1400px] mx-auto px-6 text-center">
|
||||
<div className="max-w-md mx-auto space-y-6">
|
||||
<div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto">
|
||||
<CheckCircle className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-light tracking-wide">Merci !</h2>
|
||||
<p className="text-gray-600">
|
||||
Vous êtes maintenant inscrit(e) à notre newsletter.
|
||||
Vous recevrez bientôt nos dernières actualités.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="py-20 bg-gray-50">
|
||||
<div className="max-w-[1400px] mx-auto px-6 text-center">
|
||||
<div className="max-w-2xl mx-auto space-y-8">
|
||||
{/* Icon */}
|
||||
<div className="flex justify-center">
|
||||
<div className="w-16 h-16 bg-black rounded-full flex items-center justify-center">
|
||||
<Mail className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Titre et description */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-3xl md:text-4xl font-light tracking-wide text-black">
|
||||
Restez informé
|
||||
</h2>
|
||||
<p className="text-gray-600 text-lg">
|
||||
Recevez nos dernières collections et offres exclusives directement dans votre boîte mail
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Formulaire */}
|
||||
<form onSubmit={handleSubmit} className="max-w-md mx-auto space-y-4">
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Votre adresse email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full px-4 py-3 text-sm border border-gray-300 focus:border-black focus:ring-0 rounded-none"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
{error && (
|
||||
<p className="text-red-500 text-xs mt-2 text-left">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitting || !email}
|
||||
className="bg-black text-white hover:bg-gray-800 px-8 py-3 text-sm uppercase tracking-[2px] transition-all duration-300 rounded-none whitespace-nowrap"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
<span>Envoi...</span>
|
||||
</div>
|
||||
) : (
|
||||
"S'abonner"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Informations supplémentaires */}
|
||||
<div className="space-y-3 text-sm text-gray-500">
|
||||
<p>
|
||||
En vous abonnant, vous acceptez de recevoir nos communications marketing.
|
||||
</p>
|
||||
<div className="flex justify-center space-x-6 text-xs">
|
||||
<span>• Pas de spam</span>
|
||||
<span>• Désabonnement facile</span>
|
||||
<span>• 1-2 emails par mois maximum</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Avantages de l'inscription */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-8 border-t border-gray-200">
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-black">Offres exclusives</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Accès privilégié à nos soldes privées
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-black">Nouvelles collections</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Soyez la première à découvrir nos créations
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-black">Conseils style</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Tips et inspirations mode mauritanienne
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
95
src_backup/components/sections/PromoSection.tsx
Normal file
95
src_backup/components/sections/PromoSection.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
// src/components/sections/PromoSection.tsx
|
||||
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Sparkles } from 'lucide-react';
|
||||
|
||||
export default function PromoSection(): JSX.Element {
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden">
|
||||
{/* Background avec dégradé */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-indigo-600 via-purple-700 to-indigo-800" />
|
||||
|
||||
{/* Motifs décoratifs */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute top-10 left-10 w-20 h-20 border-2 border-white rounded-full" />
|
||||
<div className="absolute top-32 right-20 w-16 h-16 border border-white rounded-full" />
|
||||
<div className="absolute bottom-20 left-1/4 w-12 h-12 border border-white rounded-full" />
|
||||
<div className="absolute bottom-32 right-1/3 w-24 h-24 border-2 border-white rounded-full" />
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-[1400px] mx-auto px-6 text-center">
|
||||
<div className="max-w-4xl mx-auto space-y-8">
|
||||
{/* Icon */}
|
||||
<div className="flex justify-center">
|
||||
<div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm">
|
||||
<Sparkles className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Titre principal */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-light text-white tracking-wide">
|
||||
SOLDES D'ÉTÉ
|
||||
</h2>
|
||||
<p className="text-xl md:text-2xl text-white/90 font-light">
|
||||
Jusqu'à -40% sur une sélection de voiles premium
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-lg text-white/80 max-w-2xl mx-auto leading-relaxed">
|
||||
Profitez de nos offres exceptionnelles sur les plus belles créations de nos artisans.
|
||||
Une occasion unique de découvrir l'élégance mauritanienne à prix réduit.
|
||||
</p>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-white text-black hover:bg-gray-100 px-8 py-4 text-sm uppercase tracking-[2px] transition-all duration-300 hover:scale-105"
|
||||
asChild
|
||||
>
|
||||
<Link href="/boutique?filter=sale">
|
||||
Voir les offres
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="lg"
|
||||
className="text-white border border-white/30 hover:bg-white/10 px-8 py-4 text-sm uppercase tracking-[2px] backdrop-blur-sm"
|
||||
asChild
|
||||
>
|
||||
<Link href="/collections">
|
||||
Toutes les collections
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Informations complémentaires */}
|
||||
<div className="pt-8 space-y-2">
|
||||
<p className="text-sm text-white/70 uppercase tracking-wide">
|
||||
Offre valable jusqu'au 31 août 2024
|
||||
</p>
|
||||
<div className="flex justify-center space-x-8 text-xs text-white/60">
|
||||
<span>• Livraison gratuite</span>
|
||||
<span>• Retour sous 30 jours</span>
|
||||
<span>• Paiement sécurisé</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Particules flottantes */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-1/4 left-1/4 w-2 h-2 bg-white rounded-full opacity-60 animate-ping" style={{ animationDelay: '0s' }} />
|
||||
<div className="absolute top-1/3 right-1/4 w-1 h-1 bg-white rounded-full opacity-40 animate-ping" style={{ animationDelay: '1s' }} />
|
||||
<div className="absolute bottom-1/4 left-1/3 w-1.5 h-1.5 bg-white rounded-full opacity-50 animate-ping" style={{ animationDelay: '2s' }} />
|
||||
<div className="absolute bottom-1/3 right-1/3 w-1 h-1 bg-white rounded-full opacity-30 animate-ping" style={{ animationDelay: '3s' }} />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user