Update app.py

app.py

@@ -12,7 +12,7 @@ HERO_LOGO_SIZE     = 180   # px (top company logo size)
 TOP_SPACER         = 120   # px (breathing room above hero; raise if the logo looks "trimmed")
 CARD_WIDTH         = 300   # px (fixed width per card on desktop)
 CARD_THUMB_HEIGHT  = 180   # px (image area inside each card)
-GRID_GAP           = 100    # px (space between the cards)
+GRID_GAP           = 100   # px (space between the cards)
 BUTTON_TEXT        = "Click to Run APP"
 OPEN_IN_NEW_TAB    = False # True = open links in a new tab
 
@@ -26,7 +26,7 @@ APP1 = {
     "thumb": ASSETS / "app1.png",
     "blurb": "Real-Time UCS Prediction",
     "bg":    "#F7FBFF",   # very light blue
-    "border":"#713F12",   # light blue border
+    "border":"#713F12",   # accent border
 }
 APP2 = {
     "title": "ST_Log_Ym",
@@ -34,16 +34,15 @@ APP2 = {
     "thumb": ASSETS / "app2.png",
     "blurb": "Real-Time Static Young's Modulus Prediction",
     "bg":    "#F6FFF7",   # very light green
-    "border":"#713F12",   # light green border
+    "border":"#713F12",
 }
-# NEW third card (edit title/url/blurb/thumb/colors as needed)
 APP3 = {
     "title": "ST_Third_App",
     "url":   "https://example.com/",        # <-- replace with your Space URL
     "thumb": ASSETS / "app3.png",           # <-- upload this image
     "blurb": "Describe your third app here",
     "bg":    "#F9F6FF",   # very light purple
-    "border":"#713F12",   # light purple border
+    "border":"#713F12",
 }
 
 LOGO_PATH = ASSETS / "logo.png"
@@ -52,7 +51,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 (fits one screen on desktop; no blank area under cards) =========
+# ========= CSS (fits one screen on desktop; centered titles & buttons) =========
 st.markdown(
     f"""
     <style>
@@ -82,7 +81,6 @@ st.markdown(
         display:block; margin: 0 auto 8px;
         filter: drop-shadow(0 2px 8px rgba(0,0,0,.12));
       }}
-      /* Make tagline closer to the company name */
       .hero h1 {{ font-size: 2.3rem; margin: .2rem 0 0; }}
       .hero p  {{
         color: #5a5f6a;
@@ -91,7 +89,7 @@ st.markdown(
         font-style: italic;
       }}
 
-      /* GRID: precise card width + extra space above cards */
+      /* GRID */
       .grid {{
         display: flex;
         gap: var(--grid-gap);
@@ -100,7 +98,6 @@ st.markdown(
         flex-wrap: nowrap;             /* keep three across on desktop */
         margin-top: var(--grid-top-space);
       }}
-      /* When viewport too narrow for 3-up, allow wrapping */
       @media (max-width: calc(3 * var(--card-width) + 2 * var(--grid-gap) + 64px)) {{
         .grid {{ flex-wrap: wrap; }}
       }}
@@ -113,6 +110,7 @@ st.markdown(
         box-shadow:0 4px 18px rgba(0,0,0,.05);
         transition:transform .12s ease, box-shadow .12s ease;
         text-align:center; display:flex; flex-direction:column; gap:10px;
+        align-items: center;                  /* center children horizontally */
       }}
       .card:hover {{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }}
 
@@ -125,14 +123,19 @@ st.markdown(
         background:#fff;
       }}
 
-      .card h3 {{ margin:6px 0 2px; }}
-      .card p  {{ color:#5a5f6a; min-height:30px; margin:0 8px 2px; }}
+      .card h3, .card p {{
+        text-align: center;            /* center text */
+        width: 100%;
+      }}
+      .card p {{ color:#5a5f6a; min-height:30px; margin:0 8px 2px; }}
 
-      /* Light button with dark text */
+      /* Light button with dark text — centered */
       .btn {{
         display:inline-block; padding:10px 14px; border-radius:12px;
         border:1px solid #e5e7eb; text-decoration:none;
         background:#f3f4f6; color:#111827; font-weight:500;
+        margin: 2px auto 0;            /* center via auto margins */
+        align-self: center;            /* and ensure flex centering */
       }}
       .btn:hover {{ background:#e5e7eb; }}
 
@@ -180,10 +183,9 @@ def app_card(app: dict) -> str:
         + "</div>"
     )
 
-# Render 3 cards side-by-side
 st.markdown("<div class='grid'>" + app_card(APP1) + app_card(APP2) + app_card(APP3) + "</div>", unsafe_allow_html=True)
 
-# ========= FOOTER (compact; no extra spacing) =========
+# ========= FOOTER =========
 st.markdown(
     """
     <hr>