Update index.html

index.html

@@ -31,16 +31,47 @@
     transition: all 0.15s ease;
   }
   .links a:hover { border-color: #f5a623; color: #f5a623; }
-  .notice {
-    margin-top: 1.5rem; padding: 0.9rem 1rem; text-align: left;
-    border-left: 3px solid #f5a623; border-radius: 6px; background: rgba(128,128,128,0.08);
-    font-size: 0.82rem; line-height: 1.5;
+
+  /* ── Important Callout ── */
+  .callout {
+    margin-top: 1.5rem;
+    padding: 0.9rem 1rem;
+    text-align: left;
+    border-left: 3px solid #8b5cf6;
+    border-radius: 6px;
+    background: rgba(139, 92, 246, 0.08);
+    font-size: 0.82rem;
+    line-height: 1.5;
+  }
+  .callout__header {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    margin-bottom: 0.35rem;
+  }
+  .callout__icon {
+    width: 18px;
+    height: 18px;
+    color: #a78bfa;
+    flex-shrink: 0;
+  }
+  .callout__title {
+    color: #a78bfa;
+    font-weight: 600;
+    font-size: 0.9rem;
+    letter-spacing: -0.01em;
+  }
+  .callout p {
+    margin: 0;
+    font-size: 0.82rem;
+    opacity: 0.9;
   }
-  .notice strong { display: block; margin-bottom: 0.25rem; }
-  .notice p { margin: 0; font-size: 0.82rem; }
   .install {
-    margin-top: 0.65rem; padding: 0.55rem 0.7rem; border-radius: 6px;
-    background: rgba(128,128,128,0.12); overflow-x: auto;
+    margin-top: 0.65rem;
+    padding: 0.55rem 0.7rem;
+    border-radius: 6px;
+    background: rgba(128,128,128,0.12);
+    overflow-x: auto;
   }
   .install code { padding: 0; background: transparent; white-space: nowrap; }
 </style>
@@ -50,14 +81,23 @@
   <img src="https://cdn-uploads.huggingface.co/production/uploads/629631215de6e0eb3292ae91/klgAvDJagwTHD2Bxliz8U.png" alt="kerasformers logo">
   <h1>kerasformers</h1>
   <p>KerasFormers: Open-source Keras 3 collection of pretrained models across Vision, LLM, VLM, Depth, Speech, and more</p>
+
   <nav class="links">
     <a href="https://github.com/IMvision12/KerasFormers">GitHub</a>
     <a href="https://imvision12.github.io/KerasFormers/">Docs</a>
     <a href="https://pypi.org/project/kerasformers/">PyPI</a>
   </nav>
-  <section class="notice">
-    <strong>[!IMPORTANT]</strong>
-    <p>kerasformers is under active development. We are currently migrating from GitHub-release-hosted weights to the Hugging Face Hub, with proper typed config files and weights for each model. During this transition we recommend installing directly from the `main` branch on GitHub rather than from PyPI:</p>
+
+  <section class="callout">
+    <div class="callout__header">
+      <svg class="callout__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+        <line x1="12" y1="8" x2="12" y2="12"/>
+        <line x1="12" y1="16" x2="12.01" y2="16"/>
+      </svg>
+      <span class="callout__title">Important</span>
+    </div>
+    <p>kerasformers is under active development. We are currently migrating from GitHub-release-hosted weights to the Hugging Face Hub, with proper typed config files and weights for each model. During this transition we recommend installing directly from the <code>main</code> branch on GitHub rather than from PyPI:</p>
     <div class="install">
       <code>pip install git+https://github.com/IMvision12/KerasFormers.git</code>
     </div>