added some animations

README.md

@@ -6,84 +6,370 @@ colorTo: indigo
 sdk: static
 pinned: false
 ---
-
-<!-- Entire body below uses pure HTML (no Markdown for layout or styling) -->
-
-<div style="--bg:#0e0f12; --card:#14161b; --text:#e8edf2; --muted:#a9b4c0; --accent:#00d49c; --link:#7dd3fc; font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; color:var(--text); background: radial-gradient(1200px 800px at 50% -10%, #0f1520 0%, var(--bg) 55%); margin:0; padding:0;">
-  <!-- HERO -->
-  <div style="max-width:980px; margin:0 auto; padding:48px 20px 12px; text-align:center; position:relative; border-bottom:1px solid rgba(255,255,255,0.04);">
-    <div style="margin:0 auto 14px; width: clamp(160px, 26vw, 360px); aspect-ratio:101/14; filter: drop-shadow(0 4px 18px rgba(0,212,156,0.2));">
-      <!-- Inline SVG logo (accent color preserved) -->
-      <svg aria-label="HUMAIN logo" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 101 14" style="width:100%; height:auto; display:block; fill: var(--accent);">
-        <path d="M14.855 2.901H2.964V.033H0v13.723h2.964V10.87h11.89v2.885h2.964V.033h-2.964v2.884zM2.964 8.377V5.395h11.89v2.982z"></path>
-        <path d="M33.573 7.139c0 2.477-1.747 4.253-4.164 4.253s-4.163-1.776-4.163-4.253V0h-2.964v7.139c0 3.944 3.034 6.861 7.127 6.861s7.127-2.917 7.127-6.861V0h-2.963z"></path>
-        <path d="M48.533 5.77h-.212L43.664 0h-2.682v13.723h2.964v-9.6h.053s.3.88.829 1.532L46.91 8.23h2.964l2.081-2.575c.53-.652.83-1.532.83-1.532h.052v9.6h2.964V0H53.12l-4.64 5.77z"></path>
-        <path d="m65.064 0-6.087 13.723h3.14l1.218-2.738h7.85l1.218 2.738h3.21L69.527 0zm-.636 8.508 2.682-6.03h.3l2.682 6.03h-5.646z"></path>
+<div
+  style="
+    --bg: #0e0f12;
+    --card: #14161b;
+    --text: #e8edf2;
+    --muted: #a9b4c0;
+    --accent: #00d49c;
+    --link: #7dd3fc;
+    font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
+      Inter, Arial, sans-serif;
+    color: var(--text);
+    background: radial-gradient(
+      1200px 800px at 50% -10%,
+      #0f1520 0%,
+      var(--bg) 55%
+    );
+    margin: 0;
+    padding: 0;
+  "
+>
+  <div
+    style="
+      max-width: 980px;
+      margin: 0 auto;
+      padding: 48px 20px 12px;
+      text-align: center;
+      position: relative;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+    "
+  >
+    <div
+      style="
+        margin: 0 auto 14px;
+        width: clamp(160px, 26vw, 360px);
+        aspect-ratio: 101/14;
+        filter: drop-shadow(0 4px 18px rgba(0, 212, 156, 0.5));
+      "
+    >
+      <svg
+        aria-label="HUMAIN logo"
+        role="img"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 101 14"
+        style="width: 100%; height: auto; display: block; fill: var(--accent)"
+      >
+        <path
+          d="M14.855 2.901H2.964V.033H0v13.723h2.964V10.87h11.89v2.885h2.964V.033h-2.964v2.884zM2.964 8.377V5.395h11.89v2.982z"
+        ></path>
+        <path
+          d="M33.573 7.139c0 2.477-1.747 4.253-4.164 4.253s-4.163-1.776-4.163-4.253V0h-2.964v7.139c0 3.944 3.034 6.861 7.127 6.861s7.127-2.917 7.127-6.861V0h-2.963z"
+        ></path>
+        <path
+          d="M48.533 5.77h-.212L43.664 0h-2.682v13.723h2.964v-9.6h.053s.3.88.829 1.532L46.91 8.23h2.964l2.081-2.575c.53-.652.83-1.532.83-1.532h.052v9.6h2.964V0H53.12l-4.64 5.77z"
+        ></path>
+        <path
+          d="m65.064 0-6.087 13.723h3.14l1.218-2.738h7.85l1.218 2.738h3.21L69.527 0zm-.636 8.508 2.682-6.03h.3l2.682 6.03h-5.646z"
+        ></path>
         <path d="M81.682 0h-2.964v13.723h2.964z"></path>
