259 lines
14 KiB
TypeScript
259 lines
14 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import { Award, BookOpen, Heart, Mail, ShoppingBag, Sparkles, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="mediumLarge"
|
|
background="circleGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Élegance"
|
|
navItems={[
|
|
{ name: "Collection", id: "features" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Products", id: "products" },
|
|
{ name: "Testimonials", id: "testimonial" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="Timeless Elegance Redefined"
|
|
description="Discover our exclusive collection of luxury fashion pieces, handcrafted with exceptional attention to detail and the finest materials sourced from around the world."
|
|
tag="New Collection"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-long-black-hair-dark-green-dress-posing-chair_613910-11094.jpg", imageAlt: "Luxury fashion collection"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-psd/elegant-young-woman-long-pink-satin-evening-gown_9975-132967.jpg?_wi=1", imageAlt: "Elegant designer dress"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/golden-easter-eggs-by-easter-decorations_1303-30816.jpg", imageAlt: "Premium fashion accessories"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-fashion-woman-interior_624325-3513.jpg", imageAlt: "Haute couture runway"
|
|
}
|
|
]}
|
|
mediaAnimation="blur-reveal"
|
|
buttons={[
|
|
{ text: "Explore Collection", href: "#products" },
|
|
{ text: "Learn More", href: "#about" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
tag="Our Story"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
title="Crafted with Passion, Worn with Confidence"
|
|
description="Since our founding, we've been dedicated to creating exceptional fashion that transcends trends. Each piece in our collection represents years of expertise, sustainable practices, and an unwavering commitment to quality. We believe that true elegance lies in the details—from the selection of premium fabrics to the precision of every stitch."
|
|
metrics={[
|
|
{ value: "25+", title: "Years of Excellence" },
|
|
{ value: "10K+", title: "Satisfied Clients Worldwide" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/expert-suitmaker-tailoring-studio_482257-101867.jpg"
|
|
imageAlt="Luxury fashion atelier"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySeven
|
|
title="What Makes Us Different"
|
|
description="Discover the distinctive features that set our fashion brand apart from the rest"
|
|
tag="Features"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "1", title: "Premium Materials", description: "We source only the finest fabrics and materials from master artisans and sustainable suppliers around the globe, ensuring every piece meets our exacting standards.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-velvet-texture_23-2149305941.jpg?_wi=1", imageAlt: "Premium fabric textures"
|
|
},
|
|
{
|
|
id: "2", title: "Impeccable Craftsmanship", description: "Our skilled artisans bring decades of expertise to every garment, with meticulous attention to construction, fit, and finish that defines luxury fashion.", imageSrc: "http://img.b2bpic.net/free-photo/fashion-designer-is-cutting-off-fabric-with-scissors-he-is-wearing-denim-closeup-photo-shoot_613910-21806.jpg?_wi=1", imageAlt: "Expert craftsmanship detail"
|
|
},
|
|
{
|
|
id: "3", title: "Timeless Design", description: "Our collection transcends seasonal trends, featuring sophisticated silhouettes and elegant details designed to remain relevant and cherished for years to come.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-hands-using-smartphone_285396-6600.jpg", imageAlt: "Designer accessories collection"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
title="Featured Collections"
|
|
description="Experience our most coveted pieces, each selected for its timeless elegance and exceptional quality"
|
|
tag="Shop Now"
|
|
tagIcon={ShoppingBag}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", name: "Silk Evening Gown", price: "$1,450", imageSrc: "http://img.b2bpic.net/free-photo/mid-section-woman-white-dress-with-clutch_23-2147936533.jpg", imageAlt: "Luxury silk evening gown"
|
|
},
|
|
{
|
|
id: "2", name: "Italian Leather Heels", price: "$890", imageSrc: "http://img.b2bpic.net/free-photo/elegant-wedding-shoes_1157-18540.jpg", imageAlt: "Designer Italian leather heels"
|
|
},
|
|
{
|
|
id: "3", name: "Tailored Wool Blazer", price: "$1,200", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-choosing-hat-shop_1303-19836.jpg", imageAlt: "Premium tailored wool blazer"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardSixteen
|
|
title="Loved by Fashion Connoisseurs"
|
|
description="Join thousands of discerning clients who trust us with their most important fashion moments"
|
|
tag="Client Stories"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Alexandra Sterling", role: "Fashion Editor", company: "Vogue Magazine", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg", imageAlt: "Alexandra Sterling"
|
|
},
|
|
{
|
|
id: "2", name: "Isabella Chen", role: "CEO", company: "Luxury Boutiques International", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/studio-shot-sensual-woman-pink-suit_197531-16807.jpg", imageAlt: "Isabella Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Margot Laurent", role: "Style Director", company: "Harper's Bazaar", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/joyful-lady-jacket-white-pants-smiling-outside-lovely-woman-with-bright-lips-eyeglasses-outdoors_197531-19337.jpg", imageAlt: "Margot Laurent"
|
|
},
|
|
{
|
|
id: "4", name: "Sophie Richardson", role: "Luxury Collector", company: "Private Client", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg", imageAlt: "Sophie Richardson"
|
|
}
|
|
]}
|
|
kpiItems={[
|
|
{ value: "98%", label: "Client Satisfaction" },
|
|
{ value: "5,000+", label: "Pieces Sold Annually" },
|
|
{ value: "50+", label: "Fashion Awards Won" }
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="blog" data-section="blog">
|
|
<BlogCardOne
|
|
title="Fashion Insights & Trends"
|
|
description="Stay informed with our curated collection of fashion tips, styling guides, and industry insights"
|
|
tag="Journal"
|
|
tagIcon={BookOpen}
|
|
tagAnimation="slide-up"
|
|
blogs={[
|
|
{
|
|
id: "1", category: "Styling Tips", title: "The Art of Layering: Master the Essentials", excerpt: "Discover how to create sophisticated layered looks that transition seamlessly from day to evening, using quality pieces as your foundation.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-velvet-texture_23-2149305941.jpg?_wi=2", imageAlt: "Layering guide", authorName: "Charlotte Dubois", authorAvatar: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg", date: "15 Jan 2025"
|
|
},
|
|
{
|
|
id: "2", category: "Trend Report", title: "Spring Couture: What's Emerging for 2025", excerpt: "Explore the upcoming spring collections and learn how to incorporate next season's key trends into your existing wardrobe.", imageSrc: "http://img.b2bpic.net/free-psd/elegant-young-woman-long-pink-satin-evening-gown_9975-132967.jpg?_wi=2", imageAlt: "Spring trends", authorName: "Marcus Whitmore", authorAvatar: "http://img.b2bpic.net/free-photo/studio-shot-sensual-woman-pink-suit_197531-16807.jpg", date: "12 Jan 2025"
|
|
},
|
|
{
|
|
id: "3", category: "Care Guide", title: "Preserving Your Investment: Luxury Fabric Care", excerpt: "Learn professional techniques for maintaining and caring for your premium garments to ensure they remain pristine for years.", imageSrc: "http://img.b2bpic.net/free-photo/fashion-designer-is-cutting-off-fabric-with-scissors-he-is-wearing-denim-closeup-photo-shoot_613910-21806.jpg?_wi=2", imageAlt: "Fabric care", authorName: "Vivienne Stone", authorAvatar: "http://img.b2bpic.net/free-photo/joyful-lady-jacket-white-pants-smiling-outside-lovely-woman-with-bright-lips-eyeglasses-outdoors_197531-19337.jpg", date: "8 Jan 2025"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Stay Connected"
|
|
title="Join Our Exclusive Circle"
|
|
description="Subscribe to our newsletter for early access to new collections, exclusive invitations, and insider fashion wisdom from our creative team."
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/two-young-beautiful-girls-making-shopping-mall_176420-5781.jpg"
|
|
imageAlt="Luxury boutique experience"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="your@email.com"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your privacy. Unsubscribe anytime. Join 10,000+ fashion enthusiasts."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Élegance"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Featured", href: "#products" },
|
|
{ label: "Collections", href: "#features" },
|
|
{ label: "About Us", href: "#about" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Journal", href: "#blog" },
|
|
{ label: "Testimonials", href: "#testimonial" },
|
|
{ label: "Subscribe", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Pinterest", href: "https://pinterest.com" },
|
|
{ label: "Contact", href: "mailto:hello@elegance.com" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Shipping Info", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |