Created new design events portion

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

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

@@ -59,10 +59,22 @@ const Header = ({ links, metainfo, secondary = false }) => {
         </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: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>
+
           <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}>
+                <Link key={index} href={link.href} scroll={false}>
                   {link.href.includes("http") ? (
                     <a
                       className="uppercase mr-16 last:mr-0 text-lg tracking-widest"

components/Layout.js

@@ -6,21 +6,13 @@ import Footer from "./Footer";
 import Header from "./Header";
 import Script from "next/script";
 
-const Layout = ({ children, title, description, metainfo }) => {
+// 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=[] }) => {
   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);
     }
@@ -76,8 +68,8 @@ const Layout = ({ children, title, description, metainfo }) => {
             />
           </Head>
           <Header
-            links={metainfo.links}
-            secondary={secondaryNavbar}
+            links={links.length ==0 ? metainfo.links : links}
+            secondary={eventNavbar}
             metainfo={metainfo}
           />
           <main>{children}</main>

components/MediaLayout.js

@@ -4,13 +4,11 @@ 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"} ${
+      className={`flex flex-col items-center justify-center w-full mx-auto px-4 ${twitterSpaces && "bg-cyan-400/10"} ${
         reactPlayLive && "bg-slate-900"
       }`}
     >
@@ -29,20 +27,6 @@ const MediaLayout = ({ events, reactPlayLive, twitterSpaces, title, id }) => {
         )}
       </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>
-        ))}
         {reactPlayLive?.map((el) => (
           <iframe
             key={el.id}

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={`/events/${event.id}/${event.name}`}>
+      <a target="_blank">
+        <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

components/event/EventIndexCardWithDetails.js

@@ -0,0 +1,34 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+export default function EventIndexCardWithDetails({event}) {
+  return (
+    <Link href={`/events/${event.id}/${event.name}`}>
+    <a target="_blank">
+      <article className="w-[360px] cursor-pointer hover:scale-105 transition-all">
+        <div className="bg-[#010426] py-12 px-8 rounded-3xl w-[360px]">
+          <Image
+            src={require(`/public/logos/${event.logo}`)}
+            alt={`${event.name} Banner Logo`}
+            layout="responsive"
+            width={296}
+            height={40}
+          />
+          {/* Cleanup: Later remove if not needed */}
+          <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>
+
+          <p className='text-white pt-4'>{event.description}</p>
+
+        </div>
+      </article>
+      </a>
+    </Link>
+  )
+}

components/event/EventSection.js

@@ -0,0 +1,37 @@
+import React from "react";
+import EventCard from "./EventCard";
+import { HiArrowNarrowRight } from "react-icons/hi";
+import Link from "next/link";
+
+function EventSection({ events }) {
+  return (
+    <>
+      <section
+        id="events"
+        className="flex flex-col items-center justify-center w-full mx-auto px-4 bg-gray-50"
+      >
+        <h1 className="text-5xl py-16 font-raleway">
+          <span className="font-black font-body text-[#010326]">Events</span>
+        </h1>
+
+        <div className="flex flex-col lg:grid lg:grid-cols-3 justify-center items-center gap-10 lg:gap-20">
+          {events?.map((event) => (
+            <EventCard key={`event_key-${event.id}`} event={event} />
+          ))}
+        </div>
+        <button className="font-sans font-black text-2xl py-16 decoration-cyan-400 underline transition-shadow text-[#010326]">
+          <Link href="/events">
+            <a>
+              View all{" "}
+              <span className="inline-block text-lg text-cyan-400">
+                <HiArrowNarrowRight />
+              </span>
+            </a>
+          </Link>
+        </button>
+      </section>
+    </>
+  );
+}
+
+export default EventSection;