feat: better history and video sections

src/app/tools/tankopedia/[id]/components/HistorySection.tsx

@@ -8,7 +8,7 @@ export function HistorySection() {
   if (!tank.description) return null;
 
   return (
-    <PageWrapper noFlex1>
+    <PageWrapper noFlex1 align="center">
       <Heading>History of the {tank.name}</Heading>
       <Text>{tank.description}</Text>
     </PageWrapper>

src/app/tools/tankopedia/[id]/components/VideoSection.tsx

@@ -1,4 +1,5 @@
-import { Flex, Heading, Link, Text } from '@radix-ui/themes';
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+import { Callout, Flex, Heading, Link } from '@radix-ui/themes';
 import { use } from 'react';
 import PageWrapper from '../../../../../components/PageWrapper';
 import { videoDefinitions } from '../../../../../core/blitzkit/videos';
@@ -11,10 +12,18 @@ export function VideoSection() {
 
   return (
     <PageWrapper noFlex1>
-      <Flex direction="column" gap="4" align="start">
-        <Flex direction="column">
+      <Flex direction="column" gap="6" align="center">
+        <Flex direction="column" gap="2" align="center">
           <Heading size="6">Review videos</Heading>
-          <Text color="gray">BlitzKit does not endorse any review videos.</Text>
+
+          <Callout.Root size="1">
+            <Callout.Icon>
+              <InfoCircledIcon />
+            </Callout.Icon>
+            <Callout.Text>
+              BlitzKit does not endorse any review videos.
+            </Callout.Text>
+          </Callout.Root>
         </Flex>
 
         <Flex gap="3" wrap="wrap">

src/app/tools/tankopedia/[id]/page.tsx

@@ -84,7 +84,7 @@ export default function Page({ params }: { params: { id: string } }) {
       <TechTreeSection />
       <VideoSection />
       <HistorySection />
-      {!exempt && <AdMidSectionResponsive />}
+      {!exempt && <AdMidSectionResponsive mb="6" />}
     </PageWrapper>
   );
 }

src/constants/youtubers.ts

@@ -0,0 +1,5 @@
+export const youtubers = [
+  { id: 'UCKBYXp4Xn2I2tL1UL4fpbhw', name: 'Droodles' },
+  { id: 'UCrQ-Dy8lVsm11u8pCJ8W7Tw', name: 'HisRoyalFatness' },
+  { id: 'UCxRpZqMElssTdPYDK3x7wyg', name: 'N90' },
+];