Update app.py

app.py

@@ -37,68 +37,58 @@ HEADER_HTML_OLD = """
 </div>
 """
 
-HEADER_HTML = """
-<div class="bsh-banner-img">
-    <img src="https://cdn-uploads.huggingface.co/production/uploads/60d2dc1007da9c17c72708f8/Ctx1Jh4nImulMYS2PRClZ.png"
-         alt="Build Small Hackathon — Small Models, Big Adventures" />
-</div>
-"""
-
-INFO_ROW_HTML = """
-<div class="bsh-info-row">
-    <div class="bsh-card">
-        <div class="bsh-title">❋ Two Tracks</div>
-        <div class="bsh-content">
-            <div class="bsh-track">
-                <span class="bsh-emoji">🏡</span>
-                <span class="bsh-track-name">Backyard AI</span>
+# Hero layout: banner on the left, stacked info cards on the right.
+HERO_HTML = """
+<div class="bsh-hero-grid">
+    <div class="bsh-banner-img">
+        <img src="https://cdn-uploads.huggingface.co/production/uploads/60d2dc1007da9c17c72708f8/Ctx1Jh4nImulMYS2PRClZ.png"
+             alt="Build Small Hackathon — Small Models, Big Adventures" />
+    </div>
+    <div class="bsh-hero-side">
+        <div class="bsh-hero-pair">
+            <div class="bsh-card">
+                <div class="bsh-title">❋ Two Tracks</div>
+                <div class="bsh-content">
+                    <div class="bsh-track">
+                        <span class="bsh-emoji">🏡</span>
+                        <span class="bsh-track-name">Backyard AI</span>
+                    </div>
+                    <div class="bsh-track-desc">Solve a real problem for someone you know</div>
+                    <div class="bsh-track">
+                        <span class="bsh-emoji">🍄</span>
+                        <span class="bsh-track-name">Thousand Token Wood</span>
+                    </div>
+                    <div class="bsh-track-desc">Build something delightful and whimsical</div>
+                </div>
             </div>
-            <div class="bsh-track-desc">Solve a real problem for someone you know</div>
-            <div class="bsh-track">
-                <span class="bsh-emoji">🍄</span>
-                <span class="bsh-track-name">Thousand Token Wood</span>
+            <div class="bsh-card">
+                <div class="bsh-title">✦ Three Rules</div>
+                <ol class="bsh-rules">
+                    <li>Models ≤ 32B parameters</li>
+                    <li>Built on Gradio + Spaces</li>
+                    <li>Demo video + social post</li>
+                </ol>
             </div>
-            <div class="bsh-track-desc">Build something delightful and whimsical</div>
-        </div>
-    </div>
-    <div class="bsh-card">
-        <div class="bsh-title">✦ Three Rules</div>
-        <ol class="bsh-rules">
-            <li>Models ≤ 32B parameters</li>
-            <li>Built on Gradio + Spaces</li>
-            <li>Demo video + social post</li>
-        </ol>
-    </div>
-    <div class="bsh-card">
-        <div class="bsh-title">🎁 Prizes &amp; Credits</div>
-        <div class="bsh-content">
-            <div class="bsh-soon"><em>Sponsor lineup, prize pool, and free API/compute credits announcing soon — sit tight, friend.</em></div>
-            <div class="bsh-link">→ <a href="https://huggingface.co/build-small-hackathon" target="_blank">Read the chapter book</a></div>
         </div>
