Created new design events portion

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,27 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import React from 'react'
+
+function EventCard({ event }) {
+  return (
+    <Link href={event.link}>
+      <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/${event.image}.png`)}
+            alt={`${event.name} Banner Logo`}
+            layout="responsive"
+          />
+        </div>
+        <p className="pt-6 text-[#010326] text-2xl font-semibold">
+          {event.name}
+        </p>
+        <p className="text-[#010326] text-base pt-2 truncate hover:text-clip opacity-50">
+          {event.description}
+        </p>
+      </article>
+    </Link>
+  );
+}
+
+export default EventCard

components/event/EventSection.js

@@ -0,0 +1,34 @@
+import React from "react";
+import EventCard from "./EventCard";
+import { HiArrowNarrowRight } from "react-icons/hi";
+
+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]">
+          <a href={""} target="_blank">
+            View all{" "}
+            <span className="inline-block text-lg text-cyan-400">
+              <HiArrowNarrowRight />
+            </span>
+          </a>
+        </button>
+      </section>
+    </>
+  );
+}
+
+export default EventSection;

pages/index.js

@@ -2,6 +2,7 @@ import Layout from "@/components/Layout";
 import Banner from "@/components/Banner";
 import { Config } from "../services/metadata/home";
 import MediaLayout from "@/components/MediaLayout";
+import EventSection from "@/components/event/EventSection";
 
 export default function Home() {
   const reactPlayLive = [
@@ -14,7 +15,7 @@ export default function Home() {
     return (
       <div className="w-full">
         <Banner />
-        <MediaLayout events={Config.events} title="Events" id="events" />
+        <EventSection events={Config.events} />
         <MediaLayout
           reactPlayLive={reactPlayLive}
           title="ReactPlay Live"