diff --git a/apps/website/src/components/DownloadButton.css b/apps/website/src/components/DownloadButton.css
index 854f65530..d7ed4cf8f 100644
--- a/apps/website/src/components/DownloadButton.css
+++ b/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;
- }
-}
\ No newline at end of file
diff --git a/apps/website/src/components/DownloadButton.tsx b/apps/website/src/components/DownloadButton.tsx
index c5b1d4d6a..da5786879 100644
--- a/apps/website/src/components/DownloadButton.tsx
+++ b/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{" "}
- for {name}
+ {big
+ ? v{packageJson.version} for {name}
+ : for {name}
+ }
>}
/>
)
diff --git a/apps/website/src/pages/GetStarted/get-started.tsx b/apps/website/src/pages/GetStarted/get-started.tsx
index 4b6d70074..3c6ba49b6 100644
--- a/apps/website/src/pages/GetStarted/get-started.tsx
+++ b/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 (
<>
-