Spaces:
Running
Running
create a website for selling tshirts and named NOIRWAY brand for new generation people
03f1b0b verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NOIRWAY | Threads for the New Generation</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="components/product-card.js"></script> | |
| <script src="components/hero.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| noir: { | |
| 50: '#f5f5f5', | |
| 100: '#e9e9e9', | |
| 200: '#d9d9d9', | |
| 300: '#c4c4c4', | |
| 400: '#9d9d9d', | |
| 500: '#7b7b7b', | |
| 600: '#555555', | |
| 700: '#434343', | |
| 800: '#262626', | |
| 900: '#000000', | |
| }, | |
| accent: { | |
| 50: '#fff7ed', | |
| 100: '#ffedd5', | |
| 200: '#fed7aa', | |
| 300: '#fdba74', | |
| 400: '#fb923c', | |
| 500: '#f97316', | |
| 600: '#ea580c', | |
| 700: '#c2410c', | |
| 800: '#9a3412', | |
| 900: '#7c2d12', | |
| } | |
| }, | |
| fontFamily: { | |
| 'display': ['"Space Grotesk"', 'sans-serif'], | |
| 'body': ['"Inter"', 'sans-serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| </head> | |
| <body class="bg-noir-50 font-body text-noir-900"> | |
| <custom-navbar></custom-navbar> | |
| <custom-hero></custom-hero> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-20"> | |
| <!-- Featured Collection --> | |
| <section class="mb-20"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl lg:text-5xl font-display font-bold mb-4">CURATED DROPS</h2> | |
| <p class="text-noir-600 max-w-2xl mx-auto text-lg">Limited edition designs that define the zeitgeist. Wear what matters.</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8" id="featured-products"> | |
| <!-- Product cards will be populated by JavaScript --> | |
| </div> | |
| </section> | |
| <!-- Brand Story --> | |
| <section class="py-16 mb-16 bg-noir-900 text-noir-50 rounded-3xl overflow-hidden"> | |
| <div class="max-w-6xl mx-auto px-6 lg:px-8"> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/2"> | |
| <img src="http://static.photos/minimal/640x360/77" alt="NOIRWAY Studio" class="rounded-2xl shadow-2xl transform hover:scale-105 transition-transform duration-500"> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h3 class="text-2xl md:text-3xl font-display font-bold mb-6">BEYOND THE FABRIC</h3> | |
| <p class="text-noir-200 mb-6 text-lg leading-relaxed"> | |
| NOIRWAY isn't just clothing—it's a manifesto. Born from the intersection of street culture, digital art, and conscious living, each piece tells a story of rebellion, authenticity, and forward-thinking design. | |
| </p> | |
| <p class="text-noir-200 mb-8 text-lg leading-relaxed"> | |
| We collaborate with emerging artists, use sustainable materials, and craft garments that feel as good as they look. This is fashion for those who write their own rules. | |
| </p> | |
| <a href="/about.html" class="inline-flex items-center gap-2 bg-accent-500 text-white px-8 py-3 rounded-full font-medium hover:bg-accent-600 transition-colors duration-300 group"> | |
| Our Ethos | |
| <i data-feather="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="mb-20"> | |
| <h2 class="text-3xl md:text-4xl font-display font-bold text-center mb-12">VOICES OF THE TRIBE</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/people/200x200/1" alt="Alex" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-display font-bold">Alex C.</h4> | |
| <p class="text-noir-500 text-sm">Digital Creator</p> | |
| </div> | |
| </div> | |
| <p class="text-noir-600 italic">"The 'Digital Ghost' tee gets compliments every time I stream. It's become part of my brand identity."</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/people/200x200/2" alt="Maya" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-display font-bold">Maya R.</h4> | |
| <p class="text-noir-500 text-sm">Graphic Designer</p> | |
| </div> | |
| </div> | |
| <p class="text-noir-600 italic">"Finally, a brand that gets it. The fit, the message, the quality—everything is intentional. Obsessed."</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/people/200x200/3" alt="Jordan" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-display font-bold">Jordan L.</h4> | |
| <p class="text-noir-500 text-sm">Music Producer</p> | |
| </div> | |
| </div> | |
| <p class="text-noir-600 italic">"Wore the 'Neon Noir' hoodie on tour. Survived 12 cities and still looks fresh. That's durability with style."</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Load featured products | |
| document.addEventListener('DOMContentLoaded', function() { | |
| loadFeaturedProducts(); | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |