297 lines
16 KiB
TypeScript
297 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import { Bell, Book, Calendar, Camera, CreditCard, Heart, Settings, ShoppingCart, Signal, Sparkles, User } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="aurora"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#hero"},
|
|
{
|
|
name: "Shop", id: "#products"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Blog", id: "#blog"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
brandName="Elegance Hub"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Unleash Your Style"
|
|
description="Discover the latest trends and timeless pieces that define your unique elegance. At Elegance Hub, fashion meets individuality."
|
|
tag="Elegance Hub"
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "Shop New Arrivals", href: "#products"},
|
|
{
|
|
text: "Explore Collections"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/luxury-rich-woman-dressed-elegant-stylish-blue-suit-walking-city-sunny-summer-day-holding-purse_285396-7894.jpg?_wi=1", imageAlt: "Stylish woman in elegant fashion attire"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/studio-with-props-photography_23-2148885676.jpg", imageAlt: "Fashion model on a runway"}
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="5/5 Stars from 1,000+ Reviews"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
title="Our Passion for Fashion"
|
|
description="Elegance Hub is more than just a brand; it's a celebration of self-expression through style. We curate collections that empower you to look and feel your best, with an emphasis on quality, comfort, and cutting-edge design."
|
|
bulletPoints={[
|
|
{
|
|
title: "Curated Collections", description: "Hand-picked pieces reflecting the latest global fashion trends."},
|
|
{
|
|
title: "Sustainable Practices", description: "Committed to ethical sourcing and eco-friendly production methods."},
|
|
{
|
|
title: "Exceptional Quality", description: "Garments crafted with premium fabrics and meticulous attention to detail."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-technical-sketch-representations-stylish-bespoke-sartorial-pieces-atelier-shop-studio-experienced-couturiers-coming-up-with-ideas-upcoming-luxury-clothing-collection_482257-64895.jpg"
|
|
imageAlt="Fashion designer working on new collection sketches"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Personalized Style Advisor", description: "Get recommendations tailored to your unique taste and preferences.", bentoComponent: "phone", statusIcon: Signal,
|
|
alertIcon: Bell,
|
|
alertTitle: "New Arrivals!", alertMessage: "Check out our latest collection designed just for you.", apps: [
|
|
{
|
|
name: "Shop", icon: ShoppingCart,
|
|
},
|
|
{
|
|
name: "Looks", icon: Camera,
|
|
},
|
|
{
|
|
name: "Stylist", icon: Sparkles,
|
|
},
|
|
{
|
|
name: "Wishlist", icon: Heart,
|
|
},
|
|
{
|
|
name: "Blog", icon: Book,
|
|
},
|
|
{
|
|
name: "Events", icon: Calendar,
|
|
},
|
|
{
|
|
name: "Account", icon: User,
|
|
},
|
|
{
|
|
name: "Settings", icon: Settings,
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "Interactive Lookbooks", description: "Explore curated outfits and styling tips in stunning detail.", bentoComponent: "media-stack", items: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/luxury-rich-woman-dressed-elegant-stylish-blue-suit-walking-city-sunny-summer-day-holding-purse_285396-7894.jpg?_wi=2", imageAlt: "Fashionista browsing online on a phone"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-psd/gradient-geometric-shapes-template_23-2151858243.jpg", imageAlt: "Open fashion magazine layout"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-repair-sale-shop_23-2150746321.jpg", imageAlt: "Sustainable clothing materials"}
|
|
]
|
|
},
|
|
{
|
|
title: "Seamless Online Experience", description: "Shop with ease and confidence, knowing your perfect fit is just a click away.", bentoComponent: "reveal-icon", icon: CreditCard
|
|
}
|
|
]}
|
|
title="Experience Elevated Shopping"
|
|
description="We blend innovative technology with a deep understanding of fashion to bring you an unparalleled experience, from discovery to doorstep."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "p1", name: "The Serene Maxi Dress", price: "$120.00", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-fancy-dress-walking-down-street-fashion-beauty-makeup-evening-dress-smiling-girl-posing-model-luxury-wearing-accessories-blonde-volume-hair-lipstick-eyes-perfect_343629-193.jpg", imageAlt: "Elegant black maxi dress"},
|
|
{
|
|
id: "p2", name: "Urban Chic Denim Jacket", price: "$85.00", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-front-ship_23-2147724827.jpg", imageAlt: "Trendy denim jacket"},
|
|
{
|
|
id: "p3", name: "Bohemian Rhapsody Gown", price: "$150.00", imageSrc: "http://img.b2bpic.net/free-photo/pride-flag-with-colorful-chenille-stems_23-2148147715.jpg", imageAlt: "Floral print maxi dress"},
|
|
{
|
|
id: "p4", name: "The Executive Blazer", price: "$180.00", imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-man-dressed-elegant-beige-checkered-suit_158538-4367.jpg", imageAlt: "Men's classic suit blazer"},
|
|
{
|
|
id: "p5", name: "Cozy Autumn Knitwear", price: "$70.00", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-with-long-blonde-hair-fluffy-jacket_23-2149020068.jpg", imageAlt: "Oversized knit sweater"},
|
|
{
|
|
id: "p6", name: "Timeless Leather Tote", price: "$200.00", imageSrc: "http://img.b2bpic.net/free-photo/close-up-accessories-details-stylish-woman-walking-city-warm-fur-coat-holding-black-leather-bag-winter-season_285396-4714.jpg", imageAlt: "Chic leather handbag"}
|
|
]}
|
|
title="Our Exclusive Collections"
|
|
description="Step into a world of curated fashion. Each piece is selected for its unique style, quality, and ability to elevate your wardrobe."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "Sarah J.", handle: "@sarah_style", testimonial: "Elegance Hub has completely transformed my wardrobe! The quality is unmatched and their unique pieces always get me compliments.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/romantic-slim-girl-with-happy-face-expression-playing-with-yellow-dress-enthusiastic-caucasian-lady-with-blonde-hair-dancing-studio_197531-26271.jpg", imageAlt: "Sarah J."},
|
|
{
|
|
id: "t2", name: "Michael Chen", handle: "@michaelfashion", testimonial: "Finally, a brand that understands modern menswear. Their collection is sharp, comfortable, and perfect for any occasion.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-showing-cloakroom_171337-19310.jpg", imageAlt: "Michael Chen"},
|
|
{
|
|
id: "t3", name: "Emily R.", handle: "@emily.chic", testimonial: "I always find something special here. The customer service is fantastic, and shipping is incredibly fast!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/fashionable-white-woman-with-beautiful-smile-making-selfie-confident-pose_197531-7163.jpg", imageAlt: "Emily R."},
|
|
{
|
|
id: "t4", name: "David K.", handle: "@david_dapper", testimonial: "Their commitment to sustainable fashion is what truly won me over. Great style, great values.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-standing-clean-urban-space_23-2149015675.jpg", imageAlt: "David K."},
|
|
{
|
|
id: "t5", name: "Olivia M.", handle: "@olivia.vogue", testimonial: "The interactive lookbooks are a game-changer! It's like having a personal stylist at my fingertips. Absolutely love it!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-women-having-fun-summertime_23-2149479126.jpg", imageAlt: "Olivia M."},
|
|
{
|
|
id: "t6", name: "Sophia L.", handle: "@sophia_class", testimonial: "The elegance and attention to detail in every piece are remarkable. Elegance Hub is my new go-to for sophisticated fashion.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-rick-woman-posing-indoors_52683-94809.jpg", imageAlt: "Sophia L."}
|
|
]}
|
|
showRating={true}
|
|
title="Hear From Our Happy Customers"
|
|
description="Our community of fashion enthusiasts shares their love for Elegance Hub and how we've helped them define their personal style."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"Vogue", "Harper's Bazaar", "ELLE", "GQ", "Fashion Week", "London Fashion", "Milan Style"]}
|
|
title="As Seen In"
|
|
description="Elegance Hub has been featured and celebrated by leading fashion publications worldwide."
|
|
/>
|
|
</div>
|
|
|
|
<div id="blog" data-section="blog">
|
|
<BlogCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
title="Fashion Insights & Inspiration"
|
|
description="Stay ahead of the curve with our expert articles on trends, styling tips, and the stories behind our collections."
|
|
blogs={[
|
|
{
|
|
id: "b1", category: "Trends", title: "Spring/Summer 2024: The Must-Have Colors", excerpt: "Dive into the vibrant palette defining the upcoming season's fashion. From pastel dreams to bold statements, discover how to incorporate these hues into your wardrobe.", imageSrc: "http://img.b2bpic.net/free-photo/woman-buying-stuff-decoration-store_1303-24632.jpg", imageAlt: "Woman in colorful spring fashion outfit", authorName: "Ava Thorne", authorAvatar: "asset://avatar-1", date: "July 20, 2024"},
|
|
{
|
|
id: "b2", category: "Sustainability", title: "The Rise of Ethical Fashion: Shop Consciously", excerpt: "Learn about the growing movement towards sustainable and ethical fashion. Discover brands making a difference and how your choices can impact the planet.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-gardener-checking-her-tablet_23-2148851414.jpg", imageAlt: "Organic cotton fabrics for sustainable fashion", authorName: "Liam Green", authorAvatar: "asset://avatar-2", date: "July 15, 2024"},
|
|
{
|
|
id: "b3", category: "Styling", title: "Accessorize Like a Pro: Elevate Any Outfit", excerpt: "Accessories are key to transforming your look. Our guide reveals expert tips on choosing and styling jewelry, bags, and shoes to complete your ensemble.", imageSrc: "http://img.b2bpic.net/free-photo/accessories-stylish-woman-walking-city-street-summer-fashion-style-dress-sneakers-grey-purse-handbag_285396-8513.jpg", imageAlt: "Various fashion accessories like jewelry and handbags", authorName: "Chloe Style", authorAvatar: "asset://avatar-3", date: "July 10, 2024"}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Get in Touch"
|
|
title="Questions? We're Here to Help"
|
|
description="Have inquiries about our collections, sizing, or an order? Reach out to our dedicated support team, and we'll be happy to assist you."
|
|
inputPlaceholder="Your email address"
|
|
buttonText="Send Message"
|
|
termsText="By submitting your message, you agree to our Privacy Policy."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/smiling-tanned-woman-with-blonde-hair-posing-street-background_197531-20713.jpg"
|
|
imageAlt="Stylish fashion storefront at night"
|
|
logoText="Elegance Hub"
|
|
columns={[
|
|
{
|
|
title: "Shop", items: [
|
|
{
|
|
label: "New Arrivals", href: "#products"},
|
|
{
|
|
label: "Dresses", href: "#"},
|
|
{
|
|
label: "Outerwear", href: "#"},
|
|
{
|
|
label: "Accessories", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Our Story", href: "#"},
|
|
{
|
|
label: "Careers", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{
|
|
label: "Contact Us", href: "#contact"},
|
|
{
|
|
label: "FAQs", href: "#"},
|
|
{
|
|
label: "Shipping", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 Elegance Hub. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|