landing base finish

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&apos;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>

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>
     </>

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 };

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;

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;

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>
   );

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;
+}

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: [],
 };