-        <path d="M98.036 0v9.47L88.827 0h-2.681v13.723h2.963v-9.47l9.21 9.47H101V0z"></path>
+        <path
+          d="M98.036 0v9.47L88.827 0h-2.681v13.723h2.963v-9.47l9.21 9.47H101V0z"
+        ></path>
       </svg>
     </div>
-    <div style="font-size: clamp(28px, 4.2vw, 44px); line-height:1.15; letter-spacing:0.2px; margin:4px 0 6px; font-weight:700;">
-      HUMAIN
-    </div>
-    <div style="max-width:780px; margin:0 auto 14px; color:var(--muted); font-size:clamp(14px,1.7vw,16px);">
+    <div
+      style="
+        max-width: 780px;
+        margin: 0 auto 14px;
+        color: var(--muted);
+        font-size: clamp(14px, 1.7vw, 16px);
+      "
+    >
       Global, full-stack AI company (PIF-owned), headquartered in Riyadh.
     </div>
-    <div style="display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px;">
-      <span style="display:inline-flex; align-items:center; gap:8px; background:#0f2a22; border:1px solid #1d4e3f; color:#b9f1dd; border-radius:999px; padding:6px 12px; font-size:0.95rem;"><span style="color:var(--accent);">•</span>AI Infrastructure</span>
-      <span style="display:inline-flex; align-items:center; gap:8px; background:#0f2a22; border:1px solid #1d4e3f; color:#b9f1dd; border-radius:999px; padding:6px 12px; font-size:0.95rem;"><span style="color:var(--accent);">•</span>AI Cloud</span>
-      <span style="display:inline-flex; align-items:center; gap:8px; background:#0f2a22; border:1px solid #1d4e3f; color:#b9f1dd; border-radius:999px; padding:6px 12px; font-size:0.95rem;"><span style="color:var(--accent);">•</span>Data &amp; Models</span>
-      <span style="display:inline-flex; align-items:center; gap:8px; background:#0f2a22; border:1px solid #1d4e3f; color:#b9f1dd; border-radius:999px; padding:6px 12px; font-size:0.95rem;"><span style="color:var(--accent);">•</span>Apps &amp; Solutions</span>
+    <div
+      style="
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        justify-content: center;
+        margin-top: 12px;
+      "
+    >
+      <a
+        href="https://groq.humain.ai/"
+        target="_blank"
+        rel="noopener noreferrer"
+        style="
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+          margin: 6px 8px 6px 0;
+          background: #0f2a22;
+          border: 1px solid #1d4e3f;
+          color: #b9f1dd;
+          border-radius: 7px;
+          padding: 6px 12px;
+          font-size: 0.95rem;
+          text-decoration: none;
+          cursor: pointer;
+          box-shadow: 0 0 6px rgba(0, 212, 156, 0.1);
+          transition: transform 450ms ease, box-shadow 450ms ease,
+            filter 450ms ease;
+          will-change: transform, box-shadow, filter;
+        "
+        onmouseenter="this.style.transform='translateY(-2px) scale(1.02)'; this.style.boxShadow='0 0 14px rgba(0,212,156,0.20), 0 0 2px rgba(0,212,156,0.35)'; this.style.filter='brightness(1.06)';"
+        onmouseleave="this.style.transform='none'; this.style.boxShadow='0 0 6px rgba(0,212,156,0.10)'; this.style.filter='none';"
+        onfocus="this.onmouseenter()"
+        onblur="this.onmouseleave()"
+        >HUMAIN Cloud</a
+      >
+      <a
+        href="https://www.humain.ai/en/AI-PC/"
+        target="_blank"
+        rel="noopener noreferrer"
+        style="
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+          margin: 6px 8px 6px 0;
+          background: #0f2a22;
+          border: 1px solid #1d4e3f;
+          color: #b9f1dd;
+          border-radius: 7px;
+          padding: 6px 12px;
+          font-size: 0.95rem;
+          text-decoration: none;
+          cursor: pointer;
+          box-shadow: 0 0 6px rgba(0, 212, 156, 0.1);
+          transition: transform 450ms ease, box-shadow 450ms ease,
+            filter 450ms ease;
+          will-change: transform, box-shadow, filter;
+        "
+        onmouseenter="this.style.transform='translateY(-2px) scale(1.02)'; this.style.boxShadow='0 0 14px rgba(0,212,156,0.20), 0 0 2px rgba(0,212,156,0.35)'; this.style.filter='brightness(1.06)';"
+        onmouseleave="this.style.transform='none'; this.style.boxShadow='0 0 6px rgba(0,212,156,0.10)'; this.style.filter='none';"
+        onfocus="this.onmouseenter()"
+        onblur="this.onmouseleave()"
+        >HUMAIN Horizon Pro</a
+      >
+      <a
+        href="https://www.humain.ai/en/create/"
+        target="_blank"
+        rel="noopener noreferrer"
+        style="
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+          margin: 6px 8px 6px 0;
+          background: #0f2a22;
+          border: 1px solid #1d4e3f;
+          color: #b9f1dd;
+          border-radius: 7px;
+          padding: 6px 12px;
+          font-size: 0.95rem;
+          text-decoration: none;
+          cursor: pointer;
+          box-shadow: 0 0 6px rgba(0, 212, 156, 0.1);
+          transition: transform 450ms ease, box-shadow 450ms ease,
+            filter 450ms ease;
+          will-change: transform, box-shadow, filter;
+        "
+        onmouseenter="this.style.transform='translateY(-2px) scale(1.02)'; this.style.boxShadow='0 0 14px rgba(0,212,156,0.20), 0 0 2px rgba(0,212,156,0.35)'; this.style.filter='brightness(1.06)';"
+        onmouseleave="this.style.transform='none'; this.style.boxShadow='0 0 6px rgba(0,212,156,0.10)'; this.style.filter='none';"
+        onfocus="this.onmouseenter()"
+        onblur="this.onmouseleave()"
+        >HUMAIN Create</a
+      >
+      <a
+        href="https://www.humain.ai/en/humain-iq/"
+        target="_blank"
+        rel="noopener noreferrer"
+        style="
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+          margin: 6px 8px 6px 0;
+          background: #0f2a22;
+          border: 1px solid #1d4e3f;
+          color: #b9f1dd;
+          border-radius: 7px;
+          padding: 6px 12px;
+          font-size: 0.95rem;
+          text-decoration: none;
+          cursor: pointer;
+          box-shadow: 0 0 6px rgba(0, 212, 156, 0.1);
+          transition: transform 450ms ease, box-shadow 450ms ease,
+            filter 450ms ease;
+          will-change: transform, box-shadow, filter;
+        "
+        onmouseenter="this.style.transform='translateY(-2px) scale(1.02)'; this.style.boxShadow='0 0 14px rgba(0,212,156,0.20), 0 0 2px rgba(0,212,156,0.35)'; this.style.filter='brightness(1.06)';"
+        onmouseleave="this.style.transform='none'; this.style.boxShadow='0 0 6px rgba(0,212,156,0.10)'; this.style.filter='none';"
+        onfocus="this.onmouseenter()"
+        onblur="this.onmouseleave()"
+        >HUMAIN IQ</a
+      >
     </div>
   </div>
