Spaces:
Running
Running
File size: 7,790 Bytes
03f1b0b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | <!DOCTYPE html>
<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> |