migrate 2

packages/website/package.json

@@ -15,6 +15,8 @@
     "@astrolib/seo": "^1.0.0-beta.8",
     "@blitzkit/core": "workspace:*",
     "@blitzkit/i18n": "workspace:*",
+    "@fontsource-variable/jetbrains-mono": "^5.3.0",
+    "@fontsource-variable/roboto-flex": "^5.3.0",
     "@fontsource/inter": "^5.2.8",
     "@gltf-transform/core": "^4.4.2",
     "@gltf-transform/functions": "^4.4.2",

packages/website/src/components/BaseStyles.astro

@@ -0,0 +1,113 @@
+---
+import "@fontsource-variable/jetbrains-mono";
+import "@fontsource-variable/roboto-flex";
+---
+
+<style>
+  :root {
+    --space-0: 0.0625rem;
+    --space-1: 0.125rem;
+    --space-2: 0.25rem;
+    --space-3: 0.5rem;
+    --space-4: 1rem;
+    --space-5: 2rem;
+    --space-6: 4rem;
+    --space-7: 8rem;
+    --space-8: 16rem;
+    --space-9: 32rem;
+
+    --page-width: 64rem;
+
+    --max-size: max(100vw, 100vh);
+    --radius-max: var(--max-size);
+
+    --font-size-regular: 1rem;
+    --font-size-minor: 0.75rem;
+    --font-size-major: 1.25rem;
+
+    --font-size-heading-1: 3rem;
+    --font-size-heading-2: 2rem;
+    --font-size-heading-3: 1.5rem;
+    --font-size-heading-4: 1.25rem;
+    --font-size-heading-5: 1rem;
+    --font-size-heading-6: 0.75rem;
+
+    --font-family-regular: "Roboto Flex Variable", sans-serif;
+    --font-family-mono: "JetBrains Mono Variable", monospace;
+
+    --color-regular: var(--gray-12);
+    --color-low-contrast: var(--gray-11);
+
+    --weight-light: 300;
+    --weight-regular: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    --outline-interactive: var(--space-1) solid var(--gray-4);
+    --outline-focus: var(--space-1) solid var(--accent-6);
+
+    /* --shadow-cavity:
+      inset calc(var(--space-1) * sin(45deg)) calc(var(--space-1) * sin(45deg))
+        var(--space-1) var(--black-a3),
+      inset calc(var(--space-1) * sin(45deg) * -1)
+        calc(var(--space-1) * sin(45deg) * -1) var(--space-1) var(--white-a1); */
+
+    --shadow-bump:
+      inset calc(var(--space-1) * sin(45deg)) calc(var(--space-1) * sin(45deg))
+        var(--space-1) var(--white-a3),
+      inset calc(var(--space-1) * sin(45deg) * -1)
+        calc(var(--space-1) * sin(45deg) * -1) var(--space-1) var(--black-a3);
+
+    --shadow-outline-width: 1.5px;
+    --shadow-outline-width-negative: calc(var(--shadow-outline-width) * -1);
+
+    /* --shadow-interactive-background: 0 0 0 var(--shadow-outline-width)
+      var(--gray-6);
+    --shadow-interactive-shine: var(--shadow-outline-width-negative)
+      var(--shadow-outline-width-negative) var(--shadow-outline-width)
+      var(--white-a1);
+    --shadow-interactive-shadow: var(--shadow-outline-width)
+      var(--shadow-outline-width) var(--shadow-outline-width) var(--black-a4);
+    --shadow-interactive:
+      var(--shadow-interactive-shine), var(--shadow-interactive-shadow),
+      var(--shadow-interactive-background); */
+
+    --shadow-aggressive: var(--space-1) var(--space-1) var(--space-4)
+      var(--black-a11);
+    --shadow-subtle: 0 var(--space-1) var(--space-3) var(--black-a5);
+    --shadow-none: 0 0 0 transparent;
+
+    &.light {
+      --shadow-subtle: 0 var(--space-1) var(--space-3) var(--black-a2);
+    }
+
+    --blur-glass: blur(4rem);
+    --blur-tint: blur(8rem);
+
+    --duration-brief: 200ms;
+    --duration-subtle: 2s;
+
+    --tank-card-min-width: 8rem;
+  }
+</style>
+
+<style is:global>
+  .composable-radius {
+    &[data-radius="1"] {
+      border-radius: var(--space-3);
+    }
+
+    &[data-radius="2"] {
+      border-radius: var(--space-4);
+    }
+
+    &[data-radius="3"] {
+      border-radius: var(--space-5);
+    }
+
+    &[data-radius="max"] {
+      border-radius: var(--radius-max);
+    }
+  }
+</style>

