undefined / index.html
akbar4572's picture
link these buttons to their corresponding pages
cfc1396 verified
Raw History Blame Contribute Delete
24.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CG TechWear - Where Fashion Meets Technology</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#f97316',
secondary: '#eab308',
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Space Grotesk', sans-serif;
}
.hero-gradient {
background: linear-gradient(135deg, rgba(249,115,22,0.1) 0%, rgba(234,179,8,0.1) 100%);
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.4);
}
.nav-link:hover {
color: #f97316;
}
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
</head>
<body class="bg-white">
<!-- Animated Background -->
<div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div>
<!-- Navigation -->
<nav class="bg-white/90 backdrop-blur-md sticky top-0 z-50 shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<span class="text-primary font-bold text-2xl">CG</span>
<span class="font-bold text-2xl">TechWear</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="/index.html" class="nav-link text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="/clothing.html" class="nav-link text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Clothing</a>
<a href="/gadgets.html" class="nav-link text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Gadgets</a>
<a href="/products.html" class="nav-link text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">New Arrivals</a>
<a href="/about.html" class="nav-link text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">About</a>
</div>
</div>
</div>
<div class="flex items-center space-x-4">
<button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
<i data-feather="search"></i>
</button>
<a href="/cart.html" class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none relative">
<i data-feather="shopping-cart"></i>
<span id="cartCount" class="absolute -top-1 -right-1 bg-primary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center hidden">0</span>
</a>
<button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
<i data-feather="user"></i>
</button>
<div class="md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-gradient py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
<div class="mb-10 lg:mb-0">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
<span class="text-primary">Tech</span> Meets <span class="text-secondary">Fashion</span>
</h1>
<p class="text-lg md:text-xl text-gray-700 mb-8">
Discover the perfect fusion of cutting-edge technology and stylish clothing designed for the modern lifestyle.
</p>
<div class="flex space-x-4">
<a href="/products.html" class="bg-primary hover:bg-orange-600 text-white px-6 py-3 rounded-full font-medium transition duration-300 transform hover:scale-105">
Shop Now
</a>
<button class="border-2 border-primary text-primary hover:bg-primary hover:text-white px-6 py-3 rounded-full font-medium transition duration-300">
Explore
</button>
</div>
</div>
<div class="relative pulse-animation">
<img src="http://static.photos/technology/1200x630/42" alt="Techwear Fashion" class="rounded-xl shadow-2xl">
<div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-full shadow-lg">
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center">
<i data-feather="arrow-right" class="text-white"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Featured Categories -->
<section class="py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12">Featured Categories</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300">
<div class="h-48 overflow-hidden">
<img src="http://static.photos/fashion/1024x576/101" alt="Smart Clothing" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Smart Clothing</h3>
<p class="text-gray-600 mb-4">Wearable tech that monitors your health and enhances performance.</p>
<a href="#" class="text-primary font-medium flex items-center">
View Collection
<i data-feather="arrow-right" class="ml-2 w-4"></i>
</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300">
<div class="h-48 overflow-hidden">
<img src="http://static.photos/technology/1024x576/102" alt="Tech Gadgets" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Tech Gadgets</h3>
<p class="text-gray-600 mb-4">Innovative devices that complement your tech-savvy lifestyle.</p>
<a href="#" class="text-primary font-medium flex items-center">
View Collection
<i data-feather="arrow-right" class="ml-2 w-4"></i>
</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300">
<div class="h-48 overflow-hidden">
<img src="http://static.photos/workspace/1024x576/103" alt="Accessories" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Accessories</h3>
<p class="text-gray-600 mb-4">Essential add-ons to complete your techwear ensemble.</p>
<a href="#" class="text-primary font-medium flex items-center">
View Collection
<i data-feather="arrow-right" class="ml-2 w-4"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Featured Products -->
<section class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center mb-12">
<h2 class="text-3xl font-bold">Featured Products</h2>
<a href="#" class="text-primary font-medium flex items-center">
View All
<i data-feather="arrow-right" class="ml-2 w-4"></i>
</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Product 1 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
<div class="relative">
<img src="http://static.photos/technology/640x360/201" alt="Smart Jacket" class="w-full h-48 object-cover">
<div class="absolute top-3 right-3 bg-secondary text-white text-xs font-bold px-2 py-1 rounded-full">NEW</div>
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1">Quantum Smart Jacket</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-400">
<i data-feather="star" class="w-4 fill-current"></i>
<i data-feather="star" class="w-4 fill-current"></i>
<i data-feather="star" class="w-4 fill-current"></i>
<i data-feather="star" class="w-4 fill-current"></i>
<i data-feather="star" class="w-4 fill-current"></i>
</div>
<span class="text-gray-600 text-xs ml-1">(24)</span>
</div>
<div class="flex justify-between items-center">
<span class="font-bold text-primary">$249.99</span>
<button class="add-to-cart bg-primary text-white p-2 rounded-full hover:bg-orange-600 transition" data-id="1" data-name="Quantum Smart Jacket" data-price="249.99" data-image="http://static.photos/technology/640x360/201">
<i data-feather="shopping-cart" class="w-4"></i>
</button>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
<div class="relative">
<img src="http://static.photos/technology/640x360/202" alt="Smart Watch" class="w-full h-48 object-cover">
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1">Nexus Pro Watch</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-400">
<i data-feather="star" class="w-4 fill-current"></i>
<i data-feather="star" class="w-4 fill-current"></i>
<i data-feather="star" class="w-4 fill-current"></i>
<i data-feather="star" class="w-4 fill-current"></i>
<i data-feather="star" class="w-4 fill-current text-gray-300"></i>
</div>
<span class="text-gray-600 text-xs ml-1">(18)</span>
</div>
<div class="flex justify-between items-center">
<span class="font-bold text-primary">$179.99</span>
<button class="add-to-cart bg-primary text-white p-2 rounded-full hover:bg-orange-600 transition" data-id="2" data-name="Nexus Pro Watch" data-price="179.99" data-image="http://static.photos/technology/640x360/202">
<i data-feather="shopping-cart" class="w-4"></i>
</button>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
<div class="relative">
<img src="http://static.photos/fashion/640x360/203" alt="Smart Shoes" class="w-full h-48 object-cover">
<div class="absolute top-3 right-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded-full">SALE</div>
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1">Pulse Smart Shoes</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-400">
<i data-feather="star" class="w-4 fill-current"></i>
<i data-feather="star" class="w-4 fill-current"></i>
<i data-feather="star" class="w-4 fill-current"></i>
<i data-feather="star" class="w-4 fill-current"></i>
<i data-feather="star" class="w-4 fill-current"></i>
</div>
<span class="text-gray-600 text-xs ml-1">(32)</span>
</div>
<div class="flex justify-between items-center">
<div>
<span class="font-bold text-primary">$199.99</span>
<span class="text-gray-500 text-sm line-through ml-2">$249.99</span>
</div>
<button class="add-to-cart bg-primary text-white p-2 rounded-full hover:bg-orange-600 transition" data-id="3" data-name="Pulse Smart Shoes" data-price="199.99" data-image="http://static.photos/fashion/640x360/203">
<i data-feather="shopping-cart" class="w-4"></i>
</button>
</div>
</div>
</div>
<!-- Product 4 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
<div class="relative">
<img src="http://static.photos/technology/640x360/204" alt="Wireless Earbuds" class="w-full h-48 object-cover">
</div>
<div class="p-4">
<h3 class="font-semibold text-lg mb-1">Skyline Wireless Earbuds</h3>
<div class="flex items-center mb-2">
<div class="flex text-yellow-400">
<i data-feather="star" class="w-4 fill-current"></i>
<i data-feather="star" class="w-4 fill-current"></i>
<i data-feather="star" class="w-4 fill-current"></i>
<i data-feather="star" class="w-4 fill-current"></i>
<i data-feather="star" class="w-4 fill-current text-gray-300"></i>
</div>
<span class="text-gray-600 text-xs ml-1">(15)</span>
</div>
<div class="flex justify-between items-center">
<span class="font-bold text-primary">$129.99</span>
<button class="add-to-cart bg-primary text-white p-2 rounded-full hover:bg-orange-600 transition" data-id="4" data-name="Skyline Wireless Earbuds" data-price="129.99" data-image="http://static.photos/technology/640x360/204">
<i data-feather="shopping-cart" class="w-4"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Tech Features Section -->
<section class="py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Why Choose CG TechWear?</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Our products combine advanced technology with premium materials for unparalleled performance and style.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center">
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="cpu" class="text-primary w-8 h-8"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Smart Technology</h3>
<p class="text-gray-600">Integrated with the latest wearable tech for health monitoring and connectivity.</p>
</div>
<div class="text-center">
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="shield" class="text-primary w-8 h-8"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Premium Materials</h3>
<p class="text-gray-600">High-quality, durable fabrics designed for comfort and performance.</p>
</div>
<div class="text-center">
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="truck" class="text-primary w-8 h-8"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Fast Shipping</h3>
<p class="text-gray-600">Get your order delivered quickly with our express shipping options.</p>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="py-16 bg-primary/5">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold mb-4">Stay Updated</h2>
<p class="text-gray-600 mb-8">Subscribe to our newsletter for the latest product releases and exclusive offers.</p>
<form id="newsletterForm" class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
<input type="email" id="emailInput" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
<button type="submit" class="bg-primary hover:bg-orange-600 text-white px-6 py-3 rounded-full font-medium transition duration-300 whitespace-nowrap">
Subscribe
</button>
</form>
<p id="subscriptionMessage" class="mt-4 text-green-500 hidden">Thanks for subscribing!</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">CG TechWear</h3>
<p class="text-gray-400 mb-4">Where technology meets fashion in perfect harmony.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition">
<i data-feather="facebook" class="w-5"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i data-feather="twitter" class="w-5"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i data-feather="instagram" class="w-5"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i data-feather="youtube" class="w-5"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Shop</h4>
<ul class="space-y-2">
<li><a href="/clothing.html" class="text-gray-400 hover:text-white transition">Clothing</a></li>
<li><a href="/gadgets.html" class="text-gray-400 hover:text-white transition">Gadgets</a></li>
<li><a href="/products.html" class="text-gray-400 hover:text-white transition">Accessories</a></li>
<li><a href="/products.html" class="text-gray-400 hover:text-white transition">New Arrivals</a></li>
<li><a href="/products.html" class="text-gray-400 hover:text-white transition">Sale</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Help</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Customer Service</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Track Order</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Returns & Exchanges</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Shipping Info</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Contact</h4>
<ul class="space-y-2">
<li class="text-gray-400">123 Tech Street</li>
<li class="text-gray-400">San Francisco, CA 94107</li>
<li class="text-gray-400">(123) 456-7890</li>
<li class="text-gray-400">info@cgtechwear.com</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">© 2023 CG TechWear. All rights reserved.</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-white transition">Cookies</a>
</div>
</div>
</div>
</footer>
<script>
// Cart functionality
document.addEventListener('DOMContentLoaded', function() {
// Initialize cart
if (!localStorage.getItem('cart')) {
localStorage.setItem('cart', JSON.stringify([]));
}
// Update cart count
function updateCartCount() {
const cart = JSON.parse(localStorage.getItem('cart'));
const countEl = document.getElementById('cartCount');
if (cart.length > 0) {
countEl.textContent = cart.length;
countEl.classList.remove('hidden');
} else {
countEl.classList.add('hidden');
}
}
// Add to cart functionality
document.querySelectorAll('.add-to-cart').forEach(button => {
button.addEventListener('click', function() {
const product = {
id: this.dataset.id,
name: this.dataset.name,
price: this.dataset.price,
image: this.dataset.image,
quantity: 1
};
let cart = JSON.parse(localStorage.getItem('cart'));
const existingItem = cart.find(item => item.id === product.id);
if (existingItem) {
existingItem.quantity += 1;
} else {
cart.push(product);
}
localStorage.setItem('cart', JSON.stringify(cart));
updateCartCount();
// Show added notification
const notification = document.createElement('div');
notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg';
notification.textContent = `${product.name} added to cart`;
document.body.appendChild(notification);
setTimeout(() => notification.remove(), 3000);
});
});
// Initialize cart count on page load
updateCartCount();
});
// Initialize Vanta.js background
VANTA.NET({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0xf97316,
backgroundColor: 0xf8fafc,
points: 10.00,
maxDistance: 25.00,
spacing: 18.00
});
// Feather icons
feather.replace();
// Mobile menu toggle would go here
document.addEventListener('DOMContentLoaded', function() {
// Newsletter form submission
document.getElementById('newsletterForm').addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('emailInput').value;
const messageEl = document.getElementById('subscriptionMessage');
axios.post('/api/subscribe', { email })
.then(response => {
messageEl.textContent = 'Thanks for subscribing!';
messageEl.classList.remove('hidden');
document.getElementById('newsletterForm').reset();
setTimeout(() => messageEl.classList.add('hidden'), 3000);
})
.catch(error => {
messageEl.textContent = 'Subscription failed. Please try again.';
messageEl.classList.add('text-red-500');
messageEl.classList.remove('hidden', 'text-green-500');
setTimeout(() => {
messageEl.classList.add('hidden');
messageEl.classList.remove('text-red-500');
messageEl.classList.add('text-green-500');
}, 3000);
});
});
});
</script>
</body>
</html>