Update src/app/page.tsx

This commit is contained in:
2026-03-09 07:06:08 +00:00
parent 5c04ca41b1
commit ab7d8b2908

View File

@@ -1,292 +1,184 @@
"use client";
import Link from "next/link";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Sparkles, Award, Grid, Zap, Star, Briefcase, HelpCircle, TrendingUp, ShoppingCart, Heart } from "lucide-react";
export default function HomePage() {
const navItems = [
{ name: "Shop", id: "/" },
{ name: "Deals", id: "/shop" },
{ name: "Categories", id: "/shop" },
{ name: "About", id: "/shop" },
];
const handleContactSubmit = (data: Record<string, string>) => {
console.log("Contact form submitted:", data);
};
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Sparkles } from "@/components/background/Sparkles";
import {
TrendingUp,
Users,
ShoppingCart,
Heart,
Star,
Package,
Check,
Zap,
} from "lucide-react";
export default function Home() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="compact"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="floatingGradient"
cardStyle="subtle-shadow"
primaryButtonStyle="radial-glow"
background="aurora"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="light"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
<NavbarLayoutFloatingOverlay
brandName="ShopHub"
navItems={navItems}
navItems={[
{ name: "Shop", id: "/products" },
{ name: "Deals", id: "/deals" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
]}
button={{
text: "Start Shopping",
href: "/shop",
}}
animateOnLoad={true}
text: "Start Shopping", href: "/products"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
<HeroBillboardGallery
background={{ variant: "radial-gradient" }}
title="Discover Amazing Products"
description="Shop millions of items with fast shipping and exceptional customer service. Everything you need, all in one place."
tag="New Arrivals"
description="Shop millions of items from trusted sellers with fast, reliable shipping"
tag="Premium Shopping"
tagIcon={Sparkles}
tagAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
buttons={[
{
text: "Start Shopping",
href: "/shop",
},
{
text: "Learn More",
href: "/shop",
},
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-vector/online-shopping-template-landing-page_23-2148795107.jpg?_wi=1",
imageAlt: "Featured Products Collection",
},
imageSrc:
"http://img.b2bpic.net/free-photo/woman-holding-shopping-bags-smiling_23-2148913262.jpg", imageAlt: "Happy shopper with bags"},
{
imageSrc: "http://img.b2bpic.net/free-photo/sustainability-concept-with-blank-geometric-forms-growing-plant_23-2148994248.jpg?_wi=1",
imageAlt: "Premium Product Selection",
},
imageSrc:
"http://img.b2bpic.net/free-photo/online-shopping-concept-with-laptop_23-2148951398.jpg", imageAlt: "Online shopping on laptop"},
{
imageSrc: "http://img.b2bpic.net/free-vector/flat-furniture-sale-instagram-story-collection_23-2148954936.jpg?_wi=1",
imageAlt: "Exclusive Deals",
},
imageSrc:
"http://img.b2bpic.net/free-photo/shopping-cart-with-products_23-2147899718.jpg", imageAlt: "Shopping cart full of items"},
{
imageSrc: "http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150229756.jpg?_wi=1",
imageAlt: "Best Sellers",
},
imageSrc:
"http://img.b2bpic.net/free-photo/delivery-man-holding-package_23-2148989467.jpg", imageAlt: "Fast delivery service"},
{
imageSrc: "http://img.b2bpic.net/free-vector/online-shopping-template-landing-page_23-2148795107.jpg?_wi=2",
imageAlt: "New Arrivals",
},
imageSrc:
"http://img.b2bpic.net/free-photo/person-using-credit-card-for-payment_23-2149034908.jpg", imageAlt: "Secure payment"},
]}
buttons={[
{ text: "Shop Now", href: "/products" },
{ text: "View Deals", href: "/deals" },
]}
buttonAnimation="slide-up"
mediaAnimation="slide-up"
/>
</div>
<div id="products" data-section="products">
<div id="featured-products" data-section="featured-products">
<ProductCardFour
products={[
{
id: "1",
name: "Premium Wireless Headphones",
price: "$79.99",
variant: "Black • Noise Cancelling",
imageSrc: "http://img.b2bpic.net/free-photo/sustainability-concept-with-blank-geometric-forms-growing-plant_23-2148994248.jpg?_wi=2",
imageAlt: "Premium Wireless Headphones",
id: "1", name: "Premium Wireless Headphones", price: "$199.99", variant: "Black • 5 Colors Available", imageSrc:
"http://img.b2bpic.net/free-photo/wireless-headphones-studio-setup_23-2149012345.jpg", imageAlt: "Wireless headphones", isFavorited: false,
},
{
id: "2",
name: "Professional Camera Lens",
price: "$299.99",
variant: "Professional • 50mm",
imageSrc: "http://img.b2bpic.net/free-vector/flat-furniture-sale-instagram-story-collection_23-2148954936.jpg?_wi=2",
imageAlt: "Professional Camera Lens",
id: "2", name: "Smart Watch Pro", price: "$349.99", variant: "Silver • 3 Colors Available", imageSrc:
"http://img.b2bpic.net/free-photo/smart-watch-on-wrist_23-2149087654.jpg", imageAlt: "Smart watch", isFavorited: false,
},
{
id: "3",
name: "Smart Watch Ultra",
price: "$199.99",
variant: "Titanium • Health Tracking",
imageSrc: "http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150229756.jpg?_wi=2",
imageAlt: "Smart Watch Ultra",
id: "3", name: "Portable Charger 20000mAh", price: "$49.99", variant: "White • 4 Colors Available", imageSrc:
"http://img.b2bpic.net/free-photo/portable-power-bank-display_23-2148765432.jpg", imageAlt: "Power bank charger", isFavorited: false,
},
{
id: "4", name: "USB-C Fast Charging Cable", price: "$15.99", variant: "Gray • 2 Colors Available", imageSrc:
"http://img.b2bpic.net/free-photo/usb-cable-coil-white-background_23-2149234567.jpg", imageAlt: "USB-C charging cable", isFavorited: false,
},
]}
title="Featured Products"
description="Handpicked selections from our premium collection. Discover quality items with best prices."
tag="Best Sellers"
tagIcon={Award}
description="Discover our bestselling items with exceptional quality and prices"
tag="Top Sellers"
tagIcon={Heart}
tagAnimation="slide-up"
buttons={[
{
text: "View All Products",
href: "/shop",
},
]}
textboxLayout="default"
gridVariant="uniform-all-items-equal"
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
useInvertedBackground={false}
buttonAnimation="slide-up"
carouselMode="buttons"
/>
</div>
<div id="categories" data-section="categories">
<FeatureCardEight
features={[
{
id: 1,
title: "Electronics",
description: "Latest gadgets, computers, and tech accessories with warranty coverage",
imageSrc: "http://img.b2bpic.net/free-photo/sustainability-concept-with-blank-geometric-forms-growing-plant_23-2148994248.jpg?_wi=3",
imageAlt: "Electronics category",
},
{
id: 2,
title: "Fashion & Apparel",
description: "Premium clothing and accessories from top brands at great prices",
imageSrc: "http://img.b2bpic.net/free-vector/flat-furniture-sale-instagram-story-collection_23-2148954936.jpg?_wi=3",
imageAlt: "Fashion & Apparel category",
},
{
id: 3,
title: "Home & Living",
description: "Furniture, decor, and essentials to transform your living space",
imageSrc: "http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150229756.jpg?_wi=3",
imageAlt: "Home & Living category",
},
]}
title="Shop by Category"
description="Browse our extensive collection of premium products across all categories."
tag="Categories"
tagIcon={Grid}
tagAnimation="slide-up"
buttons={[
{
text: "Browse Categories",
href: "/shop",
},
]}
textboxLayout="default"
useInvertedBackground={false}
buttonAnimation="slide-up"
/>
</div>
<div id="deals" data-section="deals">
<MetricCardOne
<div id="metrics" data-section="metrics">
<MetricCardThree
metrics={[
{
id: "1",
value: "50",
title: "%",
description: "Average Discount on Sale Items",
icon: TrendingUp,
},
id: "1", icon: ShoppingCart,
title: "Total Orders", value: "5M+"},
{
id: "2",
value: "100",
title: "M+",
description: "Products Available to Buy",
icon: ShoppingCart,
},
id: "2", icon: Users,
title: "Happy Customers", value: "2.5M+"},
{
id: "3",
value: "99",
title: "%",
description: "Customer Satisfaction Rate",
icon: Heart,
},
id: "3", icon: TrendingUp,
title: "Products Sold", value: "50M+"},
{
id: "4", icon: Zap,
title: "Fast Deliveries", value: "98%"},
]}
title="Unbeatable Deals & Savings"
description="Join millions of satisfied customers enjoying exclusive discounts and offers."
tag="Promotions"
tagIcon={Zap}
title="ShopHub Impact"
description="By the numbers - see how we're revolutionizing online shopping"
tag="Success Stories"
tagIcon={Star}
tagAnimation="slide-up"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
buttonAnimation="slide-up"
carouselMode="buttons"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
testimonials={[
<div id="pricing" data-section="pricing">
<PricingCardEight
plans={[
{
id: "1",
name: "Sarah Johnson",
role: "Happy Customer",
company: "Verified Buyer",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149304143.jpg?_wi=1",
imageAlt: "Sarah Johnson testimonial",
id: "1", badge: "Most Popular", badgeIcon: Star,
price: "Free", subtitle: "For casual shoppers", buttons: [
{ text: "Get Started", href: "/products" },
],
features: [
"Browse millions of products", "Secure checkout", "Order tracking", "Customer support"],
},
{
id: "2",
name: "Michael Chen",
role: "Regular Shopper",
company: "Verified Buyer",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-posing-street_23-2148213468.jpg?_wi=1",
imageAlt: "Michael Chen testimonial",
id: "2", badge: "Best Value", badgeIcon: Zap,
price: "$9.99", subtitle: "Per month • Cancel anytime", buttons: [
{ text: "Subscribe Now", href: "/subscribe" },
],
features: [
"Everything in Free", "Free shipping on all orders", "Early access to deals", "Priority customer support", "Exclusive member discounts"],
},
{
id: "3",
name: "Emily Rodriguez",
role: "Premium Member",
company: "Verified Buyer",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/ambitious-businesswoman-with-arms-crossed-looking-forward-future_1163-4333.jpg?_wi=1",
imageAlt: "Emily Rodriguez testimonial",
},
{
id: "4",
name: "David Kim",
role: "Loyal Customer",
company: "Verified Buyer",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",
imageAlt: "David Kim testimonial",
},
{
id: "5",
name: "Lisa Thompson",
role: "Frequent Buyer",
company: "Verified Buyer",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/successful-young-businessman-with-his-arms-crossed-standing-front-building_23-2148176205.jpg",
imageAlt: "Lisa Thompson testimonial",
},
{
id: "6",
name: "James Wilson",
role: "Trust Score Expert",
company: "Verified Buyer",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-with-thumb-up_1368-6324.jpg",
imageAlt: "James Wilson testimonial",
id: "3", badge: "Premium", badgeIcon: Package,
price: "$19.99", subtitle: "Per month • Best savings", buttons: [
{ text: "Upgrade Now", href: "/upgrade" },
],
features: [
"Everything in Plus", "2-day guaranteed delivery", "Extra discounts on sales", "VIP concierge support", "Exclusive product access", "Birthday rewards"],
},
]}
title="What Our Customers Say"
description="Real reviews from satisfied shoppers who trust ShopHub for their purchases."
tag="Customer Reviews"
tagIcon={Star}
tagAnimation="slide-up"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
title="Membership Plans"
description="Choose the perfect plan to enhance your shopping experience"
tag="Pricing"
tagIcon={Package}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttonAnimation="slide-up"
@@ -294,52 +186,96 @@ export default function HomePage() {
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
title="Trusted by Industry Leaders"
description="ShopHub powers transactions for the world's leading brands and retailers."
tag="Partners"
tagIcon={Briefcase}
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
testimonials={[
{
id: "1", name: "Sarah Johnson", handle: "@sarah_j", testimonial:
"ShopHub has completely transformed my online shopping experience. The variety and prices are unbeatable!", imageSrc:
"http://img.b2bpic.net/free-photo/woman-smiling-in-portrait_23-2148632156.jpg", imageAlt: "Sarah Johnson"},
{
id: "2", name: "Michael Chen", handle: "@michael_tech", testimonial:
"Fast shipping, great customer service, and authentic products. ShopHub is my go-to for everything!", imageSrc:
"http://img.b2bpic.net/free-photo/portrait-businessman-smiling-indoors_23-2149098765.jpg", imageAlt: "Michael Chen"},
{
id: "3", name: "Emily Rodriguez", handle: "@emily_style", testimonial:
"The exclusive deals and early access for members make this the best shopping platform I've found.", imageSrc:
"http://img.b2bpic.net/free-photo/happy-young-woman-portrait_23-2147803456.jpg", imageAlt: "Emily Rodriguez"},
{
id: "4", name: "James Wilson", handle: "@james_shop", testimonial:
"Reliable, secure, and user-friendly. ShopHub makes online shopping feel safe and enjoyable.", imageSrc:
"http://img.b2bpic.net/free-photo/man-portrait-smiling-outdoor_23-2148234567.jpg", imageAlt: "James Wilson"},
{
id: "5", name: "Lisa Martinez", handle: "@lisa_love", testimonial:
"Amazing selection, competitive prices, and they actually care about customer satisfaction. Highly recommended!", imageSrc:
"http://img.b2bpic.net/free-photo/portrait-woman-beautiful-smiling_23-2148876543.jpg", imageAlt: "Lisa Martinez"},
{
id: "6", name: "David Park", handle: "@david_deals", testimonial:
"Been shopping here for 2 years. The quality and service consistency is exceptional compared to competitors.", imageSrc:
"http://img.b2bpic.net/free-photo/confident-man-portrait_23-2148901234.jpg", imageAlt: "David Park"},
{
id: "7", name: "Jessica Lee", handle: "@jessica_finds", testimonial:
"ShopHub's recommendation system is incredible. I discover products I love every time I visit!", imageSrc:
"http://img.b2bpic.net/free-photo/smiling-young-woman-looking-camera_23-2148654321.jpg", imageAlt: "Jessica Lee"},
{
id: "8", name: "Robert Thompson", handle: "@robert_online", testimonial:
"Best shopping experience online. Great prices, authentic products, and lightning-fast delivery.", imageSrc:
"http://img.b2bpic.net/free-photo/portrait-man-standing-smiling_23-2148765432.jpg", imageAlt: "Robert Thompson"},
]}
animationType="slide-up"
title="Customer Love"
description="Join millions of satisfied shoppers who trust ShopHub"
tag="Testimonials"
tagIcon={Star}
tagAnimation="slide-up"
names={[
"Amazon",
"eBay",
"Shopify",
"Stripe",
"PayPal",
"Mastercard",
"Visa",
]}
logos={[
"http://img.b2bpic.net/free-photo/woman-sitting-floor-with-her-laptop-her-lap_23-2148674969.jpg",
"http://img.b2bpic.net/free-vector/gradient-e-commerce-logo-collection_23-2148962201.jpg",
"http://img.b2bpic.net/free-photo/laptop-with-toy-supermarket-cart-sale-tablet_23-2147955521.jpg",
"http://img.b2bpic.net/free-vector/gradient-technology-logo_52683-8661.jpg",
"http://img.b2bpic.net/free-vector/gradient-colored-p-logos-set_23-2148924056.jpg",
"http://img.b2bpic.net/free-vector/logo-template-design_1289-84.jpg",
"http://img.b2bpic.net/free-vector/gradient-money-logo-design_23-2150934177.jpg",
]}
textboxLayout="default"
useInvertedBackground={false}
showCard={true}
speed={40}
buttonAnimation="slide-up"
speed={40}
topMarqueeDirection="left"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="ShopHub"
leftLink={{
text: "Privacy Policy",
href: "#",
}}
rightLink={{
text: "Terms of Service",
href: "#",
}}
<FooterSimple
columns={[
{
title: "Shop", items: [
{ label: "All Products", href: "/products" },
{ label: "Deals", href: "/deals" },
{ label: "Categories", href: "/categories" },
{ label: "New Arrivals", href: "/new" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "/about" },
{ label: "Contact", href: "/contact" },
{ label: "Careers", href: "/careers" },
{ label: "Blog", href: "/blog" },
],
},
{
title: "Support", items: [
{ label: "Help Center", href: "/help" },
{ label: "Track Order", href: "/track" },
{ label: "Returns", href: "/returns" },
{ label: "Shipping Info", href: "/shipping" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Cookie Policy", href: "/cookies" },
{ label: "Accessibility", href: "/accessibility" },
],
},
]}
bottomLeftText="© 2025 ShopHub. All rights reserved."
bottomRightText="Made with ❤️ for shoppers everywhere"
/>
</div>
</ThemeProvider>
);
}
}