333 lines
22 KiB
TypeScript
333 lines
22 KiB
TypeScript
"use client";
|
|
|
|
import { Award, Eye, HelpCircle, Heart, Mail, Sparkles, Star, Zap } from "lucide-react";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
|
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
|
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
|
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="medium"
|
|
background="none"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Showcase", id: "product" },
|
|
{ name: "Join Waitlist", id: "contact" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
brandName="Infinite Accessory"
|
|
bottomLeftText="Early Access Exclusive"
|
|
bottomRightText="hello@infiniteaccessory.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
title="One Bracelet, Infinite Possibilities"
|
|
description="Style it your way—wrist, bag, or chain. See how our revolutionary accessory transforms your everyday look. Join the waitlist for exclusive early access."
|
|
tag="Revolutionary Design"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
buttons={[
|
|
{ text: "Reserve Your Spot", href: "#contact" },
|
|
{ text: "Explore Features", href: "#features" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
carouselItems={[
|
|
{
|
|
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-girl-wearing-accessories_23-2149645105.jpg?_wi=1", imageAlt: "Bracelet worn on wrist"
|
|
},
|
|
{
|
|
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-hands-using-smartphone_285396-6598.jpg?_wi=1", imageAlt: "Bracelet attached to bag"
|
|
},
|
|
{
|
|
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/girl-with-polka-doy-skirt_1162-14.jpg?_wi=1", imageAlt: "Bracelet styled as chain on apparel"
|
|
},
|
|
{
|
|
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-gold-chains-book_23-2149836446.jpg?_wi=1", imageAlt: "Close-up product detail of bracelet"
|
|
},
|
|
{
|
|
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/shot-happy-female-with-curly-hair-drinks-aromatic-coffee-sits-against-cafe-interior-being-good-mood-pretty-woman-with-hot-beverage_273609-3189.jpg?_wi=1", imageAlt: "Lifestyle styling with diverse individuals"
|
|
},
|
|
{
|
|
id: "6", imageSrc: "http://img.b2bpic.net/free-photo/man-using-mobile-phone-beach_273443-2338.jpg?_wi=1", imageAlt: "Urban professional with bracelet accessory"
|
|
}
|
|
]}
|
|
autoPlay={true}
|
|
autoPlayInterval={4000}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
tag="The Vision"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
title="Designed for Your Dynamic Lifestyle"
|
|
description="We believe accessories shouldn't force you to choose. Our multiuse bracelet seamlessly transitions from wrist to bag to apparel, adapting to every moment of your day. Engineered for versatility, crafted with premium materials, and designed by style-conscious innovators—this is the investment piece you've been waiting for."
|
|
metrics={[
|
|
{ value: "3x", title: "More styling options" },
|
|
{ value: "100%", title: "Sustainable materials" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/shot-happy-female-with-curly-hair-drinks-aromatic-coffee-sits-against-cafe-interior-being-good-mood-pretty-woman-with-hot-beverage_273609-3189.jpg?_wi=2"
|
|
imageAlt="Premium multiuse bracelet design"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardEight
|
|
title="Why Choose Infinite Accessory"
|
|
description="Discover what sets our bracelet apart in the world of multifunctional fashion"
|
|
tag="Key Features"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "True Versatility", description: "Wear it on your wrist, attach to your favorite bag, or style it as a unique chain on your apparel. Three ways to wear, unlimited self-expression.", imageSrc: "http://img.b2bpic.net/free-vector/technology-logo-template_23-2150529424.jpg?_wi=1", imageAlt: "Versatility icon"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Sustainable Design", description: "Crafted from 100% sustainable materials without compromising on quality or aesthetics. Invest in a piece that's good for you and the planet.", imageSrc: "http://img.b2bpic.net/free-vector/leaves-recycle-sign-line-flat_78370-10627.jpg?_wi=1", imageAlt: "Sustainability icon"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Premium Quality", description: "Engineered to last with rigorous testing. Every piece undergoes quality checks to ensure durability and timeless appeal for years to come.", imageSrc: "http://img.b2bpic.net/free-vector/verified-check-mark-circle-badge-set_78370-6079.jpg?_wi=1", imageAlt: "Quality icon"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Minimalist Aesthetic", description: "Clean lines and thoughtful design work with any style. Perfect for fashion-forward millennials and Gen Z who value both form and function.", imageSrc: "http://img.b2bpic.net/free-vector/fashion-template-design_23-2150867931.jpg?_wi=1", imageAlt: "Style icon"
|
|
}
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="product" data-section="product">
|
|
<ProductCardTwo
|
|
title="Product Mockups"
|
|
description="See our innovative bracelet in action across different styling scenarios"
|
|
tag="Visual Preview"
|
|
tagIcon={Eye}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="bento-grid"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", brand: "Infinite", name: "Wrist Bracelet Edition", price: "Coming Soon", rating: 5,
|
|
reviewCount: "Early Access", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-girl-wearing-accessories_23-2149645105.jpg?_wi=2", imageAlt: "Bracelet on wrist"
|
|
},
|
|
{
|
|
id: "2", brand: "Infinite", name: "Bag Attachment Edition", price: "Coming Soon", rating: 5,
|
|
reviewCount: "Early Access", imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-hands-using-smartphone_285396-6598.jpg?_wi=2", imageAlt: "Bracelet on bag"
|
|
},
|
|
{
|
|
id: "3", brand: "Infinite", name: "Apparel Chain Edition", price: "Coming Soon", rating: 5,
|
|
reviewCount: "Early Access", imageSrc: "http://img.b2bpic.net/free-photo/girl-with-polka-doy-skirt_1162-14.jpg?_wi=2", imageAlt: "Bracelet as chain"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="timeline" data-section="timeline">
|
|
<FeatureCardEight
|
|
title="Your Journey with Infinite Accessory"
|
|
description="From discovery to becoming an early adopter"
|
|
tag="How It Works"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Join the Waitlist", description: "Reserve your spot now and gain exclusive early access to our launch. Be among the first to own the bracelet that changes everything.", imageSrc: "http://img.b2bpic.net/free-vector/technology-logo-template_23-2150529424.jpg?_wi=2", imageAlt: "Waitlist icon"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Receive Insider Updates", description: "Get exclusive behind-the-scenes content, design evolution stories, and special offers available only to our early access community.", imageSrc: "http://img.b2bpic.net/free-vector/verified-check-mark-circle-badge-set_78370-6079.jpg?_wi=2", imageAlt: "Updates icon"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Launch with Priority Access", description: "Early adopters get first dibs on limited edition colorways and exclusive bundles. Secure yours before they're gone.", imageSrc: "http://img.b2bpic.net/free-vector/fashion-template-design_23-2150867931.jpg?_wi=2", imageAlt: "Priority icon"
|
|
}
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Early Testers Say"
|
|
description="Real feedback from fashion-forward innovators who've experienced our bracelet"
|
|
tag="Testimonials"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen, Fashion Influencer", date: "Date: 15 November 2024", title: "The accessory I didn't know I needed", quote: "I've styled this bracelet in so many ways—on my wrist for minimalist days, on my designer bag for evenings out, and even as a subtle chain accent. It's genuinely revolutionary and works with every outfit in my closet.", tag: "Fashion Creator", avatarSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", avatarAlt: "Sarah Chen", imageSrc: "http://img.b2bpic.net/free-photo/shot-happy-female-with-curly-hair-drinks-aromatic-coffee-sits-against-cafe-interior-being-good-mood-pretty-woman-with-hot-beverage_273609-3189.jpg?_wi=3", imageAlt: "Lifestyle styling"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Rodriguez, Urban Professional", date: "Date: 12 November 2024", title: "Perfect for my on-the-go lifestyle", quote: "As someone who travels constantly and values minimal luggage, this bracelet is a game-changer. One piece, three distinct looks. The quality is premium, and it feels like an investment piece I'll treasure for years.", tag: "Travel Enthusiast", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", avatarAlt: "Marcus Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/man-using-mobile-phone-beach_273443-2338.jpg?_wi=2", imageAlt: "Travel lifestyle"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Thompson, Sustainable Advocate", date: "Date: 10 November 2024", title: "Versatility meets sustainability", quote: "I'm passionate about sustainable fashion, and this bracelet embodies that perfectly. The eco-friendly materials don't compromise on aesthetics or durability. This is how fashion should be.", tag: "Eco-Conscious", avatarSrc: "http://img.b2bpic.net/free-photo/closeup-pretty-young-woman-with-long-hair-standing-against-isolated-background_662251-535.jpg", avatarAlt: "Emma Thompson", imageSrc: "http://img.b2bpic.net/free-vector/leaves-recycle-sign-line-flat_78370-10627.jpg?_wi=2", imageAlt: "Sustainability"
|
|
},
|
|
{
|
|
id: "4", name: "James Liu, Design Professional", date: "Date: 8 November 2024", title: "Innovation meets minimalist design", quote: "From a design perspective, the engineering is impressive. The attention to detail and functionality without sacrificing aesthetics is rare. This is the type of product that defines a generation.", tag: "Design Expert", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-man-street_641386-611.jpg", avatarAlt: "James Liu", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-gold-chains-book_23-2149836446.jpg?_wi=2", imageAlt: "Product detail"
|
|
},
|
|
{
|
|
id: "5", name: "Olivia Martinez, Gen Z Creator", date: "Date: 5 November 2024", title: "My new go-to styling staple", quote: "This bracelet is genuinely versatile—I've worn it five different ways this week alone. It's become my signature piece, and I love that it's an early access exclusive. Feeling like part of something special.", tag: "Content Creator", avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-young-businesswoman-smiling-camera_74855-3966.jpg", avatarAlt: "Olivia Martinez", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-girl-wearing-accessories_23-2149645105.jpg?_wi=3", imageAlt: "Wrist styling"
|
|
},
|
|
{
|
|
id: "6", name: "David Kim, Tech Founder", date: "Date: 2 November 2024", title: "The future of accessories", quote: "I appreciate innovation in any form. This bracelet represents a fresh approach to product design—solving a real problem (wardrobe optimization) with an elegant solution. Impressed and invested.", tag: "Tech Innovator", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-african-businessman-wearing-suit-headshot-vertical-portrait-with-team_1163-3924.jpg", avatarAlt: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/girl-with-polka-doy-skirt_1162-14.jpg?_wi=3", imageAlt: "Apparel styling"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialproof" data-section="socialproof">
|
|
<SocialProofOne
|
|
title="Featured & Recognized"
|
|
description="Trusted by leading fashion and lifestyle brands"
|
|
tag="Featured In"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Vogue Emerging", "TechCrunch Disrupt", "Fashion Week Daily", "Hypebeast", "Refinery29", "The Verge", "Wired Innovation", "Business Insider"
|
|
]}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-vector/flat-design-fashion-accessories-logo-set_23-2148888960.jpg", "http://img.b2bpic.net/free-vector/two-colours-logo-collection-minimal-style_23-2148385342.jpg", "http://img.b2bpic.net/free-vector/abstract-logotype-collection_23-2147552580.jpg", "http://img.b2bpic.net/free-vector/flat-fashion-accessories-logo-set_23-2148922521.jpg", "http://img.b2bpic.net/free-vector/flat-fashion-accessories-logo-set_23-2148922521.jpg", "http://img.b2bpic.net/free-vector/flower-star-logo-linear-outline-style-luxury-fashion-cosmetics-foundation-logotype_126523-2830.jpg", "http://img.b2bpic.net/free-vector/gradient-abstract-logo-collection_23-2148158364.jpg", "http://img.b2bpic.net/free-vector/abstract-logo-gradient-style_23-2148135214.jpg"
|
|
]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about our innovative bracelet"
|
|
tag="Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/top-view-gold-chain-wheat-still-life_23-2149836439.jpg"
|
|
imageAlt="Product detail mockup"
|
|
mediaAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
mediaPosition="right"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How do I wear the bracelet in three different ways?", content: "Our bracelet features a unique modular design. Wear it traditionally on your wrist for an everyday look, attach it to your favorite bag for a statement accessory, or style it as a subtle chain accent on your apparel. All three configurations use the same premium piece—no additional items needed."
|
|
},
|
|
{
|
|
id: "2", title: "What materials are used in the bracelet?", content: "We use 100% sustainably sourced materials that undergo rigorous quality testing. Our commitment to sustainability doesn't compromise durability or aesthetic appeal. Each piece is designed to last for years of everyday styling."
|
|
},
|
|
{
|
|
id: "3", title: "When will the bracelet be available for purchase?", content: "We're launching soon! Reserve your spot on the waitlist now to gain exclusive early access and special launch pricing. Waitlist members will receive updates on launch date, limited edition colorways, and exclusive bundles."
|
|
},
|
|
{
|
|
id: "4", title: "What is the early access program?", content: "Early access members get priority ordering, exclusive design previews, behind-the-scenes content, and special launch pricing. You'll also be among the first to receive your bracelet and exclusive limited edition variants."
|
|
},
|
|
{
|
|
id: "5", title: "Is this a unisex design?", content: "Absolutely! Our bracelet is designed for anyone who values versatile, minimalist style. The modular design works across different wrist sizes and styling preferences, making it truly for everyone."
|
|
},
|
|
{
|
|
id: "6", title: "How do I join the waitlist?", content: "Scroll to our email capture section or click 'Reserve Your Spot' to join the early access community. We'll send you exclusive updates, design stories, and notification when we launch. It takes just 30 seconds to secure your spot."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Join the Movement"
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
title="Reserve Your Spot Today"
|
|
description="Be among the first to own the bracelet that transforms how you think about accessories. Join thousands of fashion-forward early adopters waiting for something revolutionary."
|
|
buttons={[
|
|
{ text: "Join the Waitlist", href: "#email-signup" },
|
|
{ text: "Learn More", href: "#features" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Showcase", href: "#product" },
|
|
{ label: "Testimonials", href: "#testimonials" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Early Access", href: "#contact" },
|
|
{ label: "Careers", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Contact Us", href: "mailto:hello@infiniteaccessory.com" },
|
|
{ label: "Sustainability", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookies", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2025 Infinite Accessory. All rights reserved."
|
|
bottomRightText="Crafted with ♻️ for conscious creators"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|