<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webinar Registration</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8f9fa;
        }
        .webinar-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .webinar-card {
            width: 100%;
            max-width: 1200px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            border-radius: 20px;
            overflow: hidden;
            background: #fff;
        }
        .left-column {
            padding: 60px;
        }
        .right-column {
            background-color: #0d244f;
            color: #fff;
            padding: 60px;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,50 Q25,25 50,50 T100,50" stroke="%231a3a7a" fill="none" stroke-width="1"/></svg>');
        }
        .brand-logo {
            font-weight: bold;
            font-size: 1.5rem;
            margin-bottom: 40px;
        }
        .exclusive-tag {
            color: #0d6efd;
            font-weight: bold;
            letter-spacing: 1px;
            font-size: 0.8rem;
        }
        .webinar-title {
            font-size: 2.8rem;
            font-weight: bold;
            margin-top: 10px;
        }
        .webinar-time {
            color: #6c757d;
            margin-top: 20px;
            font-weight: 500;
        }
        .webinar-description {
            margin-top: 20px;
            font-size: 1.1rem;
            color: #495057;
        }
        .speakers-section {
            margin-top: 40px;
        }
        .speakers-section h3 {
            font-weight: bold;
            margin-bottom: 20px;
        }
        .speaker-card {
            text-align: center;
        }
        .speaker-card img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 10px;
        }
        .form-control {
            background-color: #fff;
            border: 1px solid #ced4da;
            border-radius: 8px;
            padding: 12px 15px;
        }
        .btn-register {
            background-color: #0d6efd;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 12px;
            width: 100%;
            font-weight: bold;
        }
        .what-you-learn {
            margin-top: 40px;
        }
        .what-you-learn h4 {
            font-weight: bold;
        }
        .what-you-learn ul {
            list-style: none;
            padding-left: 0;
        }
        .what-you-learn li::before {
            content: "-";
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="webinar-container">
        <div class="webinar-card">
            <div class="row g-0">
                <div class="col-lg-7">
                    <div class="left-column">
                        <img src="assets/pasted-20251017-093140-48a8b5ba.png" alt="Flatlogic" style="width: 280px; margin-bottom: 40px; display: block;">
                        <div class="exclusive-tag">EXCLUSIVE WEBINAR</div>
                        <h1 class="webinar-title">Professional Vibe-coding by Flatlogic</h1>
                        <div class="webinar-time">TUESDAY, DECEMBER 29 | 1PM EST | 10AM PST | 7PM CET</div>
                        <p class="webinar-description">The fastest way to go from an idea to a working app you own, running on your server, with your database, using real frameworks.</p>
                        <div class="speakers-section">
                            <h3>Speakers</h3>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="speaker-card">
                                        <img src="https://i.pravatar.cc/80?img=4" alt="Philip Daineka">
                                        <h5>Philip Daineka</h5>
                                        <p class="text-muted">CEO, Flatlogic</p>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="speaker-card">
                                        <img src="https://i.pravatar.cc/80?img=3" alt="Alexandr Rubanau">
                                        <h5>Alexandr Rubanau</h5>
                                        <p class="text-muted">Lead Engineer</p>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="speaker-card">
                                        <img src="https://i.pravatar.cc/80?img=5" alt="Alexey Vertel">
                                        <h5>Alexey Vertel</h5>
                                        <p class="text-muted">Lead Engineer</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="right-column">
                        <h2>Register now</h2>
                        <p>Don't miss this chance to learn and get your questions answered</p>
                        <form action="register.php" method="POST">
                            <div class="row mb-3">
                                <div class="col">
                                    <input type="text" class="form-control" name="first_name" placeholder="First name" required>
                                </div>
                                <div class="col">
                                    <input type="text" class="form-control" name="last_name" placeholder="Last name" required>
                                </div>
                            </div>
                            <div class="mb-3">
                                <input type="email" class="form-control" name="email" placeholder="email@website.com" required>
                            </div>
                            <div class="mb-3">
                                <input type="text" class="form-control" name="company" placeholder="Company">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">How did you hear about this webinar?</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="how_did_you_hear" id="social" value="Social Media">
                                    <label class="form-check-label" for="social">Social Media</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="how_did_you_hear" id="word" value="Word of mouth">
                                    <label class="form-check-label" for="word">Word of mouth</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="how_did_you_hear" id="ad" value="Advertisement">
                                    <label class="form-check-label" for="ad">Advertisement</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="how_did_you_hear" id="other" value="Other">
                                    <label class="form-check-label" for="other">Other</label>
                                </div>
                            </div>
                            <button type="submit" class="btn-register">Register</button>
                        </form>
                        <div class="what-you-learn">
                            <h4>SCHEDULE</h4>
                            <ul>
                                <li>Intro ~10 min</li>
                                <li>Creating Apps ~40-50 min</li>
                                <li>Q&A</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>