Created new design events portion

.gitignore

@@ -49,3 +49,11 @@ jspm_packages
 
 # DS Store
 .DS_STORE
+
+
+# package
+package-lock.json
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+yarn.lock

CONTRIBUTING.md

@@ -1,7 +1,7 @@
 # Contributing
 
 When contributing to this repository, please first discuss the change you wish to make via [issue](https://github.com/reactplay/activities/issues),
-[email](mailto:contact@reactplay.io), or any other method with the owners of this repository before making a change. 
+[email](mailto:hello@reactplay.io), or any other method with the owners of this repository before making a change. 
 
 Please note we have a [Code of Conduct](https://github.com/reactplay/activities/blob/main/CODE_OF_CONDUCT.md), please follow it in all your interactions with the project.
 
@@ -73,7 +73,7 @@ further defined and clarified by project maintainers.
 ### Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at [contact@reactplay.io](mailto:contact@reactplay.io). All
+reported by contacting the project team at [hello@reactplay.io](mailto:hello@reactplay.io). All
 complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.

components/Banner.js

@@ -1,13 +1,9 @@
 import Image from "next/image";
 
-// icons
-import { HiArrowNarrowRight } from "react-icons/hi";
-
-// image
-import HeroCoders from "@/public/twoplaysamonth/HeroCoders.svg";
+import { HiArrowNarrowRight } from "react-icons/hi";  // icons
+import HeroCoders from "@/public/twoplaysamonth/HeroCoders.svg";// image
 
 const Banner = ({ events }) => {
-  console.log(events);
   const currentEvent = events.filter((event) => event.isCurrent);
 
   return (

components/ExtendedFooter.js

@@ -8,7 +8,7 @@ import { HiArrowNarrowRight } from "react-icons/hi";
 
 const ExtendedFooter = () => {
   return (
-    <footer className="pt-12 pb-6 px-8 text-sm font-light text-zinc-500 border-t border-solid border-zinc-200">
+    <footer className="bg-white pt-12 pb-6 px-8 text-sm font-light text-zinc-500 border-t border-solid border-zinc-200">
       <div className=" flex flex-wrap  lg:grid w-[85%] mt-0 mx-auto mb-4 lg:grid-cols-[1fr_1.2fr_0.8fr] gap-16">
         {/* ReactPlay intro and social icons */}
         <div className="w-full">
@@ -81,11 +81,11 @@ const ExtendedFooter = () => {
               <p>
                 <a
                   className="underline text-gray-800 font-normal"
-                  href="mailto:contact@reactplay.io"
+                  href="mailto:hello@reactplay.io"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
-                  contact@reactplay.io
+                  hello@reactplay.io
                 </a>
               </p>
             </div>

components/Footer.js

@@ -1,80 +1,9 @@
-import Image from "next/image";
-import Link from "next/link";
-import { FaDiscord, FaTwitter, FaRss } from "react-icons/fa";
-
-import FooterTriangles from "../public/FooterTriangles.svg";
-import ReactPlayLogo from "../public/ReactPlayLogo.svg";
-import FooterReactLogo from "../public/FooterReactLogo.svg";
 import ExtendedFooter from "./ExtendedFooter";
 
 const Footer = ({ currentPath }) => {
   return (
     <>
-      {currentPath == "/" ? (
-        <ExtendedFooter />
-      ) : (
-        <footer className="relative flex justify-center items-center pt-16 pb-9 px-8 bg-white bg-opacity-10 overflow-clip">
-          <div className="absolute -left-5">
-            <Image
-              src={FooterTriangles}
-              alt="Footer Triangles"
-              width={155}
-              height={155}
-            />
-          </div>
-          <div className="flex flex-col justify-center items-center mx-auto ">
-            <span className="mb-3 text-gray-400 font-medium font-body">
-              Hosted By
-            </span>
-            <a href="https://reactplay.io" target="_blank" rel="noreferrer">
-              <Image src={ReactPlayLogo} alt="ReactPlay Logo" layout="fixed" />
-            </a>
-            <p className="mt-2 font-medium font-body text-gray-400 text-center">
-              An open-source project made with ❤️ by folks dedicated to give
-              back to the developer community.
-            </p>
-            <p className="mt-2 mb-2 font-medium font-body text-gray-400 text-center underline underline-offset-2 hover:text-gray-200">
-              <Link href={`/tech-credit`}>
-                <a>Tech Stack and Credits</a>
-              </Link>
-            </p>
-            <div className="mt-6 inline-flex justify-center items-center">
-              <a
-                className="text-gray-500 hover:text-gray-300 transition-all duration-200 mr-6"
-                href="https://discord.gg/HBheAs6UJp"
-                rel="noreferrer"
-                target="_blank"
-              >
-                <FaDiscord size={41} />
-              </a>
-              <a
-                className="text-gray-500 hover:text-gray-300 transition-all duration-200 mr-6"
-                href="https://twitter.com/reactplayio"
-                rel="noreferrer"
-                target="_blank"
-              >
-                <FaTwitter size={40} />
-              </a>
-              <a
-                className="text-gray-500 hover:text-gray-300 transition-all duration-200"
-                href="https://blog.reactplay.io/"
-                rel="noreferrer"
-                target="_blank"
-              >
-                <FaRss size={40} />
-              </a>
-            </div>
-          </div>
-          <div className="absolute opacity-40 -right-24 -bottom-28">
-            <Image
-              src={FooterReactLogo}
-              alt="Footer React Logo"
-              width={300}
-              height={300}
-            />
-          </div>
-        </footer>
-      )}
+      <ExtendedFooter />
     </>
   );
 };

components/Header.js

@@ -84,29 +84,20 @@ const Header = ({ links, metainfo, secondary = false, hustleHomePage }) => {
           </div>
         </header>
       ) : (
-        <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>
+        <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:w-40 w-36 z-10 absolute left-0 -mt-6 ml-4">
+            <Link href={`/`}>
+              <a>
+                <Image
+                  src={require(`/public/ReactPlayLogo.svg`)}
+                  alt="Navbar Logo"
+                  layout="responsive"
+                />
+              </a>
             </Link>
-          )}
-          <div
-            className={`${
-              hustleHomePage
-                ? "hidden md:inline-flex"
-                : "md:inline-flex hidden justify-center items-baseline mx-auto z-10"
-            }`}
-          >
+          </div>
+
+          <div className="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}>

components/Hero.js

@@ -3,7 +3,7 @@
 import Image from "next/image";
 import Link from "next/link";
 
-import HeroBanner from "@/public/hustleHomePage/HeroBanner@2x.png";
+import HeroBanner from "@/public/hustleHomePage/HeroBanner.jpg";
 import { Config } from "@/services/metadata/home";
 
 import { HiArrowNarrowRight } from "react-icons/hi";

components/Layout.js

@@ -5,25 +5,17 @@ import { useRouter } from "next/router";
 import Footer from "./Footer";
 
 import Script from "next/script";
-
-import Hero from "./Hero";
 import Header from "./Header";
+import Hero from "./Hero";
+
+// eventNavbar will be true if this layout will be using from an event page.
+// If any other page it's value will not present and default to false
+const Layout = ({ children, title, metainfo, eventNavbar = false, links=[],hustleHomePage }) => {
 
-const Layout = ({ children, title, description, metainfo, hustleHomePage }) => {
   const currentPath = useRouter().pathname;
-  const [secondaryNavbar, setSecondaryNavbar] = useState(false);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    if (
-      currentPath === "/events/22/hackrplay" ||
-      currentPath === "/events/23/twoplaysamonth" ||
-      currentPath === "/"
-    ) {
-      setSecondaryNavbar(false);
-    } else {
-      setSecondaryNavbar(true);
-    }
     if (metainfo?.name) {
       setLoading(false);
     }
@@ -79,8 +71,8 @@ const Layout = ({ children, title, description, metainfo, hustleHomePage }) => {
             />
           </Head>
           <Header
-            links={metainfo.links}
-            secondary={secondaryNavbar}
+            links={links.length ==0 ? metainfo.links : links}
+            secondary={eventNavbar}
             metainfo={metainfo}
             hustleHomePage={hustleHomePage}
           />

components/MediaLayout.js

@@ -4,15 +4,13 @@ import ReactPlayLogo from "../public/ReactPlayLogo.svg";
 import { HiArrowNarrowRight } from "react-icons/hi";
 import { BiPlay } from "react-icons/bi";
 
-const MediaLayout = ({ events, reactPlayLive, twitterSpaces, title, id }) => {
+const MediaLayout = ({ reactPlayLive, twitterSpaces, title, id }) => {
   return (
     <section
       id={id}
       className={`flex flex-col items-center justify-center w-full mx-auto px-4 ${
-        events && "bg-gray-50"
-      } ${twitterSpaces && "bg-cyan-400/10"} ${
-        reactPlayLive && "bg-slate-900"
-      }`}
+        twitterSpaces && "bg-cyan-400/10"
+      } ${reactPlayLive && "bg-slate-900"}`}
     >
       <h1
         className={`text-5xl py-16 font-sans ${reactPlayLive && "text-white"}`}
@@ -28,21 +26,7 @@ const MediaLayout = ({ events, reactPlayLive, twitterSpaces, title, id }) => {
           </div>
         )}
       </h1>
-      <div className="flex flex-col lg:grid lg:grid-cols-3 justify-center items-center gap-10 lg:gap-20">
-        {events?.map((event) => (
-          <Link key={event.id} href={event.link}>
-            <article className="w-full mb-10 rounded text-sm text-gray-300 sm:h-[21rem] md:h-[20rem] flex flex-col gap-5 bg-cyan-800 max-w-[350px] px-6 py-8 cursor-pointer hover:scale-105 transition-all">
-              <div>
-                <Image
-                  src={require(`/public/${event.image}.png`)}
-                  alt="Banner Logo"
-                  layout="responsive"
-                />
-              </div>
-              <p className="">{event.description}</p>
-            </article>
-          </Link>
-        ))}
+      <div className="flex flex-col lg:grid lg:grid-cols-3 justify-center items-center gap-10 lg:gap-20 py-8">
         {reactPlayLive?.map((el) => (
           <iframe
             key={el.id}
@@ -85,25 +69,27 @@ const MediaLayout = ({ events, reactPlayLive, twitterSpaces, title, id }) => {
       </div>
 
       {/* link to rest of the media */}
-      <button
-        className={`font-sans font-black text-2xl py-16 decoration-cyan-400 underline transition-shadow ${
-          reactPlayLive && "text-white"
-        }`}
-      >
-        <a
-          href={
-            reactPlayLive
-              ? "https://www.youtube.com/playlist?list=PLIJrr73KDmRxqfDS58ZC3MoianOjcm__Y"
-              : ""
-          }
-          target="_blank"
+      {twitterSpaces && twitterSpaces.length ? null : (
+        <button
+          className={`font-sans font-black text-2xl py-8 decoration-cyan-400 underline transition-shadow ${
+            reactPlayLive && "text-white"
+          }`}
         >
-          View all{" "}
-          <span className="inline-block text-lg text-cyan-400">
-            <HiArrowNarrowRight />
-          </span>
-        </a>
-      </button>
+          <a
+            href={
+              reactPlayLive
+                ? "https://www.youtube.com/playlist?list=PLIJrr73KDmRxqfDS58ZC3MoianOjcm__Y"
+                : ""
+            }
+            target="_blank"
+          >
+            View all{" "}
+            <span className="inline-block text-lg text-cyan-400">
+              <HiArrowNarrowRight />
+            </span>
+          </a>
+        </button>
+      )}
     </section>
   );
 };

components/event/EventCard.js

@@ -0,0 +1,38 @@
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+function EventCard({ event }) {
+  return (
+    <Link href={event.link || `/events/${event.id}/${event.name}`}>
+      <a target={event.external ? "_blank" : undefined}>
+        <article className="w-[360px] cursor-pointer hover:scale-105 transition-all">
+          <div className="bg-[#010426] py-28 px-8 rounded-3xl h-[300px] w-[360px]">
+            <Image
+              src={require(`/public/logos/${event.logo}`)}
+              alt={`${event.name} Banner Logo`}
+              layout="responsive"
+              width={296}
+              height={40}
+            />
+            {/* Not sure that we need this section on a logo / banner */}
+            <div className={`grid grid-cols-3 mt-1 border border-[#66fec9]`}>
+              <div
+                className={`col-span-2 text-[#66fec9] font-medium px-1 text-[10px] flex items-center justify-center uppercase`}
+              >
+                {event.slogan.title}
+              </div>
+              <div
+                className={`text-black bg-[#66fec9] px-1 text-[10px] flex items-center justify-center uppercase`}
+              >
+                {event.duration}
+              </div>
+            </div>
+          </div>
+        </article>
+      </a>
+    </Link>
+  );
+}
+
+export default EventCard;