TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-21 02:37:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: data-driven tools

Browse Source
This commit is contained in:
TrèsAbhi committed 2025-09-13 21:54:43 -05:00
1 parent 8a99d34af9
commit 58b5ee7f83
7 files changed
+232 -348
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/i18n/strings/en.json
-12
View File
@@ -1445,18 +1445,6 @@
"button": "Get started",
"description": "Get started with BlitzKit",
"seo_description": "Get started with BlitzKit"
},
"blitz_analysis": {
"name": "BlitzAnalysis[]",
"button": "Analyze now",
"description": "Rich historic average stats",
"seo_description": "Rich historic average stats in World of Tanks Blitz"
},
"blitz_insider": {
"name": "Blitz Insider",
"button": "Discover today",
"description": "In-game session stats",
"seo_description": "In-game session stats in World of Tanks Blitz"
}
},
packages/website/src/components/Navbar.astro
+43 -55
View File
@@ -1,24 +1,24 @@
---
import { assertSecret } from '@blitzkit/core';
import { assertSecret } from "@blitzkit/core";
import {
Cross1Icon,
DiscordLogoIcon,
GearIcon,
HamburgerMenuIcon,
} from '@radix-ui/react-icons';
import { Box, Code, Flex, IconButton, Link } from '@radix-ui/themes';
import { TOOLS } from '../constants/tools';
import { resolveBranchName } from '../core/blitzkit/branches';
import { getStrings } from '../core/i18n/getStrings';
import { Var } from '../core/radix/var';
import { LinkI18n } from './LinkI18n';
} from "@radix-ui/react-icons";
import { Box, Code, Flex, IconButton, Link } from "@radix-ui/themes";
import { TOOLS } from "../constants/tools";
import { resolveBranchName } from "../core/blitzkit/branches";
import { getStrings } from "../core/i18n/getStrings";
import { Var } from "../core/radix/var";
import { LinkI18n } from "./LinkI18n";
export interface Props {
integrated?: boolean;
}
const { integrated = false } = Astro.props;
const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
const toolsFiltered = TOOLS.filter((tool) => !tool.href && !tool.disabled);
const { locale } = Astro.params;
const branchName = resolveBranchName(locale);
const isBranchNamed = branchName !== undefined;
@@ -39,47 +39,47 @@ const strings = getStrings(locale);
height: 0;
}
.navbar[data-expanded='false'] *[data-expanded] {
.navbar[data-expanded="false"] *[data-expanded] {
display: none;
}
.navbar[data-expanded='true'] {
.navbar[data-expanded="true"] {
height: 100%;
}
.navbar[data-expanded='false'][data-integrated='false'] .content {
.navbar[data-expanded="false"][data-integrated="false"] .content {
background-color: var(--black-a8);
backdrop-filter: blur(4rem);
box-shadow: var(--shadow-3);
}
.navbar[data-expanded='true'] .content {
.navbar[data-expanded="true"] .content {
background-color: var(--gray-1);
}
.navbar[data-expanded='true'] *[data-closed] {
.navbar[data-expanded="true"] *[data-closed] {
display: none;
}
</style>
<script>
const navbar = document.querySelector<HTMLDivElement>('.navbar');
const hamburger = document.querySelector<HTMLButtonElement>('.hamburger');
const navbar = document.querySelector<HTMLDivElement>(".navbar");
const hamburger = document.querySelector<HTMLButtonElement>(".hamburger");
navbar?.addEventListener('click', () => {
navbar.dataset.expanded = 'false';
navbar?.addEventListener("click", () => {
navbar.dataset.expanded = "false";
});
hamburger?.addEventListener('click', (event) => {
hamburger?.addEventListener("click", (event) => {
if (!navbar) return;
event.stopPropagation();
navbar.dataset.expanded = `${navbar.dataset.expanded === 'false'}`;
navbar.dataset.expanded = `${navbar.dataset.expanded === "false"}`;
});
</script>
{
!integrated && (
<Box className="padder" height={{ initial: '3.5rem', sm: '3rem' }} />
<Box className="padder" height={{ initial: "3.5rem", sm: "3rem" }} />
)
}
@@ -94,16 +94,16 @@ const strings = getStrings(locale);
position="fixed"
style={{
zIndex: 1,
backdropFilter: 'blur(4rem)',
backdropFilter: "blur(4rem)",
}}
>
<Flex
className="content"
width="100%"
p={{ initial: '4', sm: '3' }}
p={{ initial: "4", sm: "3" }}
direction="column"
align="center"
style={{ backgroundColor: integrated ? undefined : Var('gray-1') }}
style={{ backgroundColor: integrated ? undefined : Var("gray-1") }}
>
<Flex gap="4" direction="column" maxWidth="80rem" width="100%">
<Flex align="center">
@@ -131,30 +131,26 @@ const strings = getStrings(locale);
<Flex
align="center"
gap={{ initial: '4', md: '6' }}
display={{ initial: 'none', sm: 'flex' }}
gap={{ initial: "4", md: "6" }}
display={{ initial: "none", sm: "flex" }}
justify="center"
className="tools"
>
{
toolsFiltered.map((tool) => {
const unavailableOnBranch = tool.branches?.every(
(branch) =>
branch !== assertSecret(import.meta.env.PUBLIC_BRANCH),
);
const selected = Astro.url.pathname.includes(`/${tool.id}`);
const toolStrings =
strings.website.tools[
(tool.stringsId ??
(tool.strings ??
tool.id) as keyof typeof strings.website.tools
];
if (unavailableOnBranch) return null;
if (toolStrings === undefined) console.log(tool.id);
return (
<LinkI18n
{locale}
weight={selected ? 'medium' : 'regular'}
weight={selected ? "medium" : "regular"}
color="gray"
highContrast={selected}
size="2"
@@ -172,7 +168,7 @@ const strings = getStrings(locale);
<Flex align="center" gap="4">
<Link
style={{ display: 'flex', alignContent: 'center' }}
style={{ display: "flex", alignContent: "center" }}
color="gray"
href="https://discord.gg/nDt7AjGJQH"
underline="none"
@@ -183,7 +179,7 @@ const strings = getStrings(locale);
<LinkI18n
{locale}
style={{ display: 'flex', alignContent: 'center' }}
style={{ display: "flex", alignContent: "center" }}
color="gray"
href="/settings"
underline="none"
@@ -193,7 +189,7 @@ const strings = getStrings(locale);
<!-- <NavbarAccount client:idle /> -->
<Flex align="center" display={{ initial: 'flex', sm: 'none' }}>
<Flex align="center" display={{ initial: "flex", sm: "none" }}>
<IconButton variant="ghost" color="gray" className="hamburger">
<Cross1Icon data-expanded />
<HamburgerMenuIcon data-closed />
@@ -206,36 +202,28 @@ const strings = getStrings(locale);
direction="column"
data-expanded
gap="3"
display={{ initial: 'flex', sm: 'none' }}
display={{ initial: "flex", sm: "none" }}
>
{
toolsFiltered.map((tool) => {
const unavailableOnBranch = tool.branches?.every(
(branch) =>
branch !== assertSecret(import.meta.env.PUBLIC_BRANCH),
);
if (unavailableOnBranch) return null;
const toolStrings =
strings.website.tools[
(tool.stringsId ??
tool.id) as keyof typeof strings.website.tools
(tool.strings ?? tool.id) as keyof typeof strings.website.tools
];
return (
<Link
color="gray"
highContrast
style={{ display: 'contents' }}
style={{ display: "contents" }}
href={`/${tool.id}`}
>
<Box
style={{
borderRadius: Var('radius-2'),
borderRadius: Var("radius-2"),
backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
backgroundSize: '200%',
backgroundPosition: 'right center',
backgroundSize: "200%",
backgroundPosition: "right center",
}}
>
<Flex
@@ -243,7 +231,7 @@ const strings = getStrings(locale);
justify="end"
flexGrow="1"
style={{
background: `linear-gradient(90deg, transparent, ${Var('gray-1')} 90%)`,
background: `linear-gradient(90deg, transparent, ${Var("gray-1")} 90%)`,
}}
>
{toolStrings.name}
@@ -261,11 +249,11 @@ const strings = getStrings(locale);
data-expanded
flexGrow="1"
width="100%"
display={{ initial: 'block', sm: 'none' }}
display={{ initial: "block", sm: "none" }}
style={{
backgroundColor: Var('black-a7'),
backdropFilter: 'blur(0.5rem)',
WebkitBackdropFilter: 'blur(0.5rem)',
backgroundColor: Var("black-a7"),
backdropFilter: "blur(0.5rem)",
WebkitBackdropFilter: "blur(0.5rem)",
}}
/>
</Flex>
packages/website/src/components/ToolCard.astro
+39 -56
View File
@@ -1,24 +1,20 @@
---
import { assertSecret } from '@blitzkit/core';
import { CaretRightIcon } from '@radix-ui/react-icons';
import { Box, Button, Code, Flex, Heading, Text } from '@radix-ui/themes';
import type { Tool } from '../constants/tools';
import { getStrings } from '../core/i18n/getStrings';
import { LinkI18n } from './LinkI18n';
import { CaretRightIcon } from "@radix-ui/react-icons";
import { Box, Button, Flex, Heading, Text } from "@radix-ui/themes";
import type { Tool } from "../constants/tools";
import { getStrings } from "../core/i18n/getStrings";
import { LinkI18n } from "./LinkI18n";
interface Props {
tool: Tool;
}
const { tool } = Astro.props;
const disabled = tool.branches?.every(
(branch) => branch !== assertSecret(import.meta.env.PUBLIC_BRANCH),
);
const { locale } = Astro.params;
const strings = getStrings(locale);
const toolStrings =
strings.website.tools[
(tool.stringsId ?? tool.id) as keyof typeof strings.website.tools
(tool.strings ?? tool.id) as keyof typeof strings.website.tools
];
---
@@ -29,11 +25,12 @@ const toolStrings =
background-position: center;
height: 16rem;
&[data-disabled='true'] {
&[data-disabled="true"] {
opacity: 0.25;
}
&[data-significant='true'] {
&[data-significant="true"] {
width: 100%;
height: min(20rem, 50vh);
}
}
@@ -49,90 +46,76 @@ const toolStrings =
<Flex
style={{ backgroundImage: `url(/assets/images/tools/${tool.id}.webp)` }}
data-disabled={disabled}
data-significant={tool.significant}
className="container"
position="relative"
overflow="hidden"
flexGrow={tool.significant ? undefined : '1'}
flexBasis={tool.significant ? undefined : { initial: undefined, sm: '0' }}
flexGrow={tool.significant ? undefined : "1"}
flexBasis={tool.significant ? undefined : { initial: undefined, sm: "0" }}
>
<LinkI18n
{locale}
className="link"
underline="none"
href={disabled ? '#' : (tool.href ?? `/${tool.id}`)}
target={tool.href ? '_blank' : undefined}
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',
backgroundSize: "cover",
backgroundPosition: "center",
}}
/>
<Flex
px={{ initial: '6', md: tool.significant ? '8' : '6' }}
py={{ initial: '4', sm: tool.significant ? '6' : '4' }}
px={{ initial: "6", md: tool.significant ? "8" : "6" }}
py={{ initial: "4", sm: tool.significant ? "6" : "4" }}
gap="4"
align="center"
justify="between"
width="100%"
direction={{ initial: 'column', xs: 'row' }}
direction={{ initial: "column", xs: "row" }}
style={{
backgroundColor: 'var(--color-panel-translucent)',
backdropFilter: 'blur(64px)',
WebkitBackdropFilter: 'blur(64px)',
backgroundColor: "var(--color-panel-translucent)",
backdropFilter: "blur(64px)",
WebkitBackdropFilter: "blur(64px)",
}}
>
<Flex
direction="column"
justify="center"
align={{ initial: 'center', xs: 'start' }}
align={{ initial: "center", xs: "start" }}
>
<Heading
align={{ initial: 'center', sm: 'left' }}
size={{ initial: '6', sm: tool.significant ? '7' : '5' }}
align={{ initial: "center", sm: "left" }}
size={{ initial: "6", sm: tool.significant ? "7" : "5" }}
weight="medium"
>
{toolStrings.name}
</Heading>
<Text
align={{ initial: 'center', sm: 'left' }}
size={{ initial: '3', sm: tool.significant ? '4' : '3' }}
align={{ initial: "center", sm: "left" }}
size={{ initial: "3", sm: tool.significant ? "4" : "3" }}
color="gray"
>
{
disabled ? (
<>
Unavailable on{' '}
<Code>{assertSecret(import.meta.env.PUBLIC_BRANCH)}</Code>
</>
) : (
toolStrings.description
)
}
{toolStrings.description}
</Text>
</Flex>
{
!disabled && (
<Button
highContrast={tool.button.highContrast}
size={{
initial: undefined,
sm: tool.significant ? '3' : undefined,
}}
color={tool.button.color}
style={{ cursor: 'inherit' }}
>
{toolStrings.button}
<CaretRightIcon />
</Button>
)
}
<Button
highContrast={tool.button.highContrast}
size={{
initial: undefined,
sm: tool.significant ? "3" : undefined,
}}
color={tool.button.color}
style={{ cursor: "inherit" }}
>
{toolStrings.button}
<CaretRightIcon />
</Button>
</Flex>
</LinkI18n>
</Flex>
packages/website/src/constants/tools.json
+24
View File
@@ -0,0 +1,24 @@
[
{
"id": "tanks",
"strings": "tankopedia",
"button": { "color": "purple" },
"significant": true
},
{
"id": "compare",
"button": { "color": "crimson" }
},
{
"id": "session",
"button": { "color": "blue" }
},
{
"id": "discord",
"href": "https://discord.com/application-directory/1097673957865443370",
"button": { "color": "indigo" }
}
]
packages/website/src/constants/tools.ts
+69 -135
View File
@@ -1,148 +1,82 @@
import { Button } from '@radix-ui/themes';
import type { ComponentProps } from 'react';
import { Button } from "@radix-ui/themes";
import type { ComponentProps } from "react";
export interface Tool {
id: string;
stringsId?: string;
strings?: string;
disabled?: boolean;
href?: string;
button: {
highContrast?: boolean;
color: ComponentProps<typeof Button>['color'];
color: ComponentProps<typeof Button>["color"];
};
significant?: boolean;
branches?: string[];
}
export const tankopediaTool: Tool = {
id: 'tanks',
stringsId: 'tankopedia',
button: {
color: 'purple',
},
significant: true,
branches: ['main', 'dev', 'opentest', 'preview'],
};
// export const ratingTool: Tool = {
// id: 'rating',
// image: 'WEyMZH3',
// button: {
// color: 'orange',
// },
// branches: ['main', 'dev'],
// };
export const compareTool: Tool = {
id: 'compare',
button: {
color: 'crimson',
},
branches: ['main', 'dev', 'opentest', 'preview'],
};
export const sessionTool: Tool = {
// TODO: rename to tracker
id: 'session',
button: {
color: 'blue',
},
branches: ['main', 'dev'],
};
export const discordTool: Tool = {
id: 'discord',
href: 'https://discord.com/application-directory/1097673957865443370',
button: {
color: 'indigo',
},
};
export const moreTool: Tool = {
id: 'more',
href: 'https://discord.gg/nDt7AjGJQH',
button: {
color: 'plum',
},
};
export const playersTool: Tool = {
id: 'players',
button: {
color: 'blue',
},
href: '_', // TODO: remove this to re-enable link
branches: ['main', 'dev'],
};
export const performanceTool: Tool = {
id: 'performance',
button: {
color: 'jade',
},
branches: ['main', 'dev'],
};
export const embedTool: Tool = {
id: 'embed',
button: {
color: 'red',
},
branches: ['main', 'dev'],
};
export const homeTool: Tool = {
id: 'home',
button: { color: 'blue' },
};
export const galleryTool: Tool = {
id: 'gallery',
button: {
color: 'gold',
},
branches: ['main', 'dev'],
};
export const tierListTool: Tool = {
id: 'tier-list',
stringsId: 'tier_list',
button: {
color: 'orange',
},
branches: ['main', 'dev', 'opentest', 'preview'],
};
export const chartsTool: Tool = {
id: 'charts',
button: {
color: 'bronze',
},
branches: ['main', 'dev'],
};
export const guessTool: Tool = {
id: 'guess',
button: { color: 'cyan' },
branches: ['main', 'dev', 'opentest', 'preview'],
};
export const mixerTool: Tool = {
id: 'mixer',
button: { color: 'red' },
branches: ['main', 'dev', 'opentest', 'preview'],
};
export const TOOLS: Tool[] = [
tankopediaTool,
compareTool,
performanceTool,
guessTool,
// mixerTool,
// chartsTool,
galleryTool,
sessionTool,
tierListTool,
embedTool,
// ratingTool,
{
id: "tanks",
strings: "tankopedia",
button: { color: "purple" },
significant: true,
},
{
id: "players",
disabled: true,
button: { color: "blue" },
},
{
id: "compare",
button: { color: "crimson" },
},
{
id: "performance",
button: { color: "jade" },
},
{
id: "charts",
disabled: true,
button: { color: "bronze" },
},
{
id: "guess",
button: { color: "cyan" },
},
{
id: "mixer",
disabled: true,
button: { color: "red" },
},
{
id: "charts",
disabled: true,
button: { color: "red" },
},
{
id: "gallery",
button: { color: "gold" },
},
{
id: "session",
button: { color: "blue" },
},
{
id: "discord",
href: "https://discord.com/application-directory/1097673957865443370",
button: { color: "indigo" },
},
{
id: "tier-list",
strings: "tier_list",
button: { color: "orange" },
},
{
id: "embed",
button: { color: "red" },
},
{
id: "more",
href: "https://discord.gg/nDt7AjGJQH",
button: { color: "plum" },
},
];
packages/website/src/layouts/ToolLayout.astro
+9 -9
View File
@@ -1,9 +1,9 @@
---
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';
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;
@@ -14,7 +14,7 @@ const { locale } = Astro.params;
const strings = getStrings(locale);
const toolStrings =
strings.website.tools[
(tool.stringsId ?? tool.id) as keyof typeof strings.website.tools
(tool.strings ?? tool.id) as keyof typeof strings.website.tools
];
---
@@ -24,7 +24,7 @@ const toolStrings =
<Box
style={{
backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
backgroundSize: 'cover',
backgroundSize: "cover",
}}
>
<Flex
@@ -32,8 +32,8 @@ const toolStrings =
align="center"
py="6"
style={{
backdropFilter: 'blur(4rem)',
WebkitBackdropFilter: 'blur(4rem)',
backdropFilter: "blur(4rem)",
WebkitBackdropFilter: "blur(4rem)",
}}
>
<Heading size="7">{toolStrings.name}</Heading>
packages/website/src/pages/[...locale]/index.astro
+48 -81
View File
@@ -1,37 +1,43 @@
---
import { AstroSeo } from '@astrolib/seo';
import { assertSecret } from '@blitzkit/core';
import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from '@blitzkit/i18n';
import { literals } from '@blitzkit/i18n/src/literals';
import { Box, Flex, Heading, Link } from '@radix-ui/themes';
import type { GetStaticPaths } from 'astro';
import { AesonPlug } from '../../components/AesonPlug';
import HomeHero from '../../components/HomeHero.astro';
import { Plugs } from '../../components/Plugs';
import ToolCard from '../../components/ToolCard.astro';
import {
compareTool,
discordTool,
embedTool,
galleryTool,
guessTool,
moreTool,
performanceTool,
sessionTool,
tankopediaTool,
tierListTool,
} from '../../constants/tools';
import { getStrings } from '../../core/i18n/getStrings';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { AstroSeo } from "@astrolib/seo";
import { assertSecret } from "@blitzkit/core";
import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from "@blitzkit/i18n";
import { literals } from "@blitzkit/i18n/src/literals";
import { Box, Flex, Link } from "@radix-ui/themes";
import type { GetStaticPaths } from "astro";
import { AesonPlug } from "../../components/AesonPlug";
import HomeHero from "../../components/HomeHero.astro";
import { Plugs } from "../../components/Plugs";
import ToolCard from "../../components/ToolCard.astro";
import { TOOLS, type Tool } from "../../constants/tools";
import { getStrings } from "../../core/i18n/getStrings";
import BaseLayout from "../../layouts/BaseLayout.astro";
const MAX_TOOLS_PER_ROW = 2;
const PUBLIC_ASSET_BRANCH = assertSecret(import.meta.env.PUBLIC_BRANCH);
const locale = Astro.params.locale ?? DEFAULT_LOCALE;
const strings = getStrings(Astro.params.locale);
const rows: Tool[][] = [];
for (const tool of TOOLS) {
if (tool.disabled) continue;
const compatibleRow = rows.find(
(row) => row.length < MAX_TOOLS_PER_ROW && !row[0].significant
);
if (compatibleRow) {
compatibleRow.push(tool);
} else {
rows.push([tool]);
}
}
export const getStaticPaths = (() => {
return [
...SUPPORTED_LOCALES.filter((locale) => locale !== DEFAULT_LOCALE).map(
(locale) => ({ params: { locale } }),
(locale) => ({ params: { locale } })
),
{ params: { locale: undefined } },
];
@@ -44,11 +50,11 @@ export const getStaticPaths = (() => {
canonical={Astro.url.href}
openGraph={{
url: Astro.url.href,
title: 'BlitzKit',
title: "BlitzKit",
description: strings.website.home.seo_description,
site_name: 'BlitzKit',
site_name: "BlitzKit",
}}
twitter={{ cardType: 'summary_large_image' }}
twitter={{ cardType: "summary_large_image" }}
/>
<BaseLayout>
@@ -79,7 +85,7 @@ export const getStaticPaths = (() => {
underline="always"
>
{literals(strings.website.home.help_translate, [
'BlitzKit',
"BlitzKit",
strings.common.locales[locale],
])}
</Link>
@@ -90,7 +96,7 @@ export const getStaticPaths = (() => {
<Plugs client:idle />
{
PUBLIC_ASSET_BRANCH === 'preview' && (
PUBLIC_ASSET_BRANCH === "preview" && (
<Flex justify="center" my="8" px="4">
<AesonPlug />
</Flex>
@@ -99,57 +105,18 @@ export const getStaticPaths = (() => {
<Flex p="4" justify="center" gap="4" mt="3">
<Flex maxWidth="80rem" flexGrow="1" gap="4" direction="column">
<ToolCard tool={tankopediaTool} />
<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={guessTool} />
<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"
>{strings.website.home.other_projects.title}</Heading
>
<Flex gap="4" mb="6" direction={{ initial: 'column', sm: 'row' }}>
<ToolCard
tool={{
button: { color: 'blue' },
id: 'blitz-analysis',
stringsId: 'blitz_analysis',
href: 'https://blitzanalysiz.com/',
}}
/>
<ToolCard
tool={{
button: { color: 'purple', highContrast: true },
id: 'blitz-insider',
stringsId: 'blitz_insider',
href: 'https://discord.gg/UjWf9eGgtR',
}}
/>
</Flex>
{
rows.map((row) => (
<Flex gap="4" direction={{ initial: "column", sm: "row" }}>
{row.map((tool) => (
<ToolCard tool={tool} />
))}
{row.length < MAX_TOOLS_PER_ROW && !row[0].significant && (
<Box flexGrow="1" />
)}
</Flex>
))
}
</Flex>
</Flex>