feat: Wabenhain Honig-Shop Anwendung

Vollstaendige Next.js/Prisma-E-Commerce-Anwendung fuer eine Imkerei: Shop, Warenkorb, Stripe-Checkout, Kundenkonto mit 2FA, Admin-Bereich (Produkte, Ernten, Chargen, Bestellungen, Gutscheine, admin-editierbare Website-Inhalte), i18n (DE/EN), Rate-Limiting/CSP/Audit-Log-Haertung, PostgreSQL- und MySQL-Unterstuetzung ueber austauschbare Prisma- Treiber-Adapter, Unit-/Komponenten-/E2E-Tests.
2026-08-17 14:30:28 +02:00
1 parent 5c76fcc266
commit c7927f2883
@@ -0,0 +1,89 @@
+"use client";
+
+import { motion, useReducedMotion, type Variants } from "motion/react";
+import { Container, LinkButton } from "@/components/ui";
+import { PlaceholderImage } from "@/components/placeholder-image";
+import { useI18n } from "@/i18n/i18n-provider";
+
+const sectionVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { duration: 0.6 } },
+};
+
+const itemContainerVariants: Variants = {
+  hidden: {},
+  visible: { transition: { delayChildren: 0.3, staggerChildren: 0.12 } },
+};
+
+const itemVariants: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.7, ease: "easeOut" } },
+};
+
+/**
+ * Startseiten-Hero mit grossflaechigem Bild und gestaffelter
+ * Einblend-Animation (Eyebrow, Headline, Text, Buttons) beim Laden.
+ */
+export function Hero({
+  intro,
+  footnote,
+  location,
+}: {
+  intro: string;
+  footnote: string;
+  location: string;
+}) {
+  const { t } = useI18n();
+  const shouldReduceMotion = useReducedMotion();
+
+  return (
+    <motion.section
+      className="relative"
+      initial={shouldReduceMotion ? false : "hidden"}
+      animate="visible"
+      variants={sectionVariants}
+    >
+      <PlaceholderImage
+        tone="forest"
+        className="h-[78vh] min-h-[520px] w-full"
+        label="Bienenstand im Morgenlicht · Altenmünster"
+      />
+      <div className="absolute inset-0 flex items-center bg-gradient-to-t from-forest/70 via-forest/10 to-transparent">
+        <Container>
+          <motion.div
+            className="max-w-xl text-cream"
+            initial={shouldReduceMotion ? false : "hidden"}
+            animate="visible"
+            variants={itemContainerVariants}
+          >
+            <motion.p
+              variants={itemVariants}
+              className="tracking-wide-caps text-xs text-honey-light mb-4"
+            >
+              {location}
+            </motion.p>
+            <motion.h1 variants={itemVariants} className="text-4xl md:text-6xl leading-tight">
+              {t.footer.tagline}
+            </motion.h1>
+            <motion.p variants={itemVariants} className="mt-6 text-cream/85 max-w-md leading-relaxed">
+              {intro}
+            </motion.p>
+            <motion.div variants={itemVariants} className="mt-10 flex flex-wrap gap-4">
+              <LinkButton href="/shop">{t.home.hero.ctaPrimary}</LinkButton>
+              <LinkButton
+                href="/imkerei"
+                variant="secondary"
+                className="!border-cream !text-cream hover:!bg-cream hover:!text-forest"
+              >
+                {t.home.hero.ctaSecondary}
+              </LinkButton>
+            </motion.div>
+            <motion.p variants={itemVariants} className="mt-8 text-xs text-cream/60 tracking-wide">
+              {footnote}
+            </motion.p>
+          </motion.div>
+        </Container>
+      </div>
+    </motion.section>
+  );
+}