Add src/app/page.tsx

This commit is contained in:
2026-03-04 16:13:05 +00:00
parent 391b8179b0
commit fd4a0a1ebd

313
src/app/page.tsx Normal file
View File

@@ -0,0 +1,313 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactText from "@/components/sections/contact/ContactText";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import {
Sparkles,
Star,
Zap,
Gift,
Heart,
Badge,
HelpCircle,
Package,
ShoppingBag,
Home,
CheckCircle,
Truck,
} from "lucide-react";
export default function StorePage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="compact"
sizing="largeSmallSizeMediumTitles"
background="none"
cardStyle="soft-shadow"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="StoreName"
navItems={[
{ name: "Home", id: "hero" },
{ name: "Products", id: "products" },
{ name: "About", id: "features" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Shop Now", href: "#products"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardDashboard
title="Welcome to Your Premium Store"
description="Discover an exclusive collection of premium products curated just for you. Shop with confidence and enjoy fast, reliable delivery."
tag="New Collection"
tagIcon={Sparkles}
tagAnimation="slide-up"
buttons={[
{ text: "Shop Now", href: "#products" },
{ text: "View Details", href: "#features" },
]}
buttonAnimation="slide-up"
background={{ variant: "radial-gradient" }}
dashboard={{
title: "Store Analytics", logoIcon: Package,
imageSrc: "http://img.b2bpic.net/free-photo/vegan-shop-client-buys-organic-food_482257-76719.jpg", searchPlaceholder: "Search products...", buttons: [
{ text: "Browse", href: "#products" },
{ text: "Deals", href: "#pricing" },
],
sidebarItems: [
{ icon: Home, active: true },
{ icon: ShoppingBag, active: false },
{ icon: Heart, active: false },
],
stats: [
{ title: "Products", values: [150, 200, 250], description: "In stock now" },
{ title: "Customers", values: [5000, 7500, 10000], description: "Satisfied shoppers" },
{ title: "Reviews", values: [4.8, 4.85, 4.9], valueSuffix: "/5", description: "Average rating" },
],
chartTitle: "Monthly Sales", chartData: [
{ value: 60 },
{ value: 75 },
{ value: 85 },
{ value: 70 },
{ value: 90 },
],
listTitle: "Recent Orders", listItems: [
{ icon: Package, title: "Order #1234", status: "Delivered" },
{ icon: Truck, title: "Order #1235", status: "In Transit" },
{ icon: CheckCircle, title: "Order #1236", status: "Processing" },
],
}}
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
title="Featured Products"
description="Browse our handpicked collection of premium items tailored to your lifestyle."
tag="Best Sellers"
tagIcon={Star}
tagAnimation="slide-up"
buttons={[{ text: "View All", href: "#products" }]}
buttonAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
products={[
{
id: "1", name: "Premium Leather Jacket", price: "$199.99", variant: "Black, Brown, Navy - 5 Colors", imageSrc: "http://img.b2bpic.net/free-photo/travel-still-life-pack-top-view_23-2148837333.jpg?_wi=1", imageAlt: "Premium Leather Jacket", isFavorited: false,
},
{
id: "2", name: "Classic Denim Jeans", price: "$89.99", variant: "Slim Fit - Multiple Sizes", imageSrc: "http://img.b2bpic.net/free-photo/travel-still-life-pack-top-view_23-2148837333.jpg?_wi=2", imageAlt: "Classic Denim Jeans", isFavorited: false,
},
{
id: "3", name: "Designer Handbag", price: "$249.99", variant: "Cognac Brown - Limited Edition", imageSrc: "http://img.b2bpic.net/free-photo/modern-round-wireless-speaker-with-slick-design-showcased-geometric-podium_23-2150808059.jpg?_wi=1", imageAlt: "Designer Handbag", isFavorited: false,
},
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardSixteen
title="Why Choose Our Store"
description="Experience shopping like never before with our premium service and quality products."
tag="Our Advantage"
tagIcon={Zap}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
negativeCard={{
items: [
"Generic products", "Slow shipping", "Poor customer service", "Low quality items"],
}}
positiveCard={{
items: [
"Curated collections", "Fast delivery", "24/7 support", "Premium quality guaranteed"],
}}
animationType="slide-up"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardNine
title="Our Service Plans"
description="Choose the perfect plan to enhance your shopping experience."
tag="Membership"
tagIcon={Gift}
tagAnimation="slide-up"
buttons={[{ text: "Learn More", href: "#contact" }]}
buttonAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
plans={[
{
id: "basic", title: "Standard", price: "Free", period: "Always", imageSrc: "http://img.b2bpic.net/free-photo/travel-still-life-pack-top-view_23-2148837333.jpg?_wi=3", imageAlt: "Standard Plan", button: { text: "Get Started", href: "#contact" },
features: [
"Access to all products", "Standard shipping", "Order tracking", "Basic support"],
},
{
id: "pro", title: "Premium Plus", price: "$9.99", period: "/month", imageSrc: "http://img.b2bpic.net/free-photo/travel-still-life-pack-top-view_23-2148837333.jpg?_wi=4", imageAlt: "Premium Plus Plan", button: { text: "Subscribe Now", href: "#contact" },
features: [
"Free shipping", "Priority support", "Early access to deals", "Exclusive products"],
},
{
id: "elite", title: "Elite VIP", price: "$19.99", period: "/month", imageSrc: "http://img.b2bpic.net/free-photo/modern-round-wireless-speaker-with-slick-design-showcased-geometric-podium_23-2150808059.jpg?_wi=2", imageAlt: "Elite VIP Plan", button: { text: "Join Elite", href: "#contact" },
features: [
"Free express shipping", "VIP concierge", "Exclusive member events", "Bonus rewards points"],
},
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
title="What Our Customers Say"
description="Read genuine reviews from satisfied shoppers who love our store."
tag="Customer Reviews"
tagIcon={Heart}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
showRating={true}
animationType="slide-up"
testimonials={[
{
id: "1", name: "Sarah Johnson", handle: "@sarahj", testimonial:
"Amazing quality products and incredibly fast shipping! The customer service team was so helpful when I had questions.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg?_wi=1", imageAlt: "Sarah Johnson"},
{
id: "2", name: "Michael Chen", handle: "@mikechen", testimonial: "Best shopping experience ever. The products are exactly as described and arrived in perfect condition.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg?_wi=2", imageAlt: "Michael Chen"},
{
id: "3", name: "Emily Rodriguez", handle: "@emilyrod", testimonial: "Love the exclusive deals and member perks. Definitely becoming a loyal customer here.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg?_wi=3", imageAlt: "Emily Rodriguez"},
{
id: "4", name: "David Kim", handle: "@davidkim", testimonial: "Great selection, fantastic prices, and the premium membership is totally worth it.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg?_wi=4", imageAlt: "David Kim"},
{
id: "5", name: "Jessica Martinez", handle: "@jessmart", testimonial: "Impressed with the attention to detail in everything they do. Highly recommended!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg?_wi=5", imageAlt: "Jessica Martinez"},
{
id: "6", name: "Robert Thompson", handle: "@rthompson", testimonial: "Finally found a store that truly values customer satisfaction. Will be shopping here regularly.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg?_wi=6", imageAlt: "Robert Thompson"},
]}
/>
</div>
<div id="socialproof" data-section="socialproof">
<SocialProofOne
title="Trusted by Leading Brands"
description="Join thousands of satisfied customers worldwide who shop with us."
tag="Partners"
tagIcon={Badge}
tagAnimation="slide-up"
buttons={[{ text: "Become a Partner", href: "#contact" }]}
buttonAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
names={["Nike", "Adidas", "Puma", "Levi's", "Tommy Hilfiger", "Calvin Klein", "Gucci"]}
speed={40}
showCard={true}
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
title="Frequently Asked Questions"
description="Find answers to common questions about ordering, shipping, returns, and more."
tag="Support"
tagIcon={HelpCircle}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
faqsAnimation="slide-up"
animationType="smooth"
faqs={[
{
id: "1", title: "What is your return policy?", content:
"We offer a hassle-free 30-day return policy. If you're not completely satisfied with your purchase, simply return it in original condition for a full refund or exchange."},
{
id: "2", title: "How long does shipping take?", content: "Standard shipping typically takes 5-7 business days. Express shipping is available for 2-3 day delivery. All orders include tracking information."},
{
id: "3", title: "Do you ship internationally?", content: "Yes, we ship to over 100 countries worldwide. International shipping times vary by location but typically take 10-21 business days."},
{
id: "4", title: "Is my payment information secure?", content: "Absolutely. We use industry-leading SSL encryption to protect all your personal and payment information. Your data is never shared with third parties."},
{
id: "5", title: "What payment methods do you accept?", content: "We accept all major credit cards (Visa, Mastercard, Amex), PayPal, Apple Pay, Google Pay, and bank transfers."},
{
id: "6", title: "How can I contact customer support?", content: "You can reach our support team 24/7 via email, live chat on our website, or phone. We typically respond within 1-2 hours."},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to discover amazing products? Get in touch with our team today and start your shopping journey with exclusive offers."
animationType="entrance-slide"
buttons={[
{ text: "Contact Us", href: "#contact" },
{ text: "Sign Up", href: "#contact" },
]}
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/indoor-hotel-view_1417-1566.jpg"
imageAlt="Footer background"
logoText="StoreName"
copyrightText="© 2025 StoreName. All rights reserved."
columns={[
{
title: "Shop", items: [
{ label: "All Products", href: "#products" },
{ label: "New Arrivals", href: "#products" },
{ label: "Best Sellers", href: "#products" },
{ label: "Sale", href: "#products" },
],
},
{
title: "Customer Service", items: [
{ label: "Contact Us", href: "#contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Shipping Info", href: "#faq" },
{ label: "Returns", href: "#faq" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "#features" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Partners", href: "#socialproof" },
],
},
]}
/>
</div>
</ThemeProvider>
);
}