diff --git a/web/public/fonts/PPNeueBit-Bold.otf b/web/public/fonts/PPNeueBit-Bold.otf new file mode 100644 index 000000000..3be113967 Binary files /dev/null and b/web/public/fonts/PPNeueBit-Bold.otf differ diff --git a/web/public/images/landing/main.png b/web/public/images/landing/main.png new file mode 100644 index 000000000..6216d82f8 Binary files /dev/null and b/web/public/images/landing/main.png differ diff --git a/web/public/images/landing/step1-icon.png b/web/public/images/landing/step1-icon.png new file mode 100644 index 000000000..f9d924954 Binary files /dev/null and b/web/public/images/landing/step1-icon.png differ diff --git a/web/public/images/landing/step1.png b/web/public/images/landing/step1.png new file mode 100644 index 000000000..03dfb8623 Binary files /dev/null and b/web/public/images/landing/step1.png differ diff --git a/web/public/images/landing/step2-icon.png b/web/public/images/landing/step2-icon.png new file mode 100644 index 000000000..ff4e584a3 Binary files /dev/null and b/web/public/images/landing/step2-icon.png differ diff --git a/web/public/images/landing/step2.png b/web/public/images/landing/step2.png new file mode 100644 index 000000000..474c56442 Binary files /dev/null and b/web/public/images/landing/step2.png differ diff --git a/web/public/images/landing/step3-icon.png b/web/public/images/landing/step3-icon.png new file mode 100644 index 000000000..e75a3528d Binary files /dev/null and b/web/public/images/landing/step3-icon.png differ diff --git a/web/public/images/landing/step3.png b/web/public/images/landing/step3.png new file mode 100644 index 000000000..746d51ec0 Binary files /dev/null and b/web/public/images/landing/step3.png differ diff --git a/web/public/images/landing/step4-icon.png b/web/public/images/landing/step4-icon.png new file mode 100644 index 000000000..97ff0e02a Binary files /dev/null and b/web/public/images/landing/step4-icon.png differ diff --git a/web/public/images/landing/step4.png b/web/public/images/landing/step4.png new file mode 100644 index 000000000..bfd14394e Binary files /dev/null and b/web/public/images/landing/step4.png differ diff --git a/web/src/components/Layout.tsx b/web/src/components/Layout.tsx index 58ece2c5c..c336d2802 100644 --- a/web/src/components/Layout.tsx +++ b/web/src/components/Layout.tsx @@ -8,13 +8,14 @@ import { Container, Box, } from "@chakra-ui/react"; -import { ReactNode } from "react"; +import React, { ReactNode } from "react"; import Header from "./Header"; import { motion } from "framer-motion"; import CrtEffect from "./CrtEffect"; export interface LayoutProps { + CustomLeftPanel?: React.FC; leftPanelProps?: LeftPanelProps; showBack?: boolean; actions?: ReactNode; @@ -31,6 +32,7 @@ export interface LeftPanelProps { } const Layout = ({ + CustomLeftPanel, leftPanelProps, showBack, showMap, @@ -48,9 +50,14 @@ const Layout = ({ animate={{ opacity: 1 }} >
- - {!isSinglePanel && } - {children} + + <> + {!isSinglePanel && + (!CustomLeftPanel ? : )} + + {children} + + diff --git a/web/src/components/icons/ScrollDown.tsx b/web/src/components/icons/ScrollDown.tsx new file mode 100644 index 000000000..748a17ae5 --- /dev/null +++ b/web/src/components/icons/ScrollDown.tsx @@ -0,0 +1,19 @@ +import { + Icon as ChakraIcon, + IconProps as ChakraIconProps, +} from "@chakra-ui/react"; +import { IconProps } from "."; + +export const ScrollDown = ({ ...props }: IconProps) => { + return ( + + + + + + ); +}; diff --git a/web/src/components/icons/archive/index.tsx b/web/src/components/icons/archive/index.tsx index 709b07770..897a371bb 100644 --- a/web/src/components/icons/archive/index.tsx +++ b/web/src/components/icons/archive/index.tsx @@ -35,7 +35,7 @@ export * from "./Connect"; export * from "./Sparkle"; // has mirrored variant export * from "./Calendar"; export * from "./Cigarette"; -export * from "./Cartridge"; +export * from "../branding/Cartridge"; export * from "./Disconnect"; // Template for adding new icons. When copying svg from figma, make sure to diff --git a/web/src/components/icons/archive/Cartridge.tsx b/web/src/components/icons/branding/Cartridge.tsx similarity index 92% rename from web/src/components/icons/archive/Cartridge.tsx rename to web/src/components/icons/branding/Cartridge.tsx index 0b239f648..4c1aeb2ee 100644 --- a/web/src/components/icons/archive/Cartridge.tsx +++ b/web/src/components/icons/branding/Cartridge.tsx @@ -1,12 +1,12 @@ -import { Icon, IconProps } from "."; +import { Icon, IconProps } from "../archive"; export const Cartridge = (props: IconProps) => { return ( - <> + - + ); }; diff --git a/web/src/components/icons/branding/Dojo.tsx b/web/src/components/icons/branding/Dojo.tsx new file mode 100644 index 000000000..29337ade1 --- /dev/null +++ b/web/src/components/icons/branding/Dojo.tsx @@ -0,0 +1,12 @@ +import { Icon, IconProps } from "../archive"; + +export const Dojo = (props: IconProps) => { + return ( + + + + + + + ); +}; diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx index 5d99df047..115e27b2d 100644 --- a/web/src/pages/index.tsx +++ b/web/src/pages/index.tsx @@ -5,6 +5,11 @@ import { Divider, Card, CardBody, + Heading, + Image, + Box, + Link as ChakraLink, + keyframes, } from "@chakra-ui/react"; import Layout from "@/components/Layout"; import Button from "@/components/Button"; @@ -14,7 +19,6 @@ import { User } from "@/components/icons/archive"; import { playSound, Sounds } from "@/hooks/sound"; import BorderImagePixelated from "@/components/icons/BorderImagePixelated"; import BorderImage from "@/components/icons/BorderImage"; -import Link from "next/link"; import Leaderboard from "@/components/Leaderboard"; import { useSystems } from "@/dojo/systems/useSystems"; import { useGlobalScores } from "@/dojo/components/useGlobalScores"; @@ -25,12 +29,24 @@ import { useDojo } from "@/dojo"; import { JoinedEventData } from "@/dojo/events"; import { getLocationById } from "@/dojo/helpers"; import { usePlayerStore } from "@/hooks/state"; +import { Cartridge } from "@/components/icons/branding/Cartridge"; +import { Dojo } from "@/components/icons/branding/Dojo"; +import { ScrollDown } from "@/components/icons/ScrollDown"; +import { cardPixelatedStyle, cardPixelatedStyleOutset } from "@/theme/styles"; +import Link from "next/link"; // hardcode game params for now const START_TIME = 0; const MAX_PLAYERS = 1; const NUM_TURNS = 9; +const floatAnim = keyframes` + 0% {transform: translateY(0%);} + 25% {transform: translateY(-6px);} + 50% {transform: translateY(0%);} + 70% {transform: translateY(8px);} +`; + export default function Home() { const router = useRouter(); const { account, isBurnerDeploying, createBurner } = useDojo(); @@ -40,17 +56,11 @@ export default function Home() { const { toast } = useToast(); return ( - + - + {/* Under Construction @@ -59,7 +69,8 @@ export default function Home() { Get ready hustlers... Season II starts in September - {/* */} + - {/* HALL OF FAME + HALL OF FAME - */} + ); @@ -152,3 +163,210 @@ const Game = ({ ); + +const steps = [ + { + step: 1, + title: "Buy Low", + desc: "A short description of this step, maybe one to two sentences. Here is one.", + }, + { + step: 2, + title: "Sell High", + desc: "A short description of this step, maybe one to two sentences. Here is one.", + }, + { + step: 3, + title: "Get rekt", + desc: "A short description of this step, maybe one to two sentences. Here is one.", + }, + { + step: 4, + title: "Profit", + desc: "A short description of this step, maybe one to two sentences. Here is one.", + }, +]; + +const HomeStep = ({ + step, +}: { + step: { step: number; title: string; desc: string }; +}) => { + return ( + <> + + {`step${step.step}`} + + + + {`step${step.step}`} + + + Step {step.step} + + + {step.title} + + + + {step.desc} + + + + ); +}; + +const onScrollDown = () => { + let steps = document.getElementById("steps"); + + setTimeout(() => { + steps && + steps.scrollIntoView({ + behavior: "smooth", + block: "start", + inline: "nearest", + }); + }, 10); +}; + +const HomeLeftPanel = () => { + return ( + <> + + + + DOPE WARS + + + Roll your Own + + + + + context + + onScrollDown()} + animation={`${floatAnim} infinite 3s linear`} + cursor={"pointer"} + > + + + + + {steps.map((step) => { + return ; + })} + + + + + + BUILT BY + + + + | + + + BUILT WITH + + + + + + + + + + + ); +}; diff --git a/web/src/theme/colors.ts b/web/src/theme/colors.ts index b7e93ccd6..592177a06 100644 --- a/web/src/theme/colors.ts +++ b/web/src/theme/colors.ts @@ -21,6 +21,8 @@ const colors: ColorsType = { whiteAlpha: { 100: "rgba(255, 255, 255, 0.03)", }, + dojoRed: "#ff2f42", + cartridgeYellow: "#FFC52A", }; export default colors; diff --git a/web/src/theme/fonts.tsx b/web/src/theme/fonts.tsx index 43ee3ba04..1750620b9 100644 --- a/web/src/theme/fonts.tsx +++ b/web/src/theme/fonts.tsx @@ -42,6 +42,13 @@ const Fonts = () => ( font-style: normal; src: url('/fonts/ChicagoFLF.ttf'); } + + @font-face { + font-family: 'ppneuebit'; + font-weight: 700; + font-style: normal; + src: url('/fonts/PPNeueBit-Bold.otf') format('opentype'); + } `} /> );