Skip to content

Commit 6d52107

Browse files
SuperCoolPencilSuperCoolPencil
committed
feat: Enhance features section with glowing icons, ambient background, and updated card styling.
1 parent 23776a6 commit 6d52107

1 file changed

Lines changed: 52 additions & 47 deletions

File tree

‎index.html‎

Lines changed: 52 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -281,6 +281,10 @@
281281
from { transform: translate(-50%, -50%) scale(0.9); opacity: 0.4; }
282282
to { transform: translate(-50%, -50%) scale(1.15); opacity: 0.8; }
283283
}
284+
/* ── Feature Card Icon Glows ── */
285+
.feat-icon-cyan { filter: drop-shadow(0 0 8px rgba(0,230,230,0.55)); }
286+
.feat-icon-magenta { filter: drop-shadow(0 0 8px rgba(255,81,250,0.55)); }
287+
.feat-icon-lime { filter: drop-shadow(0 0 8px rgba(186,253,0,0.45)); }
284288
</style>
285289
</head>
286290
<body class="bg-background text-on-surface font-body selection:bg-secondary selection:text-surface-dim overflow-x-hidden">
@@ -398,76 +402,77 @@ <h1 class="font-headline text-5xl md:text-7xl font-black text-white leading-[0.8
398402
</section>
399403

