Merge version_4 into main #7
@@ -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="Join 500+ students discovering their creative voice"
|
||||
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="Join 500+ students discovering their creative voice"
|
||||
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">
|
||||
@@ -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."
|
||||
|
||||
Reference in New Issue
Block a user