From 64bb619344e1d5963a4a2d1d4ed25640ae676e85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Krzy=C5=BCanowski?= Date: Mon, 4 Mar 2024 17:08:52 +0100 Subject: [PATCH 1/2] feat: add welcome page and update sidebar footer --- components/Layout/Header/Header.tsx | 3 - components/Layout/Layout.tsx | 39 ++++---- components/Layout/styles.module.scss | 4 - .../Sidebar/SidebarEncountersDesktop.tsx | 49 +++++++--- .../CardWrapper/CardWrapper.module.scss | 20 ++++ .../WelcomeCard/CardWrapper/CardWrapper.tsx | 44 +++++++++ features/welcome/WelcomeCard/WelcomeCard.tsx | 93 +++++++++++++++++++ features/welcome/WelcomeCard/about-list.ts | 42 +++++++++ package-lock.json | 8 +- package.json | 2 +- pages/welcome.tsx | 10 ++ 11 files changed, 266 insertions(+), 48 deletions(-) create mode 100644 features/welcome/WelcomeCard/CardWrapper/CardWrapper.module.scss create mode 100644 features/welcome/WelcomeCard/CardWrapper/CardWrapper.tsx create mode 100644 features/welcome/WelcomeCard/WelcomeCard.tsx create mode 100644 features/welcome/WelcomeCard/about-list.ts create mode 100644 pages/welcome.tsx 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/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..e66b63f --- /dev/null +++ b/features/welcome/WelcomeCard/CardWrapper/CardWrapper.tsx @@ -0,0 +1,44 @@ +import { Card, Divider, Stack, Text, Title } from "@exile-watch/writ-react"; +import cx from "classnames"; +import { WelcomePageContentType } from "#features/welcome/WelcomeCard/about-list"; +import styles from "./CardWrapper.module.scss"; + +const CardWrapper = ({ + aboutList, + title, + dividerLabel, + color, +}: WelcomePageContentType) => { + return ( + + + + ... {title} ... + + + + + {aboutList.map((item, i, self) => ( + + ...{item} + {i !== self.length - 1 ? "..." : "?"} + + ))} + + + + + ); +}; + +export default CardWrapper; diff --git a/features/welcome/WelcomeCard/WelcomeCard.tsx b/features/welcome/WelcomeCard/WelcomeCard.tsx new file mode 100644 index 0000000..1713831 --- /dev/null +++ b/features/welcome/WelcomeCard/WelcomeCard.tsx @@ -0,0 +1,93 @@ +import { + Button, + Center, + Code, + Container, + Divider, + Group, + SimpleGrid, + Stack, + Text, + Title, +} from "@exile-watch/writ-react"; + +import { IconArrowRight } from "@tabler/icons-react"; +import Link from "next/link"; +import CardWrapper from "#features/welcome/WelcomeCard/CardWrapper/CardWrapper"; +import { welcomePageContent } from "#features/welcome/WelcomeCard/about-list"; + +const WelcomeCard = () => { + return ( + + +
+ exile.watch logo +
+
+ Are you... +
+
+ + + + + +
+ + + 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 WelcomeCard; diff --git a/features/welcome/WelcomeCard/about-list.ts b/features/welcome/WelcomeCard/about-list.ts new file mode 100644 index 0000000..9ab581e --- /dev/null +++ b/features/welcome/WelcomeCard/about-list.ts @@ -0,0 +1,42 @@ +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", + }, + 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", + }, + 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", + }, +}; + +type WelcomePageContentType = { + title: string; + dividerLabel: string; + aboutList: string[]; + color: 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 ( + + + + ); +} From 19dbc8de5f4bec1cb153f764fd00f3cc16669ffb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Krzy=C5=BCanowski?= Date: Mon, 4 Mar 2024 18:31:20 +0100 Subject: [PATCH 2/2] feat: add videos to welcome page --- .../Boss/BossAbility/Video/Video.module.scss | 37 +++++++++++- .../Boss/BossAbility/Video/Video.tsx | 9 ++- .../WelcomeCard/CardWrapper/CardWrapper.tsx | 3 + features/welcome/WelcomeCard/WelcomeCard.tsx | 56 ++----------------- .../WelcomePageButtons/WelcomePageButton.tsx | 27 +++++++++ .../WelcomePageButtons.module.scss | 11 ++++ .../WelcomePageButtons/WelcomePageButtons.tsx | 26 +++++++++ .../WelcomePageSummary/WelcomePageSummary.tsx | 24 ++++++++ features/welcome/WelcomeCard/about-list.ts | 4 ++ 9 files changed, 141 insertions(+), 56 deletions(-) create mode 100644 features/welcome/WelcomeCard/WelcomePageButtons/WelcomePageButton.tsx create mode 100644 features/welcome/WelcomeCard/WelcomePageButtons/WelcomePageButtons.module.scss create mode 100644 features/welcome/WelcomeCard/WelcomePageButtons/WelcomePageButtons.tsx create mode 100644 features/welcome/WelcomeCard/WelcomePageSummary/WelcomePageSummary.tsx 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/welcome/WelcomeCard/CardWrapper/CardWrapper.tsx b/features/welcome/WelcomeCard/CardWrapper/CardWrapper.tsx index e66b63f..09a7dfe 100644 --- a/features/welcome/WelcomeCard/CardWrapper/CardWrapper.tsx +++ b/features/welcome/WelcomeCard/CardWrapper/CardWrapper.tsx @@ -1,5 +1,6 @@ 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"; @@ -8,6 +9,7 @@ const CardWrapper = ({ title, dividerLabel, color, + src, }: WelcomePageContentType) => { return ( @@ -16,6 +18,7 @@ const CardWrapper = ({ shadow="md" c={`${color}.2`} > + ); 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 index 9ab581e..5d7cbeb 100644 --- a/features/welcome/WelcomeCard/about-list.ts +++ b/features/welcome/WelcomeCard/about-list.ts @@ -8,6 +8,7 @@ const welcomePageContent = { "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", @@ -18,6 +19,7 @@ const welcomePageContent = { "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", @@ -28,6 +30,7 @@ const welcomePageContent = { "or maybe enjoys reading engineering blogs", ], color: "teal", + src: "https://i.gyazo.com/7f7cb1ef83923fa860f2cf80c15cdd58.mp4", }, }; @@ -36,6 +39,7 @@ type WelcomePageContentType = { dividerLabel: string; aboutList: string[]; color: string; + src: string; }; export { welcomePageContent };