<!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 UI</title>


</head>

<body>

<div class="main-wrapper">

    <!-- Background Glow -->
    <div class="glow bg-pink-300 -top-20 -left-20"></div>
    <div class="glow bg-purple-300 bottom-0 -right-20"></div>

    <!-- Navbar -->
    <nav class="relative z-10 flex justify-between items-center px-12 py-8">
        <div class="flex items-center gap-2">
            <div class="w-8 h-8 bg-black rounded-lg flex items-center justify-center">
                <div class="w-3 h-3 border-2 border-white rounded-full"></div>
            </div>
            <span class="text-xl font-extrabold">Marketeam</span>
        </div>

        <ul class="flex gap-8 text-sm font-semibold text-gray-600">
            <li>Solutions ▼</li>
            <li>Blog</li>
            <li>How it works</li>
            <li>Pricing</li>
            <li>AI Agent</li>
        </ul>

        <div class="flex items-center gap-6">
            <button class="font-bold">Sign In</button>
            <button class="bg-black text-white px-6 py-2 rounded-full font-bold">Book a Demo</button>
        </div>
    </nav>

    <!-- Hero -->
    <div class="relative z-10 text-center mt-16 px-4">
        <h1 class="text-6xl font-extrabold text-gray-900 mb-6 leading-tight">
            Access <span class="text-purple-500">Top Marketing</span><br>
            <span class="text-pink-500">Talent</span> Instantly!
        </h1>

        <p class="max-w-2xl mx-auto text-gray-500 mb-10">
            Unlock Top-Tier Marketing Expertise Without Overspending — Your 
            Success is Just a Step Away!
        </p>

        <div class="flex justify-center gap-4">
            <button class="bg-black text-white px-8 py-3 rounded-full font-bold">
                Get Started
            </button>

            <button class="flex items-center gap-2 px-8 py-3 font-bold">
                Watch Video 
                <span class="bg-black text-white w-5 h-5 flex items-center justify-center rounded-full text-xs">▶</span>
            </button>
        </div>
    </div>

    <!-- Avatars -->
    <div class="relative z-10 mt-20 flex justify-center items-end gap-6 px-10">

        <!-- Left -->
        <div class="avatar-card w-48 h-64 bg-purple-500 mb-20 rotate-[-5deg]">
            <img decoding="async" src="https://api.dicebear.com/7.x/adventurer/svg?seed=Ali" class="w-full h-full object-cover" alt="Svg?seed=Ali" title="Elementor #9464">
        </div>

        <!-- Circle -->
        <div class="w-56 h-56 rounded-full overflow-hidden border-[12px] border-white shadow-xl bg-pink-400 mb-4">
            <img decoding="async" src="https://api.dicebear.com/7.x/adventurer/svg?seed=Sara" class="w-full h-full object-cover" alt="Svg?seed=Sara" title="Elementor #9464">
        </div>

        <!-- Center -->
        <div class="avatar-card w-56 h-72 bg-black mb-12">
            <img decoding="async" src="https://api.dicebear.com/7.x/adventurer/svg?seed=Ahmed" class="w-full h-full object-cover" alt="Svg?seed=Ahmed" title="Elementor #9464">
        </div>

        <!-- Circle -->
        <div class="w-56 h-56 rounded-full overflow-hidden border-[12px] border-white shadow-xl bg-purple-500">
            <img decoding="async" src="https://api.dicebear.com/7.x/adventurer/svg?seed=Zain" class="w-full h-full object-cover" alt="Svg?seed=Zain" title="Elementor #9464">
        </div>

        <!-- Right -->
        <div class="avatar-card w-48 h-64 bg-blue-400 mb-24 rotate-[5deg]">
            <img decoding="async" src="https://api.dicebear.com/7.x/adventurer/svg?seed=Usman" class="w-full h-full object-cover" alt="Svg?seed=Usman" title="Elementor #9464">
        </div>

    </div>

</div>

</body>
</html>