Update app.py

app.py

@@ -3,17 +3,17 @@ from html import escape
 from pathlib import Path
 import streamlit as st
 
-# ---------- PATHS (subfolder-safe) ----------
+# ========= PATHS (subfolder-safe) =========
 BASE_DIR = Path(__file__).parent          # -> Landing_Page/
 ASSETS   = BASE_DIR / "assets"            # -> Landing_Page/assets/
 
-# ---------- CONTROLS (easy knobs) ----------
-HERO_LOGO_SIZE     = 140   # px  (company logo in the hero)
-CARD_THUMB_HEIGHT  = 180   # px  (image area inside each card)
+# ========= CONTROLS (tweak these) =========
+HERO_LOGO_SIZE     = 160   # px (company logo size)
+CARD_THUMB_HEIGHT  = 170   # px (image height inside each card)
 BUTTON_TEXT        = "Click to Run APP"
-OPEN_IN_NEW_TAB    = False # set True to open links in a new browser tab
+OPEN_IN_NEW_TAB    = False # True = open links in a new tab
 
-# ---------- CONFIG ----------
+# ========= BRAND / APPS =========
 COMPANY_NAME = "Smart Thinking"
 TAGLINE      = "We Deliver Smart AI-Based Solutions For O&G Industry"
 
@@ -31,40 +31,41 @@ APP2 = {
 }
 LOGO_PATH = ASSETS / "logo.png"
 
-# ---------- PAGE META ----------
+# ========= PAGE META =========
 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 (fit to 1 screen on desktop, center content) ----------
+# ========= CSS (one-screen desktop, original layout) =========
 st.markdown(
     f"""
     <style>
       html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
-      [data-testid="stAppViewContainer"] > .main {{
-        min-height: 100vh;
-      }}
+      [data-testid="stAppViewContainer"] > .main {{ min-height: 100vh; }}
       .block-container {{
-        max-width: 1100px;
+        max-width: 1120px;
         min-height: 100vh;
-        display: flex; flex-direction: column; justify-content: center;
-        padding-top: 12px !important; padding-bottom: 12px !important;
+        display: flex; flex-direction: column;
+        justify-content: center;           /* center vertically on desktop */
+        padding-top: 14px !important;
+        padding-bottom: 10px !important;
       }}
 
-      .hero {{ text-align:center; margin: 4px 0 16px; }}
+      /* HERO */
+      .hero {{ text-align:center; margin: 10px 0 16px; }}
       .hero img {{
         width: {HERO_LOGO_SIZE}px; max-width: 95vw; height: auto;
-        display: block; margin: 0 auto;
+        display:block; margin: 10px auto 6px;   /* top margin avoids visual "trim" */
         filter: drop-shadow(0 2px 8px rgba(0,0,0,.12));
       }}
-      .hero h1 {{ font-size: 2.2rem; margin: .75rem 0 .25rem; }}
+      .hero h1 {{ font-size: 2.3rem; margin: .6rem 0 .2rem; }}
       .hero p  {{ color: #5a5f6a; margin: 0 auto; max-width: 720px; }}
 
-      /* Cards layout: 2 columns on desktop, stack on small screens */
-      @media (min-width: 901px) {{
-        .two-cols {{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }}
-      }}
-      @media (max-width: 900px) {{
-        .two-cols {{ display: grid; grid-template-columns: 1fr; gap: 16px; }}
+      /* CARDS GRID: keep 2 columns on desktop */
+      .grid {{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }}
+      @media (max-width: 980px) {{
+        /* On small screens we allow stacking (scroll may appear) */
+        .grid {{ grid-template-columns: 1fr; }}
+        .block-container {{ justify-content: flex-start; }}
       }}
 
       .card {{
@@ -72,7 +73,7 @@ st.markdown(
         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;  /* center everything */
+        text-align: center;
       }}
       .card:hover {{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }}
 
@@ -81,27 +82,27 @@ st.markdown(
         height: {CARD_THUMB_HEIGHT}px;
         border-radius: 14px;
         border: 1px solid rgba(0,0,0,.06);
-        object-fit: contain;      /* show full image, no crop */
+        object-fit: contain;              /* show full image (no crop) */
         background: #fff;
       }}
 
       .card h3 {{ margin: 12px 0 6px; }}
       .card p  {{ color: #5a5f6a; min-height: 36px; margin-bottom: 10px; }}
 
-      /* Light button, dark text */
+      /* Light button with dark text */
       .btn {{
         display:inline-block; padding: 10px 14px; border-radius: 12px;
         border: 1px solid #e5e7eb; text-decoration:none;
         background: #f3f4f6; color: #111827; font-weight: 500;
       }}
       .btn:hover {{ background:#e5e7eb; }}
-      .footer {{ text-align:center; color:#8a9099; font-size: 0.9rem; margin-top: 8px; }}
+      .footer {{ text-align:center; color:#8a9099; font-size: 0.9rem; margin-top: 6px; }}
     </style>
     """,
     unsafe_allow_html=True,
 )
 
