Update page_files/Home.py

page_files/Home.py

@@ -79,17 +79,24 @@ st.markdown("""
 st.markdown("""
 <style>
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
+
 /* Hide default Streamlit chrome */
 .block-container { padding: 0 !important; max-width: 100% !important; background: #fff !important;}
 [data-testid="stToolbar"],
 [data-testid="stDecoration"],
 [data-testid="stHeader"] { display: none !important; }
+
+
+
+
+
 /* ── Search row ── */
 /* Only target the search bar's horizontal block, not all columns */
 .st-emotion-cache-y1l7l5 .st-emotion-cache-1permvm {
     gap: 0 !important;
     align-items: stretch !important;
 }
+
 .st-emotion-cache-16s2yzk button {
     background: #f2f6f4 !important;
     border: 1.5px solid #d0d8d4 !important;
@@ -104,6 +111,7 @@ st.markdown("""
     white-space: nowrap !important;
     box-shadow: none !important;
 }
+
 .st-emotion-cache-4dubyl [data-baseweb="input"] {
     background: #000 !important;
     height: 46px !important;
@@ -125,7 +133,9 @@ st.markdown("""
     box-shadow: none !important;
     padding-left: 18px !important;
 }
+
 .st-emotion-cache-4dubyl > div {
+
     height: 46px !important;
 }
 .st-emotion-cache-4dubyl input::placeholder {
@@ -145,6 +155,7 @@ st.markdown("""
     padding: 0 28px !important;
     box-shadow: none !important;
 }
+
 .st-key-view_all_btn button {
     background: transparent !important;
     border: none !important;
@@ -172,47 +183,11 @@ st.markdown("""
     margin-bottom: 14px;
     font-family: 'DM Sans', sans-serif;
 }
+
 </style>
 """, unsafe_allow_html=True)
 
 
-
-# Card click navigation handler
-_nav = st.query_params.get("nav", None)
-if _nav == "upload":
-    st.query_params.clear()
-    st.switch_page("page_files/Upload_Data.py")
-elif _nav == "search":
-    st.query_params.clear()
-    st.switch_page("page_files/Categorized_Search.py")
-
-# PostMessage listener for iframe card clicks
-components.html("""
-<script>
-window.addEventListener('message', function(e) {
-    if (e.data && e.data.type === 'streamlit:setComponentValue') {
-        // Write to a hidden input Streamlit can read via query params
-        const val = e.data.value;
-        window.parent.location.href = window.parent.location.href.split('?')[0] + '?card=' + val;
-    }
-});
-</script>
-""", height=0)
-
-# Check query param for card navigation
-import urllib.parse
-try:
-    _qp = st.query_params
-    if "card" in _qp:
-        _card_val = _qp["card"]
-        st.query_params.clear()
-        if _card_val == "upload":
-            st.switch_page("page_files/Upload_Data.py")
-        elif _card_val == "search":
-            st.switch_page("page_files/Categorized_Search.py")
-except Exception:
-    pass
-
 #  Helper 
 def go_categorized(material=None, search=None):
     if material:
@@ -248,6 +223,7 @@ components.html(f"""
 <style>
 *, *::before, *::after {{ box-sizing: border-box; margin: 0; padding: 0; }}
 body {{ font-family: 'DM Sans', sans-serif; background: #f7f7f5; color: #1a2e26; overflow-x: hidden; }}
+
 /*  ANIMATION SECTION  */
 .anim-section {{
     background: #000;
@@ -263,6 +239,7 @@ body {{ font-family: 'DM Sans', sans-serif; background: #f7f7f5; color: #1a2e26;
     display: flex; align-items: center;
     justify-content: space-between; padding: 0 40px;
 }}
+
 /* MAG GLASS */
 .mag-wrap {{ position: relative; width: 100px; display: flex; flex-direction: column; align-items: center; }}
 .mag-label {{ font-size: 0.65rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #4a7a6a; margin-bottom: 10px; }}
@@ -273,6 +250,7 @@ body {{ font-family: 'DM Sans', sans-serif; background: #f7f7f5; color: #1a2e26;
 .mag-scan {{ opacity: 0; transition: opacity 0.3s ease 0.8s; }}
 .mag-wrap.active .mag-scan {{ opacity: 1; animation: scanMove 1.2s ease-in-out infinite 0.8s; }}
 @keyframes scanMove {{ 0% {{ transform:translateY(-14px);opacity:.8; }} 50% {{ transform:translateY(0);opacity:1; }} 100% {{ transform:translateY(14px);opacity:.8; }} }}
+
 /* BUBBLES */
 .bubble {{ position:absolute; border-radius:50%; background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.6),rgba(80,160,255,.25)); border:1px solid rgba(100,180,255,.4); opacity:0; pointer-events:none; backdrop-filter:blur(2px); }}
 .b1 {{ width:18px;height:18px;left:108px;bottom:155px; }}
@@ -293,6 +271,7 @@ body {{ font-family: 'DM Sans', sans-serif; background: #f7f7f5; color: #1a2e26;
 @keyframes floatBubble4 {{ 0% {{ opacity:0;transform:translate(0,0) scale(.3); }} 20% {{ opacity:1;transform:translate(-8px,-35px) scale(1); }} 65% {{ opacity:.8;transform:translate(105px,-80px) scale(.8); }} 88% {{ opacity:.3;transform:translate(255px,-50px) scale(.4); }} 100% {{ opacity:0;transform:translate(320px,-20px) scale(.1); }} }}
 @keyframes floatBubble5 {{ 0% {{ opacity:0;transform:translate(0,0) scale(.4); }} 15% {{ opacity:1;transform:translate(3px,-22px) scale(1); }} 58% {{ opacity:.9;transform:translate(115px,-60px) scale(.88); }} 83% {{ opacity:.45;transform:translate(270px,-35px) scale(.55); }} 100% {{ opacity:0;transform:translate(335px,-12px) scale(.2); }} }}
 @keyframes floatBubble6 {{ 0% {{ opacity:0;transform:translate(0,0) scale(.25); }} 20% {{ opacity:1;transform:translate(-3px,-40px) scale(1); }} 62% {{ opacity:.7;transform:translate(100px,-85px) scale(.75); }} 85% {{ opacity:.25;transform:translate(250px,-55px) scale(.35); }} 100% {{ opacity:0;transform:translate(318px,-22px) scale(.1); }} }}
+
 /* DATABASE */
 .db-wrap {{ position:relative;width:130px;display:flex;flex-direction:column;align-items:center; }}
 .db-label {{ font-size:.65rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#4a7a6a;margin-bottom:10px; }}
@@ -301,6 +280,7 @@ body {{ font-family: 'DM Sans', sans-serif; background: #f7f7f5; color: #1a2e26;
 .anim-stage.active .cyl-right {{ opacity:1;transition-delay:2.2s; }}
 .anim-stage.active .cyl-front {{ opacity:1;transition-delay:2.4s;animation:frontPulse 2.4s ease-in-out infinite 2.8s; }}
 @keyframes frontPulse {{ 0%,100% {{ filter:brightness(1); }} 50% {{ filter:brightness(1.2); }} }}
+
 /* CAPTION */
 .anim-caption {{ margin-top:48px;display:flex;gap:40px;align-items:center; }}
 .anim-step {{ display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease; }}
@@ -310,6 +290,7 @@ body {{ font-family: 'DM Sans', sans-serif; background: #f7f7f5; color: #1a2e26;
 .step-text {{ font-size:.78rem;color:#5a8a7a;font-weight:500; }}
 </style>
 </head><body>
+
 <section class="anim-section">
     <h2 class="anim-title">From Experiment to Database</h2>
     <div class="anim-stage" id="animStage">
@@ -401,6 +382,7 @@ body {{ font-family: 'DM Sans', sans-serif; background: #f7f7f5; color: #1a2e26;
         <div class="anim-step"><span class="step-text">Stored in AIM</span></div>
     </div>
 </section>
+
 <script>
 const stage = document.getElementById('animStage');
 const magWrap = document.getElementById('magWrap');
@@ -418,7 +400,39 @@ observer.observe(document.querySelector('.anim-section'));
 </body></html>
 """, height=700, scrolling=False)
 
+# ══════════════════════════════════════════════════════════════════════════════
+# 2.  HERO , heading + description (static HTML)
+# ══════════════════════════════════════════════════════════════════════════════
+st.markdown("""
+<style>
+.aim-hero-text {
+    background: #fff;
+    text-align: center;
+    padding: 64px 40px 24px;
+    border-bottom: none;
+}
+.aim-hero-text h1 {
+    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;
+}
+.aim-hero-text p {
+    color: #5a6b65; font-size: 1rem; line-height: 1.65;
+    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"""
@@ -519,92 +533,153 @@ st.markdown("""
 
 
 # Showcase section - Databricks style
-def _build_showcase_html(extract_b64, search_b64):
-    left = (
-        "<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>"
-    )
-    extract_card = (
-        "<div class=\"s-card\" onclick=\"window.parent.location.href='?nav=upload'\">"
-        "<img class=\"s-card-img\" src=\"" + extract_b64 + "\" 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 &#x2192;</span>"
-        "</div></div>"
-    )
-    search_card = (
-        "<div class=\"s-card\" onclick=\"window.parent.location.href='?nav=search'\">"
-        "<img class=\"s-card-img\" src=\"" + search_b64 + "\" 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 &#x2192;</span>"
-        "</div></div>"
-    )
-    css = (
-        "<style>"
-        "*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}"
-        "body{font-family:'DM Sans',sans-serif;background:#fff;}"
-        ".showcase-wrap{display:flex;align-items:flex-start;gap:48px;padding:64px 60px;background:#fff;}"
-        ".showcase-left{flex:0 0 280px;padding-top:16px;}"
-        ".showcase-label{font-size:.68rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#8ACAFF;margin-bottom:14px;}"
-        ".showcase-heading{font-size:2rem;font-weight:800;color:#0f1f1a;letter-spacing:-1px;line-height:1.15;margin-bottom:16px;}"
-        ".showcase-sub{color:#5a6b65;font-size:.93rem;line-height:1.7;}"
-        ".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,.10);display:flex;flex-direction:column;"
-        "cursor:pointer;transition:box-shadow .2s,border-color .2s,transform .2s;}"
-        ".s-card:hover{box-shadow:0 8px 32px rgba(138,202,255,.18);border-color:#8ACAFF;transform:translateY(-3px);}"
-        ".s-card-img{width:100%;height:220px;object-fit:contain;object-position:top center;"
-        "display:block;background:#fff;border-bottom:1px solid #1e3a30;}"
-        ".s-card-body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column;}"
-        ".s-card-title{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:8px;}"
-        ".s-card-desc{font-size:.83rem;color:#7a9e8f;line-height:1.6;flex:1;margin-bottom:16px;}"
-        ".s-card-link{font-size:.83rem;font-weight:600;color:#8ACAFF;}"
-        "</style>"
-    )
-    return (
-        "<!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\">"
-        + css +
-        "</head><body>"
-        "<div class=\"showcase-wrap\">"
-        + left +
-        "<div class=\"showcase-cards\">"
-        + extract_card + search_card +
-        "</div></div>"
-        "</body></html>"
-    )
+# 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")
 
+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; }}
 
-# Hidden Streamlit buttons wired to the card clicks via JS
-_btn_col1, _btn_col2 = st.columns(2)
-with _btn_col1:
-    if st.button("Go to Extract Data", key="_nav_upload", help="", use_container_width=True):
-        st.switch_page("page_files/Upload_Data.py")
-with _btn_col2:
-    if st.button("Go to Search", key="_nav_search", help="", use_container_width=True):
-        st.switch_page("page_files/Categorized_Search.py")
+.showcase-wrap {{
+    display: flex;
+    align-items: flex-start;
+    gap: 48px;
+    padding: 64px 60px 64px;
+    background: #fff;
+}}
 
-# Hide the nav buttons visually — they are only triggered by JS
-st.markdown("""
-<style>
-.st-key-_nav_upload, .st-key-_nav_search {
-    position: absolute !important;
-    opacity: 0 !important;
-    pointer-events: none !important;
-    height: 0 !important;
-    overflow: hidden !important;
-}
+/* 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;
+}}
+.s-card-link {{
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #8ACAFF;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}}
+.s-card-link::after {{
+    content: "\2192";
+}}
 </style>
-""", unsafe_allow_html=True)
+</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>
 
+</body></html>
+""", height=420, scrolling=False)
 
 
         
@@ -620,6 +695,7 @@ components.html(f"""
 <style>
 *, *::before, *::after {{ box-sizing: border-box; margin: 0; padding: 0; }}
 body {{ font-family: 'DM Sans', sans-serif; color: #1a2e26; }}
+
 .aim-about {{ background: #fff; padding: 60px; border-bottom: 1px solid #e8e8e4; }}
 .aim-about h2 {{ font-size: 1.65rem; font-weight: 700; color: #0f1f1a; letter-spacing: -0.5px; margin-bottom: 8px; }}
 .aim-about-sub {{ color: #6a7e77; font-size: 0.9rem; margin-bottom: 30px; }}
@@ -632,11 +708,13 @@ body {{ font-family: 'DM Sans', sans-serif; color: #1a2e26; }}
     display: flex; align-items: center; justify-content: center;
     color: #7a9e8f; font-size: 0.85rem; border: 1.5px dashed #c8d6d0;
 }}
+
 .aim-footer {{ background: #fff; border-top: 1px solid #e8e8e4; padding: 50px 60px 28px; }}
 .aim-footer-brand {{ display: flex; align-items: center; gap: 8px; font-weight: 700; color: #0f1f1a; font-size: 0.95rem; margin-bottom: 10px; }}
 .aim-footer-desc {{ font-size: 0.82rem; color: #7a8e87; line-height: 1.6; }}
 </style>
 </head><body>
+
 <section class="aim-about">
     <h2>About the Platform</h2>
     <p class="aim-about-sub">Artificially Intelligent Manufacturing Paradigm (AIM) for Composites</p>
@@ -656,6 +734,9 @@ body {{ font-family: 'DM Sans', sans-serif; color: #1a2e26; }}
         <div>{about_img_html}</div>
     </div>
 </section>
+
+
+
 </body></html>
 """, height=550, scrolling=False)
 
@@ -721,6 +802,7 @@ div[data-testid="stHorizontalBlock"]:has(.footer-nav-head) {
 .st-emotion-cache-1qeq59m:hover p {
     color: #8ACAFF !important;
 }
+
 /* copyright bar */
 .aim-footer-bottom {
     background: #fff;
@@ -730,6 +812,7 @@ div[data-testid="stHorizontalBlock"]:has(.footer-nav-head) {
     color: #a0b0aa;
     font-family: 'DM Sans', sans-serif;
 }
+
 </style>
 """, unsafe_allow_html=True)
 
@@ -762,8 +845,4 @@ with _:
     st.page_link(
         "page_files/Contact_Team.py",
         label="Contact Team",
-    )
-
-
-
-
+    )