computecloud/computecloud.in
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Corrected style in hero section

Browse source
This commit is contained in:
K K Haridev 2026-02-02 22:22:42 +05:30
commit 22c2ce8107
1 changed files with 16 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/lib/components/hero.svelte
View file

@ -25,8 +25,9 @@
id="home"
class="hero-gradient relative flex min-h-screen items-center overflow-hidden pt-24"
>
<!-- Subtle Ambient Light -->
<div
class="absolute top-[-10%] right-[-10%] h-125 w-125 rounded-full bg-cyan-900/10 blur-[120px]"
class="absolute top-[-10%] right-[-10%] h-[500px] w-[500px] rounded-full bg-cyan-900/10 blur-[120px]"
></div>
<div class="relative z-10 container mx-auto px-8">
@ -36,22 +37,22 @@
>
<span class="h-1.5 w-1.5 rounded-full bg-cyan-500 shadow-[0_0_10px_rgba(34,211,238,0.8)]"
></span>
<span class="text-[10px] font-bold tracking-[0.3em] text-white/60 uppercase"
>Advanced DevSecOps & Cloud Architecture</span
>
<span class="text-[10px] font-bold tracking-[0.3em] text-white/60 uppercase">
Advanced DevSecOps & Cloud Architecture
</span>
</div>
<h1 class="mb-8 text-6xl leading-[1.05] font-black tracking-tighter text-white md:text-8xl">
ENGINEERED FOR <br />
<span class="inline-grid grid-cols-1 grid-rows-1">
{#each PHRASES as phrase, i (i)}
{#each PHRASES as phrase, i (phrase)}
<span
style="gridArea: '1 / 1' "
class={`transform bg-linear-to-r from-white via-white to-slate-500 bg-clip-text text-transparent transition-all duration-700 ease-in-out ${
i === index
? 'translate-y-0 opacity-100'
: 'pointer-events-none -translate-y-4 opacity-0'
}`}
style="grid-area: 1 / 1"
class="transform bg-gradient-to-r from-white via-white to-slate-500 bg-clip-text text-transparent transition-all duration-700 ease-in-out
{i === index
? 'translate-y-0 opacity-100'
: 'pointer-events-none -translate-y-4 opacity-0'}"
>
{phrase}
</span>
@ -80,18 +81,21 @@
Critical Breaches Reported
</p>
</div>
<div>
<p class="text-2xl font-black tracking-tighter text-white">99.999%</p>
<p class="mt-1 text-[10px] font-bold tracking-widest text-slate-500 uppercase">
Availability Target
</p>
</div>
<div>
<p class="text-2xl font-black tracking-tighter text-white">1200+</p>
<p class="mt-1 text-[10px] font-bold tracking-widest text-slate-500 uppercase">
Hardened Deployments
</p>
</div>
<div>
<p class="text-2xl font-black tracking-tighter text-white">ISO/SOC2</p>
<p class="mt-1 text-[10px] font-bold tracking-widest text-slate-500 uppercase">
@ -102,6 +106,7 @@
</div>
</div>
<!-- Background visual element -->
<div
class="pointer-events-none absolute top-1/2 right-[-5%] hidden w-1/3 -translate-y-1/2 opacity-20 lg:block"
>