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.params;
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-5: 0%;

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

    --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-5: color-mix(in srgb, var(--g-5-dark), var(--g-5-light) var(--p-5));

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

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

  #home-hero[data-variant='spooky'] {
    --g-1-dark: var(--orange-3);
    --g-1-light: var(--orange-5);
    --g-2-dark: var(--tomato-3);
    --g-2-light: var(--tomato-5);
    --g-3-dark: var(--orange-3);
    --g-3-light: var(--orange-5);
    --g-4-dark: var(--tomato-3);
    --g-4-light: var(--tomato-5);
    --g-5-dark: var(--orange-3);
    --g-5-light: var(--orange-5);
  }
</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, ['TrèsAbhi'])}</Text
      >
    </Flex>
  </Flex>
</Flex>