Merge version_3 into main #4
351
src/app/page.tsx
351
src/app/page.tsx
@@ -12,7 +12,7 @@ import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
||||
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { Zap, Package, Star, Shield, Headphones, CreditCard, Check, Award, Sparkles, Heart, Trophy, Mail, Facebook, Instagram, Linkedin, Twitter, ShoppingCart } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
interface CartItem {
|
||||
id: string;
|
||||
@@ -23,9 +23,129 @@ interface CartItem {
|
||||
variant: string;
|
||||
}
|
||||
|
||||
interface ProductCategory {
|
||||
id: string;
|
||||
name: string;
|
||||
products: any[];
|
||||
}
|
||||
|
||||
export default function LandingPage() {
|
||||
const [cart, setCart] = useState<CartItem[]>([]);
|
||||
const [showCart, setShowCart] = useState(false);
|
||||
const [productCategories, setProductCategories] = useState<ProductCategory[]>([]);
|
||||
const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null);
|
||||
const [isLoadingCategories, setIsLoadingCategories] = useState(true);
|
||||
|
||||
// All 60 products organized by category
|
||||
const allProducts = [
|
||||
// Laptops & Desktops (5 items)
|
||||
{ id: "1", name: "Gaming Laptop Pro", price: "450000 ₸", variant: "Black RTX 4060", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=1", imageAlt: "Gaming Laptop", category: "Laptops & Desktops", isFavorited: false },
|
||||
{ id: "2", name: "Desktop Workstation", price: "850000 ₸", variant: "RTX 4090 Build", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=1", imageAlt: "Workstation", category: "Laptops & Desktops", isFavorited: false },
|
||||
{ id: "3", name: "Budget Gaming Laptop", price: "320000 ₸", variant: "RTX 3060", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=1", imageAlt: "Budget Laptop", category: "Laptops & Desktops", isFavorited: false },
|
||||
{ id: "4", name: "Ultrabook Premium", price: "580000 ₸", variant: "13" Ultra Thin", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=1", imageAlt: "Ultrabook", category: "Laptops & Desktops", isFavorited: false },
|
||||
{ id: "5", name: "Mini PC", price: "145000 ₸", variant: "Compact i7", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=2", imageAlt: "Mini PC", category: "Laptops & Desktops", isFavorited: false },
|
||||
// Peripherals - Input (8 items)
|
||||
{ id: "6", name: "Mechanical Keyboard RGB", price: "35000 ₸", variant: "Red Switches 4 Colors", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=2", imageAlt: "Mechanical Keyboard", category: "Peripherals - Input", isFavorited: false },
|
||||
{ id: "7", name: "Wireless Gaming Mouse", price: "28000 ₸", variant: "White Optical", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=2", imageAlt: "Gaming Mouse", category: "Peripherals - Input", isFavorited: false },
|
||||
{ id: "8", name: "Gaming Mousepad XL", price: "12000 ₸", variant: "Cloth Surface", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=2", imageAlt: "Mousepad", category: "Peripherals - Input", isFavorited: false },
|
||||
{ id: "9", name: "Wireless Keyboard Set", price: "19000 ₸", variant: "2.4GHz USB", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=3", imageAlt: "Keyboard", category: "Peripherals - Input", isFavorited: false },
|
||||
{ id: "10", name: "Keyboard Wrist Rest", price: "6500 ₸", variant: "Memory Foam", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=3", imageAlt: "Wrist Rest", category: "Peripherals - Input", isFavorited: false },
|
||||
{ id: "11", name: "Gaming Mouse Pad Pro", price: "8900 ₸", variant: "Hard Surface", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=3", imageAlt: "Mouse Pad Pro", category: "Peripherals - Input", isFavorited: false },
|
||||
{ id: "12", name: "Mechanical Keyboard Compact", price: "32000 ₸", variant: "75% Layout", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=3", imageAlt: "Compact Keyboard", category: "Peripherals - Input", isFavorited: false },
|
||||
{ id: "13", name: "Ergonomic Mouse Vertical", price: "22000 ₸", variant: "USB Wired", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=4", imageAlt: "Vertical Mouse", category: "Peripherals - Input", isFavorited: false },
|
||||
// Displays & Monitors (7 items)
|
||||
{ id: "14", name: "4K Ultra Monitor", price: "185000 ₸", variant: "27 inch 144Hz", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=4", imageAlt: "4K Monitor", category: "Displays & Monitors", isFavorited: false },
|
||||
{ id: "15", name: "Gaming Monitor 240Hz", price: "125000 ₸", variant: "27" 1440p", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=4", imageAlt: "Gaming Monitor", category: "Displays & Monitors", isFavorited: false },
|
||||
{ id: "16", name: "Ultrawide Monitor", price: "165000 ₸", variant: "34" 3440x1440", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=4", imageAlt: "Ultrawide", category: "Displays & Monitors", isFavorited: false },
|
||||
{ id: "17", name: "Portable Monitor USB-C", price: "95000 ₸", variant: "15.6 Inch FHD", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=5", imageAlt: "Portable Monitor", category: "Displays & Monitors", isFavorited: false },
|
||||
{ id: "18", name: "Budget IPS Monitor", price: "65000 ₸", variant: "24" 1080p", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=5", imageAlt: "Budget Monitor", category: "Displays & Monitors", isFavorited: false },
|
||||
{ id: "19", name: "Curved Gaming Monitor", price: "145000 ₸", variant: "32" 1440p Curved", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=5", imageAlt: "Curved Monitor", category: "Displays & Monitors", isFavorited: false },
|
||||
{ id: "20", name: "Touch Screen Monitor", price: "210000 ₸", variant: "27" 4K Touch", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=5", imageAlt: "Touch Monitor", category: "Displays & Monitors", isFavorited: false },
|
||||
// Computer Components (15 items)
|
||||
{ id: "21", name: "RTX 4070 Graphics Card", price: "380000 ₸", variant: "12GB GDDR6", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=6", imageAlt: "Graphics Card", category: "Computer Components", isFavorited: false },
|
||||
{ id: "22", name: "Intel Core i9 Processor", price: "280000 ₸", variant: "13th Gen", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=6", imageAlt: "CPU", category: "Computer Components", isFavorited: false },
|
||||
{ id: "23", name: "32GB RAM Kit", price: "45000 ₸", variant: "DDR5 5600MHz", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=6", imageAlt: "RAM", category: "Computer Components", isFavorited: false },
|
||||
{ id: "24", name: "1TB SSD NVMe", price: "42000 ₸", variant: "PCIe 4.0", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=6", imageAlt: "SSD", category: "Computer Components", isFavorited: false },
|
||||
{ id: "25", name: "750W Power Supply", price: "55000 ₸", variant: "80+ Gold Certified", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=7", imageAlt: "PSU", category: "Computer Components", isFavorited: false },
|
||||
{ id: "26", name: "CPU Cooler Tower", price: "18000 ₸", variant: "RGB LED", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=7", imageAlt: "Cooler", category: "Computer Components", isFavorited: false },
|
||||
{ id: "27", name: "Motherboard B850", price: "68000 ₸", variant: "Socket AM5", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=7", imageAlt: "Motherboard", category: "Computer Components", isFavorited: false },
|
||||
{ id: "28", name: "Liquid Cooler AIO", price: "65000 ₸", variant: "240mm", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=7", imageAlt: "AIO", category: "Computer Components", isFavorited: false },
|
||||
{ id: "29", name: "Case ATX Mid Tower", price: "35000 ₸", variant: "Tempered Glass", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=8", imageAlt: "Case", category: "Computer Components", isFavorited: false },
|
||||
{ id: "30", name: "CPU Cooler Air", price: "12000 ₸", variant: "2 Fan Tower", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=8", imageAlt: "Air Cooler", category: "Computer Components", isFavorited: false },
|
||||
{ id: "31", name: "2TB HDD Storage", price: "25000 ₸", variant: "3.5 Inch 7200RPM", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=8", imageAlt: "HDD", category: "Computer Components", isFavorited: false },
|
||||
{ id: "32", name: "RTX 4060 Graphics Card", price: "220000 ₸", variant: "8GB GDDR6", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=8", imageAlt: "GPU Budget", category: "Computer Components", isFavorited: false },
|
||||
{ id: "33", name: "AMD Ryzen 7 CPU", price: "195000 ₸", variant: "5700X3D", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=9", imageAlt: "CPU AMD", category: "Computer Components", isFavorited: false },
|
||||
{ id: "34", name: "16GB RAM DDR4", price: "28000 ₸", variant: "3200MHz", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=9", imageAlt: "RAM DDR4", category: "Computer Components", isFavorited: false },
|
||||
{ id: "35", name: "500W Power Supply", price: "32000 ₸", variant: "80+ Bronze", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=9", imageAlt: "PSU Budget", category: "Computer Components", isFavorited: false },
|
||||
// Audio & Video (8 items)
|
||||
{ id: "36", name: "Gaming Headset", price: "29000 ₸", variant: "Wireless 2.4GHz", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=9", imageAlt: "Headset", category: "Audio & Video", isFavorited: false },
|
||||
{ id: "37", name: "USB Microphone", price: "16000 ₸", variant: "Condenser", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=10", imageAlt: "Mic", category: "Audio & Video", isFavorited: false },
|
||||
{ id: "38", name: "Webcam 1080p Full HD", price: "9500 ₸", variant: "Auto Focus", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=10", imageAlt: "Webcam", category: "Audio & Video", isFavorited: false },
|
||||
{ id: "39", name: "Bluetooth Speaker", price: "12500 ₸", variant: "Portable", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=10", imageAlt: "Speaker", category: "Audio & Video", isFavorited: false },
|
||||
{ id: "40", name: "Studio Headphones", price: "45000 ₸", variant: "Professional", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=10", imageAlt: "Studio Headphones", category: "Audio & Video", isFavorited: false },
|
||||
{ id: "41", name: "USB-C Webcam 4K", price: "28000 ₸", variant: "4K Resolution", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=11", imageAlt: "4K Webcam", category: "Audio & Video", isFavorited: false },
|
||||
{ id: "42", name: "Wireless Earbuds", price: "8500 ₸", variant: "TWS Bluetooth", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=11", imageAlt: "Earbuds", category: "Audio & Video", isFavorited: false },
|
||||
{ id: "43", name: "Streaming Microphone", price: "18000 ₸", variant: "XLR", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=11", imageAlt: "XLR Mic", category: "Audio & Video", isFavorited: false },
|
||||
// Connectivity & Cables (8 items)
|
||||
{ id: "44", name: "HDMI 2.1 Cable", price: "4500 ₸", variant: "2M Length", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=11", imageAlt: "Cable", category: "Connectivity & Cables", isFavorited: false },
|
||||
{ id: "45", name: "DisplayPort Cable Premium", price: "6000 ₸", variant: "1.4 Spec", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=12", imageAlt: "Cable", category: "Connectivity & Cables", isFavorited: false },
|
||||
{ id: "46", name: "USB-C Hub Docking", price: "16000 ₸", variant: "7-in-1 Port", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=12", imageAlt: "Hub", category: "Connectivity & Cables", isFavorited: false },
|
||||
{ id: "47", name: "USB 3.0 Hub 7-Port", price: "11500 ₸", variant: "High Speed", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=12", imageAlt: "Hub", category: "Connectivity & Cables", isFavorited: false },
|
||||
{ id: "48", name: "Network Card Gigabit", price: "6500 ₸", variant: "PCIe", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=12", imageAlt: "Network Card", category: "Connectivity & Cables", isFavorited: false },
|
||||
{ id: "49", name: "WiFi 6 Card PCIe", price: "18000 ₸", variant: "AX200", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=13", imageAlt: "WiFi Card", category: "Connectivity & Cables", isFavorited: false },
|
||||
{ id: "50", name: "USB-C to HDMI Adapter", price: "5500 ₸", variant: "4K Support", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=13", imageAlt: "Adapter", category: "Connectivity & Cables", isFavorited: false },
|
||||
{ id: "51", name: "Thunderbolt 3 Cable", price: "7500 ₸", variant: "Premium Build", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=13", imageAlt: "Thunderbolt", category: "Connectivity & Cables", isFavorited: false },
|
||||
// Storage & Backup (7 items)
|
||||
{ id: "52", name: "External HDD 4TB", price: "35000 ₸", variant: "USB 3.0", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=13", imageAlt: "External HDD", category: "Storage & Backup", isFavorited: false },
|
||||
{ id: "53", name: "NAS Storage 2 Bay", price: "125000 ₸", variant: "Network Attached", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=14", imageAlt: "NAS", category: "Storage & Backup", isFavorited: false },
|
||||
{ id: "54", name: "2TB SSD External", price: "78000 ₸", variant: "Portable Fast", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=14", imageAlt: "External SSD", category: "Storage & Backup", isFavorited: false },
|
||||
{ id: "55", name: "USB Flash Drive 256GB", price: "8000 ₸", variant: "High Speed", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=14", imageAlt: "USB Drive", category: "Storage & Backup", isFavorited: false },
|
||||
{ id: "56", name: "Memory Card 512GB", price: "12000 ₸", variant: "UHS-II", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=14", imageAlt: "Memory Card", category: "Storage & Backup", isFavorited: false },
|
||||
{ id: "57", name: "Portable SSD 1TB", price: "45000 ₸", variant: "T7 Style", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=15", imageAlt: "Portable SSD", category: "Storage & Backup", isFavorited: false },
|
||||
{ id: "58", name: "Optical Drive Blu-ray", price: "15000 ₸", variant: "Internal", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=15", imageAlt: "Drive", category: "Storage & Backup", isFavorited: false },
|
||||
// Furniture & Accessories (6 items)
|
||||
{ id: "59", name: "Gaming Chair Premium", price: "185000 ₸", variant: "Ergonomic Design", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=15", imageAlt: "Chair", category: "Furniture & Accessories", isFavorited: false },
|
||||
{ id: "60", name: "Gaming Desk", price: "95000 ₸", variant: "Carbon Fiber", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=15", imageAlt: "Desk", category: "Furniture & Accessories", isFavorited: false }
|
||||
];
|
||||
|
||||
// Initialize categories on mount
|
||||
useEffect(() => {
|
||||
setIsLoadingCategories(true);
|
||||
// Simulate category loading delay
|
||||
const timer = setTimeout(() => {
|
||||
const categories = [
|
||||
{
|
||||
id: "laptops", name: "Laptops & Desktops", products: allProducts.filter(p => p.category === "Laptops & Desktops")
|
||||
},
|
||||
{
|
||||
id: "peripherals-input", name: "Peripherals - Input", products: allProducts.filter(p => p.category === "Peripherals - Input")
|
||||
},
|
||||
{
|
||||
id: "displays", name: "Displays & Monitors", products: allProducts.filter(p => p.category === "Displays & Monitors")
|
||||
},
|
||||
{
|
||||
id: "components", name: "Computer Components", products: allProducts.filter(p => p.category === "Computer Components")
|
||||
},
|
||||
{
|
||||
id: "audio-video", name: "Audio & Video", products: allProducts.filter(p => p.category === "Audio & Video")
|
||||
},
|
||||
{
|
||||
id: "connectivity", name: "Connectivity & Cables", products: allProducts.filter(p => p.category === "Connectivity & Cables")
|
||||
},
|
||||
{
|
||||
id: "storage", name: "Storage & Backup", products: allProducts.filter(p => p.category === "Storage & Backup")
|
||||
},
|
||||
{
|
||||
id: "furniture", name: "Furniture & Accessories", products: allProducts.filter(p => p.category === "Furniture & Accessories")
|
||||
}
|
||||
];
|
||||
setProductCategories(categories);
|
||||
setIsLoadingCategories(false);
|
||||
// Set first category as default
|
||||
setSelectedCategoryId(categories[0].id);
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const addToCart = (product: any) => {
|
||||
const existingItem = cart.find(item => item.id === product.id);
|
||||
@@ -61,164 +181,11 @@ export default function LandingPage() {
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const allProducts = [
|
||||
{
|
||||
id: "1", name: "Gaming Laptop Pro", price: "450000 ₸", variant: "Black RTX 4060", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=1", imageAlt: "Gaming Laptop", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "2", name: "Mechanical Keyboard RGB", price: "35000 ₸", variant: "Red Switches 4 Colors", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=1", imageAlt: "Mechanical Keyboard", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "3", name: "4K Ultra Monitor", price: "185000 ₸", variant: "27 inch 144Hz", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=1", imageAlt: "4K Monitor", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "4", name: "Wireless Gaming Mouse", price: "28000 ₸", variant: "White Optical", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=1", imageAlt: "Gaming Mouse", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "5", name: "RTX 4070 Graphics Card", price: "380000 ₸", variant: "12GB GDDR6", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=2", imageAlt: "Graphics Card", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "6", name: "Intel Core i9 Processor", price: "280000 ₸", variant: "13th Gen", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=2", imageAlt: "CPU", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "7", name: "32GB RAM Kit", price: "45000 ₸", variant: "DDR5 5600MHz", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=2", imageAlt: "RAM", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "8", name: "1TB SSD NVMe", price: "42000 ₸", variant: "PCIe 4.0", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=2", imageAlt: "SSD", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "9", name: "750W Power Supply", price: "55000 ₸", variant: "80+ Gold Certified", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=3", imageAlt: "PSU", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "10", name: "CPU Cooler Tower", price: "18000 ₸", variant: "RGB LED", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=3", imageAlt: "Cooler", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "11", name: "Gaming Mousepad XL", price: "12000 ₸", variant: "Cloth Surface", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=3", imageAlt: "Mousepad", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "12", name: "Mechanical Headrest", price: "22000 ₸", variant: "Ergonomic Support", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=3", imageAlt: "Headrest", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "13", name: "USB-C Hub Docking", price: "16000 ₸", variant: "7-in-1 Port", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=4", imageAlt: "Hub", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "14", name: "Wireless Charger Pad", price: "8500 ₸", variant: "Fast Charging", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=4", imageAlt: "Charger", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "15", name: "Screen Protector Glass", price: "5000 ₸", variant: "27 inch", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=4", imageAlt: "Protector", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "16", name: "HDMI 2.1 Cable", price: "4500 ₸", variant: "2M Length", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=4", imageAlt: "Cable", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "17", name: "DisplayPort Cable Premium", price: "6000 ₸", variant: "1.4 Spec", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=5", imageAlt: "Cable", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "18", name: "RGB LED Strip Kit", price: "9000 ₸", variant: "5 Meters", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=5", imageAlt: "LED Strip", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "19", name: "Thermal Paste Premium", price: "3500 ₸", variant: "5G Tube", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=5", imageAlt: "Thermal Paste", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "20", name: "Cable Management Kit", price: "7000 ₸", variant: "Velcro Ties", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=5", imageAlt: "Cables", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "21", name: "M.2 SSD Holder Mount", price: "2500 ₸", variant: "Aluminum", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=6", imageAlt: "Mount", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "22", name: "RAM Heat Sink Coolers", price: "4000 ₸", variant: "4 Piece Set", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=6", imageAlt: "Heatsinks", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "23", name: "GPU Support Bracket", price: "3000 ₸", variant: "Adjustable", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=6", imageAlt: "Bracket", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "24", name: "Anti-Static Wrist Band", price: "2000 ₸", variant: "Grounding", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=6", imageAlt: "Wrist Band", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "25", name: "Magnetic Screwdriver Set", price: "8000 ₸", variant: "12 Piece", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=7", imageAlt: "Tools", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "26", name: "Laptop Stand Portable", price: "11000 ₸", variant: "Aluminum Alloy", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=7", imageAlt: "Stand", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "27", name: "Monitor Arm Dual", price: "28000 ₸", variant: "Gas Spring", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=7", imageAlt: "Arm", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "28", name: "Desk Organizer Set", price: "9500 ₸", variant: "Bamboo", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=7", imageAlt: "Organizer", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "29", name: "Keyboard Wrist Rest", price: "6500 ₸", variant: "Memory Foam", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=8", imageAlt: "Wrist Rest", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "30", name: "Monitor Light Bar", price: "32000 ₸", variant: "Adjustable", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=8", imageAlt: "Light", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "31", name: "Laptop Cooling Pad", price: "14000 ₸", variant: "5 Fans", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=8", imageAlt: "Pad", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "32", name: "Portable Monitor USB-C", price: "95000 ₸", variant: "15.6 Inch FHD", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=8", imageAlt: "Portable Monitor", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "33", name: "Wireless Keyboard Set", price: "19000 ₸", variant: "2.4GHz USB", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=9", imageAlt: "Keyboard", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "34", name: "USB 3.0 Hub 7-Port", price: "11500 ₸", variant: "High Speed", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=9", imageAlt: "Hub", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "35", name: "Network Card Gigabit", price: "6500 ₸", variant: "PCIe", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=9", imageAlt: "Network Card", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "36", name: "WiFi 6 Card PCIe", price: "18000 ₸", variant: "AX200", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=9", imageAlt: "WiFi Card", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "37", name: "Sound Card Audio", price: "8500 ₸", variant: "7.1 Surround", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=10", imageAlt: "Sound Card", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "38", name: "2TB HDD Storage", price: "25000 ₸", variant: "3.5 Inch 7200RPM", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=10", imageAlt: "HDD", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "39", name: "External HDD 4TB", price: "35000 ₸", variant: "USB 3.0", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=10", imageAlt: "External HDD", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "40", name: "NAS Storage 2 Bay", price: "125000 ₸", variant: "Network Attached", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=10", imageAlt: "NAS", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "41", name: "Case Fan 120mm RGB", price: "5500 ₸", variant: "Quiet", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=11", imageAlt: "Fan", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "42", name: "Liquid Cooler AIO", price: "65000 ₸", variant: "240mm", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=11", imageAlt: "AIO", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "43", name: "Case ATX Mid Tower", price: "35000 ₸", variant: "Tempered Glass", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=11", imageAlt: "Case", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "44", name: "Motherboard B850", price: "68000 ₸", variant: "Socket AM5", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=11", imageAlt: "Motherboard", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "45", name: "CPU Cooler Air", price: "12000 ₸", variant: "2 Fan Tower", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=12", imageAlt: "Air Cooler", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "46", name: "Optical Drive Blu-ray", price: "15000 ₸", variant: "Internal", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=12", imageAlt: "Drive", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "47", name: "Gaming Headset", price: "29000 ₸", variant: "Wireless 2.4GHz", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=12", imageAlt: "Headset", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "48", name: "USB Microphone", price: "16000 ₸", variant: "Condenser", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=12", imageAlt: "Mic", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "49", name: "Webcam 1080p Full HD", price: "9500 ₸", variant: "Auto Focus", imageSrc: "http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29227.jpg?_wi=13", imageAlt: "Webcam", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "50", name: "Gaming Chair Premium", price: "185000 ₸", variant: "Ergonomic Design", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-black-keyboard-cropped-image-laptop-keyboard-computer-technology-gadget-concept_74855-24369.jpg?_wi=13", imageAlt: "Chair", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "51", name: "Gaming Desk", price: "95000 ₸", variant: "Carbon Fiber", imageSrc: "http://img.b2bpic.net/free-vector/glowing-search-radar-black-background_1284-18879.jpg?_wi=13", imageAlt: "Desk", isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "52", name: "Power Bank 65W", price: "18500 ₸", variant: "Fast Charging", imageSrc: "http://img.b2bpic.net/free-psd/black-wired-computer-mouse-transparent-background_84443-65260.jpg?_wi=13", imageAlt: "Power Bank", isFavorited: false
|
||||
}
|
||||
];
|
||||
const selectedCategory = productCategories.find(cat => cat.id === selectedCategoryId);
|
||||
const productsToDisplay = selectedCategory ? selectedCategory.products.slice(0, 8).map(p => ({
|
||||
...p,
|
||||
onProductClick: () => addToCart(p)
|
||||
})) : [];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -313,24 +280,54 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
title="Наши продукты"
|
||||
description="Выберите из широкого ассортимента из 50+ качественных компьютерных техники и комплектующих"
|
||||
tag="Популярное"
|
||||
tagIcon={Package}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
products={allProducts.slice(0, 8).map(p => ({
|
||||
...p,
|
||||
onProductClick: () => addToCart(p)
|
||||
}))}
|
||||
buttons={[{ text: "Смотреть все товары", href: "#" }]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
<div className="w-full py-16 md:py-20 px-4">
|
||||
{/* Category Loading State */}
|
||||
{isLoadingCategories ? (
|
||||
<div className="flex flex-col items-center justify-center min-h-96">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-current mb-4"></div>
|
||||
<p className="text-lg">Загрузка категорий товаров...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Category Navigation */}
|
||||
<div className="max-w-6xl mx-auto mb-8">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-6">Категории товаров</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
{productCategories.map((category) => (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => setSelectedCategoryId(category.id)}
|
||||
className={`p-4 rounded-lg font-semibold transition-all ${
|
||||
selectedCategoryId === category.id
|
||||
? "bg-blue-600 text-white shadow-lg"
|
||||
: "bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"
|
||||
}`}
|
||||
>
|
||||
{category.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Products Grid */}
|
||||
<ProductCardFour
|
||||
title={selectedCategory?.name || "Товары"}
|
||||
description={`Выберите из ${selectedCategory?.products.length || 0} качественных товаров в этой категории`}
|
||||
tag="Популярное"
|
||||
tagIcon={Package}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
products={productsToDisplay}
|
||||
buttons={[{ text: "Смотреть все товары", href: "#" }]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
|
||||
Reference in New Issue
Block a user