import streamlit as st

# Set page configuration
st.set_page_config(page_title="Federal University Lokoja Community", page_icon=":school:", layout="centered")

# Styling for the card
card_style = """
    <style>
    .card {
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s;
        background: linear-gradient(135deg, #ff7b54, #ffb300);
        padding: 20px;
        color: white;
        text-align: center;
        margin: 20px auto;
        max-width: 400px;
    }
    .card:hover {
        transform: scale(1.05);
    }
    .card-image img {
        width: 100%;
        border-radius: 15px 15px 0 0;
    }
    .card-title {
        font-size: 1.8em;
        margin-top: 15px;
    }
    .card-description {
        margin-top: 10px;
        font-size: 1em;
    }
    .card-button a {
        display: inline-block;
        padding: 10px 20px;
        margin-top: 15px;
        background-color: #007e8e;
        color: white;
        border-radius: 8px;
        text-decoration: none;
        transition: background-color 0.3s;
    }
    .card-button a:hover {
        background-color: #005f66;
    }
    </style>
"""

# Inject custom CSS
st.markdown(card_style, unsafe_allow_html=True)

# Display card
st.markdown(
    """
    <div class="card">
        <div class="card-image">
            <img src="https://via.placeholder.com/400x200" alt="Community Image">
        </div>
        <div class="card-title">Federal University Lokoja Community</div>
        <div class="card-description">
            Join our growing community at Hugging Face where we explore AI, NLP, and machine learning innovations.
        </div>
        <div class="card-button">
            <a href="https://huggingface.co/" target="_blank">Join Now</a>
        </div>
    </div>
    """,
    unsafe_allow_html=True
)