packages/website/src/components/ColorAlias.astro

@@ -0,0 +1,33 @@
+---
+import type { Color } from "../ui/color";
+
+interface Props {
+  color: Color;
+  alias: string;
+  alpha?: boolean;
+}
+
+const { color, alias, alpha } = Astro.props;
+
+let styles = "";
+
+styles += ":root{";
+
+for (let i = 0; i < 12; i++) {
+  const n = i + 1;
+  styles += `--${alias}-${alpha ? "a" : ""}${n}:var(--${color}-${alpha ? "a" : ""}${n});`;
+}
+
+styles += "}";
+
+styles += `*[data-accent='${alias}']{`;
+
+for (let i = 0; i < 12; i++) {
+  const n = i + 1;
+  styles += `--accent-${alpha ? "a" : ""}${n}:var(--${alias}-${alpha ? "a" : ""}${n});`;
+}
+
+styles += "}";
+---
+
+<style set:html={styles}></style>

packages/website/src/components/ColorScale.astro

@@ -0,0 +1,54 @@
+---
+import * as colors from "@radix-ui/colors";
+import type { Color } from "../ui/color";
+
+interface Props {
+  color: Color | AlphaOnlyColor;
+  alpha?: boolean;
+}
+
+const ALPHA_ONLY_COLORS = ["black", "white"] as const;
+type AlphaOnlyColor = (typeof ALPHA_ONLY_COLORS)[number];
+
+const { color, alpha } = Astro.props;
+const nameLight = `${color}${alpha ? "A" : ""}`;
+const nameDark = `${color}${
+  ALPHA_ONLY_COLORS.includes(color as AlphaOnlyColor) ? "" : "Dark"
+}${alpha ? "A" : ""}`;
+const scaleLight = colors[nameLight as keyof typeof colors];
+const scaleDark = colors[nameDark as keyof typeof colors];
+
+let styles = "";
+
+styles += ":root.dark{";
+
+for (let i = 0; i < 12; i++) {
+  const n = i + 1;
+  const value =
+    scaleDark[`${color}${alpha ? "A" : ""}${n}` as keyof typeof scaleDark];
+  styles += `--${color}-${alpha ? "a" : ""}${n}:${value};`;
+}
+
+styles += "}";
+styles += ":root.light{";
+
+for (let i = 0; i < 12; i++) {
+  const n = i + 1;
+  const value =
+    scaleLight[`${color}${alpha ? "A" : ""}${n}` as keyof typeof scaleLight];
+  styles += `--${color}-${alpha ? "a" : ""}${n}:${value};`;
+}
+
+styles += "}";
+
+styles += `*[data-accent='${color}']{`;
+
+for (let i = 0; i < 12; i++) {
+  const n = i + 1;
+  styles += `--accent-${alpha ? "a" : ""}${n}:var(--${color}-${alpha ? "a" : ""}${n});`;
+}
+
+styles += "}";
+---
+
+<style set:html={styles}></style>

packages/website/src/components/HomeCosmetics.astro

@@ -1,7 +1,7 @@
 ---
-import { Heading } from "@radix-ui/themes";
 import { tools } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
+import { Heading } from "./Heading";
 import ToolCard from "./ToolCard.astro";
 import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
 import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
@@ -15,7 +15,7 @@ const { locale } = Astro.props;
 const strings = getStrings(locale);
 ---
 
-<Heading size="8">{strings.home.cosmetics}</Heading>
+<Heading size="5">{strings.home.cosmetics}</Heading>
 
 <ToolCardLayoutRoot minor>
   <ToolCardLayoutColumn>

packages/website/src/components/HomeGames.astro

@@ -1,7 +1,7 @@
 ---
-import { Heading } from "@radix-ui/themes";
 import { tools } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
+import { Heading } from "./Heading";
 import ToolCard from "./ToolCard.astro";
 import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
 import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
