251 lines
14 KiB
TypeScript
251 lines
14 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import { Trophy, Users, Award, Zap, Star, Heart, ThumbsUp } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="ACCESSORY"
|
|
navItems={[
|
|
{ name: "Shop All", id: "products" },
|
|
{ name: "Leather Goods", id: "leather" },
|
|
{ name: "Watches", id: "watches" },
|
|
{ name: "Grooming", id: "grooming" },
|
|
{ name: "About Us", id: "about" },
|
|
]}
|
|
button={{ text: "Shop Now", href: "#products" }}
|
|
className="fixed top-6 left-1/2 transform -translate-x-1/2 z-50"
|
|
buttonClassName="bg-primary-cta text-primary-cta-text hover:opacity-90 transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="ACCESSORY"
|
|
description="Discover premium men's accessories crafted for the discerning gentleman. From luxury leather goods to precision timepieces, elevate your style with our curated collection of timeless pieces."
|
|
buttons={[
|
|
{ text: "Shop Collection", href: "#products" },
|
|
{ text: "View New Arrivals", href: "#featured" },
|
|
]}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/top-view-male-self-care-items_23-2150347081.jpg"
|
|
imageAlt="Premium luxury men's accessories collection"
|
|
frameStyle="card"
|
|
mediaAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
className="py-20"
|
|
containerClassName="space-y-8"
|
|
logoClassName="text-6xl md:text-8xl font-extrabold tracking-tight"
|
|
descriptionClassName="text-lg md:text-2xl max-w-2xl mx-auto md:text-right"
|
|
buttonContainerClassName="flex flex-col md:flex-row gap-4 justify-center md:justify-end"
|
|
mediaWrapperClassName="mt-12 rounded-xl overflow-hidden shadow-lg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="featured" data-section="featured">
|
|
<ProductCardThree
|
|
title="Featured Products"
|
|
description="Explore our handpicked selection of premium men's accessories designed for quality and sophistication."
|
|
tag="Best Sellers"
|
|
tagIcon={Star}
|
|
products={[
|
|
{
|
|
id: "1", name: "Premium Leather Messenger Bag", price: "$349.00", imageSrc: "http://img.b2bpic.net/free-photo/handsome-stylish-bearded-man-walking-city-street-with-leather-travel-bag-wearing-sweatshirt-sunglasses-urban-style-trend-sunny-day-confident-smiling_285396-4561.jpg", imageAlt: "Premium leather messenger bag", initialQuantity: 1,
|
|
isFavorited: false,
|
|
},
|
|
{
|
|
id: "2", name: "Luxury Automatic Timepiece", price: "$1,299.00", imageSrc: "http://img.b2bpic.net/free-photo/close-up-clock-with-time-change_23-2149241165.jpg", imageAlt: "Luxury automatic watch", initialQuantity: 1,
|
|
isFavorited: false,
|
|
},
|
|
{
|
|
id: "3", name: "Italian Leather Belt", price: "$129.00", imageSrc: "http://img.b2bpic.net/free-photo/low-section-view-businessman-holding-shoulder-bag_23-2147876751.jpg", imageAlt: "Italian leather belt", initialQuantity: 1,
|
|
isFavorited: false,
|
|
},
|
|
{
|
|
id: "4", name: "Premium Grooming Kit", price: "$199.00", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-belarus-person-city_23-2149372903.jpg", imageAlt: "Premium grooming kit", initialQuantity: 1,
|
|
isFavorited: false,
|
|
},
|
|
{
|
|
id: "5", name: "Classic Metal Frame Sunglasses", price: "$249.00", imageSrc: "http://img.b2bpic.net/free-photo/fathers-day-composition-with-hipster-concept_23-2147790987.jpg", imageAlt: "Classic sunglasses", initialQuantity: 1,
|
|
isFavorited: false,
|
|
},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
containerClassName="py-20"
|
|
textBoxDescriptionClassName="text-gray-600 text-base"
|
|
cardNameClassName="font-semibold text-lg truncate"
|
|
quantityControlsClassName="flex items-center gap-3 mt-4"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="Crafted for the Modern Gentleman"
|
|
description="We believe every man deserves access to exceptional quality accessories that reflect his personality and values. Our curated selection features timeless pieces from world-renowned designers, meticulously chosen for their superior craftsmanship, durability, and aesthetic appeal. Whether you're looking to invest in a luxury timepiece, upgrade your everyday carry with premium leather goods, or refine your grooming routine, we have the perfect accessory to elevate your lifestyle."
|
|
tag="Our Story"
|
|
tagIcon={Heart}
|
|
buttons={[{ text: "Learn More", href: "#contact" }]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/top-view-male-self-care-items_23-2150347081.jpg"
|
|
imageAlt="Our luxury accessory collection"
|
|
useInvertedBackground={true}
|
|
mediaAnimation="opacity"
|
|
buttonAnimation="opacity"
|
|
containerClassName="py-20"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
title="Why Choose Us"
|
|
description="Discover the statistics that make us the premier destination for men's luxury accessories."
|
|
metrics={[
|
|
{ id: "1", icon: Trophy, title: "Premium Brands", value: "50+" },
|
|
{ id: "2", icon: Users, title: "Satisfied Customers", value: "25K+" },
|
|
{ id: "3", icon: Award, title: "Years of Excellence", value: "15+" },
|
|
{ id: "4", icon: Zap, title: "Products in Stock", value: "1000+" },
|
|
]}
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
containerClassName="py-20"
|
|
uniformGridCustomHeightClasses="min-h-80 md:min-h-96"
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialProof" data-section="socialProof">
|
|
<SocialProofOne
|
|
title="Trusted by Industry Leaders"
|
|
description="Our accessories are worn and recommended by prestigious brands worldwide."
|
|
tag="Featured In"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={["Rolex", "Louis Vuitton", "Gucci", "Prada", "Omega", "Hermès", "Cartier", "Burberry"]}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-photo/close-up-man-looking-his-watch_23-2148448847.jpg", "http://img.b2bpic.net/free-vector/luxury-golden-logo_1017-2159.jpg", "http://img.b2bpic.net/free-vector/modern-golden-logo-design_1035-8681.jpg", "http://img.b2bpic.net/free-vector/golden-elegant-logo-template-with-ornaments_23-2148246613.jpg", "http://img.b2bpic.net/free-vector/logos-collection-with-vintage-luxury-style_23-2147842744.jpg", "http://img.b2bpic.net/free-vector/flat-design-fashion-accessories-logo-collection_23-2148875176.jpg", "http://img.b2bpic.net/free-vector/luxury-retro-logo-collection_23-2148359165.jpg", "http://img.b2bpic.net/free-vector/variety-ornamental-fashion-badges_23-2147522262.jpg"]}
|
|
speed={50}
|
|
showCard={true}
|
|
containerClassName="py-20"
|
|
contentClassName="mt-12"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "David Martinez", imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1677.jpg", imageAlt: "David Martinez"},
|
|
{
|
|
id: "2", name: "James Peterson", imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-man-wearing-leaning-against-rusty-colored-background_150588-67.jpg", imageAlt: "James Peterson"},
|
|
{
|
|
id: "3", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-businessman_23-2147899818.jpg", imageAlt: "Michael Chen"},
|
|
{
|
|
id: "4", name: "Alexander Thompson", imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-executive_1098-2482.jpg", imageAlt: "Alexander Thompson"},
|
|
]}
|
|
cardTitle="Over 25,000 satisfied customers trust ACCESSORY for their premium accessory needs"
|
|
cardTag="Customers Love Us"
|
|
cardTagIcon={ThumbsUp}
|
|
cardAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
containerClassName="py-20"
|
|
cardClassName="bg-gradient-to-br from-primary-cta to-accent/20 rounded-2xl p-8 md:p-12 shadow-lg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our products, shipping, and policies."
|
|
tag="Help Center"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What is your return policy?", content: "We offer a 30-day money-back guarantee on all products. If you're not completely satisfied with your purchase, simply return it in its original condition with all packaging and documentation."},
|
|
{
|
|
id: "2", title: "Do you offer international shipping?", content: "Yes, we ship to over 50 countries worldwide. International orders typically arrive within 10-15 business days. All customs and import duties are the responsibility of the customer."},
|
|
{
|
|
id: "3", title: "Are your products authentic?", content: "Absolutely. We only work with authorized distributors and directly source from luxury brands. Every product comes with certificates of authenticity and original packaging."},
|
|
{
|
|
id: "4", title: "Do you offer warranty coverage?", content: "Yes. Most luxury watches and leather goods come with manufacturer warranties. We also offer extended warranty options at checkout for additional peace of mind."},
|
|
{
|
|
id: "5", title: "How do I care for my leather accessories?", content: "We provide detailed care guides with every leather product. Generally, use leather conditioner monthly, keep away from direct sunlight, and store in a cool, dry place. For specific items, refer to the included care instructions."},
|
|
{
|
|
id: "6", title: "Can I track my order?", content: "Yes, all orders include tracking information. You'll receive tracking updates via email and can monitor your shipment in real-time through our customer portal."},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
showCard={true}
|
|
containerClassName="py-20"
|
|
faqsContainerClassName="mt-12 max-w-2xl mx-auto space-y-4"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/top-view-male-self-care-items_23-2150347081.jpg"
|
|
imageAlt="Premium accessories footer"
|
|
columns={[
|
|
{
|
|
title: "Shop", items: [
|
|
{ label: "All Products", href: "#products" },
|
|
{ label: "Leather Goods", href: "#leather" },
|
|
{ label: "Watches", href: "#watches" },
|
|
{ label: "Grooming", href: "#grooming" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Blog", href: "#blog" },
|
|
{ label: "Careers", href: "#careers" },
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Shipping Info", href: "#shipping" },
|
|
{ label: "Returns", href: "#returns" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Support Center", href: "#support" },
|
|
],
|
|
},
|
|
]}
|
|
logoText="ACCESSORY"
|
|
copyrightText="© 2025 ACCESSORY. All rights reserved."
|
|
containerClassName="space-y-12"
|
|
mediaWrapperClassName="h-80 md:h-96 rounded-xl overflow-hidden"
|
|
columnsClassName="grid grid-cols-1 md:grid-cols-3 gap-12"
|
|
columnTitleClassName="font-extrabold text-lg mb-4"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|