diff --git a/src/app/page.tsx b/src/app/page.tsx index cca6864..4c0da01 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,8 +10,35 @@ import TestimonialCardTwelve from "@/components/sections/testimonial/Testimonial import ContactFaq from "@/components/sections/contact/ContactFaq"; import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal"; import { Award, Calendar, Flame, Heart, Leaf, Phone, Star, Store, UtensilsCrossed, Zap } from "lucide-react"; +import { useEffect } from "react"; export default function LandingPage() { + useEffect(() => { + const handleScroll = () => { + const scrollY = window.scrollY; + const documentHeight = document.documentElement.scrollHeight - window.innerHeight; + + // Get all elements with data-section attribute + const sections = document.querySelectorAll("[data-section]"); + + sections.forEach((section) => { + const rect = section.getBoundingClientRect(); + const sectionTop = rect.top + scrollY; + + // Trigger animations when section enters viewport + if (scrollY > sectionTop - window.innerHeight * 0.75) { + section.classList.add("scroll-animated"); + } + }); + }; + + window.addEventListener("scroll", handleScroll, { passive: true }); + // Trigger on mount + handleScroll(); + + return () => window.removeEventListener("scroll", handleScroll); + }, []); + return ( + @@ -207,7 +352,8 @@ export default function LandingPage() { logoText="Frituur De Gouden Punt" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ - text: "Copyright © 2025 Frituur De Gouden Punt", href: "#"}} + text: "Copyright © 2025 Frituur De Gouden Punt", href: "#" + }} />