Skip to content

Commit 5463249

Browse files
CoderSergCoderSerg
committed
v2.64
1 parent 681f2e5 commit 5463249

1 file changed

Lines changed: 173 additions & 36 deletions

File tree

‎index.html‎

Lines changed: 173 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,35 @@
2525
},
2626
};
2727
</script>
28+
29+
<style>
30+
@keyframes float {
31+
0%, 100% { transform: translateY(0px); }
32+
50% { transform: translateY(-20px); }
33+
}
34+
.float { animation: float 3s ease-in-out infinite; }
35+
36+
@keyframes fadeInUp {
37+
from {
38+
opacity: 0;
39+
transform: translateY(30px);
40+
}
41+
to {
42+
opacity: 1;
43+
transform: translateY(0);
44+
}
45+
}
46+
.fade-in-up {
47+
animation: fadeInUp 0.6s ease-out forwards;
48+
}
49+
50+
.gradient-text {
51+
background: linear-gradient(to right, #10b981, #34d399);
52+
-webkit-background-clip: text;
53+
-webkit-text-fill-color: transparent;
54+
background-clip: text;
55+
}
56+
</style>
2857
</head>
2958

3059
<body class="bg-gray-900 text-white min-h-screen flex flex-col">
@@ -33,8 +62,8 @@
3362
<nav class="mx-auto flex max-w-5xl items-center justify-between px-4 sm:px-6 lg:px-8 h-14" aria-label="Global">
3463
<!-- Logo -->
3564
<div class="flex items-center gap-2">
36-
<a href="/" class="flex items-center gap-2">
37-
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand">
65+
<a href="/" class="flex items-center gap-2 group">
66+
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand group-hover:scale-110 transition-transform">
3867
<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/>
3968
<path d="M12 22V12"/>
4069
<polyline points="3.29 7 12 12 20.71 7"/>
@@ -86,10 +115,10 @@
86115
<div id="mobile-menu" class="lg:hidden hidden border-t border-white/10 bg-gray-900/95 backdrop-blur">
87116
<div class="space-y-1 px-4 py-3">
88117
<!-- Shop + Learn links for mobile -->
89-
<a href="./shop.html" class="block rounded-md px-3 py-2 text-base font-medium text-white hover:bg-gray-800">
118+
<a href="/shop" class="block rounded-md px-3 py-2 text-base font-medium text-white hover:bg-gray-800">
90119
Shop
91120
</a>
92-
<a href="./learn.html" class="block rounded-md px-3 py-2 text-base font-medium text-gray-200 hover:bg-gray-800">
121+
<a href="/learn" class="block rounded-md px-3 py-2 text-base font-medium text-gray-200 hover:bg-gray-800">
93122
Learn
94123
</a>
95124

@@ -123,60 +152,168 @@
123152
class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80">
124153
<div
125154
class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[40rem]
126-
-translate-x-1/2 rotate-30 bg-gradient-to-tr from-emerald-500 to-emerald-300 opacity-30
155+
-translate-x-1/2 rotate-30 bg-gradient-to-tr from-emerald-500 via-cyan-400 to-blue-500 opacity-30
127156
sm:left-[calc(50%-30rem)] sm:w-[70rem]">
128157
</div>
129158
</div>
130159

131-
<!-- HERO CONTENT -->
132-
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56 text-center">
133-
<h1 class="text-5xl font-semibold tracking-tight sm:text-7xl">
134-
Everything all in one.
160+
<!-- HERO CONTENT --> <div class="mx-auto max-w-3xl py-32 sm:py-48 lg:py-56 text-center">
161+
<div class="mb-4">
162+
<span class="inline-flex items-center gap-2 rounded-full bg-brand/10 px-3 py-1 text-sm font-medium text-brand ring-1 ring-inset ring-brand/20">
163+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
164+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
165+
</svg>
166+
Your cybersecurity hub
167+
</span>
168+
</div>
169+
170+
<h1 class="text-5xl font-bold tracking-tight sm:text-7xl">
171+
Everything <span class="gradient-text">all in one.</span>
135172
</h1>
136173

137-
<p class="mt-8 text-lg text-gray-400">
138-
Learn cybersecurity, shop for items, done all here.
174+
<p class="mt-8 text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto">
175+
Master cybersecurity skills, discover unique products, and join a community of tech enthusiasts—all in one seamless platform.
139176
</p>
140177

141-
<div class="mt-10 flex items-center justify-center gap-x-6">
142-
143-
<!-- SHOP -->
144-
<a href="./shop.html"
145-
class="rounded-md bg-brand px-6 py-3 text-sm font-semibold text-black hover:bg-brand/80 shadow-lg">
146-
Shop
147-
</a>
148-
149-
<!-- LEARN -->
150-
<a href="./learn.html"
151-
class="text-sm font-semibold text-white hover:text-brand transition">
152-
Learn →
153-
</a>
154-
155-
</div>
178+
<div class="mt-10 flex items-center justify-center gap-x-6 flex-wrap">
179+
<!-- SHOP -->
180+
<a href="/shop"
181+
class="group rounded-lg bg-brand px-8 py-4 text-base font-semibold text-black hover:bg-brand/80 shadow-lg hover:shadow-brand/50 transition-all">
182+
Shop Now
183+
<span class="inline-block group-hover:translate-x-1 transition-transform">→</span>
184+
</a>
185+
186+
<!-- LEARN -->
187+
<a href="/learn"
188+
class="rounded-lg border border-white/10 px-8 py-4 text-base font-semibold text-white hover:bg-white/5 transition-all">
189+
Start Learning
190+
</a>
191+
</div>
156192
</div>
157193

158194
<!-- BOTTOM BG BLOB -->
159195
<div aria-hidden="true"
160196
class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]">
161197
<div
162198
class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[40rem]
163-
-translate-x-1/2 bg-gradient-to-tr from-emerald-500 to-emerald-300 opacity-30
199+
-translate-x-1/2 bg-gradient-to-tr from-purple-500 via-emerald-400 to-cyan-500 opacity-30
164200
sm:left-[calc(50%+36rem)] sm:w-[70rem]">
165201
</div>
166202
</div>
167203
</div>
168204

