diff --git a/components/common/NavBar.tsx b/components/common/NavBar.tsx index 1f6d8cf..aab2666 100644 --- a/components/common/NavBar.tsx +++ b/components/common/NavBar.tsx @@ -39,12 +39,12 @@ function NavBar({ options }: NavProps) { const [navList, setNavList] = useState(options); return ( <m.div - className="font-Manrope pointer-events-none fixed hidden w-screen justify-between p-7 text-2xl sm:flex" + className="pointer-events-none fixed inline-grid w-screen grid-cols-2 p-2 pt-7 font-plusJakarta text-2xl sm:p-7 lg:grid-cols-3" initial="initial" animate="animate" variants={containerAnimation} > - <m.div variants={itemAnimation}> + <m.div className="mr-auto" variants={itemAnimation}> <Link key="InvestBot" href="/" @@ -70,16 +70,19 @@ function NavBar({ options }: NavProps) { alt="InvestBot Logo" width={64} height={64} - className="ml-4 mr-6 rounded-b-full" + className="mr-8 rounded-b-full" /> </m.div> - <p className="pointer-events-auto select-none pr-5 text-white"> - InvestBot - </p> + <div className="pointer-events-auto flex select-none flex-col items-start justify-center pr-5 font-plusJakarta text-white"> + <p>InvestBot</p> + <p className="text-xs text-gray-400"> + Serving anny's community est. 2022 + </p> + </div> </Link> </m.div> <m.div - className="flex flex-row items-center justify-center" + className="mr-auto ml-auto hidden flex-row items-center justify-center lg:flex" variants={itemAnimation} > {navList.map((nav, index) => ( @@ -87,11 +90,11 @@ function NavBar({ options }: NavProps) { ))} </m.div> <m.div - className="flex flex-row items-center justify-center" + className="ml-auto flex flex-row items-center justify-center" variants={itemAnimation} > <p className="pointer-events-auto select-none pr-5 text-white"> - Login blah blah + Login blah </p> <div className="h-10 w-10 rounded-full bg-white"></div> </m.div> diff --git a/layouts/HomeLayout.tsx b/layouts/HomeLayout.tsx index fe56766..9485d41 100644 --- a/layouts/HomeLayout.tsx +++ b/layouts/HomeLayout.tsx @@ -1,7 +1,8 @@ // Layout/container used for the main mostly empty landing page, can be used for related pages (credits, about, etc.) -import { AnimatePresence, domAnimation, LazyMotion } from "framer-motion"; +import { AnimatePresence, domAnimation, LazyMotion, m } from "framer-motion"; import Head from "next/head"; +import router from "next/router"; import NavBar from "../components/common/NavBar"; import { NavTemplate } from "./NavTemplates"; @@ -27,7 +28,15 @@ function HomeLayout(props: HomeLayoutProps) { </LazyMotion> <LazyMotion features={domAnimation}> <AnimatePresence exitBeforeEnter> - <div className="h-screen w-screen">{props.children}</div> + <m.div + key={router.route.concat("layout-fade")} + className="h-screen w-screen" + initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + exit={{ opacity: 0 }} + > + {props.children} + </m.div> </AnimatePresence> </LazyMotion> </> diff --git a/layouts/NavTemplates.tsx b/layouts/NavTemplates.tsx index 4b74c1c..b0ba0c3 100644 --- a/layouts/NavTemplates.tsx +++ b/layouts/NavTemplates.tsx @@ -39,6 +39,10 @@ interface NavTemplate { content: ReactComponentElement<any> | ReactElement; } -const homeMain: NavTemplate[] = []; +const homeMain: NavTemplate[] = [ + { content: <DefaultNavOption label="Home" href="/" /> }, + { content: <DefaultNavOption label="About" href="/about" /> }, + { content: <DefaultNavOption label="Contact" href="/contact" /> }, +]; export { type NavTemplate, homeMain }; diff --git a/pages/about.tsx b/pages/about.tsx new file mode 100644 index 0000000..e42f884 --- /dev/null +++ b/pages/about.tsx @@ -0,0 +1,18 @@ +import Head from "next/head"; +import { ReactElement } from "react"; +import HomeLayout from "../layouts/HomeLayout"; +import { homeMain } from "../layouts/NavTemplates"; + +function About() { + return ( + <div className="flex min-h-screen flex-col items-center justify-center py-2"> + <p>about</p> + </div> + ); +} + +About.getLayout = function getLayout(page: ReactElement) { + return <HomeLayout navOptions={homeMain}>{page}</HomeLayout>; +}; + +export default About; diff --git a/pages/contact.tsx b/pages/contact.tsx new file mode 100644 index 0000000..407bd17 --- /dev/null +++ b/pages/contact.tsx @@ -0,0 +1,18 @@ +import Head from "next/head"; +import { ReactElement } from "react"; +import HomeLayout from "../layouts/HomeLayout"; +import { homeMain } from "../layouts/NavTemplates"; + +function About() { + return ( + <div className="flex min-h-screen flex-col items-center justify-center py-2"> + <p>contact</p> + </div> + ); +} + +About.getLayout = function getLayout(page: ReactElement) { + return <HomeLayout navOptions={homeMain}>{page}</HomeLayout>; +}; + +export default About; diff --git a/pages/index.tsx b/pages/index.tsx index 2118f0e..5276a4b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -4,6 +4,7 @@ import HomeLayout from "../layouts/HomeLayout"; import { homeMain } from "../layouts/NavTemplates"; import type { NextPageWithLayout } from "./_app"; import Image from "next/image"; +import Slider from "@mui/material/Slider"; const Home: NextPageWithLayout = () => { let api7tvEmotes = `/api/7tv/emotes?c=61ad997effa9aba101bcfddf`; @@ -33,7 +34,7 @@ const Home: NextPageWithLayout = () => { emoteUrls = emoteUrls.filter((emote: any) => emote !== null); setEmotes(emoteUrls); - console.log(emoteUrls); + setCurrentEmote(Math.floor(Math.random() * emoteUrls.length)); }); console.log(currentEmote); @@ -72,14 +73,53 @@ const Home: NextPageWithLayout = () => { } return ( - <div className="flex h-full w-full flex-col items-center justify-center bg-zinc-900"> - <div className="flex text-white"> - <div className="flex flex-col"> - <m.h1 className="font-Manrope m-2 text-7xl">Buy high</m.h1> - <m.h1 className="font-Manrope m-2 text-7xl">Sell low</m.h1> - <m.h2 className="pt-2">...or something like that</m.h2> - </div> - <div className="flex items-center">{slideShow}</div> + <div className="flex h-full w-full flex-col items-center justify-center"> + <div className="inline-grid grid-cols-1 gap-10 text-white md:grid-cols-3"> + <m.div + className="flex flex-col font-plusJakarta font-semibold md:col-span-2" + initial={{ opacity: 0, y: -100 }} + animate={{ opacity: 1, y: 0 }} + transition={{ + delay: 0.5, + duration: 2.5, + type: "spring", + bounce: 0.5, + stiffness: 150, + }} + > + <m.div + className="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent" + initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + transition={{ delay: 0.5, staggerChildren: 0.2, duration: 1.0 }} + > + <m.h1 className="text-8xl">Buy high</m.h1> + <m.h1 className="text-8xl">Sell low</m.h1> + </m.div> + <m.h2 + className="pt-2 font-medium italic text-gray-200" + initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + transition={{ delay: 2.5, duration: 1.0 }} + > + ...or something like that + </m.h2> + </m.div> + <m.div + className="flex items-center justify-center" + initial={{ + opacity: 0, + }} + animate={{ + opacity: 1, + }} + transition={{ + delay: 1.5, + staggerChildren: 0.2, + }} + > + {slideShow} + </m.div> </div> </div> ); diff --git a/styles/globals.css b/styles/globals.css index b5c61c9..800f679 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,3 +1,51 @@ @tailwind base; @tailwind components; @tailwind utilities; +@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"); +@import url("https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:300,400,500,700&display=swap"); + +html, +body { + scroll-behavior: smooth; + overflow-x: hidden; +} + +body { + @apply invisible-scrollbar min-h-screen w-screen overflow-x-hidden overflow-y-scroll scroll-smooth bg-zinc-900 text-white; + position: relative; +} + +body::-webkit-scrollbar, +div::-webkit-scrollbar { + width: 16px; + height: 16px; +} + +.invisible-scrollbar::-webkit-scrollbar { + display: none; +} + +body::-webkit-scrollbar-track, +div::-webkit-scrollbar-track { + background-color: #202225; +} + +body::-webkit-scrollbar-thumb, +body::-webkit-scrollbar-track, +div::-webkit-scrollbar-thumb, +div::-webkit-scrollbar-track { + border: 4px solid transparent; + background-clip: padding-box; + border-radius: 8px; +} + +body::-webkit-scrollbar-thumb, +div::-webkit-scrollbar-thumb { + background-color: #2f3136; + min-height: 40px; +} + +body::-webkit-scrollbar-corner, +div::body::-webkit-scrollbar-corner { + background-color: transparent; +} diff --git a/tailwind.config.js b/tailwind.config.js index e189919..68e017a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,7 +6,12 @@ module.exports = { "./layouts/**/*.{js,ts,jsx,tsx}", ], theme: { - extend: {}, + extend: { + fontFamily: { + roboto: ["Roboto", "sans-serif"], + plusJakarta: ["Plus Jakarta Sans", "sans-serif"], + }, + }, }, plugins: [], };