Spaces:

Mindigenous
/

clutchcore

Running

App Files Files Community

clutchcore / index.html

Mindigenous

make a functional cart interface for checkout products - Initial Deployment

c51b7f5 verified 9 months ago

raw

history blame contribute delete

60.9 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Nexus Gaming - Elite Gaming Gear</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: {
	500: '#8B5CF6',
	600: '#7C3AED',
	700: '#6D28D9',
	},
	neon: {
	blue: '#00F5FF',
	purple: '#A855F7',
	pink: '#EC4899',
	green: '#10B981'
	},
	dark: {
	900: '#0F172A',
	950: '#020617',
	},
	cyber: {
	yellow: '#FCD34D',
	orange: '#F59E0B'
	}
	},
	animation: {
	'pulse-slow': 'pulse 3s infinite cubic-bezier(0.4, 0, 0.6, 1)',
	'float': 'float 6s ease-in-out infinite',
	'neon-glow': 'neon-glow 1.5s ease-in-out infinite alternate',
	'cyber-glow': 'cyber-glow 2s ease-in-out infinite alternate',
	'scanline': 'scanline 8s linear infinite',
	},
	keyframes: {
	float: {
	'0%, 100%': { transform: 'translateY(0)' },
	'50%': { transform: 'translateY(-20px)' },
	},
	'neon-glow': {
	'from': { 'text-shadow': '0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00F5FF, 0 0 20px #00F5FF' },
	'to': { 'text-shadow': '0 0 10px #fff, 0 0 20px #fff, 0 0 30px #A855F7, 0 0 40px #A855F7' }
	},
	'cyber-glow': {
	'0%': { 'text-shadow': '0 0 5px #fff, 0 0 10px #FCD34D, 0 0 15px #F59E0B' },
	'50%': { 'text-shadow': '0 0 10px #fff, 0 0 20px #FCD34D, 0 0 25px #F59E0B' },
	'100%': { 'text-shadow': '0 0 5px #fff, 0 0 10px #FCD34D, 0 0 15px #F59E0B' }
	},
	'scanline': {
	'0%': { transform: 'translateY(-100%)' },
	'100%': { transform: 'translateY(100%)' }
	}
	}
	}
	}
	}
	</script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap');

	body {
	font-family: 'Poppins', sans-serif;
	background-color: #020617;
	color: #f8fafc;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
	}

	body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
	linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)),
	url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="1" height="1" fill="rgba(124, 58, 237, 0.1)"/></svg>');
	pointer-events: none;
	z-index: -1;
	}

	h1, h2, h3, h4 {
	font-family: 'Orbitron', sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
	}

	.hero-gradient {
	background: radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 40%),
	radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.15) 0%, transparent 40%);
	}

	.product-card {
	transition: all 0.3s ease;
	transform-style: preserve-3d;
	position: relative;
	overflow: hidden;
	}

	.product-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
	z-index: 1;
	opacity: 0;
	transition: opacity 0.3s ease;
	}

	.product-card:hover {
	transform: translateY(-10px) rotateX(5deg) rotateY(-5deg);
	box-shadow: 0 25px 50px -12px rgba(124, 58, 237, 0.4);
	}

	.product-card:hover::before {
	opacity: 1;
	}

	.testimonial-card {
	background: linear-gradient(145deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(124, 58, 237, 0.3);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	}

	.testimonial-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
	z-index: -1;
	}

	.testimonial-card:hover {
	border-color: rgba(124, 58, 237, 0.7);
	transform: translateY(-5px);
	}

	.star-rating {
	color: #fbbf24;
	}

	.neon-text {
	animation: neon-glow 1.5s ease-in-out infinite alternate;
	}

	.cyber-text {
	animation: cyber-glow 2s ease-in-out infinite alternate;
	}

	.hexagon {
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	}

	.glow-effect {
	box-shadow: 0 0 15px rgba(124, 58, 237, 0.7);
	}

	.nav-link {
	position: relative;
	}

	.nav-link::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, #8B5CF6, #EC4899);
	transition: width 0.3s ease;
	}

	.nav-link:hover::after {
	width: 100%;
	}

	.btn-gradient {
	background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	}

	.btn-gradient::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
	transform: rotate(45deg);
	transition: all 0.5s ease;
	}

	.btn-gradient:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px -5px rgba(139, 92, 246, 0.5);
	}

	.btn-gradient:hover::before {
	left: 100%;
	}

	.feature-icon {
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
	transition: all 0.3s ease;
	}

	.feature-card:hover .feature-icon {
	transform: scale(1.1);
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(236, 72, 153, 0.3) 100%);
	}

	.social-icon {
	transition: all 0.3s ease;
	background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%);
	}

	.social-icon:hover {
	transform: translateY(-5px) scale(1.1);
	background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
	}

	.cart-pulse {
	animation: pulse-slow 2s infinite;
	}

	@keyframes gradient-shift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
	}

	.gradient-text {
	background: linear-gradient(90deg, #8B5CF6, #EC4899, #00F5FF, #8B5CF6);
	background-size: 300% 300%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: gradient-shift 6s ease infinite;
	}

	.cyber-border {
	position: relative;
	}

	.cyber-border::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, #FCD34D, #F59E0B);
	z-index: 10;
	}

	.cyber-border::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, #F59E0B, #FCD34D);
	z-index: 10;
	}

	.scanlines {
	position: relative;
	overflow: hidden;
	}

	.scanlines::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
	to bottom,
	transparent 0%,
	rgba(255,255,255,0.05) 50%,
	transparent 100%
	);
	background-size: 100% 4px;
	pointer-events: none;
	animation: scanline 8s linear infinite;
	}

	.discount-badge {
	position: absolute;
	top: 10px;
	right: -30px;
	background: linear-gradient(135deg, #F59E0B, #EC4899);
	color: white;
	padding: 5px 30px;
	transform: rotate(45deg);
	font-size: 12px;
	font-weight: bold;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	}

	.product-tag {
	position: absolute;
	top: 15px;
	left: 15px;
	background: rgba(15, 23, 42, 0.8);
	color: #FCD34D;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: bold;
	border: 1px solid #F59E0B;
	z-index: 2;
	}

	.price-before {
	position: relative;
	color: #94A3B8;
	margin-right: 10px;
	}

	.price-before::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: #F87171;
	transform: rotate(-10deg);
	}
	</style>
	</head>
	<body class="min-h-screen">
	<!-- Header -->
	<header class="bg-dark-900/95 backdrop-blur-sm sticky top-0 z-50 border-b border-slate-800 cyber-border">
	<div class="container mx-auto px-4 py-3 flex justify-between items-center">
	<div class="flex items-center space-x-3">
	<div class="hexagon w-12 h-12 bg-gradient-to-br from-primary-600 to-neon-pink flex items-center justify-center glow-effect">
	<i class="fas fa-dice-d20 text-xl"></i>
	</div>
	<h1 class="text-2xl font-bold">CLUTCH<span class="gradient-text">CORE</span></h1>
	</div>

	<nav class="hidden lg:flex space-x-8 items-center">
	<a href="#hero" class="nav-link hover:text-neon-blue">Home</a>
	<a href="#products" class="nav-link hover:text-neon-blue">Products</a>
	<a href="#features" class="nav-link hover:text-neon-blue">Features</a>
	<a href="#testimonials" class="nav-link hover:text-neon-blue">Reviews</a>
	<a href="#contact" class="nav-link hover:text-neon-blue">Contact</a>
	</nav>

	<div class="flex items-center space-x-6">
	<div class="hidden md:block relative">
	<i class="fas fa-search text-slate-400 absolute top-3 left-3"></i>
	<input type="text" placeholder="Search products..." class="bg-slate-800/50 rounded-full pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-600 w-48 transition-all duration-300 hover:w-56">
	</div>
	<button class="relative p-2 group" id="cart-button">
	<div class="w-10 h-10 rounded-full bg-slate-800/50 flex items-center justify-center group-hover:bg-primary-600/30 transition-all duration-300">
	<i class="fas fa-shopping-cart text-xl"></i>
	</div>
	<span class="cart-pulse absolute -top-1 -right-1 bg-red-500 text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
	</button>
	<button class="md:hidden p-2" id="mobile-menu-button">
	<i class="fas fa-bars text-xl"></i>
	</button>
	</div>
	</div>
	</header>

	<!-- Hero Section -->
	<section id="hero" class="hero-gradient pt-24 pb-32 relative overflow-hidden">
	<div class="absolute top-0 left-0 w-full h-full pointer-events-none">
	<div class="absolute top-20 left-20 w-64 h-64 rounded-full bg-neon-blue opacity-10 filter blur-3xl animate-pulse-slow"></div>
	<div class="absolute bottom-20 right-20 w-64 h-64 rounded-full bg-neon-pink opacity-10 filter blur-3xl animate-pulse-slow"></div>
	<div class="absolute top-1/3 right-1/4 w-48 h-48 rounded-full bg-cyan-500 opacity-5 filter blur-3xl animate-pulse-slow"></div>
	</div>

	<div class="container mx-auto px-4 max-w-6xl">
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
	<div class="relative z-10">
	<span class="bg-primary-600/20 text-neon-blue px-4 py-1 rounded-full font-medium uppercase tracking-wider text-sm flex items-center w-max">
	<span class="inline-block w-2 h-2 bg-neon-blue rounded-full mr-2 animate-pulse"></span>
	Next-Level Gaming
	</span>
	<h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold mt-6 mb-5 leading-tight cyber-text">Dominate The <span class="gradient-text">Battlefield</span></h1>
	<p class="text-slate-300 text-lg mb-8 max-w-lg">Precision-engineered gaming gear designed to give you the competitive edge. Experience unparalleled performance with our cutting-edge technology.</p>
	<div class="flex flex-wrap gap-4">
	<a href="#products" class="btn-gradient text-white font-semibold py-3 px-8 rounded-lg flex items-center">
	<span>Shop Now</span>
	<i class="fas fa-chevron-right ml-2 text-xs"></i>
	</a>
	<a href="#testimonials" class="bg-transparent border-2 border-primary-600 hover:bg-primary-600/20 text-white font-semibold py-3 px-8 rounded-lg transition duration-300 flex items-center">
	<span>View Reviews</span>
	<i class="fas fa-star ml-2 text-xs"></i>
	</a>
	</div>

	<div class="mt-12 flex flex-wrap gap-6">
	<div class="flex items-center bg-slate-800/50 p-3 rounded-lg border border-slate-700/50 hover:border-primary-600/50 transition-all">
	<div class="w-12 h-12 rounded-full bg-primary-600/20 flex items-center justify-center mr-3 text-neon-blue">
	<i class="fas fa-bolt"></i>
	</div>
	<div>
	<div class="font-bold">Ultra-Low Latency</div>
	<div class="text-sm text-slate-400">0.5ms Response</div>
	</div>
	</div>
	<div class="flex items-center bg-slate-800/50 p-3 rounded-lg border border-slate-700/50 hover:border-primary-600/50 transition-all">
	<div class="w-12 h-12 rounded-full bg-primary-600/20 flex items-center justify-center mr-3 text-neon-blue">
	<i class="fas fa-trophy"></i>
	</div>
	<div>
	<div class="font-bold">Pro-Grade</div>
	<div class="text-sm text-slate-400">Esports Certified</div>
	</div>
	</div>
	</div>
	</div>
	<div class="relative z-10">
	<div class="relative animate-float">
	<div class="absolute -inset-2 bg-gradient-to-r from-neon-blue to-neon-pink rounded-2xl opacity-50 blur-lg"></div>
	<img src="https://clutchcore.store/cdn/shop/files/38134e05f5841a6aab293b8e2274f4a4.jpg"
	alt="Xbox Controller"
	class="rounded-2xl border-4 border-primary-600/30 shadow-2xl shadow-primary-600/30 w-full max-w-lg mx-auto relative">
	<div class="discount-badge">20% OFF</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Brands Section -->
	<section class="py-12 bg-slate-900/50 border-y border-slate-800/50">
	<div class="container mx-auto px-4">
	<div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70 hover:opacity-100 transition-opacity duration-300">
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Xbox_logo_2012.svg/1200px-Xbox_logo_2012.svg.png" alt="Xbox" class="h-8 grayscale hover:grayscale-0 transition-all duration-300 hover:scale-110">
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/PlayStation_logo.svg/1200px-PlayStation_logo.svg.png" alt="PlayStation" class="h-8 grayscale hover:grayscale-0 transition-all duration-300 hover:scale-110">
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/NVIDIA_logo.svg/1200px-NVIDIA_logo.svg.png" alt="NVIDIA" class="h-8 grayscale hover:grayscale-0 transition-all duration-300 hover:scale-110">
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Intel_logo_%282006-2020%29.svg/1200px-Intel_logo_%282006-2020%29.svg.png" alt="Intel" class="h-8 grayscale hover:grayscale-0 transition-all duration-300 hover:scale-110">
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Razer_logo.svg/1200px-Razer_logo.svg.png" alt="Razer" class="h-8 grayscale hover:grayscale-0 transition-all duration-300 hover:scale-110">
	</div>
	</div>
	</section>

	<!-- Product Section -->
	<section id="products" class="py-20 relative">
	<div class="absolute top-0 left-0 w-full h-full pointer-events-none">
	<div class="absolute top-1/4 left-1/4 w-32 h-32 rounded-full bg-neon-purple opacity-5 filter blur-3xl"></div>
	<div class="absolute bottom-1/4 right-1/4 w-32 h-32 rounded-full bg-neon-blue opacity-5 filter blur-3xl"></div>
	<div class="absolute top-3/4 left-1/3 w-48 h-48 rounded-full bg-neon-pink opacity-5 filter blur-3xl"></div>
	</div>

	<div class="container mx-auto px-4 max-w-6xl">
	<div class="text-center mb-20">
	<span class="text-neon-blue font-medium flex justify-center items-center mb-3">
	<i class="fas fa-bolt mr-2"></i>
	PREMIUM COLLECTION
	</span>
	<h2 class="text-3xl md:text-4xl font-bold mb-3">Gaming <span class="gradient-text">Essentials</span></h2>
	<p class="text-slate-400 max-w-2xl mx-auto">Engineered for performance, designed for victory</p>
	</div>

	<!-- Product Grid -->
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
	<!-- Product 1 -->
	<div class="product-card bg-slate-800/50 rounded-xl overflow-hidden border border-slate-700/50 hover:border-primary-600/50 transition-all duration-300">
	<div class="relative">
	<span class="product-tag">BEST SELLER</span>
	<img src="https://clutchcore.store/cdn/shop/files/38134e05f5841a6aab293b8e2274f4a4.jpg"
	alt="Xbox Controller"
	class="w-full h-64 object-cover">
	</div>
	<div class="p-6">
	<h3 class="text-xl font-bold mb-2">Custom Xbox Series X/S Controller</h3>
	<p class="text-slate-400 text-sm mb-4">Wireless controller with customizable buttons and ultra-responsive analog sticks.</p>

	<div class="flex justify-between items-center mb-4">
	<div>
	<span class="price-before">$109.99</span>
	<span class="text-2xl font-bold text-neon-blue">$89.99</span>
	</div>
	<div class="star-rating flex space-x-1 text-sm">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	</div>

	<button class="btn-gradient text-white font-semibold py-3 px-6 rounded-lg w-full flex items-center justify-center group">
	<span>Add to Cart</span>
	<i class="fas fa-shopping-cart ml-3 group-hover:translate-x-1 transition-transform"></i>
	</button>
	</div>
	</div>

	<!-- Product 2 -->
	<div class="product-card bg-slate-800/50 rounded-xl overflow-hidden border border-slate-700/50 hover:border-primary-600/50 transition-all duration-300">
	<div class="relative">
	<span class="product-tag">LIMITED STOCK</span>
	<img src="https://clutchcore.store/cdn/shop/files/092c72d717b38f925fcab1ba2356a189.jpg"
	alt="Gaming Laptop"
	class="w-full h-64 object-cover">
	</div>
	<div class="p-6">
	<h3 class="text-xl font-bold mb-2">Blade Pro 17 Gaming Laptop</h3>
	<p class="text-slate-400 text-sm mb-4">Intel Core i7, RTX 3080, 360Hz 17.3" display for competitive gaming.</p>

	<div class="flex justify-between items-center mb-4">
	<div>
	<span class="text-2xl font-bold text-neon-blue">$2,399.99</span>
	</div>
	<div class="star-rating flex space-x-1 text-sm">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star-half-alt"></i>
	</div>
	</div>

	<button class="btn-gradient text-white font-semibold py-3 px-6 rounded-lg w-full flex items-center justify-center group">
	<span>Add to Cart</span>
	<i class="fas fa-shopping-cart ml-3 group-hover:translate-x-1 transition-transform"></i>
	</button>
	</div>
	</div>

	<!-- Product 3 -->
	<div class="product-card bg-slate-800/50 rounded-xl overflow-hidden border border-slate-700/50 hover:border-primary-600/50 transition-all duration-300">
	<div class="relative">
	<span class="product-tag">NEW RELEASE</span>
	<img src="https://clutchcore.store/cdn/shop/files/91e4ca1c293973527b27ac66b8fbb376.jpg"
	alt="Gaming Headphones"
	class="w-full h-64 object-cover">
	</div>
	<div class="p-6">
	<h3 class="text-xl font-bold mb-2">Pro Gaming Headset</h3>
	<p class="text-slate-400 text-sm mb-4">7.1 surround sound, noise-canceling microphone, memory foam ear cushions.</p>

	<div class="flex justify-between items-center mb-4">
	<div>
	<span class="price-before">$149.99</span>
	<span class="text-2xl font-bold text-neon-blue">$119.99</span>
	</div>
	<div class="star-rating flex space-x-1 text-sm">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	</div>

	<button class="btn-gradient text-white font-semibold py-3 px-6 rounded-lg w-full flex items-center justify-center group">
	<span>Add to Cart</span>
	<i class="fas fa-shopping-cart ml-3 group-hover:translate-x-1 transition-transform"></i>
	</button>
	</div>
	</div>
	</div>

	<div class="text-center mt-16">
	<a href="#" class="inline-flex items-center text-neon-blue hover:text-neon-pink transition-colors duration-300 font-semibold">
	View All Products
	<i class="fas fa-arrow-right ml-2"></i>
	</a>
	</div>
	</div>
	</section>

	<!-- Features Section -->
	<section id="features" class="py-20 bg-gradient-to-b from-slate-900/50 to-dark-950 relative overflow-hidden">
	<div class="absolute top-0 left-0 w-full h-full pointer-events-none">
	<div class="absolute top-1/3 left-1/4 w-64 h-64 rounded-full bg-neon-purple opacity-5 filter blur-3xl animate-pulse-slow"></div>
	<div class="absolute bottom-1/4 right-1/4 w-64 h-64 rounded-full bg-neon-blue opacity-5 filter blur-3xl animate-pulse-slow"></div>
	</div>

	<div class="container mx-auto px-4 max-w-6xl">
	<div class="text-center mb-16">
	<span class="text-neon-blue font-medium flex justify-center items-center mb-3">
	<i class="fas fa-bolt mr-2"></i>
	WHY CHOOSE NEXUS
	</span>
	<h2 class="text-3xl md:text-4xl font-bold mb-4">Built For <span class="gradient-text">Performance</span></h2>
	<p class="text-slate-400 max-w-2xl mx-auto">Every product is engineered to give you the competitive edge</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
	<div class="feature-card p-6 rounded-xl bg-slate-800/30 border border-slate-700/50 hover:border-primary-600/50 transition-all duration-300">
	<div class="feature-icon w-16 h-16 rounded-xl flex items-center justify-center mb-6 text-neon-blue text-2xl mx-auto">
	<i class="fas fa-tachometer-alt"></i>
	</div>
	<h3 class="text-xl font-bold mb-3 text-center">Ultra-Fast</h3>
	<p class="text-slate-400 text-center">0.5ms response time for competitive advantage</p>
	</div>

	<div class="feature-card p-6 rounded-xl bg-slate-800/30 border border-slate-700/50 hover:border-primary-600/50 transition-all duration-300">
	<div class="feature-icon w-16 h-16 rounded-xl flex items-center justify-center mb-6 text-neon-blue text-2xl mx-auto">
	<i class="fas fa-shield-alt"></i>
	</div>
	<h3 class="text-xl font-bold mb-3 text-center">2-Year Warranty</h3>
	<p class="text-slate-400 text-center">Comprehensive coverage for peace of mind</p>
	</div>

	<div class="feature-card p-6 rounded-xl bg-slate-800/30 border border-slate-700/50 hover:border-primary-600/50 transition-all duration-300">
	<div class="feature-icon w-16 h-16 rounded-xl flex items-center justify-center mb-6 text-neon-blue text-2xl mx-auto">
	<i class="fas fa-truck"></i>
	</div>
	<h3 class="text-xl font-bold mb-3 text-center">Fast Shipping</h3>
	<p class="text-slate-400 text-center">2-5 day delivery with tracking worldwide</p>
	</div>

	<div class="feature-card p-6 rounded-xl bg-slate-800/30 border border-slate-700/50 hover:border-primary-600/50 transition-all duration-300">
	<div class="feature-icon w-16 h-16 rounded-xl flex items-center justify-center mb-6 text-neon-blue text-2xl mx-auto">
	<i class="fas fa-headset"></i>
	</div>
	<h3 class="text-xl font-bold mb-3 text-center">24/7 Support</h3>
	<p class="text-slate-400 text-center">Dedicated team ready to assist you anytime</p>
	</div>
	</div>
	</div>
	</section>

	<!-- Stats Section -->
	<section class="py-16 bg-gradient-to-r from-slate-900 to-primary-900/30">
	<div class="container mx-auto px-4">
	<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
	<div class="p-6">
	<div class="text-4xl md:text-5xl font-bold text-neon-blue mb-2">10K+</div>
	<div class="text-slate-300 uppercase text-sm tracking-wider">Happy Gamers</div>
	</div>
	<div class="p-6">
	<div class="text-4xl md:text-5xl font-bold text-neon-pink mb-2">5+</div>
	<div class="text-slate-300 uppercase text-sm tracking-wider">Years Experience</div>
	</div>
	<div class="p-6">
	<div class="text-4xl md:text-5xl font-bold text-neon-green mb-2">100+</div>
	<div class="text-slate-300 uppercase text-sm tracking-wider">Products</div>
	</div>
	<div class="p-6">
	<div class="text-4xl md:text-5xl font-bold text-cyan-400 mb-2">24/7</div>
	<div class="text-slate-300 uppercase text-sm tracking-wider">Support</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Testimonials Section -->
	<section id="testimonials" class="py-20 relative overflow-hidden">
	<div class="absolute top-0 left-0 w-full h-full pointer-events-none">
	<div class="absolute top-1/3 left-1/4 w-64 h-64 rounded-full bg-neon-purple opacity-5 filter blur-3xl animate-pulse-slow"></div>
	<div class="absolute bottom-1/4 right-1/4 w-64 h-64 rounded-full bg-neon-blue opacity-5 filter blur-3xl animate-pulse-slow"></div>
	</div>

	<div class="container mx-auto px-4 max-w-6xl">
	<div class="text-center mb-16">
	<span class="text-neon-blue font-medium flex justify-center items-center mb-3">
	<i class="fas fa-star mr-2"></i>
	GAMER APPROVED
	</span>
	<h2 class="text-3xl md:text-4xl font-bold mb-4">What <span class="gradient-text">Players</span> Say</h2>
	<p class="text-slate-400 max-w-2xl mx-auto">Real reviews from competitive gamers who trust our gear</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
	<div class="testimonial-card rounded-xl p-8">
	<div class="star-rating flex mb-4 text-xl">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	<div class="text-lg leading-relaxed mb-6">"The custom Xbox controller is a game-changer! The ergonomics are perfect, and the response time is noticeably faster than stock controllers. Won my first tournament after switching to Nexus gear."</div>
	<div class="flex items-center">
	<div class="w-12 h-12 rounded-full bg-gradient-to-br from-primary-600 to-neon-pink flex items-center justify-center font-bold">
	RR
	</div>
	<div class="ml-4">
	<h4 class="font-bold">Riley M.</h4>
	<p class="text-slate-400 text-sm">Professional Gamer</p>
	</div>
	</div>
	</div>

	<div class="testimonial-card rounded-xl p-8">
	<div class="star-rating flex mb-4 text-xl">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	<div class="text-lg leading-relaxed mb-6">"The Blade Pro laptop handles everything I throw at it - from competitive gaming to 3D rendering. The 360Hz display makes such a difference in fast-paced shooters. Best investment I've made!"</div>
	<div class="flex items-center">
	<div class="w-12 h-12 rounded-full bg-gradient-to-br from-primary-600 to-neon-pink flex items-center justify-center font-bold">
	LR
	</div>
	<div class="ml-4">
	<h4 class="font-bold">Leila R.</h4>
	<p class="text-slate-400 text-sm">Game Developer</p>
	</div>
	</div>
	</div>

	<div class="testimonial-card rounded-xl p-8">
	<div class="star-rating flex mb-4 text-xl">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	<div class="text-lg leading-relaxed mb-6">"The 7.1 headphones give me such a competitive edge in FPS games. I can pinpoint enemy locations with incredible accuracy. Plus, they're comfortable for 12+ hour streams."</div>
	<div class="flex items-center">
	<div class="w-12 h-12 rounded-full bg-gradient-to-br from-primary-600 to-neon-pink flex items-center justify-center font-bold">
	ST
	</div>
	<div class="ml-4">
	<h4 class="font-bold">Sasha T.</h4>
	<p class="text-slate-400 text-sm">Esports Competitor</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Newsletter Section -->
	<section id="contact" class="py-20 bg-gradient-to-br from-primary-900/30 to-neon-pink/30 relative overflow-hidden">
	<div class="absolute top-0 left-0 w-full h-full pointer-events-none">
	<div class="absolute top-1/3 left-1/3 w-64 h-64 rounded-full bg-neon-blue opacity-10 filter blur-3xl animate-pulse-slow"></div>
	<div class="absolute bottom-1/4 right-1/4 w-64 h-64 rounded-full bg-neon-purple opacity-10 filter blur-3xl animate-pulse-slow"></div>
	</div>

	<div class="container mx-auto px-4 max-w-4xl relative z-10">
	<div class="text-center mb-10">
	<h2 class="text-3xl md:text-4xl font-bold mb-4">Join The <span class="gradient-text">Nexus</span></h2>
	<p class="text-slate-300 max-w-2xl mx-auto">Subscribe for exclusive deals, early access to new products, and gaming tips from the pros.</p>
	</div>

	<form class="flex flex-col sm:flex-row gap-4 max-w-2xl mx-auto">
	<div class="relative flex-grow">
	<i class="fas fa-envelope text-slate-400 absolute top-4 left-4"></i>
	<input type="email"
	placeholder="Enter your email address"
	class="w-full bg-slate-800 border border-slate-700 rounded-lg pl-12 pr-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary-600 transition-all duration-300 hover:border-primary-600">
	</div>
	<button type="submit"
	class="btn-gradient text-white font-semibold py-3 px-8 rounded-lg transition duration-300 whitespace-nowrap flex items-center justify-center">
	<span>Subscribe</span>
	<i class="fas fa-paper-plane ml-2"></i>
	</button>
	</form>

	<div class="flex justify-center mt-8 space-x-4">
	<a href="#" class="w-10 h-10 rounded-full bg-primary-600/20 flex items-center justify-center text-neon-blue hover:bg-neon-blue hover:text-white transition-colors">
	<i class="fab fa-discord"></i>
	</a>
	<a href="#" class="w-10 h-10 rounded-full bg-primary-600/20 flex items-center justify-center text-neon-blue hover:bg-neon-blue hover:text-white transition-colors">
	<i class="fab fa-twitter"></i>
	</a>
	<a href="#" class="w-10 h-10 rounded-full bg-primary-600/20 flex items-center justify-center text-neon-blue hover:bg-neon-blue hover:text-white transition-colors">
	<i class="fab fa-instagram"></i>
	</a>
	<a href="#" class="w-10 h-10 rounded-full bg-primary-600/20 flex items-center justify-center text-neon-blue hover:bg-neon-blue hover:text-white transition-colors">
	<i class="fab fa-twitch"></i>
	</a>
	</div>
	</div>
	</section>

	<!-- Footer -->
	<footer class="bg-dark-950 border-t border-slate-800/50 pt-16 pb-8 relative overflow-hidden">
	<div class="absolute top-0 left-0 w-full h-full pointer-events-none">
	<div class="absolute top-1/4 left-1/4 w-32 h-32 rounded-full bg-neon-purple opacity-5 filter blur-3xl"></div>
	</div>

	<div class="container mx-auto px-4 relative z-10">
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 mb-10">
	<div class="col-span-1 lg:col-span-2">
	<div class="flex items-center space-x-3 mb-6">
	<div class="hexagon w-12 h-12 bg-gradient-to-br from-primary-600 to-neon-pink flex items-center justify-center">
	<i class="fas fa-gamepad text-xl"></i>
	</div>
	<h1 class="text-2xl font-bold">CLUTCH<span class="gradient-text">CORE</span></h1>
	</div>
	<p class="text-slate-400 mb-6 max-w-md">Your ultimate destination for premium gaming equipment. We're dedicated to enhancing your gaming experience with top-quality products and unparalleled support.</p>
	<div class="flex space-x-4">
	<a href="#" class="social-icon w-10 h-10 rounded-full flex items-center justify-center">
	<i class="fab fa-twitter"></i>
	</a>
	<a href="#" class="social-icon w-10 h-10 rounded-full flex items-center justify-center">
	<i class="fab fa-facebook-f"></i>
	</a>
	<a href="#" class="social-icon w-10 h-10 rounded-full flex items-center justify-center">
	<i class="fab fa-instagram"></i>
	</a>
	<a href="#" class="social-icon w-10 h-10 rounded-full flex items-center justify-center">
	<i class="fab fa-youtube"></i>
	</a>
	<a href="#" class="social-icon w-10 h-10 rounded-full flex items-center justify-center">
	<i class="fab fa-discord"></i>
	</a>
	</div>
	</div>

	<div>
	<h3 class="text-lg font-bold mb-6">Shop</h3>
	<ul class="space-y-4">
	<li><a href="#" class="text-slate-400 hover:text-neon-blue transition">Controllers</a></li>
	<li><a href="#" class="text-slate-400 hover:text-neon-blue transition">PCs & Laptops</a></li>
	<li><a href="#" class="text-slate-400 hover:text-neon-blue transition">Headsets</a></li>
	<li><a href="#" class="text-slate-400 hover:text-neon-blue transition">Keyboards</a></li>
	<li><a href="#" class="text-slate-400 hover:text-neon-blue transition">Mice</a></li>
	</ul>
	</div>

	<div>
	<h3 class="text-lg font-bold mb-6">Support</h3>
	<ul class="space-y-4">
	<li><a href="#" class="text-slate-400 hover:text-neon-blue transition">Contact Us</a></li>
	<li><a href="#" class="text-slate-400 hover:text-neon-blue transition">FAQs</a></li>
	<li><a href="#" class="text-slate-400 hover:text-neon-blue transition">Warranty</a></li>
	<li><a href="#" class="text-slate-400 hover:text-neon-blue transition">Returns</a></li>
	<li><a href="#" class="text-slate-400 hover:text-neon-blue transition">Shipping Info</a></li>
	</ul>
	</div>

	<div>
	<h3 class="text-lg font-bold mb-6">Company</h3>
	<ul class="space-y-4">
	<li><a href="#" class="text-slate-400 hover:text-neon-blue transition">About Us</a></li>
	<li><a href="#" class="text-slate-400 hover:text-neon-blue transition">Careers</a></li>
	<li><a href="#" class="text-slate-400 hover:text-neon-blue transition">Partnerships</a></li>
	<li><a href="#" class="text-slate-400 hover:text-neon-blue transition">Reviews</a></li>
	<li><a href="#" class="text-slate-400 hover:text-neon-blue transition">Press Kit</a></li>
	</ul>
	</div>
	</div>

	<div class="pt-10 border-t border-slate-800/50 text-center text-slate-500 text-sm">
	<p>Copyright © 2023 Nexus Gaming. All rights reserved. <a href="#" class="hover:text-neon-blue transition">Privacy Policy</a> \| <a href="#" class="hover:text-neon-blue transition">Terms of Service</a></p>
	</div>
	</div>
	</footer>

	<!-- Cart Modal -->
	<div id="cart-modal" class="fixed inset-0 z-50 hidden">
	<div class="absolute inset-0 bg-black/70 backdrop-blur-sm" id="cart-backdrop"></div>
	<div class="absolute right-0 top-0 h-full w-full max-w-md bg-dark-900 shadow-xl overflow-y-auto transition-all duration-300 transform translate-x-full">
	<div class="p-6">
	<div class="flex justify-between items-center mb-6">
	<h3 class="text-2xl font-bold">Your Cart (<span id="cart-count">0</span>)</h3>
	<button id="close-cart" class="text-slate-400 hover:text-white">
	<i class="fas fa-times text-xl"></i>
	</button>
	</div>

	<div id="cart-items" class="space-y-4">
	<!-- Cart items will be added here dynamically -->
	<div class="text-center py-10 text-slate-400" id="empty-cart-message">
	<i class="fas fa-shopping-cart text-4xl mb-4 opacity-30"></i>
	<p>Your cart is empty</p>
	</div>
	</div>

	<div class="border-t border-slate-800 mt-6 pt-6">
	<div class="flex justify-between mb-4">
	<span>Subtotal</span>
	<span class="font-bold" id="cart-subtotal">$0.00</span>
	</div>
	<div class="flex justify-between mb-6">
	<span>Shipping</span>
	<span class="font-bold">Free</span>
	</div>
	<button class="btn-gradient text-white font-semibold py-3 px-6 rounded-lg w-full">
	Proceed to Checkout
	</button>
	<p class="text-center text-slate-400 text-sm mt-4">or <a href="#products" class="text-neon-blue hover:underline">continue shopping</a></p>
	</div>
	</div>
	</div>
	</div>

	<!-- Back to Top Button -->
	<button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-primary-600 rounded-full flex items-center justify-center text-white shadow-lg hover:bg-primary-700 transition-all duration-300 opacity-0 invisible">
	<i class="fas fa-arrow-up"></i>
	</button>

	<script>
	// Smooth scrolling for navigation links
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function (e) {
	e.preventDefault();

	const targetId = this.getAttribute('href');
	if(targetId === '#') return;

	const targetElement = document.querySelector(targetId);
	if(targetElement) {
	targetElement.scrollIntoView({
	behavior: 'smooth'
	});
	}
	});
	});

	// Mobile menu toggle
	const mobileMenuButton = document.getElementById('mobile-menu-button');
	mobileMenuButton.addEventListener('click', () => {
	alert('Mobile menu would open here in a complete implementation');
	});

	// Cart functionality
	const cart = {
	items: [],
	total: 0,

	addItem: function(product) {
	const existingItem = this.items.find(item => item.id === product.id);
	if (existingItem) {
	existingItem.quantity += 1;
	} else {
	this.items.push({
	...product,
	quantity: 1
	});
	}
	this.updateCart();
	},

	removeItem: function(id) {
	this.items = this.items.filter(item => item.id !== id);
	this.updateCart();
	},

	updateQuantity: function(id, quantity) {
	const item = this.items.find(item => item.id === id);
	if (item) {
	item.quantity = quantity;
	if (item.quantity <= 0) {
	this.removeItem(id);
	}
	}
	this.updateCart();
	},

	calculateTotal: function() {
	this.total = this.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
	return this.total;
	},

	updateCart: function() {
	// Update cart count
	const totalItems = this.items.reduce((sum, item) => sum + item.quantity, 0);
	document.getElementById('cart-count').textContent = totalItems;
	document.querySelector('#cart-button span').textContent = totalItems;

	// Update cart items display
	const cartItemsContainer = document.getElementById('cart-items');
	const emptyCartMessage = document.getElementById('empty-cart-message');

	if (this.items.length === 0) {
	emptyCartMessage.classList.remove('hidden');
	cartItemsContainer.innerHTML = '';
	cartItemsContainer.appendChild(emptyCartMessage);
	} else {
	emptyCartMessage.classList.add('hidden');
	cartItemsContainer.innerHTML = this.items.map(item => `
	<div class="flex items-start gap-4 p-4 bg-slate-800/50 rounded-lg" data-id="${item.id}">
	<img src="${item.image}" alt="${item.name}" class="w-16 h-16 object-cover rounded">
	<div class="flex-grow">
	<h4 class="font-medium">${item.name}</h4>
	<p class="text-slate-400 text-sm">${item.price.toFixed(2)}</p>
	<div class="flex items-center mt-2">
	<button class="quantity-btn px-2 py-1 bg-slate-700 rounded-l" data-action="decrease">-</button>
	<input type="number" value="${item.quantity}" min="1" class="w-12 text-center bg-slate-800 border-y border-slate-700 py-1">
	<button class="quantity-btn px-2 py-1 bg-slate-700 rounded-r" data-action="increase">+</button>
	<button class="ml-auto text-red-400 hover:text-red-300" data-action="remove">
	<i class="fas fa-trash"></i>
	</button>
	</div>
	</div>
	</div>
	`).join('');
	}

	// Update subtotal
	document.getElementById('cart-subtotal').textContent = `${this.calculateTotal().toFixed(2)}`;

	// Save to localStorage
	localStorage.setItem('cart', JSON.stringify(this.items));
	},

	loadCart: function() {
	const savedCart = localStorage.getItem('cart');
	if (savedCart) {
	this.items = JSON.parse(savedCart);
	this.updateCart();
	}
	}
	};

	// Initialize cart
	cart.loadCart();

	// Cart modal functionality
	const cartButton = document.getElementById('cart-button');
	const cartModal = document.getElementById('cart-modal');
	const cartBackdrop = document.getElementById('cart-backdrop');
	const closeCart = document.getElementById('close-cart');

	function toggleCart() {
	cartModal.classList.toggle('hidden');
	setTimeout(() => {
	document.querySelector('#cart-modal > div').classList.toggle('translate-x-full');
	document.querySelector('#cart-modal > div').classList.toggle('translate-x-0');
	}, 10);
	}

	cartButton.addEventListener('click', toggleCart);
	cartBackdrop.addEventListener('click', toggleCart);
	closeCart.addEventListener('click', toggleCart);

	// Handle cart item interactions
	document.addEventListener('click', function(e) {
	const cartItem = e.target.closest('[data-id]');
	if (!cartItem) return;

	const id = cartItem.getAttribute('data-id');
	const action = e.target.closest('[data-action]')?.getAttribute('data-action');

	if (action === 'remove') {
	cart.removeItem(id);
	} else if (action === 'increase') {
	const item = cart.items.find(item => item.id === id);
	if (item) cart.updateQuantity(id, item.quantity + 1);
	} else if (action === 'decrease') {
	const item = cart.items.find(item => item.id === id);
	if (item) cart.updateQuantity(id, item.quantity - 1);
	}
	});

	// Handle quantity input changes
	document.addEventListener('change', function(e) {
	if (e.target.matches('#cart-items input[type="number"]')) {
	const cartItem = e.target.closest('[data-id]');
	const id = cartItem.getAttribute('data-id');
	const quantity = parseInt(e.target.value);
	cart.updateQuantity(id, quantity);
	}
	});

	// Search functionality
	const searchInput = document.querySelector('input[placeholder="Search products..."]');
	searchInput.addEventListener('keypress', (e) => {
	if (e.key === 'Enter') {
	alert(`Searching for: ${searchInput.value}`);
	searchInput.value = '';
	}
	});

	// Newsletter form submission
	const newsletterForm = document.querySelector('form');
	newsletterForm.addEventListener('submit', (e) => {
	e.preventDefault();
	const emailInput = newsletterForm.querySelector('input[type="email"]');
	alert(`Thank you for subscribing with ${emailInput.value}!`);
	emailInput.value = '';
	});

	// Social media links
	document.querySelectorAll('.social-icon').forEach(icon => {
	icon.addEventListener('click', (e) => {
	e.preventDefault();
	const platform = icon.querySelector('i').classList[1].replace('fa-', '');
	alert(`Would navigate to our ${platform} page`);
	});
	});

	// Add to cart functionality
	document.querySelectorAll('.btn-gradient').forEach(button => {
	if(button.textContent.trim().includes('Add to Cart')) {
	button.addEventListener('click', (e) => {
	e.preventDefault();

	const productCard = button.closest('.product-card');
	const product = {
	id: productCard.querySelector('img').src,
	name: productCard.querySelector('h3').textContent,
	price: parseFloat(productCard.querySelector('.text-2xl').textContent.replace('
	// Back to top button
	const backToTopButton = document.getElementById('back-to-top');
	window.addEventListener('scroll', () => {
	if (window.pageYOffset > 300) {
	backToTopButton.classList.remove('opacity-0', 'invisible');
	backToTopButton.classList.add('opacity-100', 'visible');
	} else {
	backToTopButton.classList.remove('opacity-100', 'visible');
	backToTopButton.classList.add('opacity-0', 'invisible');
	}
	});

	backToTopButton.addEventListener('click', () => {
	window.scrollTo({
	top: 0,
	behavior: 'smooth'
	});
	});

	// Product card hover effect enhancement
	document.querySelectorAll('.product-card').forEach(card => {
	card.addEventListener('mousemove', (e) => {
	const rect = card.getBoundingClientRect();
	const x = e.clientX - rect.left;
	const y = e.clientY - rect.top;

	card.style.setProperty('--mouse-x', `${x}px`);
	card.style.setProperty('--mouse-y', `${y}px`);
	});
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Mindigenous/clutchcore" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>, '')),
	image: productCard.querySelector('img').src
	};

	cart.addItem(product);

	// Pulse animation on cart button
	cartButton.classList.add('animate-ping');
	setTimeout(() => {
	cartButton.classList.remove('animate-ping');
	}, 500);

	// Button feedback
	button.innerHTML = '<i class="fas fa-check mr-2"></i> Added!';
	setTimeout(() => {
	button.innerHTML = '<span>Add to Cart</span><i class="fas fa-shopping-cart ml-3 group-hover:translate-x-1 transition-transform"></i>';
	}, 2000);
	});
	}
	});

	// Back to top button
	const backToTopButton = document.getElementById('back-to-top');
	window.addEventListener('scroll', () => {
	if (window.pageYOffset > 300) {
	backToTopButton.classList.remove('opacity-0', 'invisible');
	backToTopButton.classList.add('opacity-100', 'visible');
	} else {
	backToTopButton.classList.remove('opacity-100', 'visible');
	backToTopButton.classList.add('opacity-0', 'invisible');
	}
	});

	backToTopButton.addEventListener('click', () => {
	window.scrollTo({
	top: 0,
	behavior: 'smooth'
	});
	});

	// Product card hover effect enhancement
	document.querySelectorAll('.product-card').forEach(card => {
	card.addEventListener('mousemove', (e) => {
	const rect = card.getBoundingClientRect();
	const x = e.clientX - rect.left;
	const y = e.clientY - rect.top;

	card.style.setProperty('--mouse-x', `${x}px`);
	card.style.setProperty('--mouse-y', `${y}px`);
	});
	});
	</script>
	</body>
	</html>