@@ -15,7 +15,7 @@ const { locale } = Astro.props;
 const strings = getStrings(locale);
 ---
 
-<Heading size="8" className="title">{strings.home.games}</Heading>
+<Heading size="5" className="title">{strings.home.games}</Heading>
 
 <ToolCardLayoutRoot>
   <ToolCardLayoutColumn major>

packages/website/src/components/HomePlayers.astro

@@ -1,7 +1,7 @@
 ---
-import { Heading } from "@radix-ui/themes";
 import { tools } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
+import { Heading } from "./Heading";
 import ToolCard from "./ToolCard.astro";
 import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
 import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
@@ -15,7 +15,7 @@ const { locale } = Astro.props;
 const strings = getStrings(locale);
 ---
 
-<Heading size="8">{strings.home.players}</Heading>
+<Heading size="5">{strings.home.players}</Heading>
 
 <ToolCardLayoutRoot>
   <ToolCardLayoutColumn>

packages/website/src/components/HomeTanks.astro

@@ -1,7 +1,7 @@
 ---
-import { Heading } from "@radix-ui/themes";
 import { tools } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
+import { Heading } from "./Heading";
 import ToolCard from "./ToolCard.astro";
 import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
 import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
@@ -14,7 +14,7 @@ const { locale } = Astro.props;
 const strings = getStrings(locale);
 ---
 
-<Heading size="8">{strings.home.tanks}</Heading>
+<Heading size="5">{strings.home.tanks}</Heading>
 
 <ToolCardLayoutRoot>
   <ToolCardLayoutColumn major>

packages/website/src/components/HomeTechnical.astro

@@ -1,7 +1,7 @@
 ---
-import { Heading } from "@radix-ui/themes";
 import { tools } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
+import { Heading } from "./Heading";
 import ToolCard from "./ToolCard.astro";
 import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
 import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
@@ -15,7 +15,7 @@ const { locale } = Astro.props;
 const strings = getStrings(locale);
 ---
 
-<Heading size="8">{strings.home.technical}</Heading>
+<Heading size="5">{strings.home.technical}</Heading>
 
 <ToolCardLayoutRoot minor>
   <ToolCardLayoutColumn>

packages/website/src/components/LinkI18n.tsx

@@ -1,14 +1,15 @@
 import locales from "@blitzkit/i18n/locales.json";
-import { Link, type LinkProps } from "@radix-ui/themes";
-import type { LocaleAcceptorProps } from "../hooks/useLocale";
+import { Link, type LinkProps } from "./Link";
 
