Add download links

src/routes/downloads/+page.svelte

@@ -18,14 +18,14 @@
 />
 
 <div class="grid">
-  <article class="card">
+  <article class="main-card">
     <div>
       <h4>ExploreCraft: Marbled</h4>
       <p>
         The main way to play ExploreCraft. This is also the most stable version,
         so you're better off playing with this rather than the other ones.
       </p>
-      <button>Download</button>
+      <a role="button" href="https://gitpot.dev/attachments/7a690df1-d78f-41fd-a9f7-610eacb369a9">Download</a>
       <a href="#instructions" role="button" class="outline">Instructions</a>
     </div>
   </article>
@@ -34,7 +34,8 @@
 <!-- Unstable Versions -->
 <details>
   <!-- svelte-ignore a11y-no-redundant-roles -->
-  <summary class="secondary" role="button" id="unstable">Unstable Versions</summary>
+  <summary class="secondary" role="button" id="unstable">Unstable Releases
+  </summary>
   <div class="grid">
     <article>
       <div>
@@ -44,7 +45,8 @@
           If you'd like to keep playing the legacy version of ExploreCraft, you
           can download it here. Not recommended as it is not maintained anymore and incompatible with Marbled.
         </p>
-        <button>Download</button>
+        <a role="button" href="https://gitpot.dev/attachments/f249e088-14f3-4372-8aff-97f45810a763">Download</a>
+        <a href="#instructions" role="button" class="outline">Instructions</a>
       </div>
     </article>
     <article>
@@ -55,17 +57,17 @@
         of ExploreCraft which may have game-breaking bugs, unfinished features and
         world corruptions.
       </p>
-      <button>Download</button>
+      <a href="https://gitpot.dev/ExploreCraft/modpack" role="button">Download</a>
       <a href="#instructions" role="button" class="outline">Instructions</a>
     </article>
   </div>
 </details>
 
+
 <!-- Instructions -->
 <h2 id="instructions">Instructions</h2>
 <p>Need help installing ExploreCraft? No problem! Just follow these few easy steps.</p>
 
-
 <h3>Installation</h3>
 <ul>
   <li>
@@ -75,31 +77,65 @@
     <br>Additionaly, you'll need to download one of the above instances (.zip files).
   </li>
   <li>
-    Create a new instance by using Ctrl-N (Or CMD-N on MacOS).
+    Create a new instance by using Ctrl-N (Or CMD-N on MacOS).<br>
-  </li>
+    Open the "Import from ZIP" tab, and choose the file you just downloaded.<br>
-  <li>
-    Open the "Import from ZIP" tab, and choose the file you just downloaded.
-  </li>
-  <li>
     You can also give it a catchy name and a snazzy icon while you're at it.
+    <img class="guide" alt="instance creation" src="assets/images/guide/instance-creation.png">
+  </li>
+  <li>
+    Once the import is complete, you can configure your instance however you like by pressing Ctrl-I (or CMD-I on a Mac.)
+  </li>
+  <li>
+    It is time to launch!<br>
+    You should see a "packwiz" window appear which will download all the mods you need.<br>
+    This tool is also responsible for keeping the modpack up to date.
+    <ul>
+      <li class="indented">
+        A window will appear asking you which optional mods you'd like to download. As it implies, none of them are necessary but recommended.
+      </li>
+      <li class="indented">
+        Mods downloading:
+      </li>
+      <li class="indented">
+        If a screen similar to this one appears, don't fret!
+        Just follow the guide
+        <a href="https://gitpot.dev/ExploreCraft/modpack/src/branch/marbled/manual-download.md" rel="noopener noreferrer" target="_blank">here</a>
+        to continue:
+      </li>
+    </ul>
+  </li>
+  <li>
+    The game will now boot up, and you'll be ready to rock! Have fun :D
   </li>
 </ul>
 
 
 <style>
-  .card {
+  .main-card {
     width: 50%;
-    margin-left: 25%;
+    justify-self: center;
   }
   a[role="button"]{
     width: 100%;
+    margin-bottom: 1em;
+  }
+  li {
+    list-style: decimal;
+  }
+  li .indented {
+    list-style: disc;
+  }
+  img.guide {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    justify-self: center;
+    align-self: center;
+    border-radius: 1em;
+    transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+  }
+  img.guide:hover {
+    transform: scale(1.005);
+    box-shadow: 0px 0px 1em rgba(32, 32, 32, 0.6);
+    cursor: pointer;
   }
-	/* button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		top: auto;
-		bottom: 1em;
-		position: static;
-	} */
 </style>