Update app.py

app.py

@@ -751,136 +751,123 @@ soil_classes = ["Gravel", "Sand", "Silt", "Clay", "Loam"]
 
 # -------------------- LANDING PAGE --------------------
 def landing_page():
-    BACKGROUND_IMAGES = [
-        "/app/bg1.jpg",  # replace with your images
-        "/app/bg2.jpg",
-        "/app/bg3.jpg"
-    ]
 
-    # Inject CSS + animations
-    st.markdown("""
-    <style>
-    body {background:#000}
-    /* Background slider */
-    @keyframes bgFade {
-        0% {opacity:1;}
-        30% {opacity:1;}
-        33% {opacity:0;}
-        97% {opacity:0;}
-        100% {opacity:1;}
-    }
-    .hero {
-        position: relative;
-        border-radius: 16px;
-        overflow: hidden;
-        height: 420px;
-        margin-bottom: 24px;
-        box-shadow: 0 8px 28px rgba(0,0,0,0.65);
-    }
-    .hero img {
-        position: absolute;
-        top:0;left:0;
-        width:100%;height:100%;
-        object-fit: cover;
-        animation: bgFade 15s infinite;
-    }
-    .hero img:nth-child(2) { animation-delay: 5s; }
-    .hero img:nth-child(3) { animation-delay: 10s; }
-
-    /* Overlay content */
-    .overlay {
-        position: absolute;
-        top:0;left:0;
-        width:100%;height:100%;
-        background: rgba(15,15,15,0.65);
-        display:flex;
-        flex-direction:column;
-        justify-content:center;
-        padding: 40px;
-        animation: fadeIn 1.5s ease-in-out;
-    }
-    @keyframes fadeIn {
-        from {opacity:0; transform: translateY(20px);}
-        to {opacity:1; transform: translateY(0);}
-    }
-    h1.hero-title {
-        color:#FF8C00;
-        font-size:44px;
-        margin:0;
-        font-weight:800;
-    }
-    p.hero-sub {
-        color:#f0f0f0;
-        font-size:18px;
-        margin-top:12px;
-        line-height:1.6;
-    }
-    .quick-btn {
-        display:inline-block;
-        margin:10px 8px 0 0;
-        padding:12px 22px;
-        border-radius:10px;
-        background: linear-gradient(135deg,#ff7a00,#ff3a3a);
-        color:white;
-        font-weight:600;
-        text-decoration:none;
-        transition: all .3s ease;
-    }
-    .quick-btn:hover {
-        transform: translateY(-3px);
-        box-shadow:0 6px 18px rgba(0,0,0,0.4);
-    }
-    </style>
-    """, unsafe_allow_html=True)
-
-    # Hero with slider
-    st.markdown(f"""
-    <div class="hero">
-        <img src="{BACKGROUND_IMAGES[0]}"/>
-        <img src="{BACKGROUND_IMAGES[1]}"/>
-        <img src="{BACKGROUND_IMAGES[2]}"/>
-
-        <div class="overlay">
-            <h1 class="hero-title">GeoMate V2</h1>
-            <p class="hero-sub">
-                AI Geotechnical Copilot — soil recognition, classification, 
-                locator (EE), RAG-powered Q&A, OCR, and dynamic reports.
-            </p>
-            <div style="margin-top:18px">
-                <a href="#" onclick="window.parent.postMessage({{type: 'streamlit:setSessionState', key:'page', value:'Classifier'}}, '*')" class="quick-btn">🧪 Classifier</a>
-                <a href="#" onclick="window.parent.postMessage({{type: 'streamlit:setSessionState', key:'page', value:'GSD'}}, '*')" class="quick-btn">📈 GSD</a>
-                <a href="#" onclick="window.parent.postMessage({{type: 'streamlit:setSessionState', key:'page', value:'Locator'}}, '*')" class="quick-btn">🌍 Locator</a>
-                <a href="#" onclick="window.parent.postMessage({{type: 'streamlit:setSessionState', key:'page', value:'RAG'}}, '*')" class="quick-btn">🤖 Ask</a>
-                <a href="#" onclick="window.parent.postMessage({{type: 'streamlit:setSessionState', key:'page', value:'Reports'}}, '*')" class="quick-btn">📑 Reports</a>
-            </div>
-        </div>
-    </div>
-    """, unsafe_allow_html=True)
+# Background hero with placeholder image (replace BACKGROUND_URL with your image path or URL)
+
+BACKGROUND_URL = "/app/background_placeholder.jpg"  # <- replace this (or provide URL)
+
+st.markdown(f"""
+
+<div style="
+
+    background-image: url('{BACKGROUND_URL}');
+
+    background-size: cover;
+
+    background-position: center;
+
+    padding: 48px 28px;
+
+    border-radius: 12px;
+
+    margin-bottom: 18px;
+
+    position: relative;
 
-    # Live site summary
-    site = st.session_state["sites"][st.session_state["active_site"]]
-    st.markdown(f"""
-    <div style="
-        background:#1e1e1e;
-        border-radius:14px;
-        padding:20px;
-        margin-top:16px;
-        text-align:center;
-        box-shadow:0 4px 14px rgba(0,0,0,0.5);
-        animation: fadeIn 1.2s ease-in-out;
     ">
-        <h3 style='color:#FF8C00; margin:0 0 10px'>📍 Live Site Summary</h3>
-        <p style='color:#fff'>🏗️ <b>Site:</b> {site.get('Site Name')}</p>
-        <p style='color:#fff'>🧱 <b>USCS:</b> {site.get('USCS') or "—"}</p>
-        <p style='color:#fff'>🛣️ <b>AASHTO:</b> {site.get('AASHTO') or "—"}</p>
-        <p style='color:#fff'>📊 <b>GSD saved:</b> {"✅ Yes" if site.get("GSD") else "❌ No"}</p>
+
+  <div style="background: rgba(11,11,11,0.55); padding:22px; border-radius:10px; max-width:900px;">
+
+    <h1 style='color:#FF8C00; margin:0'>GeoMate V2</h1>
+
+    <p style='color:#e8eef6; margin:6px 0 0; font-size:16px'>
+
+      AI geotechnical copilot — soil recognition, classification, locator (EE), RAG-powered Q&A, and dynamic reports.
+
+    </p>
+
+    <div style='margin-top:8px; color:#cfcfcf; font-size:13px'>
+
+      Quick: Classifier • GSD • Locator • RAG • Reports
+
     </div>
-    """, unsafe_allow_html=True)
 
-# -------------------- MAIN APP -------------------
+  </div>
+
+</div>
+
+""", unsafe_allow_html=True)
+
+
+
+st.markdown("<div style='display:flex;align-items:center;gap:12px'>"
 
+            "<div style='width:76px;height:76px;border-radius:14px;background:linear-gradient(135deg,#ff7a00,#ff3a3a);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,0.6)'>"
 
+            "<span style='font-size:34px'>🛰️</span></div>"
 
+            "<div><h1 style='margin:0;color:#FF8C00'>GeoMate V2</h1>"
+
+            "<div class='small-muted'>AI geotechnical copilot — soil recognition, classification, locator, RAG, and reports</div></div></div>", unsafe_allow_html=True)
+
+st.markdown("---")
+
+col1, col2 = st.columns([2,1])
+
+with col1:
+
+    st.markdown("<div class='gm-card'>", unsafe_allow_html=True)
+
+    st.write("GeoMate is built to help geotechnical engineers: classify soils (USCS/AASHTO), plot GSD, fetch Earth Engine data, chat with a RAG-backed LLM, and generate professional geotechnical reports.")
+
+    st.markdown("</div>", unsafe_allow_html=True)
+
+    st.markdown("### Quick Actions")
+
+    c1, c2, c3 = st.columns(3)
+
+    if c1.button("🧪 Classifier"):
+
+        st.session_state["page"] = "Classifier"; st.rerun()
+
+    if c2.button("📈 GSD Curve"):
+
+        st.session_state["page"] = "GSD"; st.rerun()
+
+    if c3.button("🌍 Locator"):
+
+        st.session_state["page"] = "Locator"; st.rerun()
+
+    c4, c5, c6 = st.columns(3)
+
+    if c4.button("🤖 GeoMate Ask"):
+
+        st.session_state["page"] = "RAG"; st.rerun()
+
+    if c5.button("📷 OCR"):
+
+        st.session_state["page"] = "OCR"; st.rerun()
+
+    if c6.button("📑 Reports"):
+
+        st.session_state["page"] = "Reports"; st.rerun()
+
+with col2:
+
+    st.markdown("<div class='gm-card' style='text-align:center'>", unsafe_allow_html=True)
+
+    st.markdown("<h3 style='color:#FF8C00'>Live Site Summary</h3>", unsafe_allow_html=True)
+
+    site = st.session_state["sites"][st.session_state["active_site"]]
+
+    st.write(f"Site: **{site.get('Site Name')}**")
+
+    st.write(f"USCS: {site.get('USCS')}, AASHTO: {site.get('AASHTO')}")
+
+    st.write(f"GSD saved: {'Yes' if site.get('GSD') else 'No'}")
+
+    st.markdown("</div>", unsafe_allow_html=True)
+    
 # Soil Classifier page (conversational, step-by-step)
 def soil_classifier_page():
     st.header("🧪 Soil Classifier — Conversational (USCS & AASHTO)")