feat: moved to astro

packages/website/src/components/HomeHero.astro

@@ -0,0 +1,77 @@
+---
+import { imgur } from '@blitzkit/core';
+import { Code, Flex, Heading, Text } from '@radix-ui/themes';
+import { BRANCH_NAMES } from '../constants/branches';
+
+const isBranchNamed =
+  process.env.NEXT_PUBLIC_ASSET_BRANCH &&
+  BRANCH_NAMES[process.env.NEXT_PUBLIC_ASSET_BRANCH];
+---
+
+<style>
+  .container {
+    background: var(--backgroundImage);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+</style>
+
+<Flex
+  className="container"
+  style={{ backgroundImage: `url(${imgur('rUPie9G', { format: 'jpeg' })})` }}
+  align="center"
+  justify="center"
+  position="relative"
+  px="4"
+  py="9"
+>
+  <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"
+    align="center"
+    justify="center"
+    position="relative"
+    width="100%"
+  >
+    <Flex direction="column" align="center" gap="1">
+      <Heading size="9" weight="bold" align="center">
+        <Flex
+          align="center"
+          gap={{ initial: '1', xs: '4' }}
+          direction={{ initial: 'column', xs: 'row' }}
+        >
+          BlitzKit
+          {
+            isBranchNamed && (
+              <Code size="8" color="gray" highContrast variant="outline">
+                {BRANCH_NAMES[process.env.NEXT_PUBLIC_ASSET_BRANCH!]}
+              </Code>
+            )
+          }
+        </Flex>
+      </Heading>
+
+      {
+        !isBranchNamed && (
+          <Text color="gray" align="center" size="4">
+            Everything World of Tanks Blitz
+          </Text>
+        )
+      }
+    </Flex>
+  </Flex>
+</Flex>