-    </div>
-</div>
-"""
-
-DATES_ROW_HTML = """
-<div class="bsh-dates-row">
-    <div class="bsh-dates">
-        <div class="bsh-title">✦ Trail Map · Key Dates</div>
-        <div class="bsh-dates-grid">
-            <div>📅 <b>Reg closes:</b> Wed, June 3 · 23:59 UTC</div>
-            <div>🎟️ <b>Credits:</b> Thu, June 4</div>
-            <div>🚀 <b>Hack opens:</b> Fri, June 5 · 00:01 UTC</div>
-            <div>🏁 <b>Submit by:</b> Mon, June 15 · 23:59 UTC</div>
+        <div class="bsh-dates">
+            <div class="bsh-title">✦ Trail Map · Key Dates</div>
+            <div class="bsh-dates-grid">
+                <div>📅 <b>Reg closes:</b> Wed, June 3 · 23:59 UTC</div>
+                <div>🎟️ <b>Credits:</b> Thu, June 4</div>
+                <div>🚀 <b>Hack opens:</b> Fri, June 5 · 00:01 UTC</div>
+                <div>🏁 <b>Submit by:</b> Mon, June 15 · 23:59 UTC</div>
+            </div>
+            <div class="bsh-warn">⛔ No registrations accepted once the event starts. Lock it in before June 3!</div>
         </div>
-        <div class="bsh-warn">⛔ No registrations accepted once the event starts. Lock it in before June 3!</div>
-    </div>
-    <div class="bsh-counter">
-        <div class="bsh-counter-title">⏳ Registration closes in</div>
-        <div class="bsh-counter-target">June 3, 2026 · 23:59 UTC</div>
-        <div class="bsh-nums">
-            <div class="bsh-unit"><span class="bsh-num" id="bsh-days">--</span><span class="bsh-lbl">Days</span></div>
-            <div class="bsh-unit"><span class="bsh-num" id="bsh-hours">--</span><span class="bsh-lbl">Hrs</span></div>
-            <div class="bsh-unit"><span class="bsh-num" id="bsh-mins">--</span><span class="bsh-lbl">Min</span></div>
-            <div class="bsh-unit"><span class="bsh-num" id="bsh-secs">--</span><span class="bsh-lbl">Sec</span></div>
+        <div class="bsh-counter">
+            <div class="bsh-counter-title">⏳ Registration closes in</div>
+            <div class="bsh-counter-target">June 3, 2026 · 23:59 UTC</div>
+            <div class="bsh-nums">
+                <div class="bsh-unit"><span class="bsh-num" id="bsh-days">--</span><span class="bsh-lbl">Days</span></div>
+                <div class="bsh-unit"><span class="bsh-num" id="bsh-hours">--</span><span class="bsh-lbl">Hrs</span></div>
+                <div class="bsh-unit"><span class="bsh-num" id="bsh-mins">--</span><span class="bsh-lbl">Min</span></div>
+                <div class="bsh-unit"><span class="bsh-num" id="bsh-secs">--</span><span class="bsh-lbl">Sec</span></div>
+            </div>
         </div>
     </div>
 </div>
@@ -298,27 +288,22 @@ def verify_registration(email, hf_username):
 
         result = f"""
 ## ✅ Registration Confirmed!
-
 **Participant Details:**
 - **Full Name:** {registration['full_name']}
 - **Email:** {registration['email']}
 - **Hugging Face Username:** {registration['hf_username']}
 - **Registered On:** {reg_date}
-
 **Hackathon Participation:**
 - **Track Interest:** {registration['track_interest']}
 - **Hackathon Experience:** {prev}
 - **Experience Level:** {registration['experience_level']}
 - **Gradio Usage:** {registration['gradio_usage']}
 - **How You Heard:** {registration['how_heard']}
-
 **Build Small Plans:**
 - **Small Model You Plan to Use:** {planned_model_str}
 - **Bonus Quests of Interest:** {quests_str}
-
 **Project Idea:**
 {registration['project_description'] if registration['project_description'] else '_No project description provided_'}
-
 ---
 **Next Steps:**
 - 🎟️ API & compute credits will be assigned on **Thu, May 28, 2026**
@@ -393,13 +378,10 @@ def submit_registration(full_name, email, hf_username, gradio_usage,
         return f"❌ Registration failed: {message}"
 
     return f"""✅ Registration Successful!
-
 Thank you, **{full_name}**! Your spot is locked in.
-
 🎟️ Credits assigned **Thu, May 28** · 🚀 Hack opens **Fri, May 29** · 🏁 Submissions due **Mon, Jun 8**.<br>
 💬 Join the Gradio Discord channel `{DISCORD_CHANNEL}`: {DISCORD_INVITE}<br>
 📧 Watch your email for credits and updates.
