diff --git a/components/Layout/Header/Header.tsx b/components/Layout/Header/Header.tsx index efc13f5..f180264 100644 --- a/components/Layout/Header/Header.tsx +++ b/components/Layout/Header/Header.tsx @@ -42,9 +42,6 @@ const Header = ({ isOpen, toggle }: HeaderProps) => { )} - - docs - diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx index 4584655..042ec45 100644 --- a/components/Layout/Layout.tsx +++ b/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 (
- - - - + {renderSidebar && ( + + + + )} + {title && ( {title} )} - {!isWip && ( - - - 🚧 This website is currently work in progress. Missing data is - expected. - - - )} -
+ {children} -
+ ); diff --git a/components/Layout/styles.module.scss b/components/Layout/styles.module.scss index d519971..6500794 100644 --- a/components/Layout/styles.module.scss +++ b/components/Layout/styles.module.scss @@ -12,8 +12,4 @@ position: fixed; z-index: 100; box-shadow: 0 0 10px black; -} - -.contentSmallMargin { - margin-top: 46px; } \ No newline at end of file diff --git a/features/encounters/components/Boss/BossAbility/Video/Video.module.scss b/features/encounters/components/Boss/BossAbility/Video/Video.module.scss index da319ee..a1333ae 100644 --- a/features/encounters/components/Boss/BossAbility/Video/Video.module.scss +++ b/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; + } + } +} \ No newline at end of file diff --git a/features/encounters/components/Boss/BossAbility/Video/Video.tsx b/features/encounters/components/Boss/BossAbility/Video/Video.tsx index 483388d..3408ec9 100644 --- a/features/encounters/components/Boss/BossAbility/Video/Video.tsx +++ b/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(null); const videoContainerRef = useRef(null); @@ -58,7 +60,12 @@ const Video = ({ // } return ( -
+
{!src && Something went wrong} {src && ( <> diff --git a/features/encounters/components/Sidebar/SidebarEncountersDesktop.tsx b/features/encounters/components/Sidebar/SidebarEncountersDesktop.tsx index ede1139..69d44d1 100644 --- a/features/encounters/components/Sidebar/SidebarEncountersDesktop.tsx +++ b/features/encounters/components/Sidebar/SidebarEncountersDesktop.tsx @@ -11,6 +11,7 @@ import { Center, Divider, Group, + NavLink, Stack, Text, useMediaQuery, @@ -142,25 +143,43 @@ const SidebarEncountersDesktop = ({ ))} - + + + + + + - - - Legal - - - - Privacy Policy - - - - + This product isn't affiliated with or endorsed by Grinding Gear Games in any way. + ); diff --git a/features/welcome/WelcomeCard/CardWrapper/CardWrapper.module.scss b/features/welcome/WelcomeCard/CardWrapper/CardWrapper.module.scss new file mode 100644 index 0000000..f2f78cd --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/features/welcome/WelcomeCard/CardWrapper/CardWrapper.tsx b/features/welcome/WelcomeCard/CardWrapper/CardWrapper.tsx new file mode 100644 index 0000000..09a7dfe --- /dev/null +++ b/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 ( + + + + + ); +}; + +export default CardWrapper; diff --git a/features/welcome/WelcomeCard/WelcomeCard.tsx b/features/welcome/WelcomeCard/WelcomeCard.tsx new file mode 100644 index 0000000..f4f3efa --- /dev/null +++ b/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 ( + + +
+ exile.watch logo +
+
+ Are you... +
+
+ + + + + +
+ + + + + + + ); +}; + +export default WelcomeCard; diff --git a/features/welcome/WelcomeCard/WelcomePageButtons/WelcomePageButton.tsx b/features/welcome/WelcomeCard/WelcomePageButtons/WelcomePageButton.tsx new file mode 100644 index 0000000..a46da2f --- /dev/null +++ b/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 ( + + ); +}; + +export default WelcomePageButton; diff --git a/features/welcome/WelcomeCard/WelcomePageButtons/WelcomePageButtons.module.scss b/features/welcome/WelcomeCard/WelcomePageButtons/WelcomePageButtons.module.scss new file mode 100644 index 0000000..f196a8c --- /dev/null +++ b/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) + } +} \ No newline at end of file diff --git a/features/welcome/WelcomeCard/WelcomePageButtons/WelcomePageButtons.tsx b/features/welcome/WelcomeCard/WelcomePageButtons/WelcomePageButtons.tsx new file mode 100644 index 0000000..76b8a82 --- /dev/null +++ b/features/welcome/WelcomeCard/WelcomePageButtons/WelcomePageButtons.tsx @@ -0,0 +1,26 @@ +import { Group } from "@exile-watch/writ-react"; +import WelcomePageButton from "#features/welcome/WelcomeCard/WelcomePageButtons/WelcomePageButton"; + +const WelcomePageButtons = () => { + return ( + + + + + + ); +}; + +export default WelcomePageButtons; diff --git a/features/welcome/WelcomeCard/WelcomePageSummary/WelcomePageSummary.tsx b/features/welcome/WelcomeCard/WelcomePageSummary/WelcomePageSummary.tsx new file mode 100644 index 0000000..8e1befd --- /dev/null +++ b/features/welcome/WelcomeCard/WelcomePageSummary/WelcomePageSummary.tsx @@ -0,0 +1,24 @@ +import { Code, Divider, Text } from "@exile-watch/writ-react"; + +const WelcomePageSummary = () => { + return ( + <> + + If you answered 'yes' to any of the above statements, then{" "} + exile.watch was created for people like you! + + + + exile.watch aims to provide quick snippets of the majority + of Path of Exile encounters' abilities. + + + In the modern world, no one has time to watch a 10-minute fight guide. + + Learn strategies in no time. + Each ability is explained with short GIFs + + ); +}; + +export default WelcomePageSummary; diff --git a/features/welcome/WelcomeCard/about-list.ts b/features/welcome/WelcomeCard/about-list.ts new file mode 100644 index 0000000..5d7cbeb --- /dev/null +++ b/features/welcome/WelcomeCard/about-list.ts @@ -0,0 +1,46 @@ +const welcomePageContent = { + outsider: { + title: "an Outsider", + dividerLabel: "who", + aboutList: [ + "is curious about Path of Exile encounters", + "wants to understand the website flow", + "or maybe is seeking a guide for your first step in Wraeclast", + ], + color: "sand", + src: "https://i.gyazo.com/d0583bb3c9d03c81cbcfef9338f690be.mp4", + }, + poeConnoisseur: { + title: "a Path of Exile Connoisseur", + dividerLabel: "who", + aboutList: [ + "has wondered what kills you in the Crimson Temple boss room", + "is so fed up with Sirus' \"Die\" beams that you're questioning what they actually do", + "or perhaps want to see all of Maven's abilities before facing her", + ], + color: "red", + src: "https://i.gyazo.com/669502f0fa167d519c8782c35da1c13e.mp4", + }, + softwareEngineer: { + title: "a Software Engineer", + dividerLabel: "that", + aboutList: [ + "likes digging through Software Architecture, primarily Frontend", + "would like to contribute to an open-source project", + "or maybe enjoys reading engineering blogs", + ], + color: "teal", + src: "https://i.gyazo.com/7f7cb1ef83923fa860f2cf80c15cdd58.mp4", + }, +}; + +type WelcomePageContentType = { + title: string; + dividerLabel: string; + aboutList: string[]; + color: string; + src: string; +}; + +export { welcomePageContent }; +export type { WelcomePageContentType }; diff --git a/package-lock.json b/package-lock.json index 292a608..21faa8d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "@exile-watch/encounter-data": "^0.9.10", "@exile-watch/writ-icons": "^0.3.7", - "@exile-watch/writ-react": "^0.2.17", + "@exile-watch/writ-react": "^0.5.0", "@tabler/icons-react": "^2.47.0", "classnames": "^2.3.1", "cookie-parser": "^1.4.5", @@ -2815,9 +2815,9 @@ } }, "node_modules/@exile-watch/writ-react": { - "version": "0.2.17", - "resolved": "https://npm.pkg.github.com/download/@exile-watch/writ-react/0.2.17/6340c61fc094fa24b34b55b870933c95ffaf9cd1", - "integrity": "sha512-cJjnEw2TI6+gMFITaSRAwvsoQAlbupJ58uJEnQQpuYeTPXgBdEZABq0u7rse44SWoz3CqHEIyygVo+CPQn6/Ag==", + "version": "0.5.0", + "resolved": "https://npm.pkg.github.com/download/@exile-watch/writ-react/0.5.0/eeeada5071151e3c4d47b7863465ea5fb5098856", + "integrity": "sha512-XVlU5pbTI8FqRVrYdshcsDB96cKEj6EIcuvgNSaxJJ5xjVhxIOZNgkEHPhI2zqwWOcH8MmtRTkZaXXwTY7sBvg==", "dependencies": { "@mantine/core": "^7.5.2", "@mantine/hooks": "^7.5.2", diff --git a/package.json b/package.json index 79e23a9..73fc9b0 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "dependencies": { "@exile-watch/encounter-data": "^0.9.10", "@exile-watch/writ-icons": "^0.3.7", - "@exile-watch/writ-react": "^0.2.17", + "@exile-watch/writ-react": "^0.5.0", "@tabler/icons-react": "^2.47.0", "classnames": "^2.3.1", "cookie-parser": "^1.4.5", diff --git a/pages/welcome.tsx b/pages/welcome.tsx new file mode 100644 index 0000000..a81dc1d --- /dev/null +++ b/pages/welcome.tsx @@ -0,0 +1,10 @@ +import { Layout } from "#components"; +import WelcomeCard from "#features/welcome/WelcomeCard/WelcomeCard"; + +export default function Home() { + return ( + + + + ); +}