import streamlit as st

st.set_page_config(
    page_title="HomePage",
    page_icon="🚀",
    layout="wide"
)

# Title
st.markdown("""
        <div style="text-align: center; margin-bottom: 20px;">
            <h1 style="color: #880085; font-size: 36px;">Step into the Future with Machine Learning!</h1>
            <h2 style="color: #000080; font-size: 24px;">Start from zero and become a hero! 🚀📈</h2>
        </div>""", unsafe_allow_html=True)

# Image
st.image(
        "https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/Images/Homepage_img.png",
        caption="The path to mastering Machine Learning starts here.",
        use_container_width=True)

st.markdown("""
    <div style="text-align: center; margin-top: 40px; padding: 20px; border-radius: 8px; font-family: Arial, sans-serif;">
        <h2 style="color: #c71585; font-size: 28px;">🔍 What You'll Explore</h2>
        <p style="font-size: 18px; line-height: 1.6; color: #4F4F4F;">
            Embark on your Machine Learning journey! 🌟 This app is your all-in-one resource for mastering AI 🤖 and data science. 
            Dive into core concepts, gain insights into algorithms, practice with real-world datasets, and build impactful projects 
            to bring AI to life 🚀.
        </p>
        <ul style="text-align: left; font-size: 18px; line-height: 1.8; color: #4F4F4F;">
            <li><strong>Step-by-Step ML Tutorials</strong>: Understand the fundamentals of ML in an easy-to-follow way📖.</li>
            <li><strong>Algorithm Deep-Dives</strong>: Break down popular ML algorithms with clear examples and explanations🔍</li>
            <li><strong>Explore Real-World Datasets</strong>: Get hands-on experience with practical data exploration.📊</li>
            <li><strong>Guided Projects</strong>: Work on end-to-end ML projects with structured guidance.💡</li>
            <li><strong>Skill Building</strong>: Advance your knowledge with interactive and practical exercises. 🛠️</li>
        </ul>
    </div>
""", unsafe_allow_html=True)




st.markdown("""
    <div style="text-align: center; margin-top: 40px; padding: 20px; border-radius: 8px; font-family: Arial, sans-serif;">
        <h2 style="color: #c71585; font-size: 28px;">About the Creator 👨‍💻</h2>
        <p style="font-size: 18px; line-height: 1.8; color: #4F4F4F;">
            Hi! I’m Lakshmi Harika, a postgraduate in Statistics with a passion for exploring data science and machine learning. 
            My journey equips me with hands-on experience in Python, SQL, and visualization tools to uncover insights from data.
        </p>
        <ul style="text-align: left; font-size: 18px; line-height: 1.8; color: #4F4F4F; margin-top: 20px;">
            <li><strong>Programming:</strong> Python, R, SQL</li>
            <li><strong>Data Analysis & Visualization:</strong> Numpy, Pandas, PowerBI, Excel</li>
        </ul>
        <div style="margin-top: 20px;">
            <a href="https://www.linkedin.com/in/lakshmiharika34" target="_blank" style="text-decoration: none; color: white; background-color: #0077b5; padding: 10px 15px; border-radius: 5px; margin-right: 10px;">LinkedIn</a>
            <a href="https://medium.com/@harikamunnangi34" target="_blank" style="text-decoration: none; color: white; background-color: #00ab6c; padding: 10px 15px; border-radius: 5px; margin-right: 10px;">Medium</a>
            <a href="https://github.com/lakshmiharikaa34" target="_blank" style="text-decoration: none; color: white; background-color: #333333; padding: 10px 15px; border-radius: 5px;">GitHub</a>
        </div>
    </div>
""", unsafe_allow_html=True)




st.markdown("""
        <div style="text-align: center; margin-top: 40px; padding: 20px; border-radius: 8px; font-family: Arial, sans-serif;">
            <h2 style="color: #c71585; font-size: 28px;">Ready to Dive In? 🌊</h2>
            <p style="font-size: 18px; line-height: 1.8; color: #4F4F4F;">
                Let’s unlock the power of AI and ML together. Dive in and let the journey begin! 🚀
            </p>
        </div>
    """, unsafe_allow_html=True)



st.markdown(
    """
    <style>
    .stApp {
        background-image: url("https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/Images/background_img");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    </style>
    """,
    unsafe_allow_html=True
)




st.markdown("""
    <style>
    body, .stApp {
        color: #4F4F4F; /* Replace with your desired font color */
        background-color: #FFFFFF; /* Optional: Set a fixed background color */
    }
    h1, h2, h3, h4, h5, h6 {
        color: #BB3385; /* Replace with your heading color */
    }
    p {
        color: #4F4F4F; /* Replace with your paragraph text color */
    }
    ul li {
        color: #4F4F4F; /* List item color */
    }
    </style>
""", unsafe_allow_html=True)