import streamlit as st

st.markdown(
    """
    <style>
    /* Importing Web-Style Google Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@400;600&family=Lato:wght@400;700&display=swap');
    /* Soft Pastel Gradient Background */
    .stApp {
        background: linear-gradient(135deg, #a1c4fd, #c2e9fb, #ffafbd); /* Soft gradient of pastel blues and pinks */
        background-size: 200% 200%;
        animation: gradientShift 15s ease infinite;
        color: #333333;
        padding: 20px;
        font-family: 'Inter', sans-serif; /* Default font for body */
    }
    /* Animation for Background */
    @keyframes gradientShift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    /* Heading Styles with Montserrat */
    h1, h2, h3, h4 {
        color: #5d3fd3;  /* Soft purple for headings */
        font-family: 'Montserrat', sans-serif; /* Clean and bold font for headings */
        font-weight: 600;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); /* Soft shadow for better contrast */
    }
    /* Link Styling */
    a {
        color: #ff7eb9; /* Soft pink for links */
        text-decoration: none;
        font-weight: 500;
    }
    a:hover {
        color: #ff4785; /* Slightly darker pink on hover */
        text-decoration: underline;
    }
    </style>
    """,
    unsafe_allow_html=True
)

st.markdown('''
    <div style="background-color:#f5f5f5; border-radius:10px; padding:20px; margin-bottom:20px;">
        <h2 style="text-align:center; color:#4CAF50; font-family:Verdana, Geneva, Tahoma, sans-serif;">
             Welcome To <span style="color:#FF6347;">Zero</span> to <span style="color:#4682B4;">Hero</span> ML 
        </h2>
        <p style="font-size:18px; text-align:center; color:#555; font-family:Georgia, serif;">
            Your one-stop destination to transition from a <b>beginner</b> to a <b>master</b> in Machine Learning!  
            Let’s embark on this exciting journey together where learning meets innovation.
        </p>
    </div>
''', unsafe_allow_html=True)

def display_lottie(animation_url, height=400, width="100%"):
    st.components.v1.html(
        f"""
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.4/lottie.min.js"></script>
        <div id="lottie-animation" style="height:{height}px; margin: auto; width:{width};"></div>
        <script>
        var animation = lottie.loadAnimation({{
            container: document.getElementById('lottie-animation'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: '{animation_url}'
        }});
        </script>
        """,
        height=height,
    )

display_lottie("https://assets10.lottiefiles.com/packages/lf20_jcikwtux.json")    

st.markdown("<br>", unsafe_allow_html=True)

st.markdown('''
    <h2 style="color:#5d3fd3; text-align:center;"> The Vision of Zero to Hero ML</h2>
    <p style="font-size:16px; text-align:justify; line-height:1.6">
        This app isn’t just another learning platform - it’s a <b>transformative experience</b>. 
        Designed for ML Enthusiasts, it bridges the gap between theoretical knowledge and real-world applications. 
        Whether you’re curious about AI, planning a career switch, or simply fascinated by data, this app will equip you with the tools and confidence to excel.
    </p>
    <div style="background-color:#f9f9f9; border-left:5px solid #FF8C00; padding:10px; margin:20px 0; color:#000;">
        <p style="font-size:16px; font-family:Courier New; line-height:1.6; color:#333;">
            <i>"Machine Learning is not about code, it’s about creating impact."</i>  
        </p>
    </div>
''', unsafe_allow_html=True)

st.markdown("<br>", unsafe_allow_html=True)


st.markdown('''
    <h2 style="color:#5d3fd3; text-align:center;"> Features of App</h2>
    <div style="font-size:16px; font-family:Helvetica; line-height:1.6;">
        <ul>
            <li><b>Comprehensive ML Tutorials:</b> Learn the core concepts of Machine Learning step by step</li>
            <li><b>Algorithm Insights:</b> Explore popular ML algorithms with examples and explanations</li>
            <li><b>Dataset Explorer:</b> Hands-on practice with real-world datasets.</li>
            <li><b>End-to-End Projects:</b> Follow guided workflows to build complete ML projects.</li>
        </ul>
    </div>
''', unsafe_allow_html=True)

st.markdown("<br>", unsafe_allow_html=True)

st.markdown('''
    <h2 style="color:#5d3fd3; text-align:center;"> About Author</h2>
    <div style="background-color:#f5f5f5; border-radius:10px; padding:20px; margin-top:20px;">
        <p style="font-size:16px; text-align:center; font-family:Georgia; line-height:1.6; color:#000;">
            Hello! I’m <b>Yash Jadhav</b>, a passionate <span style="color:#FF6347;">Data Scientist</span> 
            and <span style="color:#4682B4;">Data Analyst</span>.  
            I specialize in transforming raw data into actionable insights and helping others master the art of Machine Learning.
        </p>
        <p style="font-size:16px; text-align:center; font-family:Arial; color:#333;">
            <b>My Skills:</b>
        </p>
        <ul style="list-style-type:circle; text-align:center; font-size:16px; font-family:Arial; line-height:1.8; color:#000;">
            <li><b>Programming:</b> Python, SQL</li>
            <li><b>Data Analysis & Visualization:</b> Power BI, Pandas, NumPy</li>
            <li><b>Machine Learning:</b> Core ML Concepts, Model Building</li>
            <li><b>Big Data Technologies:</b> Apache Hadoop, Apache Hive, Apache Sqoop</li>
        </ul>
        <div style="text-align:center; margin-top:20px;">
            <a href="https://www.linkedin.com/in/yash-jadhav-454b0a237/" target="_blank" style="
                background-color:#0073b1; color:white; padding:10px 20px; border-radius:5px; 
                text-decoration:none; margin-right:10px;">LinkedIn</a>
            <a href="https://github.com/Yashvj22" target="_blank" style="
                background-color:black; color:white; padding:10px 20px; border-radius:5px; 
                text-decoration:none; margin-right:10px;">GitHub</a>
            <a href="https://medium.com/@yashvj2222" target="_blank" style="
                background-color:grey; color:white; padding:10px 20px; border-radius:5px; 
                text-decoration:none;">Medium</a>                
        </div>
    </div>
''', unsafe_allow_html=True)