From 3a7e7f4ec30d4bb2cad22afcc7a731a4161a197e Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 3 Mar 2026 19:19:53 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 91 +++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 75 insertions(+), 16 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8742b71..8068079 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,8 +11,41 @@ import TestimonialCardFifteen from "@/components/sections/testimonial/Testimonia
 import ContactFaq from "@/components/sections/contact/ContactFaq";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
 import { BookOpen, Brush, Calendar, Heart, Mountain, Palette, Sparkles, Target, Users, Zap } from "lucide-react";
+import { useEffect, useRef } from "react";
 
 export default function LandingPage() {
+  const marqueeRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!marqueeRef.current) return;
+
+    const marquee = marqueeRef.current;
+    const scrollContainer = marquee.querySelector(".marquee-scroll") as HTMLElement;
+    if (!scrollContainer) return;
+
+    // Clone items for infinite scroll
+    const items = Array.from(scrollContainer.children);
+    items.forEach((item) => {
+      const clone = item.cloneNode(true);
+      scrollContainer.appendChild(clone);
+    });
+
+    let scrollPosition = 0;
+    const itemWidth = (items[0] as HTMLElement).offsetWidth + 16; // 16px gap
+    const totalWidth = itemWidth * items.length;
+
+    const animate = () => {
+      scrollPosition += 1;
+      if (scrollPosition >= totalWidth) {
+        scrollPosition = 0;
+      }
+      scrollContainer.style.transform = `translateX(-${scrollPosition}px)`;
+      requestAnimationFrame(animate);
+    };
+
+    animate();
+  }, []);
+
   return (
     <ThemeProvider
       defaultButtonVariant="directional-hover"
@@ -40,22 +73,48 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroCentered
-          title="Discover Your Creative Voice"
-          description="Art Corner Studio is your welcoming community space for personalized art education. From curious beginners to aspiring professionals, we offer year-round classes for all ages, summer camps, and portfolio preparation in traditional and digital art."
-          background={{ variant: "radial-gradient" }}
-          avatars={[
-            { src: "http://img.b2bpic.net/free-photo/portrait-joyful-young-girl-wearing-backpack-headphones_482257-116256.jpg", alt: "Student artwork showcase" },
-            { src: "http://img.b2bpic.net/free-photo/joyful-beautiful-black-haired-woman-standing-city-park-smiling-lady-enjoying-leisure-time-outdoors-summer-closeup-front-view-female-portrait-concept_74855-12894.jpg", alt: "Happy parent and student" },
-            { src: "http://img.b2bpic.net/free-photo/young-attractive-smiling-male-student-joyfully-looking-camera-while-studying-library-university_574295-1561.jpg", alt: "Adult art learner" }
-          ]}
-          avatarText="Trusted by 500+ students and families"
-          buttons={[
-            { text: "Join a Class", href: "#contact" },
-            { text: "View Schedule", href: "#programs" }
-          ]}
-          buttonAnimation="slide-up"
-        />
+        <div className="relative">
+          <HeroCentered
+            title="Discover Your Creative Voice"
+            description="Art Corner Studio is your welcoming community space for personalized art education. From curious beginners to aspiring professionals, we offer year-round classes for all ages, summer camps, and portfolio preparation in traditional and digital art."
+            background={{ variant: "radial-gradient" }}
+            avatars={[
+              { src: "http://img.b2bpic.net/free-photo/portrait-joyful-young-girl-wearing-backpack-headphones_482257-116256.jpg", alt: "Student artwork showcase" },
+              { src: "http://img.b2bpic.net/free-photo/joyful-beautiful-black-haired-woman-standing-city-park-smiling-lady-enjoying-leisure-time-outdoors-summer-closeup-front-view-female-portrait-concept_74855-12894.jpg", alt: "Happy parent and student" },
+              { src: "http://img.b2bpic.net/free-photo/young-attractive-smiling-male-student-joyfully-looking-camera-while-studying-library-university_574295-1561.jpg", alt: "Adult art learner" }
+            ]}
+            avatarText="Trusted by 500+ students and families"
+            buttons={[
+              { text: "Join a Class", href: "#contact" },
+              { text: "View Schedule", href: "#programs" }
+            ]}
+            buttonAnimation="slide-up"
+          />
+
+          {/* Infinite Horizontal Scroll Gallery */}
+          <div ref={marqueeRef} className="w-full overflow-hidden bg-gradient-to-b from-transparent via-transparent to-[var(--background)] py-12">
+            <div className="marquee-scroll flex gap-4 will-change-transform" style={{ width: "fit-content" }}>
+              {[
+                { src: "http://img.b2bpic.net/free-photo/little-boy-home-painting_23-2148902417.jpg", alt: "Colorful Expression" },
+                { src: "http://img.b2bpic.net/free-photo/side-view-woman-doing-creative-journaling_23-2150561834.jpg", alt: "Digital Art" },
+                { src: "http://img.b2bpic.net/free-photo/curly-redhead-girl-is-focused-covering-pottery-vase-before-baking_8353-10819.jpg", alt: "3D Creations" },
+                { src: "http://img.b2bpic.net/free-photo/full-shot-kids-painting-school_23-2150385331.jpg", alt: "Kids Painting" },
+                { src: "http://img.b2bpic.net/free-photo/joyful-artist-her-apprentice-applying-watercolor-paint-canvas_482257-118557.jpg", alt: "Watercolor Art" }
+              ].map((item, idx) => (
+                <div
+                  key={idx}
+                  className="flex-shrink-0 w-64 h-48 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300 cursor-pointer"
+                >
+                  <img
+                    src={item.src}
+                    alt={item.alt}
+                    className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="about" data-section="about">
-- 
2.49.1