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.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
+
+
+
+
+
+
+ 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');
+ }
`}
/>
);