ParisFranceChapter_AITravelAdvisors/Welcome.py

import streamlit as st
import os 
from src.components.navigation import *

def main():
    page_config()
    custom_style()
    display_sidebar()

    
    st.markdown("""
    <style>
    .block-container {
        padding-top: 0rem;
        padding-bottom: 0rem;
    }
    </style>
    """, unsafe_allow_html=True)

    
    st.markdown("<h1 style='margin-top: -0.5rem; padding-top: 0rem;'>AI Travel Advisor - Paris Olympics & Beyond</h1>", unsafe_allow_html=True)
    # st.image("page_utils/logo.gif", use_column_width=None)

    # Header
    st.header("Plan Your Visit to Paris")
    st.markdown("<div style='text-align: center; font-size: 24px;'>Welcome to the Paris AI Travel Advisor! Plan your trip to Paris with ease and More.</div>", unsafe_allow_html=True)
    st.divider()

    # Categories with pictures and centered text
    col1, col2, col3 = st.columns(3)

    # Category 1: Travel planner
    with col1:
        st.markdown('<div class="column">', unsafe_allow_html=True)
        st.subheader("Plan your trip to Paris",divider="red")
        st.image("static/trip_planner.jpg", use_column_width=True)
        st.markdown("<div style='text-align: center;'>Get the AI curated travel itinerary to Paris.</div>", unsafe_allow_html=True)

    # Category 2: Travel planner
    with col2:
        st.markdown('<div class="column">', unsafe_allow_html=True)
        st.subheader("Explore Paris-Hidden gems and more",divider="red")
        st.image("static/explore_paris.jpeg", use_column_width=True)
        st.markdown("<div style='text-align: center;'>Explore the best attractions and activities in Paris during your stay.</div>", unsafe_allow_html=True)

    # Category 3: Transportation
    with col3:
        st.markdown('<div class="column">', unsafe_allow_html=True)
        st.subheader("Transportation Advisor",divider="red")
        st.image("static/navigate_paris.jpg", use_column_width=True)
        st.markdown("<div style='text-align: center;'>Learn about the best ways to get around Paris along with real-time traffic disruptions.</div>", unsafe_allow_html=True)

    col4, col5, col6 = st.columns(3)

    # Category 4: Paris Syndrome Psychiatry Advisor
    with col4:
        st.markdown('<div class="column">', unsafe_allow_html=True)
        st.subheader("Paris Syndrome Psychiatry Advisor",divider="red")
        st.image("static/safety.jpeg", use_column_width=True)
        st.markdown("<div style='text-align: center;'>Get AI-assisted advice if you are suffering from Paris syndrome and learn about cultural awareness, safety, and more.</div>", unsafe_allow_html=True)

    # Category 5: Know the Places in Paris
    with col5:
        st.markdown('<div class="column">', unsafe_allow_html=True)
        st.subheader("Know the Places in Paris",divider="red")
        st.image("static/upload_image.jpg", use_column_width=True)
        st.markdown("<div style='text-align: center;'>Upload a picture of a place to know more about it.</div>", unsafe_allow_html=True)

    # Category 6: Learn Basic French
    with col6:
        st.markdown('<div class="column">', unsafe_allow_html=True)
        st.subheader("Learn Basic French with Omdena",divider="red")
        st.image("static/learn_french.jpeg", use_column_width=True)
        st.markdown("<div style='text-align: center;'>Learn Basic French.</div>", unsafe_allow_html=True)


if __name__=="__main__":
    main()