221 lines
14 KiB
TypeScript
221 lines
14 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
||
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
|
||
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
||
import ContactText from "@/components/sections/contact/ContactText";
|
||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||
import { Sparkles, Award, CheckCircle, Star, Twitter, Linkedin, Instagram } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="icon-arrow"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="rounded"
|
||
contentWidth="mediumSmall"
|
||
sizing="largeSmallSizeMediumTitles"
|
||
background="circleGradient"
|
||
cardStyle="gradient-radial"
|
||
primaryButtonStyle="primary-glow"
|
||
secondaryButtonStyle="glass"
|
||
headingFontWeight="bold"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingOverlay
|
||
brandName="BeltCo"
|
||
navItems={[
|
||
{ name: "Home", id: "hero" },
|
||
{ name: "Products", id: "products" },
|
||
{ name: "About", id: "about" },
|
||
{ name: "Features", id: "features" },
|
||
{ name: "Testimonials", id: "testimonials" }
|
||
]}
|
||
button={{ text: "Shop Now", href: "#products" }}
|
||
className="fixed top-4 right-4 z-50"
|
||
buttonClassName="bg-gradient-to-r from-orange-400 to-orange-600 hover:shadow-lg transition-shadow"
|
||
buttonTextClassName="font-semibold text-white"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardGallery
|
||
title="Premium Belts for Every Style"
|
||
description="Discover our exclusive collection of handcrafted leather belts designed for the discerning gentleman. Quality craftsmanship meets contemporary fashion."
|
||
tag="New Collection"
|
||
tagIcon={Sparkles}
|
||
tagAnimation="slide-up"
|
||
background={{ variant: "animated-grid" }}
|
||
mediaItems={[
|
||
{ imageSrc: "http://img.b2bpic.net/free-photo/hipster-style-bearded-man_158595-708.jpg?_wi=1", imageAlt: "Premium leather belt showcase" },
|
||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-felt-jewelry-display_23-2150329659.jpg", imageAlt: "Black leather belt with metallic buckle" },
|
||
{ imageSrc: "http://img.b2bpic.net/free-photo/color-zippers-arrangement-high-angle_23-2149345119.jpg", imageAlt: "Colorful belt collection display" },
|
||
{ imageSrc: "http://img.b2bpic.net/free-photo/man-studio-creates-leather-ware_1157-33205.jpg?_wi=1", imageAlt: "Braided premium leather belt" },
|
||
{ imageSrc: "http://img.b2bpic.net/free-photo/hipster-style-bearded-man_158595-708.jpg?_wi=2", imageAlt: "Classic belt design detail" }
|
||
]}
|
||
mediaAnimation="slide-up"
|
||
buttons={[
|
||
{ text: "Shop Collection", href: "#products" },
|
||
{ text: "Learn More", href: "#about" }
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
className="relative overflow-hidden"
|
||
containerClassName="flex flex-col items-center justify-center"
|
||
textBoxClassName="text-center max-w-2xl"
|
||
titleClassName="text-5xl md:text-6xl font-bold mb-4"
|
||
descriptionClassName="text-lg md:text-xl text-foreground/80 mb-8"
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<InlineImageSplitTextAbout
|
||
heading={[
|
||
{ type: "text", content: "Crafted Excellence Since 1995" },
|
||
{ type: "text", content: " – Where Quality Meets Style" }
|
||
]}
|
||
useInvertedBackground={false}
|
||
buttons={[
|
||
{ text: "Our Story", href: "#about" },
|
||
{ text: "Contact Us", href: "#contact" }
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
className="py-20"
|
||
containerClassName="max-w-5xl mx-auto"
|
||
headingClassName="text-4xl md:text-5xl font-bold text-foreground mb-6 flex flex-wrap items-center gap-3"
|
||
buttonContainerClassName="flex gap-4 flex-wrap mt-8"
|
||
/>
|
||
</div>
|
||
|
||
<div id="products" data-section="products">
|
||
<ProductCardFour
|
||
products={[
|
||
{
|
||
id: "classic-black", name: "Classic Black Leather Belt", price: "$89.00", variant: "Black 5 Sizes", imageSrc: "http://img.b2bpic.net/free-photo/side-view-people-practicing-tai-chi_23-2149960107.jpg?_wi=1", imageAlt: "Classic black leather belt", isFavorited: false
|
||
},
|
||
{
|
||
id: "brown-heritage", name: "Heritage Brown Leather Belt", price: "$99.00", variant: "Brown 5 Sizes", imageSrc: "http://img.b2bpic.net/free-photo/top-view-accessoires-travel-with-man-clothing-concept-shirt-jean-mobile-phone-wooden-background-watch-sunglasses-shoes-wood-table_1921-82.jpg?_wi=1", imageAlt: "Heritage brown leather belt", isFavorited: false
|
||
},
|
||
{
|
||
id: "cognac-premium", name: "Premium Cognac Leather Belt", price: "$109.00", variant: "Cognac 5 Sizes", imageSrc: "http://img.b2bpic.net/free-photo/woman-s-leg-shoe-near-disco-ball-boots_23-2147972055.jpg?_wi=1", imageAlt: "Premium cognac leather belt", isFavorited: false
|
||
}
|
||
]}
|
||
title="Featured Belt Collection"
|
||
description="Explore our handpicked selection of premium leather belts. Each piece is carefully selected for quality, durability, and timeless style."
|
||
tag="Best Sellers"
|
||
tagIcon={Award}
|
||
tagAnimation="slide-up"
|
||
gridVariant="uniform-all-items-equal"
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
buttons={[
|
||
{ text: "View All Products", href: "#products" }
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
containerClassName="py-20"
|
||
/>
|
||
</div>
|
||
|
||
<div id="features" data-section="features">
|
||
<FeatureCardNine
|
||
features={[
|
||
{
|
||
id: 1,
|
||
title: "100% Genuine Leather", description: "Each belt is crafted from premium, full-grain leather sourced from the finest tanneries worldwide.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/side-view-people-practicing-tai-chi_23-2149960107.jpg?_wi=2" },
|
||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/top-view-accessoires-travel-with-man-clothing-concept-shirt-jean-mobile-phone-wooden-background-watch-sunglasses-shoes-wood-table_1921-82.jpg?_wi=2" }
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "Lifetime Warranty", description: "We stand behind our craftsmanship with a comprehensive lifetime warranty on all our belts.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/woman-s-leg-shoe-near-disco-ball-boots_23-2147972055.jpg?_wi=2" },
|
||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/man-studio-creates-leather-ware_1157-33205.jpg?_wi=2" }
|
||
}
|
||
]}
|
||
showStepNumbers={true}
|
||
title="Why Choose Our Belts"
|
||
description="We combine traditional craftsmanship with modern design to create belts that last a lifetime."
|
||
tag="Premium Quality"
|
||
tagIcon={CheckCircle}
|
||
tagAnimation="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
animationType="slide-up"
|
||
buttons={[
|
||
{ text: "Explore Features", href: "#features" }
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
containerClassName="py-20"
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardFive
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Michael Johnson, CEO", date: "Date: 15 January 2025", title: "Exceptional Quality and Style", quote: "These belts are absolutely fantastic. I've been wearing my black belt for over two years and it still looks brand new. The craftsmanship is outstanding and I've received countless compliments.", tag: "Verified Purchase", avatarSrc: "http://img.b2bpic.net/free-photo/young-male-holding-hands-pockets-white-shirt-jacket-looking-elegant-front-view_176474-99655.jpg", imageSrc: "http://img.b2bpic.net/free-photo/side-view-people-practicing-tai-chi_23-2149960107.jpg?_wi=3"
|
||
},
|
||
{
|
||
id: "2", name: "Sarah Mitchell, Designer", date: "Date: 12 January 2025", title: "Timeless Investment", quote: "I purchased three belts as gifts for colleagues. They were all thrilled with the quality. These are the kind of belts that only get better with age. Worth every penny!", tag: "Verified Purchase", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-confident-businesswoman-suit-cross-arms-chest-looking-like-real-professional-smili_1258-122403.jpg", imageSrc: "http://img.b2bpic.net/free-photo/top-view-accessoires-travel-with-man-clothing-concept-shirt-jean-mobile-phone-wooden-background-watch-sunglasses-shoes-wood-table_1921-82.jpg?_wi=3"
|
||
},
|
||
{
|
||
id: "3", name: "David Chen, Entrepreneur", date: "Date: 10 January 2025", title: "Perfect for Business and Casual", quote: "The versatility of these belts is amazing. I wear my cognac belt with everything from jeans to suits. The patina is developing beautifully and adds character.", tag: "Verified Purchase", avatarSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3830.jpg", imageSrc: "http://img.b2bpic.net/free-photo/woman-s-leg-shoe-near-disco-ball-boots_23-2147972055.jpg?_wi=3"
|
||
},
|
||
{
|
||
id: "4", name: "Emma Rodriguez, Fashion Editor", date: "Date: 8 January 2025", title: "A Must-Have Accessory", quote: "I feature these belts in my blog regularly. My readers love the minimalist design combined with premium materials. This brand truly understands quality.", tag: "Verified Purchase", avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-lilac-shirt-white-background-glasses-vision-cheerful-positive-good-mood_343596-8162.jpg", imageSrc: "http://img.b2bpic.net/free-photo/hipster-style-bearded-man_158595-708.jpg?_wi=3"
|
||
},
|
||
{
|
||
id: "5", name: "James Wilson, Executive", date: "Date: 5 January 2025", title: "Premium at Reasonable Prices", quote: "Compared to other luxury belt brands, these offer incredible value. I've recommended them to all my friends in the corporate world. Everyone is impressed.", tag: "Verified Purchase", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-black-jacket_613910-2534.jpg", imageSrc: "http://img.b2bpic.net/free-photo/side-view-people-practicing-tai-chi_23-2149960107.jpg?_wi=4"
|
||
},
|
||
{
|
||
id: "6", name: "Laura Thompson, Marketing Director", date: "Date: 2 January 2025", title: "Exceptional Customer Service", quote: "Not only is the product amazing, but the customer service is top-notch. They helped me find the perfect size and the entire experience was seamless.", tag: "Verified Purchase", avatarSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-smiling-posing-purple-wall_176420-2851.jpg", imageSrc: "http://img.b2bpic.net/free-photo/top-view-accessoires-travel-with-man-clothing-concept-shirt-jean-mobile-phone-wooden-background-watch-sunglasses-shoes-wood-table_1921-82.jpg?_wi=4"
|
||
}
|
||
]}
|
||
title="What Our Customers Say"
|
||
description="Hear from satisfied customers who have made our belts part of their daily wardrobe."
|
||
tag="Customer Reviews"
|
||
tagIcon={Star}
|
||
tagAnimation="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
buttons={[
|
||
{ text: "Read More Reviews", href: "#testimonials" }
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
containerClassName="py-20"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactText
|
||
text="Ready to elevate your style? Discover the perfect belt that complements your wardrobe and lasts a lifetime."
|
||
animationType="entrance-slide"
|
||
buttons={[
|
||
{ text: "Shop Now", href: "#products" },
|
||
{ text: "Get Sizing Help", href: "#contact" }
|
||
]}
|
||
background={{ variant: "gradient-bars" }}
|
||
useInvertedBackground={false}
|
||
className="py-20"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterCard
|
||
logoText="BeltCo"
|
||
copyrightText="© 2025 BeltCo. All rights reserved. Crafted with pride."
|
||
socialLinks={[
|
||
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Follow us on Twitter" },
|
||
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "Connect on LinkedIn" },
|
||
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Follow us on Instagram" }
|
||
]}
|
||
className="py-20 bg-gradient-to-br from-background to-card"
|
||
containerClassName="max-w-4xl mx-auto"
|
||
copyrightTextClassName="text-sm text-foreground/60"
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
} |