123 lines
4 KiB
Svelte
123 lines
4 KiB
Svelte
<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"
|
|
>
|
|
<!-- Subtle Ambient Light -->
|
|
<div
|
|
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">
|
|
<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 (phrase)}
|
|
<span
|
|
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>
|
|
{/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>
|
|
|
|
<!-- 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"
|
|
>
|
|
<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>
|