-
-  <!-- CONTENT WRAPPER -->
-  <div style="max-width:980px; margin:24px auto 48px; padding:0 20px;">
-    <!-- Card: Overview + Mission -->
-    <div style="background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)) #14161b; border:1px solid rgba(0,212,156,0.3); border-radius:16px; padding:22px 26px; margin:16px 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 8px 24px -12px rgba(0,0,0,0.6), 0 0 24px -8px rgba(0,212,156,0.18);">
-      <div style="font-size: clamp(18px, 2.4vw, 22px); letter-spacing:0.2px; font-weight:650; margin:0 0 10px;">
+  <div style="max-width: 980px; margin: 24px auto 48px; padding: 0 20px">
+    <div
+      style="
+        background: linear-gradient(
+            180deg,
+            rgba(255, 255, 255, 0.02),
+            rgba(255, 255, 255, 0)
+          )
+          #14161b;
+        border: 1px solid rgba(0, 212, 156, 0.3);
+        border-radius: 16px;
+        padding: 22px 26px;
+        margin: 16px 0;
+        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) inset,
+          0 8px 24px -12px rgba(0, 0, 0, 0.6),
+          0 0 24px -8px rgba(0, 212, 156, 0.18);
+      "
+    >
+      <div
+        style="
+          font-size: clamp(18px, 2.4vw, 22px);
+          letter-spacing: 0.2px;
+          font-weight: 650;
+          margin: 0 0 10px;
+        "
+      >
         Overview
       </div>
-      <div style="margin:10px 0;">
+      <div style="margin: 10px 0">
         HUMAIN is a Public Investment Fund (PIF) company launched in
-        <span style="color:var(--accent); font-weight:600;">May&nbsp;2025</span>
-        to deliver end-to-end AI capabilities across the full value chain—from next-gen data centers and hyperscale infrastructure to advanced models (including Arabic multimodal LLMs) and sector solutions.
+        <span style="color: var(--accent); font-weight: 600"
+          >May&nbsp;2025</span
+        >
+        to deliver end-to-end AI capabilities across the full value chain—from
+        next-gen data centers and hyperscale infrastructure to advanced models
+        (including Arabic multimodal LLMs) and sector solutions.
       </div>
-      <div style="height:1px; margin:14px 0 10px; background: linear-gradient(90deg, transparent, rgba(0,212,156,0.3), transparent);" aria-hidden="true"></div>
-      <div style="font-size: clamp(18px, 2.4vw, 22px); letter-spacing:0.2px; font-weight:650; margin:0 0 10px;">
+      <div
+        style="
+          height: 1px;
+          margin: 14px 0 10px;
+          background: linear-gradient(
+            90deg,
+            transparent,
+            rgba(0, 212, 156, 0.3),
+            transparent
+          );
+        "
+        aria-hidden="true"
+      ></div>
+      <div
+        style="
+          font-size: clamp(18px, 2.4vw, 22px);
+          letter-spacing: 0.2px;
+          font-weight: 650;
+          margin: 0 0 10px;
+        "
+      >
         Mission
       </div>
-      <div style="margin:10px 0;">
+      <div style="margin: 10px 0">
         Accelerate real-world impact at scale via integrated AI layers.
       </div>
-      <div style="font-size:13px; color:var(--muted); margin-top:12px;">
+      <div style="font-size: 13px; color: var(--muted); margin-top: 12px">
         Website:
-        <a href="https://www.humain.ai/en/" target="_blank" rel="noopener" style="color:var(--link); text-decoration:none;">humain.ai</a>
+        <a
+          href="https://www.humain.ai/en/"
+          target="_blank"
+          rel="noopener"
+          style="color: var(--link); text-decoration: none"
+          >humain.ai</a
+        >
       </div>
     </div>
