Update index.html

index.html

@@ -5,21 +5,20 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta
     name="description"
-    content="Open models, datasets, and benchmarks for Persian AI."
+    content="PersianML develops open models, datasets, and benchmarks for Persian AI."
   >
-  <title>PersianML — Open Persian AI</title>
+  <title>PersianML</title>
 
   <style>
     :root {
-      --cream: #fffaf0;
-      --ink: #17231e;
-      --red: #df2431;
-      --green: #079667;
-      --blue: #3366d6;
-      --violet: #7657d8;
-      --saffron: #f3ad2d;
-      --white: #ffffff;
-      --line: #e8dfd0;
+      --cream: #fff9ee;
+      --ink: #18231f;
+      --muted: #66726c;
+      --red: #dc2430;
+      --green: #079367;
+      --blue: #4169d8;
+      --saffron: #f4b43f;
+      --white: #fff;
     }
 
     * {
@@ -27,286 +26,107 @@
     }
 
     body {
+      min-height: 100vh;
       margin: 0;
+      display: grid;
+      place-items: center;
+      padding: 24px;
       color: var(--ink);
       background:
-        radial-gradient(circle at 10% 10%, rgba(223, 36, 49, 0.1), transparent 28rem),
-        radial-gradient(circle at 90% 20%, rgba(7, 150, 103, 0.12), transparent 30rem),
+        radial-gradient(circle at 15% 20%, #dc24301a, transparent 28%),
+        radial-gradient(circle at 85% 75%, #07936720, transparent 30%),
         var(--cream);
-      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    }
-
-    a {
-      color: inherit;
-    }
-
-    .shell {
-      width: min(1040px, calc(100% - 32px));
-      margin: auto;
-    }
-
-    header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 22px 0;
-    }
-
-    .brand {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      font-size: 18px;
-      font-weight: 900;
-      text-decoration: none;
-    }
-
-    .brand img {
-      width: 42px;
-      height: 42px;
-      object-fit: contain;
-      border-radius: 12px;
-    }
-
-    .hub-link,
-    .button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 11px 17px;
-      border-radius: 999px;
-      font-size: 13px;
-      font-weight: 800;
-      text-decoration: none;
+      font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
     }
 
