Improve link styles

src/components/Navigation.astro

@@ -1,18 +1,25 @@
 <nav class="bg-whiteborder-gray-700 shadow-lg">
   <div class="flex justify-between py-3 px-4">
-    <span class="text-blue-700 text-base font-bold">Audacity</span>
+    <a href="/">
+      <span class="text-blue-700 text-base font-bold">Audacity</span></a
+    >
     <ul class="flex gap-4">
       <li>
-        <a class="hover:text-blue-500 text-gray-700 text-sm hover:underline"
-          >Downloads</a>
+        <a
+          href="/downloads"
+          class="hover:text-blue-500 text-gray-700 text-sm hover:underline"
+          >Downloads</a
+        >
       </li>
       <li>
         <a class="hover:text-blue-500 text-gray-700 text-sm hover:underline"
-          >Help</a>
+          >Help</a
+        >
       </li>
       <li>
         <a class="hover:text-blue-500 text-gray-700 text-sm hover:underline"
-          >Forum</a>
+          >Forum</a
+        >
       </li>
     </ul>
   </div>

src/components/PaginationButton.astro

@@ -7,7 +7,7 @@ interface Props {
 const { title, url } = Astro.props as Props;
 ---
 
-<div class="border border-1 rounded-sm">
+<div class="flex-1 border border-1 rounded-sm">
   <a href={url}
     ><div class="p-8">
       <h5 class="font-bold text-lg">{title}</h5>

src/pages/downloads.astro

@@ -1,20 +1,22 @@
 ---
+import PaginationButton from "../components/PaginationButton.astro";
 import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout title="Audacity | Downloads">
-  <main class="container mx-6 py-12">
-    <h4 class="text-4xl font-bold mb-6">Downloads</h4>
-    <ul class="space-y-4">
-      <li>
-        <a href="/downloads/download-for-windows">Download for Windows</a>
-      </li>
-      <li>
-        <a href="/downloads/download-for-mac">Download for Mac</a>
-      </li>
-      <li>
-        <a href="/downloads/download-for-linux">Download for Linux</a>
-      </li>
-    </ul>
+  <main>
+    <section>
+      <div
+        class="px-8 pt-10 pb-16 max-w-md sm:max-w-xl md:max-w-xl lg:max-w-4xl mx-auto"
+      >
+        <h4 class="text-4xl font-bold mb-6">Downloads</h4>
+
+        <div class="flex gap-4">
+          <PaginationButton title="Download for Windows" url="/downloads/download-for-windows"/>
+          <PaginationButton title="Download for Mac" url="/downloads/download-for-mac"/>
+          <PaginationButton title="Download for Linux" url="/downloads/download-for-"/>
+        </div>
+      </div>
+    </section>
   </main>
 </Layout>

src/pages/index.astro

@@ -12,7 +12,7 @@ import AudacityDark from "../assets/img/AudacityDark.png";
   <main>
     <section class="grid-background">
       <div
-        class="px-8 pt-10 pb-16 max-w-md sm:max-w-xl md:max-w-xl lg:max-w-4xl xl:max-w-6xl mx-auto lg:flex xl:gap-24"
+        class="px-8 pt-10 pb-16 max-w-md sm:max-w-xl md:max-w-xl lg:max-w-4xl xl:max-w-6xl mx-auto lg:flex lg:gap-8"
       >
         <div
           class="relative overflow-hidden shadow-inner bg-gray-200 rounded-md pt-6 pl-6 sm:pt-12 sm:pl-12 flex-1 lg:order-2"
@@ -20,7 +20,7 @@ import AudacityDark from "../assets/img/AudacityDark.png";
           <img
             src={AudacityLight}
             alt="Audacity"
-            class="absolute sm:scale-125 lg:scale-150 sm:origin-top-left -right-12 sm:-right-24 -bottom-10 sm:-bottom-20 z-10 lg:bottom-8 lg:-right-16 xl:-bottom-24 xl:-right-24"
+            class="absolute sm:scale-125 lg:scale-150 sm:origin-top-left -right-12 sm:-right-24 -bottom-10 sm:-bottom-20 z-10 lg:-bottom-16 lg:-right-24 xl:-bottom-24 xl:-right-24"
           />
           <img
             src={AudacityDark}
@@ -28,14 +28,14 @@ import AudacityDark from "../assets/img/AudacityDark.png";
             class="sm:scale-125 lg:scale-150 sm:origin-top-left z-0"
           />
         </div>
-        <div class="flex-1">
+        <div class="lg:flex lg:flex-col lg:justify-center flex-1">
           <h1
-            class="mt-6 sm:mt-8 text-2xl sm:text-4xl lg:text-5xl font-bold text-gray-900"
+            class="mt-6 sm:mt-8 text-2xl sm:text-4xl lg:text-4xl xl:text-5xl font-bold text-gray-900"
           >
             <span class="text-blue-500">Free</span>, open source, cross-platform
             audio software
           </h1>
-          <p class="mt-2 sm:mt-4 lg:mt-6 md:text-xl text-gray-600">
+          <p class="mt-2 sm:mt-4 xl:text-xl text-gray-600">
             A compelling and well rationalised value proposition statement for
             music producers that converts them.
           </p>