Default banner

components/Banner.js

@@ -1,11 +1,53 @@
-// components
-import Hero from "@/components/common/Hero";
+import Image from "next/image";
 
-// services
-import { Config } from "@/services/metadata/twoplaysamonth";
+// icons
+import { HiArrowNarrowRight } from "react-icons/hi";
 
-const Banner = () => {
-  return <Hero metainfo={Config} theHustleHomePage />;
+// image
+import HeroCoders from "@/public/twoplaysamonth/HeroCoders.svg";
+
+const Banner = ({ events }) => {
+  console.log(events);
+  const currentEvent = events.filter((event) => event.isCurrent);
+
+  return (
+    <>
+      {currentEvent.length ? (
+        <section className="bg-slate-900">
+          <div className="flex max-w-7xl px-4 mx-auto py-20 justify-between">
+            {/* primary section */}
+            <div className="md:w-1/2 mt-10 px-4 md:px-2 text-gray-200">
+              <div className="w-72">
+                <Image
+                  src={require(`/public/${currentEvent[0].image}.png`)}
+                  alt="Logo"
+                />
+              </div>
+              <h3 className="text-5xl font-black tracking-wide leading-snug font-sans py-8">
+                {currentEvent[0].name}
+              </h3>
+              <p>{currentEvent[0].description}</p>
+              <a
+                href={currentEvent[0].link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 my-8 px-6 rounded-full bg-neutral-100 text-sky-900 py-3"
+              >
+                Join{" "}
+                <span className="inline-block text-base text-cyan-400">
+                  <HiArrowNarrowRight />
+                </span>
+              </a>
+            </div>
+            {/* image section*/}
+            <div className="hidden md:block">
+              <Image src={HeroCoders} width={350} />
+            </div>
+          </div>
+        </section>
+      ) : null}
+    </>
+  );
 };
 
 export default Banner;

components/Header.js

@@ -1,8 +1,9 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { AiOutlineMenu, AiOutlineClose } from "react-icons/ai";
+import ReactPlayLogo from "@/public/ReactPlayLogo.svg";
 
 const MobileHeader = ({ links, setMobileActive, redirectToRegistration }) => {
   return (
@@ -34,17 +35,42 @@ const MobileHeader = ({ links, setMobileActive, redirectToRegistration }) => {
   );
 };
 
-const Header = ({ links, metainfo, secondary = false }) => {
+const Header = ({ links, metainfo, secondary = false, hustleHomePage }) => {
   const [mobileActive, setMobileActive] = useState(false);
   const router = useRouter();
   const redirectToRegistration = () => {
     router.push("/hackrplay/2022/registration");
   };
 
+  const [scroll, setScroll] = useState(false);
+
+  const controlNavbar = () => {
+    if (typeof window !== "undefined") {
+      if (window.scrollY > 100) {
+        // if scroll down change the background color of the  navbar
+        setScroll(true);
+      } else {
+        // if scroll up make remove background color from navbar
+        setScroll(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      window.addEventListener("scroll", controlNavbar);
+
+      // cleanup function
+      return () => {
+        window.removeEventListener("scroll", controlNavbar);
+      };
+    }
+  }, [window.scrollY]);
+
   return (
     <>
       {secondary ? (
-        <header className="pt-4 pb-2 md:px-10 px-5 inline-flex justify-between items-center bg-transparent font-primary text-white z-10 w-full">
+        <header className="pt-4 pb-2 md:px-10 px-5 inline-flex justify-between items-center bg-transparent font-primary text-white z-10 fixed max-w-full">
           <div className="md:w-40 w-36 z-10">
             <Link href={`/`}>
               <a>
@@ -58,21 +84,42 @@ const Header = ({ links, metainfo, secondary = false }) => {
           </div>
         </header>
       ) : (
-        <header className="pt-6 pb-1 px-4 flex md:justify-center justify-end items-baseline bg-brand-bg font-primary text-white z-10">
-          <div className="md:inline-flex hidden justify-center items-baseline mx-auto z-10">
+        <header
+          className={`${
+            hustleHomePage
+              ? "justify-end sm:justify-between items-center px-4 xl:px-16 py-4 "
+              : "pt-6 pb-1 px-4 md:justify-center justify-end items-baseline bg-brand-bg "
+          } flex font-primary text-white z-50 w-full fixed ${
+            scroll && hustleHomePage && "bg-slate-900"
+          } transition-all ease-in`}
+        >
+          {hustleHomePage && (
+            <Link href="/">
+              <div className="hidden sm:block cursor-pointer">
+                <Image src={ReactPlayLogo} alt="Logo" />
+              </div>
+            </Link>
+          )}
+          <div
+            className={`${
+              hustleHomePage
+                ? "hidden md:inline-flex"
+                : "md:inline-flex hidden justify-center items-baseline mx-auto z-10"
+            }`}
+          >
             {links &&
               links.map((link, index) => (
-                <Link key={index} href={`${link.href}`} scroll={false}>
+                <Link key={index} href={link.href} scroll={false}>
                   {link.href.includes("http") ? (
                     <a
-                      className="uppercase mr-16 last:mr-0 text-lg tracking-widest"
+                      className="uppercase mr-12 lg:mr-16 last:mr-0 text-lg tracking-widest"
                       target="_blank"
                       rel="noopener noreferrer"
                     >
                       {link.name}
                     </a>
                   ) : (
-                    <a className="uppercase mr-16 last:mr-0 text-lg tracking-widest">
+                    <a className="uppercase mr-12 lg:mr-16 last:mr-0 text-lg tracking-widest">
                       {link.name}
                     </a>
                   )}

components/Hero.js

@@ -0,0 +1,47 @@
+// import React from "react";
+
+import Image from "next/image";
+import Link from "next/link";
+
+import HeroBanner from "@/public/hustleHomePage/HeroBanner@2x.png";
+import { Config } from "@/services/metadata/home";
+
+import { HiArrowNarrowRight } from "react-icons/hi";
+
+const Hero = ({ hustleHomePage }) => {
+  const currentEvent = Config.events.filter((event) => event.isCurrent);
+
+  return (
+    <>
+      {currentEvent.length === 0 && hustleHomePage && (
+        <>
+          <div className="relative w-full h-[80vh] lg:h-[85vh]">
+            <Image src={HeroBanner} layout="fill" />
+          </div>
+          <div className="flex items-center flex-col gap-4 font-sans absolute left-1/2 -translate-x-1/2 text-center px-4 w-full lg:w-2/4 top-48">
+            <h3 className="text-4xl lg:text-5xl font-black text-cyan-400">
+              An unusual place for{" "}
+              <span className="underline text-white">Extraordinary React</span>{" "}
+              events
+            </h3>
+            <p className="max-w-lg lg:max-w-none text-sm lg:text-base px-4 py-4 lg:py-12 text-gray-300">
+              ReactPlay is an open-source platform to learn, crate and share
+              ReactJS Projects with the developer community. Start by browsing
+              the plays or explore the source code.
+            </p>
+            <Link className="" href={`/events`}>
+              <div className="text-sm lg:text-base text-gray-300 border rounded-full px-6 py-3 inline-flex items-center gap-2 mt-8 lg:mt-0 cursor-pointer">
+                View Past Events
+                <span className="text-cyan-400">
+                  <HiArrowNarrowRight />
+                </span>
+              </div>
+            </Link>
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+export default Hero;

components/Layout.js

@@ -3,10 +3,13 @@ import Head from "next/head";
 import { useRouter } from "next/router";
 
 import Footer from "./Footer";
-import Header from "./Header";
+
 import Script from "next/script";
 
-const Layout = ({ children, title, description, metainfo }) => {
+import Hero from "./Hero";
+import Header from "./Header";
+
+const Layout = ({ children, title, description, metainfo, hustleHomePage }) => {
   const currentPath = useRouter().pathname;
   const [secondaryNavbar, setSecondaryNavbar] = useState(false);
   const [loading, setLoading] = useState(true);
@@ -79,7 +82,9 @@ const Layout = ({ children, title, description, metainfo }) => {
             links={metainfo.links}
             secondary={secondaryNavbar}
             metainfo={metainfo}
+            hustleHomePage={hustleHomePage}
           />
+          <Hero hustleHomePage={hustleHomePage} />
           <main>{children}</main>
           <Footer currentPath={currentPath} />
         </div>

pages/index.js

@@ -2,32 +2,18 @@ import Layout from "@/components/Layout";
 import Banner from "@/components/Banner";
 import { Config } from "../services/metadata/home";
 import MediaLayout from "@/components/MediaLayout";
-import { useEffect, useState } from "react";
-import { REACT_PLAYLIST_ID } from "config";
 
 export default function Home() {
-  const [reactPlayLive, setReactPlayLive] = useState([]);
-
-  useEffect(() => {
-    const getPlayListData = async () => {
-      const response = await fetch(
-        `https://www.googleapis.com/youtube/v3/playlistItems?key=${process.env.NEXT_PUBLIC_YOUTUBE_API_KEY}&part=id,snippet&maxResults=3&playlistId=${REACT_PLAYLIST_ID}`
-      );
-      const json = await response.json();
-      console.log(json);
-      const urls = json?.items?.map((item, index) => ({
-        id: index,
-        src: `https://www.youtube.com/embed/${item.snippet?.resourceId?.videoId}`,
-      }));
-      setReactPlayLive(urls);
-    };
-    getPlayListData();
-  }, []);
+  const reactPlayLive = [
+    { id: 0, src: "https://www.youtube.com/embed/1qfDkmtuWqg" },
+    { id: 1, src: "https://www.youtube.com/embed/b0eas9xxD-E" },
+    { id: 2, src: "https://www.youtube.com/embed/w0nd4ASTDdg" },
+  ];
 
   const EventLayout = () => {
     return (
       <div className="w-full">
-        <Banner />
+        <Banner events={Config.events} />
         <MediaLayout events={Config.events} title="Events" id="events" />
         <MediaLayout
           reactPlayLive={reactPlayLive}
@@ -44,7 +30,11 @@ export default function Home() {
   };
 
   return (
-    <Layout title="The Hustle Home page" metainfo={Config}>
+    <Layout
+      hustleHomePage={true}
+      title="The Hustle Home page"
+      metainfo={Config}
+    >
       <EventLayout />
     </Layout>
   );