Update Home.py

Home.py

@@ -6,6 +6,7 @@ import requests
 st.markdown("""
     <style>
     @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: linear-gradient(135deg, #1e1e2f, #2a2a3b);
@@ -18,24 +19,15 @@ st.markdown("""
         text-shadow: 0px 0px 10px rgba(0, 255, 255, 0.8);
     }
 
-    h1 {
+    .custom-subheader {
         color: #00FFFF;
-        font-size: 36px;
-        font-weight: 700;
-    }
-
-    h2 {
-        color: #FFD700;
-        font-size: 28px;
+        font-family: 'Roboto', sans-serif;
         font-weight: 600;
+        font-size: 28px;
+        margin-bottom: 15px;
+        text-align: center;
     }
 
-    h3 {
-        color: #FF6347;
-        font-size: 24px;
-        font-weight: 500;
-    }
-    
     .section {
         background: rgba(255, 255, 255, 0.1);
         padding: 20px;
@@ -57,7 +49,7 @@ st.markdown("""
         display: inline-block;
         text-align: center;
         font-size: 16px;
-        margin: 10px 5px;  /* Added spacing between buttons */
+        margin: 10px 5px;
     }
 
     .glow-button:hover {
@@ -66,15 +58,15 @@ st.markdown("""
     }
 
     .button-container {
-        text-align: center;  /* Centering buttons */
-        margin-top: 15px;  /* Space before buttons */
-        margin-bottom: 20px; /* Space after buttons */
+        text-align: center;
+        margin-top: 15px;
+        margin-bottom: 20px;
     }
     </style>
 """, unsafe_allow_html=True)
 
-# Title with Glow Effect
-st.markdown("<h1>🏏 Crick-o-Meter: Unleashing Data-Driven Cricket Insights! 📊🔥</h1>", unsafe_allow_html=True)
+# 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
@@ -89,13 +81,13 @@ st_lottie(lottie_animation, height=200, key="cricket")
 
 # About the App
 st.markdown('<div class="section">', unsafe_allow_html=True)
-st.header("🎯 About the App")  # Used st.header() for better styling
+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)
 
 # Key Features
 st.markdown('<div class="section">', unsafe_allow_html=True)
-st.header("🚀 Key Features")  # Used st.header() to apply styling
+st.markdown("<h2 class='custom-subheader'>🚀 Key Features</h2>", unsafe_allow_html=True)
 st.markdown("""
 - 📊 **Player Performance Analysis**
 - 📈 **Predictive Insights for Matches**
@@ -106,13 +98,13 @@ st.markdown('</div>', unsafe_allow_html=True)
 
 # About the Creator
 st.markdown('<div class="section">', unsafe_allow_html=True)
-st.header("👨‍💻 About the Creator")  # Used st.header() for better presentation
+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 Section
 st.markdown('<div class="section">', unsafe_allow_html=True)
-st.header("📞 Contact Me")  # Used st.header() instead of markdown
+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)