528 lines
19 KiB
TypeScript
528 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
import Link from "next/link";
|
|
import { Star, ShoppingBag, Users, Headphones, CheckCircle, Award, HelpCircle, Mail, Sparkles, Shield } from "lucide-react";
|
|
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Shop", id: "/shop" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Contact", id: "/contact" },
|
|
{ name: "Blog", id: "/blog" },
|
|
];
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="noise"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="normal"
|
|
>
|
|
{/* Navbar */}
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple brandName="ShopHub" navItems={navItems} />
|
|
</div>
|
|
|
|
{/* Hero Section */}
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="ShopHub"
|
|
description="Discover an exceptional collection of 1,000+ premium products curated for every need. Experience luxury shopping with competitive pricing, fast shipping, and unmatched customer service."
|
|
buttons={[
|
|
{
|
|
text: "Start Shopping",
|
|
href: "/shop",
|
|
},
|
|
{
|
|
text: "Explore Collections",
|
|
href: "#featured",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{
|
|
variant: "sparkles-gradient",
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/blur-shopping-mall_1203-8336.jpg?_wi=1"
|
|
imageAlt="Premium product showcase"
|
|
mediaAnimation="blur-reveal"
|
|
frameStyle="browser"
|
|
ariaLabel="Hero section with product showcase"
|
|
/>
|
|
</div>
|
|
|
|
{/* Featured Products Section */}
|
|
<div id="featured" data-section="featured">
|
|
<ProductCardFour
|
|
products={[
|
|
{
|
|
id: "1",
|
|
name: "Premium Wireless Headphones",
|
|
price: "$299.99",
|
|
variant: "Silver • Noise Cancelling • 30hr Battery",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/creative-black-friday-composition-black-background_23-2148666964.jpg?_wi=1",
|
|
imageAlt: "Premium wireless headphones",
|
|
isFavorited: false,
|
|
onProductClick: () => {
|
|
window.location.href = "/product/1";
|
|
},
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Luxury Leather Backpack",
|
|
price: "$189.99",
|
|
variant: "Black • Italian Leather • Waterproof",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/sustainability-concept-with-blank-geometric-forms-growing-plant_23-2148994245.jpg?_wi=1",
|
|
imageAlt: "Luxury leather backpack",
|
|
isFavorited: false,
|
|
onProductClick: () => {
|
|
window.location.href = "/product/2";
|
|
},
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Designer Smartwatch",
|
|
price: "$349.99",
|
|
variant: "Gold • AMOLED Screen • 7 Days Battery",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-delicious-high-protein-vegan-meal_23-2149091343.jpg?_wi=1",
|
|
imageAlt: "Designer smartwatch",
|
|
isFavorited: false,
|
|
onProductClick: () => {
|
|
window.location.href = "/product/3";
|
|
},
|
|
},
|
|
]}
|
|
carouselMode="buttons"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
title="Featured Products"
|
|
description="Handpicked bestsellers and new arrivals that customers love. Explore our most popular items."
|
|
tag="Best Sellers"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{
|
|
text: "View All Products",
|
|
href: "/shop",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* Metrics Section */}
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
metrics={[
|
|
{
|
|
id: "1",
|
|
value: "1000",
|
|
title: "Products",
|
|
description: "Premium items carefully selected for quality",
|
|
icon: ShoppingBag,
|
|
},
|
|
{
|
|
id: "2",
|
|
value: "50k",
|
|
title: "Happy Customers",
|
|
description: "Trusted by thousands worldwide",
|
|
icon: Users,
|
|
},
|
|
{
|
|
id: "3",
|
|
value: "24/7",
|
|
title: "Support",
|
|
description: "Expert customer service always available",
|
|
icon: Headphones,
|
|
},
|
|
{
|
|
id: "4",
|
|
value: "100%",
|
|
title: "Satisfaction",
|
|
description: "Money-back guarantee on all purchases",
|
|
icon: CheckCircle,
|
|
},
|
|
]}
|
|
carouselMode="buttons"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
title="Why Choose ShopHub"
|
|
description="Experience the difference of premium service and quality products"
|
|
tag="Our Commitment"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
{/* Testimonials Section */}
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="ShopHub transformed my shopping experience. The product quality is exceptional, delivery was lightning fast, and customer service went above and beyond to help me. I've become a loyal customer and recommend them to everyone!"
|
|
rating={5}
|
|
author="Sarah Anderson, Marketing Executive"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/thoughtful-business-woman-standing-with-crossed-arms_23-2148095675.jpg",
|
|
alt: "Sarah Anderson",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/front-view-young-businessman-office-clothing_23-2148763859.jpg",
|
|
alt: "Michael Chen",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/empowered-business-woman-office_23-2149279555.jpg",
|
|
alt: "Emily Rodriguez",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/man-corrects-belt-fees-groom-man-s-hands-dressing-man-buttons-pants-jeans_8353-5893.jpg",
|
|
alt: "David Kim",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/happy-business-woman-standing-outdoors_1262-20546.jpg",
|
|
alt: "Jessica Lee",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/confident-handsome-middle-aged-entrepreneur_1262-4871.jpg",
|
|
alt: "James Wilson",
|
|
},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Customer testimonial section"
|
|
/>
|
|
</div>
|
|
|
|
{/* Pricing Section */}
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
plans={[
|
|
{
|
|
id: "basic",
|
|
title: "Basic Membership",
|
|
price: "Free",
|
|
period: "Forever",
|
|
features: [
|
|
"Access to all 1000+ products",
|
|
"Standard shipping rates",
|
|
"Basic customer support",
|
|
"Seasonal promotions",
|
|
],
|
|
button: {
|
|
text: "Get Started",
|
|
href: "/shop",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/creative-black-friday-composition-black-background_23-2148666964.jpg?_wi=2",
|
|
imageAlt: "Basic membership benefits",
|
|
},
|
|
{
|
|
id: "premium",
|
|
title: "Premium Plus",
|
|
price: "$9.99",
|
|
period: "/month",
|
|
features: [
|
|
"Free shipping on all orders",
|
|
"Express delivery option",
|
|
"Priority customer support",
|
|
"Exclusive member discounts 15% off",
|
|
"Early access to new products",
|
|
"Birthday special offers",
|
|
],
|
|
button: {
|
|
text: "Subscribe Now",
|
|
href: "/pricing",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/sustainability-concept-with-blank-geometric-forms-growing-plant_23-2148994245.jpg?_wi=2",
|
|
imageAlt: "Premium plus membership benefits",
|
|
},
|
|
{
|
|
id: "elite",
|
|
title: "Elite VIP",
|
|
price: "$19.99",
|
|
period: "/month",
|
|
features: [
|
|
"Free worldwide shipping",
|
|
"Same-day delivery available",
|
|
"24/7 dedicated VIP support",
|
|
"20% discount on everything",
|
|
"Exclusive VIP product collection",
|
|
"Complimentary gift wrapping",
|
|
"Personal shopping assistant",
|
|
],
|
|
button: {
|
|
text: "Become VIP",
|
|
href: "/pricing",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-delicious-high-protein-vegan-meal_23-2149091343.jpg?_wi=2",
|
|
imageAlt: "Elite VIP membership benefits",
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
title="Membership Plans"
|
|
description="Choose the perfect plan for your shopping needs"
|
|
tag="Flexible Pricing"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{
|
|
text: "Compare Plans",
|
|
href: "#",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* Social Proof Section */}
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
names={[
|
|
"TechCorp",
|
|
"Innovation Labs",
|
|
"Global Retail",
|
|
"Digital Solutions",
|
|
"Future Commerce",
|
|
"Elite Products",
|
|
"Prime Brands",
|
|
"Smart Shopping",
|
|
]}
|
|
title="Trusted by Industry Leaders"
|
|
description="Join thousands of satisfied customers and businesses that rely on ShopHub"
|
|
tag="Trusted Partners"
|
|
tagIcon={Shield}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
{/* FAQ Section */}
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "What is your return policy?",
|
|
content: "We offer a hassle-free 30-day return policy on all items. If you're not completely satisfied, simply return the product in original condition for a full refund or exchange. No questions asked.",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "How long does shipping take?",
|
|
content: "Standard shipping typically takes 5-7 business days. Express shipping is available for 2-3 business days delivery. Premium members enjoy free express shipping on all orders.",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Do you offer international shipping?",
|
|
content: "Yes! We ship to over 150 countries worldwide. International shipping rates vary by location and product weight. Most international orders arrive within 10-15 business days.",
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Are your products authentic?",
|
|
content: "Absolutely! All products sold on ShopHub are 100% authentic and come directly from authorized distributors and manufacturers. We guarantee authenticity or your money back.",
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "What payment methods do you accept?",
|
|
content: "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, Apple Pay, Google Pay, and digital wallets. Your payment information is secured with industry-standard encryption.",
|
|
},
|
|
{
|
|
id: "6",
|
|
title: "How can I track my order?",
|
|
content: "Once your order ships, you'll receive an email with a tracking number. You can track your package in real-time through our order dashboard or by clicking the tracking link in your email.",
|
|
},
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Get answers to common questions about our products, shipping, and policies"
|
|
tag="Help & Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
{/* Contact Section */}
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Newsletter"
|
|
title="Stay Updated"
|
|
description="Subscribe to our newsletter and receive exclusive offers, new product launches, and shopping tips delivered straight to your inbox."
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
background={{
|
|
variant: "sparkles-gradient",
|
|
}}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/front-view-woman-working-as-economist_23-2150167237.jpg?_wi=1"
|
|
imageAlt="Newsletter signup"
|
|
mediaAnimation="blur-reveal"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your privacy. Unsubscribe at any time. By subscribing, you agree to receive marketing emails from ShopHub."
|
|
/>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="ShopHub"
|
|
columns={[
|
|
{
|
|
title: "Shop",
|
|
items: [
|
|
{
|
|
label: "All Products",
|
|
href: "/shop",
|
|
},
|
|
{
|
|
label: "New Arrivals",
|
|
href: "/shop?sort=new",
|
|
},
|
|
{
|
|
label: "Best Sellers",
|
|
href: "/shop?sort=bestsellers",
|
|
},
|
|
{
|
|
label: "Sale Items",
|
|
href: "/shop?filter=sale",
|
|
},
|
|
{
|
|
label: "Gift Cards",
|
|
href: "/gift-cards",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "/about",
|
|
},
|
|
{
|
|
label: "Our Story",
|
|
href: "/about#story",
|
|
},
|
|
{
|
|
label: "Careers",
|
|
href: "/careers",
|
|
},
|
|
{
|
|
label: "Press",
|
|
href: "/press",
|
|
},
|
|
{
|
|
label: "Blog",
|
|
href: "/blog",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Support",
|
|
items: [
|
|
{
|
|
label: "Contact Us",
|
|
href: "/contact",
|
|
},
|
|
{
|
|
label: "FAQ",
|
|
href: "#faq",
|
|
},
|
|
{
|
|
label: "Shipping Info",
|
|
href: "/shipping",
|
|
},
|
|
{
|
|
label: "Returns",
|
|
href: "/returns",
|
|
},
|
|
{
|
|
label: "Track Order",
|
|
href: "/track",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "/privacy",
|
|
},
|
|
{
|
|
label: "Terms of Service",
|
|
href: "/terms",
|
|
},
|
|
{
|
|
label: "Cookie Policy",
|
|
href: "/cookies",
|
|
},
|
|
{
|
|
label: "Accessibility",
|
|
href: "/accessibility",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Connect",
|
|
items: [
|
|
{
|
|
label: "Facebook",
|
|
href: "https://facebook.com/shophub",
|
|
},
|
|
{
|
|
label: "Instagram",
|
|
href: "https://instagram.com/shophub",
|
|
},
|
|
{
|
|
label: "Twitter",
|
|
href: "https://twitter.com/shophub",
|
|
},
|
|
{
|
|
label: "LinkedIn",
|
|
href: "https://linkedin.com/company/shophub",
|
|
},
|
|
{
|
|
label: "YouTube",
|
|
href: "https://youtube.com/shophub",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 ShopHub. All rights reserved. Premium shopping experience."
|
|
onPrivacyClick={() => {
|
|
window.location.href = "/privacy";
|
|
}}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |