Update page_files/Home.py

page_files/Home.py

@@ -2,10 +2,8 @@ import streamlit as st
 import streamlit.components.v1 as components
 from pathlib import Path
 import base64
-from streamlit_card import card
 from data_loader import get_all_sections
 import random
-from data_loader import get_all_sections
 import re
 
 
@@ -54,13 +52,8 @@ def img_to_b64(path):
         return ""
 
 
-_HERE = Path(__file__).parent        # page_files/
-_ROOT = _HERE.parent                 # project root
-
-home_img         = img_to_b64(str(_ROOT / "Home.png"))
-logo_img         = img_to_b64(str(_ROOT / "logo.png"))
-extract_card_img = img_to_b64(str(_ROOT / "extract_card_img.png"))
-search_card_img  = img_to_b64(str(_ROOT / "search_card_img.png"))
+home_img = img_to_b64("images/Home.png")
+logo_img = img_to_b64("logo.png")
 
 st.markdown("""
   <style>
@@ -173,7 +166,6 @@ st.markdown("""
     text-decoration: underline !important;
     background: transparent !important;
 }
-/* Showcase nav buttons */
 .footer-nav-head {
     font-size: 0.68rem;
     font-weight: 700;
@@ -423,46 +415,10 @@ st.markdown("""
     max-width: 500px; margin: 0 auto 28px;
 }
 </style>
-<div class="aim-hero-text">
-    <h1>Accelerate Your Composites Research</h1>
-    <p>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)
 
 
 
-# ══════════════════════════════════════════════════════════════════════════════
-# 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)
 
 
 # ══════════════════════════════════════════════════════════════════════════════
@@ -470,220 +426,139 @@ st.markdown(f"""
 # ══════════════════════════════════════════════════════════════════════════════
 st.markdown("""
 <style>
-/* Card buttons - scoped to cards horizontal block only */
+/* Card buttons */
 .st-emotion-cache-r3ry0f button {
     background: #fff !important;
-    border: 1.5px solid #e4e8e5 !important;
-    border-radius: 12px !important;
-    padding: 24px 20px !important;
-    height: 160px !important;
+    border: 1.5px solid #e8eceb !important;
+    border-radius: 16px !important;
+    padding: 28px 24px !important;
+    height: 180px !important;
     width: 100% !important;
     text-align: left !important;
     white-space: pre-wrap !important;
     line-height: 1.5 !important;
-    box-shadow: none !important;
-    transition: box-shadow 0.2s, border-color 0.2s !important;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
+    transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.18s ease !important;
 }
-            
+
 .st-emotion-cache-r3ry0f button:hover {
-    border-color: #BAE1FC !important;
-    box-shadow: 0 0 0 3px rgba(186,225,252,0.25), 0 6px 22px rgba(0,0,0,0.07) !important;
+    border-color: #8ACAFF !important;
+    box-shadow: 0 0 0 3px rgba(138,202,255,0.18), 0 8px 28px rgba(0,0,0,0.09) !important;
     background: #fff !important;
+    transform: translateY(-2px) !important;
 }
+
+/* Icon badge */
 .st-emotion-cache-r3ry0f button p:first-child {
-    font-size: 1.1rem !important;
-    background: #f2f4f3 !important;
-    border-radius: 8px !important;
-    padding: 6px 8px !important;
+    font-size: 1.25rem !important;
+    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%) !important;
+    border: 1px solid #d4eaff !important;
+    border-radius: 10px !important;
+    padding: 8px 10px !important;
     display: inline-block !important;
-    margin-bottom: 12px !important;
+    margin-bottom: 16px !important;
     line-height: 1 !important;
+    box-shadow: 0 1px 3px rgba(138,202,255,0.15) !important;
 }
+
+/* Title */
 .st-emotion-cache-r3ry0f button p:nth-child(2) {
     font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.97rem !important;
+    font-size: 1.05rem !important;
     font-weight: 700 !important;
     color: #0f1f1a !important;
-    margin-bottom: 6px !important;
+    margin-bottom: 8px !important;
+    letter-spacing: -0.2px !important;
 }
+
+/* Tag label */
 .st-emotion-cache-r3ry0f button p:last-child {
     font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.7rem !important;
+    font-size: 0.65rem !important;
     font-weight: 700 !important;
-    letter-spacing: 1.2px !important;
+    letter-spacing: 1.5px !important;
     color: #8ACAFF !important;
     text-transform: uppercase !important;
 }
-.cards-section-wrap h2 {
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 1.4rem !important;
-    font-weight: 700 !important;
-    color: #0f1f1a !important;
-    margin-bottom: 6px !important;
-}
-.cards-section-wrap p {
-    color: #5a6b65 !important;
-    font-size: 0.9rem !important;
-    line-height: 1.6 !important;
-    margin-bottom: 16px !important;
-}
 </style>
 """, unsafe_allow_html=True)
 
 
+st.markdown("<div style='padding: 64px 0 0 0;'></div>", unsafe_allow_html=True)
 
-# Showcase section - Databricks style
-# Cards rendered in components.html so image+text+click all live inside one card
-_extract_img = extract_card_img
-_search_img  = search_card_img
-extract_page_link = st.page_link("page_files/Upload_Data.py")
-search_page_link = st.page_link("page_files/Categorized_Search.py")
+# st.markdown("""
+#     <div class="cards-section-wrap">
+#         <h2>Quick Links</h2>
+#         <p>Open the pages you need most.</p>
+#     </div>
+#     """, unsafe_allow_html=True)
 
-components.html(f"""
-<!DOCTYPE html><html lang="en"><head>
-<meta charset="UTF-8"/>
-<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-<style>
-*, *::before, *::after {{ box-sizing: border-box; margin: 0; padding: 0; }}
-body {{ font-family: 'DM Sans', sans-serif; background: #fff; }}
+quick_cards = [
+    ("Search", "Data Page", "page_files/Categorized_Search.py", "search", "🔎"),
+    ("Extract Data", "Platform", "page_files/Upload_Data.py", "about", "📋"),
+]
 
-.showcase-wrap {{
-    display: flex;
-    align-items: flex-start;
-    gap: 48px;
-    padding: 64px 60px 64px;
-    background: #fff;
-}}
+col1, col2 = st.columns([5, 4], gap="large")
+with col1:
+    
+    st.markdown("""
+        <div style="padding: 48px 40px 24px 0px;">
+        <h1 style="font-family:'DM Sans',sans-serif; font-size:clamp(2rem,4.5vw,3.2rem); font-weight:800; color:#0f1f1a; line-height:1.1; letter-spacing:-1.5px; margin-bottom:18px;">
+            Accelerate Your Composites Research
+        </h1>
+        <p style="color:#5a6b65; font-size:1rem; line-height:1.65; margin:0;">
+            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)
+with col2:
+    st.markdown("<div style='padding-top: 48px;'></div>", unsafe_allow_html=True)
+    cols = st.columns(2, 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)
+            
+        st.markdown("<div style='background:#fff; padding: 24px 0; border-bottom: 1px solid #e8e8e4;'></div>", unsafe_allow_html=True)
 
-/* LEFT TEXT */
-.showcase-left {{
-    flex: 0 0 320px;
-    padding-top: 16px;
-}}
-.showcase-label {{
-    font-size: 0.68rem;
-    font-weight: 700;
-    letter-spacing: 1.8px;
-    text-transform: uppercase;
-    color: #8ACAFF;
-    margin-bottom: 14px;
-}}
-.showcase-heading {{
-    font-size: clamp(1.8rem, 3vw, 2.4rem);
-    font-weight: 800;
-    color: #0f1f1a;
-    letter-spacing: -1px;
-    line-height: 1.15;
-    margin-bottom: 16px;
-}}
-.showcase-sub {{
-    color: #5a6b65;
-    font-size: 0.93rem;
-    line-height: 1.7;
-}}
+        
 
-/* RIGHT CARDS */
-.showcase-cards {{
-    flex: 1;
-    display: flex;
-    gap: 20px;
-}}
-.s-card {{
-    flex: 1;
-    border-radius: 16px;
-    overflow: hidden;
-    background: #0f1f1a;
-    border: 1.5px solid #1e3a30;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
-    text-decoration: none;
-    display: flex;
-    flex-direction: column;
-    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
-    cursor: pointer;
-}}
-.s-card:hover {{
-    box-shadow: 0 8px 32px rgba(138,202,255,0.18);
-    border-color: #8ACAFF;
-    transform: translateY(-3px);
-}}
-.s-card-img {{
-    width: 100%;
-    height: 200px;
-    object-fit: cover;
-    object-position: top left;
-    display: block;
-    border-bottom: 1px solid #1e3a30;
-}}
-.s-card-body {{
-    padding: 22px 22px 26px;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}}
-.s-card-title {{
-    font-size: 1.15rem;
-    font-weight: 700;
-    color: #fff;
-    margin-bottom: 8px;
-    letter-spacing: -0.3px;
-}}
-.s-card-desc {{
-    font-size: 0.85rem;
-    color: #7a9e8f;
-    line-height: 1.6;
-    flex: 1;
-    margin-bottom: 18px;
+# ══════════════════════════════════════════════════════════════════════════════
+# 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;
 }}
-.s-card-link {{
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: #8ACAFF;
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
+.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;
 }}
-.s-card-link::after {{
-    content: "\2192";
+.aim-stat-label {{
+    font-size: 0.68rem; font-weight: 600;
+    letter-spacing: 1.4px; color: #7a8e87; text-transform: uppercase;
 }}
 </style>
-</head><body>
-
-<div class="showcase-wrap">
-    <div class="showcase-left">
-        <div class="showcase-label">Platform Features</div>
-        <div class="showcase-heading">Accelerate Your 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>
-
-    <div class="showcase-cards">
-        <a class="s-card" href="{extract_page_link}" target="_self">
-            <img class="s-card-img" src="{_extract_img}" alt="Extract Data"/>
-            <div class="s-card-body">
-                <div class="s-card-title">Extract Data</div>
-                <p class="s-card-desc">Upload experimental datasets and extract structured material property data into the AIM database.</p>
-                <span class="s-card-link">Open platform</span>
-            </div>
-        </a>
-
-        <a class="s-card" href="{search_page_link}" target="_self">
-            <img class="s-card-img" src="{_search_img}" alt="Search"/>
-            <div class="s-card-body">
-                <div class="s-card-title">Search</div>
-                <p class="s-card-desc">Browse and filter polymer, fiber, and composite material properties across the full database.</p>
-                <span class="s-card-link">Open search</span>
-            </div>
-        </a>
-    </div>
+<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>
-
-</body></html>
-""", height=420, scrolling=False)
-
-
-        
-
+""", unsafe_allow_html=True)
 
 # ══════════════════════════════════════════════════════════════════════════════
 # 6.  ABOUT + FOOTER (static HTML)
@@ -845,4 +720,7 @@ with _:
     st.page_link(
         "page_files/Contact_Team.py",
         label="Contact Team",
-    )
+    )
+
+
+