Update Home.py

Home.py

@@ -1,14 +1,17 @@
 import streamlit as st
 from streamlit_extras.switch_page_button import switch_page
 
-# Custom styles
+# Background Image Styling
 st.markdown(
-    """
+    f"""
     <style>
-        .stApp {
-            background-color: #f0f8ff;
-        }
-        .header {
+        .stApp {{
+            background-image: url("background.jpg");
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+        }}
+        .header {{
             text-align: center;
             color: red;
             font-size: 30px;
@@ -17,30 +20,47 @@ st.markdown(
             justify-content: center;
             align-items: center;
             position: relative;
-        }
-        .logo {
+            padding-top: 20px;
+        }}
+        .logo {{
             position: absolute;
-            right: 10px;
-            top: 0;
+            right: 20px;
+            top: 10px;
             width: 80px;
             height: auto;
-        }
-        .sub-header {
+        }}
+        .sub-header {{
             color: darkorange;
-            font-size: 24px;
+            font-size: 26px;
             font-weight: bold;
-        }
-        .text {
-            font-size: 16px;
+            margin-top: 30px;
+        }}
+        .text {{
+            font-size: 17px;
             color: black;
             font-style: italic;
-        }
+            background-color: rgba(255, 255, 255, 0.75);
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+        }}
+        .button-container {{
+            text-align: center;
+            margin-top: 20px;
+        }}
+        .footer {{
+            font-size: 14px;
+            color: #333;
+            margin-top: 50px;
+            text-align: center;
+            font-style: italic;
+        }}
     </style>
     """,
     unsafe_allow_html=True,
 )
 
-# App Header with Logo on the Right Corner
+# Header with Logo
 st.markdown(
     """
     <div class='header'>
@@ -51,36 +71,51 @@ st.markdown(
     unsafe_allow_html=True
 )
 
-# Cricket Information
+# Intro to Cricket
 st.markdown("<h2 class='sub-header'>Cricket - The Gentleman’s Game 🏆</h2>", unsafe_allow_html=True)
 st.markdown(
-    "<p class='text'>"
-    "Cricket is one of the most popular sports worldwide, loved by millions. It is played in multiple formats, including Test matches, One Day Internationals (ODIs), and T20s. "
-    "With legendary players, thrilling rivalries, and unforgettable moments, cricket has become more than just a game—it's an emotion for fans around the globe. 🏏🔥"
-    "</p>",
-    unsafe_allow_html=True
+    """
+    <div class='text'>
+    Cricket is not just a sport—it's a passion that unites nations. From the roar of the stadium to the precision of a last-ball thriller, cricket teaches discipline, strategy, and the spirit of sportsmanship.<br><br>
+    Whether it's Test cricket’s grind, ODI’s balance, or T20’s thrill—each format brings unique excitement. Players like Sachin Tendulkar, MS Dhoni, and Virat Kohli have inspired generations across the globe.
+    </div>
+    """, unsafe_allow_html=True
 )
 
-# About Cric Metrics
+# What is Cric Metrics?
 st.markdown("<h2 class='sub-header'>What is Cric Metrics? 📊</h2>", unsafe_allow_html=True)
 st.markdown(
-    "<p class='text'>"
-    "Cric Metrics is an advanced cricket analytics platform designed to provide in-depth insights, player comparisons, "
-    "score predictions, and team analysis using AI and machine learning. 📈🤖"
-    "</p>",
-    unsafe_allow_html=True
+    """
+    <div class='text'>
+    <b>Cric Metrics</b> is a smart analytics platform built using Python and Machine Learning. It helps cricket fans and analysts:
+    <ul>
+        <li>⚡ Compare players based on batting, bowling, and fielding metrics</li>
+        <li>📈 Predict match outcomes and player performances</li>
+        <li>📊 Visualize data using advanced graphs and charts</li>
+        <li>💡 Make informed decisions using AI-powered insights</li>
+    </ul>
+    Whether you're a fan, coach, or data nerd—Cric Metrics is your playground for cricket analytics.
+    </div>
+    """, unsafe_allow_html=True
 )
 
-# Player Information Button
-if st.button("📊 Player Information"):
-    st.switch_page("pages/1player_information.py")
+# Player Info Button
+st.markdown("<div class='button-container'>", unsafe_allow_html=True)
+if st.button("📊 Explore Player Information"):
+    switch_page("pages/1player_information.py")
+st.markdown("</div>", unsafe_allow_html=True)
 
-# Author Section
+# About Author
 st.markdown("<h2 class='sub-header'>About the Author 👨‍💻</h2>", unsafe_allow_html=True)
 st.markdown(
-    "<p class='text'>"
-    "<b>Sai Kalyan Satwik</b> is a seasoned cricket enthusiast and tech entrepreneur. "
-    "He specializes in data science, Python programming, and Exploratory Data Analysis (EDA). 🏏📊"
-    "</p>",
+    """
+    <div class='text'>
+    <b>Sai Kalyan Satwik</b> is a seasoned cricket enthusiast and tech entrepreneur with over 10 years of experience in data science and software development. <br><br>
+    His passion for cricket meets his technical expertise in this app, blending numbers with narratives for fans and analysts alike. 
+    </div>
+    """,
     unsafe_allow_html=True
 )
+
+# Footer
+st.markdown("<div class='footer'>Built with ❤️ using Streamlit | © 2025 Cric Metrics</div>", unsafe_allow_html=True)