root
101 lines
4.3 KiB
TypeScript
101 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
import AppImage from '@/components/ui/AppImage';
|
|
import Button from '@/components/ui/Button';
|
|
import Logo from '@/components/ui/Logo';
|
|
import TrustBadges from '@/components/home/TrustBadges';
|
|
import { ArrowRight, ShieldCheck, MapPin, Clock } from 'lucide-react';
|
|
import { useTranslation } from '@/hooks/useTranslation';
|
|
import { PAGE_IMAGES } from '@/infrastructure/images';
|
|
import { SITE_LOCATION, SITE_HOURS, SITE_ADDRESS, WHATSAPP_URL } from '@/lib/constants';
|
|
|
|
export default function Hero() {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<section className="relative min-h-[85vh] overflow-hidden bg-brand-950">
|
|
<div className="pointer-events-none absolute inset-0">
|
|
<AppImage
|
|
src={PAGE_IMAGES.hero}
|
|
alt=""
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
sizes="100vw"
|
|
placeholder="blur"
|
|
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUH/8QAIhAAAgEDBQAAAAAAAAAAAAAAAQIDAAQRBQYhIjFB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAZEQACAwEAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEEA/ALextba0t0t7eJI4kHVEU4AqT/9k="
|
|
/>
|
|
</div>
|
|
<div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-brand-950/95 via-brand-900/85 to-brand-900/40" />
|
|
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-brand-950/60 via-transparent to-transparent" />
|
|
|
|
<div className="relative z-10 mx-auto grid min-h-[85vh] max-w-7xl items-center gap-10 px-4 py-20 sm:px-6 lg:grid-cols-2 lg:gap-12 lg:px-8 lg:py-28">
|
|
<div className="max-w-2xl">
|
|
<div className="mb-8 flex items-center gap-4">
|
|
<Logo size="lg" className="ring-gold-400/40 shadow-premium-lg" />
|
|
<div>
|
|
<p className="text-sm font-medium text-gold-400">{SITE_LOCATION}</p>
|
|
<p className="text-xs text-brand-200">{t('hero.taglineShort')}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-gold-500/30 bg-brand-800/50 px-4 py-1.5 backdrop-blur-sm">
|
|
<ShieldCheck className="h-4 w-4 text-gold-400" />
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-gold-300">
|
|
{t('hero.badge')}
|
|
</span>
|
|
</div>
|
|
|
|
<h1 className="mb-4 font-display text-4xl font-bold leading-tight text-white sm:text-5xl lg:text-6xl">
|
|
{t('hero.title')}
|
|
</h1>
|
|
|
|
<p className="mb-2 text-xl font-medium text-gold-300 sm:text-2xl">
|
|
{t('hero.subtitleShort')}
|
|
</p>
|
|
|
|
<p className="mb-8 text-base leading-relaxed text-brand-100 sm:text-lg">
|
|
{t('hero.subtitle')}
|
|
</p>
|
|
|
|
<div className="mb-8 lg:hidden">
|
|
<TrustBadges />
|
|
</div>
|
|
|
|
<div className="mb-8 flex flex-wrap gap-4 text-sm text-brand-200">
|
|
<span className="flex items-center gap-1.5">
|
|
<Clock className="h-4 w-4 text-gold-400" />
|
|
{t('hero.hours', { hours: SITE_HOURS })}
|
|
</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<MapPin className="h-4 w-4 text-gold-400" />
|
|
{SITE_ADDRESS}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-4 sm:flex-row">
|
|
<Button href="/shop" variant="gold" size="lg">
|
|
{t('hero.shopNow')}
|
|
<ArrowRight className="h-4 w-4 rtl:rotate-180" />
|
|
</Button>
|
|
<Button
|
|
href={WHATSAPP_URL}
|
|
external
|
|
variant="secondary"
|
|
size="lg"
|
|
className="border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15"
|
|
>
|
|
{t('hero.whatsapp')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="hidden lg:flex lg:items-center lg:justify-center">
|
|
<TrustBadges />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pointer-events-none absolute bottom-0 left-0 right-0 z-[1] h-20 bg-gradient-to-t from-cream-50 to-transparent" />
|
|
</section>
|
|
);
|
|
} |