diff --git a/src/app/page.tsx b/src/app/page.tsx index 432fb38..1e87c99 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -33,25 +33,15 @@ export default function LandingPage() { @@ -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() {
@@ -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: "#"}, ], }, ]} diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx new file mode 100644 index 0000000..fecfbe6 --- /dev/null +++ b/src/app/products/page.tsx @@ -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 ( + + + + +
+

Our Product Catalog

+ + {/* Filters and Search */} +
+ { + setSearchTerm(e.target.value); + setCurrentPage(1); + }} + /> + + +
+ +
+ setCurrentPage(prev => Math.min(totalPages, prev + 1)), + href: "#"}, + ]} + buttonAnimation="slide-up" + /> +
+ + {/* Pagination */} + {totalPages > 1 && ( +
+ + Page {currentPage} of {totalPages} + +
+ )} +
+ + + + + ); +}