-
 **See you in the woods! 🍄🪵**"""
 
 
@@ -469,9 +451,23 @@ body.dark .gradio-container,
     --bsh-link: #9bc466;
 }
 
-/* Banner */
+/* ---------- Hero grid: banner left, info cards right ----------
+   Right column is a 3-row flex stack:
+     Row 1: Two Tracks + Three Rules (side-by-side 2-col subgrid)
+     Row 2: Trail Map · Key Dates (full width)
+     Row 3: Registration countdown (full width)
+   align-items: stretch makes the right column take the banner's natural
+   height; flex: 1 on each row distributes that height evenly. */
+.bsh-hero-grid {
+    display: grid;
+    grid-template-columns: 1.55fr 1fr;
+    gap: 12px;
+    margin-bottom: 14px;
+    align-items: stretch;
+}
+
 .bsh-banner-img {
-    margin: 0 0 12px 0;
+    margin: 0;
     border-radius: 14px;
     overflow: hidden;
     border: 1px solid var(--bsh-card-border);
@@ -484,13 +480,108 @@ body.dark .gradio-container,
     height: auto;
 }
 
-/* Three-card info row */
-.bsh-info-row {
+.bsh-hero-side {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;  /* lets the column shrink properly inside the grid */
+    height: 100%;  /* fill the grid cell so the rows have room to stretch */
+}
+
+/* Each row claims an equal share of the available column height. */
+.bsh-hero-side > * {
+    flex: 1 1 0;
+    min-height: 0;
+}
+
+/* Row 1: pair of short cards (Two Tracks | Three Rules) side-by-side. */
+.bsh-hero-pair {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 10px;
-    margin-bottom: 12px;
+    grid-template-columns: 1fr 1fr;
+    gap: 6px;
+}
+.bsh-hero-pair > .bsh-card {
+    /* Grid stretches the cards to fill the row height by default. */
+    min-width: 0;
+}
+
+/* Safety net: clip anything that would visually leak past the card edge.
+   With 3 rows the content now fits comfortably, but this guards against
+   future copy edits making a card taller than its slot. */
+.bsh-hero-side .bsh-card,
+.bsh-hero-side .bsh-dates,
+.bsh-hero-side .bsh-counter {
+    overflow: hidden;
+}
+
+/* Compact card/text sizing for the right column. With 3 rows instead of
+   4 each row gets ~35% more height, so we can be less aggressive than
+   the previous pass. */
+.bsh-hero-side .bsh-card,
+.bsh-hero-side .bsh-dates {
+    padding: 8px 11px;
 }
+.bsh-hero-side .bsh-counter {
+    padding: 7px 11px;
+}
+.bsh-hero-side .bsh-title {
+    margin-bottom: 4px;
+    font-size: 10px;
+    letter-spacing: 1.2px;
+}
+.bsh-hero-side .bsh-content,
+.bsh-hero-side .bsh-rules li {
+    font-size: 11.5px;
+    line-height: 1.4;
+}
+.bsh-hero-side .bsh-track {
+    margin-top: 2px;
+    gap: 6px;
+}
+.bsh-hero-side .bsh-emoji {
+    font-size: 13px;
+}
+.bsh-hero-side .bsh-track-name {
+    font-size: 12px;
+}
+.bsh-hero-side .bsh-track-desc {
+    font-size: 10.5px;
+    padding-left: 19px;
+    margin-bottom: 1px;
+    line-height: 1.3;
+}
+.bsh-hero-side .bsh-rules {
+    padding-left: 15px !important;
+}
+.bsh-hero-side .bsh-rules li {
+    line-height: 1.45;
+}
+.bsh-hero-side .bsh-dates-grid {
+    font-size: 11px;
+    gap: 3px 10px;
+}
+.bsh-hero-side .bsh-warn {
+    margin-top: 4px;
+    padding: 3px 7px;
+    font-size: 10px;
+}
+.bsh-hero-side .bsh-counter-title {
+    font-size: 10px;
+    margin-bottom: 1px;
+}
+.bsh-hero-side .bsh-counter-target {
+    font-size: 9px;
+    margin-bottom: 3px;
+}
+.bsh-hero-side .bsh-num {
+    font-size: 19px;
+}
+.bsh-hero-side .bsh-lbl {
+    font-size: 8px;
+    margin-top: 1px;
+}
+
+/* ---------- Card base styles (shared by old + new layouts) ---------- */
 .bsh-card {
     background: var(--bsh-card-bg);
     border: 1px solid var(--bsh-card-border);
@@ -541,29 +632,8 @@ body.dark .gradio-container,
     line-height: 1.7;
     color: var(--bsh-text);
 }
-.bsh-soon {
-    font-size: 13px;
-    line-height: 1.55;
-    color: var(--bsh-text);
-    opacity: 0.92;
-}
-.bsh-link {
-    margin-top: 6px;
-    font-size: 12px;
-}
-.bsh-link a {
-    color: var(--bsh-link);
-    font-weight: 600;
-    text-decoration: underline;
-}
 
-/* Dates + countdown row */
-.bsh-dates-row {
-    display: grid;
-    grid-template-columns: 1.6fr 1fr;
-    gap: 10px;
-    margin-bottom: 14px;
-}
+/* ---------- Dates card ---------- */
 .bsh-dates {
     background: var(--bsh-card-bg);
     border: 1px solid var(--bsh-card-border);
@@ -590,6 +660,8 @@ body.dark .gradio-container,
     font-weight: 600;
     text-align: center;
 }
+
+/* ---------- Countdown card ---------- */
 .bsh-counter {
     background: var(--bsh-counter-bg);
     border: 1px solid var(--bsh-card-border);
@@ -641,7 +713,7 @@ body.dark .gradio-container,
     text-transform: uppercase;
 }
 
-/* Discord ribbon */
+/* ---------- Discord ribbon ---------- */
 .bsh-discord {
     margin-top: 14px;
     background: var(--bsh-discord-bg);
@@ -666,7 +738,7 @@ body.dark .gradio-container,
     color: var(--bsh-text);
 }
 
-/* Buttons */
+/* ---------- Buttons ---------- */
 #submit-btn {
     background: linear-gradient(135deg, #4a7c2e 0%, #2d5016 100%) !important;
     border: 1px solid #6b4423 !important;
@@ -698,10 +770,9 @@ body.dark .gradio-container,
     background: #7d5430 !important;
 }
 
-/* Responsive */
+/* ---------- Responsive: collapse the hero grid on narrow screens ---------- */
 @media (max-width: 760px) {
-    .bsh-info-row { grid-template-columns: 1fr; }
-    .bsh-dates-row { grid-template-columns: 1fr; }
+    .bsh-hero-grid { grid-template-columns: 1fr; }
 }
 """
 
@@ -712,9 +783,7 @@ with gr.Blocks(
     theme=gr.themes.Soft(primary_hue="green", secondary_hue="amber", neutral_hue="stone"),
 ) as demo:
 
-    gr.HTML(HEADER_HTML)
-    gr.HTML(INFO_ROW_HTML)
-    gr.HTML(DATES_ROW_HTML)
+    gr.HTML(HERO_HTML)
 
     with gr.Tabs():
         with gr.Tab("📝 Register"):
@@ -912,7 +981,6 @@ with gr.Blocks(
                     - Use the **exact** email and username you registered with
                     - Both fields are case-insensitive but must match
                     - Registration is open until **Wed, May 27, 2026 · 23:59 UTC** — once it closes, no new entries can be added
-
                     **Support:**
                     - Discord: [{DISCORD_INVITE}]({DISCORD_INVITE}) (channel `{DISCORD_CHANNEL}`)
                     - Email: gradio-team@huggingface.co
@@ -937,4 +1005,4 @@ with gr.Blocks(
 
 
 if __name__ == "__main__":
-    demo.launch(allowed_paths=["."])
+    demo.launch(allowed_paths=["."])