welcome css try

phase/welcome.py

@@ -1,11 +1,154 @@
 # phase/Welcome.py
 import streamlit as st
+from PIL import Image
 
 def show_page():
-    st.title("💹 Welcome to FinEdu App")
+    st.title("💹 Welcome to $mart Kids App")
     if st.session_state.user:
         st.success(f"Welcome back, {st.session_state.user['name']}! ✅")
     st.write(
         "This app helps you improve your **financial education and numeracy skills**.  \n"
         "👉 Use the sidebar to **Signup** or **Login** to get started."
     )
+
+# Load images
+logo = Image.open("assets/logo.png")
+banner = "assets/welcome-banner.png"  # used as CSS background
+
+# Dummy role for now (could be replaced with session state or login)
+role =  st.success(f"Welcome back, {st.session_state.user['name']}! ✅")
+
+# ---------- CSS Styling ----------
+st.markdown("""
+<style>
+body {
+    font-family: 'Segoe UI', sans-serif;
+    background: #f9f9fb;
+}
+
+.hero {
+    position: relative;
+    padding: 4rem 2rem;
+    text-align: center;
+    background: linear-gradient(to right, #8EC5FC, #E0C3FC);
+    color: white;
+}
+
+.hero::before {
+    content: "";
+    background-image: url("data:image/png;base64, """ + banner + """");
+    position: absolute;
+    opacity: 0.1;
+    inset: 0;
+    background-size: cover;
+    background-position: center;
+}
+
+.badge {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: white;
+    color: #333;
+    margin: 0.25rem;
+    border-radius: 10px;
+    font-weight: 600;
+    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+}
+
+.card {
+    background: white;
+    border-radius: 12px;
+    padding: 2rem;
+    margin-bottom: 2rem;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+    text-align: center;
+}
+
+.card-icon {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+}
+</style>
+""", unsafe_allow_html=True)
+
+# ---------- Hero Section ----------
+st.markdown(f"""
+<div class="hero">
+    <img src="data:image/png;base64,{logo}" width="120" style="margin-bottom:1rem;" />
+    <h1>Welcome to FinanceLearn! 💖</h1>
+    <p style="font-size: 1.2rem; max-width: 700px; margin: auto;">
+        The fun and engaging platform that makes financial literacy accessible for students and easy to teach! ✨🌟
+    </p>
+    <div style="margin-top:2rem;">
+        <div class="badge">❤️ Made with love for young learners</div>
+        <div class="badge">👨‍🏫 Perfect for classrooms and individuals</div>
+        <div class="badge">📚 Curriculum-aligned content</div>
+    </div>
+</div>
+""", unsafe_allow_html=True)
+
+# ---------- What is FinanceLearn ----------
+st.header("✨ What is FinanceLearn? 🎈")
+st.write("FinanceLearn is an interactive educational platform designed to teach financial literacy through fun, engaging activities. Perfect for both classroom learning and individual exploration! ✨")
+
+# ---------- Demo Video Placeholder ----------
+st.markdown("""
+<div class="card">
+    <div class="card-icon">🎬</div>
+    <h3>See How It Works! 🌈</h3>
+    <div style="padding: 2rem; background: #f1f1f1; border-radius: 10px;">
+        <div class="card-icon">▶️</div>
+        <p><strong>Demo Video Coming Soon! 🎥✨</strong></p>
+        <p>Watch students learn and teachers teach with FinanceLearn</p>
+    </div>
+</div>
+""", unsafe_allow_html=True)
+
+# ---------- Platform Features ----------
+st.subheader("🚀 Features")
+col1, col2, col3, col4 = st.columns(4)
+
+features = [
+    ("📖", "Interactive Lessons", "Engaging content that makes financial literacy fun and accessible for all ages!"),
+    ("🎮", "Educational Games", "Learn through play with our collection of money management games and challenges!"),
+    ("🏆", "Progress Tracking", "Monitor learning progress with quizzes, achievements, and detailed analytics!"),
+    ("🤖", "AI Assistant", "Get instant help and personalized guidance from our friendly chatbot!")
+]
+
+for col, (icon, title, desc) in zip([col1, col2, col3, col4], features):
+    with col:
+        st.markdown(f"""
+        <div class="card">
+            <div class="card-icon">{icon}</div>
+            <h4>{title}</h4>
+            <p style="font-size:0.9rem;">{desc}</p>
+        </div>
+        """, unsafe_allow_html=True)
+
+# ---------- Get Started Section ----------
+st.subheader("🎓 Get Started")
+
+left, right = st.columns(2)
+
+with left:
+    st.markdown("""
+    <div class="card" style="background: linear-gradient(to right, #D3CCE3, #E9E4F0); color: #333;">
+        <div class="card-icon">👦👧</div>
+        <h3>For Students</h3>
+        <p>Start your financial learning journey with games, lessons, and fun challenges!</p>
+    </div>
+    """, unsafe_allow_html=True)
+    if st.button("🚀 Start Learning!"):
+        st.success("Redirecting to Student Dashboard...")
+
+with right:
+    st.markdown("""
+    <div class="card" style="background: linear-gradient(to right, #30E8BF, #FF8235); color: #fff;">
+        <div class="card-icon">👩‍🏫</div>
+        <h3>For Teachers</h3>
+        <p>Manage your classroom, track progress, and engage your students with financial education!</p>
+    </div>
+    """, unsafe_allow_html=True)
+    if st.button("📊 Teacher Dashboard"):
+        st.success("Redirecting to Teacher Dashboard...")
+