diff --git a/src/app/page.tsx b/src/app/page.tsx index f674c36..eb8965e 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(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 (
- +
+ + + {/* Infinite Horizontal Scroll Gallery */} +
+
+ {[ + { 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) => ( +
+ {item.alt} +
+ ))} +
+
+
@@ -187,13 +246,13 @@ export default function LandingPage() { id: "1", title: "What's the best age to start art classes?", content: "Art is for everyone! We welcome students from age 6 through adulthood. We offer age-appropriate instruction tailored to developmental stages and skill levels. Our instructors are experienced in working with diverse age groups and can help you find the perfect class for your needs." }, { - id: "2", title: "Do I need prior art experience?", content: "Absolutely not! Our classes welcome complete beginners as well as experienced artists. We focus on individual growth and creative exploration rather than reaching a specific skill level. Our personalized instruction approach means you will learn at your own pace." + id: "2", title: "Do I need prior art experience?", content: "Absolutely not! Our classes welcome complete beginners as well as experienced artists. We focus on individual growth and creative exploration rather than reaching a specific skill level. Our personalized instruction approach means you'll learn at your own pace." }, { id: "3", title: "What mediums do you teach?", content: "We offer instruction in traditional mediums like drawing, painting, and mixed media, as well as digital art. Classes vary by age group and program, so you can explore different techniques and discover what resonates with you." }, { - id: "4", title: "How do I register for classes?", content: "You can view our current schedule and register online through our website, or contact us directly to discuss which program is the best fit. We are happy to answer any questions and help you get started!" + id: "4", title: "How do I register for classes?", content: "You can view our current schedule and register online through our website, or contact us directly to discuss which program is the best fit. We're happy to answer any questions and help you get started!" }, { id: "5", title: "Do you offer portfolio preparation?", content: "Yes! Our teen and adult programs include personalized portfolio guidance for students applying to art schools or building professional portfolios. We work one-on-one with you to showcase your best work and develop a compelling creative presentation."