Move getting started actions above hero

getsentry · Jan 22, 2025 · f451e73 · f451e73
1 parent 4bf3776
commit f451e73
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 29 deletions.
diff --git a/packages/website/src/components/DownloadButton.astro b/packages/website/src/components/DownloadButton.astro
@@ -46,22 +46,18 @@ const links = assets.map(asset => {
   }
 </style>
 
-<div class="p-4">
-  <div class="group relative text-center">
-    or download for<br />
-    {
-      links.map(link => (
-        <a
-          href={link.url}
-          class="downloadButton inline-flex items-center justify-center px-2 py-2 mx-2 text-base text-s text-white bg-gray-800 border border-transparent rounded-md hover:bg-gray-700 no-underline"
-        >
-          {link.name}
-        </a>
-      ))
-    }
-    <br />
-    <span class="text-xs text-gray-400">latest version: {version}</span>
-  </div>
+<div class="group relative text-center text-sm">
+  <div>{
+    links.map(link => (
+      <a
+        href={link.url}
+        class="downloadButton inline-flex items-center justify-center px-2 py-2 mx-2 text-base text-s text-white bg-gray-800 border border-transparent rounded-md hover:bg-gray-700 no-underline"
+      >
+        {link.name}
+      </a>
+    ))
+  }</div>
+  <div class="text-xs text-gray-400 mt-2">latest version: {version}</div>
 </div>
 
 <script>

diff --git a/packages/website/src/components/Hero.astro b/packages/website/src/components/Hero.astro
@@ -63,7 +63,6 @@ import DownloadButton from './DownloadButton.astro';
     text-align: center;
     max-width: 80%;
     opacity: 0;
-    margin-bottom: 3rem;
     animation: fade-in 1s ease-in-out 1s forwards;
   }
 
@@ -75,14 +74,6 @@ import DownloadButton from './DownloadButton.astro';
     animation: fade-in 1s ease-in-out 1s forwards;
   }
 
-  .actions {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: 1rem;
-    gap: 2rem;
-  }
-
   @media (min-width: 768px) {
     .sub-heading {
       letter-spacing: 3px;
@@ -92,10 +83,11 @@ import DownloadButton from './DownloadButton.astro';
 
 <div class="wrapper">
   <h1 class="neon-header">Sentry for Development</h1>
-  <div class="sub-heading">Spotlight is a highly customizable debug tool embedded in your web app.</div>
-  <img src="/images/trace.png" alt="Spotlight Hero" class="hero-image" />
-  <p class="actions">
+  <div class="sub-heading mb-4">Spotlight is a highly customizable debug tool embedded in your web app.</div>
+  <div class="flex flex-col items-center justify-center gap-2 py-4 mb-4">
     <ButtonLink href="/about/">Get Started</ButtonLink>
+    <div class="text-xs uppercase">or download for</div>
     <DownloadButton>Download for Mac</DownloadButton>
-  </p>
+  </div>
+  <img src="/images/trace.png" alt="Spotlight Hero" class="hero-image" />
 </div>