Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| d53b9b3a44 | |||
| 0f58fda1bc | |||
| ab7d8b2908 | |||
| 5c04ca41b1 | |||
| 86ab6a55d0 | |||
| 15e92fd88d | |||
| 5f296d4070 |
@@ -1,64 +1,91 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
|
||||
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import Link from "next/link";
|
||||
import { Grid, Award, Briefcase, TrendingUp, ShoppingCart, Heart } from "lucide-react";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import MediaAbout from "@/components/sections/about/MediaAbout";
|
||||
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
|
||||
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
||||
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import {
|
||||
Grid,
|
||||
Award,
|
||||
Briefcase,
|
||||
TrendingUp,
|
||||
Users,
|
||||
Heart,
|
||||
Star,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function AboutPage() {
|
||||
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"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="ShopHub"
|
||||
navItems={[
|
||||
{ name: "Shop", id: "/" },
|
||||
{ name: "Deals", id: "/" },
|
||||
{ name: "Categories", id: "/" },
|
||||
{ name: "About", id: "/" },
|
||||
{ name: "Shop", id: "/products" },
|
||||
{ name: "Deals", id: "/deals" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Start Shopping", href: "/"}}
|
||||
animateOnLoad={true}
|
||||
text: "Start Shopping", href: "/products"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="categories" data-section="categories">
|
||||
<FeatureCardEight
|
||||
title="Why Choose ShopHub"
|
||||
description="Discover what makes ShopHub the preferred choice for millions of shoppers worldwide."
|
||||
tag="Categories"
|
||||
tagIcon={Grid}
|
||||
<div id="hero" data-section="hero">
|
||||
<MediaAbout
|
||||
title="Transforming Online Shopping for Everyone"
|
||||
description="ShopHub is on a mission to make online shopping more accessible, affordable, and enjoyable for millions worldwide."
|
||||
tag="Our Mission"
|
||||
tagIcon={Heart}
|
||||
tagAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/diverse-team-collaborating-office_23-2149087654.jpg"
|
||||
imageAlt="ShopHub team collaborating"
|
||||
buttons={[
|
||||
{ text: "Join Our Community", href: "/products" },
|
||||
{ text: "Learn More", href: "#mission" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="mission" data-section="mission">
|
||||
<FeatureCardNineteen
|
||||
title="Our Journey"
|
||||
description="From startup to industry leader, here's how we built ShopHub"
|
||||
tag="How We Got Here"
|
||||
tagIcon={TrendingUp}
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Wide Product Selection", description: "Browse millions of items across hundreds of categories with trusted sellers and verified products", imageSrc: "http://img.b2bpic.net/free-photo/sustainability-concept-with-blank-geometric-forms-growing-plant_23-2148994248.jpg"},
|
||||
tag: "Foundation", title: "Founded in 2015", subtitle: "Started with a vision to simplify online shopping.", description:
|
||||
"Our founders believed that everyone deserves access to quality products at fair prices. They started ShopHub with just a small team and a big dream to revolutionize the e-commerce landscape.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/startup-team-brainstorming_23-2148765432.jpg", imageAlt: "Startup team"},
|
||||
{
|
||||
id: 2,
|
||||
title: "Fast & Reliable Shipping", description: "Get your orders delivered quickly with our efficient logistics network and tracking systems", imageSrc: "http://img.b2bpic.net/free-vector/flat-furniture-sale-instagram-story-collection_23-2148954936.jpg"},
|
||||
tag: "Growth", title: "Rapid Expansion", subtitle: "Growing to serve millions of customers.", description:
|
||||
"Through innovative features and dedicated customer service, we grew from thousands to millions of users. We expanded our product categories, improved our logistics, and built partnerships with trusted sellers worldwide.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/business-growth-graph-chart_23-2149234567.jpg", imageAlt: "Business growth"},
|
||||
{
|
||||
id: 3,
|
||||
title: "Exceptional Customer Support", description: "Our dedicated support team is available 24/7 to help with any questions or concerns", imageSrc: "http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150229756.jpg"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More", href: "/"},
|
||||
tag: "Innovation", title: "Tech Leadership", subtitle: "Pioneering AI-driven personalization.", description:
|
||||
"We invested heavily in machine learning and AI to understand customer preferences better. Today, our recommendation engine helps shoppers discover exactly what they love, faster than ever before.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/ai-technology-concept_23-2148901234.jpg", imageAlt: "AI technology"},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
@@ -66,61 +93,125 @@ export default function AboutPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
title="Customer Success Stories"
|
||||
description="Hear from satisfied shoppers who have found exactly what they need on ShopHub."
|
||||
tag="Customer Reviews"
|
||||
<div id="impact" data-section="impact">
|
||||
<MetricCardThree
|
||||
metrics={[
|
||||
{
|
||||
id: "1", icon: Users,
|
||||
title: "Active Users", value: "2.5M+"},
|
||||
{
|
||||
id: "2", icon: Grid,
|
||||
title: "Product Categories", value: "500+"},
|
||||
{
|
||||
id: "3", icon: Award,
|
||||
title: "Awards Won", value: "47"},
|
||||
{
|
||||
id: "4", icon: Briefcase,
|
||||
title: "Seller Partners", value: "10K+"},
|
||||
]}
|
||||
title="ShopHub by the Numbers"
|
||||
description="Our impact and commitment to excellence"
|
||||
tag="Our Achievement"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
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"},
|
||||
{
|
||||
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"},
|
||||
{
|
||||
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"},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
buttonAnimation="slide-up"
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
1431
src/app/layout.tsx
1431
src/app/layout.tsx
File diff suppressed because it is too large
Load Diff
451
src/app/page.tsx
451
src/app/page.tsx
@@ -1,292 +1,195 @@
|
||||
"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 {
|
||||
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",
|
||||
text: "Start Shopping", href: "/products"
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</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"
|
||||
tagIcon={Sparkles}
|
||||
description="Shop millions of items from trusted sellers with fast, reliable shipping"
|
||||
tag="Premium Shopping"
|
||||
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 +197,104 @@ 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f7f6f7;
|
||||
--card: #ffffff;
|
||||
--foreground: #250c0d;
|
||||
--primary-cta: #b82b40;
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #000612e6;
|
||||
--primary-cta: #106EFB;
|
||||
--primary-cta-text: #f7f6f7;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta: #f9f9f9;
|
||||
--secondary-cta-text: #250c0d;
|
||||
--accent: #b90941;
|
||||
--background-accent: #e8a8b6;
|
||||
--accent: #106EFB;
|
||||
--background-accent: #e2e2e2;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user