diff --git a/src/app/page.tsx b/src/app/page.tsx index 1f489a9..25ff1ff 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -12,8 +12,42 @@ import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia'; import ContactFaq from '@/components/sections/contact/ContactFaq'; import FooterMedia from '@/components/sections/footer/FooterMedia'; import { Award, Dumbbell, Phone, Trophy, Zap } from "lucide-react"; +import { useEffect, useRef } from "react"; export default function LandingPage() { + const brandListRef = useRef(null); + + useEffect(() => { + if (!brandListRef.current) return; + + const scrollContainer = brandListRef.current.querySelector('.brand-scroll-container') as HTMLElement; + if (!scrollContainer) return; + + const items = scrollContainer.querySelectorAll('.brand-item'); + const itemCount = items.length; + if (itemCount === 0) return; + + let scrollPosition = 0; + const itemWidth = (items[0] as HTMLElement).offsetWidth + 32; // includes gap + const containerWidth = scrollContainer.offsetWidth; + const totalWidth = itemWidth * itemCount; + + const animateScroll = () => { + scrollPosition += 1; + if (scrollPosition >= totalWidth / 2) { + scrollPosition = 0; + } + scrollContainer.scrollLeft = scrollPosition; + requestAnimationFrame(animateScroll); + }; + + animateScroll(); + }, []); + + const brands = [ + "Gold's Gym Partners", "Fitness Canada Certified", "NASM Certified", "ACE Certified", "ISSA Certified", "IIFYM Certified", "PN Level 1 Certified", "TRX Certified", "CrossFit Level 1", "NCCPT Certified" + ]; + return ( -
+

Trusted by Leading Fitness Brands

-
-
Gold's Gym Partners
-
Fitness Canada Certified
-
NASM Certified
-
ACE Certified
-
ISSA Certified
+
+
+ {brands.map((brand, index) => ( +
+ {brand} +
+ ))} + {brands.map((brand, index) => ( +
+ {brand} +
+ ))} +
@@ -305,4 +346,4 @@ export default function LandingPage() {
); -} +} \ No newline at end of file