bender/17f16735-64d2-44d5-b132-6fde5cc94be7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #1

Merged
bender merged 2 commits from version_2 into main 2026-06-08 12:08:09 +00:00
Conversation 0 Commits 2 Files Changed 2 +295 -247
2 changed files with 295 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
src/app/page.tsx
View File

@@ -33,25 +33,15 @@ export default function LandingPage() {
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "#home",
},
name: "Home", id: "#home"},
{
name: "Products",
id: "#products",
},
name: "Products", id: "#products"},
{
name: "About",
id: "#about",
},
name: "About", id: "#about"},
{
name: "FAQ",
id: "#faq",
},
name: "FAQ", id: "#faq"},
{
name: "Contact",
id: "#contact",
},
name: "Contact", id: "#contact"},
]}
logoSrc="http://img.b2bpic.net/free-vector/trolley-online-shop-logo-ideas-inspiration-logo-design-template-vector-illustration-isolated-white-background_384344-1796.jpg"
logoAlt="E-Shop Pro Logo"
@@ -70,36 +60,22 @@ export default function LandingPage() {
tagAnimation="slide-up"
buttons={[
{
text: "Shop Now",
href: "#products",
},
text: "Shop Now", href: "#products"},
{
text: "Learn More",
href: "#about",
},
text: "Learn More", href: "#about"},
]}
buttonAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/happy-mature-businessman-showing-thumb-up_1262-3024.jpg",
alt: "Sarah Johnson",
},
src: "http://img.b2bpic.net/free-photo/happy-mature-businessman-showing-thumb-up_1262-3024.jpg", alt: "Sarah Johnson"},
{
src: "http://img.b2bpic.net/free-photo/businessman-thinking-isolated-white-background_1368-6484.jpg",
alt: "Michael Chen",
},
src: "http://img.b2bpic.net/free-photo/businessman-thinking-isolated-white-background_1368-6484.jpg", alt: "Michael Chen"},
{
src: "http://img.b2bpic.net/free-photo/pretty-woman-playing-with-party-accesories_1187-3746.jpg",
alt: "Emily Rodriguez",
},
src: "http://img.b2bpic.net/free-photo/pretty-woman-playing-with-party-accesories_1187-3746.jpg", alt: "Emily Rodriguez"},
{
src: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-relaxed_1298-290.jpg",
alt: "David Kim",
},
src: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-relaxed_1298-290.jpg", alt: "David Kim"},
{
src: "http://img.b2bpic.net/free-photo/attractive-young-middle-eastern-model-touching-her-pretty-face-with-flawless-skin-smiling_633478-949.jpg",
alt: "Stylish customer profile picture",
},
src: "http://img.b2bpic.net/free-photo/attractive-young-middle-eastern-model-touching-her-pretty-face-with-flawless-skin-smiling_633478-949.jpg", alt: "Stylish customer profile picture"},
]}
avatarText="Join 100K+ Happy Customers!"
imageSrc="http://img.b2bpic.net/free-photo/women-s-day-still-life-with-makeup-jewelry_23-2149263197.jpg"
@@ -115,20 +91,14 @@ export default function LandingPage() {
useInvertedBackground={true}
title="About E-Shop Pro"
description={[
"At E-Shop Pro, we believe in providing an unparalleled online shopping experience. Our mission is to connect you with high-quality products that enhance your daily life, all while ensuring exceptional customer service and value.",
"We carefully curate our selection, partnering with trusted brands and artisans to bring you a diverse range of items. From the latest tech innovations to timeless home decor, every product is chosen for its quality, functionality, and aesthetic appeal.",
"Our commitment extends beyond just selling products. We strive to build a community where customers feel confident and inspired. Experience the future of e-commerce with E-Shop Pro – where quality meets convenience.",
]}
"At E-Shop Pro, we believe in providing an unparalleled online shopping experience. Our mission is to connect you with high-quality products that enhance your daily life, all while ensuring exceptional customer service and value.", "We carefully curate our selection, partnering with trusted brands and artisans to bring you a diverse range of items. From the latest tech innovations to timeless home decor, every product is chosen for its quality, functionality, and aesthetic appeal.", "Our commitment extends beyond just selling products. We strive to build a community where customers feel confident and inspired. Experience the future of e-commerce with E-Shop Pro – where quality meets convenience."]}
buttons={[
{
text: "Our Story",
href: "#about",
},
text: "Our Story", href: "#about"},
{
text: "Browse All Products",
href: "#products",
},
text: "Browse All Products", href: "#products"},
]}
buttonAnimation="slide-up"
showBorder={false}
/>
</div>
@@ -140,34 +110,16 @@ export default function LandingPage() {
useInvertedBackground={false}
features={[
{
id: "quality",
label: "Premium Quality",
title: "Handpicked Excellence",
items: [
"Only top-rated products",
"Rigorous quality checks",
"Durable and long-lasting items",
],
id: "quality", label: "Premium Quality", title: "Handpicked Excellence", items: [
"Only top-rated products", "Rigorous quality checks", "Durable and long-lasting items"],
},
{
id: "delivery",
label: "Fast Delivery",
title: "Swift & Secure Shipping",
items: [
"Expedited delivery options",
"Track your order live",
"Secure packaging guaranteed",
],
id: "delivery", label: "Fast Delivery", title: "Swift & Secure Shipping", items: [
"Expedited delivery options", "Track your order live", "Secure packaging guaranteed"],
},
{
id: "support",
label: "24/7 Support",
title: "Dedicated Customer Care",
items: [
"Assistance anytime, anywhere",
"Friendly and knowledgeable team",
"Hassle-free returns & exchanges",
],
id: "support", label: "24/7 Support", title: "Dedicated Customer Care", items: [
"Assistance anytime, anywhere", "Friendly and knowledgeable team", "Hassle-free returns & exchanges"],
},
]}
title="Why Choose E-Shop Pro?"
@@ -177,60 +129,24 @@ export default function LandingPage() {
<div id="products" data-section="products">
<ProductCardFour
animationType="scale-rotate"
animationType="blur-reveal"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={true}
carouselMode="buttons"
products={[
{
id: "prod1",
name: "Smart Fitness Watch",
price: "$129.99",
variant: "Black",
imageSrc: "http://img.b2bpic.net/free-photo/smartwatch-with-augmented-reality_1134-124.jpg",
imageAlt: "Smart Fitness Watch",
},
id: "prod1", name: "Smart Fitness Watch", price: "$129.99", variant: "Black", imageSrc: "http://img.b2bpic.net/free-photo/smartwatch-with-augmented-reality_1134-124.jpg", imageAlt: "Smart Fitness Watch"},
{
id: "prod2",
name: "Wireless Noise-Cancelling Headphones",
price: "$199.00",
variant: "Space Gray",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-headphones-near-vinyl-record-with-fingerprint_23-2147781812.jpg",
imageAlt: "Wireless Noise-Cancelling Headphones",
},
id: "prod2", name: "Wireless Noise-Cancelling Headphones", price: "$199.00", variant: "Space Gray", imageSrc: "http://img.b2bpic.net/free-photo/close-up-headphones-near-vinyl-record-with-fingerprint_23-2147781812.jpg", imageAlt: "Wireless Noise-Cancelling Headphones"},
{
id: "prod3",
name: "Portable Bluetooth Speaker",
price: "$79.50",
variant: "Blue",
imageSrc: "http://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170100.jpg",
imageAlt: "Portable Bluetooth Speaker",
},
id: "prod3", name: "Portable Bluetooth Speaker", price: "$79.50", variant: "Blue", imageSrc: "http://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170100.jpg", imageAlt: "Portable Bluetooth Speaker"},
{
id: "prod4",
name: "Ergonomic Office Chair",
price: "$299.00",
variant: "Grey",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-chair-indoors_23-2151108699.jpg",
imageAlt: "Ergonomic Office Chair",
},
id: "prod4", name: "Ergonomic Office Chair", price: "$299.00", variant: "Grey", imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-chair-indoors_23-2151108699.jpg", imageAlt: "Ergonomic Office Chair"},
{
id: "prod5",
name: "High-Performance Gaming Mouse",
price: "$59.99",
variant: "RGB",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-gaming-setup-arrangement_23-2149680238.jpg",
imageAlt: "High-Performance Gaming Mouse",
},
id: "prod5", name: "High-Performance Gaming Mouse", price: "$59.99", variant: "RGB", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-gaming-setup-arrangement_23-2149680238.jpg", imageAlt: "High-Performance Gaming Mouse"},
{
id: "prod6",
name: "Compact Mirrorless Camera",
price: "$649.00",
variant: "Silver",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-professional-reflex-camera_52683-128977.jpg",
imageAlt: "Compact Mirrorless Camera",
},
id: "prod6", name: "Compact Mirrorless Camera", price: "$649.00", variant: "Silver", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-professional-reflex-camera_52683-128977.jpg", imageAlt: "Compact Mirrorless Camera"},
]}
title="Discover Our Best Sellers"
description="Explore a wide range of products designed to meet your every need. From essential gadgets to unique gifts, we've got you covered."
@@ -242,84 +158,42 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
names={[
"Google",
"Amazon",
"Shopify",
"Microsoft",
"FedEx",
"UPS",
"DHL",
]}
"Google", "Amazon", "Shopify", "Microsoft", "FedEx", "UPS", "DHL"]}
title="Trusted by Leading Brands"
description="Our commitment to excellence has earned the trust of industry leaders worldwide."
buttons={[
{
text: "Partner With Us",
},
text: "Partner With Us"},
]}
tagAnimation="slide-up"
buttonAnimation="slide-up"
speed={50}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
animationType="slide-up"
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "Sarah Johnson",
handle: "@sarah_j",
testimonial: "E-Shop Pro made online shopping a breeze! Their selection is fantastic, and everything arrived super fast. Highly recommend!",
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-blonde-woman-wearing-casual-striped-tshirt-isolated-white-background-looking-away-side-with-smile-face-natural-expression-laughing-confident_839833-30463.jpg",
imageAlt: "Sarah Johnson",
icon: Quote,
id: "1", name: "Sarah Johnson", handle: "@sarah_j", testimonial: "E-Shop Pro made online shopping a breeze! Their selection is fantastic, and everything arrived super fast. Highly recommend!", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-blonde-woman-wearing-casual-striped-tshirt-isolated-white-background-looking-away-side-with-smile-face-natural-expression-laughing-confident_839833-30463.jpg", imageAlt: "Sarah Johnson", icon: Quote,
},
{
id: "2",
name: "Michael Chen",
handle: "@mike_c",
testimonial: "I was impressed by the quality of the products and the seamless checkout process. E-Shop Pro is now my go-to for online purchases.",
imageSrc: "http://img.b2bpic.net/free-photo/young-man-funny-expression_1194-2982.jpg",
imageAlt: "Michael Chen",
icon: Quote,
id: "2", name: "Michael Chen", handle: "@mike_c", testimonial: "I was impressed by the quality of the products and the seamless checkout process. E-Shop Pro is now my go-to for online purchases.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-funny-expression_1194-2982.jpg", imageAlt: "Michael Chen", icon: Quote,
},
{
id: "3",
name: "Emily Rodriguez",
handle: "@emily_r",
testimonial: "Excellent customer service and an amazing variety of items. It's truly a professional and user-friendly platform.",
imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-caucasian-girl-with-pixie-haircut-pointing-camera-isolated-olive-green-background-with-copy-space_141793-88505.jpg",
imageAlt: "Emily Rodriguez",
icon: Quote,
id: "3", name: "Emily Rodriguez", handle: "@emily_r", testimonial: "Excellent customer service and an amazing variety of items. It's truly a professional and user-friendly platform.", imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-caucasian-girl-with-pixie-haircut-pointing-camera-isolated-olive-green-background-with-copy-space_141793-88505.jpg", imageAlt: "Emily Rodriguez", icon: Quote,
},
{
id: "4",
name: "David Kim",
handle: "@david_k",
testimonial: "The animations and overall design of the website are top-notch. It makes browsing a delightful experience. Keep up the great work!",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-handsome-african-student-with-beard-dressed-denim-shirt-smiling-happily-showing-his-white-teeth-having-joyful-contented-look_273609-1853.jpg",
imageAlt: "David Kim",
icon: Quote,
id: "4", name: "David Kim", handle: "@david_k", testimonial: "The animations and overall design of the website are top-notch. It makes browsing a delightful experience. Keep up the great work!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-handsome-african-student-with-beard-dressed-denim-shirt-smiling-happily-showing-his-white-teeth-having-joyful-contented-look_273609-1853.jpg", imageAlt: "David Kim", icon: Quote,
},
{
id: "5",
name: "Jessica Lee",
handle: "@jess_lee",
testimonial: "Finding unique products is so easy on E-Shop Pro. The descriptions are accurate, and the images are true to life. A perfect shopping experience!",
imageSrc: "http://img.b2bpic.net/free-photo/blissful-long-haired-woman-with-red-lips-making-selfie-winter-weekend-blithesome-ginger-girl-hat-expressing-happiness_197531-14132.jpg",
imageAlt: "Jessica Lee",
icon: Quote,
id: "5", name: "Jessica Lee", handle: "@jess_lee", testimonial: "Finding unique products is so easy on E-Shop Pro. The descriptions are accurate, and the images are true to life. A perfect shopping experience!", imageSrc: "http://img.b2bpic.net/free-photo/blissful-long-haired-woman-with-red-lips-making-selfie-winter-weekend-blithesome-ginger-girl-hat-expressing-happiness_197531-14132.jpg", imageAlt: "Jessica Lee", icon: Quote,
},
{
id: "6",
name: "Robert Green",
handle: "@robert_g",
testimonial: "The secure payment options give me peace of mind. E-Shop Pro is a reliable and enjoyable online store.",
imageSrc: "http://img.b2bpic.net/free-photo/elderly-man_23-2148138416.jpg",
imageAlt: "Robert Green",
icon: Quote,
id: "6", name: "Robert Green", handle: "@robert_g", testimonial: "The secure payment options give me peace of mind. E-Shop Pro is a reliable and enjoyable online store.", imageSrc: "http://img.b2bpic.net/free-photo/elderly-man_23-2148138416.jpg", imageAlt: "Robert Green", icon: Quote,
},
]}
title="What Our Customers Say"
@@ -335,34 +209,19 @@ export default function LandingPage() {
useInvertedBackground={false}
faqs={[
{
id: "faq1",
title: "What payment methods do you accept?",
content: "We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and Apple Pay for your convenience.",
},
id: "faq1", title: "What payment methods do you accept?", content: "We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and Apple Pay for your convenience."},
{
id: "faq2",
title: "How long does shipping take?",
content: "Shipping times vary depending on your location and the product. Standard shipping usually takes 3-7 business days, with expedited options available.",
},
id: "faq2", title: "How long does shipping take?", content: "Shipping times vary depending on your location and the product. Standard shipping usually takes 3-7 business days, with expedited options available."},
{
id: "faq3",
title: "What is your return policy?",
content: "We offer a 30-day money-back guarantee on most products. Items must be in their original condition. Please see our full return policy for details.",
},
id: "faq3", title: "What is your return policy?", content: "We offer a 30-day money-back guarantee on most products. Items must be in their original condition. Please see our full return policy for details."},
{
id: "faq4",
title: "Do you ship internationally?",
content: "Yes, we offer international shipping to many countries. Shipping costs and delivery times will be calculated at checkout based on your location.",
},
id: "faq4", title: "Do you ship internationally?", content: "Yes, we offer international shipping to many countries. Shipping costs and delivery times will be calculated at checkout based on your location."},
{
id: "faq5",
title: "How can I track my order?",
content: "Once your order has shipped, you will receive a tracking number via email. You can use this number on our 'Track Your Order' page.",
},
id: "faq5", title: "How can I track my order?", content: "Once your order has shipped, you will receive a tracking number via email. You can use this number on our 'Track Your Order' page."},
]}
title="Frequently Asked Questions"
description="Find quick answers to common questions about shopping, orders, and more."
faqsAnimation="slide-up"
faqsAnimation="blur-reveal"
showCard={true}
/>
</div>
@@ -374,27 +233,16 @@ export default function LandingPage() {
description="Have questions or need assistance? Our support team is here to help."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
required: true,
name: "name", type: "text", placeholder: "Your Name", required: true,
},
{
name: "email",
type: "email",
placeholder: "Your Email",
required: true,
name: "email", type: "email", placeholder: "Your Email", required: true,
},
{
name: "subject",
type: "text",
placeholder: "Subject",
},
name: "subject", type: "text", placeholder: "Subject"},
]}
textarea={{
name: "message",
placeholder: "Your Message",
rows: 4,
name: "message", placeholder: "Your Message", rows: 4,
required: true,
}}
imageSrc="http://img.b2bpic.net/free-photo/young-beautiful-female-support-phone-operator-speaking-consulting-office_176420-954.jpg"
@@ -413,77 +261,47 @@ export default function LandingPage() {
{
items: [
{
label: "Shop",
href: "#products",
},
label: "Shop", href: "#products"},
{
label: "Best Sellers",
href: "#products",
},
label: "Best Sellers", href: "#products"},
{
label: "New Arrivals",
href: "#products",
},
label: "New Arrivals", href: "#products"},
{
label: "Categories",
href: "#products",
},
label: "Categories", href: "#products"},
],
},
{
items: [
{
label: "About Us",
href: "#about",
},
label: "About Us", href: "#about"},
{
label: "Our Story",
href: "#about",
},
label: "Our Story", href: "#about"},
{
label: "Careers",
href: "#",
},
label: "Careers", href: "#"},
{
label: "Partners",
href: "#social-proof",
},
label: "Partners", href: "#social-proof"},
],
},
{
items: [
{
label: "Support",
href: "#faq",
},
label: "Support", href: "#faq"},
{
label: "FAQ",
href: "#faq",
},
label: "FAQ", href: "#faq"},
{
label: "Contact",
href: "#contact",
},
label: "Contact", href: "#contact"},
{
label: "Shipping & Returns",
href: "#faq",
},
label: "Shipping & Returns", href: "#faq"},
],
},
{
items: [
{
label: "Legal",
href: "#",
},
label: "Legal", href: "#"},
{
label: "Privacy Policy",
href: "#",
},
label: "Privacy Policy", href: "#"},
{
label: "Terms of Service",
href: "#",
},
label: "Terms of Service", href: "#"},
],
},
]}

