Initial commit: Kottgard production website code

2026-06-19 15:46:23 +00:00
commit e0273c46d7
196 changed files with 29799 additions and 0 deletions
@@ -0,0 +1,95 @@
+'use client';
+
+import Link from 'next/link';
+import AppImage from '@/components/ui/AppImage';
+import Button from '@/components/ui/Button';
+import Logo from '@/components/ui/Logo';
+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="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="absolute inset-0 bg-gradient-to-r from-brand-950/95 via-brand-900/85 to-brand-900/40" />
+      <div className="absolute inset-0 bg-gradient-to-t from-brand-950/60 via-transparent to-transparent" />
+
+      <div className="relative mx-auto flex min-h-[85vh] max-w-7xl flex-col justify-center px-4 py-20 sm:px-6 lg:px-8 lg:py-28">
+        <div className="max-w-2xl animate-slide-up">
+          <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 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">
+            <Link href="/shop">
+              <Button variant="gold" size="lg">
+                {t('hero.shopNow')}
+                <ArrowRight className="h-4 w-4 rtl:rotate-180" />
+              </Button>
+            </Link>
+            <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
+              <Button
+                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>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-cream-50 to-transparent" />
+    </section>
+  );
+}