268 lines
16 KiB
TypeScript
268 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { Bookmark, Facebook, Instagram } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="medium"
|
|
background="none"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#hero"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Features", id: "#features"},
|
|
{
|
|
name: "Courses", id: "#courses"},
|
|
{
|
|
name: "Pricing", id: "#pricing"},
|
|
{
|
|
name: "Testimonials", id: "#testimonials"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
brandName="Style Journey"
|
|
button={{
|
|
text: "Sign Up", href: "#contact"}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Unlock Your Signature Style"
|
|
description="Discover the art of personal expression and build a wardrobe that truly reflects who you are. Our expert-led course guides you from confusion to confidence."
|
|
tag="Step Into Confidence"
|
|
tagAnimation="none"
|
|
buttons={[
|
|
{
|
|
text: "Explore Courses", href: "#courses"},
|
|
{
|
|
text: "Get Started", href: "#contact"},
|
|
]}
|
|
buttonAnimation="none"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cute-fairskinned-adult-lady-with-short-haircut-smiles-camera-wears-grey-jacket-with-black-bag-lifestyle-concept_197531-31188.jpg", imageAlt: "Fashionable woman walking on a city street"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/seller-helping-customer-choose-cloth-woman-holding-showing-dress-with-hanger-her-friend-side-view-consumerism-shopping-concept_74855-11954.jpg", imageAlt: "Woman choosing clothes in a stylish closet"}
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="Rated 5 Stars by Our Students"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={false}
|
|
title="Your Journey to Style Confidence"
|
|
description={[
|
|
"We believe true style is an extension of your authentic self. Our course goes beyond trends, focusing on foundational principles that empower you to dress with purpose and joy. Learn to understand your body shape, color palette, and personal aesthetic to create a cohesive and inspiring wardrobe.", "Led by seasoned stylists, our program offers a blend of practical advice, interactive exercises, and personalized feedback. Whether you're refreshing your look or undergoing a complete style transformation, we're here to guide every step of the way."]}
|
|
buttons={[
|
|
{
|
|
text: "Learn More", href: "#features"},
|
|
]}
|
|
buttonAnimation="none"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNineteen
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
tag: "Foundational", title: "Body Shape Analysis", subtitle: "Understand Your Silhouette", description: "Identify your unique body shape and learn how to dress it to enhance your best features. Flatter your figure with expert guidance.", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-pressure-feeling-frustrated-with-her-coworker_482257-131902.jpg", imageAlt: "Woman looking at her body shape in a mirror"},
|
|
{
|
|
tag: "Personalized", title: "Color Theory & Palette", subtitle: "Discover Your Best Hues", description: "Unlock the power of color. Find your personal color palette to brighten your complexion and harmonize your wardrobe choices. ", imageSrc: "http://img.b2bpic.net/free-photo/scenery-designers-work_23-2149741834.jpg", imageAlt: "Fabric swatches showing different color palettes"},
|
|
{
|
|
tag: "Practical", title: "Wardrobe Essentials", subtitle: "Build a Smart Foundation", description: "Curate a versatile capsule wardrobe with timeless pieces that can be mixed and matched for any occasion. Simplify your daily dressing.", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-autumn-leaves-her-pockets_23-2148619447.jpg", imageAlt: "Organized minimalist capsule wardrobe"},
|
|
]}
|
|
title="What You'll Discover"
|
|
description="Our comprehensive curriculum covers everything you need to develop a confident and distinctive personal style."
|
|
tagAnimation="none"
|
|
buttonAnimation="none"
|
|
/>
|
|
</div>
|
|
|
|
<div id="courses" data-section="courses">
|
|
<ProductCardFour
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
products={[
|
|
{
|
|
id: "1", name: "Signature Style Masterclass", price: "$499", variant: "Online Course", imageSrc: "http://img.b2bpic.net/free-photo/cropped-portrait-young-female-photographer-retouching-photographs-using-graphic-tablet_273609-13802.jpg", imageAlt: "Fashion designer sketching a dress"},
|
|
{
|
|
id: "2", name: "Wardrobe Refresh Intensive", price: "$299", variant: "Live Workshop", imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businesswoman-sunglasses-catching-car-business-centre_176420-5670.jpg", imageAlt: "Woman confidently posing in a new outfit"},
|
|
{
|
|
id: "3", name: "Personal Shopping Experience", price: "$750", variant: "One-on-One", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-gardener-checking-her-tablet_23-2148851414.jpg", imageAlt: "Luxury shopping experience with a personal stylist"},
|
|
{
|
|
id: "4", name: "Couples Style Synergy", price: "$899", variant: "Joint Coaching", imageSrc: "http://img.b2bpic.net/free-photo/two-girls-have-fun-mall-fountain_1153-4206.jpg", imageAlt: "Man and woman fashion posing together"},
|
|
{
|
|
id: "5", name: "Group Style Workshop", price: "$199", variant: "Interactive Session", imageSrc: "http://img.b2bpic.net/free-photo/three-young-beautiful-smiling-female-trendy-summer-clothessexy-carefree-multiracial-women-posing-street-backgroundpositive-models-having-fun-sunglasses-cheerful-happy_158538-23001.jpg", imageAlt: "Group of women laughing in stylish outfits"},
|
|
{
|
|
id: "6", name: "Virtual Style Consultation", price: "$150", variant: "Video Call", imageSrc: "http://img.b2bpic.net/free-photo/looking-inspiration-internet_329181-13631.jpg", imageAlt: "Woman on a laptop learning fashion tips"},
|
|
]}
|
|
title="Our Transformative Programs"
|
|
description="Choose the path that best suits your style aspirations. Each program is crafted to provide deep insights and practical skills."
|
|
tagAnimation="none"
|
|
buttonAnimation="none"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardFive
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "basic", tag: "Starter", price: "$199", period: "/ session", description: "Begin your style journey with essential insights and foundational tips.", button: {
|
|
text: "Book Session", href: "#contact"},
|
|
featuresTitle: "Includes:", features: [
|
|
"1-hour consultation", "Basic style assessment", "Digital style guide"],
|
|
},
|
|
{
|
|
id: "pro", tag: "Popular", price: "$499", period: "/ course", description: "Dive deep into personal style with our signature masterclass experience.", button: {
|
|
text: "Enroll Now", href: "#contact"},
|
|
featuresTitle: "Includes:", features: [
|
|
"Full masterclass access", "Personalized color analysis", "Wardrobe building exercises", "Community support"],
|
|
},
|
|
{
|
|
id: "vip", tag: "Premium", price: "$999", period: "/ package", description: "The ultimate transformation with one-on-one expert guidance and exclusive perks.", button: {
|
|
text: "Unlock Premium", href: "#contact"},
|
|
featuresTitle: "Includes:", features: [
|
|
"All Pro features", "3 one-on-one coaching sessions", "Curated shopping list", "Priority support"],
|
|
},
|
|
]}
|
|
title="Invest in Your Style Future"
|
|
description="Select the program that aligns with your goals and start your transformation today."
|
|
tagAnimation="none"
|
|
buttonAnimation="none"
|
|
animationType="none"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah J.", handle: "@sarah_style", testimonial: "This course completely changed how I view my wardrobe. I now dress with so much more confidence and purpose! Highly recommend!", imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-happy-gorgeous-woman-with-relaxed-smile-spending-nice-time-cafe_273609-9043.jpg", imageAlt: "Sarah J."},
|
|
{
|
|
id: "2", name: "Michael T.", handle: "@mikey_fashion", testimonial: "As a busy professional, I needed practical advice. This course delivered! My style is sharper, and getting ready is a breeze.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-bearded-man-wearing-sunglasses_171337-4794.jpg", imageAlt: "Michael T."},
|
|
{
|
|
id: "3", name: "Emily R.", handle: "@emily_chic", testimonial: "I used to feel overwhelmed by fashion, but now I understand what truly suits me. It's truly transformative!", imageSrc: "http://img.b2bpic.net/free-photo/colorimetry-specialist-testing-fabric-swaps-client_23-2150461548.jpg", imageAlt: "Emily R."},
|
|
{
|
|
id: "4", name: "David K.", handle: "@david_dapper", testimonial: "The personal color analysis was a game-changer. I never knew how much difference the right shades could make. Fantastic instructors!", imageSrc: "http://img.b2bpic.net/free-photo/firends-joking-posing-with-frame_23-2147643530.jpg", imageAlt: "David K."},
|
|
{
|
|
id: "5", name: "Jessica L.", handle: "@jessica_glows", testimonial: "Beyond clothes, this course taught me to embrace my individuality. I feel empowered and stylish every day.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-businesswoman-standing-road-hailing-cab-taxi_23-2147972862.jpg", imageAlt: "Jessica L."},
|
|
]}
|
|
title="Hear From Our Happy Clients"
|
|
description="Real stories of transformation and newfound confidence."
|
|
tagAnimation="none"
|
|
buttonAnimation="none"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What if I don't know my current style?", content: "Our course is designed for everyone, from beginners to those looking for a refresh. We start with foundational exercises to help you discover your unique aesthetic before building on it."},
|
|
{
|
|
id: "2", title: "Is this course suitable for all body types and ages?", content: "Absolutely! Our principles are universal and adaptable. We focus on empowering you to dress for your unique body shape and personal preferences, regardless of age or current style."},
|
|
{
|
|
id: "3", title: "Do I need to buy new clothes to participate?", content: "Not at all. While the course can inspire new purchases, a core component is learning how to maximize your existing wardrobe, identify gaps, and make conscious shopping choices. We advocate for smart, sustainable styling."},
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Got questions? We've got answers. Find out more about our programs and approach."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Ready to Define Your Style?"
|
|
description="Reach out to us for a personalized consultation or to learn more about our transformative courses. We're excited to help you on your style journey!"
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Your Email", required: true,
|
|
},
|
|
{
|
|
name: "phone", type: "tel", placeholder: "Phone Number (Optional)"},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your style goals...", rows: 4,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/clothes-designers-working-store_23-2148915550.jpg"
|
|
imageAlt="Fashion consultant meeting with a client"
|
|
mediaAnimation="none"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Style Journey"
|
|
copyrightText="© 2024 Style Journey. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com", ariaLabel: "Instagram"},
|
|
{
|
|
icon: Bookmark,
|
|
href: "https://pinterest.com", ariaLabel: "Pinterest"},
|
|
{
|
|
icon: Facebook,
|
|
href: "https://facebook.com", ariaLabel: "Facebook"},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|