Update to v1.1 website code from kottgard-production-v1.1.zip

2026-06-24 09:16:59 +00:00
parent f1f53fe4df
commit 74b7b44e43
75 changed files with 406 additions and 148 deletions
@@ -0,0 +1,57 @@
+'use client';
+
+import AppImage from '@/components/ui/AppImage';
+import { useTranslation } from '@/hooks/useTranslation';
+import { PAGE_IMAGES } from '@/infrastructure/images';
+
+export default function AboutIntro() {
+  const { t } = useTranslation();
+
+  const stats = [
+    { value: t('aboutPreview.statHalal'), label: t('aboutPreview.statHalalLabel') },
+    { value: t('aboutPreview.statDays'), label: t('aboutPreview.statDaysLabel') },
+    { value: t('aboutPreview.statDelivery'), label: t('aboutPreview.statDeliveryLabel') },
+    { value: t('aboutPreview.statFresh'), label: t('aboutPreview.statFreshLabel') },
+  ];
+
+  return (
+    <section className="border-b border-cream-300/60 bg-white py-16 sm:py-20">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
+          <div>
+            <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
+              {t('aboutPreview.label')}
+            </span>
+            <h2 className="section-heading mb-6">{t('aboutPreview.title')}</h2>
+            <p className="mb-4 leading-relaxed text-gray-600">{t('aboutPreview.p1')}</p>
+            <p className="mb-4 leading-relaxed text-gray-600">{t('aboutPreview.p2')}</p>
+            <p className="mb-8 leading-relaxed text-gray-600">{t('aboutPreview.p3')}</p>
+
+            <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+              {stats.map((stat) => (
+                <div
+                  key={stat.label}
+                  className="rounded-xl border border-cream-300/80 bg-cream-50 p-4 text-center"
+                >
+                  <p className="font-display text-2xl font-bold text-brand-800">{stat.value}</p>
+                  <p className="mt-1 text-xs font-medium text-gray-500">{stat.label}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="relative aspect-[4/5] overflow-hidden rounded-2xl shadow-premium-lg">
+            <AppImage
+              src={PAGE_IMAGES.aboutMeat}
+              alt={t('aboutPreview.imageAlt')}
+              fill
+              className="object-cover"
+              sizes="(max-width: 1024px) 100vw, 640px"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-brand-950/30 via-transparent to-transparent" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}