Base UI.
This commit is contained in:
Alfred Jophy
parent
950b2a5439
commit
614c87aaae
12 changed files with 611 additions and 13 deletions
10
src/app.html
10
src/app.html
|
|
@ -1,11 +1,19 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<title>ComputeCloud.in | Cloud Consulting Excellence</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
|
||||
rel="stylesheet">
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
|
||||
<body data-sveltekit-preload-data="hover" class="bg-black text-slate-300">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
61
src/lib/components/cloud-partners.svelte
Normal file
61
src/lib/components/cloud-partners.svelte
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<script lang="ts">
|
||||
const PARTNERS = [
|
||||
{ name: 'Google Cloud', icon: 'fa-brands fa-google', description: 'GCP Certified' },
|
||||
{ name: 'Microsoft Azure', icon: 'fa-brands fa-microsoft', description: 'Solutions Partner' },
|
||||
{ name: 'Cloudflare', icon: 'fa-brands fa-cloudflare', description: 'Edge Security' },
|
||||
{ name: 'Hetzner', icon: 'fa-solid fa-server', description: 'Infrastructure' },
|
||||
{ name: 'DigitalOcean', icon: 'fa-brands fa-digital-ocean', description: 'Cloud Services' },
|
||||
{ name: 'Linode', icon: 'fa-brands fa-linode', description: 'Compute Expert' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<section id="cloud-stack" class="border-y border-white/5 bg-black py-24">
|
||||
<div class="container mx-auto px-8">
|
||||
<div class="mb-16 text-center">
|
||||
<h2 class="mb-4 text-[10px] font-black tracking-[0.4em] text-cyan-500 uppercase">
|
||||
Ecosystem Partners
|
||||
</h2>
|
||||
<p class="text-2xl font-black tracking-tighter text-white">
|
||||
Certified Infrastructure Experts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-6">
|
||||
{#each PARTNERS as partner, i (i)}
|
||||
<div
|
||||
class="group flex flex-col items-center justify-center rounded-3xl border border-white/5 bg-[#080808] p-8 transition-all duration-500 hover:border-white/10 hover:bg-white/[0.02]"
|
||||
>
|
||||
<div
|
||||
class="mb-4 flex h-10 w-10 items-center justify-center text-slate-500 transition-colors group-hover:text-white"
|
||||
>
|
||||
<i class={`${partner.icon} text-xl`}></i>
|
||||
</div>
|
||||
<p
|
||||
class="mb-1 text-center text-[10px] font-black tracking-widest text-white uppercase transition-colors group-hover:text-cyan-400"
|
||||
>
|
||||
{partner.name}
|
||||
</p>
|
||||
<p class="text-center text-[8px] font-bold tracking-widest text-slate-600 uppercase">
|
||||
{partner.description}
|
||||
</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mt-16 flex flex-wrap justify-center gap-x-12 gap-y-4 opacity-30 grayscale transition-opacity hover:opacity-60"
|
||||
>
|
||||
<span class="text-[10px] font-black tracking-widest text-white uppercase"
|
||||
>Architect Professional</span
|
||||
>
|
||||
<span class="text-[10px] font-black tracking-widest text-white uppercase"
|
||||
>Security Specialist</span
|
||||
>
|
||||
<span class="text-[10px] font-black tracking-widest text-white uppercase"
|
||||
>DevSecOps Engineer</span
|
||||
>
|
||||
<span class="text-[10px] font-black tracking-widest text-white uppercase">Network Expert</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
119
src/lib/components/contact.svelte
Normal file
119
src/lib/components/contact.svelte
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
<script lang="ts">
|
||||
let isSubmitted = false;
|
||||
</script>
|
||||
|
||||
<section id="contact" class="bg-black py-32">
|
||||
<div class="container mx-auto px-8">
|
||||
<div
|
||||
class="flex flex-col gap-20 rounded-[3rem] border border-white/5 bg-[#080808] p-12 md:p-20 lg:flex-row"
|
||||
>
|
||||
<div class="lg:w-1/2">
|
||||
<h2 class="mb-8 text-5xl font-black tracking-tighter text-white">
|
||||
Initiate <br />Migration.
|
||||
</h2>
|
||||
<p class="mb-12 text-lg leading-relaxed font-light text-slate-400">
|
||||
Every great infrastructure starts with a conversation. Let's discuss your hardened
|
||||
roadmap.
|
||||
</p>
|
||||
|
||||
<div class="space-y-10">
|
||||
<div class="flex items-start space-x-6">
|
||||
<div
|
||||
class="flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-cyan-500"
|
||||
>
|
||||
<i class="fas fa-envelope text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-1 text-[10px] font-bold tracking-widest text-slate-600 uppercase">
|
||||
Direct Communication
|
||||
</p>
|
||||
<p class="text-lg font-medium text-white">solutions@computecloud.in</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start space-x-6">
|
||||
<div
|
||||
class="flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-cyan-500"
|
||||
>
|
||||
<i class="fas fa-map-pin text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-1 text-[10px] font-bold tracking-widest text-slate-600 uppercase">
|
||||
Operational Hub
|
||||
</p>
|
||||
<p class="text-lg font-medium text-white">Tech Corridor, Bangalore</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:w-1/2">
|
||||
{#if isSubmitted}
|
||||
<div
|
||||
class="animate-in fade-in zoom-in flex h-full flex-col items-center justify-center py-12 text-center duration-500"
|
||||
>
|
||||
<div
|
||||
class="mb-8 flex h-20 w-20 items-center justify-center rounded-full border border-cyan-500/20 bg-cyan-500/10 text-cyan-500"
|
||||
>
|
||||
<i class="fas fa-paper-plane text-2xl"></i>
|
||||
</div>
|
||||
<h3 class="mb-4 text-3xl font-black tracking-tighter text-white">Acknowledge.</h3>
|
||||
<p class="font-light text-slate-500">
|
||||
Our lead architect has been notified. Standby for contact.
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<form onSubmit={handleSubmit} class="space-y-6">
|
||||
<div class="grid gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
class="w-full rounded-2xl border border-white/10 bg-black/40 px-6 py-4 font-light text-white transition-all focus:border-cyan-500 focus:outline-none"
|
||||
placeholder="Principal Name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
class="w-full rounded-2xl border border-white/10 bg-black/40 px-6 py-4 font-light text-white transition-all focus:border-cyan-500 focus:outline-none"
|
||||
placeholder="Work Email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
class="w-full rounded-2xl border border-white/10 bg-black/40 px-6 py-4 font-light text-white transition-all focus:border-cyan-500 focus:outline-none"
|
||||
placeholder="Organization / Project"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<select
|
||||
class="w-full appearance-none rounded-2xl border border-white/10 bg-black/40 px-6 py-4 font-light text-slate-400 transition-all focus:border-cyan-500 focus:outline-none"
|
||||
>
|
||||
<option class="bg-slate-900">Hardened Migration</option>
|
||||
<option class="bg-slate-900">DevSecOps Audit</option>
|
||||
<option class="bg-slate-900">Zero-Trust Implementation</option>
|
||||
<option class="bg-slate-900">Managed SRE</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<textarea
|
||||
rows={4}
|
||||
class="w-full resize-none rounded-2xl border border-white/10 bg-black/40 px-6 py-4 font-light text-white transition-all focus:border-cyan-500 focus:outline-none"
|
||||
placeholder="Requirements Summary..."
|
||||
></textarea>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full rounded-2xl bg-white py-5 text-xs font-black tracking-[0.3em] text-black uppercase shadow-2xl transition-all hover:scale-[1.02] hover:bg-cyan-500 active:scale-95"
|
||||
>
|
||||
Submit Proposal
|
||||
</button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
50
src/lib/components/footer.svelte
Normal file
50
src/lib/components/footer.svelte
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<footer class="border-t border-white/5 bg-black py-16">
|
||||
<div class="container mx-auto px-8">
|
||||
<div class="mb-16 flex flex-col items-start justify-between gap-12 md:flex-row">
|
||||
<div class="max-w-xs">
|
||||
<div class="mb-6 flex items-center space-x-3">
|
||||
<div
|
||||
class="flex h-10 w-10 items-center justify-center rounded-lg bg-white font-black text-black"
|
||||
>
|
||||
C
|
||||
</div>
|
||||
<span class="text-xl font-black tracking-tighter text-white">ComputeCloud.in</span>
|
||||
</div>
|
||||
<p class="text-sm leading-relaxed font-light text-slate-500">
|
||||
Architecting secure, scalable, and highly optimized cloud infrastructures for the next
|
||||
generation of digital enterprises.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-16 md:grid-cols-3">
|
||||
<div>
|
||||
<h4 class="mb-6 text-[10px] font-black tracking-[0.3em] text-white uppercase">Network</h4>
|
||||
<ul class="space-y-4 text-sm font-light text-slate-500">
|
||||
<li><a href="#" class="transition-colors hover:text-white">LinkedIn</a></li>
|
||||
<li><a href="#" class="transition-colors hover:text-white">X / Twitter</a></li>
|
||||
<li><a href="#" class="transition-colors hover:text-white">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="mb-6 text-[10px] font-black tracking-[0.3em] text-white uppercase">
|
||||
Resources
|
||||
</h4>
|
||||
<ul class="space-y-4 text-sm font-light text-slate-500">
|
||||
<li>
|
||||
<a href="#cloud-stack" class="transition-colors hover:text-white">Cloud Stack</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-col items-center justify-between gap-4 border-t border-white/5 pt-12 text-[10px] font-bold tracking-widest text-slate-600 uppercase md:flex-row"
|
||||
>
|
||||
<p>© 2026 COMPUTECLOUD.IN — ALL RIGHTS RESERVED.</p>
|
||||
<div class="flex space-x-10">
|
||||
<a href="/privacy-protocol" class="transition-colors hover:text-white">Privacy Protocol</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
118
src/lib/components/hero.svelte
Normal file
118
src/lib/components/hero.svelte
Normal 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>
|
||||
58
src/lib/components/navbar.svelte
Normal file
58
src/lib/components/navbar.svelte
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let isScrolled = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
const handleScroll = () => {
|
||||
isScrolled = window.scrollY > 20;
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<nav
|
||||
class={[
|
||||
`fixed top-0 right-0 left-0 z-50 transition-all duration-500`,
|
||||
isScrolled && `border-b border-white/5 bg-black/90 py-3 backdrop-blur-xl`,
|
||||
!isScrolled && `bg-transparent py-8`
|
||||
]}
|
||||
>
|
||||
<div class="container mx-auto flex items-center justify-between px-8">
|
||||
<a href="#home" class="group flex items-center space-x-3">
|
||||
<div
|
||||
class="flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/5 transition-all group-hover:border-cyan-500/50 group-hover:bg-cyan-500/10"
|
||||
>
|
||||
<i class="fas fa-cloud text-lg text-white transition-transform group-hover:scale-110"></i>
|
||||
</div>
|
||||
<span class="text-xl font-bold tracking-tighter text-white">
|
||||
COMPUTE<span class="ml-1 font-extrabold tracking-widest text-cyan-500">CLOUD</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="hidden items-center space-x-12 md:flex">
|
||||
<a
|
||||
href="#home"
|
||||
class="text-xs font-bold tracking-[0.2em] text-slate-400 uppercase transition-colors hover:text-white"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<a
|
||||
href="#contact"
|
||||
class="text-xs font-bold tracking-[0.2em] text-slate-400 uppercase transition-colors hover:text-white"
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
<a
|
||||
href="#contact"
|
||||
class="rounded-full border border-white/10 px-6 py-2 text-xs font-bold tracking-widest text-white uppercase transition-all hover:border-white/20 hover:bg-white hover:text-black"
|
||||
>
|
||||
Connect
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
25
src/lib/components/service-card.svelte
Normal file
25
src/lib/components/service-card.svelte
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<script lang="ts">
|
||||
let { title, icon, description, color } = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="group flex flex-col items-start rounded-[2.5rem] border border-white/5 bg-[#080808] p-10 text-left transition-all duration-500 hover:border-white/10 hover:bg-white/[0.03]"
|
||||
>
|
||||
<div
|
||||
class="mb-8 flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/5 transition-all group-hover:border-cyan-500/30"
|
||||
>
|
||||
<i class={`fas ${icon} text-lg text-white/50 transition-colors group-hover:text-cyan-400`}></i>
|
||||
</div>
|
||||
<h3 class="mb-4 text-xl font-bold tracking-tight text-white">{title}</h3>
|
||||
<p class="mb-10 grow text-sm leading-relaxed font-light text-slate-500">
|
||||
{description}
|
||||
</p>
|
||||
<a
|
||||
href="#contact"
|
||||
class="flex items-center text-[10px] font-black tracking-[0.3em] text-white/40 uppercase transition-all group-hover:text-white"
|
||||
>
|
||||
Protocol <i
|
||||
class="fas fa-arrow-right ml-3 translate-x-0 transition-transform group-hover:translate-x-2"
|
||||
></i>
|
||||
</a>
|
||||
</div>
|
||||
77
src/lib/components/services.svelte
Normal file
77
src/lib/components/services.svelte
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<script lang="ts">
|
||||
import ServiceCard from './service-card.svelte';
|
||||
|
||||
const SERVICES = [
|
||||
{
|
||||
title: 'Hardened Migration',
|
||||
description:
|
||||
'Secure-by-design cloud migration architectures for AWS, Azure, and GCP focusing on threat-modelled transitions.',
|
||||
icon: 'fa-server',
|
||||
color: 'bg-white/5'
|
||||
},
|
||||
{
|
||||
title: 'Zero-Trust Mesh',
|
||||
description:
|
||||
'Eliminate implicit trust with modern identity management, mTLS encryption, and granular policy enforcement.',
|
||||
icon: 'fa-shield-halved',
|
||||
color: 'bg-white/5'
|
||||
},
|
||||
{
|
||||
title: 'DevSecOps Pipeline',
|
||||
description:
|
||||
'Automated security scanning (SAST/DAST), container vulnerability audits, and compliant CI/CD workflows.',
|
||||
icon: 'fa-code-branch',
|
||||
color: 'bg-white/5'
|
||||
},
|
||||
{
|
||||
title: 'Cloud Native Defense',
|
||||
description:
|
||||
'Specialized Kubernetes security policies, admission controllers, and runtime threat detection for cloud workloads.',
|
||||
icon: 'fa-cubes',
|
||||
color: 'bg-white/5'
|
||||
},
|
||||
{
|
||||
title: 'Compliance as Code',
|
||||
description:
|
||||
'Automated auditing and remediation using Infrastructure as Code (Terraform/Pulumi) to maintain SOC2/ISO readiness.',
|
||||
icon: 'fa-file-shield',
|
||||
color: 'bg-white/5'
|
||||
},
|
||||
{
|
||||
title: 'Resilient SRE',
|
||||
description:
|
||||
'Reliability engineering with a security focus, ensuring high availability through hardened fault-tolerant systems.',
|
||||
icon: 'fa-heart-pulse',
|
||||
color: 'bg-white/5'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<section id="services" class="bg-black py-32">
|
||||
<div class="container mx-auto px-8">
|
||||
<div class="mb-20 flex flex-col justify-between gap-8 md:flex-row md:items-end">
|
||||
<div class="max-w-xl">
|
||||
<h2 class="mb-6 text-[10px] font-black tracking-[0.4em] text-cyan-500 uppercase">
|
||||
Security First Stack
|
||||
</h2>
|
||||
<p class="text-4xl font-black tracking-tighter text-white md:text-5xl">
|
||||
Hardened for <br />the modern threat landscape.
|
||||
</p>
|
||||
</div>
|
||||
<div class="max-w-sm text-sm font-light text-slate-500">
|
||||
Our multi-disciplinary team integrates security into every layer of your cloud ecosystem
|
||||
from day zero.
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each SERVICES as service, i (i)}
|
||||
<ServiceCard
|
||||
title={service.title}
|
||||
description={service.description}
|
||||
icon={service.icon}
|
||||
color={service.color}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
<script lang="ts">
|
||||
import Navbar from '$lib/components/navbar.svelte';
|
||||
import Footer from '$lib/components/footer.svelte';
|
||||
import './layout.css';
|
||||
import favicon from '$lib/assets/favicon.svg';
|
||||
|
||||
|
|
@ -6,4 +8,11 @@
|
|||
</script>
|
||||
|
||||
<svelte:head><link rel="icon" href={favicon} /></svelte:head>
|
||||
|
||||
<div
|
||||
class="min-h-screen overflow-x-hidden bg-black selection:bg-cyan-500/20 selection:text-cyan-400"
|
||||
>
|
||||
<Navbar />
|
||||
{@render children()}
|
||||
<Footer />
|
||||
</div>
|
||||
|
|
|
|||
2
src/routes/+layout.ts
Normal file
2
src/routes/+layout.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export const prerender = true;
|
||||
export const ssr = false;
|
||||
|
|
@ -1,2 +1,13 @@
|
|||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
||||
<script lang="ts">
|
||||
import CloudPartners from '$lib/components/cloud-partners.svelte';
|
||||
import Contact from '$lib/components/contact.svelte';
|
||||
import Hero from '$lib/components/hero.svelte';
|
||||
import Services from '$lib/components/services.svelte';
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<Hero />
|
||||
<Services />
|
||||
<CloudPartners />
|
||||
<Contact />
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,63 @@
|
|||
@import 'tailwindcss';
|
||||
@plugin '@tailwindcss/forms';
|
||||
@plugin '@tailwindcss/typography';
|
||||
/* @plugin '@tailwindcss/forms'; */
|
||||
/* @plugin '@tailwindcss/typography'; */
|
||||
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.01);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.hero-gradient {
|
||||
background: radial-gradient(circle at 0% 0%, #111 0%, #000 100%);
|
||||
}
|
||||
|
||||
.text-glow {
|
||||
text-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
|
||||
}
|
||||
|
||||
.accent-border {
|
||||
border: 1px solid rgba(34, 211, 238, 0.1);
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0px) scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-15px) scale(1.02);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #222;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #333;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue