import React, { useState, useEffect } from 'react'; import { ShoppingCart, Search, Menu, X, Smartphone, Laptop, Headphones, Watch, Zap, Star, ChevronRight, Facebook, Twitter, Instagram, Cpu, ShieldCheck, Truck } from 'lucide-react'; // Mock Data const PRODUCTS = [ { id: 1, name: "Telb Pro X1 Laptop", price: 1299.00, category: "Laptops", rating: 4.8, image: "https://images.unsplash.com/photo-1496181133206-80ce9b88a853?auto=format&fit=crop&q=80&w=800", badge: "Bestseller" }, { id: 2, name: "SonicBlast Headphones", price: 249.00, category: "Audio", rating: 4.6, image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&q=80&w=800", badge: "New" }, { id: 3, name: "TelbWatch Ultra", price: 399.00, category: "Wearables", rating: 4.9, image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&q=80&w=800", badge: null }, { id: 4, name: "CyberDeck Mechanical KB", price: 149.00, category: "Accessories", rating: 4.7, image: "https://images.unsplash.com/photo-1511467687858-23d96c32e4ae?auto=format&fit=crop&q=80&w=800", badge: "Sale" }, { id: 5, name: "Vision Tab S8", price: 699.00, category: "Tablets", rating: 4.5, image: "https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?auto=format&fit=crop&q=80&w=800", badge: null }, { id: 6, name: "PixelLens 4K Cam", price: 899.00, category: "Cameras", rating: 4.8, image: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&q=80&w=800", badge: "Limited" }, { id: 7, name: "Titan Gaming Mouse", price: 79.00, category: "Accessories", rating: 4.4, image: "https://images.unsplash.com/photo-1527864550417-7fd91fc51a46?auto=format&fit=crop&q=80&w=800", badge: null }, { id: 8, name: "Echo Smart Speaker", price: 99.00, category: "Audio", rating: 4.3, image: "https://images.unsplash.com/photo-1589492477829-5e65395b66cc?auto=format&fit=crop&q=80&w=800", badge: "Hot" } ]; const CATEGORIES = [ { name: "All", icon: Zap }, { name: "Laptops", icon: Laptop }, { name: "Audio", icon: Headphones }, { name: "Wearables", icon: Watch }, { name: "Accessories", icon: Cpu }, { name: "Phones", icon: Smartphone }, ]; export default function App() { const [activeCategory, setActiveCategory] = useState("All"); const [cart, setCart] = useState([]); const [isCartOpen, setIsCartOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const addToCart = (product) => { setCart([...cart, product]); // Simple toast notification simulation const btn = document.getElementById(`add-btn-${product.id}`); if (btn) { const originalText = btn.innerText; btn.innerText = "Added!"; btn.classList.add("bg-green-600"); setTimeout(() => { btn.innerText = originalText; btn.classList.remove("bg-green-600"); }, 1000); } }; const removeFromCart = (indexToRemove) => { setCart(cart.filter((_, index) => index !== indexToRemove)); }; const filteredProducts = PRODUCTS.filter(product => { const matchesCategory = activeCategory === "All" || product.category === activeCategory; const matchesSearch = product.name.toLowerCase().includes(searchQuery.toLowerCase()); return matchesCategory && matchesSearch; }); const cartTotal = cart.reduce((sum, item) => sum + item.price, 0); return (
{/* Navigation */} {/* Hero Section */}
New Season Arrival

Future Tech
Available Now.

Upgrade your digital lifestyle with the latest gadgets. Premium quality, verified performance, and next-day delivery on all Pro items.

{/* Features Banner */}

Free Shipping

On all orders over $150

2 Year Warranty

Full coverage on tech

Express Delivery

Get it in 24 hours

{/* Main Content */}
{/* Categories Scroller */}

Browse by Category

{/* Decorative arrows could go here */}
{CATEGORIES.map((cat) => ( ))}
{/* Product Grid */}
{filteredProducts.map((product) => (
{product.badge && (
{product.badge}
)}
{product.name}
{product.category}

{product.name}

${product.price}
{product.rating}
))}
{filteredProducts.length === 0 && (

No products found

Try adjusting your search or category filter.

)}
{/* Promo Section */}

Join the Telb.shop Ecosystem

Sign up for our newsletter to get early access to drops, exclusive tech news, and member-only flash sales.

{/* Footer */} {/* Cart Sidebar Overlay */} {isCartOpen && (
setIsCartOpen(false)} />

Shopping Cart ({cart.length})

{cart.length === 0 ? (

Your cart is empty.

) : ( cart.map((item, idx) => (
{item.name}

{item.name}

{item.category}

${item.price}
)) )}
{cart.length > 0 && (
Total ${cartTotal.toFixed(2)}

Secure checkout powered by TelbPay

)}
)}
); }