Add blurb and learn more button.

app.py

@@ -332,6 +332,27 @@ with blocks:
             gr.HTML(
                 '<header class="text-center mb-12"><h1 class="text-4xl md:text-5xl font-bold text-gray-900 f1-h1">FormulaOne</h1></header>'
             )
+            with gr.Row(elem_id="landing-hero-row"):
+                gr.Markdown(
+                    """
+            <div class="f1-container">
+            <p class="f1-hero">
+                A benchmark of <strong>220</strong> novel, expert-level algorithmic problems over graphs that demand deep dynamic
+                programming and logical reasoning. <strong>Warmup</strong> and <strong>Tier&nbsp;1</strong> span moderate through
+                challenging problems, while <strong>Tier&nbsp;2</strong> is research-level.
+            </p>
+            </div>
+            """,
+                    elem_classes="markdown-text",
+                )
+                learn_more_btn = gr.Button("Learn More", elem_id="learn-more-pill", variant="secondary")
+
+            # Switch to the "What is FormulaOne" tab when the pill is clicked
+            learn_more_btn.click(
+                lambda: gr.Tabs.update(selected="what-is"),
+                inputs=None,
+                outputs=tabs,
+            )
 
             # Pill-style selector aligned to the top-right
             with gr.Row(elem_id="f1-tier-select-row"):

src/display/css_html_js.py

@@ -72,6 +72,31 @@ custom_css = """
 }
 #learn-more-btn button:hover { text-decoration: underline !important; background: transparent !important; }
 
+/* Hero row: keep within 800px, space content, center vertically */
+#landing-hero-row {
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 8px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Compact blurb text */
+.f1-hero { margin: 0; font-size: 1.02rem; color: var(--f1-text); }
+
+/* Learn More pill (right) */
+#learn-more-pill, #learn-more-pill button {
+  background: #2563eb !important;
+  color: #ffffff !important;
+  border: 0 !important;
+  border-radius: 999px !important;
+  padding: 8px 14px !important;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
+  font-weight: 700 !important;
+}
+#learn-more-pill button:hover { filter: brightness(0.95) !important; }
+
 /* Text */
 .f1-p, .f1-li { line-height: 1.75; color: #374151; text-wrap: pretty; overflow-wrap: break-word; hyphens: auto; }