Update src/app/page.tsx

src/app/blog/page.tsx

@@ -162,4 +162,4 @@ export default function BlogPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/layout.tsx

@@ -7,7 +7,8 @@ const manrope = Manrope({
 });
 
 export const metadata: Metadata = {
-  title: "FitPro Toronto - Personal Training",  description: "Professional personal training in Toronto tailored to your unique goals."};
+  title: "FitPro Toronto - Personal Training",  description: "Professional personal training in Toronto tailored to your unique goals."
+};
 
 export default function RootLayout({
   children,
@@ -1237,4 +1238,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+}

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<HTMLDivElement>(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 += 0.5;
+      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 (
     <ThemeProvider
       defaultButtonVariant="directional-hover"
@@ -72,16 +106,23 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="logo-ribbon" data-section="logo-ribbon" className="py-2 px-4 bg-background">
+      <div id="logo-ribbon" data-section="logo-ribbon" className="py-8 px-4 bg-background" ref={brandListRef}>
         <div className="w-content-width mx-auto">
           <div className="flex flex-col items-center justify-center gap-8">
             <h3 className="text-center text-lg font-semibold text-foreground">Trusted by Leading Fitness Brands</h3>
-            <div className="flex flex-wrap justify-center items-center gap-8 md:gap-12">
-              <div className="flex items-center justify-center h-12 min-w-32 text-foreground/60 font-medium text-sm">Gold's Gym Partners</div>
-              <div className="flex items-center justify-center h-12 min-w-32 text-foreground/60 font-medium text-sm">Fitness Canada Certified</div>
-              <div className="flex items-center justify-center h-12 min-w-32 text-foreground/60 font-medium text-sm">NASM Certified</div>
-              <div className="flex items-center justify-center h-12 min-w-32 text-foreground/60 font-medium text-sm">ACE Certified</div>
-              <div className="flex items-center justify-center h-12 min-w-32 text-foreground/60 font-medium text-sm">ISSA Certified</div>
+            <div className="brand-scroll-container w-full overflow-x-hidden">
+              <div className="flex gap-8 md:gap-12 whitespace-nowrap">
+                {brands.map((brand, index) => (
+                  <div key={`${index}-1`} className="brand-item flex items-center justify-center h-12 min-w-max px-4 text-foreground/60 font-medium text-sm flex-shrink-0">
+                    {brand}
+                  </div>
+                ))}
+                {brands.map((brand, index) => (
+                  <div key={`${index}-2`} className="brand-item flex items-center justify-center h-12 min-w-max px-4 text-foreground/60 font-medium text-sm flex-shrink-0">
+                    {brand}
+                  </div>
+                ))}
+              </div>
             </div>
           </div>
         </div>
@@ -305,4 +346,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}