import streamlit as st

st.markdown(
    """
    <style>
        body {
            background-color: #f9f9f9; /* Light, soft background */
            font-family: 'Arial', sans-serif;
        }
        @keyframes fadeIn {
            0% { opacity: 0; transform: translateY(-20px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        .title {
            text-align: center;
            color: #2c3e50; /* Deep gray-blue */
            font-size: 3rem;
            font-weight: bold;
            animation: fadeIn 1s ease-in-out;
        }
        .caption {
            text-align: center;
            font-style: italic;
            font-size: 1.2rem;
            color: #7f8c8d; /* Soft gray */
            animation: fadeIn 1.5s ease-in-out;
        }
        .about {
            font-size: 1.1rem;
            text-align: justify;
            line-height: 1.8;
            color: #34495e; /* Muted gray */
            background: #ffffff; /* White card-style background */
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            animation: fadeIn 2s ease-in-out;
        }
        .image-container {
            text-align: center;
            margin-top: 20px;
            animation: fadeIn 2.5s ease-in-out;
        }
        .image-container img {
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease-in-out;
        }
        .image-container img:hover {
            transform: scale(1.05); /* Subtle zoom effect on hover */
        }
    </style>
    """,
    unsafe_allow_html=True,
)

# Title with CSS animation
st.markdown("<div class='title'>Natural Language Processing</div>", unsafe_allow_html=True)

# Caption with animation
st.markdown(
    "<div class='caption'>Unlock the Power of Language: Bridging Communication Between Humans and Machines with NLP!</div>",
    unsafe_allow_html=True,
)

# Centered Image with styling
st.markdown(
    """
    <div class='image-container'>
        <img src="https://cdn-uploads.huggingface.co/production/uploads/66bde9bf3c885d04498227a0/REaH0rQy3lM6fCF0vEBtt.jpeg" alt="NLP Image" width="400">
    </div>
    """,
    unsafe_allow_html=True,
)

# About the app section with CSS styling
st.subheader(":violet[About the App]")
st.markdown(
    '''
    <div class='about'>
        <b>From Words to Wonders: Mastering NLP</b><br>
        Natural Language Processing (NLP) is where technology meets human language, 
        turning words into powerful tools for innovation. 
        Whether you're a curious beginner or a seasoned pro, this journey will take you 
        from decoding basics to building smart systems like chatbots, translators, and sentiment analyzers. 
        NLP is not just about algorithms—it's about understanding, creating, and transforming how we connect with the world. 
        Step into the future of communication and let language lead the way!
    </div>
    ''',
    unsafe_allow_html=True,
)