feat: more complete downloads page

Author: fizzyizzy05

content/downloads.md

@@ -2,6 +2,24 @@
 title: "Download Apollo"
 ---
 
-We're excited to see you try out Apollo. If this is your first time, make sure to read the [frequently asked questions](https://docs.getapollo.dev/docs/getting-started/frequently-asked-questions) and [installation guide](https://docs.getapollo.dev/docs/getting-started/install/).
+We're excited to see you try out Apollo. If this is your first time, make sure to read the [frequently asked questions](https://docs.getapollo.dev/docs/getting-started/frequently-asked-questions) and [installation guide](https://docs.getapollo.dev/docs/getting-started/install/). 
 
+You should make sure to choose the right ISO for your hardware as they include the neccessary drivers. All images on this page are for **x86_64** computers. We also recommend verifying ISOs against the provided hash to ensure that they are legitimate.
 
+**Note:** ISOs are still a work in progress and unavailable at this time!
+
+{{ download(
+    title="Apollo",
+    description="For computers with AMD and Intel graphics."
+    image_name="apollo",
+    sha256_sum="undefined",
+    image_link="#"
+) }}
+
+{{ download(
+    title="Apollo for NVIDIA systems",
+    description="For laptops and desktops with Turing (GTX 16xx/RTX 20xx) or newer NVIDIA graphics.",
+    image_name="apollo-nvidia",
+    sha256_sum="undefined",
+    image_link="#"
+) }}

sass/_index.scss

@@ -77,24 +77,6 @@ body {
             justify-content: center;
             margin-block: 0;
             gap: 16px;
-
-            a.button#download-button {
-                background-color: color.adjust(
-                    $apollo-theme-colour,
-                    $saturation: -5%,
-                    $lightness: -5%,
-                );
-                color: white;
-            }
-
-            a.button#download-button:hover {
-                background-color: color.adjust(
-                    $apollo-theme-colour,
-                    $saturation: -5%,
-                    $lightness: -10%,
-                );
-                color: white;
-            }
         }
 
         img#landing-screenshot {

sass/style.scss

@@ -5,4 +5,5 @@
 @use 'body';
 @use 'footer';
 
-@use 'index';
+@use 'index';
+@use 'download'

templates/shortcodes/download.html

@@ -0,0 +1,10 @@
+<div class="container download-container">
+    <h2>{{title}}</h2>
+    <p class="info"><em>Image name: <code>{{image_name}}</code></em></p>
+    <p class="info"><em>SHA256 sum: <code>{{sha256_sum}}</code></em></p>
+    <p class="description">{{description}}</p>
+
+    <div class="button-container">
+        <a class="button suggestive" href="{{ image_link }}">Download {{image_name}}</a>
+    </div>
+</div>