From 13ecf379c3ba46a195d6cc78a520d9af15660652 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 16 Jun 2026 15:44:35 +0000
Subject: [PATCH 1/2] Update src/components/Layout.tsx

---
 src/components/Layout.tsx | 61 ++++++++++++++-------------------------
 1 file changed, 22 insertions(+), 39 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 4ce0acd..7a1693d 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -2,62 +2,45 @@ import FooterMinimal from '@/components/sections/footer/FooterMinimal';
 import NavbarFloatingLogo from '@/components/ui/NavbarFloatingLogo';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
-import { Facebook, Instagram, Linkedin } from "lucide-react";
 import { Outlet } from 'react-router-dom';
 import { StyleProvider } from "@/components/ui/StyleProvider";
 
 export default function Layout() {
   const navItems = [
-  {
-    "name": "Leistungen",    "href": "#about"
-  },
-  {
-    "name": "Produkte",    "href": "#products"
-  },
-  {
-    "name": "Referenzen",    "href": "#testimonials"
-  },
-  {
-    "name": "Kontakt",    "href": "#contact"
-  },
-  {
-    "name": "Hero",    "href": "#hero"
-  },
-  {
-    "name": "Features",    "href": "#features"
-  },
-  {
-    "name": "Metrics",    "href": "#metrics"
-  }
-];
+    { "name": "Leistungen", "href": "#about" },
+    { "name": "Produkte", "href": "#products" },
+    { "name": "Referenzen", "href": "#testimonials" },
+    { "name": "Kontakt", "href": "#contact" },
+    { "name": "Hero", "href": "#hero" },
+    { "name": "Features", "href": "#features" },
+    { "name": "Metrics", "href": "#metrics" }
+  ];
 
   return (
     <StyleProvider buttonVariant="expand" siteBackground="noiseGradient" heroBackground="radialGradient">
       <SiteBackgroundSlot />
       <SectionErrorBoundary name="navbar">
         <NavbarFloatingLogo
-      logo="Klingelwerk"
-      logoImageSrc="http://img.b2bpic.net/free-vector/letter-bird-gradient-logo-design_474888-4706.jpg"
-      ctaButton={{
-        text: "Anfrage",        href: "#contact"}}
-     navItems={navItems} />
+          logo="Klingelwerk"
+          logoImageSrc="http://img.b2bpic.net/free-vector/letter-bird-gradient-logo-design_474888-4706.jpg"
+          ctaButton={{
+            text: "Anfrage", href: "#contact"
+          }}
+          navItems={navItems} />
       </SectionErrorBoundary>
       <main className="flex-grow">
         <Outlet />
       </main>
       <SectionErrorBoundary name="footer">
         <FooterMinimal
-      brand="Klingelwerk GmbH"
-      copyright="© 2024 Klingelwerk GmbH. Alle Rechte vorbehalten."
-      socialLinks={[
-        {
-          icon: "Instagram",          href: "#"},
-        {
-          icon: "Facebook",          href: "#"},
-        {
-          icon: "Linkedin",          href: "#"},
-      ]}
-    />
+          brand="Klingelwerk GmbH"
+          copyright="© 2024 Klingelwerk GmbH. Alle Rechte vorbehalten."
+          socialLinks={[
+            { icon: "Instagram", href: "#" },
+            { icon: "Facebook", href: "#" },
+            { icon: "Linkedin", href: "#" },
+          ]}
+        />
       </SectionErrorBoundary>
     </StyleProvider>
   );

From 42e9cfb6d80de90bba85015016bafd6d6255bc81 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 16 Jun 2026 15:44:35 +0000
Subject: [PATCH 2/2] Update src/components/sections/hero/HeroVideoExpand.tsx

---
 .../sections/hero/HeroVideoExpand.tsx         | 189 ++++++------------
 1 file changed, 59 insertions(+), 130 deletions(-)

