Update app.py

app.py

@@ -7,19 +7,21 @@ import streamlit as st
 BASE_DIR = Path(__file__).parent          # -> Landing_Page/
 ASSETS   = BASE_DIR / "assets"            # -> Landing_Page/assets/
 
-# ========= CONTROLS =========
-HERO_LOGO_SIZE     = 170   # px (top company logo size)
-TOP_SPACER         = 160    # px (extra top padding so logo never looks clipped)
-CARD_THUMB_HEIGHT  = 85   # px (image height inside each card)
+# ========= CONTROLS (tweak these) =========
+HERO_LOGO_SIZE     = 160   # px (top company logo size)
+TOP_SPACER         = 24    # px (breathing room above hero; raise if the logo looks "trimmed")
+CARD_WIDTH         = 300   # px (fixed width per card on desktop)
+CARD_THUMB_HEIGHT  = 120   # px (image area inside each card)
+GRID_GAP           = 20    # px (space between the two cards)
 BUTTON_TEXT        = "Click to Run APP"
-OPEN_IN_NEW_TAB    = False # True = open app in new tab
+OPEN_IN_NEW_TAB    = False # True = open links in a new tab
 
 # ========= BRAND / APPS =========
 COMPANY_NAME = "Smart Thinking"
 TAGLINE      = "We Deliver Smart AI-Based Solutions For O&G Industry"
 
 APP1 = {
-    "title": "ST_Geo_Mech",
+    "title": "ST_GeoMech_UCS",
     "url":   "https://smart-thinking-ucs.hf.space/",
     "thumb": ASSETS / "app1.png",
     "blurb": "Real-Time UCS Prediction",
@@ -36,44 +38,59 @@ LOGO_PATH = ASSETS / "logo.png"
 page_icon = str(LOGO_PATH) if LOGO_PATH.exists() else "🧭"
 st.set_page_config(page_title=f"{COMPANY_NAME} — Apps", page_icon=page_icon, layout="wide")
 
-# ========= CSS (one-screen desktop, logo not “trimmed”) =========
+# ========= CSS (fits one screen on desktop; no blank area under cards) =========
 st.markdown(
     f"""
     <style>
+      :root {{
+        --top-spacer: {TOP_SPACER}px;
+        --card-width: {CARD_WIDTH}px;
+        --grid-gap: {GRID_GAP}px;
+      }}
+
       html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
-      [data-testid="stAppViewContainer"] > .main {{ min-height: 100vh; }}
+      /* Remove Streamlit's default big paddings to reclaim space */
+      [data-testid="stAppViewContainer"] > .main {{ padding-top: 0 !important; padding-bottom: 0 !important; }}
       .block-container {{
         max-width: 1120px;
-        min-height: 100vh;
+        min-height: 100vh;                 /* take the viewport height */
         display: flex; flex-direction: column;
-        justify-content: center;                 /* keep in-viewport on desktops */
-        padding-top: {TOP_SPACER}px !important;  /* <-- gives the logo breathing room */
-        padding-bottom: 10px !important;
+        justify-content: center;           /* vertically center hero + grid + footer */
+        gap: 10px;
+        padding: var(--top-spacer) 0 8px !important; /* tiny bottom so footer never adds scroll */
       }}
 
       /* HERO */
-      .hero {{ text-align:center; margin: 4px 0 18px; }}
+      .hero {{ text-align:center; margin: 0 0 8px; }}
       .hero img {{
         width: {HERO_LOGO_SIZE}px; max-width: 95vw; height: auto;
-        display:block; margin: 8px auto 8px;     /* no top clipping */
+        display:block; margin: 0 auto 8px;
         filter: drop-shadow(0 2px 8px rgba(0,0,0,.12));
       }}
-      .hero h1 {{ font-size: 2.3rem; margin: .6rem 0 .2rem; }}
+      .hero h1 {{ font-size: 2.3rem; margin: .4rem 0 .2rem; }}
       .hero p  {{ color: #5a5f6a; margin: 0 auto; max-width: 720px; }}
 
-      /* Two-card grid on desktop, stack on small screens */
-      .grid {{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }}
-      @media (max-width: 980px) {{
-        .grid {{ grid-template-columns: 1fr; }}
-        .block-container {{ justify-content: flex-start; }}
+      /* GRID: use flex so we can control card width precisely */
+      .grid {{
+        display: flex;
+        gap: var(--grid-gap);
+        justify-content: center;
+        align-items: stretch;
+        flex-wrap: nowrap;                 /* keep 2-up on desktop */
+      }}
+
+      /* If the screen is too small, allow wrapping to avoid horizontal scroll */
+      @media (max-width: calc(2 * var(--card-width) + var(--grid-gap) + 64px)) {{
+        .grid {{ flex-wrap: wrap; }}
       }}
 
       .card {{
-        background:#fff; border-radius:16px; padding:16px;
+        width: var(--card-width);
+        background:#fff; border-radius:16px; padding:14px;
         border:1px solid rgba(0,0,0,.06);
         box-shadow:0 4px 18px rgba(0,0,0,.05);
         transition:transform .12s ease, box-shadow .12s ease;
-        text-align:center;
+        text-align:center; display:flex; flex-direction:column; gap:10px;
       }}
       .card:hover {{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }}
 
@@ -86,8 +103,8 @@ st.markdown(
         background:#fff;
       }}
 
-      .card h3 {{ margin:12px 0 6px; }}
-      .card p  {{ color:#5a5f6a; min-height:36px; margin-bottom:10px; }}
+      .card h3 {{ margin:6px 0 2px; }}
+      .card p  {{ color:#5a5f6a; min-height:30px; margin:0 8px 2px; }}
 
       /* Light button with dark text */
       .btn {{
@@ -96,6 +113,10 @@ st.markdown(
         background:#f3f4f6; color:#111827; font-weight:500;
       }}
       .btn:hover {{ background:#e5e7eb; }}
+
+      /* Compact footer; no extra vertical space */
+      .footer {{ text-align:center; color:#6b7280; font-size:1.0em; margin-top: 6px; }}
+      .footer hr {{ margin: 6px 0; }}
     </style>
     """,
     unsafe_allow_html=True,
@@ -139,14 +160,14 @@ def app_card(app: dict) -> str:
 
 st.markdown("<div class='grid'>" + app_card(APP1) + app_card(APP2) + "</div>", unsafe_allow_html=True)
 
-# =========================
-# Footer
-# =========================
-st.markdown("""
-<br><br><br>
-<hr>
-<div style='text-align:center;color:#6b7280;font-size:1.0em;'>
-    © 2025 Smart Thinking AI-Solutions Team. All rights reserved.<br>
-    Website: <a href="https://smartthinking.com.sa" target="_blank" rel="noopener noreferrer">smartthinking.com.sa</a>
-</div>
-""", unsafe_allow_html=True)
+# ========= FOOTER (compact; no extra spacing) =========
+st.markdown(
+    """
+    <hr>
+    <div class='footer'>
+        © 2025 Smart Thinking AI-Solutions Team. All rights reserved.<br>
+        Website: <a href="https://smartthinking.com.sa" target="_blank" rel="noopener noreferrer">smartthinking.com.sa</a>
+    </div>
+    """,
+    unsafe_allow_html=True,
+)