174 lines
8.3 KiB
TypeScript
174 lines
8.3 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import { Heart, Sparkles, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="large"
|
|
background="circleGradient"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Sketch Booth"
|
|
navItems={[
|
|
{ name: "Gallery", id: "gallery" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Start Booth", href: "#welcome"
|
|
}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="Welcome to Sketch Booth"
|
|
description="Step into our hand-drawn photobooth experience. Capture moments with a pencil-sketched aesthetic and take home your animated memories."
|
|
tag="Interactive Experience"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/group-vintage-film-cameras_53876-68.jpg"
|
|
imageAlt="Hand-drawn photobooth machine"
|
|
buttons={[
|
|
{ text: "Enter the Booth", href: "#photo-method" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
className="relative"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="How It Works"
|
|
title="Your step-by-step animated photobooth adventure awaits. Choose your method, select your style, capture your moment, and watch the magic unfold."
|
|
buttons={[
|
|
{ text: "Explore Features", href: "#features" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNine
|
|
title="Experience the Magic"
|
|
description="Every step of your photobooth journey is brought to life with smooth animations and playful interactions."
|
|
tag="Interactive Steps"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Choose Your Method", description: "Decide whether to capture fresh photos with your camera or upload your favorite images to create your perfect photobooth strip.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/group-vintage-film-cameras_53876-68.jpg" },
|
|
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/arrangement-eco-friendly-tableware_23-2148902922.jpg" }
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Select Your Style", description: "Toggle between black & white sketched aesthetic and vibrant color modes. Watch the pencil doodles animate as you decide.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-vector/vintage-ornamental-logo-set_52683-26637.jpg" },
|
|
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-curtain-with-embroidery_23-2149551422.jpg" }
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Pick Your Frame", description: "Browse through beautifully sketched photostrip frame styles. Each one animates smoothly as you navigate left and right.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/woman-taking-pictures-with-retro-photo-camera_23-2148300530.jpg" },
|
|
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/boho-element-set_23-2149036236.jpg" }
|
|
}
|
|
]}
|
|
showStepNumbers={true}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="What Our Users Love"
|
|
description="Join our community of sketch booth enthusiasts and creators."
|
|
tag="Testimonials"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Pure Creative Joy", quote: "The hand-drawn aesthetic makes every photo feel like a treasured memory. The animations are smooth and delightful!", name: "Emma Parker", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/group-vintage-film-cameras_53876-68.jpg", imageAlt: "Emma Parker"
|
|
},
|
|
{
|
|
id: "2", title: "Magical Animation", quote: "Watching the pencil lines come to life is absolutely mesmerizing. This is the most fun I've had with a photobooth tool.", name: "Lucas Chen", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-curtain-with-embroidery_23-2149551422.jpg", imageAlt: "Lucas Chen"
|
|
},
|
|
{
|
|
id: "3", title: "Perfect for Events", quote: "Our wedding guests couldn't stop playing with Sketch Booth. The cute aesthetic and smooth animations stole the show!", name: "Sophie Morgan", role: "Event Planner", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-eco-friendly-tableware_23-2148902922.jpg", imageAlt: "Sophie Morgan"
|
|
},
|
|
{
|
|
id: "4", title: "Simple & Delightful", quote: "The step-by-step interface feels intuitive and playful. Every interaction brings a smile. Absolutely love it!", name: "Marco Rossi", role: "Photographer", imageSrc: "http://img.b2bpic.net/free-vector/vintage-ornamental-logo-set_52683-26637.jpg", imageAlt: "Marco Rossi"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to create your own animated photobooth memories? Start capturing moments that feel like they're drawn straight from your imagination."
|
|
animationType="entrance-slide"
|
|
background={{ variant: "plain" }}
|
|
buttons={[
|
|
{ text: "Begin Your Experience", href: "#hero" }
|
|
]}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Sketch Booth"
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Gallery", href: "#gallery" },
|
|
{ label: "Experience", href: "#hero" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Support", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Help Center", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Community", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Sketch Booth | Hand-drawn with love"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |