Prod release

components/Layout/Header/Header.tsx

@@ -42,9 +42,6 @@ const Header = ({ isOpen, toggle }: HeaderProps) => {
         <InputWithResults isOpen={isOpen} toggle={toggle} />
       )}
       <Group>
-        <Link href="https://docs.exile.watch" target="_blank">
-          docs
-        </Link>
         <Link href="https://github.com/exile-watch" target="_blank">
           <IconBrandGithub />
         </Link>

components/Layout/Layout.tsx

@@ -1,7 +1,6 @@
 import {
   AppShell,
   Flex,
-  Text,
   Title,
   useDisclosure,
   useMediaQuery,
@@ -13,50 +12,48 @@ const SidebarEncountersDesktop = dynamic(
   () =>
     import("#features/encounters/components/Sidebar/SidebarEncountersDesktop"),
 );
-import { useRouter } from "next/router";
 import styles from "./styles.module.scss";
 
 type LayoutProps = {
   children?: ReactNode;
   title?: string;
+  isWithoutSidebar?: boolean;
 };
 
-const Layout = ({ children, title }: LayoutProps) => {
+const Layout = ({ children, title, isWithoutSidebar = false }: LayoutProps) => {
   const [isOpen, { toggle }] = useDisclosure(false);
   const { isMobile } = useMediaQuery();
-  const { pathname, query } = useRouter();
-  const isWip =
-    pathname === "/" || pathname === "/encounters" || !!query?.category;
+
+  const renderSidebar =
+    isWithoutSidebar === false || (isWithoutSidebar === true && isMobile);
 
   return (
     <AppShell
       header={{ height: 60 }}
-      navbar={{ breakpoint: "md", width: 250, collapsed: { mobile: !isOpen } }}
+      navbar={
+        renderSidebar
+          ? { breakpoint: "md", width: 250, collapsed: { mobile: !isOpen } }
+          : { breakpoint: 0, width: 0, collapsed: { mobile: !isOpen } }
+      }
       withBorder={false}
     >
       <AppShell.Header bg="dark.6">
         <Header isOpen={isOpen} toggle={toggle} />
       </AppShell.Header>
-      <AppShell.Navbar bg="dark.6">
-        <SidebarEncountersDesktop isOpen={isOpen} toggle={toggle} />
-      </AppShell.Navbar>
-      <AppShell.Main mt="md" ml="md" pr="md" className={styles.main}>
+      {renderSidebar && (
+        <AppShell.Navbar bg="dark.6">
+          <SidebarEncountersDesktop isOpen={isOpen} toggle={toggle} />
+        </AppShell.Navbar>
+      )}
+      <AppShell.Main ml="md" pr="md" className={styles.main}>
         {title && (
           <Title mb="2rem" order={2}>
             {title}
           </Title>
         )}
-        {!isWip && (
-          <Flex className={styles.announcement} align="center" mr="md">
-            <Text mx={4} size={isMobile ? "xs" : "md"}>
-              🚧 This website is currently work in progress. Missing data is
-              expected.
-            </Text>
-          </Flex>
-        )}
-        <div className={!isWip ? styles.contentSmallMargin : ""}>
+        <Flex mt="md" display="block">
           {children}
-        </div>
+        </Flex>
       </AppShell.Main>
     </AppShell>
   );

components/Layout/styles.module.scss

@@ -12,8 +12,4 @@
   position: fixed;
   z-index: 100;
   box-shadow: 0 0 10px black;
-}
-
-.contentSmallMargin {
-  margin-top: 46px;
 }

features/encounters/components/Boss/BossAbility/Video/Video.module.scss

@@ -39,7 +39,38 @@
   height: 100%;
 }
 
-.videoOnHomepage {
+.onWelcomePage {
+  z-index: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0.1;
 
-  width: 100px;
-}
+  video {
+    transform: scale(1.1);
+    margin-left: -200px;
+
+    @media (min-width: 88em) {
+      margin-left: -400px;
+      margin-top: -40px;
+    }
+
+    @media (max-width: 45em) {
+      margin-top: 50px;
+      transform: scale(2);
+      width: 800px;
+      height: 100%;
+      margin-left: -100px;
+    }
+
+    @media (max-width: 30em) {
+      margin-top: 50px;
+      transform: scale(1.5);
+      width: 800px;
+      height: 100%;
+      margin-left: -250px;
+    }
+  }
+}

features/encounters/components/Boss/BossAbility/Video/Video.tsx

@@ -13,6 +13,7 @@ type VideoProps = {
   abilityName?: string;
   speed?: number;
   isOnHomepage?: boolean;
+  isOnWelcomePage?: boolean;
 };
 
 // @ts-ignore
@@ -22,6 +23,7 @@ const Video = ({
   // abilityName,
   speed,
   isOnHomepage,
+  isOnWelcomePage,
 }: VideoProps) => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const videoContainerRef = useRef<HTMLDivElement>(null);
@@ -58,7 +60,12 @@ const Video = ({
   // }
 
   return (
-    <div className={styles.videoWrapper} ref={videoContainerRef}>
+    <div
+      className={cx(styles.videoWrapper, {
+        [styles.onWelcomePage]: isOnWelcomePage,
+      })}
+      ref={videoContainerRef}
+    >
       {!src && <Text c="dimmed">Something went wrong</Text>}
       {src && (
         <>

features/encounters/components/Sidebar/SidebarEncountersDesktop.tsx

@@ -11,6 +11,7 @@ import {
   Center,
   Divider,
   Group,
+  NavLink,
   Stack,
   Text,
   useMediaQuery,
@@ -142,25 +143,43 @@ const SidebarEncountersDesktop = ({
           ))}
         </Stack>
       </Stack>
-      <Stack>
+      <Stack gap="xs">
+        <Divider label="About" mb={-8} />
+        <NavLink
+          component={Link}
+          href="https://docs.exile.watch"
+          target="_blank"
+          label="Docs"
+          c="sand.2"
+          ta="left"
+          p={0}
+        />
+        <NavLink
+          component={Link}
+          href="https://engineering.exile.watch"
+          target="_blank"
+          label="Engineering Blog"
+          c="sand.2"
+          ta="left"
+          p={0}
+          mb={-4}
+        />
+        <Divider label="Legal" mb={-8} />
+        <NavLink
+          component={Link}
+          href="https://docs.exile.watch/privacy-policy"
+          target="_blank"
+          label="Privacy Policy"
+          c="sand.2"
+          ta="left"
+          p={0}
+        />
         <Divider />
-        <Group justify="center">
-          <Link href="https://docs.exile.watch/legal" target="_blank">
-            <Text size="xs">Legal</Text>
-          </Link>
-          <Divider orientation="vertical" />
-          <Link
-            href="https://docs.exile.watch/legal/privacy-policy"
-            target="_blank"
-          >
-            <Text size="xs">Privacy Policy</Text>
-          </Link>
-        </Group>
-        <Divider />
-        <Text size="xs" ta="center" mb="md" c="dimmed">
+        <Text size="xs" ta="center" c="dimmed">
           This product isn't affiliated with or endorsed by Grinding Gear Games
           in any way.
         </Text>
+        <Divider label="© 2024 exile.watch" mb="xs" />
       </Stack>
     </Stack>
   );

features/welcome/WelcomeCard/CardWrapper/CardWrapper.module.scss

@@ -0,0 +1,20 @@
+.sand {
+  background: linear-gradient(to top right, color-mix(in srgb, var(--mantine-color-dimmed) 10%, transparent), color-mix(in srgb, var(--mantine-color-sand-1) 30%, transparent));
+  span {
+    color: var(--mantine-color-sand-2);
+  }
+}
+
+.red {
+  background: linear-gradient(to top right, color-mix(in srgb, var(--mantine-color-dimmed) 10%, transparent), color-mix(in srgb, var(--mantine-color-red-5) 30%, transparent));
+  span {
+    color: var(--mantine-color-red-2);
+  }
+}
+
+.teal {
+  background: linear-gradient(to top right, color-mix(in srgb, var(--mantine-color-dimmed) 10%, transparent), color-mix(in srgb, var(--mantine-color-teal-4) 30%, transparent));
+  span {
+    color: var(--mantine-color-teal-2);
+  }
+}

features/welcome/WelcomeCard/CardWrapper/CardWrapper.tsx

@@ -0,0 +1,47 @@
+import { Card, Divider, Stack, Text, Title } from "@exile-watch/writ-react";
+import cx from "classnames";
+import Video from "#features/encounters/components/Boss/BossAbility/Video/Video";
+import { WelcomePageContentType } from "#features/welcome/WelcomeCard/about-list";
+import styles from "./CardWrapper.module.scss";
+
+const CardWrapper = ({
+  aboutList,
+  title,
+  dividerLabel,
+  color,
+  src,
+}: WelcomePageContentType) => {
+  return (
+    <Stack>
+      <Card
+        className={cx(styles.card, styles[color])}
+        shadow="md"
+        c={`${color}.2`}
+      >
+        <Video src={src} isOnWelcomePage />
+        <Title order={3} ta="center" fs="italic">
+          ... {title} ...
+        </Title>
+        <Divider
+          fs="italic"
+          labelPosition="center"
+          label={`... ${dividerLabel} ...`}
+          mt="sm"
+          color={`${color}.2`}
+        />
+        <Card.Section p="md">
+          <Stack>
+            {aboutList.map((item, i, self) => (
+              <Text ta="center" key={item}>
+                ...{item}
+                {i !== self.length - 1 ? "..." : "?"}
+              </Text>
+            ))}
+          </Stack>
+        </Card.Section>
+      </Card>
+    </Stack>
+  );
+};
+
+export default CardWrapper;

features/welcome/WelcomeCard/WelcomeCard.tsx

@@ -0,0 +1,45 @@
+import {
+  Center,
+  Container,
+  Divider,
+  SimpleGrid,
+  Stack,
+  Title,
+} from "@exile-watch/writ-react";
+
+import CardWrapper from "#features/welcome/WelcomeCard/CardWrapper/CardWrapper";
+import WelcomePageButtons from "#features/welcome/WelcomeCard/WelcomePageButtons/WelcomePageButtons";
+import WelcomePageSummary from "#features/welcome/WelcomeCard/WelcomePageSummary/WelcomePageSummary";
+import { welcomePageContent } from "#features/welcome/WelcomeCard/about-list";
+
+const WelcomeCard = () => {
+  return (
+    <Container size="xl" ta="center" mb="md">
+      <Stack>
+        <Center>
+          <img
+            src="https://avatars.githubusercontent.com/u/158840748?s=400&u=4c73ba2a9a2ebc70b01c6303d41e8571df84ec37&v=4"
+            width={200}
+            alt="exile.watch logo"
+          />
+        </Center>
+        <Center>
+          <Title fs="italic">Are you...</Title>
+        </Center>
+        <Center>
+          <SimpleGrid cols={{ md: 3, sm: 1, xs: 1 }}>
+            <CardWrapper {...welcomePageContent.outsider} />
+            <CardWrapper {...welcomePageContent.poeConnoisseur} />
+            <CardWrapper {...welcomePageContent.softwareEngineer} />
+          </SimpleGrid>
+        </Center>
+        <Divider />
+        <WelcomePageSummary />
+        <Divider />
+        <WelcomePageButtons />
+      </Stack>
+    </Container>
+  );
+};
+
+export default WelcomeCard;

features/welcome/WelcomeCard/WelcomePageButtons/WelcomePageButton.tsx

@@ -0,0 +1,27 @@
+import { Button } from "@exile-watch/writ-react";
+import { IconArrowRight } from "@tabler/icons-react";
+import Link from "next/link";
+import styles from "./WelcomePageButtons.module.scss";
+
+interface ButtonProps {
+  href: string;
+  color: string;
+  label: string;
+}
+
+const WelcomePageButton = ({ href, color, label }: ButtonProps) => {
+  return (
+    <Button
+      component={Link}
+      href={href}
+      variant="gradient"
+      gradient={{ from: "transparent", to: color }}
+      rightSection={<IconArrowRight size={14} />}
+      className={styles.button}
+    >
+      {label}
+    </Button>
+  );
+};
+
+export default WelcomePageButton;

features/welcome/WelcomeCard/WelcomePageButtons/WelcomePageButtons.module.scss

@@ -0,0 +1,11 @@
+.button {
+  text-shadow: 1px 1px black;
+
+  span {
+    overflow: visible;
+  }
+
+  svg {
+    filter: drop-shadow(1px 1px 1px black)
+  }
+}