computer/public/og-image.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            width: 1200px;
            height: 630px;
            background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        .bg-blur {
            position: absolute;
            border-radius: 50%;
            filter: blur(150px);
        }
        .bg-blur-1 {
            top: -20%;
            left: -10%;
            width: 50%;
            height: 50%;
            background: rgba(45, 106, 227, 0.15);
        }
        .bg-blur-2 {
            bottom: -20%;
            right: -10%;
            width: 50%;
            height: 50%;
            background: rgba(0, 255, 155, 0.15);
        }
        .content {
            position: relative;
            z-index: 10;
            text-align: center;
            padding: 60px;
            max-width: 1000px;
        }
        .logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            margin-bottom: 40px;
        }
        .logo svg {
            width: 64px;
            height: 64px;
            fill: white;
        }
        .logo-text {
            font-size: 48px;
            font-weight: 800;
            color: white;
            letter-spacing: 1px;
        }
        .title {
            font-size: 72px;
            font-weight: 800;
            color: white;
            margin-bottom: 30px;
            line-height: 1.1;
        }
        .highlight {
            color: #00ff9b;
        }
        .subtitle {
            font-size: 32px;
            color: #a0a0a0;
            margin-bottom: 40px;
            line-height: 1.4;
        }
        .badges {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }
        .badge {
            background: rgba(0, 255, 155, 0.1);
            border: 2px solid rgba(0, 255, 155, 0.3);
            padding: 12px 30px;
            border-radius: 50px;
            font-size: 20px;
            font-weight: 600;
            color: #00ff9b;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .badge svg {
            width: 24px;
            height: 24px;
            fill: #00ff9b;
        }
    </style>
</head>
<body>
    <div class="bg-blur bg-blur-1"></div>
    <div class="bg-blur bg-blur-2"></div>

    <div class="content">
        <div class="logo">
            <svg viewBox="0 0 67 67" xmlns="http://www.w3.org/2000/svg">
                <path d="M22.21 67V44.6369H0V67H22.21Z"></path>
                <path d="M0 44.6369L22.21 46.8285V44.6369H0Z" opacity="0.7"></path>
                <path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z"></path>
                <path d="M22.21 0H0V22.3184H22.21V0Z"></path>
                <path d="M66.7198 0H44.5098V22.3184H66.7198V0Z"></path>
                <path d="M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" opacity="0.7"></path>
                <path d="M66.7198 67V44.6369H44.5098V67H66.7198Z"></path>
            </svg>
            <div class="logo-text">Hanzo</div>
        </div>

        <h1 class="title">
            AI Supercomputing<br>
            <span class="highlight">On Your Terms</span>
        </h1>

        <p class="subtitle">
            Access NVIDIA DGX, H100 & H200 GPUs<br>
            Starting at $3,999
        </p>

        <div class="badges">
            <div class="badge">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
                DGX Spark
            </div>
            <div class="badge">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
                    <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
                </svg>
                H100 & H200
            </div>
            <div class="badge">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="10"/>
                    <polyline points="12 6 12 12 16 14"/>
                </svg>
                On-Demand
            </div>
        </div>
    </div>
</body>
</html>