400404
<!-- Technical Specs / Features -->
401-
<section id="features" class="snap-section py-10 px-8 lg:px-24 bg-surface-container-low/30">
402-
<div class="max-w-7xl mx-auto">
403-
<div class="flex flex-col md:flex-row md:items-end justify-between mb-8 gap-4">
404-
<div class="max-w-2xl">
405-
<p class="font-body text-secondary text-xs mb-2 tracking-[0.4em] uppercase font-bold">// Engine Architecture</p>
406-
<h2 class="font-headline text-4xl md:text-5xl font-black text-white tracking-tighter uppercase glitch-hover">ENGINEERED FOR SPEED</h2>
407-
</div>
408-
<p class="text-on-surface-variant max-w-sm font-body text-sm leading-relaxed">
409-
Designed from the ground up to utilize every byte of your network bandwidth through modern concurrency patterns.
410-
</p>
405+
<section id="features" class="snap-section py-24 px-8 lg:px-24 relative overflow-hidden bg-surface-container-low/30">
406+
<!-- Ambient background glows -->
407+
<div class="absolute top-1/2 left-1/4 -translate-y-1/2 w-[500px] h-[500px] rounded-full pointer-events-none" style="background: radial-gradient(circle, rgba(0,230,230,0.05) 0%, transparent 70%); filter: blur(40px);"></div>
408+
<div class="absolute top-1/2 right-1/4 -translate-y-1/2 w-[400px] h-[400px] rounded-full pointer-events-none" style="background: radial-gradient(circle, rgba(255,81,250,0.05) 0%, transparent 70%); filter: blur(40px);"></div>
409+
410+
<div class="max-w-7xl mx-auto relative z-10 w-full h-full flex flex-col">
411+
<div class="text-center mb-12">
412+
<p class="font-body text-secondary text-sm mb-4 tracking-[0.4em] uppercase font-bold">// Engine Architecture</p>
413+
<h2 class="font-headline text-5xl md:text-7xl font-black text-white tracking-tighter uppercase glitch-hover">ENGINEERED FOR SPEED</h2>
411414
</div>
412-
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
415+
416+
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 flex-1">
413417
<!-- Multi-threaded -->
414-
<div class="bg-[#120b29] p-7 rounded-2xl border border-white/5 card-shimmer group reveal-card" style="transition-delay: 0s;">
415-
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-5 border border-primary/20 group-hover:scale-110 transition-transform">
416-
<span class="material-symbols-outlined text-primary text-2xl">speed</span>
418+
<div class="bg-[#120b29] p-10 rounded-2xl border border-white/5 card-shimmer group reveal-card h-full flex flex-col" style="transition-delay: 0s;">
419+
<div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-8 border border-primary/20 group-hover:scale-110 transition-transform">
420+
<span class="material-symbols-outlined text-primary text-3xl feat-icon-cyan">speed</span>
417421
</div>
418-
<p class="font-body text-primary text-xs mb-2 tracking-[0.3em] uppercase">// MULTI-THREADED_ENGINE</p>
419-
<h3 class="font-headline text-xl font-bold mb-3 text-white uppercase tracking-tight">Multi-Threaded</h3>
420-
<p class="text-on-surface-variant text-xs font-body leading-relaxed">Open up to 32 concurrent connections per file to saturate your pipes and maximize throughput.</p>
422+
<p class="font-body text-primary/70 text-xs mb-3 tracking-[0.3em] uppercase">// MULTI-THREADED_ENGINE</p>
423+
<h3 class="font-headline text-2xl font-bold mb-4 text-white uppercase tracking-tight">Multi-Threaded</h3>
424+
<p class="text-on-surface-variant text-sm font-body leading-relaxed">Open up to 32 concurrent connections per file to saturate your pipes and maximize throughput.</p>
421425
</div>
422426
<!-- Multiple Mirrors -->
423-
<div class="bg-[#120b29] p-7 rounded-2xl border border-white/5 card-shimmer group reveal-card" style="transition-delay: 0.1s;">
424-
<div class="w-12 h-12 bg-secondary/10 rounded-xl flex items-center justify-center mb-5 border border-secondary/20 group-hover:scale-110 transition-transform">
425-
<span class="material-symbols-outlined text-secondary text-2xl">hub</span>
427+
<div class="bg-[#120b29] p-10 rounded-2xl border border-white/5 card-shimmer group reveal-card h-full flex flex-col" style="transition-delay: 0.1s;">
428+
<div class="w-16 h-16 bg-secondary/10 rounded-xl flex items-center justify-center mb-8 border border-secondary/20 group-hover:scale-110 transition-transform">
429+
<span class="material-symbols-outlined text-secondary text-3xl feat-icon-magenta">hub</span>
426430
</div>
427-
<p class="font-body text-secondary text-xs mb-2 tracking-[0.3em] uppercase">// MIRROR_DISTRIBUTION</p>
428-
<h3 class="font-headline text-xl font-bold mb-3 text-white uppercase tracking-tight">Multiple Mirrors</h3>
429-
<p class="text-on-surface-variant text-xs font-body leading-relaxed">Distribute workers across all available mirrors simultaneously with automatic failover on any connection drop.</p>
431+
<p class="font-body text-secondary/70 text-xs mb-3 tracking-[0.3em] uppercase">// MIRROR_DISTRIBUTION</p>
432+
<h3 class="font-headline text-2xl font-bold mb-4 text-white uppercase tracking-tight">Multiple Mirrors</h3>
433+
<p class="text-on-surface-variant text-sm font-body leading-relaxed">Distribute workers across all available mirrors simultaneously with automatic failover on any connection drop.</p>
430434
</div>
431435
<!-- Sequential Download -->
432-
<div class="bg-[#120b29] p-7 rounded-2xl border border-white/5 card-shimmer group reveal-card" style="transition-delay: 0.2s;">
433-
<div class="w-12 h-12 bg-tertiary/10 rounded-xl flex items-center justify-center mb-5 border border-tertiary/20 group-hover:scale-110 transition-transform">
434-
<span class="material-symbols-outlined text-tertiary text-2xl">stream</span>
436+
<div class="bg-[#120b29] p-10 rounded-2xl border border-white/5 card-shimmer group reveal-card h-full flex flex-col" style="transition-delay: 0.2s;">
437+
<div class="w-16 h-16 bg-tertiary/10 rounded-xl flex items-center justify-center mb-8 border border-tertiary/20 group-hover:scale-110 transition-transform">
438+
<span class="material-symbols-outlined text-tertiary text-3xl feat-icon-lime">stream</span>
435439
</div>
436-
<p class="font-body text-tertiary text-xs mb-2 tracking-[0.3em] uppercase">// STREAMING_MODE</p>
437-
<h3 class="font-headline text-xl font-bold mb-3 text-white uppercase tracking-tight">Sequential Download</h3>
438-
<p class="text-on-surface-variant text-xs font-body leading-relaxed">Download files in strict order for media-first access. Preview videos and audio while the download is still in progress.</p>
440+
<p class="font-body text-tertiary/70 text-xs mb-3 tracking-[0.3em] uppercase">// STREAMING_MODE</p>
441+
<h3 class="font-headline text-2xl font-bold mb-4 text-white uppercase tracking-tight">Sequential Download</h3>
442+
<p class="text-on-surface-variant text-sm font-body leading-relaxed">Download files in strict order for media-first access. Preview videos and audio while the download is still in progress.</p>
439443
</div>
440444
<!-- Headless Server -->
441-
<div class="bg-[#120b29] p-7 rounded-2xl border border-white/5 card-shimmer group reveal-card" style="transition-delay: 0.3s;">
442-
<div class="w-12 h-12 bg-primary-dim/10 rounded-xl flex items-center justify-center mb-5 border border-primary-dim/20 group-hover:scale-110 transition-transform">
443-
<span class="material-symbols-outlined text-primary-dim text-2xl">terminal</span>
445+
<div class="bg-[#120b29] p-10 rounded-2xl border border-white/5 card-shimmer group reveal-card h-full flex flex-col" style="transition-delay: 0.3s;">
446+
<div class="w-16 h-16 bg-primary-dim/10 rounded-xl flex items-center justify-center mb-8 border border-primary-dim/20 group-hover:scale-110 transition-transform">
447+
<span class="material-symbols-outlined text-primary-dim text-3xl feat-icon-cyan">terminal</span>
444448
</div>
445-
<p class="font-body text-primary-dim text-xs mb-2 tracking-[0.3em] uppercase">// DAEMON_ARCHITECTURE</p>
446-
<h3 class="font-headline text-xl font-bold mb-3 text-white uppercase tracking-tight">Headless Server</h3>
447-
<p class="text-on-surface-variant text-xs font-body leading-relaxed">Run as a background daemon with a token-protected HTTP API. Perfect for servers, Raspberry Pis, and remote orchestration.</p>
449+
<p class="font-body text-primary-dim/70 text-xs mb-3 tracking-[0.3em] uppercase">// DAEMON_ARCHITECTURE</p>
450+
<h3 class="font-headline text-2xl font-bold mb-4 text-white uppercase tracking-tight">Headless Server</h3>
451+
<p class="text-on-surface-variant text-sm font-body leading-relaxed">Run as a background daemon with a token-protected HTTP API. Perfect for servers, Raspberry Pis, and remote orchestration.</p>
448452
</div>
449453
<!-- Work Stealing -->
450-
<div class="bg-[#120b29] p-7 rounded-2xl border border-white/5 card-shimmer group reveal-card" style="transition-delay: 0.4s;">
451-
<div class="w-12 h-12 bg-secondary/10 rounded-xl flex items-center justify-center mb-5 border border-secondary/20 group-hover:scale-110 transition-transform">
452-
<span class="material-symbols-outlined text-secondary text-2xl">psychology</span>
454+
<div class="bg-[#120b29] p-10 rounded-2xl border border-white/5 card-shimmer group reveal-card h-full flex flex-col" style="transition-delay: 0.4s;">
455+
<div class="w-16 h-16 bg-secondary/10 rounded-xl flex items-center justify-center mb-8 border border-secondary/20 group-hover:scale-110 transition-transform">
456+
<span class="material-symbols-outlined text-secondary text-3xl feat-icon-magenta">psychology</span>
453457
</div>
454-
<p class="font-body text-secondary text-xs mb-2 tracking-[0.3em] uppercase">// INTELLIGENT_SCHEDULING</p>
455-
<h3 class="font-headline text-xl font-bold mb-3 text-white uppercase tracking-tight">Work Stealing</h3>
456-
<p class="text-on-surface-variant text-xs font-body leading-relaxed">Fast idle workers steal chunks from slow workers. Health checks restart underperforming connections automatically.</p>
458+
<p class="font-body text-secondary/70 text-xs mb-3 tracking-[0.3em] uppercase">// INTELLIGENT_SCHEDULING</p>
459+
<h3 class="font-headline text-2xl font-bold mb-4 text-white uppercase tracking-tight">Work Stealing</h3>
460+
<p class="text-on-surface-variant text-sm font-body leading-relaxed">Fast idle workers steal chunks from slow workers. Health checks restart underperforming connections automatically.</p>
457461
</div>
458462
<!-- Beautiful TUI -->
459-
<div class="bg-[#120b29] p-7 rounded-2xl border border-white/5 card-shimmer group reveal-card" style="transition-delay: 0.5s;">
460-
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-5 border border-primary/20 group-hover:scale-110 transition-transform">
461-
<span class="material-symbols-outlined text-primary text-2xl">palette</span>
463+
<div class="bg-[#120b29] p-10 rounded-2xl border border-white/5 card-shimmer group reveal-card h-full flex flex-col" style="transition-delay: 0.5s;">
464+
<div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-8 border border-primary/20 group-hover:scale-110 transition-transform">
465+
<span class="material-symbols-outlined text-primary text-3xl feat-icon-cyan">palette</span>
462466
</div>
463-
<p class="font-body text-primary text-xs mb-2 tracking-[0.3em] uppercase">// TERMINAL_UI</p>
464-
<h3 class="font-headline text-xl font-bold mb-3 text-white uppercase tracking-tight">Beautiful TUI</h3>
465-
<p class="text-on-surface-variant text-xs font-body leading-relaxed">Built with Bubble Tea &amp; Lip Gloss. Keyboard-driven workflow with live speed graphs, queued/active/done tabs and settings UI.</p>
467+
<p class="font-body text-primary/70 text-xs mb-3 tracking-[0.3em] uppercase">// TERMINAL_UI</p>
468+
<h3 class="font-headline text-2xl font-bold mb-4 text-white uppercase tracking-tight">Beautiful TUI</h3>
469+
<p class="text-on-surface-variant text-sm font-body leading-relaxed">Built with Bubble Tea &amp; Lip Gloss. Keyboard-driven workflow with live speed graphs, queued/active/done tabs and settings UI.</p>
466470
</div>
467471
</div>
468472
</div>
469473
</section>
470474

475+
471476
<!-- Benchmarks Section -->
472477
<section id="benchmarks" class="snap-section py-24 px-8 lg:px-24 relative overflow-hidden">
473478
<div class="absolute left-0 bottom-0 w-full h-1/2 bg-gradient-to-t from-secondary/5 to-transparent pointer-events-none"></div>

0 commit comments

Comments
 (0)