From 236271d2795345c727971a5ddf3470ba37dbd5fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 20 Oct 2024 01:01:54 -0500
Subject: [PATCH] feat: cooler header

---
 .../website/src/components/HomeHero.astro     | 71 +++++++++++++------
 packages/website/src/components/Plugs.tsx     | 40 ++++++-----
 packages/website/src/pages/index.astro        |  2 +-
 3 files changed, 74 insertions(+), 39 deletions(-)

diff --git a/packages/website/src/components/HomeHero.astro b/packages/website/src/components/HomeHero.astro
index 6832bdcfa..04f1b30c6 100644
--- a/packages/website/src/components/HomeHero.astro
+++ b/packages/website/src/components/HomeHero.astro
@@ -1,5 +1,4 @@
 ---
-import { imgur } from '@blitzkit/core';
 import { Code, Flex, Heading, Text } from '@radix-ui/themes';
 import { resolveBranchName } from '../core/blitzkit/branches';
 
@@ -8,36 +7,66 @@ const isBranchNamed = branchName !== undefined;
 ---
 
 <style>
-  .container {
-    background: var(--backgroundImage);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
+  #home-hero {
+    --p-1: 0%;
+    --p-2: 0%;
+    --p-3: 0%;
+
+    --gradient-color-1: color-mix(
+      in srgb,
+      var(--jade-1),
+      var(--jade-9) var(--p-1)
+    );
+    --gradient-color-2: color-mix(
+      in srgb,
+      var(--blue-1),
+      var(--blue-9) var(--p-2)
+    );
+    --gradient-color-3: color-mix(
+      in srgb,
+      var(--purple-1),
+      var(--purple-9) var(--p-3)
+    );
+
+    background: linear-gradient(
+      45deg,
+      var(--gradient-color-1),
+      var(--gradient-color-2),
+      var(--gradient-color-3)
+    );
   }
 </style>
 
+<script>
+  import { clamp } from 'lodash-es';
+
+  const homeHero = document.getElementById('home-hero');
+
+  if (homeHero) {
+    window.addEventListener('pointermove', (event) => {
+      const p = event.clientX / window.innerWidth;
+      const c = 1 - event.clientY / window.innerHeight;
+      const p1 = c * clamp(-2 * p + 1, 0, 1);
+      const p2 = c * clamp(-Math.abs(2 * p - 1) + 1, 0, 1);
+      const p3 = c * clamp(2 * p - 1, 0, 1);
+
+      homeHero.style.setProperty('--p-1', `${p1 * 100}%`);
+      homeHero.style.setProperty('--p-2', `${p2 * 100}%`);
+      homeHero.style.setProperty('--p-3', `${p3 * 100}%`);
+    });
+  }
+</script>
+
 <Flex
-  className="container"
-  style={{ backgroundImage: `url(${imgur('rUPie9G', { format: 'jpeg' })})` }}
+  mb="3"
+  id="home-hero"
   align="center"
   justify="center"
   position="relative"
   px="4"
   py="9"
+  overflow="hidden"
 >
-  <div
-    style={{
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      background:
-        'linear-gradient(var(--color-panel-translucent), var(--color-background))',
-    }}
-  >
-  </div>
-
   <Flex
     direction="column"
     gap="6"
diff --git a/packages/website/src/components/Plugs.tsx b/packages/website/src/components/Plugs.tsx
index 3a1a93f7e..ab5ffce24 100644
--- a/packages/website/src/components/Plugs.tsx
+++ b/packages/website/src/components/Plugs.tsx
@@ -12,6 +12,13 @@ export function Plugs() {
 }
 
 function Content() {
+  const promoteOpentest =
+    assertSecret(import.meta.env.PUBLIC_PROMOTE_OPENTEST) === 'true' &&
+    assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH) !== 'opentest';
+  const promotions = [promoteOpentest];
+
+  if (promotions.every((promotion) => !promotion)) return null;
+
   return (
     <Flex
       align="center"
@@ -21,24 +28,23 @@ function Content() {
       py="8"
       gap="6"
     >
-      {assertSecret(import.meta.env.PUBLIC_PROMOTE_OPENTEST) === 'true' &&
-        assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH) !== 'opentest' && (
-          <Flex direction="column" gap="3" align="center">
-            <Text size="5">
-              BlitzKit{' '}
-              <Code variant="outline" size="4" color="gray" highContrast>
-                opentest
-              </Code>{' '}
-              is available now{' '}
-            </Text>
+      {promoteOpentest && (
+        <Flex direction="column" gap="3" align="center">
+          <Text size="5">
+            BlitzKit{' '}
+            <Code variant="outline" size="4" color="gray" highContrast>
+              opentest
+            </Code>{' '}
+            is available now{' '}
+          </Text>
 
-            <Link href="https://opentest.blitzkit.app/" target="_blank">
-              <Button color="green">
-                BlitzKit opentest <ArrowRightIcon />
-              </Button>
-            </Link>
-          </Flex>
-        )}
+          <Link href="https://opentest.blitzkit.app/" target="_blank">
+            <Button color="green">
+              BlitzKit opentest <ArrowRightIcon />
+            </Button>
+          </Link>
+        </Flex>
+      )}
     </Flex>
   );
 }
diff --git a/packages/website/src/pages/index.astro b/packages/website/src/pages/index.astro
index ae5bc5ff3..75698efc1 100644
--- a/packages/website/src/pages/index.astro
+++ b/packages/website/src/pages/index.astro
@@ -19,7 +19,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 
   <Plugs client:idle />
 
-  <Flex p="4" justify="center" gap="4">
+  <Flex p="4" justify="center" gap="4" mt="3">
     <Flex maxWidth="64rem" flexGrow="1" gap="4" direction="column">
       <ToolCard tool={tankopediaTool} />