Update app.py

app.py

@@ -341,11 +341,6 @@ with gr.Blocks(css=css_tech_theme) as demo:
             Test and optimize mobile-compatible Large Language Models (LLMs) with cutting-edge benchmarks 
             across 80 fields and over 16,000 questions.
         </p>
-        <div class="header-buttons" style="color:#ffffff;>
-            <a href="#overview">Learn More</a>
-            <a href="#submission">Submit Predictions</a>
-            <a href="#leaderboard">View Leaderboard</a>
-        </div>
     </header>
     """)
 #     # Pre-Tabs Section
@@ -359,32 +354,33 @@ with gr.Blocks(css=css_tech_theme) as demo:
     </section>
     """)
     
-    
-
-
+ # Tabs Section
     with gr.Tabs(elem_id="tabs"):
+        # Overview Tab
         with gr.TabItem("📖 Overview"):
             gr.Markdown("""
-            **Welcome to the Mobile-MMLU Benchmark Competition! Evaluate mobile-compatible Large Language Models (LLMs) on 16,186 scenario-based and factual questions across 80 fields**.
-            ---
-            ## What is Mobile-MMLU?
-            Mobile-MMLU is a benchmark designed to test the capabilities of LLMs optimized for mobile use. Contribute to advancing mobile AI systems by competing to achieve the highest accuracy.
-            ---
-            ## How It Works
-            1. **Download the Dataset**
-               Access the dataset and instructions on our [GitHub page](https://github.com/your-github-repo).
-            2. **Generate Predictions**
-               Use your LLM to answer the dataset questions. Format your predictions as a CSV file.
-            3. **Submit Predictions**
-               Upload your predictions on this platform.
-            4. **Evaluation**
-               Submissions are scored on accuracy.
-            5. **Leaderboard**
-               View real-time rankings on the leaderboard.
-            ---
-            """)
+            <div class="tabs">
+                <h2>About the Competition</h2>
+                <p>
+                    The **Mobile-MMLU Benchmark Competition** is an exciting challenge for mobile-optimized 
+                    LLMs. Compete to achieve the highest accuracy and contribute to advancements in mobile AI.
+                </p>
+                <h3>How It Works</h3>
+                <ul>
+                    <li>1️⃣ <strong>Download the Dataset:</strong> Access the dataset and instructions on our 
+                    <a href="https://github.com/your-github-repo" target="_blank">GitHub page</a>.</li>
+                    <li>2️⃣ <strong>Generate Predictions:</strong> Use your LLM to answer the dataset questions. 
+                    Format your predictions as a CSV file.</li>
+                    <li>3️⃣ <strong>Submit Predictions:</strong> Upload your predictions on this platform.</li>
+                    <li>4️⃣ <strong>Evaluation:</strong> Submissions are scored based on accuracy.</li>
+                    <li>5️⃣ <strong>Leaderboard:</strong> View real-time rankings on the leaderboard.</li>
+                </ul>
+            </div>
+            """)    
+
 
         with gr.TabItem("📤 Submission"):
+            gr.Markdown("<div class='tabs'><h2>Submit Your Predictions</h2></div>")
             with gr.Row():
                 file_input = gr.File(label="Upload Prediction CSV", file_types=[".csv"], interactive=True)
                 model_name_input = gr.Textbox(label="Model Name", placeholder="Enter your model name")
@@ -424,7 +420,32 @@ with gr.Blocks(css=css_tech_theme) as demo:
                 outputs=[leaderboard_table],
             )
 
-    gr.Markdown(f"Last updated on **{LAST_UPDATED}**")
+     # Post-Tabs Section
+    gr.Markdown("""
+    <section class="post-tabs">
+        <h2>Ready to Compete?</h2>
+        <p>
+            Submit your predictions today and make your mark in advancing mobile AI technologies. 
+            Show the world what your model can achieve!
+        </p>
+        <a href="#submission">Start Submitting</a>
+    </section>
+    """)
+
+    # Footer Section
+    gr.Markdown("""
+    <footer>
+        <h2>Stay Connected</h2>
+        <p>
+            Follow us on social media or contact us for any queries. Let's shape the future of AI together!
+        </p>
+        <div class="social-links">
+            <a href="https://twitter.com" target="_blank">Twitter</a>
+            <a href="https://linkedin.com" target="_blank">LinkedIn</a>
+            <a href="https://github.com" target="_blank">GitHub</a>
+        </div>
+    </footer>
+    """)
 
 demo.launch()
 
@@ -720,8 +741,7 @@ demo.launch()
 #             Follow us on social media or contact us for any queries. Let's shape the future of AI together!
 #         </p>
 #         <div class="social-links">
-#             <a href="https://twitter.com" target="_blank">Twitter</a>
-#             <a href="https://linkedin.com" target="_blank">LinkedIn</a>
+#             <a href="https://website.com" target="_blank">Website</a>
 #             <a href="https://github.com" target="_blank">GitHub</a>
 #         </div>
 #     </footer>