Merge pull request #2 from Invest-Bot/dev

Merge Dev for Deployment

components/common/NavBar.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { useState, Fragment } from "react";
 import { NavTemplate } from "../../layouts/NavTemplates";
 import Image from "next/image";
-import { m, Variants } from "framer-motion";
+import { AnimatePresence, m, Variants } from "framer-motion";
 
 interface NavProps {
   options: NavTemplate[];
@@ -37,33 +37,38 @@ const itemAnimation: Variants = {
 
 function NavBar({ options }: NavProps) {
   const [navList, setNavList] = useState(options);
+  const [isActive, setActive] = useState(false);
   return (
     <m.div
-      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"
+      className="pointer-events-none fixed inline-grid w-screen grid-cols-2 bg-zinc-900 font-plusJakarta text-2xl lg:grid-cols-3"
       initial="initial"
       animate="animate"
       variants={containerAnimation}
     >
-      <m.div className="mr-auto" variants={itemAnimation}>
-        <Link
-          key="InvestBot"
-          href="/"
-          className="flex flex-row items-center justify-center"
+      <m.div
+        className="mr-auto flex flex-row items-center justify-center p-2 sm:p-7"
+        variants={itemAnimation}
+      >
+        <m.div
+          className="ml-4 mr-4 sm:m-0"
+          initial={{
+            scale: 1,
+            rotate: 0,
+          }}
+          animate={{
+            scale: 1,
+            rotate: 360,
+            transition: {
+              duration: 4,
+              type: "spring",
+              stiffness: 20,
+            },
+          }}
         >
-          <m.div
-            initial={{
-              scale: 1,
-              rotate: 0,
-            }}
-            animate={{
-              scale: 1,
-              rotate: 360,
-              transition: {
-                duration: 4,
-                type: "spring",
-                stiffness: 20,
-              },
-            }}
+          <Link
+            key="InvestBotImg"
+            href="/"
+            className="pointer-events-auto flex flex-row items-center justify-center"
           >
             <Image
               src="/img/logo.webp"
@@ -72,14 +77,44 @@ function NavBar({ options }: NavProps) {
               height={64}
               className="mr-8 rounded-b-full"
             />
-          </m.div>
-          <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>
+          </Link>
+        </m.div>
+        <div className="pointer-events-auto flex select-none flex-col items-start justify-center pr-5 font-plusJakarta text-white">
+          <Link
+            key="InvestBot"
+            href="/"
+            className="hidden flex-row items-center justify-center sm:flex"
+          >
+            InvestBot
+          </Link>
+          <h1 className="flex flex-row items-center justify-center sm:hidden">
+            InvestBot
+          </h1>
+          <p className="hidden text-xs text-gray-400 sm:block">
+            Serving anny&apos;s community est. 2022
+          </p>
+        </div>
+        <m.svg
+          className="pointer-events-auto cursor-pointer lg:hidden"
+          origin="center"
+          width="25"
+          height="26"
+          viewBox="0 0 330 330"
+          x={0}
+          y={0}
+          animate={{ rotate: isActive ? 180 : 0 }}
+          onClick={() => {
+            setActive(!isActive);
+          }}
+        >
+          <m.path
+            d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393  c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393  s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z"
+            fill="white"
+            stroke="white"
+            strokeWidth="15"
+            strokeLinecap="round"
+          />
+        </m.svg>
       </m.div>
       <m.div
         className="mr-auto ml-auto hidden flex-row items-center justify-center lg:flex"
@@ -90,14 +125,45 @@ function NavBar({ options }: NavProps) {
         ))}
       </m.div>
       <m.div
-        className="ml-auto flex flex-row items-center justify-center"
+        className="ml-auto flex flex-row items-center justify-center p-2 sm:p-7"
         variants={itemAnimation}
       >
         <p className="pointer-events-auto select-none pr-5 text-white">
-          Login blah
+          Login WIP
         </p>
         <div className="h-10 w-10 rounded-full bg-white"></div>
       </m.div>
+      <AnimatePresence mode="wait">
+        {isActive && (
+          <m.div
+            // hiddden by default, when active is true, animate in
+            className="pointer-events-auto z-10 flex w-screen flex-col items-center overflow-hidden bg-zinc-800 bg-opacity-70 pt-5 backdrop-blur lg:hidden"
+            // have it take up the entire screen, animate in by expanding from the bottom of the nav bar to the bottom of the screen
+            // TODO: struggled with getting children staggers/delays to work
+            initial={{ height: 0 }}
+            animate={{ height: "100vh" }}
+            exit={{ height: 0 }}
+            transition={{ duration: 0.5 }}
+          >
+            {navList.map((nav, index) => (
+              <m.div
+                key={index}
+                custom={index}
+                className="pointer-events-auto flex w-[90%] flex-row items-center justify-center border-t-[1px] border-b-[1px] border-zinc-700 p-4"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                whileHover={{ backgroundColor: "rgba(0, 0, 0, 0.4)" }}
+                transition={{ duration: 0.3 }}
+                onClick={() => {
+                  setActive(false);
+                }}
+              >
+                {nav.content}
+              </m.div>
+            ))}
+          </m.div>
+        )}
+      </AnimatePresence>
     </m.div>
   );
 }

layouts/HomeLayout.tsx

@@ -20,16 +20,27 @@ function HomeLayout(props: HomeLayoutProps) {
     <>
       <Head>
         <title>InvestBot</title>
-        <meta name="description" content="Temporary home :)" />
+        <meta name="description" content="Serving anny's community est. 2022" />
         <link rel="icon" href="/favicon.ico" />
+        <meta name="theme-color" content="#c084fc" />
+        <meta property="og:title" content="InvestBot" />
+        <meta
+          property="og:description"
+          content="Serving anny's community est. 2022"
+        />
+        <meta property="og:image" content="/img/logo.webp" />
+        <meta property="og:type" content="website" />
+        <meta property="og:site_name" content="InvestBot" />
       </Head>
+
       <LazyMotion features={domAnimation}>
-        <AnimatePresence exitBeforeEnter>
+        <AnimatePresence mode="wait">
           <NavBar options={navOptions} />
         </AnimatePresence>
       </LazyMotion>
+
       <LazyMotion features={domAnimation}>
-        <AnimatePresence exitBeforeEnter>
+        <AnimatePresence mode="wait">
           <m.div
             key={router.route.concat("layout-fade")}
             className="h-screen w-screen"

layouts/NavTemplates.tsx

@@ -10,28 +10,29 @@ const DefaultNavOption = ({
   href: string;
 }): ReactElement => {
   return (
-    <m.div
-      initial={{
-        scale: 1,
-      }}
-      whileHover={{
-        transition: {
-          duration: 0.2,
-        },
-      }}
-      whileTap={{
-        scale: 0.95,
-        transition: {
-          duration: 0.2,
-        },
-      }}
-    >
-      <Link href={href} key={label}>
-        <p className="pointer-events-auto relative select-none pl-3 pr-3 text-white md:pl-5 md:pr-5">
+    <Link href={href} key={label} className="w-full text-center">
+      <m.div
+        initial={{
+          scale: 1,
+        }}
+        whileHover={{
+          scale: 1.05,
+          transition: {
+            duration: 0.2,
+          },
+        }}
+        whileTap={{
+          scale: 0.95,
+          transition: {
+            duration: 0.2,
+          },
+        }}
+      >
+        <p className="pointer-events-auto relative select-none pl-3 pr-3 font-plusJakarta text-white md:pl-5 md:pr-5">
           {label}
         </p>
-      </Link>
-    </m.div>
+      </m.div>
+    </Link>
   );
 };
 
@@ -41,8 +42,9 @@ interface NavTemplate {
 
 const homeMain: NavTemplate[] = [
   { content: <DefaultNavOption label="Home" href="/" /> },
-  { content: <DefaultNavOption label="About" href="/about" /> },
-  { content: <DefaultNavOption label="Contact" href="/contact" /> },
+  // { content: <DefaultNavOption label="About" href="/about" /> },
+  { content: <DefaultNavOption label="Team" href="/team" /> },
+  // { content: <DefaultNavOption label="Contact" href="/contact" /> },
 ];
 
 export { type NavTemplate, homeMain };

package.json

@@ -17,6 +17,7 @@
     "next": "13.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "sharp": "^0.31.2",
     "typescript": "4.9.3"
   },
   "devDependencies": {

pages/about.tsx

@@ -5,9 +5,14 @@ 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>
+    <>
+      <Head>
+        <title>About - InvestBot</title>
+      </Head>
+      <div className="flex min-h-screen flex-col items-center justify-center py-2">
+        <p>about</p>
+      </div>
+    </>
   );
 }
 

pages/contact.tsx

@@ -5,9 +5,14 @@ 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>
+    <>
+      <Head>
+        <title>Contact - InvestBot</title>
+      </Head>
+      <div className="flex min-h-screen flex-col items-center justify-center py-2">
+        <p>contact</p>
+      </div>
+    </>
   );
 }
 

