Update page_files/Home.py

page_files/Home.py

@@ -56,6 +56,8 @@ def img_to_b64(path):
 
 home_img = img_to_b64("images/Home.png")
 logo_img = img_to_b64("logo.png")
+extract_card_img = img_to_b64("extract_card_img.png")
+search_card_img  = img_to_b64("search_card_img.png")
 
 st.markdown("""
   <style>
@@ -168,6 +170,20 @@ st.markdown("""
     text-decoration: underline !important;
     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;
@@ -429,6 +445,34 @@ st.markdown("""
 # ══════════════════════════════════════════════════════════════════════════════
 # 4.  STATS (static HTML)
 # ══════════════════════════════════════════════════════════════════════════════
+st.markdown(f"""
+<style>
+.aim-stats {{
+    background: #f7f7f5; border-bottom: 1px solid #e4e8e5;
+    display: flex; justify-content: center;
+}} 
+.aim-stat {{
+    text-align: center; padding: 34px 56px;
+    border-right: 1px solid #e4e8e5;
+}}
+.aim-stat:last-child {{ border-right: none; }}
+.aim-stat-num {{
+    font-family: 'DM Sans', sans-serif;
+    font-size: 2.1rem; font-weight: 800;
+    color: #8ACAFF; line-height: 1; margin-bottom: 6px;
+}}
+.aim-stat-label {{
+    font-size: 0.68rem; font-weight: 600;
+    letter-spacing: 1.4px; color: #7a8e87; text-transform: uppercase;
+}}
+</style>
+<div class="aim-stats">
+    <div class="aim-stat"><div class="aim-stat-num">3</div><div class="aim-stat-label">Material Classes</div></div>
+    <div class="aim-stat"><div class="aim-stat-num">{prop_count}</div><div class="aim-stat-label">Properties Tracked</div></div>
+    <div class="aim-stat"><div class="aim-stat-num">8</div><div class="aim-stat-label">Research Teams</div></div>
+    <div class="aim-stat"><div class="aim-stat-num">2</div><div class="aim-stat-label">Universities</div></div>
+</div>
+""", unsafe_allow_html=True)
 
 
 # ══════════════════════════════════════════════════════════════════════════════
@@ -481,7 +525,6 @@ st.markdown("""
     text-transform: uppercase !important;
 }
 .cards-section-wrap h2 {
-    text-align: center;
     font-family: 'DM Sans', sans-serif !important;
     font-size: 1.4rem !important;
     font-weight: 700 !important;
@@ -489,7 +532,6 @@ st.markdown("""
     margin-bottom: 6px !important;
 }
 .cards-section-wrap p {
-    text-align: center;
     color: #5a6b65 !important;
     font-size: 0.9rem !important;
     line-height: 1.6 !important;
@@ -502,61 +544,116 @@ st.markdown("""
 
 st.markdown("<div style='padding: 64px 0 0 0;'></div>", unsafe_allow_html=True)
 
+# ── Databricks-style: left text + right stacked cards ──────────────────────
 st.markdown("""
-    <div class="cards-section-wrap">
-        <h2>Quick Links</h2>
-        <p>Open the pages you need most.</p>
+<style>
+/* wrapper for the showcase section */
+.showcase-section {
+    background: #fff;
+    padding: 0 40px 48px;
+}
+/* Left heading text */
+.showcase-heading {
+    font-family: 'DM Sans', sans-serif;
+    font-size: clamp(1.6rem, 3vw, 2.3rem);
+    font-weight: 800;
+    color: #0f1f1a;
+    letter-spacing: -1px;
+    line-height: 1.2;
+    margin-bottom: 14px;
+}
+.showcase-sub {
+    font-family: 'DM Sans', sans-serif;
+    color: #5a6b65;
+    font-size: 0.95rem;
+    line-height: 1.65;
+}
+/* Image cards on the right */
+.aim-showcase-card {
+    border-radius: 14px;
+    overflow: hidden;
+    border: 1.5px solid #e4e8e5;
+    margin-bottom: 18px;
+    background: #f7f8f9;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+    cursor: pointer;
+    transition: box-shadow 0.2s, border-color 0.2s;
+}
+.aim-showcase-card:hover {
+    box-shadow: 0 6px 24px rgba(0,0,0,0.11);
+    border-color: #8ACAFF;
+}
+.aim-showcase-card img {
+    width: 100%;
+    display: block;
+    object-fit: cover;
+    max-height: 200px;
+}
+.aim-showcase-card-body {
+    padding: 16px 20px;
+}
+.aim-showcase-card-title {
+    font-family: 'DM Sans', sans-serif;
+    font-size: 1rem;
+    font-weight: 700;
+    color: #0f1f1a;
+    margin-bottom: 4px;
+}
+.aim-showcase-card-tag {
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 1.2px;
+    color: #8ACAFF;
+    text-transform: uppercase;
+}
+</style>
+""", unsafe_allow_html=True)
+
+left_col, right_col = st.columns([1, 1.2], gap="large")
+
+with left_col:
+    st.markdown("""
+    <div class="showcase-section" style="padding-top: 32px;">
+        <div class="showcase-heading">Accelerate Your<br>Composites Research</div>
+        <p class="showcase-sub">Access a centralized, open-source database for experimental composite
+        material properties. Polymer, fiber, and composite datasets, all in one place.</p>
     </div>
     """, unsafe_allow_html=True)
 
-quick_cards = [
-    ("Search", "Data Page", "page_files/Categorized_Search.py", "search", "🔎"),
-    ("Extract Data", "Platform", "page_files/Upload_Data.py", "about", "📋"),
-    
-]
+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>
+    """, unsafe_allow_html=True)
+    if st.button("Go to Extract Data →", key="showcase_extract_btn", use_container_width=True):
+        st.switch_page("page_files/Upload_Data.py")
 
-cols = st.columns(3, gap="large")
-for col, (title, tag, target_page, key_suffix, badge) in zip(cols, quick_cards):
-    with col:
-        if st.button(
-            f"{badge}\n\n{title}\n\n{tag}",
-            key=f"quick_{key_suffix}_page",
-            use_container_width=True,
-        ):
-            st.switch_page(target_page)
+    # 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>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+    if st.button("Go to Search →", key="showcase_search_btn", use_container_width=True):
+        st.switch_page("page_files/Categorized_Search.py")
 
-st.markdown("<div style='background:#fff; padding: 24px 0; border-bottom: 1px solid #e8e8e4;'></div>", unsafe_allow_html=True)
+st.markdown("<div style='background:#fff; padding: 12px 0; border-bottom: 1px solid #e8e8e4;'></div>", unsafe_allow_html=True)
 
         
 
-st.markdown(f"""
-<style>
-.aim-stats {{
-    background: #f7f7f5; border-bottom: 1px solid #e4e8e5;
-    display: flex; justify-content: center;
-}} 
-.aim-stat {{
-    text-align: center; padding: 34px 56px;
-    border-right: 1px solid #e4e8e5;
-}}
-.aim-stat:last-child {{ border-right: none; }}
-.aim-stat-num {{
-    font-family: 'DM Sans', sans-serif;
-    font-size: 2.1rem; font-weight: 800;
-    color: #8ACAFF; line-height: 1; margin-bottom: 6px;
-}}
-.aim-stat-label {{
-    font-size: 0.68rem; font-weight: 600;
-    letter-spacing: 1.4px; color: #7a8e87; text-transform: uppercase;
-}}
-</style>
-<div class="aim-stats">
-    <div class="aim-stat"><div class="aim-stat-num">3</div><div class="aim-stat-label">Material Classes</div></div>
-    <div class="aim-stat"><div class="aim-stat-num">{prop_count}</div><div class="aim-stat-label">Properties Tracked</div></div>
-    <div class="aim-stat"><div class="aim-stat-num">8</div><div class="aim-stat-label">Research Teams</div></div>
-    <div class="aim-stat"><div class="aim-stat-num">2</div><div class="aim-stat-label">Universities</div></div>
-</div>
-""", unsafe_allow_html=True)
 
 # ══════════════════════════════════════════════════════════════════════════════
 # 6.  ABOUT + FOOTER (static HTML)
@@ -718,7 +815,4 @@ with _:
     st.page_link(
         "page_files/Contact_Team.py",
         label="Contact Team",
-    )
-
-
-
+    )