<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Marketeam Replicate</title>
</head>
<body>
<div class="main-card">
<!-- Navbar -->
<nav class="flex justify-between items-center mb-24">
<div class="flex items-center gap-12">
<div class="flex items-center gap-2">
<div class="w-6 h-6 bg-black rounded-sm flex items-center justify-center">
<span class="text-white text-[10px]">M</span>
</div>
<span class="text-xl font-bold tracking-tight text-black/80">Marketeam</span>
</div>
<div class="flex gap-8 text-sm font-medium text-black/60">
<a href="#">Your Team</a>
<a href="#">Solutions</a>
<a href="#">Blog</a>
<a href="#">Pricing</a>
</div>
</div>
<div class="flex gap-8 items-center">
<a href="#" class="text-sm font-medium text-white/80">Log In</a>
<button class="bg-white text-black px-6 py-2.5 rounded-full text-sm font-bold shadow-lg">Join Now</button>
</div>
</nav>
<!-- Hero -->
<div class="flex h-[500px]">
<!-- Left -->
<div class="w-1/2 flex flex-col justify-center">
<h1 class="text-[56px] leading-[1.1] font-bold text-black/90 mb-8">
Unlock Top <br>
Marketing Talent <br>
<span class="opacity-60 font-medium italic">You Thought Was</span> <br>
Out of Reach — <br>
<!-- ✅ WHITE TEXT -->
<span class="text-white">
Now Just One <br>
Click Away!
</span>
</h1>
<button class="cta-btn w-fit text-white px-8 py-3.5 rounded-full flex items-center gap-3 text-sm font-medium">
Start Project
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4
4a.5.5 0 0 1 0 .708l-4
4a.5.5 0 0 1-.708-.708L13.293
8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</button>
<div class="absolute bottom-40 left-[200px] bg-purple-400/80 px-3 py-1 rounded-full text-[10px] font-bold text-white shadow-lg">
David
</div>
</div>
<!-- Right -->
<div class="w-1/2 relative">
<div class="orbit-ring w-[250px] h-[250px]"></div>
<div class="orbit-ring w-[400px] h-[400px]"></div>
<div class="orbit-ring w-[550px] h-[550px]"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center z-10">
<h3 class="text-5xl font-bold text-white">20k+</h3>
<p class="text-xs uppercase tracking-widest text-white/50 mt-1">Specialists</p>
</div>
<div class="profile-bubble top-20 right-20" style="background-image: url('https://i.pravatar.cc/150?img=1'); border-color: #fca5a5;"></div>
<div class="profile-bubble bottom-20 left-10" style="background-image: url('https://i.pravatar.cc/150?img=2'); border-color: #f9a8d4;"></div>
<div class="profile-bubble top-1/2 -left-6" style="background-image: url('https://i.pravatar.cc/150?img=3'); border-color: #d8b4fe;"></div>
<div class="profile-bubble -bottom-4 right-1/4" style="background-image: url('https://i.pravatar.cc/150?img=4'); border-color: #818cf8;"></div>
<div class="profile-bubble top-4 left-1/3" style="background-image: url('https://i.pravatar.cc/150?img=5');"></div>
</div>
</div>
<!-- Footer -->
<div class="absolute bottom-10 left-0 w-full px-[60px] flex justify-between items-center text-white/40 text-sm font-bold tracking-widest">
<span class="flex items-center gap-2 italic">▲ DREAMURE</span>
<span>SWITCH.WIN</span>
<span class="flex items-center gap-2">● sphere</span>
<span>PinSpace</span>
<span>Visionix</span>
</div>
</div>
</body>
</html>]]>
