pages/0.inroduction.py

import streamlit as st 
import pandas as pd 
import numpy as np 

# 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;'>Bank Churn Modeling: Predicting customer churn in banking using machine learning.</h2>", unsafe_allow_html=True)

st.markdown(
    """
    <div style="text-align: center;">
        <img src="https://cdn-uploads.huggingface.co/production/uploads/67445925102349e867c92342/0DKItM6kjTTcnHVpJK9ZX.jpeg" width="80%" />
    </div>
    """, 
    unsafe_allow_html=True
)

# Problem statement section with center alignment
st.markdown("<h3>Problem Statement and Aim:</h3>", unsafe_allow_html=True)

# Text explaining the problem
st.markdown(
    """
    <div>
        <p><b>Title:</b> Predicting Customer Churn in Banking Using Machine Learning Models</p>
        <p><b>Problem Statement:</b> Customer Churn Prediction: This project aims to predict customer churn by utilizing various machine learning models and analyzing a dataset containing customer information from a bank. The dataset includes features such as credit score, location, gender, age, tenure, account balance, number of products, credit card ownership, active membership status, estimated salary, and the target variable "Exited", which indicates whether a customer has left the bank.?</p>
        <p><b>Aim for this project:</b> The aim of the Customer Churn Prediction project is to predict whether a customer will leave the bank by analyzing features like credit score, age, account balance, and more. This helps the bank identify at-risk customers, improve retention strategies, and optimize resources through data-driven decision-making..</p>
        <p><b>Key Objectives:</b></p>
        <ul style="list-style-position: inside;">
            <li>Data Preprocessing, Feature Engineering</li>
            <li>Exploratory Data Analysis</li>
            <li>Model Creation & Evaluation</li>
        </ul>
    </div>
    """, 
    unsafe_allow_html=True
)

# Center-aligned image


# Background image with semi-transparent overlay
background_image_url = "https://cdn-uploads.huggingface.co/production/uploads/67445925102349e867c92342/M93BxzRB5zCbTidTOUpnR.png"

st.markdown(
    f"""
    <style>
        .stApp {{
            background-image: url("{background_image_url}");
            background-size: cover;
            background-position: center;
            height: 100vh;
        }}
        /* Semi-transparent overlay */
        .stApp::before {{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            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 */
        .stMarkdown {{
            color: white;  /* White text to ensure visibility */
        }}
    </style>
    """, 
    unsafe_allow_html=True
)



#Buttons

if st.button("Previous ⏮️"):
    st.switch_page("Home.py") 
if st.button("Next ⏭️"):
    st.switch_page("pages/1_Data_Card_and_Data_collection.py")