Update page_files/Home.py

page_files/Home.py

@@ -1,722 +1,722 @@
-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
-
-
-ALL_CARDS = [
-    ("Composites",  "Material class",  "material", "Composites"),
-    ("Polymers",    "Material class",  "material", "Polymers"),
-    ("Fibers",      "Material class",  "material", "Fibers"),
-]
-
-sections = get_all_sections()
-for section in sections:
-    ALL_CARDS.append((section, "Property type", "section", section))
-
-if "visible_cards" not in st.session_state:
-    random.shuffle(ALL_CARDS)
-    st.session_state.visible_cards = ALL_CARDS[:4]  
-
-VISIBLE_CARDS = st.session_state.visible_cards 
-prop_count = len([c for c in ALL_CARDS if c[2] == "section"])
-
-def get_card_icon(title: str, card_type: str) -> str:
-    if card_type == "material":
-        icons = {"composites": "🧱", "polymers": "🔬", "fibers": "🧵"}
-        return icons.get(title.lower(), "🧱")
-    t = title.lower()
-    if "mechanical" in t: return "⚙️"
-    if "thermal" in t: return "🔥"
-    if "electrical" in t: return "⚡"
-    if "physical" in t: return "⚖️"
-    if "processing" in t: return "🔧"
-    if "optical" in t: return "🔭"
-    if "chemical" in t: return "🧪"
-    if "flammab" in t: return "🔴"
-    if "component" in t: return "🧩"
-    if "descriptive" in t: return "📋"
-    return "📋"
-
-def img_to_b64(path):
-    try:
-        ext = Path(path).suffix.lower().replace(".", "")
-        mime = "png" if ext == "png" else "jpeg"
-        with open(path, "rb") as f:
-            data = base64.b64encode(f.read()).decode()
-        return f"data:image/{mime};base64,{data}"
-    except Exception:
-        return ""
-
-
-home_img = img_to_b64("images/Home.png")
-logo_img = img_to_b64("logo.png")
-
-st.markdown("""
-  <style>
-  section[data-testid="stMain"] {
-      background: #fff !important;
-  }
-  .stApp {
-      background: #fff !important;
-  }
-  </style>
-  """, 
-  unsafe_allow_html=True
-  )
-
-#  Global style overrides 
-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;
-    border-right: none !important;
-    border-radius: 50px 0 0 50px !important;
-    color: #3a5248 !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.8rem !important;
-    font-weight: 600 !important;
-    height: 46px !important;
-    padding: 0 16px !important;
-    white-space: nowrap !important;
-    box-shadow: none !important;
-}
-
-.st-emotion-cache-4dubyl [data-baseweb="input"] {
-    background: #000 !important;
-    height: 46px !important;
-    min-height: 46px !important;
-    border-radius: 0 !important;
-    border-color: #d0d8d4 !important;
-    border-left: none !important;
-    border-right: none !important;
-}
-            
-.st-emotion-cache-4dubyl input {
-    background: #fff !important;
-    height: 46px !important;
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.92rem !important;
-    color: #000 !important;
-    box-shadow: none !important;
-    padding-left: 18px !important;
-}
-
-.st-emotion-cache-4dubyl > div {
-
-    height: 46px !important;
-}
-.st-emotion-cache-4dubyl input::placeholder {
-    color: #0f1f1a !important;
-    opacity: 0.4 !important;
-}
-.st-emotion-cache-mpgwbc button {
-    background: #8ACAFF !important;
-    border: 1.5px solid #8ACAFF !important;
-    border-left: none !important;
-    border-radius: 0 50px 50px 0 !important;
-    color: #0f1f1a !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.88rem !important;
-    font-weight: 600 !important;
-    height: 46px !important;
-    padding: 0 28px !important;
-    box-shadow: none !important;
-}
-
-.st-key-view_all_btn button {
-    background: transparent !important;
-    border: none !important;
-    color: #8ACAFF !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.85rem !important;
-    font-weight: 600 !important;
-    padding: 0 !important;
-    height: auto !important;
-    box-shadow: none !important;
-    cursor: pointer !important;
-}
-.st-key-view_all_btn button:hover {
-    color: #8ACAFF !important;
-    text-decoration: underline !important;
-    background: transparent !important;
-}
-.footer-nav-head {
-    font-size: 0.68rem;
-    font-weight: 700;
-    letter-spacing: 1.4px;
-    text-transform: uppercase;
-    color: #0f1f1a;
-    margin-bottom: 14px;
-    font-family: 'DM Sans', sans-serif;
-}
-
-</style>
-""", unsafe_allow_html=True)
-
-
-#  Helper 
-def go_categorized(material=None, search=None):
-    if material:
-        st.session_state.material_type = material
-    if search:
-        st.session_state.search_term = search
-    st.switch_page("page_files/Categorized_Search.py")
-
-
-def go_upload():
-    st.switch_page("page_files/Upload_Data.py")
-
-
-# ══════════════════════════════════════════════════════════════════════════════
-# 1.  ANIMATION SECTION  (pure HTML, no clickables needed)
-# ══════════════════════════════════════════════════════════════════════════════
-about_img_html = (
-    f"<div class='aim-about-img'><img src='{home_img}' alt='AIM platform diagram'/></div>"
-    if home_img else
-    "<div class='aim-about-img-placeholder'>[ Platform diagram ]</div>"
-)
-
-logo_html = (
-    f"<img src='{logo_img}' alt='AIM Logo' style='height:52px;width:52px;object-fit:contain;border-radius:14px;'/>"
-    if logo_img else ""
-)
-
-components.html(f"""
-<!DOCTYPE html><html lang="en"><head>
-<meta charset="UTF-8"/>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<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: #f7f7f5; color: #1a2e26; overflow-x: hidden; }}
-
-/*  ANIMATION SECTION  */
-.anim-section {{
-    background: #000;
-    padding: 80px 40px 60px;
-    display: flex; flex-direction: column; align-items: center;
-}}
-.anim-title {{
-    font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800;
-    color: #fff; text-align: center; letter-spacing: -1px; margin-bottom: 60px;
-}}
-.anim-stage {{
-    position: relative; width: 560px; height: 320px;
-    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; }}
-.mag-svg {{ width: 90px; height: 160px; overflow: visible; }}
-.mag-lens-flash {{ opacity: 0; transition: opacity 0.6s ease 0.5s; }}
-.mag-wrap.active .mag-lens-flash {{ opacity: 1; animation: lensFlash 1.8s ease-in-out infinite 0.5s; }}
-@keyframes lensFlash {{ 0%,100% {{ opacity:.2; r:26; }} 50% {{ opacity:.7; r:28; }} }}
-.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; }}
-.b2 {{ width:13px;height:13px;left:120px;bottom:175px; }}
-.b3 {{ width:22px;height:22px;left:96px; bottom:140px; }}
-.b4 {{ width:10px;height:10px;left:128px;bottom:185px; }}
-.b5 {{ width:16px;height:16px;left:112px;bottom:165px; }}
-.b6 {{ width:8px; height:8px; left:124px;bottom:195px; }}
-.anim-stage.active .b1 {{ animation:floatBubble1 2.6s cubic-bezier(.25,.46,.45,.94) 1.2s forwards; }}
-.anim-stage.active .b2 {{ animation:floatBubble2 2.2s cubic-bezier(.25,.46,.45,.94) 1.5s forwards; }}
-.anim-stage.active .b3 {{ animation:floatBubble3 3.0s cubic-bezier(.25,.46,.45,.94) 1.0s forwards; }}
-.anim-stage.active .b4 {{ animation:floatBubble4 2.0s cubic-bezier(.25,.46,.45,.94) 1.8s forwards; }}
-.anim-stage.active .b5 {{ animation:floatBubble5 2.8s cubic-bezier(.25,.46,.45,.94) 1.3s forwards; }}
-.anim-stage.active .b6 {{ animation:floatBubble6 1.8s cubic-bezier(.25,.46,.45,.94) 2.0s forwards; }}
-@keyframes floatBubble1 {{ 0% {{ opacity:0;transform:translate(0,0) scale(.4); }} 15% {{ opacity:1;transform:translate(4px,-20px) scale(1); }} 60% {{ opacity:.9;transform:translate(120px,-55px) scale(.9); }} 85% {{ opacity:.5;transform:translate(280px,-30px) scale(.6); }} 100% {{ opacity:0;transform:translate(340px,-10px) scale(.2); }} }}
-@keyframes floatBubble2 {{ 0% {{ opacity:0;transform:translate(0,0) scale(.3); }} 15% {{ opacity:1;transform:translate(-5px,-28px) scale(1); }} 60% {{ opacity:.9;transform:translate(110px,-70px) scale(.85); }} 85% {{ opacity:.4;transform:translate(265px,-40px) scale(.5); }} 100% {{ opacity:0;transform:translate(330px,-15px) scale(.15); }} }}
-@keyframes floatBubble3 {{ 0% {{ opacity:0;transform:translate(0,0) scale(.5); }} 15% {{ opacity:1;transform:translate(6px,-15px) scale(1); }} 55% {{ opacity:.9;transform:translate(130px,-45px) scale(.95); }} 80% {{ opacity:.4;transform:translate(278px,-20px) scale(.55); }} 100% {{ opacity:0;transform:translate(345px,-5px) scale(.2); }} }}
-@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; }}
-.cyl {{ opacity:.15;transition:opacity .5s ease; }}
-.anim-stage.active .cyl-left  {{ opacity:1;transition-delay:2.0s; }}
-.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; }}
-.anim-stage.active ~ .anim-caption .anim-step:nth-child(1) {{ opacity:1;transform:none;transition-delay:.5s; }}
-.anim-stage.active ~ .anim-caption .anim-step:nth-child(2) {{ opacity:1;transform:none;transition-delay:1s; }}
-.anim-stage.active ~ .anim-caption .anim-step:nth-child(3) {{ opacity:1;transform:none;transition-delay:1.5s; }}
-.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">
-        <!-- MAG GLASS -->
-        <div class="mag-wrap" id="magWrap">
-            <div class="mag-label">Research</div>
-            <svg class="mag-svg" viewBox="0 0 90 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <defs>
-                    <radialGradient id="lensGrad" cx="40%" cy="38%" r="55%">
-                        <stop offset="0%" stop-color="#4da6ff" stop-opacity="0.25"/>
-                        <stop offset="100%" stop-color="#1a4a8a" stop-opacity="0.7"/>
-                    </radialGradient>
-                    <radialGradient id="flashGrad" cx="50%" cy="50%" r="50%">
-                        <stop offset="0%" stop-color="#8ACAFF" stop-opacity="0.9"/>
-                        <stop offset="100%" stop-color="#8ACAFF" stop-opacity="0"/>
-                    </radialGradient>
-                </defs>
-                <circle cx="38" cy="38" r="32" fill="none" stroke="#2a5a8a" stroke-width="3"/>
-                <circle cx="38" cy="38" r="29" fill="url(#lensGrad)"/>
-                <line class="mag-scan" x1="16" y1="38" x2="60" y2="38" stroke="#8ACAFF" stroke-width="1.5" stroke-linecap="round" opacity="0.8"/>
-                <circle class="mag-lens-flash" cx="38" cy="38" r="26" fill="url(#flashGrad)"/>
-                <circle cx="24" cy="24" r="5" fill="white" opacity="0.15"/>
-                <circle cx="30" cy="34" r="2" fill="#8ACAFF" opacity="0.7"/>
-                <circle cx="42" cy="30" r="2" fill="#8ACAFF" opacity="0.5"/>
-                <circle cx="38" cy="44" r="2" fill="#8ACAFF" opacity="0.6"/>
-                <circle cx="48" cy="38" r="1.5" fill="#8ACAFF" opacity="0.4"/>
-            </svg>
-        </div>
-        <!-- BUBBLES -->
-        <div class="bubble b1"></div><div class="bubble b2"></div>
-        <div class="bubble b3"></div><div class="bubble b4"></div>
-        <div class="bubble b5"></div><div class="bubble b6"></div>
-        <!-- DATABASE -->
-        <div class="db-wrap">
-            <div class="db-label">Database</div>
-            <svg width="220" height="200" viewBox="0 0 220 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <defs>
-                    <linearGradient id="sideBlue" x1="0" y1="0" x2="1" y2="0">
-                        <stop offset="0%" stop-color="#2a55b0"/><stop offset="50%" stop-color="#4a7fd8"/><stop offset="100%" stop-color="#2a55b0"/>
-                    </linearGradient>
-                    <linearGradient id="sideDark" x1="0" y1="0" x2="1" y2="0">
-                        <stop offset="0%" stop-color="#0d1f5c"/><stop offset="50%" stop-color="#1a3a8a"/><stop offset="100%" stop-color="#0d1f5c"/>
-                    </linearGradient>
-                    <linearGradient id="topBlue" x1="0" y1="0" x2="0" y2="1">
-                        <stop offset="0%" stop-color="#6a9fe0"/><stop offset="100%" stop-color="#3a6abf"/>
-                    </linearGradient>
-                    <linearGradient id="topDark" x1="0" y1="0" x2="0" y2="1">
-                        <stop offset="0%" stop-color="#2a4a9a"/><stop offset="100%" stop-color="#0d1f5c"/>
-                    </linearGradient>
-                </defs>
-                <!-- back left -->
-                <g class="cyl cyl-left">
-                    <rect x="10" y="88" width="66" height="20" rx="1" fill="url(#sideBlue)"/>
-                    <ellipse cx="43" cy="88" rx="33" ry="10" fill="url(#topBlue)"/>
-                    <rect x="10" y="66" width="66" height="24" rx="1" fill="url(#sideBlue)"/>
-                    <ellipse cx="43" cy="66" rx="33" ry="10" fill="url(#topBlue)"/>
-                    <rect x="10" y="46" width="66" height="22" rx="1" fill="url(#sideBlue)"/>
-                    <ellipse cx="43" cy="46" rx="33" ry="10" fill="url(#topBlue)"/>
-                    <ellipse cx="43" cy="108" rx="33" ry="10" fill="#1e3a80"/>
-                </g>
-                <!-- back right -->
-                <g class="cyl cyl-right">
-                    <rect x="144" y="88" width="66" height="20" rx="1" fill="url(#sideBlue)"/>
-                    <ellipse cx="177" cy="88" rx="33" ry="10" fill="url(#topBlue)"/>
-                    <rect x="144" y="66" width="66" height="24" rx="1" fill="url(#sideBlue)"/>
-                    <ellipse cx="177" cy="66" rx="33" ry="10" fill="url(#topBlue)"/>
-                    <rect x="144" y="46" width="66" height="22" rx="1" fill="url(#sideBlue)"/>
-                    <ellipse cx="177" cy="46" rx="33" ry="10" fill="url(#topBlue)"/>
-                    <ellipse cx="177" cy="108" rx="33" ry="10" fill="#1e3a80"/>
-                </g>
-                <!-- front center -->
-                <g class="cyl cyl-front">
-                    <rect x="70" y="128" width="80" height="24" rx="1" fill="url(#sideDark)"/>
-                    <ellipse cx="110" cy="128" rx="40" ry="13" fill="url(#topDark)"/>
-                    <rect x="70" y="102" width="80" height="28" rx="1" fill="url(#sideDark)"/>
-                    <ellipse cx="110" cy="102" rx="40" ry="13" fill="url(#topDark)"/>
-                    <rect x="70" y="76" width="80" height="28" rx="1" fill="url(#sideDark)"/>
-                    <ellipse cx="110" cy="76" rx="40" ry="13" fill="url(#topDark)"/>
-                    <rect x="70" y="54" width="80" height="24" rx="1" fill="url(#sideDark)"/>
-                    <ellipse cx="110" cy="54" rx="40" ry="13" fill="url(#topDark)"/>
-                    <ellipse cx="110" cy="152" rx="40" ry="13" fill="#080f2a"/>
-                </g>
-            </svg>
-        </div>
-    </div>
-    <div class="anim-caption">
-        <div class="anim-step"><span class="step-text">Collect measurements</span></div>
-        <div class="anim-step"><span class="step-text">Process &amp; validate</span></div>
-        <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');
-const observer = new IntersectionObserver(entries => {{
-    entries.forEach(e => {{
-        if (e.isIntersecting) {{
-            setTimeout(() => {{ magWrap.classList.add('active'); stage.classList.add('active'); }}, 300);
-        }} else {{
-            magWrap.classList.remove('active'); stage.classList.remove('active');
-        }}
-    }});
-}}, {{ threshold: 0.4 }});
-observer.observe(document.querySelector('.anim-section'));
-</script>
-</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"""
-<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)
-
-
-# ══════════════════════════════════════════════════════════════════════════════
-# 5.  MAJOR CATEGORIES , Streamlit columns + containers + buttons
-# ══════════════════════════════════════════════════════════════════════════════
-st.markdown("""
-<style>
-/* Card buttons - scoped to cards horizontal block only */
-.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;
-    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;
-}
-            
-.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;
-    background: #fff !important;
-}
-.st-emotion-cache-r3ry0f button p:first-child {
-    font-size: 1.1rem !important;
-    background: #f2f4f3 !important;
-    border-radius: 8px !important;
-    padding: 6px 8px !important;
-    display: inline-block !important;
-    margin-bottom: 12px !important;
-    line-height: 1 !important;
-}
-.st-emotion-cache-r3ry0f button p:nth-child(2) {
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.97rem !important;
-    font-weight: 700 !important;
-    color: #0f1f1a !important;
-    margin-bottom: 6px !important;
-}
-.st-emotion-cache-r3ry0f button p:last-child {
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.7rem !important;
-    font-weight: 700 !important;
-    letter-spacing: 1.2px !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)
-
-st.markdown("""
-    <div class="cards-section-wrap">
-        <h2>Quick Links</h2>
-        <p>Open the pages you need most.</p>
-    </div>
-    """, unsafe_allow_html=True)
-
-quick_cards = [
-    ("Extract Data", "Platform", "page_files/Upload_Data.py", "about", "📋"),
-    ("Contact Team", "Support", "page_files/Contact_Team.py", "contact", " 🛡️"),
-    ("Search", "Data Page", "page_files/Categorized_Search.py", "search", "🔎"),
-]
-
-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)
-
-st.markdown("<div style='background:#fff; padding: 24px 0; border-bottom: 1px solid #e8e8e4;'></div>", unsafe_allow_html=True)
-
-        
-
-
-# ══════════════════════════════════════════════════════════════════════════════
-# 6.  ABOUT + FOOTER (static HTML)
-# ══════════════════════════════════════════════════════════════════════════════
-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; 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; }}
-.aim-about-grid {{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }}
-.aim-about-text p {{ color: #3a4e47; font-size: 0.91rem; line-height: 1.75; margin-bottom: 14px; }}
-.aim-about-img {{ border-radius: 10px; overflow: hidden; border: 1px solid #e4e8e5; }}
-.aim-about-img img {{ width: 100%; display: block; }}
-.aim-about-img-placeholder {{
-    background: #f0f5f3; border-radius: 10px; height: 280px;
-    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>
-    <div class="aim-about-grid">
-        <div class="aim-about-text">
-            <p>The AIM Database tool serves as a powerful, centralized hub designed to streamline
-            collaboration and information exchange within the composite materials research community.
-            The platform enables researchers to contribute to a shared knowledge base by uploading
-            experimental datasets through secure terminals.</p>
-            <p>Users can submit specific measurements regarding mechanical properties, thermal behavior,
-            and rheology, alongside their published journal papers , ensuring that both raw data and
-            peer-reviewed findings are integrated into one cohesive system.</p>
-            <p>All contributed information is securely aggregated within a central cloud architecture,
-            allowing for efficient storage, organization, and retrieval across polymer, fiber, and
-            composite categories.</p>
-        </div>
-        <div>{about_img_html}</div>
-    </div>
-</section>
-
-
-
-</body></html>
-""", height=550, scrolling=False)
-
-st.markdown("""
-<style>
-            
-/* Footer nav wrapper */
-div[data-testid="stHorizontalBlock"]:has(.footer-nav-head) {
-    background: #fff !important;
-    border-bottom: 1px solid #e8e8e4 !important;
-    padding: 0 60px 28px !important;
-    margin-top: -16px !important;
-    
-}
-.aim-footer-brand {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-weight: 700;
-    color: #0f1f1a;
-    font-size: 0.95rem;
-    margin-bottom: 10px;
-    font-family: 'DM Sans', sans-serif;
-}
-.aim-footer-desc {
-    font-size: 0.82rem;
-    color: #7a8e87;
-    line-height: 1.6;
-    font-family: 'DM Sans', sans-serif;
-}
-.footer-nav-head {
-    font-size: 0.68rem;
-    font-weight: 700;
-    letter-spacing: 1.4px;
-    text-transform: uppercase;
-    color: #0f1f1a;
-    margin-bottom: 14px;
-    font-family: 'DM Sans', sans-serif;
-}
-.st-emotion-cache-1ofqig9 {
-    background: transparent !important;
-    border: none !important;
-    padding: 0 !important;
-}
-.st-emotion-cache-1qeq59m {
-    background: transparent !important;
-    border: none !important;
-    text-decoration: none !important;
-    padding: 0 0 9px 0 !important;
-    display: block !important;
-}
-.st-emotion-cache-1qeq59m:hover {
-    background: transparent !important;
-    border: none !important;
-}
-.st-emotion-cache-1qeq59m p {
-    color: #6a7e77 !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.83rem !important;
-    font-weight: 400 !important;
-    margin: 0 !important;
-}
-.st-emotion-cache-1qeq59m:hover p {
-    color: #8ACAFF !important;
-}
-
-/* copyright bar */
-.aim-footer-bottom {
-    background: #fff;
-    border-top: 1px solid #e8e8e4;
-    padding: 22px 60px;
-    font-size: 0.76rem;
-    color: #a0b0aa;
-    font-family: 'DM Sans', sans-serif;
-}
-
-</style>
-""", unsafe_allow_html=True)
-
-brand_col, db_col, sup_col, _ = st.columns([4, 2, 2, 2], vertical_alignment="top", width="stretch")
-
-with brand_col:
-    st.markdown(f"""
-    <div class="aim-footer-brand">{logo_html} AIM Composites</div>
-    <p class="aim-footer-desc">Advancing composites research through open data and collaborative tools.
-    A joint initiative of Clemson University and University of Delaware.</p>
-    """, unsafe_allow_html=True)
-
-with sup_col:
-    st.markdown('<p class="footer-nav-head">DATABASE</p>', unsafe_allow_html=True)
-    st.page_link(
-        "page_files/Categorized_Search.py",
-        label="Browse Materials",
-    )
-    st.page_link(
-        "page_files/Categorized_Search.py",
-        label="Categorized Search",
-    )
-    st.page_link(
-        "page_files/Upload_Data.py",
-        label="Upload Data",
-    )
-
-with _:
-    st.markdown('<p class="footer-nav-head">SUPPORT</p>', unsafe_allow_html=True)
-    st.page_link(
-        "page_files/Contact_Team.py",
-        label="Contact Team",
-    )
-
-
-
+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
+
+
+ALL_CARDS = [
+    ("Composites",  "Material class",  "material", "Composites"),
+    ("Polymers",    "Material class",  "material", "Polymers"),
+    ("Fibers",      "Material class",  "material", "Fibers"),
+]
+
+sections = get_all_sections()
+for section in sections:
+    ALL_CARDS.append((section, "Property type", "section", section))
+
+if "visible_cards" not in st.session_state:
+    random.shuffle(ALL_CARDS)
+    st.session_state.visible_cards = ALL_CARDS[:4]  
+
+VISIBLE_CARDS = st.session_state.visible_cards 
+prop_count = len([c for c in ALL_CARDS if c[2] == "section"])
+
+def get_card_icon(title: str, card_type: str) -> str:
+    if card_type == "material":
+        icons = {"composites": "🧱", "polymers": "🔬", "fibers": "🧵"}
+        return icons.get(title.lower(), "🧱")
+    t = title.lower()
+    if "mechanical" in t: return "⚙️"
+    if "thermal" in t: return "🔥"
+    if "electrical" in t: return "⚡"
+    if "physical" in t: return "⚖️"
+    if "processing" in t: return "🔧"
+    if "optical" in t: return "🔭"
+    if "chemical" in t: return "🧪"
+    if "flammab" in t: return "🔴"
+    if "component" in t: return "🧩"
+    if "descriptive" in t: return "📋"
+    return "📋"
+
+def img_to_b64(path):
+    try:
+        ext = Path(path).suffix.lower().replace(".", "")
+        mime = "png" if ext == "png" else "jpeg"
+        with open(path, "rb") as f:
+            data = base64.b64encode(f.read()).decode()
+        return f"data:image/{mime};base64,{data}"
+    except Exception:
+        return ""
+
+
+home_img = img_to_b64("images/Home.png")
+logo_img = img_to_b64("logo.png")
+
+st.markdown("""
+  <style>
+  section[data-testid="stMain"] {
+      background: #fff !important;
+  }
+  .stApp {
+      background: #fff !important;
+  }
+  </style>
+  """, 
+  unsafe_allow_html=True
+  )
+
+#  Global style overrides 
+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;
+    border-right: none !important;
+    border-radius: 50px 0 0 50px !important;
+    color: #3a5248 !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.8rem !important;
+    font-weight: 600 !important;
+    height: 46px !important;
+    padding: 0 16px !important;
+    white-space: nowrap !important;
+    box-shadow: none !important;
+}
+
+.st-emotion-cache-4dubyl [data-baseweb="input"] {
+    background: #000 !important;
+    height: 46px !important;
+    min-height: 46px !important;
+    border-radius: 0 !important;
+    border-color: #d0d8d4 !important;
+    border-left: none !important;
+    border-right: none !important;
+}
+            
+.st-emotion-cache-4dubyl input {
+    background: #fff !important;
+    height: 46px !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.92rem !important;
+    color: #000 !important;
+    box-shadow: none !important;
+    padding-left: 18px !important;
+}
+
+.st-emotion-cache-4dubyl > div {
+
+    height: 46px !important;
+}
+.st-emotion-cache-4dubyl input::placeholder {
+    color: #0f1f1a !important;
+    opacity: 0.4 !important;
+}
+.st-emotion-cache-mpgwbc button {
+    background: #8ACAFF !important;
+    border: 1.5px solid #8ACAFF !important;
+    border-left: none !important;
+    border-radius: 0 50px 50px 0 !important;
+    color: #0f1f1a !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.88rem !important;
+    font-weight: 600 !important;
+    height: 46px !important;
+    padding: 0 28px !important;
+    box-shadow: none !important;
+}
+
+.st-key-view_all_btn button {
+    background: transparent !important;
+    border: none !important;
+    color: #8ACAFF !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.85rem !important;
+    font-weight: 600 !important;
+    padding: 0 !important;
+    height: auto !important;
+    box-shadow: none !important;
+    cursor: pointer !important;
+}
+.st-key-view_all_btn button:hover {
+    color: #8ACAFF !important;
+    text-decoration: underline !important;
+    background: transparent !important;
+}
+.footer-nav-head {
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 1.4px;
+    text-transform: uppercase;
+    color: #0f1f1a;
+    margin-bottom: 14px;
+    font-family: 'DM Sans', sans-serif;
+}
+
+</style>
+""", unsafe_allow_html=True)
+
+
+#  Helper 
+def go_categorized(material=None, search=None):
+    if material:
+        st.session_state.material_type = material
+    if search:
+        st.session_state.search_term = search
+    st.switch_page("page_files/Categorized_Search.py")
+
+
+def go_upload():
+    st.switch_page("page_files/Upload_Data.py")
+
+
+# ══════════════════════════════════════════════════════════════════════════════
+# 1.  ANIMATION SECTION  (pure HTML, no clickables needed)
+# ══════════════════════════════════════════════════════════════════════════════
+about_img_html = (
+    f"<div class='aim-about-img'><img src='{home_img}' alt='AIM platform diagram'/></div>"
+    if home_img else
+    "<div class='aim-about-img-placeholder'>[ Platform diagram ]</div>"
+)
+
+logo_html = (
+    f"<img src='{logo_img}' alt='AIM Logo' style='height:52px;width:52px;object-fit:contain;border-radius:14px;'/>"
+    if logo_img else ""
+)
+
+components.html(f"""
+<!DOCTYPE html><html lang="en"><head>
+<meta charset="UTF-8"/>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<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: #f7f7f5; color: #1a2e26; overflow-x: hidden; }}
+
+/*  ANIMATION SECTION  */
+.anim-section {{
+    background: #000;
+    padding: 80px 40px 60px;
+    display: flex; flex-direction: column; align-items: center;
+}}
+.anim-title {{
+    font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800;
+    color: #fff; text-align: center; letter-spacing: -1px; margin-bottom: 60px;
+}}
+.anim-stage {{
+    position: relative; width: 560px; height: 320px;
+    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; }}
+.mag-svg {{ width: 90px; height: 160px; overflow: visible; }}
+.mag-lens-flash {{ opacity: 0; transition: opacity 0.6s ease 0.5s; }}
+.mag-wrap.active .mag-lens-flash {{ opacity: 1; animation: lensFlash 1.8s ease-in-out infinite 0.5s; }}
+@keyframes lensFlash {{ 0%,100% {{ opacity:.2; r:26; }} 50% {{ opacity:.7; r:28; }} }}
+.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; }}
+.b2 {{ width:13px;height:13px;left:120px;bottom:175px; }}
+.b3 {{ width:22px;height:22px;left:96px; bottom:140px; }}
+.b4 {{ width:10px;height:10px;left:128px;bottom:185px; }}
+.b5 {{ width:16px;height:16px;left:112px;bottom:165px; }}
+.b6 {{ width:8px; height:8px; left:124px;bottom:195px; }}
+.anim-stage.active .b1 {{ animation:floatBubble1 2.6s cubic-bezier(.25,.46,.45,.94) 1.2s forwards; }}
+.anim-stage.active .b2 {{ animation:floatBubble2 2.2s cubic-bezier(.25,.46,.45,.94) 1.5s forwards; }}
+.anim-stage.active .b3 {{ animation:floatBubble3 3.0s cubic-bezier(.25,.46,.45,.94) 1.0s forwards; }}
+.anim-stage.active .b4 {{ animation:floatBubble4 2.0s cubic-bezier(.25,.46,.45,.94) 1.8s forwards; }}
+.anim-stage.active .b5 {{ animation:floatBubble5 2.8s cubic-bezier(.25,.46,.45,.94) 1.3s forwards; }}
+.anim-stage.active .b6 {{ animation:floatBubble6 1.8s cubic-bezier(.25,.46,.45,.94) 2.0s forwards; }}
+@keyframes floatBubble1 {{ 0% {{ opacity:0;transform:translate(0,0) scale(.4); }} 15% {{ opacity:1;transform:translate(4px,-20px) scale(1); }} 60% {{ opacity:.9;transform:translate(120px,-55px) scale(.9); }} 85% {{ opacity:.5;transform:translate(280px,-30px) scale(.6); }} 100% {{ opacity:0;transform:translate(340px,-10px) scale(.2); }} }}
+@keyframes floatBubble2 {{ 0% {{ opacity:0;transform:translate(0,0) scale(.3); }} 15% {{ opacity:1;transform:translate(-5px,-28px) scale(1); }} 60% {{ opacity:.9;transform:translate(110px,-70px) scale(.85); }} 85% {{ opacity:.4;transform:translate(265px,-40px) scale(.5); }} 100% {{ opacity:0;transform:translate(330px,-15px) scale(.15); }} }}
+@keyframes floatBubble3 {{ 0% {{ opacity:0;transform:translate(0,0) scale(.5); }} 15% {{ opacity:1;transform:translate(6px,-15px) scale(1); }} 55% {{ opacity:.9;transform:translate(130px,-45px) scale(.95); }} 80% {{ opacity:.4;transform:translate(278px,-20px) scale(.55); }} 100% {{ opacity:0;transform:translate(345px,-5px) scale(.2); }} }}
+@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; }}
+.cyl {{ opacity:.15;transition:opacity .5s ease; }}
+.anim-stage.active .cyl-left  {{ opacity:1;transition-delay:2.0s; }}
+.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; }}
+.anim-stage.active ~ .anim-caption .anim-step:nth-child(1) {{ opacity:1;transform:none;transition-delay:.5s; }}
+.anim-stage.active ~ .anim-caption .anim-step:nth-child(2) {{ opacity:1;transform:none;transition-delay:1s; }}
+.anim-stage.active ~ .anim-caption .anim-step:nth-child(3) {{ opacity:1;transform:none;transition-delay:1.5s; }}
+.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">
+        <!-- MAG GLASS -->
+        <div class="mag-wrap" id="magWrap">
+            <div class="mag-label">Research</div>
+            <svg class="mag-svg" viewBox="0 0 90 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <radialGradient id="lensGrad" cx="40%" cy="38%" r="55%">
+                        <stop offset="0%" stop-color="#4da6ff" stop-opacity="0.25"/>
+                        <stop offset="100%" stop-color="#1a4a8a" stop-opacity="0.7"/>
+                    </radialGradient>
+                    <radialGradient id="flashGrad" cx="50%" cy="50%" r="50%">
+                        <stop offset="0%" stop-color="#8ACAFF" stop-opacity="0.9"/>
+                        <stop offset="100%" stop-color="#8ACAFF" stop-opacity="0"/>
+                    </radialGradient>
+                </defs>
+                <circle cx="38" cy="38" r="32" fill="none" stroke="#2a5a8a" stroke-width="3"/>
+                <circle cx="38" cy="38" r="29" fill="url(#lensGrad)"/>
+                <line class="mag-scan" x1="16" y1="38" x2="60" y2="38" stroke="#8ACAFF" stroke-width="1.5" stroke-linecap="round" opacity="0.8"/>
+                <circle class="mag-lens-flash" cx="38" cy="38" r="26" fill="url(#flashGrad)"/>
+                <circle cx="24" cy="24" r="5" fill="white" opacity="0.15"/>
+                <circle cx="30" cy="34" r="2" fill="#8ACAFF" opacity="0.7"/>
+                <circle cx="42" cy="30" r="2" fill="#8ACAFF" opacity="0.5"/>
+                <circle cx="38" cy="44" r="2" fill="#8ACAFF" opacity="0.6"/>
+                <circle cx="48" cy="38" r="1.5" fill="#8ACAFF" opacity="0.4"/>
+            </svg>
+        </div>
+        <!-- BUBBLES -->
+        <div class="bubble b1"></div><div class="bubble b2"></div>
+        <div class="bubble b3"></div><div class="bubble b4"></div>
+        <div class="bubble b5"></div><div class="bubble b6"></div>
+        <!-- DATABASE -->
+        <div class="db-wrap">
+            <div class="db-label">Database</div>
+            <svg width="220" height="200" viewBox="0 0 220 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <linearGradient id="sideBlue" x1="0" y1="0" x2="1" y2="0">
+                        <stop offset="0%" stop-color="#2a55b0"/><stop offset="50%" stop-color="#4a7fd8"/><stop offset="100%" stop-color="#2a55b0"/>
+                    </linearGradient>
+                    <linearGradient id="sideDark" x1="0" y1="0" x2="1" y2="0">
+                        <stop offset="0%" stop-color="#0d1f5c"/><stop offset="50%" stop-color="#1a3a8a"/><stop offset="100%" stop-color="#0d1f5c"/>
+                    </linearGradient>
+                    <linearGradient id="topBlue" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0%" stop-color="#6a9fe0"/><stop offset="100%" stop-color="#3a6abf"/>
+                    </linearGradient>
+                    <linearGradient id="topDark" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0%" stop-color="#2a4a9a"/><stop offset="100%" stop-color="#0d1f5c"/>
+                    </linearGradient>
+                </defs>
+                <!-- back left -->
+                <g class="cyl cyl-left">
+                    <rect x="10" y="88" width="66" height="20" rx="1" fill="url(#sideBlue)"/>
+                    <ellipse cx="43" cy="88" rx="33" ry="10" fill="url(#topBlue)"/>
+                    <rect x="10" y="66" width="66" height="24" rx="1" fill="url(#sideBlue)"/>
+                    <ellipse cx="43" cy="66" rx="33" ry="10" fill="url(#topBlue)"/>
+                    <rect x="10" y="46" width="66" height="22" rx="1" fill="url(#sideBlue)"/>
+                    <ellipse cx="43" cy="46" rx="33" ry="10" fill="url(#topBlue)"/>
+                    <ellipse cx="43" cy="108" rx="33" ry="10" fill="#1e3a80"/>
+                </g>
+                <!-- back right -->
+                <g class="cyl cyl-right">
+                    <rect x="144" y="88" width="66" height="20" rx="1" fill="url(#sideBlue)"/>
+                    <ellipse cx="177" cy="88" rx="33" ry="10" fill="url(#topBlue)"/>
+                    <rect x="144" y="66" width="66" height="24" rx="1" fill="url(#sideBlue)"/>
+                    <ellipse cx="177" cy="66" rx="33" ry="10" fill="url(#topBlue)"/>
+                    <rect x="144" y="46" width="66" height="22" rx="1" fill="url(#sideBlue)"/>
+                    <ellipse cx="177" cy="46" rx="33" ry="10" fill="url(#topBlue)"/>
+                    <ellipse cx="177" cy="108" rx="33" ry="10" fill="#1e3a80"/>
+                </g>
+                <!-- front center -->
+                <g class="cyl cyl-front">
+                    <rect x="70" y="128" width="80" height="24" rx="1" fill="url(#sideDark)"/>
+                    <ellipse cx="110" cy="128" rx="40" ry="13" fill="url(#topDark)"/>
+                    <rect x="70" y="102" width="80" height="28" rx="1" fill="url(#sideDark)"/>
+                    <ellipse cx="110" cy="102" rx="40" ry="13" fill="url(#topDark)"/>
+                    <rect x="70" y="76" width="80" height="28" rx="1" fill="url(#sideDark)"/>
+                    <ellipse cx="110" cy="76" rx="40" ry="13" fill="url(#topDark)"/>
+                    <rect x="70" y="54" width="80" height="24" rx="1" fill="url(#sideDark)"/>
+                    <ellipse cx="110" cy="54" rx="40" ry="13" fill="url(#topDark)"/>
+                    <ellipse cx="110" cy="152" rx="40" ry="13" fill="#080f2a"/>
+                </g>
+            </svg>
+        </div>
+    </div>
+    <div class="anim-caption">
+        <div class="anim-step"><span class="step-text">Collect measurements</span></div>
+        <div class="anim-step"><span class="step-text">Process &amp; validate</span></div>
+        <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');
+const observer = new IntersectionObserver(entries => {{
+    entries.forEach(e => {{
+        if (e.isIntersecting) {{
+            setTimeout(() => {{ magWrap.classList.add('active'); stage.classList.add('active'); }}, 300);
+        }} else {{
+            magWrap.classList.remove('active'); stage.classList.remove('active');
+        }}
+    }});
+}}, {{ threshold: 0.4 }});
+observer.observe(document.querySelector('.anim-section'));
+</script>
+</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)
+# ══════════════════════════════════════════════════════════════════════════════
+
+
+# ══════════════════════════════════════════════════════════════════════════════
+# 5.  MAJOR CATEGORIES , Streamlit columns + containers + buttons
+# ══════════════════════════════════════════════════════════════════════════════
+st.markdown("""
+<style>
+/* Card buttons - scoped to cards horizontal block only */
+.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;
+    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;
+}
+            
+.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;
+    background: #fff !important;
+}
+.st-emotion-cache-r3ry0f button p:first-child {
+    font-size: 1.1rem !important;
+    background: #f2f4f3 !important;
+    border-radius: 8px !important;
+    padding: 6px 8px !important;
+    display: inline-block !important;
+    margin-bottom: 12px !important;
+    line-height: 1 !important;
+}
+.st-emotion-cache-r3ry0f button p:nth-child(2) {
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.97rem !important;
+    font-weight: 700 !important;
+    color: #0f1f1a !important;
+    margin-bottom: 6px !important;
+}
+.st-emotion-cache-r3ry0f button p:last-child {
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.7rem !important;
+    font-weight: 700 !important;
+    letter-spacing: 1.2px !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)
+
+st.markdown("""
+    <div class="cards-section-wrap">
+        <h2>Quick Links</h2>
+        <p>Open the pages you need most.</p>
+    </div>
+    """, unsafe_allow_html=True)
+
+quick_cards = [
+    ("Extract Data", "Platform", "page_files/Upload_Data.py", "about", "📋"),
+    ("Contact Team", "Support", "page_files/Contact_Team.py", "contact", " 🛡️"),
+    ("Search", "Data Page", "page_files/Categorized_Search.py", "search", "🔎"),
+]
+
+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)
+
+st.markdown("<div style='background:#fff; padding: 24px 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)
+# ══════════════════════════════════════════════════════════════════════════════
+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; 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; }}
+.aim-about-grid {{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }}
+.aim-about-text p {{ color: #3a4e47; font-size: 0.91rem; line-height: 1.75; margin-bottom: 14px; }}
+.aim-about-img {{ border-radius: 10px; overflow: hidden; border: 1px solid #e4e8e5; }}
+.aim-about-img img {{ width: 100%; display: block; }}
+.aim-about-img-placeholder {{
+    background: #f0f5f3; border-radius: 10px; height: 280px;
+    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>
+    <div class="aim-about-grid">
+        <div class="aim-about-text">
+            <p>The AIM Database tool serves as a powerful, centralized hub designed to streamline
+            collaboration and information exchange within the composite materials research community.
+            The platform enables researchers to contribute to a shared knowledge base by uploading
+            experimental datasets through secure terminals.</p>
+            <p>Users can submit specific measurements regarding mechanical properties, thermal behavior,
+            and rheology, alongside their published journal papers , ensuring that both raw data and
+            peer-reviewed findings are integrated into one cohesive system.</p>
+            <p>All contributed information is securely aggregated within a central cloud architecture,
+            allowing for efficient storage, organization, and retrieval across polymer, fiber, and
+            composite categories.</p>
+        </div>
+        <div>{about_img_html}</div>
+    </div>
+</section>
+
+
+
+</body></html>
+""", height=550, scrolling=False)
+
+st.markdown("""
+<style>
+            
+/* Footer nav wrapper */
+div[data-testid="stHorizontalBlock"]:has(.footer-nav-head) {
+    background: #fff !important;
+    border-bottom: 1px solid #e8e8e4 !important;
+    padding: 0 60px 28px !important;
+    margin-top: -16px !important;
+    
+}
+.aim-footer-brand {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 700;
+    color: #0f1f1a;
+    font-size: 0.95rem;
+    margin-bottom: 10px;
+    font-family: 'DM Sans', sans-serif;
+}
+.aim-footer-desc {
+    font-size: 0.82rem;
+    color: #7a8e87;
+    line-height: 1.6;
+    font-family: 'DM Sans', sans-serif;
+}
+.footer-nav-head {
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 1.4px;
+    text-transform: uppercase;
+    color: #0f1f1a;
+    margin-bottom: 14px;
+    font-family: 'DM Sans', sans-serif;
+}
+.st-emotion-cache-1ofqig9 {
+    background: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+}
+.st-emotion-cache-1qeq59m {
+    background: transparent !important;
+    border: none !important;
+    text-decoration: none !important;
+    padding: 0 0 9px 0 !important;
+    display: block !important;
+}
+.st-emotion-cache-1qeq59m:hover {
+    background: transparent !important;
+    border: none !important;
+}
+.st-emotion-cache-1qeq59m p {
+    color: #6a7e77 !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.83rem !important;
+    font-weight: 400 !important;
+    margin: 0 !important;
+}
+.st-emotion-cache-1qeq59m:hover p {
+    color: #8ACAFF !important;
+}
+
+/* copyright bar */
+.aim-footer-bottom {
+    background: #fff;
+    border-top: 1px solid #e8e8e4;
+    padding: 22px 60px;
+    font-size: 0.76rem;
+    color: #a0b0aa;
+    font-family: 'DM Sans', sans-serif;
+}
+
+</style>
+""", unsafe_allow_html=True)
+
+brand_col, db_col, sup_col, _ = st.columns([4, 2, 2, 2], vertical_alignment="top", width="stretch")
+
+with brand_col:
+    st.markdown(f"""
+    <div class="aim-footer-brand">{logo_html} AIM Composites</div>
+    <p class="aim-footer-desc">Advancing composites research through open data and collaborative tools.
+    A joint initiative of Clemson University and University of Delaware.</p>
+    """, unsafe_allow_html=True)
+
+with sup_col:
+    st.markdown('<p class="footer-nav-head">DATABASE</p>', unsafe_allow_html=True)
+    st.page_link(
+        "page_files/Categorized_Search.py",
+        label="Browse Materials",
+    )
+    st.page_link(
+        "page_files/Categorized_Search.py",
+        label="Categorized Search",
+    )
+    st.page_link(
+        "page_files/Upload_Data.py",
+        label="Upload Data",
+    )
+
+with _:
+    st.markdown('<p class="footer-nav-head">SUPPORT</p>', unsafe_allow_html=True)
+    st.page_link(
+        "page_files/Contact_Team.py",
+        label="Contact Team",
+    )
+
+
+