Update pages/0_Problem-Statement_and_Aim.py

pages/0_Problem-Statement_and_Aim.py

@@ -2,39 +2,46 @@ import streamlit as st
 import pandas as pd 
 import numpy as np 
 
-st.markdown("<h1 style='text-align:center; color:white;'>Problem Statement and Aim for this Project</h1>",unsafe_allow_html=True)
+# Title with centered alignment
+st.markdown("<h1 style='text-align:center; color:white;'>Problem Statement and Aim for this Project</h1>", unsafe_allow_html=True)
 
+# Centered header for the Streamlit app
+st.markdown("<h2 style='text-align:center;'>Analyzing and classifying the consumer electronics sales.</h2>", unsafe_allow_html=True)
 
-# Title of the Streamlit app
-st.header("Analyzing and classifying the consumer electronics sales.")
-
-# Problem statement section
-st.subheader("Problem Statement :")
+# Problem statement section with center alignment
+st.markdown("<h3 style='text-align:center;'>Problem Statement and Aim:</h3>", unsafe_allow_html=True)
 
 # Text explaining the problem
-st.write("""
-    **Title:** Analyzing and predicting the electronics sales and consumer purchase intent Using Machine Learning
-    
-    **Problem Statement:** Given a dataset of consumer electronics sales, which includes customer demographics, product details, and satisfaction metrics, Whether we can develop a classification model that can accurately predict whether a customer intends to purchase a product or not ?
-
-    **Aim for this project:** The goal of this project is to build a robust end-to-end machine learning pipeline to classify customer purchase intent using the provided features. The steps will include data preprocessing, exploratory data analysis (EDA), feature engineering, model training, and evaluation. The final goal is to achieve the highest possible accuracy and generalization on unseen data.
+st.markdown(
+    """
+    <div style="text-align: center;">
+        <p><b>Title:</b> Analyzing and predicting the electronics sales and consumer purchase intent Using Machine Learning</p>
+        <p><b>Problem Statement:</b> Given a dataset of consumer electronics sales, which includes customer demographics, product details, and satisfaction metrics, can we develop a classification model that can accurately predict whether a customer intends to purchase a product or not?</p>
+        <p><b>Aim for this project:</b> The goal of this project is to build a robust end-to-end machine learning pipeline to classify customer purchase intent using the provided features. The steps will include data preprocessing, exploratory data analysis (EDA), feature engineering, model training, and evaluation. The final goal is to achieve the highest possible accuracy and generalization on unseen data.</p>
+        <p><b>Key Objectives:</b></p>
+        <ul style="list-style-position: inside; text-align: center;">
+            <li>Data Preprocessing, Feature Engineering</li>
+            <li>Exploratory Data Analysis</li>
+            <li>Model Creation & Evaluation</li>
+        </ul>
+    </div>
+    """, 
+    unsafe_allow_html=True
+)
 
-    **Key Objectives :**
-        - Data Preprocessing, Feature Engineering
-        - Exploratory Data Analysis
-        - Model Creation & Evaluation
-""")
+# Center-aligned image
 st.markdown(
     """
     <div style="text-align: center;">
-        <img src="https://cdn-uploads.huggingface.co/production/uploads/67441c51a784a9d15cb12871/o_hx-CUYhb2kbgFHZpd9l.jpeg)" width="70%" />
+        <img src="https://cdn-uploads.huggingface.co/production/uploads/67441c51a784a9d15cb12871/o_hx-CUYhb2kbgFHZpd9l.jpeg" width="70%" />
     </div>
     """, 
     unsafe_allow_html=True
 )
+
+# Background image with semi-transparent overlay
 background_image_url = "https://cdn-uploads.huggingface.co/production/uploads/67441c51a784a9d15cb12871/clljdAv7f_LGL8dH5vCZQ.jpeg"
 
-# Apply custom CSS for the background image and overlay
 st.markdown(
     f"""
     <style>
@@ -44,7 +51,6 @@ st.markdown(
             background-position: center;
             height: 100vh;
         }}
-        
         /* Semi-transparent overlay */
         .stApp::before {{
             content: "";
@@ -56,12 +62,11 @@ st.markdown(
             background: rgba(0, 0, 0, 0.4);  /* Adjust transparency here (0.4 for 40% transparency) */
             z-index: -1;
         }}
-         /* Styling the content to ensure text visibility */
+        /* Styling the content to ensure text visibility */
         .stMarkdown {{
             color: white;  /* White text to ensure visibility */
-            font-size: 50px;  /* Adjust font size for better readability */
         }}
     </style>
     """, 
     unsafe_allow_html=True
-)
+)