123 lines
6.1 KiB
TypeScript
123 lines
6.1 KiB
TypeScript
// 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>
|
|
);
|
|
} |