diff --git a/src/components/sections/hero/HeroVideoExpand.tsx b/src/components/sections/hero/HeroVideoExpand.tsx
index e0e7f08..9e47478 100644
--- a/src/components/sections/hero/HeroVideoExpand.tsx
+++ b/src/components/sections/hero/HeroVideoExpand.tsx
@@ -1,146 +1,75 @@
-import { useEffect, useRef, useState } from "react";
-import { AnimatePresence, motion, useScroll, useTransform } from "motion/react";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import AutoFillText from "@/components/ui/AutoFillText";
-import { useButtonClick } from "@/hooks/useButtonClick";
+import { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
 
-const StaggerText = ({ text }: { text: string }) => (
-  <span className="truncate overflow-hidden">
-    {[...text].map((char, index) => (
-      <span
-        key={index}
-        className="inline-block transition-transform duration-400 ease-out md:group-hover:-translate-y-[1.25em]"
-        style={{ textShadow: "0 1.25em currentColor", transitionDelay: `${index * 0.01}s`, whiteSpace: char === " " ? "pre" : undefined }}
-      >
-        {char}
-      </span>
-    ))}
-  </span>
-);
-
-type HeroVideoExpandProps = {
+interface HeroVideoExpandProps {
   title: string;
-  primaryButton: { text: string; href: string };
-  secondaryButton: { text: string; href: string };
+  description: string;
+  videoSrc: string;
+  thumbnailSrc: string;
   onComplete?: () => void;
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+}
 
-const HeroVideoExpand = ({
-  title,
-  videoSrc,
-  imageSrc,
-  primaryButton,
-  secondaryButton,
-  onComplete,
-}: HeroVideoExpandProps) => {
-  const [showLoader, setShowLoader] = useState(true);
-  const [expanded, setExpanded] = useState(false);
-  const handlePrimaryClick = useButtonClick(primaryButton.href);
-  const handleSecondaryClick = useButtonClick(secondaryButton.href);
-
-  const sectionRef = useRef<HTMLElement>(null);
-  const { scrollYProgress } = useScroll({
-    target: sectionRef,
-    offset: ["start start", "end start"],
-  });
-  const videoY = useTransform(scrollYProgress, [0, 1], ["0px", "150px"]);
-  const videoScale = useTransform(scrollYProgress, [0, 1], [1, 1.1]);
+export default function HeroVideoExpand({ title, description, videoSrc, thumbnailSrc, onComplete }: HeroVideoExpandProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
-    const expandTimer = setTimeout(() => setExpanded(true), 600);
-    const hideTimer = setTimeout(() => {
-      setShowLoader(false);
-      onComplete?.();
-    }, 1500);
+    if (isOpen && videoRef.current) {
+      videoRef.current.play().catch(console.error);
+    }
     return () => {
-      clearTimeout(expandTimer);
-      clearTimeout(hideTimer);
+      if (onComplete) onComplete();
     };
-  }, []);
+  }, [isOpen, onComplete]);
 
   return (
-    <>
-      <AnimatePresence>
-        {showLoader && (
-          <motion.div
-            key="loader"
-            className="fixed inset-0 z-100 bg-background"
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <motion.div
-              className="absolute inset-0"
-              initial={{ opacity: 0, clipPath: "inset(25% 20% 25% 20% round 24px)" }}
-              animate={
-                expanded
-                  ? { opacity: 1, clipPath: "inset(0% 0% 0% 0% round 0px)" }
-                  : { opacity: 1, clipPath: "inset(25% 20% 25% 20% round 24px)" }
-              }
-              transition={{ duration: expanded ? 1.4 : 1.2, ease: [0.76, 0, 0.24, 1] }}
-            >
-              <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="rounded-none" />
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
+    <section className="relative w-full py-20">
+      <div className="container mx-auto px-4">
+        <div className="max-w-4xl mx-auto text-center mb-12">
+          <h1 className="text-5xl font-bold mb-6">{title}</h1>
+          <p className="text-xl text-muted-foreground">{description}</p>
+        </div>
 
-      <section ref={sectionRef} aria-label="Hero section" className="relative w-full h-svh overflow-hidden mb-20">
-        <motion.div className="absolute inset-0" style={{ y: videoY, scale: videoScale }}>
-          <ImageOrVideo
-            imageSrc={imageSrc}
-            videoSrc={videoSrc}
-            className="absolute inset-0 w-full h-full object-cover rounded-none"
+        <div className="relative aspect-video rounded-2xl overflow-hidden shadow-2xl cursor-pointer group">
+          <img 
+            src={thumbnailSrc} 
+            alt="Video thumbnail" 
+            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+            onClick={() => setIsOpen(true)}
           />
-        </motion.div>
-
-        <div className="absolute inset-0 bg-linear-to-t from-background/60 via-transparent to-background/0" />
-
-        <div className="absolute inset-0 z-10 flex flex-col justify-end pb-8 md:pb-12 xl:pb-16 2xl:pb-20">
-          <div className="w-content-width mx-auto flex flex-col md:flex-row md:items-end md:justify-between gap-8">
-            <motion.div
-              initial={{ opacity: 0, y: 10 }}
-              animate={!showLoader ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
-              transition={{ duration: 1.2, ease: "easeOut" }}
-              className="w-full"
-            >
-              <AutoFillText className="font-medium text-white" paddingY="0">{title}</AutoFillText>
-            </motion.div>
-
-            <div className="flex items-center gap-3">
-              <motion.div
-                initial={{ opacity: 0, y: 10 }}
-                animate={!showLoader ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
-                transition={{ duration: 1.2, delay: 0.1, ease: "easeOut" }}
-                className="w-1/2 md:w-auto"
-              >
-                <a
-                  href={primaryButton.href}
-                  onClick={handlePrimaryClick}
-                  className="group w-1/2 md:w-auto h-14 xl:h-16 2xl:h-18 px-8 xl:px-10 2xl:px-12 text-lg xl:text-xl font-medium text-nowrap inline-flex items-center justify-center rounded-2xl cursor-pointer primary-button text-primary-cta-text"
-                >
-                  <StaggerText text={primaryButton.text} />
-                </a>
-              </motion.div>
-              <motion.div
-                initial={{ opacity: 0, y: 10 }}
-                animate={!showLoader ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
-                transition={{ duration: 1.2, delay: 0.2, ease: "easeOut" }}
-                className="w-1/2 md:w-auto"
-              >
-                <a
-                  href={secondaryButton.href}
-                  onClick={handleSecondaryClick}
-                  className="group w-1/2 md:w-auto h-14 xl:h-16 2xl:h-18 px-8 xl:px-10 2xl:px-12 text-lg xl:text-xl font-medium text-nowrap inline-flex items-center justify-center rounded-2xl cursor-pointer secondary-button text-secondary-cta-text"
-                >
-                  <StaggerText text={secondaryButton.text} />
-                </a>
-              </motion.div>
+          <div 
+            className="absolute inset-0 flex items-center justify-center bg-black/20 hover:bg-black/30 transition-colors"
+            onClick={() => setIsOpen(true)}
+          >
+            <div className="w-20 h-20 bg-white/90 rounded-full flex items-center justify-center">
+              <div className="w-0 h-0 border-t-[10px] border-t-transparent border-l-[20px] border-l-black border-b-[10px] border-b-transparent ml-1" />
             </div>
           </div>
         </div>
-      </section>
-    </>
-  );
-};
+      </div>
 
-export default HeroVideoExpand;
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div 
+            initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
+          >
+            <button 
+              onClick={() => setIsOpen(false)} 
+              className="absolute top-6 right-6 text-white p-2 hover:bg-white/10 rounded-full"
+            >
+              <X size={32} />
+            </button>
+            <video 
+              ref={videoRef} 
+              src={videoSrc} 
+              controls 
+              className="w-full max-w-5xl rounded-lg"
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </section>
+  );
+}
\ No newline at end of file