<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EternaCloud Clone - Premium UI</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- EternaCloud Section -->
<section id="eternacloud-section">
<!-- Background Glows -->
<div class="bg-glow"></div>
<div class="bg-glow2"></div>
<!-- Hero Section -->
<div class="text-center mb-16 max-w-4xl mx-auto">
<h1 class="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight mb-4">
Trusted by Fortune 10 Hyperscalers<br>
<span class="text-gradient">From Concept to Completion</span>
</h1>
<p class="text-sm sm:text-base">Proven across 330+ MW of data center builds worldwide</p>
</div>
<!-- Cards Section -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 max-w-6xl mx-auto">
<!-- Card 1 -->
<div class="card bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl p-6 h-80 flex flex-col justify-between">
<div class="flex items-center gap-2 text-[10px] uppercase tracking-widest">
<div class="w-2 h-2 rounded-full border border-white"></div> Development
</div>
<div>
<h3 class="text-lg font-medium">From Idea to Solution</h3>
<p class="text-xs mt-1">Streamline planning and reduce busywork.</p>
</div>
</div>
<!-- Card 2 (Active) -->
<div class="card active-card relative overflow-hidden rounded-3xl p-6 h-[340px] flex flex-col justify-between">
<div class="flex items-center gap-2 text-[10px] uppercase tracking-widest">
<div class="w-2 h-2 rounded-full bg-purple-400 animate-pulse"></div> Onboarding
</div>
<div class="mb-2">
<h3 class="text-xl font-semibold leading-tight">From Evaluation to Approval</h3>
<p class="text-xs mt-2 mb-6">Simplify processes and avoid juggling multiple tasks.</p>
<button class="w-full bg-gradient-to-r from-blue-600 to-purple-600 py-3 rounded-xl font-bold text-xs uppercase tracking-wider transition">
See What You Get
</button>
</div>
</div>
<!-- Card 3 -->
<div class="card bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl p-6 h-80 flex flex-col justify-between">
<div class="flex items-center gap-2 text-[10px] uppercase tracking-widest">
<div class="w-2 h-2 rounded-full border border-white"></div> Delivery
</div>
<div>
<h3 class="text-lg font-medium">From Request to Delivery</h3>
<p class="text-xs mt-1">Ensure smooth operations without overhead.</p>
</div>
</div>
<!-- Card 4 -->
<div class="card bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl p-6 h-80 flex flex-col justify-between">
<div class="flex items-center gap-2 text-[10px] uppercase tracking-widest">
<div class="w-2 h-2 rounded-full border border-white"></div> Deployment
</div>
<div>
<h3 class="text-lg font-medium">From Receiving to Turnover</h3>
<p class="text-xs mt-1">Eliminate friction and deliver efficiently.</p>
</div>
</div>
</div>
</section>
</body>
</html>]]>