169-
<!-- Spacer where you can add sections later (reviews, products, whatever) -->
170-
<div class="h-24"></div>
205+
<!-- FEATURES SECTION -->
206+
<div class="py-24 sm:py-32 bg-gray-900/50">
207+
<div class="mx-auto max-w-7xl px-6 lg:px-8">
208+
<div class="mx-auto max-w-2xl text-center mb-16">
209+
<h2 class="text-3xl font-bold tracking-tight sm:text-4xl">
210+
Why Choose <span class="gradient-text">Serhii?</span>
211+
</h2>
212+
<p class="mt-4 text-lg text-gray-400">
213+
Everything you need to level up your tech skills and gear.
214+
</p>
215+
</div>
216+
217+
<div class="mx-auto max-w-5xl">
218+
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
219+
<!-- Feature 1 -->
220+
<div class="group relative rounded-2xl bg-gray-800/50 p-8 hover:bg-gray-800 transition-all border border-white/5 hover:border-brand/50">
221+
<div class="flex items-center justify-center w-12 h-12 rounded-lg bg-brand/10 text-brand mb-5 group-hover:scale-110 transition-transform">
222+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
223+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
224+
</svg>
225+
</div>
226+
<h3 class="text-xl font-semibold mb-2">Learn Cybersecurity</h3>
227+
<p class="text-gray-400">Master the fundamentals and advanced concepts with hands-on tutorials and real-world scenarios.</p>
228+
</div>
229+
230+
<!-- Feature 2 -->
231+
<div class="group relative rounded-2xl bg-gray-800/50 p-8 hover:bg-gray-800 transition-all border border-white/5 hover:border-brand/50">
232+
<div class="flex items-center justify-center w-12 h-12 rounded-lg bg-brand/10 text-brand mb-5 group-hover:scale-110 transition-transform">
233+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
234+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
235+
</svg>
236+
</div>
237+
<h3 class="text-xl font-semibold mb-2">Curated Shop</h3>
238+
<p class="text-gray-400">Discover hand-picked tech gear, 3D prints, and cybersecurity tools for enthusiasts and professionals.</p>
239+
</div>
240+
241+
<!-- Feature 3 -->
242+
<div class="group relative rounded-2xl bg-gray-800/50 p-8 hover:bg-gray-800 transition-all border border-white/5 hover:border-brand/50">
243+
<div class="flex items-center justify-center w-12 h-12 rounded-lg bg-brand/10 text-brand mb-5 group-hover:scale-110 transition-transform">
244+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
245+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
246+
</svg>
247+
</div>
248+
<h3 class="text-xl font-semibold mb-2">Community Driven</h3>
249+
<p class="text-gray-400">Join a vibrant community of learners and makers sharing knowledge and supporting each other.</p>
250+
</div>
251+
252+
<!-- Feature 4 -->
253+
<div class="group relative rounded-2xl bg-gray-800/50 p-8 hover:bg-gray-800 transition-all border border-white/5 hover:border-brand/50">
254+
<div class="flex items-center justify-center w-12 h-12 rounded-lg bg-brand/10 text-brand mb-5 group-hover:scale-110 transition-transform">
255+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
256+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
257+
</svg>
258+
</div>
259+
<h3 class="text-xl font-semibold mb-2">24/7 Support</h3>
260+
<p class="text-gray-400">Get help whenever you need it with our round-the-clock support team ready to assist you.</p>
261+
</div>
262+
</div>
263+
</div>
264+
</div>
265+
</div>
266+
267+
<!-- CTA SECTION -->
268+
<div class="py-24 sm:py-32 bg-gray-900/30">
269+
<div class="mx-auto max-w-4xl px-6 lg:px-8">
270+
<div class="relative isolate overflow-hidden rounded-3xl bg-gray-800/80 backdrop-blur-sm px-8 py-20 text-center shadow-2xl ring-1 ring-white/10 sm:px-16">
271+
<!-- Subtle gradient overlay -->
272+
<div class="absolute inset-0 -z-10 bg-gradient-to-br from-brand/20 via-transparent to-cyan-500/20"></div>
273+
274+
<div class="mx-auto max-w-2xl">
275+
<h2 class="text-4xl font-bold tracking-tight text-white sm:text-5xl">
276+
Ready to start your <span class="gradient-text">journey?</span>
277+
</h2>
278+
<p class="mt-6 text-lg leading-8 text-gray-300">
279+
Join hundreds of learners mastering cybersecurity today. Start learning for free and level up your skills.
280+
</p>
281+
<div class="mt-10 flex items-center justify-center gap-x-6">
282+
<a href="/learn" class="group rounded-lg bg-brand px-8 py-4 text-base font-semibold text-black shadow-lg hover:bg-brand/80 transition-all hover:scale-105">
283+
Get Started Free
284+
<span class="inline-block group-hover:translate-x-1 transition-transform ml-1">→</span>
285+
</a>
286+
<a href="/contact" class="text-base font-semibold text-gray-200 hover:text-white transition flex items-center gap-1">
287+
Contact Us
288+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
289+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
290+
</svg>
291+
</a>
292+
</div>
293+
</div>
294+
</div>
295+
</div>
296+
</div>
171297
</main>
172298

173299
<!-- FOOTER -->
174-
<footer class="border-t border-white/10 py-6 text-sm text-gray-400">
175-
<div class="mx-auto flex max-w-5xl flex-wrap items-center justify-between gap-3 px-4 sm:px-6 lg:px-8">
176-
<p>© 2025 Serhii</p>
177-
<a href="./contact.html" class="hover:text-white">
178-
Contact
179-
</a>
300+
<footer class="border-t border-white/10 py-8 text-sm text-gray-400">
301+
<div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
302+
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
303+
<div class="flex items-center gap-2">
304+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="text-brand">
305+
<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/>
306+
<path d="M12 22V12"/>
307+
<polyline points="3.29 7 12 12 20.71 7"/>
308+
</svg>
309+
<p>© 2025 Serhii. All rights reserved.</p>
310+
</div>
311+
<div class="flex gap-6">
312+
<a href="/contact" class="hover:text-white transition">Contact</a>
313+
<a href="/shop" class="hover:text-white transition">Shop</a>
314+
<a href="/learn" class="hover:text-white transition">Learn</a>
315+
</div>
316+
</div>
180317
</div>
181318
</footer>
182319

@@ -244,4 +381,4 @@ <h1 class="text-5xl font-semibold tracking-tight sm:text-7xl">
244381
});
245382
</script>
246383
</body>
247-
</html>
384+
</html>

0 commit comments

Comments
 (0)