<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Instapage Dashboard Clone</title>
    <script src="https://cdn.tailwindcss.com"></script>
    
    
</head>
<body class="p-8">

    <div class="max-w-6xl mx-auto grid grid-cols-12 gap-6">
        
        <!-- Left Side: 4 Small Cards -->
        <div class="col-span-12 md:col-span-6 grid grid-cols-2 gap-4">
            <!-- Visits -->
            <div class="card shadow-sm">
                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Visits</p>
                <h3 class="text-3xl font-bold text-gray-800 my-1">7,245</h3>
                <p class="text-xs font-bold text-emerald-500">▲ 12.5%</p>
            </div>
            <!-- Users -->
            <div class="card shadow-sm">
                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Users</p>
                <h3 class="text-3xl font-bold text-gray-800 my-1">3,310</h3>
                <p class="text-xs font-bold text-emerald-500">▲ 8.2%</p>
            </div>
            <!-- Clicks -->
            <div class="card shadow-sm">
                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Clicks</p>
                <h3 class="text-3xl font-bold text-gray-800 my-1">5,671</h3>
                <p class="text-xs font-bold text-emerald-500">▲ 5.1%</p>
            </div>
            <!-- Sales -->
            <div class="card shadow-sm">
                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Sales</p>
                <h3 class="text-3xl font-bold text-gray-800 my-1">156</h3>
                <p class="text-xs font-bold text-emerald-500">▲ 2.3%</p>
            </div>
        </div>

        <!-- Right Side: Connect Account Section -->
        <div class="col-span-12 md:col-span-6 flex flex-col justify-center px-4">
            <h2 class="text-3xl font-bold text-white/90 mb-4 leading-tight">Stay organized and connected</h2>
            <p class="text-gray-400 text-sm mb-6 leading-relaxed">
                Use this space to add more details about your data, a custom message, or to talk about important news.
            </p>
            <button class="bg-[#4ade80] hover:bg-[#3bc771] text-[#0f172a] font-bold py-3 px-6 rounded-lg w-fit transition">
                Connect account
            </button>
        </div>

        <!-- Bottom Row: Charts -->
        
        <!-- Traffic by Device -->
        <div class="col-span-12 md:col-span-6 card shadow-sm min-h-[300px]">
            <h4 class="text-sm font-bold text-gray-700 mb-10">Traffic by device</h4>
            <div class="flex items-end justify-between gap-4 h-32 px-4">
                <div class="bg-blue-300 w-full rounded-md" style="height: 40%;"></div>
                <div class="bg-emerald-400 w-full rounded-md" style="height: 70%;"></div>
                <div class="bg-slate-800 w-full rounded-md" style="height: 55%;"></div>
                <div class="bg-blue-500 w-full rounded-md" style="height: 90%;"></div>
                <div class="bg-slate-200 w-full rounded-md" style="height: 35%;"></div>
                <div class="bg-emerald-400 w-full rounded-md" style="height: 65%;"></div>
            </div>
        </div>

        <!-- Traffic by Location -->
        <div class="col-span-12 md:col-span-6 card shadow-sm min-h-[300px] flex flex-col">
            <h4 class="text-sm font-bold text-gray-700 mb-6">Traffic by location</h4>
            <div class="flex items-center gap-8 mt-4">
                <!-- Donut Chart Placeholder -->
                <div class="relative w-32 h-32 rounded-full border-[15px] border-emerald-400 flex items-center justify-center">
                   <div class="absolute inset-[-15px] rounded-full border-[15px] border-blue-400 border-l-transparent border-t-transparent border-r-transparent"></div>
                </div>
                <!-- Legend -->
                <div class="flex-1 space-y-3">
                    <div class="flex justify-between items-center text-sm font-medium">
                        <span class="text-gray-500">United States</span>
                        <span class="text-gray-800">40.2%</span>
                    </div>
                    <div class="flex justify-between items-center text-sm font-medium">
                        <span class="text-gray-500">Canada</span>
                        <span class="text-gray-800">22.5%</span>
                    </div>
                    <div class="flex justify-between items-center text-sm font-medium">
                        <span class="text-gray-500">Mexico</span>
                        <span class="text-gray-800">18.3%</span>
                    </div>
                    <div class="flex justify-between items-center text-sm font-medium">
                        <span class="text-gray-500">Other</span>
                        <span class="text-gray-800">19.0%</span>
                    </div>
                </div>
            </div>
        </div>

    </div>

</body>
</html>