client/pages/home.py

import streamlit as st
import os

# def home_page():

st.markdown(
    """
    <style>
        /*
        body, .stApp {
            background: linear-gradient(to right, #cae7d4, #a8d8b9);
        }*/

        @keyframes gradientAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .presentation {
            background-color: #ffffff;
            border-radius: 10px;
            padding: 2rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .left-col, .right-col {
            border-radius: 12px;
            overflow: hidden;
        }

        h2 {
            font-size: 2rem;
            color: #2a4b47;
        }

        .welcome-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #2a4b47;
            text-align: center;
            animation: fadeIn 2s ease-out;
        }

        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

        .user-name {
            color: #4e7a63;
            font-size: 3rem;
            font-weight: bold;
            animation: nameAnimation 2s ease-out;
        }

        .presentation-text {
            font-size: 1.3rem;
            color: #4e7a63;
            text-align: center;
            font-style: italic;
            animation: fadeIn 3s ease-out;
        }

        .feature-icon {
            font-size: 2rem;
            margin-right: 1rem;
        }

        .features {
            background: linear-gradient(to right, #cae7d4, #a8d8b9);
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            animation: fadeIn 1s ease-out;
            transition: transform 0.3s ease;
            margin-bottom: 1rem;
            height:250px;
        }

        .features:hover {
            transform: translateY(-5px);
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
        }

        .team-name-role {
            color: #2a4b47;
            font-size: 1.1rem;
            margin-top: 0.5rem;
            font-weight: 500;
            font-style: italic;
            text-align: center;
        }

        .team-name {
            color: #2a4b47;
            font-size: 1.3rem;
            font-weight: 700;
            text-align: center;
        }

    </style>
""",
    unsafe_allow_html=True,
)

st.markdown(
    f"""
    <h2 class="welcome-title">
        Bienvenue sur NutriGénie <span class="user-name">{st.session_state['user']}</span> 🍽️!
    </h2>
""",
    unsafe_allow_html=True,
)

st.markdown(
    """
    <br>
    <div class="presentation-text">
        " Laissez-nous vous guider à travers une expérience culinaire sur-mesure. Découvrez des recettes adaptées à vos préférences et suivez vos habitudes alimentaires en toute simplicité. "
    </div>
    <br>
""",
    unsafe_allow_html=True,
)

logo_path = os.path.join("client", "assets", "logo.png")

# centrer le logo
cola, colb, colc = st.columns(3)

with cola:
    pass
with colb:
    st.image(logo_path, use_container_width=True, caption=None)
with colc:
    pass

st.markdown(
    """
        <br>
        <h3 style="color:#2a4b47; text-align:center;">🔧 Fonctionnalités principales de l'application :</h3>
        <br>
    """,
    unsafe_allow_html=True,
)

# Fonctionnalités disposées horizontalement par paires
col1, col2 = st.columns(2)

with col1:

    # Fonctionnalités 1 et 2
    st.markdown(
        """
        <div class="features">
            <div style="display: flex; align-items: center;">
                <span class="feature-icon">🍽️</span>
                <h3><strong>Génération de recettes personnalisées</strong></h3>
            </div>
            <p>Créez des recettes adaptées à vos préférences et vos besoins alimentaires. Nous générons des suggestions personnalisées pour chaque utilisateur.</p>
        </div>
        <div class="features">
            <div style="display: flex; align-items: center;">
                <span class="feature-icon">📝</span>
                <h3><strong>Suivi des repas</strong></h3>
            </div>
            <p>Consultez l'historique de vos repas consommés et suivez vos habitudes alimentaires au fil du temps.</p>
        </div>
    """,
        unsafe_allow_html=True,
    )

with col2:
    # Fonctionnalités 3 et 4
    st.markdown(
        """
        <div class="features">
            <div style="display: flex; align-items: center;">
                <span class="feature-icon">🛒</span>
                <h3><strong>Liste de courses</strong></h3>
            </div>
            <p>Générez automatiquement des listes de courses basées sur les recettes que vous avez choisies. Ne manquez plus d'ingrédients !</p>
        </div>
        <div class="features">
            <div style="display: flex; align-items: center;">
                <span class="feature-icon">🍴</span>
                <h3><strong>Suggestions de repas</strong></h3>
            </div>
            <p>Obtenez des suggestions de repas en fonction de vos goûts et de vos besoins nutritionnels.</p>
        </div>
    """,
        unsafe_allow_html=True,
    )

# Présentation des membres de l'équipe
st.markdown("<hr>", unsafe_allow_html=True)  # Ajoute une ligne de séparation

st.subheader("Rencontrez notre équipe 👩‍🍳👨‍🍳")

# Définition des 5 membres
base_path = os.path.join("client", "assets")
membres = [
    {
        "nom": "Souraya",
        "role": "M2 SISE",
        "photo": f"{os.path.join(base_path,'membre1.jpg')}",
        "emoji_role": "👩‍💻",
    },
    {
        "nom": "Bertrand",
        "role": "M2 SISE",
        "photo": f"{os.path.join(base_path,'membre2.jpg')}",
        "emoji_role": "👩‍💻",
    },
    {
        "nom": "Cyril",
        "role": "M2 SISE",
        "photo": f"{os.path.join(base_path,'membre3.jpg')}",
        "emoji_role": "👩‍💻",
    },
    {
        "nom": "Linh Nhi",
        "role": "M2 SISE",
        "photo": f"{os.path.join(base_path,'membre4.jpg')}",
        "emoji_role": "👩‍💻",
    },
    {
        "nom": "Daniella",
        "role": "M2 SISE",
        "photo": f"{os.path.join(base_path,'membre5.jpg')}",
        "emoji_role": "👩‍💻",
    },
]

# Création des colonnes pour chaque membre
cols = st.columns(5)

for i, membre in enumerate(membres):
    with cols[i]:
        st.image(membre["photo"], use_container_width=True, caption=None)
        st.markdown(
            f"""
            <div class="team-member">
                <div class="team-name">{membre['nom']}</div>
                <div class="team-name-role">{membre['emoji_role']} {membre['role']}</div>
            </div>
        """,
            unsafe_allow_html=True,
        )