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

Base UI.

Browse source
This commit is contained in:
Alfred Jophy 2026-02-02 21:57:00 +05:30
commit 614c87aaae
12 changed files with 611 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

118
src/lib/components/hero.svelte Normal file
View file

@ -0,0 +1,118 @@
<script lang="ts">
import { onMount } from 'svelte';
const PHRASES = [
'ABSOLUTE RESILIENCE.',
'GLOBAL SCALE.',
'UNBREAKABLE SECURITY.',
'DEVSECOPS EXCELLENCE.',
'NEXT-GEN COMPUTE.'
];
let index = $state(0);
onMount(() => {
const interval = setInterval(() => {
index = (index + 1) % PHRASES.length;
}, 4000);
return () => {
clearInterval(interval);
};
});
</script>
<section
id="home"
class="hero-gradient relative flex min-h-screen items-center overflow-hidden pt-24"
>
<div
class="absolute top-[-10%] right-[-10%] h-125 w-125 rounded-full bg-cyan-900/10 blur-[120px]"
></div>
<div class="relative z-10 container mx-auto px-8">
<div class="max-w-4xl">
<div
class="mb-10 inline-flex items-center space-x-3 rounded-full border border-white/5 bg-white/5 px-5 py-2"
>
<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
>
</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)}
<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'
}`}
>
{phrase}
</span>
{/each}
</span>
</h1>
<p class="mb-12 max-w-2xl text-xl leading-relaxed font-light text-slate-400">
ComputeCloud.in architecting the backbone for global enterprises. We specialize in hardened
DevSecOps pipelines, zero-trust security, and high-velocity migrations.
</p>
<div class="flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-6">
<a
href="#contact"
class="rounded-full bg-white px-10 py-5 text-center text-xs font-black tracking-widest text-black uppercase shadow-2xl shadow-white/5 transition-all hover:scale-105 hover:bg-cyan-500"
>
Initiate Consultation
</a>
</div>
<div class="mt-24 grid grid-cols-2 gap-12 border-t border-white/5 pt-12 md:grid-cols-4">
<div>
<p class="text-2xl font-black tracking-tighter text-white">ZERO</p>
<p class="mt-1 text-[10px] font-bold tracking-widest text-slate-500 uppercase">
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">
Compliance Ready
</p>
</div>
</div>
</div>
</div>
<div
class="pointer-events-none absolute top-1/2 right-[-5%] hidden w-1/3 -translate-y-1/2 opacity-20 lg:block"
>
<div class="animate-float">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path
fill="#22D3EE"
d="M44.7,-76.4C58.3,-69.2,70.1,-58.5,78.2,-45.5C86.3,-32.5,90.7,-17.3,89.5,-2.7C88.2,11.8,81.4,25.7,72.6,38C63.8,50.3,53.1,60.9,40.5,68.1C27.9,75.3,14,79,-0.3,79.5C-14.6,80,-29.2,77.3,-42,70.6C-54.8,63.9,-65.8,53.1,-73.4,40.3C-81,27.5,-85.2,12.7,-84.3,-1.5C-83.3,-15.7,-77.3,-29.3,-68.4,-40.5C-59.5,-51.7,-47.7,-60.5,-35.3,-68.5C-22.9,-76.5,-11.4,-83.7,2.3,-87.6C16.1,-91.5,31.2,-83.6,44.7,-76.4Z"
transform="translate(100 100)"
/>
</svg>
</div>
</div>
</section>