From 814192c0b0f8279eb9b4b3ee925524047b1b49c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 4 Dec 2025 14:17:53 -0600
Subject: [PATCH] feat: add Giveaway component for Music Box event with
 countdown timer

---
 .../website/src/components/ArticlePlug.astro  | 11 ++-
 packages/website/src/components/Giveaway.tsx  | 79 +++++++++++++++++++
 .../website/src/pages/[...locale]/index.astro |  8 +-
 3 files changed, 92 insertions(+), 6 deletions(-)
 create mode 100644 packages/website/src/components/Giveaway.tsx

diff --git a/packages/website/src/components/ArticlePlug.astro b/packages/website/src/components/ArticlePlug.astro
index 312c81514..4ef838462 100644
--- a/packages/website/src/components/ArticlePlug.astro
+++ b/packages/website/src/components/ArticlePlug.astro
@@ -3,7 +3,7 @@ import { tankIcon } from "@blitzkit/core";
 import { Flex, Heading, Link, Strong, Text } from "@radix-ui/themes";
 ---
 
-<Flex justify="center">
+<Flex justify="center" px="4">
   <Link
     color="gray"
     highContrast
@@ -20,15 +20,18 @@ import { Flex, Heading, Link, Strong, Text } from "@radix-ui/themes";
         backgroundImage: "url(https://i.imgur.com/LRYmSkg.png)",
         backgroundSize: "cover",
         backgroundPosition: "center",
+        boxSizing: "border-box",
       }}
       align="center"
       gap="5"
     >
-      <img src={tankIcon(25169)} style={{ height: "5rem" }} />
+      <img src={tankIcon(25169)} style={{ height: "min(15vw, 5rem)" }} />
 
       <Flex direction="column">
-        <Heading>Christmas 2025</Heading>
-        <Text>Win the <Strong>GSOR the TANK</Strong> and more!</Text>
+        <Heading size={{ initial: "4", sm: "6" }}>Christmas 2025</Heading>
+        <Text size={{ initial: "2", sm: "3" }}>
+          Win the <Strong>GSOR the TANK</Strong> and more!
+        </Text>
       </Flex>
     </Flex>
   </Link>
diff --git a/packages/website/src/components/Giveaway.tsx b/packages/website/src/components/Giveaway.tsx
new file mode 100644
index 000000000..9a549cbf9
--- /dev/null
+++ b/packages/website/src/components/Giveaway.tsx
@@ -0,0 +1,79 @@
+import { Code, Flex, Heading, Link, Text } from "@radix-ui/themes";
+import { useEffect, useState, type ReactNode } from "react";
+import type { MaybeSkeletonComponentProps } from "../types/maybeSkeletonComponentProps";
+
+const TIME = 1764898200 * 1000;
+
+export function Giveaway({ skeleton }: MaybeSkeletonComponentProps) {
+  const [timeLeft, setTimeLeft] = useState<number>(TIME - Date.now());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeLeft(TIME - Date.now());
+    });
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  let string: ReactNode;
+
+  if (timeLeft > 0) {
+    const hours = Math.floor(timeLeft / (1000 * 60 * 60));
+    const minutes = Math.floor((timeLeft / (1000 * 60)) % 60);
+    const seconds = Math.floor((timeLeft / 1000) % 60);
+
+    string = (
+      <>
+        in{" "}
+        <Code highContrast>
+          {hours}h {minutes}m {seconds}s
+        </Code>
+      </>
+    );
+  } else {
+    string = "has ended. Come again later!";
+  }
+
+  return (
+    <Flex justify="center" px="4">
+      <Link
+        color="gray"
+        highContrast
+        style={{ display: "content" }}
+        href="https://discord.gg/njQdBhNS?event=1446208951136813117"
+        underline="none"
+      >
+        <Flex
+          mt="3"
+          px="5"
+          py="4"
+          style={{
+            borderRadius: "var(--radius-3)",
+            backgroundImage: "url(https://i.imgur.com/LRYmSkg.png)",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            boxSizing: "border-box",
+          }}
+          align="center"
+          gap="5"
+        >
+          <img
+            src="https://i.imgur.com/mvmJQgB.png"
+            style={{ height: "min(15vw, 5rem)" }}
+          />
+
+          <Flex direction="column">
+            <Heading size={{ initial: "4", sm: "6" }}>
+              Music Box giveaway {string}
+            </Heading>
+            <Text size={{ initial: "2", sm: "3" }}>
+              Join the BlitzKit Discord server event
+            </Text>
+          </Flex>
+        </Flex>
+      </Link>
+    </Flex>
+  );
+}
diff --git a/packages/website/src/pages/[...locale]/index.astro b/packages/website/src/pages/[...locale]/index.astro
index 114caf09e..0b36a1a58 100644
--- a/packages/website/src/pages/[...locale]/index.astro
+++ b/packages/website/src/pages/[...locale]/index.astro
@@ -6,7 +6,7 @@ import { literals } from "@blitzkit/i18n/src/literals";
 import { Box, Flex, Link } from "@radix-ui/themes";
 import type { GetStaticPaths } from "astro";
 import { AesonPlug } from "../../components/AesonPlug";
-import ArticlePlug from "../../components/ArticlePlug.astro";
+import { Giveaway } from "../../components/Giveaway";
 import HomeHero from "../../components/HomeHero.astro";
 import { Plugs } from "../../components/Plugs";
 import ToolCard from "../../components/ToolCard.astro";
@@ -65,7 +65,11 @@ export const getStaticPaths = (() => {
 <BaseLayout {locale}>
   <HomeHero />
 
-  <ArticlePlug />
+  <!-- <ArticlePlug /> -->
+
+  <Giveaway client:only="react">
+    <Giveaway skeleton slot="fallback" />
+  </Giveaway>
 
   <!-- <Flex justify="center" py="6" px="4" justify="center">
     <Flex