Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 459cfa1a86 | |||
| 201a47d39c | |||
| 428f3825ae | |||
| 7b70e29453 | |||
| cc239ddef8 | |||
| 235dc386fc | |||
| eacfabde65 | |||
| 9ca2093bf2 |
292
src/app/page.tsx
292
src/app/page.tsx
@@ -12,8 +12,179 @@ 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 } from "lucide-react";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
|
||||
interface CartItem {
|
||||
id: string;
|
||||
name: string;
|
||||
price: string;
|
||||
quantity: number;
|
||||
imageSrc: string;
|
||||
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(false);
|
||||
|
||||
// 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(() => {
|
||||
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);
|
||||
setSelectedCategoryId(categories[0].id);
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const addToCart = useCallback((product: any) => {
|
||||
setCart(prevCart => {
|
||||
const existingItem = prevCart.find(item => item.id === product.id);
|
||||
if (existingItem) {
|
||||
return prevCart.map(item =>
|
||||
item.id === product.id
|
||||
? { ...item, quantity: item.quantity + 1 }
|
||||
: item
|
||||
);
|
||||
} else {
|
||||
return [...prevCart, { ...product, quantity: 1 }];
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const removeFromCart = (id: string) => {
|
||||
setCart(cart.filter(item => item.id !== id));
|
||||
};
|
||||
|
||||
const updateQuantity = (id: string, quantity: number) => {
|
||||
if (quantity <= 0) {
|
||||
removeFromCart(id);
|
||||
} else {
|
||||
setCart(cart.map(item =>
|
||||
item.id === id ? { ...item, quantity } : item
|
||||
));
|
||||
}
|
||||
};
|
||||
|
||||
const calculateTotal = () => {
|
||||
return cart.reduce((total, item) => {
|
||||
const price = parseFloat(item.price.replace(/[^0-9]/g, ''));
|
||||
return total + (price * item.quantity);
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const selectedCategory = productCategories.find(cat => cat.id === selectedCategoryId);
|
||||
const productsToDisplay = selectedCategory ? selectedCategory.products.slice(0, 8).map(p => ({
|
||||
...p,
|
||||
onProductClick: () => addToCart(p)
|
||||
})) : [];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
@@ -37,8 +208,50 @@ export default function LandingPage() {
|
||||
{ name: "Контакты", id: "contact" }
|
||||
]}
|
||||
button={{ text: "Заказать", href: "contact" }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
{showCart && (
|
||||
<div className="fixed top-20 right-4 z-50 bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 w-96 max-h-96 overflow-y-auto">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-bold">Корзина</h3>
|
||||
<button onClick={() => setShowCart(false)} className="text-gray-500 hover:text-gray-700">✕</button>
|
||||
</div>
|
||||
{cart.length === 0 ? (
|
||||
<p className="text-gray-500">Корзина пуста</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="space-y-2 mb-4">
|
||||
{cart.map(item => (
|
||||
<div key={item.id} className="flex justify-between items-center p-2 border-b">
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold text-sm">{item.name}</p>
|
||||
<p className="text-xs text-gray-500">{item.price}</p>
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
value={item.quantity}
|
||||
onChange={(e) => updateQuantity(item.id, parseInt(e.target.value))}
|
||||
className="w-12 px-2 py-1 border rounded"
|
||||
/>
|
||||
<button
|
||||
onClick={() => removeFromCart(item.id)}
|
||||
className="ml-2 text-red-500 hover:text-red-700 text-sm"
|
||||
>
|
||||
Удалить
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-t pt-3">
|
||||
<p className="font-bold text-lg mb-3">Итого: {calculateTotal().toLocaleString()} ₸</p>
|
||||
<button className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 font-semibold">
|
||||
Оформить заказ
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
@@ -56,42 +269,55 @@ export default function LandingPage() {
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/rgb-lights-illuminated-fans-gaming-computer-close-up_482257-98446.jpg?_wi=1"
|
||||
imageAlt="Компьютерная техника"
|
||||
className="w-full"
|
||||
containerClassName="max-w-full"
|
||||
titleClassName="text-4xl md:text-5xl"
|
||||
descriptionClassName="text-lg md:text-xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
title="Наши продукты"
|
||||
description="Выберите из широкого ассортимента качественной компьютерной техники и комплектующих"
|
||||
tag="Популярное"
|
||||
tagIcon={Package}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{
|
||||
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", 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", 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", 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", imageAlt: "Gaming Mouse", isFavorited: false
|
||||
}
|
||||
]}
|
||||
buttons={[{ text: "Смотреть все товары", href: "#" }]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
<div className="w-full py-16 md:py-20 px-4">
|
||||
{!productCategories.length ? (
|
||||
<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>
|
||||
) : (
|
||||
<>
|
||||
<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>
|
||||
|
||||
<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