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