Update index.html

index.html

@@ -1,243 +1,38 @@
-```html
 <!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="theme-color" content="#08111f">
-  <meta
-    name="description"
-    content="Open models, datasets, and benchmarks for Persian text, speech, vision, and document AI."
-  >
-  <title>PersianML — Open Persian AI</title>
-
-  <style>
-    :root {
-      --bg: #08111f;
-      --surface: #111d30;
-      --text: #f3f7fb;
-      --muted: #a9b7c9;
-      --line: #263955;
-      --mint: #4de0bd;
-      --violet: #a49aff;
-    }
-
-    * {
-      box-sizing: border-box;
-    }
-
-    body {
-      margin: 0;
-      color: var(--text);
-      background: var(--bg);
-      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      line-height: 1.5;
-    }
-
-    a {
-      color: inherit;
-    }
-
-    .shell {
-      width: min(960px, calc(100% - 32px));
-      margin: auto;
-    }
-
-    header,
-    footer {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 20px;
-      padding: 22px 0;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    }
-
-    .brand {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      font-weight: 800;
-      text-decoration: none;
-    }
-
-    .mark {
-      display: grid;
-      place-items: center;
-      width: 34px;
-      height: 34px;
-      color: var(--bg);
-      background: var(--mint);
-      border-radius: 10px;
-      font-weight: 900;
-    }
-
-    .hub-link,
-    .button {
-      padding: 10px 15px;
-      border-radius: 999px;
-      font-size: 13px;
-      font-weight: 800;
-      text-decoration: none;
-    }
-
-    .hub-link {
-      border: 1px solid var(--line);
-      background: var(--surface);
-    }
-
-    .hero {
-      padding: 80px 0 60px;
-    }
-
-    .eyebrow {
-      color: var(--mint);
-      font-size: 11px;
-      font-weight: 800;
-      letter-spacing: 0.12em;
-      text-transform: uppercase;
-    }
-
-    h1 {
-      max-width: 760px;
-      margin: 14px 0;
-      font-size: clamp(52px, 9vw, 88px);
-      line-height: 0.95;
-      letter-spacing: -0.07em;
-    }
-
-    h1 span {
-      color: var(--violet);
-    }
-
-    .lead {
-      max-width: 650px;
-      margin: 0 0 26px;
-      color: var(--muted);
-      font-size: 18px;
-    }
-
-    .button {
-      display: inline-block;
-      color: var(--bg);
-      background: var(--mint);
-    }
-
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 12px;
-      padding-bottom: 70px;
-    }
-
-    .card {
-      padding: 20px;
-      background: var(--surface);
-      border: 1px solid var(--line);
-      border-radius: 16px;
-    }
-
-    .card h2 {
-      margin: 0 0 8px;
-      font-size: 17px;
-    }
-
-    .card p {
-      margin: 0;
-      color: var(--muted);
-      font-size: 13px;
-    }
-
-    footer {
-      border-top: 1px solid rgba(255, 255, 255, 0.08);
-      border-bottom: 0;
-      color: var(--muted);
-      font-size: 12px;
-    }
-
-    footer a {
-      color: var(--text);
-      font-weight: 800;
-      text-decoration: none;
-    }
-
-    @media (max-width: 760px) {
-      .hero {
-        padding: 60px 0 44px;
-      }
-
-      .grid {
-        grid-template-columns: repeat(2, 1fr);
-      }
-    }
-
-    @media (max-width: 480px) {
-      .grid {
-        grid-template-columns: 1fr;
-      }
-    }
-  </style>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>PersianML</title>
+	<link rel="stylesheet" href="style.css">
 </head>
-
 <body>
-  <div class="shell">
-    <header>
-      <a class="brand" href="https://huggingface.co/PersianML">
-        <span class="mark">P</span>
-        PersianML
-      </a>
-
-      <a class="hub-link" href="https://huggingface.co/PersianML">
-        Open Hub
-      </a>
-    </header>
-
-    <main>
-      <section class="hero">
-        <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 &rarr;
-        </a>
-      </section>
-
-      <section class="grid" aria-label="PersianML resources">
-        <article class="card">
-          <h2>Text</h2>
-          <p>Language models, tokenizers, embeddings, and retrieval.</p>
-        </article>
-
-        <article class="card">
-          <h2>Speech</h2>
-          <p>ASR, TTS, audio models, and speech datasets.</p>
-        </article>
-
-        <article class="card">
-          <h2>Vision</h2>
-          <p>OCR, handwriting, documents, and multimodal models.</p>
-        </article>
-
-        <article class="card">
-          <h2>Evaluation</h2>
-          <p>Benchmarks, test sets, and reproducible comparisons.</p>
-        </article>
-      </section>
-    </main>
-
-    <footer>
-      <span>PersianML</span>
-      <a href="https://huggingface.co/PersianML">Hugging Face &rarr;</a>
-    </footer>
-  </div>
+	<main class="card">
+		<div class="header">
+			<img src="image.png" alt="PersianML logo">
+
+			<div>
+				<span class="eyebrow">Open Persian AI</span>
+				<h1>PersianML</h1>
+			</div>
+		</div>
+
+		<p>
+			Open models, datasets, and benchmarks for Persian text, speech,
+			OCR, vision, and document intelligence.
+		</p>
+
+		<div class="tags">
+			<span>Language</span>
+			<span>ASR &amp; TTS</span>
+			<span>OCR</span>
+			<span>Datasets</span>
+			<span>Evaluation</span>
+		</div>
+
+		<a href="https://huggingface.co/PersianML">
+			Explore PersianML <span>→</span>
+		</a>
+	</main>
 </body>
-</html>
-```
+</html>