blitzkit/packages/website/src/pages/index.astro

---
import { assertSecret } from '@blitzkit/core';
import { Box, Flex, Heading } from '@radix-ui/themes';
import { AesonPlug } from '../components/AesonPlug';
import HomeHero from '../components/HomeHero.astro';
import { HomePageHotTanks } from '../components/HomePageHotTanks';
import { Plugs } from '../components/Plugs.tsx';
import ToolCard from '../components/ToolCard.astro';
import {
  chartsTool,
  compareTool,
  discordTool,
  embedTool,
  galleryTool,
  moreTool,
  performanceTool,
  sessionTool,
  tankopediaTool,
  tierListTool,
} from '../constants/tools';
import BaseLayout from '../layouts/BaseLayout.astro';

const branch = assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH);
---

<BaseLayout>
  <HomeHero />

  <Plugs client:idle />

  {
    branch === 'preview' && (
      <Flex justify="center" my="8" px="4">
        <AesonPlug />
      </Flex>
    )
  }

  <Flex p="4" justify="center" gap="4" mt="3">
    <Flex maxWidth="64rem" flexGrow="1" gap="4" direction="column">
      <ToolCard tool={tankopediaTool} />

      <HomePageHotTanks />

      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
        {/* <ToolCard tool={playerStatsTool} /> */}
        <ToolCard tool={compareTool} />
        <ToolCard tool={performanceTool} />
      </Flex>

      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
        <ToolCard tool={chartsTool} />
        <ToolCard tool={galleryTool} />
      </Flex>

      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
        <ToolCard tool={sessionTool} />
        <ToolCard tool={discordTool} />
      </Flex>

      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
        <ToolCard tool={tierListTool} />
        <ToolCard tool={embedTool} />
      </Flex>

      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
        <ToolCard tool={moreTool} />
        <Box flexGrow="1" />
      </Flex>

      <Heading align="center" mt="6">Other cool projects</Heading>

      <Flex gap="4" mb="6" direction={{ initial: 'column', sm: 'row' }}>
        <ToolCard
          tool={{
            button: {
              text: 'Analyze',
              color: 'blue',
            },
            description: 'Rich historic average stats',
            id: 'blitz-analysis',
            image: 'j76YXGl',
            title: 'BlitzAnalysis[]',
            href: 'https://blitzanalysiz.com/',
          }}
        />
        <ToolCard
          tool={{
            button: {
              color: 'purple',
              text: 'Install',
              highContrast: true,
            },
            image: 'zYrrYbR',
            description: 'In-game session stats',
            id: 'blitz-insider',
            title: 'Blitz Insider',
            href: 'https://discord.gg/UjWf9eGgtR',
          }}
        />
      </Flex>
    </Flex>
  </Flex>

  <div style={{ flex: 1 }}></div>
</BaseLayout>