blitzkit/packages/website/src/components/HomeHero.astro

---
import { Code, Flex, Heading, Text } from "@radix-ui/themes";
import { resolveBranchName } from "../core/blitzkit/branches";
import { getStrings } from "../core/i18n/getStrings";
import { literals } from "@blitzkit/i18n/src/literals";

const { locale } = Astro.props;
const branchName = resolveBranchName(locale);
const isBranchNamed = branchName !== undefined;
const strings = getStrings(locale);
---

<style>
  #home-hero {
    --p-1: 0%;
    --p-2: 0%;
    --p-3: 0%;
    --p-4: 0%;
    --p-7: 0%;

    --g-1-dark: var(--blue-3);
    --g-1-light: var(--blue-7);
    --g-2-dark: var(--violet-3);
    --g-2-light: var(--violet-7);
    --g-3-dark: var(--purple-3);
    --g-3-light: var(--purple-7);
    --g-4-dark: var(--crimson-3);
    --g-4-light: var(--crimson-7);
    --g-7-dark: var(--tomato-3);
    --g-7-light: var(--tomato-7);

    --g-1: color-mix(in srgb, var(--g-1-dark), var(--g-1-light) var(--p-1));
    --g-2: color-mix(in srgb, var(--g-2-dark), var(--g-2-light) var(--p-2));
    --g-3: color-mix(in srgb, var(--g-3-dark), var(--g-3-light) var(--p-3));
    --g-4: color-mix(in srgb, var(--g-4-dark), var(--g-4-light) var(--p-4));
    --g-7: color-mix(in srgb, var(--g-7-dark), var(--g-7-light) var(--p-7));

    background: linear-gradient(
      45deg,
      var(--g-1),
      var(--g-2),
      var(--g-3),
      var(--g-4),
      var(--g-7)
    );
  }

  #home-hero[data-variant="pride"] {
    --g-1-dark: var(--crimson-3);
    --g-1-light: var(--crimson-7);
    --g-2-dark: var(--orange-3);
    --g-2-light: var(--orange-7);
    --g-3-dark: var(--yellow-3);
    --g-3-light: var(--yellow-7);
    --g-4-dark: var(--blue-3);
    --g-4-light: var(--blue-7);
    --g-7-dark: var(--purple-3);
    --g-7-light: var(--purple-7);
  }

  #home-hero[data-variant="spooky"] {
    --g-1-dark: var(--orange-3);
    --g-1-light: var(--orange-7);
    --g-2-dark: var(--tomato-3);
    --g-2-light: var(--tomato-7);
    --g-3-dark: var(--orange-3);
    --g-3-light: var(--orange-7);
    --g-4-dark: var(--tomato-3);
    --g-4-light: var(--tomato-7);
    --g-7-dark: var(--orange-3);
    --g-7-light: var(--orange-7);
  }
</style>

<script>
  import { clamp, times } from "lodash-es";

  const n = 5;
  const homeHero = document.getElementById("home-hero");

  if (homeHero) {
    switch (new Date().getMonth()) {
      case 5:
        homeHero.dataset.variant = "pride";
        break;

      case 9:
        homeHero.dataset.variant = "spooky";
        break;
    }

    window.addEventListener("pointermove", (event) => {
      const x = event.clientX / window.innerWidth;
      const c = clamp(
        (1 -
          (event.clientY + homeHero.getBoundingClientRect().top) /
            window.innerHeight) **
          2,
        0,
        1,
      );

      // https://www.desmos.com/calculator/ndz2poxk32
      times(n, (i) => {
        const p = c * clamp(-n * Math.abs(x - i / (n - 1)) + 1, 0, 3);
        homeHero.style.setProperty(`--p-${i + 1}`, `${p * 100}%`);
      });
    });
  }
</script>

<Flex
  mb="3"
  id="home-hero"
  align="center"
  justify="center"
  position="relative"
  px="4"
  py="9"
  overflow="hidden"
>
  <Flex
    direction="column"
    gap="6"
    align="center"
    justify="center"
    position="relative"
    width="100%"
  >
    <Flex direction="column" align="center" gap="1">
      <Heading size={{ initial: "8", xs: "9" }} weight="bold" align="center">
        <Flex align="center" gap={{ initial: "2", xs: "4" }}>
          BlitzKit
          {
            isBranchNamed && (
              <Code
                size={{ initial: "7", xs: "8" }}
                color="gray"
                variant="outline"
              >
                {branchName}
              </Code>
            )
          }
        </Flex>
      </Heading>

      <Text color="gray" align="center" size="4">
        {literals(strings.website.home.hero.credit, { name: "TrèsAbhi" })}
      </Text>
    </Flex>
  </Flex>
</Flex>