-    .hub-link {
-      color: var(--green);
+    main {
+      width: min(860px, 100%);
+      padding: clamp(32px, 7vw, 72px);
       background: var(--white);
-      border: 1px solid var(--line);
-    }
-
-    .hero {
-      display: grid;
-      grid-template-columns: 1.2fr 0.8fr;
-      gap: 60px;
-      align-items: center;
-      padding: 68px 0 72px;
+      border: 1px solid #eadfce;
+      border-radius: 32px;
+      box-shadow: 0 24px 70px #503c2418;
     }
 
-    .eyebrow {
+    .label {
       color: var(--red);
       font-size: 12px;
       font-weight: 900;
-      letter-spacing: 0.13em;
+      letter-spacing: .14em;
       text-transform: uppercase;
     }
 
     h1 {
-      margin: 14px 0 18px;
-      font-size: clamp(52px, 8vw, 88px);
-      line-height: 0.94;
-      letter-spacing: -0.07em;
+      margin: 12px 0 18px;
+      font-size: clamp(56px, 11vw, 104px);
+      line-height: .9;
+      letter-spacing: -.075em;
     }
 
     h1 span {
       color: var(--green);
     }
 
-    .lead {
-      max-width: 620px;
-      margin: 0 0 26px;
-      color: #5d6b64;
-      font-size: 18px;
+    .intro {
+      max-width: 680px;
+      margin: 0;
+      color: var(--muted);
+      font-size: clamp(17px, 2.5vw, 21px);
       line-height: 1.55;
     }
 
-    .button {
-      color: var(--white);
-      background: var(--red);
-      box-shadow: 0 12px 26px rgba(223, 36, 49, 0.22);
-    }
-
-    .hero-art {
-      display: grid;
-      place-items: center;
-      padding: 22px;
-      background: var(--white);
-      border: 1px solid var(--line);
-      border-radius: 32px;
-      transform: rotate(2deg);
-      box-shadow: 0 24px 60px rgba(68, 52, 35, 0.12);
-    }
-
-    .hero-art img {
-      display: block;
-      width: 100%;
-      max-width: 360px;
-      border-radius: 22px;
+    .areas {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 32px;
     }
 
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 14px;
-      padding-bottom: 76px;
+    .area {
+      padding: 10px 15px;
+      border-radius: 999px;
+      font-size: 13px;
+      font-weight: 800;
     }
 
-    .card {
-      min-height: 180px;
-      padding: 22px;
-      border-radius: 22px;
+    .text {
       color: var(--white);
-    }
-
-    .card:nth-child(1) {
       background: var(--red);
     }
 
-    .card:nth-child(2) {
+    .speech {
+      color: var(--white);
       background: var(--green);
     }
 
-    .card:nth-child(3) {
+    .vision {
+      color: var(--white);
       background: var(--blue);
     }
 
-    .card:nth-child(4) {
-      color: var(--ink);
+    .evaluation {
       background: var(--saffron);
     }
-
-    .card-number {
-      font-size: 12px;
-      font-weight: 900;
-      opacity: 0.72;
-    }
-
-    .card h2 {
-      margin: 44px 0 8px;
-      font-size: 22px;
-      letter-spacing: -0.04em;
-    }
-
-    .card p {
-      margin: 0;
-      font-size: 13px;
-      line-height: 1.45;
-      opacity: 0.86;
-    }
-
-    footer {
-      display: flex;
-      justify-content: space-between;
-      gap: 20px;
-      padding: 28px 0;
-      border-top: 1px solid var(--line);
-      color: #6e7a74;
-      font-size: 12px;
-    }
-
-    footer a {
-      color: var(--green);
-      font-weight: 800;
-      text-decoration: none;
-    }
-
-    @media (max-width: 800px) {
-      .hero {
-        grid-template-columns: 1fr;
-        gap: 36px;
-        padding-top: 48px;
-      }
-
-      .hero-art {
-        max-width: 440px;
-      }
-
-      .grid {
-        grid-template-columns: repeat(2, 1fr);
-      }
-    }
-
-    @media (max-width: 480px) {
-      .grid {
-        grid-template-columns: 1fr;
-      }
-
-      .card {
-        min-height: 150px;
-      }
-    }
   </style>
 </head>
 
 <body>
-  <div class="shell">
-    <header>
-      <a class="brand" href="https://huggingface.co/PersianML">
-        <img src="image.png" alt="">
-        PersianML
-      </a>
-
-      <a class="hub-link" href="https://huggingface.co/PersianML">
-        Open Hub
-      </a>
-    </header>
-
-    <main>
-      <section class="hero">
-        <div>
-          <div class="eyebrow">Open Persian AI</div>
-
-          <h1>
-            Build better AI for <span>Persian.</span>
-          </h1>
-
-          <p class="lead">
-            Open models, datasets, and benchmarks for Persian text, speech,
-            vision, and document intelligence.
-          </p>
-
-          <a class="button" href="https://huggingface.co/PersianML">
-            Explore repositories →
-          </a>
-        </div>
-
-        <div class="hero-art">
-          <img src="image.png" alt="PersianML logo">
-        </div>
-      </section>
-
-      <section class="grid" aria-label="PersianML resources">
-        <article class="card">
-          <div class="card-number">01</div>
-          <h2>Text</h2>
-          <p>Language models, tokenizers, embeddings, and retrieval.</p>
-        </article>
-
-        <article class="card">
-          <div class="card-number">02</div>
-          <h2>Speech</h2>
-          <p>ASR, TTS, audio models, and speech datasets.</p>
-        </article>
-
-        <article class="card">
-          <div class="card-number">03</div>
-          <h2>Vision</h2>
-          <p>OCR, handwriting recognition, and document intelligence.</p>
-        </article>
-
-        <article class="card">
-          <div class="card-number">04</div>
-          <h2>Evaluation</h2>
-          <p>Benchmarks, test sets, and reproducible comparisons.</p>
-        </article>
-      </section>
-    </main>
-
-    <footer>
-      <span>PersianML · Open Persian AI</span>
-      <a href="https://huggingface.co/PersianML">Hugging Face →</a>
-    </footer>
-  </div>
+  <main>
+    <div class="label">Open Persian AI</div>
+
+    <h1>Persian<span>ML</span></h1>
+
+    <p class="intro">
+      We develop open models, datasets, and benchmarks for Persian text,
+      speech, OCR, document understanding, and multimodal AI.
+    </p>
+
+    <div class="areas" aria-label="PersianML focus areas">
+      <span class="area text">Text &amp; Language</span>
+      <span class="area speech">ASR &amp; TTS</span>
+      <span class="area vision">Vision &amp; OCR</span>
+      <span class="area evaluation">Data &amp; Evaluation</span>
+    </div>
+  </main>
 </body>
 </html>