Spaces:
Running
Running
File size: 8,281 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 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 | class CustomHero extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
}
.hero {
position: relative;
min-height: 90vh;
display: flex;
align-items: center;
overflow: hidden;
background: linear-gradient(135deg, #000000 0%, #262626 100%);
}
.hero-content {
position: relative;
z-index: 10;
max-width: 7xl;
margin: 0 auto;
padding: 2rem 1rem;
width: 100%;
}
@media (min-width: 640px) {
.hero-content {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.hero-content {
padding-left: 2rem;
padding-right: 2rem;
}
}
.title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
line-height: 1;
letter-spacing: -0.025em;
color: white;
}
.subtitle {
color: rgba(255, 255, 255, 0.9);
max-width: 36rem;
}
.gradient-text {
background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.floating-element {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(5deg);
}
}
.btn-primary {
background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
color: white;
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 20px 40px rgba(251, 146, 60, 0.3);
}
.btn-secondary {
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
transition: all 0.3s ease;
}
.btn-secondary:hover {
border-color: white;
transform: translateY(-2px);
}
.pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}
</style>
<section class="hero">
<div class="pattern"></div>
<!-- Floating elements -->
<div class="absolute top-1/4 left-1/4 w-64 h-64 bg-gradient-to-br from-accent-500/20 to-transparent rounded-full blur-3xl floating-element"></div>
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-gradient-to-tr from-noir-900/30 to-transparent rounded-full blur-3xl floating-element" style="animation-delay: -3s;"></div>
<div class="hero-content">
<div class="max-w-7xl mx-auto">
<div class="text-center lg:text-left lg:flex lg:items-center lg:justify-between">
<div class="lg:w-1/2">
<h1 class="title text-5xl sm:text-6xl md:text-7xl lg:text-8xl mb-6">
WEAR YOUR <span class="gradient-text">DIGITAL</span> SOUL
</h1>
<p class="subtitle text-xl md:text-2xl mb-10">
NOIRWAY redefines streetwear for the new generation. Limited edition designs that blend digital art with physical form. For those who live between worlds.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
<a href="/shop.html" class="btn-primary px-8 py-4 rounded-full font-medium text-lg inline-flex items-center justify-center gap-2 group">
<span>Shop the Drop</span>
<i data-feather="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
</a>
<a href="/collections.html" class="btn-secondary px-8 py-4 rounded-full font-medium text-lg">
View Collections
</a>
</div>
</div>
<div class="lg:w-1/2 mt-12 lg:mt-0 lg:pl-12">
<div class="relative">
<img src="http://static.photos/people/640x360/50" alt="NOIRWAY Model" class="rounded-3xl shadow-2xl w-full">
<div class="absolute -bottom-6 -right-6 bg-white p-6 rounded-2xl shadow-xl max-w-xs">
<div class="flex items-center gap-3 mb-3">
<div class="w-12 h-12 bg-black rounded-full flex items-center justify-center">
<i data-feather="star" class="w-6 h-6 text-white"></i>
</div>
<div>
<p class="font-display font-bold text-lg">500+</p>
<p class="text-noir-600 text-sm">5-Star Reviews</p>
</div>
</div>
<p class="text-noir-600 text-sm">"The quality is unreal. This isn't fast fashion—it's future fashion."</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Scroll indicator -->
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2">
<div class="animate-bounce">
<i data-feather="chevron-down" class="w-8 h-8 text-white/60"></i>
</div>
</div>
</section>
`;
// Initialize feather icons
setTimeout(() => {
if (window.feather) {
window.feather.replace();
}
}, 100);
}
}
customElements.define('custom-hero', CustomHero); |