Update page_files/Home.py

page_files/Home.py

@@ -171,19 +171,6 @@ st.markdown("""
     background: transparent !important;
 }
 /* Showcase nav buttons */
-.st-key-showcase_extract_btn button,
-.st-key-showcase_search_btn button {
-    background: transparent !important;
-    border: none !important;
-    color: #8ACAFF !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.82rem !important;
-    font-weight: 600 !important;
-    padding: 2px 0 12px !important;
-    height: auto !important;
-    box-shadow: none !important;
-    text-align: left !important;
-}
 .footer-nav-head {
     font-size: 0.68rem;
     font-weight: 700;
@@ -622,32 +609,98 @@ with left_col:
     """, unsafe_allow_html=True)
 
 with right_col:
-    # Extract Data card
-    extract_img_tag = f"<img src='{extract_card_img}' alt='Extract Data'/>" if extract_card_img else ""
-    st.markdown(f"""
-    <div class="aim-showcase-card">
-        {extract_img_tag}
-        <div class="aim-showcase-card-body">
-            <div class="aim-showcase-card-title">Extract Data</div>
-            <div class="aim-showcase-card-tag">Platform</div>
-        </div>
-    </div>
+    # ── Extract Data card ──
+    st.markdown("""
+    <style>
+    /* card wrapper used by both showcase cards */
+    .aim-showcase-card-wrap {
+        border-radius: 14px;
+        overflow: hidden;
+        border: 1.5px solid #e4e8e5;
+        margin-bottom: 4px;
+        background: #f7f8f9;
+        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+    }
+    .aim-showcase-card-wrap:hover {
+        box-shadow: 0 6px 24px rgba(0,0,0,0.11);
+        border-color: #8ACAFF;
+    }
+    /* Make st.image inside card flush */
+    .aim-showcase-card-wrap [data-testid="stImage"] img {
+        border-radius: 0 !important;
+        width: 100% !important;
+        object-fit: cover !important;
+        max-height: 190px !important;
+        display: block !important;
+    }
+    .aim-showcase-card-wrap [data-testid="stImage"] {
+        margin: 0 !important;
+        padding: 0 !important;
+        line-height: 0 !important;
+    }
+    .aim-card-footer {
+        padding: 14px 18px 16px;
+        background: #f7f8f9;
+    }
+    .aim-card-footer-title {
+        font-family: 'DM Sans', sans-serif;
+        font-size: 1rem;
+        font-weight: 700;
+        color: #0f1f1a;
+        margin-bottom: 3px;
+    }
+    .aim-card-footer-tag {
+        font-family: 'DM Sans', sans-serif;
+        font-size: 0.7rem;
+        font-weight: 700;
+        letter-spacing: 1.2px;
+        color: #8ACAFF;
+        text-transform: uppercase;
+    }
+    /* Nav buttons */
+    .st-key-showcase_extract_btn button,
+    .st-key-showcase_search_btn button {
+        background: transparent !important;
+        border: none !important;
+        color: #8ACAFF !important;
+        font-family: 'DM Sans', sans-serif !important;
+        font-size: 0.82rem !important;
+        font-weight: 600 !important;
+        padding: 0 0 18px 0 !important;
+        height: auto !important;
+        box-shadow: none !important;
+        text-align: left !important;
+    }
+    </style>
     """, unsafe_allow_html=True)
-    if st.button("Go to Extract Data →", key="showcase_extract_btn", use_container_width=True):
+
+    with st.container():
+        st.markdown('<div class="aim-showcase-card-wrap">', unsafe_allow_html=True)
+        if extract_card_img:
+            st.image("extract_card_img.png", use_container_width=True)
+        st.markdown("""
+        <div class="aim-card-footer">
+            <div class="aim-card-footer-title">Extract Data</div>
+            <div class="aim-card-footer-tag">Platform</div>
+        </div>
+        </div>
+        """, unsafe_allow_html=True)
+    if st.button("Go to Extract Data →", key="showcase_extract_btn"):
         st.switch_page("page_files/Upload_Data.py")
 
-    # Search card
-    search_img_tag = f"<img src='{search_card_img}' alt='Search'/>" if search_card_img else ""
-    st.markdown(f"""
-    <div class="aim-showcase-card">
-        {search_img_tag}
-        <div class="aim-showcase-card-body">
-            <div class="aim-showcase-card-title">Search</div>
-            <div class="aim-showcase-card-tag">Data Page</div>
+    # ── Search card ──
+    with st.container():
+        st.markdown('<div class="aim-showcase-card-wrap">', unsafe_allow_html=True)
+        if search_card_img:
+            st.image("search_card_img.png", use_container_width=True)
+        st.markdown("""
+        <div class="aim-card-footer">
+            <div class="aim-card-footer-title">Search</div>
+            <div class="aim-card-footer-tag">Data Page</div>
         </div>
-    </div>
-    """, unsafe_allow_html=True)
-    if st.button("Go to Search →", key="showcase_search_btn", use_container_width=True):
+        </div>
+        """, unsafe_allow_html=True)
+    if st.button("Go to Search →", key="showcase_search_btn"):
         st.switch_page("page_files/Categorized_Search.py")
 
 st.markdown("<div style='background:#fff; padding: 12px 0; border-bottom: 1px solid #e8e8e4;'></div>", unsafe_allow_html=True)