| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>About Us - CG TechWear</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> |
| |
| <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; |
| } |
| .nav-link:hover { |
| color: #f97316; |
| } |
| .team-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.2); |
| } |
| .about-gradient { |
| background: linear-gradient(135deg, rgba(249,115,22,0.1) 0%, rgba(234,179,8,0.1) 100%); |
| } |
| </style> |
| </head> |
| <body class="bg-white"> |
| |
| <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div> |
|
|
| |
| <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-500 hover: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-primary 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> |
|
|
| |
| <section class="about-gradient py-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center"> |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6"> |
| About <span class="text-primary">CG TechWear</span> |
| </h1> |
| <p class="text-lg md:text-xl text-gray-700 max-w-3xl mx-auto"> |
| Pioneering the fusion of cutting-edge technology and fashion-forward design since 2018. |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-2 gap-12 items-center"> |
| <div> |
| <h2 class="text-3xl font-bold mb-6">Our Story</h2> |
| <p class="text-gray-600 mb-4"> |
| Founded in San Francisco in 2018, CG TechWear began with a simple vision: to create clothing that doesn't just look good, but actually enhances your life through technology. |
| </p> |
| <p class="text-gray-600 mb-4"> |
| Our team of engineers, designers, and fashion experts work together to push the boundaries of what wearable technology can achieve, while maintaining the highest standards of style and comfort. |
| </p> |
| <p class="text-gray-600"> |
| Today, we're proud to serve customers in over 30 countries who share our passion for innovation and design. |
| </p> |
| </div> |
| <div class="rounded-xl overflow-hidden shadow-lg"> |
| <img src="http://static.photos/workspace/1024x576/501" alt="Our Office" class="w-full h-auto"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50"> |
| <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">Our Mission</h2> |
| <p class="text-gray-600 max-w-3xl mx-auto"> |
| To revolutionize everyday clothing by seamlessly integrating technology that enhances your health, performance, and lifestyle. |
| </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="target" class="text-primary w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Innovation</h3> |
| <p class="text-gray-600">Pushing boundaries with cutting-edge wearable technology.</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="award" class="text-primary w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Quality</h3> |
| <p class="text-gray-600">Premium materials and craftsmanship in every product.</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="users" class="text-primary w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Community</h3> |
| <p class="text-gray-600">Building a movement of tech-forward individuals.</p> |
| </div> |
| </div> |
| </div> |
| </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">Meet Our Team</h2> |
| <p class="text-gray-600 max-w-3xl mx-auto"> |
| The brilliant minds behind CG TechWear's innovative products. |
| </p> |
| </div> |
| <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8"> |
| |
| <div class="team-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6 text-center"> |
| <div class="w-32 h-32 rounded-full overflow-hidden mx-auto mb-4"> |
| <img src="http://static.photos/people/320x240/601" alt="Alex Chen" class="w-full h-full object-cover"> |
| </div> |
| <h3 class="text-xl font-semibold mb-1">Alex Chen</h3> |
| <p class="text-primary font-medium mb-2">CEO & Founder</p> |
| <p class="text-gray-600 text-sm">Former lead engineer at a major tech company, Alex started CG to bridge fashion and technology.</p> |
| </div> |
| |
| |
| <div class="team-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6 text-center"> |
| <div class="w-32 h-32 rounded-full overflow-hidden mx-auto mb-4"> |
| <img src="http://static.photos/people/320x240/602" alt="Maya Rodriguez" class="w-full h-full object-cover"> |
| </div> |
| <h3 class="text-xl font-semibold mb-1">Maya Rodriguez</h3> |
| <p class="text-primary font-medium mb-2">Chief Designer</p> |
| <p class="text-gray-600 text-sm">With a fashion degree from Parsons, Maya ensures our products look as good as they function.</p> |
| </div> |
| |
| |
| <div class="team-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6 text-center"> |
| <div class="w-32 h-32 rounded-full overflow-hidden mx-auto mb-4"> |
| <img src="http://static.photos/people/320x240/603" alt="James Park" class="w-full h-full object-cover"> |
| </div> |
| <h3 class="text-xl font-semibold mb-1">James Park</h3> |
| <p class="text-primary font-medium mb-2">CTO</p> |
| <p class="text-gray-600 text-sm">Specializing in wearable electronics, James leads our technology development.</p> |
| </div> |
| |
| |
| <div class="team-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 p-6 text-center"> |
| <div class="w-32 h-32 rounded-full overflow-hidden mx-auto mb-4"> |
| <img src="http://static.photos/people/320x240/604" alt="Sarah Johnson" class="w-full h-full object-cover"> |
| </div> |
| <h3 class="text-xl font-semibold mb-1">Sarah Johnson</h3> |
| <p class="text-primary font-medium mb-2">Head of Marketing</p> |
| <p class="text-gray-600 text-sm">Sarah connects our products with the right audience through innovative campaigns.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50"> |
| <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">Our Values</h2> |
| </div> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <h3 class="text-xl font-semibold mb-3 flex items-center"> |
| <span class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center mr-3"> |
| <i data-feather="zap" class="text-primary w-4"></i> |
| </span> |
| Innovation |
| </h3> |
| <p class="text-gray-600">We constantly push boundaries to develop products that anticipate future needs.</p> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <h3 class="text-xl font-semibold mb-3 flex items-center"> |
| <span class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center mr-3"> |
| <i data-feather="heart" class="text-primary w-4"></i> |
| </span> |
| Sustainability |
| </h3> |
| <p class="text-gray-600">We're committed to eco-friendly materials and ethical manufacturing processes.</p> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <h3 class="text-xl font-semibold mb-3 flex items-center"> |
| <span class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center mr-3"> |
| <i data-feather="smile" class="text-primary w-4"></i> |
| </span> |
| Customer Focus |
| </h3> |
| <p class="text-gray-600">Your experience and feedback drive our continuous improvement.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <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">New Arrivals</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Sale</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Company</h4> |
| <ul class="space-y-2"> |
| <li><a href="/about.html" class="text-gray-400 hover:text-white transition">About Us</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</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> |
| |
| 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 |
| }); |
| |
| |
| 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'); |
| } |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| feather.replace(); |
| updateCartCount(); |
| }); |
| </script> |
| </body> |
| </html> |
