Update: Event Page cards and improved UI

app/events/page.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Metadata } from "next";
-import EventsPageLayout from "@/layouts/EventsPageLayout";
+import EventsPageLayout from "@/layouts/EventPageLayout/EventsPageLayout";
 export const metadata: Metadata = {
   title: "Events",
 };

app/globals.css

@@ -82,4 +82,12 @@
   .heading {
     @apply font-bold text-4xl md:text-5xl text-center;
   }
+   .no-scrollbar::-webkit-scrollbar {
+          display: none;
+      }
+     /* Hide scrollbar for IE, Edge and Firefox */
+      .no-scrollbar {
+          -ms-overflow-style: none;  /* IE and Edge */
+          scrollbar-width: none;  /* Firefox */
+    }
 }

components/EventsCard.tsx

@@ -1,7 +1,12 @@
+"use client";
+
+import { getEventTimeLine } from "@/lib/utils";
 import { CardContainer, CardBody, CardItem } from "./ui/3d-card";
 import { IconClock } from "@tabler/icons-react";
 import Image from "next/image";
-import Link from "next/link";
+// import Link from "next/link";
+import MobileCard from "./MobileCard";
+import ModalCard from "./ModalCard";
 
 export interface EventsCardProps {
   title: string;
@@ -30,74 +35,122 @@ export default function EventsCard({
   deadline,
   formLink,
 }: EventsCardProps): JSX.Element {
+  const tagsMap = {
+    past: (
+      <div className="h-4 w-max bg-blue-500 rounded-md text-xs px-2 py-1 text-center flex items-center justify-center absolute top-2 right-2">
+        Completed
+      </div>
+    ),
+    present: (
+      <div className="h-4 w-max bg-red-500 rounded-md text-xs px-2 py-1 text-center flex items-center justify-center absolute top-2 right-2 text-white">
+        Live
+      </div>
+    ),
+    future: (
+      <div className="h-4 w-max bg-green-500 rounded-md text-xs px-2 py-1 text-center flex items-center justify-center absolute top-2 right-2">
+        Coming Up
+      </div>
+    ),
+  };
   return (
     <CardContainer className="inter-var">
-      <CardBody className="flex flex-col justify-between relative group/card  hover:shadow-2xl hover:shadow-emerald-500/[0.1] dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-background/[0.4] dark:border-white/[0.2] border-black/[0.1] w-auto max-w-[20rem] sm:max-w-[20rem] h-auto rounded-xl p-6 border  ">
-        <div className="flex justify-between items-center">
+      <CardBody className="flex flex-col justify-between relative  hover:shadow-2xl hover:shadow-emerald-500/[0.1] dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-background/[0.4] dark:border-white/[0.2] border-black/[0.1] w-auto max-w-[20rem] sm:max-w-[36rem] max-h-[16rem] rounded-xl p-6 border  ">
+        <div className="flex gap-4">
           <CardItem
             translateZ={50}
-            className="text-xl font-bold text-neutral-600 dark:text-white"
+            className="flex justify-center items-center m-2 relative"
           >
-            {title}
+            {tagsMap[getEventTimeLine(deadline)]}
+            <Image
+              src={eventImage}
+              height="200"
+              width="200"
+              className="min-w-24 object-contain aspect-square rounded-xl group-hover/card:shadow-xl"
+              alt={eventName}
+              loading="lazy"
+            />
           </CardItem>
-          {/* Event organizing club logo */}
-          <CardItem
-            translateZ={50}
-            className="text-neutral-500 dark:text-white"
-          >
-            <div className="flex items-center gap-3">
-              <img
-                src={clubImage}
-                height={25}
-                width={25}
-                className="rounded-full object-cover aspect-[1/1] border-2 p-0 border-white ml-3"
-                alt={clubName}
-                loading="lazy"
-              />
+          <div>
+            <div className="flex justify-between items-center">
+              <CardItem
+                translateZ={50}
+                className="text-lg font-bold text-neutral-600 dark:text-white"
+              >
+                {title}
+              </CardItem>
+              {/* Event organizing club logo */}
+              <CardItem
+                translateZ={50}
+                className="text-neutral-500 dark:text-white"
+              >
+                <div className="flex items-center">
+                  <Image
+                    src={clubImage}
+                    height={30}
+                    width={32}
+                    className="rounded-full object-cover aspect-[1/1] border-2 p-0 border-white ml-3"
+                    alt={clubName}
+                  />
+                </div>
+              </CardItem>
             </div>
-          </CardItem>
-        </div>
-        <CardItem
-          translateZ={50}
-          className="my-4 self-center justify-self-center"
-        >
-          <Image
-            src={eventImage}
-            height="1000"
-            width="1000"
-            className="min-w-24 object-contain aspect-square rounded-xl group-hover/card:shadow-xl"
-            alt={eventName}
-            loading="lazy"
-          />
-        </CardItem>
-        <CardItem
-          as="p"
-          translateZ={60}
-          className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300 line-clamp-3"
-        >
-          {description}
-        </CardItem>
-        <div className="">
-          <div className="w-full h-0.5 bg-neutral-200 dark:bg-neutral-700 mt-4" />
-          <div className=" flex justify-between items-center mt-5">
+
+            <CardItem
+              as="p"
+              translateZ={60}
+              className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300 line-clamp-2"
+            >
+              {description}
+            </CardItem>
+
             <CardItem
               translateZ={20}
-              className="px-4 py-2 flex items-center gap-2 rounded-xl text-xs font-normal dark:text-white"
+              className="py-1 flex items-center gap-2 rounded-xl text-xs font-normal dark:text-white mb-2"
             >
-              <IconClock size={20} />
-              <p>{String(deadline)}</p>
+              {isOver(deadline) ? (
+                <div className="flex items-center text-md mt-2 dark:text-white w-max">
+                  <IconClock size={18} />
+                  <p>{String(deadline)}</p>
+                </div>
+              ) : null}
             </CardItem>
-            {isOver(deadline) ? null : (
-              <Link href={formLink} target="about_blank">
-                <CardItem
-                  translateZ={20}
-                  as="button"
-                  className="px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold"
-                >
-                  Register
+            <div className="">
+              <div className="w-full h-0.5 bg-neutral-200 dark:bg-neutral-700" />
+              <div className=" flex justify-between items-center mt-3">
+                <CardItem translateZ={20}>
+                  {isOver(deadline) ? (
+                    <div className="bg-transparent text-center text-sm text-white-700 font-semibold hover:text-white px-3 py-2 border border-blue-500 rounded">
+                      Registration closed
+                    </div>
+                  ) : (
+                    // <Link href={formLink} target="about_blank">
+                    <div>
+                      <MobileCard
+                        title={title}
+                        description={description}
+                        eventName={eventName}
+                        eventImage={eventImage}
+                        clubName={clubName}
+                        clubImage={clubImage}
+                        deadline={deadline}
+                        formLink={formLink}
+                      />
+                      <ModalCard
+                        title={title}
+                        description={description}
+                        eventName={eventName}
+                        eventImage={eventImage}
+                        clubName={clubName}
+                        clubImage={clubImage}
+                        deadline={deadline}
+                        formLink={formLink}
+                      />
+                    </div>
+                    // </Link>
+                  )}
                 </CardItem>
-              </Link>
-            )}
+              </div>
+            </div>
           </div>
         </div>
       </CardBody>

components/Hero.tsx

@@ -12,6 +12,7 @@ const Hero = () => {
             words="Transforming people into experienced developers"
             className="text-center text-3xl md:text-4xl lg:text-6xl"
           />
+
           <a href="http://dsc.gg/elixirtechcommunity" target="_blank">
             <MagicButton
               title="Join Discord"

components/MobileCard.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import Image from "next/image";
+import Link from "next/link";
+
+export interface MobileCardProps {
+  title: string;
+  description: string;
+  eventName: string;
+  eventImage: string;
+  clubName: string;
+  clubImage: string;
+  deadline: Date | string;
+  formLink: string;
+}
+
+export default function MobileCard({
+  title,
+  description,
+  eventName,
+  eventImage,
+  clubName,
+  clubImage,
+  deadline,
+  formLink,
+}: MobileCardProps): JSX.Element {
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <div className="bg-transparent text-sm hover:bg-blue-600 text-white-700 font-semibold hover:text-white px-3 py-2 border border-blue-500 hover:border-transparent rounded block md:hidden">
+          View Details
+        </div>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="flex flex-col max-w-sm mx-auto w-auto">
+          <DrawerHeader>
+            <div className="flex justify-center items-center relative ">
+              <Image
+                src={eventImage}
+                height="200"
+                width="200"
+                className="min-w-24 object-contain aspect-square rounded-xl group-hover/card:shadow-xl"
+                alt={eventName}
+                loading="lazy"
+              />
+            </div>
+            <div className="p-2 pb-0 ">
+              <DrawerTitle className="flex justify-between items-center mb-3">
+                {title}
+                <div className="flex items-center">
+                  <Image
+                    src={clubImage}
+                    height={30}
+                    width={32}
+                    className="rounded-full object-cover aspect-[1/1] border-2 p-0 border-white ml-3"
+                    alt={clubName}
+                  />
+                </div>
+              </DrawerTitle>
+              <DrawerDescription className="text-left mb-3">
+                {description}
+              </DrawerDescription>
+              <div className="flex items-center text-md dark:text-white w-max">
+                <p>Last date: {String(deadline)}</p>
+              </div>
+            </div>
+          </DrawerHeader>
+          <DrawerFooter className="mb-2">
+            <Link href={formLink} target="about_blank">
+              <div className="bg-transparent text-center text-sm hover:bg-blue-600 text-white-700 font-semibold hover:text-white px-3 py-2 border border-blue-500 hover:border-transparent rounded">
+                Register
+              </div>
+            </Link>
+            <DrawerClose asChild>
+              <div className="bg-transparent text-center text-sm hover:bg-blue-600 text-white-700 font-semibold hover:text-white px-3 py-2 border border-blue-500 hover:border-transparent rounded">
+                Cancel
+              </div>
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}