Polish landing page hero

README.md

@@ -1,6 +1,6 @@
 ---
-title: Token Playground
-emoji: 🎮
+title: 06 Token Playground
+emoji: 🚀
 colorFrom: blue
 colorTo: indigo
 sdk: gradio

app.py

@@ -2,7 +2,7 @@
 import gradio as gr
 import sys, os
 sys.path.append(os.path.join(os.path.dirname(__file__), '..'))
-from shared.components import create_header, create_footer
+from shared.components import create_premium_hero, create_footer
 from shared.utils import estimate_tokens, calculate_cost
 
 TOKENIZERS = {
@@ -47,8 +47,13 @@ custom_css = """
 """
 
 with gr.Blocks(css=custom_css, title="Token Playground", theme=gr.themes.Soft()) as app:
-    create_header("Token Playground", "Compare tokenizers • Calculate costs", "🎮")
-    gr.Markdown("Paste a prompt, paragraph, or product description and compare rough token usage across model families.")
+    create_premium_hero(
+        "Token Playground",
+        "See token counts before you ship. Compare rough usage and cost across popular model families in one fast, elegant panel.",
+        "🎮",
+        badge="Model Economics",
+        highlights=["Token estimates", "Cost comparison", "Fast text analysis"],
+    )
     with gr.Row():
         with gr.Column(scale=1):
             text_input = gr.Textbox(

shared/components.py

@@ -55,6 +55,86 @@ class SharedComponents:
 ">
   <strong style="color:#e2e8f0;">HF-Master v{version}</strong> | Built with ❤️ for the AI community
 </div>
+""")
+
+    @staticmethod
+    def create_premium_hero(
+        title: str,
+        description: str,
+        emoji: str = "🚀",
+        badge: str = "Featured Space",
+        highlights: Optional[List[str]] = None,
+    ) -> gr.HTML:
+        """Create a richer landing-page hero for Spaces."""
+        highlights = highlights or []
+        chips = "".join(
+            f"""
+            <span style="
+                display:inline-flex;
+                align-items:center;
+                gap:0.4rem;
+                padding:0.45rem 0.8rem;
+                border-radius:999px;
+                background: rgba(255,255,255,0.08);
+                border: 1px solid rgba(255,255,255,0.10);
+                color:#e2e8f0;
+                font-size:0.88rem;
+                font-weight:600;
+            ">{item}</span>
+            """
+            for item in highlights
+        )
+
+        return gr.HTML(f"""
+<div style="
+    background:
+        linear-gradient(135deg, rgba(78,205,196,0.18), rgba(255,107,107,0.14)),
+        rgba(15, 23, 42, 0.88);
+    border: 1px solid rgba(255,255,255,0.12);
+    border-radius: 28px;
+    padding: 2rem;
+    margin-bottom: 1.25rem;
+    box-shadow: 0 22px 50px rgba(0,0,0,0.22);
+    backdrop-filter: blur(16px);
+">
+  <div style="display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap; justify-content:space-between;">
+    <div style="display:flex; gap:1rem; align-items:flex-start; flex:1; min-width: 260px;">
+      <div style="
+          width:4rem;
+          height:4rem;
+          display:flex;
+          align-items:center;
+          justify-content:center;
+          border-radius:1.25rem;
+          background: rgba(255,255,255,0.09);
+          border: 1px solid rgba(255,255,255,0.12);
+          font-size:1.8rem;
+          flex-shrink:0;
+      ">{emoji}</div>
+      <div>
+        <div style="
+            display:inline-flex;
+            align-items:center;
+            padding:0.35rem 0.75rem;
+            border-radius:999px;
+            background: rgba(255,255,255,0.08);
+            border: 1px solid rgba(255,255,255,0.10);
+            color:#cbd5e1;
+            font-size:0.8rem;
+            font-weight:700;
+            letter-spacing:0.08em;
+            text-transform:uppercase;
+            margin-bottom:0.8rem;
+        ">{badge}</div>
+        <h1 style="margin:0 0 0.35rem 0; font-size:clamp(2rem, 4vw, 3.35rem); line-height:1.05; letter-spacing:-0.04em; color:#f8fafc;">{title}</h1>
+        <p style="margin:0; color:#cbd5e1; font-size:1.05rem; line-height:1.65; max-width: 62ch;">{description}</p>
+      </div>
+    </div>
+  </div>
+  <div style="display:flex; gap:0.6rem; flex-wrap:wrap; margin-top:1.25rem;">
+    {chips}
+  </div>
+</div>
 """)
 
     @staticmethod
@@ -255,6 +335,16 @@ def create_footer(version: str = "1.0.0") -> gr.Markdown:
     return SharedComponents.create_footer(version)
 
 
+def create_premium_hero(
+    title: str,
+    description: str,
+    emoji: str = "🚀",
+    badge: str = "Featured Space",
+    highlights: Optional[List[str]] = None,
+) -> gr.HTML:
+    return SharedComponents.create_premium_hero(title, description, emoji, badge, highlights)
+
+
 class ProgressTracker:
     """Track multi-step progress"""