tasl initial

components/layout/HeaderBanner.tsx

@@ -13,6 +13,7 @@ const HeaderBanner = ({
   subtitle: string;
 }) => {
   const { secondaryBgColor, gray } = useMyTheme();
+  const isTASL = icon === "tasl_main";
   return (
     <Flex
       bg={secondaryBgColor}
@@ -23,11 +24,11 @@ const HeaderBanner = ({
       mb={2}
       h={12}
     >
-      <chakra.div mt="-1rem">
+      <chakra.div mt={isTASL ? "-0.5rem" : "-1rem"}>
         <Image
           src={`/layout/${icon}.png`}
-          height={80}
-          width={80}
+          height={isTASL ? 60 : 80}
+          width={isTASL ? 60 : 80}
           alt={`${icon} logo`}
           priority={true}
         />

components/tasl/TASLPage.tsx

@@ -0,0 +1,48 @@
+import { Box, Flex } from "@chakra-ui/layout";
+import Image from "next/image";
+
+const TASLPage = () => {
+  return (
+    <>
+      <Flex
+        bgGradient="linear-gradient(to right, #000428, #004e92)"
+        rounded="lg"
+        p={4}
+        fontWeight="bold"
+        fontSize="lg"
+        align="center"
+      >
+        <Image
+          src="/layout/tasl_eu.png"
+          height={60}
+          width={60}
+          alt="tasl eu logo"
+        />
+        <Box ml={4}>European open qualifier date to be announced</Box>
+      </Flex>
+      <Flex
+        bgGradient="linear-gradient(to right, #200122, #6f0000)"
+        rounded="lg"
+        p={4}
+        mt={4}
+        fontWeight="bold"
+        fontSize="lg"
+        align="center"
+      >
+        <Image
+          src="/layout/tasl_na.png"
+          height={60}
+          width={60}
+          alt="tasl eu logo"
+        />
+        <Box ml={4}>North American open qualifier date to be announced</Box>
+      </Flex>
+      <Box mt={4}>
+        While we are preparing Season 3 be sure to check out the best moments of
+        Season 2 from YouTube!
+      </Box>
+    </>
+  );
+};
+
+export default TASLPage;

pages/tasl.tsx

@@ -0,0 +1,13 @@
+import HeaderBanner from "components/layout/HeaderBanner";
+import TASLPage from "components/tasl/TASLPage";
+
+// @ts-expect-error
+TASLPage.header = (
+  <HeaderBanner
+    icon="tasl_main"
+    title="TASL"
+    subtitle="Transatlantic Splatoon League - Season 3"
+  />
+);
+
+export default TASLPage;