Update Home.py

Home.py

@@ -1,87 +1,118 @@
+You said:
 import streamlit as st
+from streamlit_lottie import st_lottie
+import requests
 
-# 🎨 Custom CSS
+# Custom CSS for Enhanced Styling
 st.markdown("""
     <style>
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&display=swap');
     body {
-        background: #111827;
-        color: white;
+        background: linear-gradient(135deg, #1e1e2f, #2a2a3b);
         font-family: 'Poppins', sans-serif;
+        color: white;
     }
-    h1, h2 {
+    
+    /* Header Styling */
+    h1, h2, h3 {
         text-align: center;
+        color: #00FFFF;  /* Bright Cyan */
+        text-shadow: 0px 0px 12px rgba(0, 255, 255, 1), 
+                     0px 0px 20px rgba(0, 128, 255, 0.8);
+    }
+    .custom-subheader {
         color: #00FFFF;
-        text-shadow: 0 0 8px rgba(0,255,255,0.6);
+        font-family: 'Roboto', sans-serif;
+        font-weight: 600;
+        font-size: 28px;
+        margin-bottom: 15px;
+        text-align: center;
     }
+    /* Section Background */
     .section {
-        background: rgba(255, 255, 255, 0.05);
+        background: rgba(255, 255, 255, 0.1);
         padding: 20px;
-        border-radius: 12px;
-        margin-bottom: 25px;
-        box-shadow: 0 4px 10px rgba(0,255,255,0.15);
-    }
-    .button-container {
-        text-align: center;
-        margin-top: 20px;
+        border-radius: 15px;
+        margin-bottom: 30px;
+        box-shadow: 0px 4px 12px rgba(0, 255, 255, 0.2);
     }
+    /* Glowing Button */
     .glow-button {
-        background: linear-gradient(90deg, #00FFFF, #00BFFF);
+        background: linear-gradient(90deg, #00FFFF, #00CCFF);
         border: none;
-        padding: 10px 24px;
+        padding: 12px 25px;
         color: black;
         font-weight: bold;
-        border-radius: 20px;
-        margin: 6px;
-        font-size: 14px;
-        box-shadow: 0px 0px 8px rgba(0,255,255,0.5);
+        border-radius: 25px;
+        box-shadow: 0px 0px 10px rgba(0, 255, 255, 0.8);
+        transition: 0.3s;
         text-decoration: none;
         display: inline-block;
+        text-align: center;
+        font-size: 16px;
+        margin: 10px 5px;
     }
     .glow-button:hover {
-        transform: scale(1.05);
-        box-shadow: 0px 0px 15px rgba(0,255,255,1);
+        transform: scale(1.1);
+        box-shadow: 0px 0px 20px rgba(0, 255, 255, 1);
+    }
+    .button-container {
+        text-align: center;
+        margin-top: 15px;
+        margin-bottom: 20px;
     }
     </style>
 """, unsafe_allow_html=True)
 
-# 🚀 Header
-st.markdown("<h1>🔬 Neural Network Playground</h1>", unsafe_allow_html=True)
 
-# 🔍 About Section
+# Title
+st.markdown("<h1 class='custom-subheader'>🏏 Crick-o-Meter: Unleashing Data-Driven Cricket Insights! 📊🔥</h1>", unsafe_allow_html=True)
+
+# Lottie Animation
+@st.cache_data
+def load_lottie_url(url: str):
+    response = requests.get(url)
+    if response.status_code != 200:
+        return None
+    return response.json()
+
+lottie_animation = load_lottie_url("https://lottie.host/6e182649-61a6-4683-8680-5493855ac08a/G0pStmcS8T.json")
+st_lottie(lottie_animation, height=200, key="cricket")
+
+# About the App
 st.markdown('<div class="section">', unsafe_allow_html=True)
-st.markdown("## 🤖 What is this App?")
-st.write("This interactive app lets you explore neural networks in 2D using synthetic datasets. Visualize decision boundaries, test different architectures, and train models right in your browser using Keras and TensorFlow!")
+st.markdown("<h2 class='custom-subheader'>🎯 About the App</h2>", unsafe_allow_html=True)
+st.write("Crick-o-Meter is your ultimate companion for cricket statistics and analytics. Whether you're a fantasy cricket player, a data nerd, or just an ardent fan, our app gives you real-time stats, player comparisons, and predictive insights!")
 st.markdown('</div>', unsafe_allow_html=True)
 
-# 🛠 Features
+# Key Features
 st.markdown('<div class="section">', unsafe_allow_html=True)
-st.markdown("## 🧠 Key Features")
+st.markdown("<h2 class='custom-subheader'>🚀 Key Features</h2>", unsafe_allow_html=True)
 st.markdown("""
-- 🌀 Multiple synthetic datasets (`moons`, `circles`, `blobs`, etc.)
-- 🧱 Choose number of hidden layers (including zero!)
-- ⚙️ Adjustable neurons per layer & activation functions
-- 🧮 Live decision boundary visualization
-- 📉 Training loss and validation curves
+- 📊 **Player Performance Analysis**
+- 📈 **Predictive Insights for Matches**
+- 🧠 **AI-driven Cricket Forecasting**
+- 📌 **Team Comparisons & Head-to-Head Stats**
 """)
 st.markdown('</div>', unsafe_allow_html=True)
 
-# 👤 Creator Section
+# About the Creator
 st.markdown('<div class="section">', unsafe_allow_html=True)
-st.markdown("## 👨‍💻 About the Creator")
-st.write("Built by a passionate developer blending Machine Learning with interactive visualization tools to make learning intuitive and engaging.")
+st.markdown("<h2 class='custom-subheader'>👨‍💻 About the Creator</h2>", unsafe_allow_html=True)
+st.write("Hi! I'm a passionate developer blending machine learning with cricket analytics. My goal is to make cricket statistics accessible and insightful for fans worldwide.")
 st.markdown('</div>', unsafe_allow_html=True)
 
-# 📬 Contact / Footer
+# Contact Section
 st.markdown('<div class="section">', unsafe_allow_html=True)
-st.markdown("## 📬 Contact Me")
+st.markdown("<h2 class='custom-subheader'>📞 Contact Me</h2>", unsafe_allow_html=True)
+
+# Button Section (Now Centered with Space)
 st.markdown('<div class="button-container">', unsafe_allow_html=True)
 st.markdown("""
-[<a class="glow-button" href="https://www.linkedin.com/in/dommeti-thoran-raj-692769191/" target="_blank">LinkedIn</a>]  
-[<a class="glow-button" href="https://github.com/raj2216" target="_blank">GitHub</a>]  
-[<a class="glow-button" href="mailto:rajbunny2216@gmail.com">Email</a>]  
+[<button class="glow-button">LinkedIn</button>](https://www.linkedin.com/in/dommeti-thoran-raj-692769191/)  
+[<button class="glow-button">GitHub</button>](https://github.com/raj2216)  
+[<button class="glow-button">Email</button>](mailto:rajbunny2216@gmail.com)  
 """, unsafe_allow_html=True)
-st.markdown('</div>', unsafe_allow_html=True)
-st.markdown('</div>', unsafe_allow_html=True)
-
+st.markdown('</div>', unsafe_allow_html=True