Update app.py

app.py

@@ -7,11 +7,12 @@ import streamlit as st
 BASE_DIR = Path(__file__).parent          # -> Landing_Page/
 ASSETS   = BASE_DIR / "assets"            # -> Landing_Page/assets/
 
-# ========= CONTROLS (tweak these) =========
-HERO_LOGO_SIZE     = 160   # px (company logo size)
+# ========= CONTROLS =========
+HERO_LOGO_SIZE     = 170   # px (top company logo size)
+TOP_SPACER         = 32    # px (extra top padding so logo never looks clipped)
 CARD_THUMB_HEIGHT  = 170   # px (image height inside each card)
 BUTTON_TEXT        = "Click to Run APP"
-OPEN_IN_NEW_TAB    = False # True = open links in a new tab
+OPEN_IN_NEW_TAB    = False # True = open app in new tab
 
 # ========= BRAND / APPS =========
 COMPANY_NAME = "Smart Thinking"
@@ -35,7 +36,7 @@ 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, original layout) =========
+# ========= CSS (one-screen desktop, logo not “trimmed”) =========
 st.markdown(
     f"""
     <style>
@@ -45,58 +46,56 @@ st.markdown(
         max-width: 1120px;
         min-height: 100vh;
         display: flex; flex-direction: column;
-        justify-content: center;           /* center vertically on desktop */
-        padding-top: 14px !important;
+        justify-content: center;                 /* keep in-viewport on desktops */
+        padding-top: {TOP_SPACER}px !important;  /* <-- gives the logo breathing room */
         padding-bottom: 10px !important;
       }}
 
       /* HERO */
-      .hero {{ text-align:center; margin: 10px 0 16px; }}
+      .hero {{ text-align:center; margin: 4px 0 18px; }}
       .hero img {{
         width: {HERO_LOGO_SIZE}px; max-width: 95vw; height: auto;
-        display:block; margin: 10px auto 6px;   /* top margin avoids visual "trim" */
+        display:block; margin: 8px auto 8px;     /* no top clipping */
         filter: drop-shadow(0 2px 8px rgba(0,0,0,.12));
       }}
       .hero h1 {{ font-size: 2.3rem; margin: .6rem 0 .2rem; }}
       .hero p  {{ color: #5a5f6a; margin: 0 auto; max-width: 720px; }}
 
-      /* CARDS GRID: keep 2 columns on desktop */
+      /* Two-card grid on desktop, stack on small screens */
       .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 {{
-        background: #fff; border-radius: 16px; padding: 16px;
-        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;
+        background:#fff; border-radius:16px; padding:16px;
+        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;
       }}
       .card:hover {{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }}
 
       .thumb {{
         width: 100%;
         height: {CARD_THUMB_HEIGHT}px;
-        border-radius: 14px;
-        border: 1px solid rgba(0,0,0,.06);
-        object-fit: contain;              /* show full image (no crop) */
-        background: #fff;
+        border-radius:14px;
+        border:1px solid rgba(0,0,0,.06);
+        object-fit: contain;       /* show full logo/image, no cropping */
+        background:#fff;
       }}
 
-      .card h3 {{ margin: 12px 0 6px; }}
-      .card p  {{ color: #5a5f6a; min-height: 36px; margin-bottom: 10px; }}
+      .card h3 {{ margin:12px 0 6px; }}
+      .card p  {{ color:#5a5f6a; min-height:36px; margin-bottom:10px; }}
 
       /* 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;
+        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: 6px; }}
     </style>
     """,
     unsafe_allow_html=True,
@@ -114,10 +113,9 @@ 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)}" />'
-    # 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 (logo → name → tagline) =========
+# ========= HERO =========
 st.markdown(
     '<div class="hero">'
     + (img_tag(LOGO_PATH, "logo", "") if LOGO_PATH.exists() else "")
@@ -127,7 +125,7 @@ st.markdown(
     unsafe_allow_html=True,
 )
 
-# ========= CARD HTML (compact strings to avoid markdown code-blocks) =========
+# ========= CARDS =========
 def app_card(app: dict) -> str:
     target = "_blank" if OPEN_IN_NEW_TAB else "_self"
     return (
@@ -139,10 +137,9 @@ def app_card(app: dict) -> str:
         + "</div>"
     )
 
-grid_html = "<div class='grid'>" + app_card(APP1) + app_card(APP2) + "</div>"
-st.markdown(grid_html, unsafe_allow_html=True)
+st.markdown("<div class='grid'>" + app_card(APP1) + app_card(APP2) + "</div>", unsafe_allow_html=True)
 
-# ========= Footer (as requested) =========
+# ========= FOOTER =========
 st.markdown("""
 <br><br><br>
 <hr>
@@ -150,4 +147,4 @@ st.markdown("""
     © 2025 Smart Thinking AI-Solutions Team. All rights reserved.<br>
     Contact: <a href="mailto:smartthinking@smartthinking.com.sa">smartthinking@smartthinking.com.sa</a>
 </div>
-""", unsafe_allow_html=True)
+""", unsafe_allow_html=True)