pages/index.tsx

@@ -4,11 +4,13 @@ import HomeLayout from "../layouts/HomeLayout";
 import { homeMain } from "../layouts/NavTemplates";
 import type { NextPageWithLayout } from "./_app";
 import Image from "next/image";
+import Head from "next/head";
 
 const Home: NextPageWithLayout = () => {
   let api7tvEmotes = `/api/7tv/emotes?c=61ad997effa9aba101bcfddf`;
   const [emotesUrls, setEmotes] = useState([]);
   const [currentEmote, setCurrentEmote] = useState(0);
+
   useEffect(() => {
     fetch(api7tvEmotes)
       .then((res) => res.json())
@@ -40,6 +42,7 @@ const Home: NextPageWithLayout = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // change emote every 5 seconds, separated from the fetch call so it only initializes once when the emotes are loaded
   useEffect(() => {
     const interval = setInterval(() => {
       // choose a random emote
@@ -59,7 +62,8 @@ const Home: NextPageWithLayout = () => {
       className="ml-4 mr-6"
     />
   );
-  if (emotesUrls) {
+  // if the emotes are loaded, show the slideshow
+  if (emotesUrls.length > 0) {
     slideShow = (
       <Image
         src={emotesUrls[currentEmote]}
@@ -72,55 +76,60 @@ const Home: NextPageWithLayout = () => {
   }
 
   return (
-    <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,
-          }}
-        >
+    <>
+      <Head>
+        <title>Home - InvestBot</title>
+      </Head>
+      <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="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 }}
+            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.h1 className="text-8xl">Buy high</m.h1>
-            <m.h1 className="text-8xl">Sell low</m.h1>
+            <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.h2
-            className="pt-2 font-medium italic text-gray-200"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ delay: 2.5, duration: 1.0 }}
+          <m.div
+            className="flex items-center justify-center"
+            initial={{
+              opacity: 0,
+            }}
+            animate={{
+              opacity: 1,
+            }}
+            transition={{
+              delay: 1.5,
+              staggerChildren: 0.2,
+            }}
           >
-            ...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>
+            {slideShow}
+          </m.div>
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

pages/team.tsx

@@ -0,0 +1,137 @@
+import { m, Variants } from "framer-motion";
+import Head from "next/head";
+import Image from "next/image";
+import { ReactElement } from "react";
+import HomeLayout from "../layouts/HomeLayout";
+import { homeMain } from "../layouts/NavTemplates";
+
+function Team() {
+  return (
+    <>
+      <Head>
+        <title>Team - InvestBot</title>
+      </Head>
+      <div className="flex min-h-screen flex-col items-center justify-center py-2">
+        <m.div
+          className="grid w-[90vw] grid-cols-1 py-2 sm:grid-cols-2 md:grid-cols-4 lg:w-[75vw]"
+          initial="initial"
+          animate="animate"
+          variants={containerVariants}
+          transition={{
+            delay: 0.5,
+            duration: 1.0,
+            staggerChildren: 0.25,
+            type: "spring",
+            bounce: 0.5,
+            stiffness: 80,
+          }}
+        >
+          <m.div
+            className="col-span-1 flex w-full items-center justify-center bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text pt-[200px] pb-[100px] font-plusJakarta text-transparent sm:col-span-2 md:col-span-4"
+            initial={{ opacity: 0, y: 100 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{
+              delay: 0.5,
+              duration: 1.0,
+              type: "spring",
+              bounce: 0.5,
+              stiffness: 80,
+            }}
+          >
+            <m.h1 className="text-6xl">people</m.h1>
+          </m.div>
+          {/* Person 1 */}
+          <PersonLeftCard name="ModulatingForce" img="/img/team/force.webp" />
+          <PersonRightCard>TBW</PersonRightCard>
+
+          {/* Person 2 */}
+          <PersonLeftCard name="Second Sock" img="/img/team/sock.webp" />
+          <PersonRightCard>TBW</PersonRightCard>
+          {/* Person 3 */}
+          <PersonLeftCard name="Ente" img="/img/team/ente.webp" />
+          <PersonRightCard>TBW</PersonRightCard>
+          {/* Person 4 */}
+          <PersonLeftCard name="notohh" img="/img/team/oh.webp" />
+          <PersonRightCard>TBW</PersonRightCard>
+          {/* Person 5 */}
+          <PersonLeftCard name="3zachm" img="/img/team/zach.webp" />
+          <PersonRightCard>TBW</PersonRightCard>
+        </m.div>
+      </div>
+    </>
+  );
+}
+
+const PersonLeftCard = (props: { name: string; img: string }) => {
+  return (
+    <m.div
+      className="mb-5 flex flex-col items-center justify-center"
+      variants={leftCardVariants}
+    >
+      <Image
+        className="rounded-full p-3"
+        src={props.img}
+        width={200}
+        height={200}
+        alt={"Picture of " + props.name}
+      />
+      <m.h1 className="font-plusJakarta text-2xl font-semibold">
+        {props.name}
+      </m.h1>
+    </m.div>
+  );
+};
+
+// takes in children
+const PersonRightCard = (props: { children: React.ReactNode }) => {
+  return (
+    <m.div
+      variants={rightCardVariants}
+      className="mb-5 flex flex-col items-center justify-center"
+    >
+      {props.children}
+    </m.div>
+  );
+};
+
+const containerVariants: Variants = {
+  initial: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: 1,
+    transition: {
+      duration: 2,
+      delayChildren: 0.5,
+      staggerChildren: 0.25,
+    },
+  },
+};
+
+const leftCardVariants: Variants = {
+  initial: {
+    opacity: 0,
+    x: 100,
+  },
+  animate: {
+    opacity: 1,
+    x: 0,
+  },
+};
+
+const rightCardVariants: Variants = {
+  initial: {
+    opacity: 0,
+    x: -100,
+  },
+  animate: {
+    opacity: 1,
+    x: 0,
+  },
+};
+
+Team.getLayout = function getLayout(page: ReactElement) {
+  return <HomeLayout navOptions={homeMain}>{page}</HomeLayout>;
+};
+
+export default Team;