Updated menu and started box component from scratch

.gitignore

@@ -0,0 +1,3 @@
+*/.DS_STORE
+/frontend/node_modules
+/frontend/.next

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}

frontend/components/Navbar.js

@@ -0,0 +1,12 @@
+function Navbar() {
+    return (
+        <div className="flex items-center justify-between w-full h-24 bg-indigo-900">
+            <div className="pl-4 text-white text-2xl font-bold">Camp.Dev</div>
+            <div className="pr-4">
+                <img src="hamburger.svg"></img>
+            </div>
+        </div>
+    );
+}
+
+export default Navbar;

frontend/components/header.js

@@ -7,7 +7,7 @@ export default function Header() {
   const [mobileMenuIsOpen, setMobileMenuIsOpen] = useState(false);
 
   return (
-    <header className="bg-green-600">
+    <header className="bg-white">
       <div className="flex flex-wrap items-center justify-between lg:container px-4 py-6 mx-auto md:flex-no-wrap md:px-6">
         <div className="flex items-center">
           <Image
@@ -19,14 +19,14 @@ export default function Header() {
           />
 
           <Link href="/">
-            <a className="text-lg md:text-xl font-bold ml-3 text-white">
-              Daniel and Shreya do it
+            <a className="text-lg md:text-xl font-bold ml-3 text-black">
+              Daniel, Shreya and Pachi do it
             </a>
           </Link>
         </div>
 
         <button
-          className="flex items-center block px-3 py-2 text-white border border-white rounded md:hidden"
+          className="flex items-center block px-3 py-2 text-black border border-black rounded md:hidden"
           onClick={() => setMobileMenuIsOpen(!mobileMenuIsOpen)}
         >
           <svg
@@ -48,10 +48,11 @@ export default function Header() {
           {[
             { title: "Home", route: "/" },
             { title: "About", route: "/about" },
+            {title: "Pachi", route: "/pachi"}
           ].map(({ route, title }) => (
             <li className="mt-3 md:mt-0 md:ml-6" key={title}>
               <Link href={route}>
-                <a className="block text-white">{title}</a>
+                <a className="block text-black">{title}</a>
               </Link>
             </li>
           ))}

frontend/components/hero.js

@@ -0,0 +1,12 @@
+//import Button from "@components/utils/Button"
+
+function Hero() {
+    return (
+        <div className="flex">
+            <div className="text-2xl">Learn how to write code with collaboratively with Github and VSCode</div>
+            <div>Button</div>
+        </div>
+    );
+}
+
+export default Hero;

frontend/components/layout.js

@@ -1,17 +1,17 @@
 import Header from "./header";
 import Footer from "./footer";
-import Menu from "@components/menu"
+import Menu from "@components/menu";
 
 export default function Layout(props) {
   return (
     <div className="flex flex-col min-h-screen">
       <Header />
-      <div class="grid grid-col-2"><Menu /></div>
-
-      <main className="flex-1 lg:container px-4 py-6 mx-auto md:px-6 md:py-12">
-        {props.children}
-      </main>
-
+      <div class="flex flex-wrap justify-between lg:container px-4 py-6 mx-auto md:flex-no-wrap md:px-6">
+        <Menu />
+        <main className="flex-1 lg:container px-4 mx-auto md:px-6">
+          {props.children}
+        </main>
+      </div>
       <Footer />
     </div>
   );

frontend/components/menu.js

@@ -1,10 +1,10 @@
-import Section from '@components/utils/sidebarsection'
+// import Section from '@components/utils/sidebarsection'
 
 export default function Menu() {
     return (
-        <div class="hidden md:block m-10 mb-100 pb-10">
-            <Section />
-            <Section />
+        <div class="hidden md:block mb-100 pb-10">
+            {/* <Section />
+            <Section /> */}
         </div>
     );
 }

frontend/components/utils/about.js

@@ -2,7 +2,7 @@ import Button from '@components/utils/about'
 
 export default function About() {
     return (
-        <div class="flex flex-col md:flex-row-reverse max-w-2xl m-10">
+        <div class="flex flex-col md:flex-row-reverse max-w-2xl">
             <div>
                 <img src="/camp.png" />
             </div>

frontend/components/utils/box.js

@@ -1,18 +1,20 @@
 import Button from '@components/utils/button'
 export default function Box() {
     return (
-
-        <div class="flex-auto z-0 relative box-border h-60 w-96 bg-gradient-to-r from-purple-500 to-purple-700 rounded-lg bg-center overflow-y-hidden m-2 w-full">
-            <div class="z-20 absolute py-8 px-12 space-y-5 py-4 md:object-scale-down">
-                <h2 class="text-2xl font-bold text-white">
-                    Learn how to write code with collaboratively with Github and VSCode
-                </h2>
-
-                <Button /> 
-            </div>
-
-            <div class="absolute z-10 w-1/2 mx-40 my-28">
-                <img class="opacity-30" src="/coding.png"></img>
+        /* might wanna add <section class="flex"> */
+        <div class="w-full relative overflow-hidden p-10 rounded-lg bg-gradient-to-r from-pink-700 to-purple-800 to-indigo-800 text-white">
+            <div class="w-full flex md:flex-col">
+                    <div class="z-10">
+                        <h2 class="text-2xl font-bold pb-10">
+                            Learn how to write code with collaboratively with Github and VSCode
+                        </h2>
+                        <Button />
+                    </div>
+                    <div class="relative w-30 z-0">
+                        <div class="absolute hidden lg:block lg:-top-20 opacity-30">
+                            <img src="coding.png" class="rounded-lg"></img>
+                        </div>
+                    </div>
             </div>
         </div>
     );

frontend/components/utils/course.js

@@ -0,0 +1,14 @@
+export default function Course(){
+    return (
+        <div class="border border-gray-500 grid-flow-col grid cols-2">
+            <div>
+                <img src="/github.png" />
+            </div>
+            <div>
+                <p>FRONTEND</p>
+                <h3>Learn how to write code with collaboratively with Github and VSCode</h3>
+            </div>
+
+        </div>
+    );
+}

frontend/components/utils/coursewindow.js

@@ -0,0 +1,9 @@
+import Course from '@components/utils/course'
+
+export default function CourseWindow() {
+    return (
+        <div>
+            <Course />
+        </div>
+    );
+}

frontend/components/utils/event.js

@@ -0,0 +1,9 @@
+export default function Event() {
+    return (
+     <div>
+         <h1 class="text-sm font-bold text-gray-300 py-0.5">FRIDAY</h1>
+         <h2 class="text-sm font-bold py-0.5"><a href="https://www.twitch.tv/bitprojectorg">Serverless Functions w/ Emily and Chloe</a></h2>
+         <p class="text-sm pt-0.5 pb-9">Feb 4th @ 4PM EST</p>
+     </div>
+    );
+  } 

frontend/components/utils/schedule.js

@@ -0,0 +1,21 @@
+import Event from '@components/utils/event'
+
+export default function Schedule() {
+    return (
+        <div class="flex">
+            <div class="flex-auto">
+                <div class="grid grid-flow-col auto-cols-min grid-cols-11">
+                    {/*image size needs to be*/}
+                     <img class="pt-4 w-93" src="livestream_icon.png"></img>
+                     <h1 class="col-span-2 text-2xl font-bold py-2">Livestreams</h1>
+                </div>
+           <p class="text-gray-400 py-5">Practice step-by-step guides to help you achieve a specific goal.</p>
+           <div>
+           <Event />
+           <Event />
+           <Event />
+           </div>
+           </div>
+        </div>
+    );
+}

frontend/components/utils/sidebarsection.js

@@ -1,15 +1,13 @@
+import { data } from "autoprefixer";
 
-
-export default function SideBarSection() {
+export default function SideBarSection({ data }) {
     return (
-        <div class="m-10 mb-100 pb-10">
-            <h5 class="mb-3 font-bold">GETTING STARTED</h5>
+        <div class="mb-100 pb-10 pr-10">
+            <h5 class="mb-3 font-bold text-gray-600">GETTING STARTED</h5>
             <ul>
-                <li class="mb-3"><h5>Getting Started</h5></li>
-                <li class="mb-3"><h5>Getting Started</h5></li>
-                <li class="mb-3"><h5>Getting Started</h5></li>
-                <li class="mb-3"><h5>Getting Started</h5></li>
-                <li class="mb-3"><h5>Getting Started</h5></li>
+                {data.menuoption.map((menuoptions) => (
+                    <li class="mb-3"><h5>{menuoptions}</h5></li>
+                ))}
             </ul>
         </div>
     );

frontend/components/window.js

@@ -0,0 +1,11 @@
+import Schedule from '@components/utils/schedule'
+import CourseWindow from '@components/utils/coursewindow'
+
+export default function Window() {
+    return (
+       <div class="sm:grid grid-flow-col">
+           <CourseWindow />
+           <Schedule />
+       </div>
+    );
+}

frontend/css/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/jsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+      "baseUrl": ".",
+      "paths": {
+        "@components/*": ["components/*"]
+      }
+    }
+  }
+

frontend/pages/_app.js

@@ -1,10 +1,10 @@
-import "../css/index.css";
 import Head from "next/head";
 import Layout from "@components/layout";
+import "../css/index.css";
 
 function MyApp({ Component, pageProps }) {
   return (
-    <Layout>
+    <>
       <Head>
         <title>Next.js Starter Tailwind</title>
         <meta
@@ -14,7 +14,7 @@ function MyApp({ Component, pageProps }) {
       </Head>
 
       <Component {...pageProps} />
-    </Layout>
+    </>
   );
 }
 

frontend/pages/api/menu.js

@@ -0,0 +1,6 @@
+export default function handler(req, res) {
+    res.status(200).json(
+        { menuoption: 
+            ['Intro to JavaScript', 'Intro to Serverless', 'Building Slackbots', 'Intro to GameDev']
+    })
+  }

frontend/pages/index.js

@@ -1,22 +1,25 @@
-import Image from "next/image";
-import Button from "@components/utils/button.js";
-import Box from "@components/utils/box"
-import About from "@components/utils/about"
-import Layout from "@components/layout"
+import Navbar from "@components/Navbar"
+import Hero from "@components/Hero"
 
-export default function IndexPage() {
+function IndexPage({ data }) {
+  console.log(data)
   return (
-    //Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:
-    //Use items-stretch to stretch items to fill the container's cross axis:
-    //Use flex-col to position flex items vertically:
-    <Layout>
-    <div className="flex-1 flex-col items-center justify-center space-y-12 max-w-4xl mr-3">
-      <About />
-      <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 md:grid-cols-2">
-        <Box />
-        <Box />
-      </div>
+    <div>
+      <Navbar />
+      <Hero />
     </div>
-    </Layout>
   );
 }
+
+export async function getStaticProps(context) {
+  const res = await fetch(`http://localhost:3000/api/menu`)
+  const data = await res.json()
+
+  return {
+    props: {
+      data,
+    }, // will be passed to the page component as props
+  }
+}
+
+export default IndexPage;

frontend/pages/test.js

@@ -0,0 +1,21 @@
+import Image from "next/image";
+import Button from "@components/utils/button.js";
+import Box from "@components/utils/box"
+import About from "@components/utils/about"
+import Layout from "@components/layout"
+import Window from "@components/window"
+
+export default function IndexPage() {
+  return (
+    //Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:
+    //Use items-stretch to stretch items to fill the container's cross axis:
+    //Use flex-col to position flex items vertically:
+    <div>
+    <div className="flex-1 flex-col items-center justify-center space-y-12 max-w-4xl mr-3">
+      <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 md:grid-cols-2">
+        <Box />
+      </div>
+    </div>
+    </div>
+  );
+}

frontend/structure.md

@@ -0,0 +1,7 @@
+Components:
+- navbar
+- menu
+- hero (masthead): make it ✨pop✨
+- category list/button (list of buttons)
+- list of courses (redirect to page on website)
+- scrollable list of livestreams (redirect to calendar)