-    <!-- Card: Quick Facts -->
-    <div style="background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)) #14161b; border:1px solid rgba(0,212,156,0.3); border-radius:16px; padding:22px 26px; margin:16px 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 8px 24px -12px rgba(0,0,0,0.6), 0 0 24px -8px rgba(0,212,156,0.18);">
-      <div style="font-size: clamp(18px, 2.4vw, 22px); letter-spacing:0.2px; font-weight:650; margin:0 0 12px;">
+    <div
+      style="
+        background: linear-gradient(
+            180deg,
+            rgba(255, 255, 255, 0.02),
+            rgba(255, 255, 255, 0)
+          )
+          #14161b;
+        border: 1px solid rgba(0, 212, 156, 0.3);
+        border-radius: 16px;
+        padding: 22px 26px;
+        margin: 16px 0;
+        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) inset,
+          0 8px 24px -12px rgba(0, 0, 0, 0.6),
+          0 0 24px -8px rgba(0, 212, 156, 0.18);
+      "
+    >
+      <div
+        style="
+          font-size: clamp(18px, 2.4vw, 22px);
+          letter-spacing: 0.2px;
+          font-weight: 650;
+          margin: 0 0 12px;
+        "
+      >
         Quick Facts
       </div>
-      <div style="display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0,1fr));">
-        <div style="background:#0f1217; border:1px solid rgba(0,212,156,0.2); border-radius:12px; padding:12px 14px; text-align:center;">
-          <div style="color:var(--muted); font-size:12px; letter-spacing:0.3px;">Founded</div>
-          <div style="font-weight:700; margin-top:4px;">May 2025</div>
+      <div
+        style="
+          display: grid;
+          gap: 12px;
+          grid-template-columns: repeat(3, minmax(0, 1fr));
+        "
+      >
+        <div
+          style="
+            background: #0f1217;
+            border: 1px solid rgba(0, 212, 156, 0.2);
+            border-radius: 12px;
+            padding: 12px 14px;
+            text-align: center;
+          "
+        >
+          <div
+            style="color: var(--muted); font-size: 12px; letter-spacing: 0.3px"
+          >
+            Founded
+          </div>
+          <div style="font-weight: 700; margin-top: 4px">May 2025</div>
         </div>
-        <div style="background:#0f1217; border:1px solid rgba(0,212,156,0.2); border-radius:12px; padding:12px 14px; text-align:center;">
-          <div style="color:var(--muted); font-size:12px; letter-spacing:0.3px;">HQ</div>
-          <div style="font-weight:700; margin-top:4px;">Riyadh</div>
+        <div
+          style="
+            background: #0f1217;
+            border: 1px solid rgba(0, 212, 156, 0.2);
+            border-radius: 12px;
+            padding: 12px 14px;
+            text-align: center;
+          "
+        >
+          <div
+            style="color: var(--muted); font-size: 12px; letter-spacing: 0.3px"
+          >
+            HQ
+          </div>
+          <div style="font-weight: 700; margin-top: 4px">Riyadh</div>
         </div>
-        <div style="background:#0f1217; border:1px solid rgba(0,212,156,0.2); border-radius:12px; padding:12px 14px; text-align:center;">
-          <div style="color:var(--muted); font-size:12px; letter-spacing:0.3px;">Ownership</div>
-          <div style="font-weight:700; margin-top:4px;">PIF</div>
+        <div
+          style="
+            background: #0f1217;
+            border: 1px solid rgba(0, 212, 156, 0.2);
+            border-radius: 12px;
+            padding: 12px 14px;
+            text-align: center;
+          "
+        >
+          <div
+            style="color: var(--muted); font-size: 12px; letter-spacing: 0.3px"
+          >
+            Ownership
+          </div>
+          <div style="font-weight: 700; margin-top: 4px">PIF</div>
         </div>
       </div>
     </div>
-    <!-- Footer -->
-    <div style="text-align:center; color:var(--muted); font-size:12.5px; margin-top:18px;">
-      © HUMAIN — Styled with the HUMAIN accent <span style="color:var(--accent); font-weight:600;">#00D49C</span>.
+    <div
+      style="
+        text-align: center;
+        color: var(--muted);
+        font-size: 12.5px;
+        margin-top: 18px;
+      "
+    >
+      © HUMAIN — Styled with the HUMAIN accent
+      <span style="color: var(--accent); font-weight: 600">#00D49C</span>.
     </div>
   </div>
 </div>