bender/24e3c2d2-4f83-4806-a3fa-0926f625664f
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge version_3 into main #6

Open
bender wants to merge 3 commits from version_3 into main
pull from: version_3
merge into: bender:main
Conversation 0 Commits 3 Files Changed 2 +54 -101
2 changed files with 54 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/layout.tsx
View File

@@ -22,12 +22,14 @@ const archivo = Archivo({
export const metadata: Metadata = {
title: "Art Corner Studio - Art Classes for All Ages in Ann Arbor", description: "Personalized art education for kids, teens, and adults in Ann Arbor. Year-round classes, summer camps, portfolio prep, and hands-on instruction in traditional and digital art.", keywords: "art classes Ann Arbor, art studio, art education, summer art camp, portfolio preparation, drawing classes, painting classes, digital art, creative learning", robots: {
index: true,
follow: true,
follow: true
},
openGraph: {
title: "Art Corner Studio - Discover Your Creative Voice", description: "Join our welcoming art community for personalized classes, camps, and creative instruction for all ages in Ann Arbor, Michigan.", type: "website", siteName: "Art Corner Studio"},
title: "Art Corner Studio - Discover Your Creative Voice", description: "Join our welcoming art community for personalized classes, camps, and creative instruction for all ages in Ann Arbor, Michigan.", type: "website", siteName: "Art Corner Studio"
},
twitter: {
card: "summary_large_image", title: "Art Corner Studio - Creative Classes for All Ages", description: "Personalized art education in Ann Arbor. Classes, camps, and portfolio prep for kids, teens, and adults."},
card: "summary_large_image", title: "Art Corner Studio - Creative Classes for All Ages", description: "Personalized art education in Ann Arbor. Classes, camps, and portfolio prep for kids, teens, and adults."
}
};
export default function RootLayout({

147
src/app/page.tsx
View File

@@ -11,41 +11,8 @@ 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"
@@ -67,54 +34,28 @@ export default function LandingPage() {
{ name: "Programs", id: "programs" },
{ name: "Gallery", id: "gallery" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" },
{ name: "Contact", id: "contact" }
]}
/>
</div>
<div id="hero" data-section="hero">
<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>
<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>
<div id="about" data-section="about">
@@ -140,43 +81,44 @@ export default function LandingPage() {
items: [
{ icon: Palette, text: "Mixed media techniques" },
{ icon: Users, text: "Small group instruction" },
{ icon: Sparkles, text: "Creative exploration" },
{ icon: Sparkles, text: "Creative exploration" }
],
reverse: false,
reverse: false
},
{
id: "2", title: "Teen Art & Portfolio Prep (Ages 13-18)", description: "Advanced instruction in traditional and digital mediums with personalized portfolio guidance for students applying to art schools or pursuing creative passions.", media: { imageSrc: "http://img.b2bpic.net/free-photo/man-holding-lottery-tickets-front-view_23-2149820167.jpg" },
items: [
{ icon: BookOpen, text: "Portfolio development" },
{ icon: Zap, text: "Digital & traditional art" },
{ icon: Target, text: "Art school prep" },
{ icon: Target, text: "Art school prep" }
],
reverse: true,
reverse: true
},
{
id: "3", title: "Adult Art & Creative Workshops", description: "Relaxed, judgment-free classes for adults seeking creative growth. Explore painting, drawing, and digital art while connecting with a supportive creative community.", media: { imageSrc: "http://img.b2bpic.net/free-photo/people-meeting-community-center_23-2149155306.jpg" },
items: [
{ icon: Heart, text: "Stress-free environment" },
{ icon: Users, text: "Community connection" },
{ icon: Brush, text: "Personalized instruction" },
{ icon: Brush, text: "Personalized instruction" }
],
reverse: false,
reverse: false
},
{
id: "4", title: "Summer Art Camps", description: "Immersive, multi-week summer experiences where students engage in intensive creative projects, collaborative art-making, and skill development across multiple mediums.", media: { imageSrc: "http://img.b2bpic.net/free-photo/kid-playing-with-paper-plane_23-2151582155.jpg" },
items: [
{ icon: Calendar, text: "Multi-week programs" },
{ icon: Users, text: "Group art projects" },
{ icon: Mountain, text: "Summer adventure" },
{ icon: Mountain, text: "Summer adventure" }
],
reverse: true,
},
reverse: true
}
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
buttons={[{ text: "Explore All Programs", href: "#contact" }]}
buttonAnimation="slide-up"
buttons={[
{ text: "Explore All Programs", href: "#contact" }
]}
/>
</div>
@@ -187,11 +129,14 @@ export default function LandingPage() {
tag="Gallery"
products={[
{
id: "1", name: "Colorful Expression Series", price: "Student Work", imageSrc: "http://img.b2bpic.net/free-photo/little-boy-home-painting_23-2148902417.jpg", imageAlt: "Vibrant student painting"},
id: "1", name: "Colorful Expression Series", price: "Student Work", imageSrc: "http://img.b2bpic.net/free-photo/little-boy-home-painting_23-2148902417.jpg", imageAlt: "Vibrant student painting"
},
{
id: "2", name: "Digital Art Portfolio", price: "Student Work", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-doing-creative-journaling_23-2150561834.jpg", imageAlt: "Digital artwork by student"},
id: "2", name: "Digital Art Portfolio", price: "Student Work", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-doing-creative-journaling_23-2150561834.jpg", imageAlt: "Digital artwork by student"
},
{
id: "3", name: "Three-Dimensional Creations", price: "Student Work", imageSrc: "http://img.b2bpic.net/free-photo/curly-redhead-girl-is-focused-covering-pottery-vase-before-baking_8353-10819.jpg", imageAlt: "Student sculpture and 3D art"},
id: "3", name: "Three-Dimensional Creations", price: "Student Work", imageSrc: "http://img.b2bpic.net/free-photo/curly-redhead-girl-is-focused-covering-pottery-vase-before-baking_8353-10819.jpg", imageAlt: "Student sculpture and 3D art"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
@@ -208,7 +153,7 @@ export default function LandingPage() {
{ id: "1", value: "500+", description: "Students and families empowered through art education and creative growth." },
{ id: "2", value: "12+", description: "Years of dedicated service fostering creativity in Ann Arbor's community." },
{ id: "3", value: "100%", description: "Commitment to individualized instruction and personalized creative pathways." },
{ id: "4", value: "All Ages", description: "Year-round classes, camps, and programs welcoming curious minds of every age." },
{ id: "4", value: "All Ages", description: "Year-round classes, camps, and programs welcoming curious minds of every age." }
]}
metricsAnimation="slide-up"
useInvertedBackground={false}
@@ -226,7 +171,7 @@ export default function LandingPage() {
{ src: "http://img.b2bpic.net/free-photo/cheerful-multiracial-business-team_1262-21007.jpg", alt: "Another satisfied parent" },
{ src: "http://img.b2bpic.net/free-photo/portrait-female-artist-with-paintbrushes_23-2148014135.jpg", alt: "Young artist at work" },
{ src: "http://img.b2bpic.net/free-photo/young-attractive-smiling-male-student-joyfully-looking-camera-while-studying-library-university_574295-1561.jpg", alt: "Adult learner" },
{ src: "http://img.b2bpic.net/free-photo/happy-middle-aged-man-making-notes-street-cafe_1262-18860.jpg", alt: "Creative adult student" },
{ src: "http://img.b2bpic.net/free-photo/happy-middle-aged-man-making-notes-street-cafe_1262-18860.jpg", alt: "Creative adult student" }
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
@@ -242,17 +187,23 @@ export default function LandingPage() {
ctaIcon={Sparkles}
faqs={[
{
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: "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'll 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: "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're 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."},
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."
},
{
id: "6", title: "Are summer camps available for all ages?", content: "We offer summer camps for kids and teens with themed, multi-week programs. Each camp features intensive creative projects and collaborative art-making. Contact us to learn about current camp offerings and registration details."},
id: "6", title: "Are summer camps available for all ages?", content: "We offer summer camps for kids and teens with themed, multi-week programs. Each camp features intensive creative projects and collaborative art-making. Contact us to learn about current camp offerings and registration details."
}
]}
useInvertedBackground={false}
animationType="slide-up"