Migrate to astro

src/components/home/introduction.astro

@@ -0,0 +1,71 @@
+---
+import Button from "@/components/button.astro";
+import Link from "@/components/link.astro";
+---
+
+<header class="flex flex-col md:gap-12 gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl mx-auto w-full">
+  <div class="flex items-center justify-between">
+    <a href="/" aria-label="Home">
+      <img
+        alt="Marios Antonoudiou"
+        src="/mariosant.webp"
+        width="64"
+        height="64"
+        class="w-16 h-16 rounded-full border border-gray-200 dark:border-gray-800 dark:bg-slate-300 block"
+        loading="eager"
+      />
+    </a>
+    <div class="flex gap-3 items-center justify-end">
+      <Link
+        href="/"
+        variant="default"
+        class="text-slate-600 dark:text-slate-400 font-semibold"
+        activeClass="text-slate-800 dark:text-slate-200 underline"
+        isActive={Astro.url.pathname === "/"}
+      >
+        Home
+      </Link>
+      <Link
+        href="/articles"
+        variant="default"
+        class="text-slate-600 dark:text-slate-400 font-semibold"
+        activeClass="text-slate-800 dark:text-slate-200 underline"
+        isActive={Astro.url.pathname.startsWith("/articles")}
+      >
+        Articles
+      </Link>
+    </div>
+  </div>
+  <h1 class="md:text-xl text-lg font-semibold">
+    <Link href="mailto:mariosant@sent.com" variant="primary">Marios Antonoudiou</Link>, AI product engineer.<br />
+    Building AI-powered products that feel simple, useful, and ready for real users.
+  </h1>
+  <p class="text-slate-800 dark:text-slate-200">
+    I design and ship <span class="font-semibold">AI-enabled product experiences</span> across
+    frontend architecture, interaction design, and product workflows. My focus is turning complex
+    systems, data, and model capabilities into software people can actually
+    <span class="font-semibold">understand, trust, and use</span>.
+  </p>
+  <div class="flex gap-4 overflow-x-auto">
+    <Button
+      size="xl"
+      variant="primary"
+      icon="mynaui:calendar"
+      href="https://cal.com/mariosant/30min"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Arrange a call
+    </Button>
+    <Button
+      size="xl"
+      variant="neutral"
+      icon="mynaui:envelope"
+      href="mailto:mariosant@sent.com"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Send a message
+    </Button>
+  </div>
+</header>