Redeem Voucher Flow - Es Kopi Indonesia x KJ Fest Vol. 1

by oktaviardi pratama

HTML

```python
import os

html_code = """

    <div class="board">
        <!-- Top Banner Header -->
        <div class="header">
            <div class="brand-section">
                <div>
                    <div class="brand-title">eskopi</div>
                    <div class="brand-subtitle">INDONESIA</div>
                </div>
                <span class="x-tag">X</span>
                <div class="event-logo-badge">KJ FEST VOL. 1</div>
            </div>

            <div class="main-title-box">
                <div class="main-title">REDEEM VOUCHER FLOW</div>
                <div class="sub-title">ES KOPI INDONESIA × KJ FEST VOL. 1</div>
                <div class="banner-highlight">DAPATKAN 1 GELAS ES KOPI GRATIS! UNTUK 200 PENGUNJUNG PERTAMA</div>
            </div>

            <div class="quota-badge">
                <div class="quota-title">KUOTA TERBATAS!</div>
                <div class="quota-count">200 CUP</div>
                <div class="quota-desc">SIAPA CEPAT, DIA DAPAT!</div>
            </div>
        </div>

        <!-- 6 Flow Step Mockups -->
        <div class="flow-grid">

            <!-- Step 1 -->
            <div class="flow-step">
                <div class="step-header">
                    <div class="step-num">1</div>
                    <div class="step-title">LANDING PAGE</div>
                    <div class="step-desc">Pengunjung melihat promo di website KJ Fest dan klik banner.</div>
                </div>
                <div class="phone-mockup">
                    <div class="phone-notch"></div>
                    <div class="phone-screen">
                        <div class="screen-header">KJ FEST VOL.1</div>
                        <div class="screen-body s1-bg">
                            <div class="s1-event">KJ FEST</div>
                            <div style="font-size: 8px;">X</div>
                            <div style="font-weight: bold;">eskopi</div>
         ...

CSS

* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            background-color: #f4f7f5;
            color: #1b3d32;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Container Board */
        .board {
            width: 100%;
            max-width: 1280px;
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            padding: 30px;
            border: 1px solid #e1e8e4;
        }

        /* Top Header */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 20px;
            border-bottom: 2px dashed #005a36;
            margin-bottom: 25px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .brand-section {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .brand-title {
            font-size: 26px;
            font-weight: 900;
            color: #005a36;
            font-style: italic;
            line-height: 1.1;
        }

        .brand-subtitle {
            font-size: 11px;
            color: #666;
            font-weight: bold;
            letter-spacing: 0.5px;
        }

        .x-tag {
            font-weight: 900;
            font-size: 20px;
            color: #ff3e3e;
        }

        .event-logo-badge {
            background: linear-gradient(135deg, #ff007a, #ff7b00);
            color: white;
            padding: 6px 14px;
            border-radius: 20px;
            font-weight: 900;
            font-size: 14px;
            box-shadow: 0 4px 10px rgba(255,0,122,0.3);
 ...