changes

website/src/components/Hero.astro

@@ -1,7 +1,7 @@
 ---
 import AppWindow from "./AppWindow.astro";
-import DownloadButtons from "./DownloadButtons.astro";
 import OfferBadge from "./OfferBadge.astro";
+import { site, platforms } from "../data/site";
 ---
 
 <section class="hero">
@@ -11,63 +11,126 @@ import OfferBadge from "./OfferBadge.astro";
       <span class="book-accent">Own</span> every word.
     </h1>
     <p class="lede hero__lede">
-      Margin is a calm, offline writing studio for authors. Write your book, format it
-      beautifully, and send it to every store and to print, all from your own machine. No
-      subscription, no account. Buy once, own it forever.
+      A calm, offline studio to write, format, and publish your book to every store and to
+      print. No subscription, no account. Buy once, own it forever.
     </p>
-
-    <div class="hero__cta">
-      <DownloadButtons large />
-    </div>
-    <div class="hero__offer">
-      <OfferBadge />
-    </div>
   </div>
 
   <div class="container hero__art">
     <AppWindow />
   </div>
+
+  <div class="container hero__get" id="download">
+    <div class="hero__buttons" data-osrow>
+      {
+        platforms.map((p) => (
+          <a
+            class="osbtn"
+            href={site.releasesUrl}
+            data-download-os={p.id}
+            rel="noopener"
+            download
+          >
+            <img class="osbtn__icon" src={`/logos/${p.logo}`} alt="" />
+            <span>Download for {p.label}</span>
+          </a>
+        ))
+      }
+    </div>
+    <p class="hero__meta">
+      <span data-version>v0.1.2</span> · Works offline · No account
+    </p>
+    <div class="hero__offer">
+      <OfferBadge />
+    </div>
+  </div>
 </section>
 
 <style>
   .hero {
-    padding-top: clamp(48px, 7vw, 92px);
-    padding-bottom: clamp(40px, 6vw, 72px);
+    padding-top: clamp(36px, 4.5vw, 60px);
+    padding-bottom: clamp(48px, 6vw, 80px);
     background:
       radial-gradient(120% 90% at 50% -10%, var(--paper) 0%, transparent 60%),
       var(--shell);
   }
   .hero__head {
     text-align: center;
-    max-width: 760px;
+    max-width: 720px;
   }
   h1 {
-    font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.5rem);
+    font-size: clamp(2.4rem, 1.6rem + 3.4vw, 3.9rem);
     letter-spacing: -0.02em;
-    margin-bottom: 22px;
+    margin-bottom: 18px;
   }
   .hero__lede {
     margin-inline: auto;
-    max-width: 56ch;
+    max-width: 50ch;
   }
-  .hero__cta {
+  .hero__art {
+    margin-top: clamp(32px, 4vw, 48px);
+    max-width: 1000px;
+  }
+  .hero__get {
+    margin-top: clamp(24px, 3vw, 32px);
+    scroll-margin-top: 96px;
+  }
+  .hero__buttons {
     display: flex;
+    flex-wrap: wrap;
     justify-content: center;
-    margin-top: 34px;
+    gap: 12px;
   }
-  .hero__cta :global(.dl) {
+  .osbtn {
+    display: inline-flex;
     align-items: center;
+    gap: 10px;
+    padding: 0.82em 1.35em;
+    background: #ffffff;
+    border: 1px solid var(--line-strong);
+    border-radius: 999px;
+    color: #23201b;
+    font-family: var(--font-ui);
+    font-size: 1rem;
+    font-weight: 600;
+    box-shadow: var(--shadow-page);
+    transition:
+      transform 0.18s var(--ease),
+      box-shadow 0.18s var(--ease),
+      border-color 0.18s var(--ease);
   }
-  .hero__cta :global(.dl__os) {
-    justify-content: center;
+  .osbtn:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-pop);
+  }
+  .osbtn.is-detected {
+    border-color: var(--ink);
+  }
+  .osbtn__icon {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    object-fit: contain;
+  }
+  .hero__meta {
+    margin: 16px 0 0;
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+    font-size: 0.8rem;
+    color: var(--ink-faint);
+    text-align: center;
   }
   .hero__offer {
     display: flex;
     justify-content: center;
-    margin-top: 30px;
+    margin-top: 22px;
   }
-  .hero__art {
-    margin-top: clamp(44px, 6vw, 72px);
-    max-width: 1000px;
+  @media (max-width: 480px) {
+    .hero__buttons {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    .osbtn {
+      justify-content: center;
+    }
   }
 </style>