Update app.py

app.py

@@ -9,10 +9,10 @@ ASSETS   = BASE_DIR / "assets"            # -> Landing_Page/assets/
 
 # ========= CONTROLS (tweak these) =========
 HERO_LOGO_SIZE     = 160   # px (top company logo size)
-TOP_SPACER         = 100    # px (breathing room above hero; raise if the logo looks "trimmed")
+TOP_SPACER         = 100   # 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           = 80    # px (space between the two cards)
+GRID_GAP           = 80    # px (space between the cards)
 BUTTON_TEXT        = "Click to Run APP"
 OPEN_IN_NEW_TAB    = False # True = open links in a new tab
 
@@ -36,6 +36,16 @@ APP2 = {
     "bg":    "#F6FFF7",   # very light green
     "border":"#E4F9E6",   # light green border
 }
+# NEW third card (edit title/url/blurb/thumb/colors as needed)
+APP3 = {
+    "title": "ST_GeoMech_Ym",
+    "url":   "https://smart-thinking-ym.hf.space/",        # <-- replace with your Space URL
+    "thumb": ASSETS / "app3.png",           # <-- upload this image
+    "blurb": "Real-Time Static Young's Modulus Prediction",
+    "bg":    "#F9F6FF",   # very light purple
+    "border":"#EDE6FF",   # light purple border
+}
+
 LOGO_PATH = ASSETS / "logo.png"
 
 # ========= PAGE META =========
@@ -76,9 +86,9 @@ st.markdown(
       .hero h1 {{ font-size: 2.3rem; margin: .2rem 0 0; }}
       .hero p  {{
         color: #5a5f6a;
-        margin: var(--tagline-gap) auto 0;  /* top margin = small gap to H1 */
+        margin: var(--tagline-gap) auto 0;
         max-width: 720px;
-        font-style: italic;                 /* ← italic tagline */
+        font-style: italic;
       }}
 
       /* GRID: precise card width + extra space above cards */
@@ -87,10 +97,11 @@ st.markdown(
         gap: var(--grid-gap);
         justify-content: center;
         align-items: stretch;
-        flex-wrap: nowrap;
-        margin-top: var(--grid-top-space);  /* ← space above cards */
+        flex-wrap: nowrap;             /* keep three across on desktop */
+        margin-top: var(--grid-top-space);
       }}
-      @media (max-width: calc(2 * var(--card-width) + var(--grid-gap) + 64px)) {{
+      /* 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; }}
       }}
 
@@ -110,13 +121,14 @@ st.markdown(
         height: {CARD_THUMB_HEIGHT}px;
         border-radius:14px;
         border:1px solid rgba(0,0,0,.06);
-        object-fit: contain;
+        object-fit: contain;           /* show full image */
         background:#fff;
       }}
 
       .card h3 {{ margin:6px 0 2px; }}
       .card p  {{ color:#5a5f6a; min-height:30px; margin:0 8px 2px; }}
 
+      /* Light button with dark text */
       .btn {{
         display:inline-block; padding:10px 14px; border-radius:12px;
         border:1px solid #e5e7eb; text-decoration:none;
@@ -168,7 +180,8 @@ def app_card(app: dict) -> str:
         + "</div>"
     )
 
-st.markdown("<div class='grid'>" + app_card(APP1) + app_card(APP2) + "</div>", unsafe_allow_html=True)
+# 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) =========
 st.markdown(
@@ -180,4 +193,4 @@ st.markdown(
     </div>
     """,
     unsafe_allow_html=True,
-)
+)