Create download page template

src/layouts/DownloadPageLayout.astro

@@ -0,0 +1,90 @@
+---
+import BaseLayout from "./BaseLayout.astro";
+import DownloadCard from "../components/card/DownloadCard";
+import IconLinkCard from "../components/card/IconLinkCard";
+import { Icon } from "astro-icon";
+import "../styles/icons.css";
+
+export interface Props {
+    title: string;
+    OS: string;
+    version: string;
+    releaseData: object;
+    iconName:string;
+    iconColor:string;
+    
+}
+const { title, OS, version, releaseData, iconName, iconColor } = Astro.props;
+
+---
+
+<BaseLayout title={title}>
+    <main class="max-w-screen-md mx-auto">
+        <section class="py-12">
+          <div class="flex flex-col gap-4 col-start-2 col-span-10 items-center">
+            <div class=`h-8 w-8 ${iconColor}`><Icon pack="fa-brands" name={iconName}/></div>
+            <h1
+              
+            >
+              Download for {`${OS}`}
+            </h1>
+            <div
+              class="flex flex-col text-center items-center sm:flex-row sm:align-left sm:gap-2"
+            >
+              <p>Current version {`${version}`}</p>
+              <p>|</p>
+              <a class="hyperlink"
+                >View release notes</a
+              >
+            </div>
+          </div>
+        </section>
+    
+        <section class="mx-4 sm:mx-12 flex flex-col gap-4">
+          {
+            releaseData.map((item) => {
+              return (
+                <DownloadCard
+                  client:load
+                  title={item.name}
+                  checksum={item.checksum}
+                  downloadURL={item.browser_download_url}
+                  buttonText="Download"
+                  downloadType={item.type}
+                />
+              );
+            })
+          }
+        </section>
+    
+        <section class="py-12 mx-4 sm:mx-12">
+          <h3
+            class="col-start-2 col-span-10 lg:col-start-1 lg:col-span-12"
+          >
+            Addtional resources
+          </h3>
+          <div
+            class="col-start-2 col-span-10 lg:col-start-1 lg:col-span-12 grid grid-cols-12 gap-6 mt-4 md:mt-8"
+          >
+            <IconLinkCard
+              icon="icon-export"
+              title="Ffmpeg import/export library"
+              description="An optional library which handles additional file formats (like WMA, M4A, AC3 and others)"
+              linkText="Link to ffmpeg library"
+              targetURL="/"
+            />
+            <IconLinkCard
+              icon="icon-mixer"
+              title="Plugins"
+              description="Elevate your productions with a vast selection of third-party plug-ins, including VST3, Nyquist and more."
+              linkText="Link to plugins page"
+              targetURL="/"
+            />
+          </div>
+        </section>
+    
+        <section class="mx-4 sm:mx-12 mb-20 xl:mb-24">
+          <slot/>
+        </section>
+    </main>
+</BaseLayout>