230
src/app/products/page.tsx Normal file
View File

@@ -0,0 +1,230 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { useState } from 'react';
// Helper function to generate mock products for demonstration of 100+ items
const generateMockProducts = (count: number) => {
const products = [];
const baseProducts = [
{ name: "Smart Fitness Watch", price: "$129.99", variant: "Black", imageSrc: "http://img.b2bpic.net/free-photo/smartwatch-with-augmented-reality_1134-124.jpg", imageAlt: "Smart Fitness Watch", description: "Track your health and fitness with advanced sensors and a sleek design." },
{ name: "Wireless Headphones", price: "$199.00", variant: "Space Gray", imageSrc: "http://img.b2bpic.net/free-photo/close-up-headphones-near-vinyl-record-with-fingerprint_23-2147781812.jpg", imageAlt: "Wireless Noise-Cancelling Headphones", description: "Immerse yourself in premium sound quality with active noise cancellation." },
{ name: "Portable Speaker", price: "$79.50", variant: "Blue", imageSrc: "http://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170100.jpg", imageAlt: "Portable Bluetooth Speaker", description: "Take your music anywhere with this compact, powerful, and waterproof Bluetooth speaker." },
{ name: "Ergonomic Office Chair", price: "$299.00", variant: "Grey", imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-chair-indoors_23-2151108699.jpg", imageAlt: "Ergonomic Office Chair", description: "Experience ultimate comfort and support during long work hours with adjustable features." },
{ name: "Gaming Mouse", price: "$59.99", variant: "RGB", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-gaming-setup-arrangement_23-2149680238.jpg", imageAlt: "High-Performance Gaming Mouse", description: "Achieve precision and speed with customizable buttons and dynamic RGB lighting." },
{ name: "Mirrorless Camera", price: "$649.00", variant: "Silver", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-professional-reflex-camera_52683-128977.jpg", imageAlt: "Compact Mirrorless Camera", description: "Capture stunning photos and videos with professional-grade imaging in a compact body." },
{ name: "Smart Home Hub", price: "$89.00", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/concept-smart-home-digital-device_23-2148560965.jpg", imageAlt: "Smart Home Hub", description: "Control all your smart devices from one central hub, compatible with major smart home ecosystems." },
{ name: "Wireless Charger Pad", price: "$35.00", variant: "Black", imageSrc: "http://img.b2bpic.net/free-photo/cropped-shot-person-charging-mobile-phone-while-working-table_23-2147814429.jpg", imageAlt: "Wireless Charger Pad", description: "Charge your phone effortlessly with this sleek and fast wireless charging pad." },
{ name: "Robot Vacuum Cleaner", price: "$349.00", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/modern-robot-vacuum-cleaner-working-home_23-2148810756.jpg", imageAlt: "Robot Vacuum Cleaner", description: "Keep your floors spotless with intelligent navigation and powerful suction." },
{ name: "Espresso Machine", price: "$499.00", variant: "Stainless Steel", imageSrc: "http://img.b2bpic.net/free-photo/barista-serving-coffee-with-coffee-machine_23-2147775947.jpg", imageAlt: "Espresso Machine", description: "Brew cafe-quality espresso at home with this elegant and easy-to-use machine." },
];
for (let i = 0; i < count; i++) {
const baseProduct = baseProducts[i % baseProducts.length];
products.push({
...baseProduct,
id: `prod${i + 1}`,
name: `${baseProduct.name} ${Math.floor(i / baseProducts.length) + 1}`,
price: `$${(parseFloat(baseProduct.price.replace('$', '')) + (i % 10) * 0.5).toFixed(2)}`,
imageSrc: baseProduct.imageSrc,
imageAlt: `${baseProduct.imageAlt} ${Math.floor(i / baseProducts.length) + 1}`,
});
}
return products;
};
const MOCK_PRODUCTS = generateMockProducts(120); // Generate 120 mock products
export default function ProductsPage() {
const [searchTerm, setSearchTerm] = useState('');
const [selectedCategory, setSelectedCategory] = useState('All');
const [selectedPriceRange, setSelectedPriceRange] = useState('All');
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 12;
const categories = ['All', 'Electronics', 'Home Goods', 'Office', 'Gaming', 'Kitchen'];
const priceRanges = ['All', '$0-50', '$51-200', '$201-500', '$500+'];
const filteredProducts = MOCK_PRODUCTS.filter(product => {
const matchesSearch = product.name.toLowerCase().includes(searchTerm.toLowerCase());
let matchesCategory = true;
if (selectedCategory !== 'All') {
matchesCategory = product.description.toLowerCase().includes(selectedCategory.toLowerCase()); // Simple category match from description for mock
}
let matchesPrice = true;
if (selectedPriceRange !== 'All') {
const price = parseFloat(product.price.replace('$', ''));
if (selectedPriceRange === '$0-50') matchesPrice = price >= 0 && price <= 50;
else if (selectedPriceRange === '$51-200') matchesPrice = price > 50 && price <= 200;
else if (selectedPriceRange === '$201-500') matchesPrice = price > 200 && price <= 500;
else if (selectedPriceRange === '$500+') matchesPrice = price > 500;
}
return matchesSearch && matchesCategory && matchesPrice;
});
const totalPages = Math.ceil(filteredProducts.length / itemsPerPage);
const paginatedProducts = filteredProducts.slice(
(currentPage - 1) * itemsPerPage,
currentPage * itemsPerPage
);
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="small"
sizing="largeSmallSizeLargeTitles"
background="aurora"
cardStyle="layered-gradient"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Products", id: "/products" },
{ name: "About", id: "/#about" },
{ name: "FAQ", id: "/#faq" },
{ name: "Contact", id: "/#contact" },
]}
logoSrc="http://img.b2bpic.net/free-vector/trolley-online-shop-logo-ideas-inspiration-logo-design-template-vector-illustration-isolated-white-background_384344-1796.jpg"
logoAlt="E-Shop Pro Logo"
brandName="E-Shop Pro"
bottomLeftText="Global E-commerce"
bottomRightText="support@e-shoppro.com"
/>
</div>
<div className="container mx-auto p-8 lg:p-16">
<h1 className="text-5xl font-extrabold text-center mb-12">Our Product Catalog</h1>
{/* Filters and Search */}
<div className="mb-12 grid grid-cols-1 md:grid-cols-4 gap-6">
<input
type="text"
placeholder="Search products..."
className="p-4 border border-gray-300 rounded-lg shadow-sm focus:ring-primary-cta focus:border-primary-cta col-span-2"
value={searchTerm}
onChange={(e) => {
setSearchTerm(e.target.value);
setCurrentPage(1);
}}
/>
<select
className="p-4 border border-gray-300 rounded-lg shadow-sm focus:ring-primary-cta focus:border-primary-cta"
value={selectedCategory}
onChange={(e) => {
setSelectedCategory(e.target.value);
setCurrentPage(1);
}}
>
{categories.map(cat => <option key={cat} value={cat}>{cat}</option>)}
</select>
<select
className="p-4 border border-gray-300 rounded-lg shadow-sm focus:ring-primary-cta focus:border-primary-cta"
value={selectedPriceRange}
onChange={(e) => {
setSelectedPriceRange(e.target.value);
setCurrentPage(1);
}}
>
{priceRanges.map(range => <option key={range} value={range}>{range}</option>)}
</select>
</div>
<div id="product-grid" data-section="product-grid">
<ProductCardFour
animationType="scale-rotate"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
products={paginatedProducts}
title="Explore Our Collection"
description={`Showing ${paginatedProducts.length} of ${filteredProducts.length} products.`}
buttons={[
{
text: "Load More", // Conceptual lazy loading button
onClick: () => setCurrentPage(prev => Math.min(totalPages, prev + 1)),
href: "#"},
]}
buttonAnimation="slide-up"
/>
</div>
{/* Pagination */}
{totalPages > 1 && (
<div className="flex justify-center items-center gap-4 mt-12">
<button
onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
disabled={currentPage === 1}
className="px-6 py-3 bg-primary-cta text-white rounded-lg disabled:opacity-50"
>
Previous
</button>
<span className="text-lg">Page {currentPage} of {totalPages}</span>
<button
onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
disabled={currentPage === totalPages}
className="px-6 py-3 bg-primary-cta text-white rounded-lg disabled:opacity-50"
>
Next
</button>
</div>
)}
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoSrc="http://img.b2bpic.net/free-vector/trolley-online-shop-logo-ideas-inspiration-logo-design-template-vector-illustration-isolated-white-background_384344-1796.jpg"
logoAlt="E-Shop Pro Logo"
columns={[
{
items: [
{ label: "Shop", href: "/products" },
{ label: "Best Sellers", href: "/products" },
{ label: "New Arrivals", href: "/products" },
{ label: "Categories", href: "/products" },
],
},
{
items: [
{ label: "About Us", href: "/#about" },
{ label: "Our Story", href: "/#about" },
{ label: "Careers", href: "#" },
{ label: "Partners", href: "/#social-proof" },
],
},
{
items: [
{ label: "Support", href: "/#faq" },
{ label: "FAQ", href: "/#faq" },
{ label: "Contact", href: "/#contact" },
{ label: "Shipping & Returns", href: "/#faq" },
],
},
{
items: [
{ label: "Legal", href: "#" },
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
],
},
]}
logoText="E-Shop Pro"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}