feat(website): display version to be downloaded

apps/website/src/components/DownloadButton.css

@@ -1,17 +1,27 @@
-.download-button {
-    &.big {
-        padding: 1em 2em;
-        margin: 1em 0;
+a.download-button {
+    display: none;    
+    align-items: center;
+    justify-content: center;
+    gap: 1em;
+
+    @media (min-width: 720px) {
+        display: flex !important;
     }
-    
+
     .platform {
         font-size: 0.75em;
         opacity: 0.75;
     }
+
+    &.big {
+        padding: 0.5em 3.5em;
+        margin: 1em 0;
+        gap: m;
+        text-align: left;
+
+        .platform {
+            display: block;
+        }
+    }
 }
 
-@media (min-width: 720px) {
-    .download-button {
-        display: inline-block !important;
-    }
-}

apps/website/src/components/DownloadButton.tsx

@@ -2,6 +2,7 @@ import { getRecommendedDownload } from "../download-helper";
 import "./DownloadButton.css";
 import Button from "./Button";
 import downloadIcon from "../assets/boxicons/bx-arrow-in-down-square-half.svg?raw";
+import packageJson from "../../../../package.json" with { type: "json" };
 
 interface DownloadButtonProps {
     big?: boolean;
@@ -17,7 +18,10 @@ export default function DownloadButton({ big }: DownloadButtonProps) {
            iconSvg={downloadIcon}
            text={<>
                 Download now{" "}
-                <span class="platform">for {name}</span>
+                {big
+                ? <span class="platform">v{packageJson.version} for {name}</span>
+                : <span class="platform">for {name}</span>
+                }
            </>}
         />
     )

apps/website/src/pages/GetStarted/get-started.tsx

@@ -7,6 +7,7 @@ import Button, { Link } from "../../components/Button";
 import Icon from "../../components/Icon";
 import helpIcon from "../../assets/boxicons/bx-help-circle.svg?raw";
 import "./get-started.css";
+import packageJson from "../../../../../package.json" with { type: "json" };
 
 export default function DownloadPage() {
     const [ currentArch, setCurrentArch ] = useState(getArchitecture());
@@ -14,7 +15,7 @@ export default function DownloadPage() {
 
     return (
         <>
-            <Section title="Download the desktop application" className="fill accented">
+            <Section title={`Download the desktop application (v${packageJson.version})`} className="fill accented">
                 <div className="architecture-switch">
                     <span>Architecture:</span>