Merge version_2 into main #1
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user