-type LinkI18nProps = LinkProps & LocaleAcceptorProps;
-
-export function LinkI18n({ locale, href, ...props }: LinkI18nProps) {
-  const prefix =
-    locale === undefined || locale === locales.default ? "" : `/${locale}`;
+export interface LinkI18n extends LinkProps {
+  locale: string;
+}
 
+export function LinkI18n({ locale, href, ...props }: LinkI18n) {
   return (
-    <Link href={href?.startsWith("/") ? `${prefix}${href}` : href} {...props} />
+    <Link
+      href={`${locale === locales.default ? "" : `/${locale}`}${href}`}
+      {...props}
+    />
   );
 }

packages/website/src/components/PageWrapper.tsx

@@ -1,55 +0,0 @@
-import { Flex, type FlexProps, Theme } from "@radix-ui/themes";
-import type { ComponentProps } from "react";
-import { NAVBAR_HEIGHT } from "../constants/navbar";
-import type { RadixSize } from "../stores/embedState";
-import { BlitzKitTheme } from "./BlitzKitTheme";
-
-type PageWrapperProps = FlexProps & {
-  color?: ComponentProps<typeof Theme>["accentColor"];
-  containerProps?: ComponentProps<typeof Theme>;
-  noFlex1?: boolean;
-  padding?: RadixSize;
-  noMinHeight?: boolean;
-};
-
-export function PageWrapper({
-  style,
-  color,
-  children,
-  noFlex1 = false,
-  containerProps,
-  noMinHeight = false,
-  padding = "4",
-  ...props
-}: PageWrapperProps) {
-  return (
-    <BlitzKitTheme
-      accentColor={color}
-      style={{
-        flex: noFlex1 ? undefined : 1,
-        display: "flex",
-        minHeight: noMinHeight ? "unset" : `calc(100svh - ${NAVBAR_HEIGHT}px)`,
-        flexDirection: "column",
-        ...containerProps?.style,
-      }}
-      {...containerProps}
-    >
-      <Flex
-        direction="column"
-        gap="9"
-        p={padding}
-        width="100%"
-        maxWidth="80rem"
-        style={{
-          margin: "auto",
-          boxSizing: "border-box",
-          flex: 1,
-          ...style,
-        }}
-        {...props}
-      >
-        {children}
-      </Flex>
-    </BlitzKitTheme>
-  );
-}

packages/website/src/components/Plugs.tsx

@@ -1,41 +0,0 @@
-import { assertSecret } from "@blitzkit/core";
-import { ArrowRightIcon } from "@radix-ui/react-icons";
-import { Button, Code, Flex, Link, Text } from "@radix-ui/themes";
-
-export function Plugs() {
-  const promoteOpentest =
-    assertSecret(import.meta.env.PUBLIC_PROMOTE_OPENTEST) === "true" &&
-    assertSecret(import.meta.env.PUBLIC_ENVIRONMENT) !== "opentest";
-  const promotions = [promoteOpentest];
-
-  if (promotions.every((promotion) => !promotion)) return null;
-
-  return (
-    <Flex
-      align="center"
-      direction="column"
-      justify="center"
-      px="4"
-      py="8"
-      gap="6"
-    >
-      {promoteOpentest && (
-        <Flex direction="column" gap="3" align="center">
-          <Text size="5">
-            BlitzKit{" "}
-            <Code variant="outline" size="4" color="gray">
-              opentest
-            </Code>{" "}
-            is available now{" "}
-          </Text>
-
-          <Link href="https://opentest.blitzkit.app/" target="_blank">
-            <Button color="green">
-              BlitzKit opentest <ArrowRightIcon />
-            </Button>
-          </Link>
-        </Flex>
-      )}
-    </Flex>
-  );
-}

packages/website/src/components/ToolCard.astro

@@ -1,16 +1,16 @@
 ---
-import { Box, Flex, Heading, Text } from "@radix-ui/themes";
 import type { Tool } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
+import { Heading } from "./Heading";
 import { LinkI18n } from "./LinkI18n";
+import { Text } from "./Text";
 
 interface Props {
   tool: Tool;
   locale: string;
-  significant?: boolean;
 }
 
-const { locale, tool, significant } = Astro.props;
+const { locale, tool } = Astro.props;
 const strings = getStrings(locale);
 const toolStrings =
   strings.website.tools[
@@ -20,19 +20,19 @@ const toolStrings =
 
 <style>
   .container {
+    display: flex;
+
     border-radius: var(--radius-3);
     background-size: cover;
     background-position: center;
     height: 16rem;
 
+    position: relative;
+    overflow: hidden;
+
     &[data-disabled="true"] {
       opacity: 0.25;
     }
-
-    &[data-significant="true"] {
-      width: 100%;
-      height: min(20rem, 50vh);
-    }
   }
 
   .link {
@@ -41,19 +41,35 @@ const toolStrings =
     height: 100%;
     flex-direction: column;
     color: inherit;
+
+    .background {
+      flex: 1;
+
+      background-size: cover;
+      background-position: center;
+    }
+
+    .content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      width: 100%;
+
+      gap: var(--space-4);
+
+      .wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+    }
   }
 </style>
 
-<Flex
-  style={{
-    backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
-  }}
-  data-significant={significant}
-  className="container"
-  position="relative"
-  overflow="hidden"
-  flexGrow={significant ? undefined : "1"}
-  flexBasis={significant ? undefined : { initial: undefined, sm: "0" }}
+<div
+  style={{ backgroundImage: `url(/assets/images/tools/${tool.id}.webp)` }}
+  class="container"
 >
   <LinkI18n
     {locale}
@@ -62,49 +78,29 @@ const toolStrings =
     href={tool.href ?? `/${tool.id}`}
     target={tool.href ? "_blank" : undefined}
   >
-    <Box
-      flexGrow="1"
-      style={{
-        backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-      }}
-    />
+    <div
+      class="background"
+      style={{ backgroundImage: `url(/assets/images/tools/${tool.id}.webp)` }}
+    >
+    </div>
 
-    <Flex
-      px={{ initial: "6", md: significant ? "8" : "6" }}
-      py={{ initial: "4", sm: significant ? "6" : "4" }}
-      gap="4"
-      align="center"
-      justify="between"
-      width="100%"
-      direction={{ initial: "column", xs: "row" }}
+    <div
+      class="content"
       style={{
         backgroundColor: "var(--color-panel-translucent)",
         backdropFilter: "blur(64px) brightness(50%)",
         WebkitBackdropFilter: "blur(64px)",
       }}
     >
-      <Flex
-        direction="column"
-        justify="center"
-        align={{ initial: "center", xs: "start" }}
-      >
-        <Heading
-          align={{ initial: "center", sm: "left" }}
-          size={{ initial: "6", sm: significant ? "7" : "5" }}
-          weight="medium"
-        >
+      <div class="wrapper">
+        <Heading weight="medium">
           {toolStrings.name}
         </Heading>
-        <Text
-          align={{ initial: "center", sm: "left" }}
-          size={{ initial: "3", sm: significant ? "4" : "3" }}
-          color="gray"
-        >
+
+        <Text color="gray">
           {toolStrings.description}
         </Text>
-      </Flex>
-    </Flex>
+      </div>
+    </div>
   </LinkI18n>
-</Flex>
+</div>

packages/website/src/layouts/BaseLayout.astro

@@ -1,48 +1,81 @@
 ---
-import strings from "@blitzkit/i18n/strings/en.json";
-import { Flex } from "@radix-ui/themes";
-import Analytics from "../components/Analytics.astro";
-import { BlitzKitTheme } from "../components/BlitzKitTheme";
-import { Checks } from "../components/Checks";
-import EasterEggs from "../components/EasterEggs.astro";
-import Footer from "../components/Footer.astro";
-import LocaleRedirector from "../components/LocaleRedirector.astro";
-import Meta from "../components/Meta.astro";
-import Servicing from "../components/Servicing.astro";
-import "./base.css";
+import BaseMeta from "../components/BaseMeta.astro";
+import BaseStyles from "../components/BaseStyles.astro";
+import ColorAlias from "../components/ColorAlias.astro";
+import ColorScale from "../components/ColorScale.astro";
+import type { Color } from "../ui/color";
 
-export interface Props {
-  noFooter?: boolean;
-  noNavbar?: boolean;
-  integrated?: boolean;
+interface Props {
   locale: string;
+  accent: Color;
 }
 
-const servicing = import.meta.env.SERVICING;
-const { noFooter, noNavbar, integrated, locale } = Astro.props;
+const { accent, locale } = Astro.props;
 ---
 
-<html lang={locale}>
+<html lang={locale} class="dark">
   <head>
-    <meta property="og:site_name" content={strings.common.name} />
+    <BaseMeta />
 
-    <Meta />
-    <Analytics />
-    <LocaleRedirector />
-    <EasterEggs />
+    <ColorScale color="mauve" />
+    <ColorScale color="mauve" alpha />
+    <ColorAlias color="mauve" alias="gray" />
+    <ColorAlias color="mauve" alpha alias="gray" />
+
+    <ColorScale color="black" alpha />
+    <ColorScale color="white" alpha />
+
+    <ColorScale color={accent} />
+    <ColorScale color={accent} alpha />
+    <ColorAlias color={accent} alias="accent" />
+    <ColorAlias color={accent} alpha alias="accent" />
+
+    <BaseStyles />
+
+    <style>
+      body {
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        min-height: 100dvh;
+
+        background-color: var(--gray-1);
+        color: var(--gray-12);
+        font-family: var(--font-family-regular);
+
+        .app {
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+
+          background-color: var(--gray-1);
+        }
+      }
+    </style>
+
+    <script>
+      const root = document.documentElement;
+      const media = window.matchMedia("(prefers-color-scheme: dark)");
+
+      function applyTheme(e: MediaQueryList | MediaQueryListEvent) {
+        root.classList.toggle("dark", e.matches);
+        root.classList.toggle("light", !e.matches);
+      }
+
+      applyTheme(media);
+      media.addEventListener("change", applyTheme);
+    </script>
 
     <slot name="head" />
   </head>
 
-  <body class={noNavbar ? "no-navbar" : ""}>
-    <BlitzKitTheme>
-      <Flex direction="column" minHeight="100vh">
-        <Checks {locale} client:only="react" />
+  <body>
+    <slot name="pre-app" />
 
-        {servicing ? <Servicing /> : <slot />}
+    <div class="app">
+      <slot />
+    </div>
 
-        {!noFooter && <Footer {locale} />}
-      </Flex>
-    </BlitzKitTheme>
+    <!-- <Footer {locale} /> -->
   </body>
-</html>
+</html>

packages/website/src/layouts/ToolLayout.astro

@@ -1,47 +0,0 @@
----
-import { Box, Flex, Heading, Text } from "@radix-ui/themes";
-import ToolOpenGraph from "../components/ToolOpenGraph.astro";
-import type { Tool } from "../constants/tools";
-import { getStrings } from "../core/i18n/getStrings";
-import BaseLayout from "./BaseLayout.astro";
-
-interface Props {
-  tool: Tool;
-  locale: string;
-  noNavbar?: boolean;
-  noFooter?: boolean;
-}
-
-const { tool, locale, noNavbar, noFooter } = Astro.props;
-const strings = getStrings(locale);
-const toolStrings =
-  strings.website.tools[
-    (tool.strings ?? tool.id) as keyof typeof strings.website.tools
-  ];
----
-
-<ToolOpenGraph {locale} {tool} />
-
-<BaseLayout {locale} {noNavbar} {noFooter}>
-  <Box
-    style={{
-      backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
-      backgroundSize: "cover",
-    }}
-  >
-    <Flex
-      direction="column"
-      align="center"
-      py="6"
-      style={{
-        backdropFilter: "blur(4rem)",
-        WebkitBackdropFilter: "blur(4rem)",
-      }}
-    >
-      <Heading size="7">{toolStrings.name}</Heading>
-      <Text>{toolStrings.description}</Text>
-    </Flex>
-  </Box>
-
-  <slot />
-</BaseLayout>

packages/website/src/pages/[...chunk_default]/[...locale]/index.astro

@@ -6,12 +6,9 @@ import { AesonPlug } from "../../../components/AesonPlug";
 import HelpTranslate from "../../../components/HelpTranslate.astro";
 import HomeCosmetics from "../../../components/HomeCosmetics.astro";
 import HomeGames from "../../../components/HomeGames.astro";
-import HomeHero from "../../../components/HomeHero.astro";
 import HomePlayers from "../../../components/HomePlayers.astro";
 import HomeTanks from "../../../components/HomeTanks.astro";
 import HomeTechnical from "../../../components/HomeTechnical.astro";
-import { PageWrapper } from "../../../components/PageWrapper";
-import { Plugs } from "../../../components/Plugs";
 import { tools, type Tool } from "../../../constants/tools";
 import { mixStaticPaths } from "../../../core/blitzkit/mixStaticPaths";
 import { getStrings } from "../../../core/i18n/getStrings";
@@ -66,26 +63,16 @@ export const getStaticPaths = mixStaticPaths(_getStaticPaths, () => {
   twitter={{ cardType: "summary_large_image" }}
 />
 
-<BaseLayout {locale}>
-  <HomeHero {locale} />
+<BaseLayout accent="blue" {locale}>
+  <!-- <HomeHero {locale} /> -->
 
   <HelpTranslate {locale} />
 
-  <Plugs client:idle />
+  {environment === "preview" && <AesonPlug />}
 
-  {
-    environment === "preview" && (
-      <Flex justify="center" my="8" px="4">
-        <AesonPlug />
-      </Flex>
-    )
-  }
-
-  <PageWrapper>
-    <HomeTanks {locale} />
-    <HomePlayers {locale} />
-    <HomeGames {locale} />
-    <HomeCosmetics {locale} />
-    <HomeTechnical {locale} />
-  </PageWrapper>
+  <HomeTanks {locale} />
+  <HomePlayers {locale} />
+  <HomeGames {locale} />
+  <HomeCosmetics {locale} />
+  <HomeTechnical {locale} />
 </BaseLayout>