-# ---------- IMAGE HELPERS ----------
+# ========= IMAGE HELPERS =========
 def data_uri(path: Path) -> str | None:
     if not path.exists(): return None
     mime, _ = mimetypes.guess_type(path.name)
@@ -113,10 +114,10 @@ def img_tag(path: Path, alt: str, cls: str) -> str:
     uri = data_uri(path)
     if uri:
         return f'<img class="{cls}" src="{uri}" alt="{escape(alt)}" />'
-    # graceful placeholder
+    # Friendly placeholder if missing
     return f'<div class="{cls}" style="display:flex;align-items:center;justify-content:center;color:#50545c;background:linear-gradient(180deg,#f6f7fb,#eceff4);">{escape(alt)}</div>'
 
-# ---------- HERO ----------
+# ========= HERO (logo → name → tagline) =========
 st.markdown(
     '<div class="hero">'
     + (img_tag(LOGO_PATH, "logo", "") if LOGO_PATH.exists() else "")
@@ -126,29 +127,22 @@ st.markdown(
     unsafe_allow_html=True,
 )
 
-# ---------- CARD HTML ----------
+# ========= CARD HTML (compact strings to avoid markdown code-blocks) =========
 def app_card(app: dict) -> str:
     target = "_blank" if OPEN_IN_NEW_TAB else "_self"
-    return f"""
-    <div class="card">
-      {img_tag(app['thumb'], app['title'], "thumb")}
-      <h3>{escape(app['title'])}</h3>
-      <p>{escape(app['blurb'])}</p>
-      <a class="btn" href="{escape(app['url'])}" target="{target}">{escape(BUTTON_TEXT)}</a>
-    </div>
-    """
-
-# Render as two separate markdown blocks (prevents partial escaping issues)
-left  = app_card(APP1)
-right = app_card(APP2)
-
-st.markdown('<div class="two-cols">', unsafe_allow_html=True)
-st.markdown(left,  unsafe_allow_html=True)
-st.markdown(right, unsafe_allow_html=True)
-st.markdown('</div>', unsafe_allow_html=True)
-
-# Footer
-# =========================
+    return (
+        "<div class='card'>"
+        + img_tag(app["thumb"], app["title"], "thumb")
+        + f"<h3>{escape(app['title'])}</h3>"
+        + f"<p>{escape(app['blurb'])}</p>"
+        + f"<a class='btn' href='{escape(app['url'])}' target='{target}'>{escape(BUTTON_TEXT)}</a>"
+        + "</div>"
+    )
+
+grid_html = "<div class='grid'>" + app_card(APP1) + app_card(APP2) + "</div>"
+st.markdown(grid_html, unsafe_allow_html=True)
+
+# ========= Footer (as requested) =========
 st.markdown("""
 <br><br><br>
 <hr>