222 lines
11 KiB
TypeScript
222 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
|
|
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
|
import AboutMetric from "@/components/sections/about/AboutMetric";
|
|
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Sparkles, ShoppingCart, Users, Zap, Award, Facebook, Twitter, Instagram, Linkedin } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="large"
|
|
background="circleGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="ShopHub"
|
|
navItems={[
|
|
{ name: "Products", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
{ name: "Cart", id: "cart" },
|
|
]}
|
|
button={{ text: "Shop Now", href: "products" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="Discover Premium Products That Transform Your Lifestyle"
|
|
description="Shop curated collections from trusted brands. Fast shipping, quality guaranteed, and customer-first service. Your perfect purchase is just a click away."
|
|
tag="Welcome to ShopHub"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="Trusted by 50,000+ Happy Customers"
|
|
background={{ variant: "plain" }}
|
|
buttons={[
|
|
{ text: "Start Shopping", href: "products" },
|
|
{ text: "Learn More", href: "about" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-cyber-monday-composition_23-2149055979.jpg", imageAlt: "Shopping cart with products"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/paying-purchases_1098-16889.jpg", imageAlt: "Customer enjoying shopping experience"
|
|
},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
title="Featured Products"
|
|
description="Explore our handpicked selection of premium items designed for modern living"
|
|
tag="Shop Now"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", name: "Premium Wireless Headphones", price: "$149.99", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-sandals-near-shopping-bags_23-2148238183.jpg", imageAlt: "Premium wireless headphones", initialQuantity: 1,
|
|
},
|
|
{
|
|
id: "2", name: "Smart Watch Pro Max", price: "$299.99", imageSrc: "http://img.b2bpic.net/free-photo/female-couch-holding-her-phone-mug-sitting-front-table-with-gadgets_181624-56360.jpg", imageAlt: "Smart watch with advanced features", initialQuantity: 1,
|
|
},
|
|
{
|
|
id: "3", name: "Luxury Travel Backpack", price: "$199.99", imageSrc: "http://img.b2bpic.net/free-photo/top-view-traveler-women-s-outfit-accessories_1357-91.jpg", imageAlt: "Premium travel backpack", initialQuantity: 1,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
title="ShopHub: Redefining Online Shopping with Quality, Speed, and Customer Care"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{ icon: ShoppingCart, label: "Products Sold", value: "500K+" },
|
|
{ icon: Users, label: "Active Customers", value: "50,000+" },
|
|
{ icon: Zap, label: "Average Delivery", value: "2-3 Days" },
|
|
{ icon: Award, label: "Customer Satisfaction", value: "98%" },
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSeven
|
|
title="Why Choose ShopHub"
|
|
description="Experience shopping like never before with our premium features and commitment to excellence"
|
|
tag="Our Advantages"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Lightning Fast Delivery", description: "Get your orders delivered within 2-3 business days with real-time tracking and priority handling", imageSrc: "http://img.b2bpic.net/free-photo/express-delivery-package-handover_23-2151994433.jpg", imageAlt: "Fast delivery service"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Premium Quality Guarantee", description: "All products are carefully curated and tested to ensure you receive only the best quality items", imageSrc: "http://img.b2bpic.net/free-vector/premium-quality-product-golden-label-design_1017-12393.jpg", imageAlt: "Quality assurance"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "24/7 Customer Support", description: "Our dedicated support team is always ready to help with any questions or concerns you may have", imageSrc: "http://img.b2bpic.net/free-photo/woman-living-with-disability-answering-client-call-customer-service-wheelchair-user-with-physical-health-condition-working-helpline-support-helpdesk-operator-with-chronic-pain_482257-47208.jpg", imageAlt: "Customer support team"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="ShopHub has completely transformed how I shop online. The quality is exceptional, delivery is incredibly fast, and the customer service team goes above and beyond. I've recommended it to all my friends!"
|
|
rating={5}
|
|
author="Sarah Mitchell, Fashion Enthusiast"
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg", alt: "Customer testimonial 1"
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Customer testimonial 2"
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/handsome-man-outdoors-portrait_158595-3552.jpg", alt: "Customer testimonial 3"
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Customer testimonial 4"
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg", alt: "Customer testimonial 5"
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg", alt: "Customer testimonial 6"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Industry Leaders"
|
|
description="Join thousands of businesses and individuals who trust ShopHub for their shopping needs"
|
|
tag="Partners & Affiliates"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
tagAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
names={["TechCorp", "RetailMax", "GlobalShop", "PremiumBrands", "InnovateCo", "EliteRetail", "VendorHub"]}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-vector/collection-flat-business-logo_23-2147557714.jpg", "http://img.b2bpic.net/free-vector/flat-minimal-technology-labels_23-2149083696.jpg", "http://img.b2bpic.net/free-vector/geometric-harmony-hills-private-school-logo-template_742173-18879.jpg", "http://img.b2bpic.net/free-vector/abstract-blue-logo-with-circle-middle_1043-241.jpg", "http://img.b2bpic.net/free-vector/flat-design-term-labels-set_23-2149725930.jpg", "http://img.b2bpic.net/free-vector/promotion-vintage-badges_23-2147509211.jpg", "http://img.b2bpic.net/free-photo/high-quality-brand-badge-banner-copy-space-concept_53876-13783.jpg"
|
|
]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to discover your next favorite product? Join our community of satisfied shoppers and start your journey with ShopHub today!"
|
|
animationType="entrance-slide"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Get Started", href: "products" },
|
|
{ text: "Contact Us", href: "#" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="ShopHub"
|
|
copyrightText="© 2025 ShopHub. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: Facebook,
|
|
href: "https://facebook.com/shophub", ariaLabel: "ShopHub Facebook"
|
|
},
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com/shophub", ariaLabel: "ShopHub Twitter"
|
|
},
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com/shophub", ariaLabel: "ShopHub Instagram"
|
|
},
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com/company/shophub", ariaLabel: "ShopHub LinkedIn"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|