252 lines
14 KiB
TypeScript
252 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
|
import SplitAbout from "@/components/sections/about/SplitAbout";
|
|
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
|
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
|
|
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
|
import { MapPin, Star, Palette, Heart, Award, Image, BookOpen, MessageCircle, Phone } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="large"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Kalaprabha Art Studio"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Gallery", id: "gallery" },
|
|
{ name: "Classes", id: "features" },
|
|
{ name: "Testimonials", id: "testimonials" }
|
|
]}
|
|
button={{ text: "Book a Class", href: "#contact" }}
|
|
animateOnLoad={true}
|
|
navItemClassName="text-sm font-medium transition-colors hover:text-orange-600"
|
|
buttonClassName="px-6 py-2 rounded-lg font-semibold transition-all duration-200"
|
|
buttonTextClassName="font-bold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
title="Master Your Craft in Pune's Premier Art Sanctuary"
|
|
description="Led by experienced artists in a friendly, down-to-earth environment. Explore our extensive library of art books and professional-grade materials in a welcoming creative space."
|
|
tag="Located in Pune"
|
|
tagIcon={MapPin}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Book Your First Class", href: "#contact" },
|
|
{ text: "Learn More", href: "#about" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/artist-props-table_23-2148929914.jpg"
|
|
imageAlt="Kalaprabha Art Studio interior with art supplies and creative workspace"
|
|
mediaAnimation="blur-reveal"
|
|
imagePosition="right"
|
|
background={{ variant: "plain" }}
|
|
className="py-20 md:py-32"
|
|
titleClassName="text-4xl md:text-5xl font-bold leading-tight"
|
|
descriptionClassName="text-lg md:text-xl font-medium"
|
|
buttonClassName="px-8 py-3 rounded-lg font-semibold transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="Meet the Artist Behind Kalaprabha"
|
|
description="With years of professional art experience and a passion for nurturing creative talent, our founder has created Kalaprabha as a sanctuary for artists of all levels. Known for her approachable teaching style and genuine care for each student's growth, she believes art is not just a skill—it's a transformative experience."
|
|
tag="Your Mentor"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
bulletPoints={[
|
|
{
|
|
title: "Professional Expertise", description: "Years of studio practice and exhibition experience bring authenticity and depth to every class.", icon: Palette
|
|
},
|
|
{
|
|
title: "Down-to-Earth Approach", description: "Friendly, patient instruction that meets students where they are—beginner or advanced.", icon: Heart
|
|
},
|
|
{
|
|
title: "Dedicated Mentorship", description: "Personalized guidance and continuous support to help you develop your unique artistic voice.", icon: Award
|
|
}
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/curly-girl-man-draw-painting-smile_8353-10794.jpg"
|
|
imageAlt="Experienced art instructor and founder of Kalaprabha Art Studio"
|
|
mediaAnimation="slide-up"
|
|
imagePosition="left"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
className="py-20 md:py-28"
|
|
titleClassName="text-3xl md:text-4xl font-bold"
|
|
descriptionClassName="text-base md:text-lg font-medium text-gray-700"
|
|
bulletPointClassName="flex gap-4 items-start"
|
|
bulletTitleClassName="font-bold text-lg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<ProductCardThree
|
|
title="Explore Our Studio Space"
|
|
description="High-quality materials, extensive art reference library, and a thoughtfully designed creative environment—everything you need to focus on your art."
|
|
tag="The Space"
|
|
tagIcon={Image}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "books", name: "Extensive Art Book Library", price: "Free Access", imageSrc: "http://img.b2bpic.net/free-vector/study-time-stickers-set_52683-60963.jpg", imageAlt: "Comprehensive collection of art reference books and creative resources"
|
|
},
|
|
{
|
|
id: "materials", name: "Professional-Grade Materials", price: "Included", imageSrc: "http://img.b2bpic.net/free-photo/oil-paint-tubes-painting_23-2149537707.jpg", imageAlt: "High-quality professional art supplies and premium materials"
|
|
},
|
|
{
|
|
id: "layout", name: "Inspiring Studio Environment", price: "Included", imageSrc: "http://img.b2bpic.net/free-photo/corporate-employee-working-overhours-marketing-project_482257-77551.jpg", imageAlt: "Bright, spacious, and welcoming art studio layout designed for learning"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
carouselMode="buttons"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
className="py-20 md:py-28"
|
|
titleClassName="text-3xl md:text-4xl font-bold"
|
|
descriptionClassName="text-base md:text-lg text-gray-600"
|
|
cardNameClassName="text-lg font-bold mt-4"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSeven
|
|
title="What Our Classes Offer"
|
|
description="Small group or individual instruction tailored to your artistic journey, with emphasis on fundamental techniques, creative expression, and personal growth."
|
|
tag="Class Highlights"
|
|
tagIcon={BookOpen}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Beginner-Friendly Curriculum", description: "Learn foundational drawing, painting, and design principles in a supportive, non-judgmental environment.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-kids-spending-time-school_23-2150385339.jpg", imageAlt: "Interactive beginner art class with instructor guidance"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Small Group Classes", description: "Limited class sizes ensure personalized attention and space for every student to flourish.", imageSrc: "http://img.b2bpic.net/free-photo/corporate-employee-working-overhours-marketing-project_482257-77551.jpg", imageAlt: "Spacious studio setup perfect for small group art instruction"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Professional Materials Provided", description: "Access to premium art supplies and an extensive reference library throughout your learning journey.", imageSrc: "http://img.b2bpic.net/free-photo/oil-paint-tubes-painting_23-2149537707.jpg", imageAlt: "Premium professional art materials available for all students"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
className="py-20 md:py-28"
|
|
textBoxTitleClassName="text-3xl md:text-4xl font-bold"
|
|
textBoxDescriptionClassName="text-base md:text-lg text-gray-600"
|
|
cardTitleClassName="text-xl font-bold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="What Our Students Say"
|
|
description="Real voices from our creative community sharing their transformative experiences at Kalaprabha Art Studio."
|
|
tag="Testimonials"
|
|
tagIcon={MessageCircle}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Priya Sharma", handle: "Art Enthusiast, Pune", testimonial: "The instructor's friendly approach made me feel comfortable exploring my creativity without fear. The studio space is truly inspiring, and I've learned so much in just a few weeks!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-1886.jpg", imageAlt: "Satisfied art student Priya Sharma"
|
|
},
|
|
{
|
|
id: "2", name: "Amit Desai", handle: "Professional, Learning Art", testimonial: "I was intimidated to start as an adult, but the down-to-earth teaching style and small class sizes made all the difference. Highly recommend Kalaprabha to anyone wanting to learn art!", imageSrc: "http://img.b2bpic.net/free-photo/caucasian-female-student-good-humor-trying-find-required-information-history-studying-textbook-sitting-library-front-piles-books-smiling-looking-happy-satisfied_273609-1117.jpg", imageAlt: "Happy learner Amit Desai in class"
|
|
},
|
|
{
|
|
id: "3", name: "Sneha Gupta", handle: "Student, Digital Designer", testimonial: "The extensive art book library and professional materials have accelerated my learning so much. The instructor's personalized feedback has been invaluable for my growth.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-cheerfully-feeling-happy-pointing-side-upwards-showing-object-copy-space_1194-631218.jpg", imageAlt: "Inspired student Sneha Gupta at work"
|
|
},
|
|
{
|
|
id: "4", name: "Rohan Patel", handle: "Creative Professional", testimonial: "I've taken classes at many studios, but Kalaprabha stands out for its warm, welcoming environment and the genuine care the instructor shows for each student's progress.", imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2533.jpg", imageAlt: "Professional artist Rohan Patel testimonial"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
speed={40}
|
|
className="py-20 md:py-28"
|
|
textBoxTitleClassName="text-3xl md:text-4xl font-bold"
|
|
textBoxDescriptionClassName="text-base md:text-lg text-gray-600"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get Started"
|
|
title="Ready to Begin Your Creative Journey?"
|
|
description="Book a class or reach out with questions. We'd love to welcome you to our community of artists in Pune."
|
|
tagIcon={Phone}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Get Started"
|
|
termsText="By submitting, you agree to receive class updates and studio news."
|
|
className="py-20 md:py-28"
|
|
titleClassName="text-3xl md:text-4xl font-bold mb-4"
|
|
descriptionClassName="text-base md:text-lg text-gray-700 mb-8"
|
|
formClassName="max-w-md mx-auto"
|
|
buttonClassName="w-full py-3 px-6 rounded-lg font-semibold transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Studio", items: [
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Classes", href: "#features" },
|
|
{ label: "Gallery", href: "#gallery" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "Email", href: "mailto:info@kalaprabha.com" },
|
|
{ label: "Phone", href: "tel:+919876543210" }
|
|
]
|
|
},
|
|
{
|
|
title: "Location", items: [
|
|
{ label: "Pune, India", href: "#" },
|
|
{ label: "Visit Us", href: "#" },
|
|
{ label: "Book a Tour", href: "#contact" },
|
|
{ label: "Hours", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2024 Kalaprabha Art Studio. All rights reserved."
|
|
className="py-12 md:py-16 bg-white"
|
|
columnTitleClassName="font-bold text-lg mb-4"
|
|
columnItemClassName="text-sm md:text-base hover:text-orange-600 transition-colors"
|
|
copyrightTextClassName="text-sm text-gray-600"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|