Nick SzaunigandClaude Sonnet 5
6814e9e2c8
Docker Image bauen und veroeffentlichen / build-and-push (push) Successful in 2m31s
Neues admin-editierbares Hintergrundvideo fuer den Startseiten-Hero (home.hero.video, MP4/WebM) mit eigenem, magic-byte-validiertem Upload-Endpunkt (app/api/admin/upload-video) analog zur bestehenden Bild-Upload-Pipeline. Ausserdem: ScrollReveal-Animation von der Startseite auf Imkerei, Herkunft, Unternehmen, Ernten, Wissen, Kontakt, Shop sowie die Produkt-/Ernte-/Chargen-Detailseiten ausgerollt (bisher nur Startseite), priority auf bislang lazy geladene Above-the-fold-Bilder (Herkunft/Unternehmen) gesetzt, und passende sizes-Hints auf Grid-Bilder (Produktkarten, Origin/Regional/Business-Teaser, Ernten-Liste) ergaenzt statt voller Viewport-Breite. Co-Authored-By: Claude Sonnet 5 <[email protected]>
114 lines
3.6 KiB
TypeScript
114 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useReducedMotion, type Variants } from "motion/react";
|
|
import { Container, LinkButton } from "@/components/ui";
|
|
import { ContentImage } from "@/components/content-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,
|
|
image,
|
|
video,
|
|
}: {
|
|
intro: string;
|
|
footnote: string;
|
|
location: string;
|
|
image: string | null;
|
|
video: string | null;
|
|
}) {
|
|
const { t } = useI18n();
|
|
const shouldReduceMotion = useReducedMotion();
|
|
|
|
return (
|
|
<motion.section
|
|
className="relative"
|
|
initial={shouldReduceMotion ? false : "hidden"}
|
|
animate="visible"
|
|
variants={sectionVariants}
|
|
>
|
|
{video ? (
|
|
<div className="relative h-[78vh] min-h-[520px] w-full overflow-hidden">
|
|
<video
|
|
src={video}
|
|
poster={image ?? undefined}
|
|
className="absolute inset-0 h-full w-full object-cover"
|
|
// Nutzer mit "Bewegung reduzieren" bekommen nur das Standbild
|
|
// (poster) statt der automatisch laufenden Videoschleife (WCAG
|
|
// 2.2.2 "Pause, Stop, Hide" fuer automatisch startende Bewegung).
|
|
autoPlay={!shouldReduceMotion}
|
|
muted
|
|
loop
|
|
playsInline
|
|
/>
|
|
</div>
|
|
) : (
|
|
<ContentImage
|
|
src={image}
|
|
alt=""
|
|
tone="forest"
|
|
className="h-[78vh] min-h-[520px] w-full"
|
|
label="Bienenstand im Morgenlicht · Altenmünster"
|
|
priority
|
|
/>
|
|
)}
|
|
<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>
|
|
);
|
|
}
|