add responsive timeline

client/package.json

@@ -17,6 +17,7 @@
     "next": "14.2.6",
     "react": "^18",
     "react-dom": "^18",
+    "react-vertical-timeline-component": "^3.6.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "yarn": "^1.22.22"
@@ -25,6 +26,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-vertical-timeline-component": "^3.3.6",
     "eslint": "^8",
     "eslint-config-next": "14.2.6",
     "postcss": "^8",

client/src/app/components/timeline/Desktop/Desktop.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { timelineEvents } from "@/app/config/content/Timeline/timeline";
+import TimelineCard from "./TimelineCard";
+import Image from "next/image";
+import { line } from "@/app/config/content/Timeline/timeline";
+export default function Desktop() {
+    return (
+        <div className="grid grid-cols-3 gap-y-20 gap-x-5 xl:gap-20 max-w-6xl mx-auto mt-20">
+            {timelineEvents.map((event, index) =>
+                event.date ? (
+                    <TimelineCard key={index} {...event} />
+                ) : (
+                    <div
+                        key={index}
+                        className="flex flex-col justify-end relative"
+                    >
+                        <Image
+                            src={line}
+                            alt="1"
+                            width={1000}
+                            height={200}
+                            className={`z-10 -bottom-[36.8px] absolute scale-x-[1.5] ${
+                                event.midEnd === "right"
+                                    ? "-left-[7rem] scale-x-[1.25] scale-y-[1.5]"
+                                    : event.midEnd === "left"
+                                    ? "-right-[7rem] 2xl:-right-[4.5rem] scale-y-[1.5]"
+                                    : "scale-y-[1.5]"
+                            }`}
+                        />
+                    </div>
+                )
+            )}
+        </div>
+    );
+}

client/src/app/components/timeline/Pill.tsx → client/src/app/components/timeline/Desktop/Pill.tsx

@@ -1,29 +1,22 @@
 import Image from "next/image";
 import React from "react";
-import { line, rightCurve, leftCurve } from "@/app/config/Timeline/timeline";
+import {
+    line,
+    rightCurve,
+    leftCurve,
+} from "@/app/config/content/Timeline/timeline";
+import { PillType } from "@/app/types/timeline";
 
-export default function Pill({
-    align,
-    curved,
-    isLast,
-    midEnd,
-    corner,
-}: {
-    align: String;
-    curved: String;
-    isLast: boolean;
-    midEnd: String;
-    corner: String;
-}) {
+export default function Pill({ align, curved, isLast, corner }: PillType) {
     return (
         <div>
-            <div className="absolute -bottom-12 left-1/2 transform -translate-x-1/2 bg-black-pri p-1 rounded-full border border-black-pri z-20">
+            <div className="absolute -bottom-12 left-1/2 transform -translate-x-1/2 bg-black p-1 rounded-full border border-black z-20">
                 <div className="h-5 w-5 bg-[#DDDDDD] rounded-full" />
             </div>
             <div
-                className={`absolute -bottom-[38px] z-10 ${
+                className={`absolute -bottom-[36px] xl:-bottom-[38px] z-10 ${
                     isLast
-                        ? "right-[9.5rem] scale-y-[1.5]"
+                        ? "right-[9.5rem]"
                         : corner === "left"
                         ? "-left-[0.2rem]"
                         : align === "left"
@@ -34,12 +27,15 @@ export default function Pill({
                 <Image
                     src={line}
                     alt="1"
-                    width={1000}
+                    width={4000}
                     height={2000}
                     className={`z-10 ${
-                        align === "left" ? " scale-y-[2.5]" : "scale-y-[2]"
+                        align === "left"
+                            ? "scale-x-[0.7] lg:scale-x-[0.8] 2xl:scale-x-[1] scale-y-[2.5]"
+                            : "scale-y-[2]"
                     }`}
                 />
+
                 {curved && (
                     <Image
                         src={curved === "left" ? leftCurve : rightCurve}
@@ -48,8 +44,8 @@ export default function Pill({
                         height={100}
                         className={`z-20 absolute ${
                             curved === "right"
-                                ? "top-[0.2rem] -right-[6.1rem] scale-y-[1.01]"
-                                : "-top-[17.4rem]  -left-[8rem] scale-y-[1.05]"
+                                ? "top-[0.2rem] -right-[5rem] lg:-right-[6.1rem] scale-y-[1.01]"
+                                : "-top-[17.4rem] -left-[2.5rem] lg:-left-[4rem]  2xl:-left-[7.2rem] scale-y-[1.05]"
                         }`}
                     />
                 )}

client/src/app/components/timeline/TimelineCard.tsx → client/src/app/components/timeline/Desktop/TimelineCard.tsx

@@ -11,22 +11,22 @@ const TimelineCard = ({
     align,
     curved,
     isLast,
-    midEnd,
     corner,
     imgPos,
     imgSize,
 }: TimelineCardType) => {
     return (
-        <div className="relative font-inter w-full h-52 text-center grid place-items-center border-2 border-black-pri rounded-xl py-5 gap-3 text-black-pri">
-            <p className="font-[500] text-[22px]">{title}</p>
-            <p className="text-[18px] font-[300]">{date}</p>
-            <p className="text-[#F12727] text-[18px] font-[600]">{status}</p>
-            <div className="absolute bottom-[-10px] left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-[10px] border-l-transparent border-r-[10px] border-r-transparent border-t-[10px] border-t-black-pri"></div>
+        <div className="relative font-inter w-full h-52 text-center grid place-items-center border-2 border-black rounded-xl py-5 gap-3 text-black">
+            <p className="font-[500] text-[20px] xl:text-[22px]">{date}</p>
+            <p className="xl:text-[18px] text-[16px] font-[300]">{title}</p>
+            <p className="text-[#F12727] text-[16px] xl:text-[18px] font-[600]">
+                {status}
+            </p>
+            <div className="absolute bottom-[-10px] left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-[10px] border-l-transparent border-r-[10px] border-r-transparent border-t-[10px] border-t-black"></div>
             <Pill
                 align={align!}
                 curved={curved!}
                 isLast={isLast!}
-                midEnd={midEnd!}
                 corner={corner!}
             />
             <Image
@@ -35,7 +35,9 @@ const TimelineCard = ({
                 width={imgSize}
                 height={imgSize}
                 className={`z-20 absolute -bottom-[3.5rem] ${
-                    imgPos === "left" ? "-left-16" : "-right-16"
+                    imgPos === "left"
+                        ? "-left-24 lg:-left-20 xl:-left-16"
+                        : "-right-24 lg:-right-20 xl:-right-16"
                 }`}
             />
         </div>

client/src/app/components/timeline/Mobile/Mobile.tsx

@@ -0,0 +1,39 @@
+"use client";
+import React from "react";
+import { timelineEvents } from "@/app/config/content/Timeline/timeline";
+import {
+    VerticalTimeline,
+    VerticalTimelineElement,
+} from "react-vertical-timeline-component";
+import "react-vertical-timeline-component/style.min.css";
+import TimelineCard from "./TimelineCard";
+export default function Mobile() {
+    return (
+        <div className="max-w-6xl mx-auto my-16">
+            <VerticalTimeline lineColor="#F12727">
+                {timelineEvents.map((event, i) => {
+                    if (event.title)
+                        return (
+                            <VerticalTimelineElement
+                                key={i}
+                                visible={true}
+                                iconStyle={{
+                                    background: "#F12727",
+                                    color: "#fff",
+                                }}
+                                contentStyle={{ background: "#00000000" }}
+                            >
+                                <TimelineCard
+                                    key={event.title}
+                                    date={event.date!}
+                                    image={event.image!}
+                                    title={event.title!}
+                                    status={event.status!}
+                                />
+                            </VerticalTimelineElement>
+                        );
+                })}
+            </VerticalTimeline>
+        </div>
+    );
+}

client/src/app/components/timeline/Mobile/TimelineCard.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Image from "next/image";
+import { TimelineCardType } from "@/app/types/timeline";
+export default function TimelineCard({
+    date,
+    title,
+    status,
+    image,
+}: TimelineCardType) {
+    return (
+        <div className="flex flex-col items-center w-full border-2 border-black rounded-xl">
+            <div className="font-inter w-full h-auto p-4 sm:p-5 text-center grid place-items-center py-5 gap-2 sm:gap-3 text-black z-10 max-w-xs xsm:max-w-sm">
+                <div className="w-full flex justify-center my-4 md:my-0">
+                    <Image
+                        src={image}
+                        alt={title}
+                        width={1000}
+                        height={1000}
+                        className="max-w-[100px] xsm:max-w-[120px] sm:max-w-[150px] md:max-w-[200px] h-auto"
+                    />
+                </div>
+                <p className="font-[500]">{date}</p>
+                <p className="font-[300]">{title}</p>
+                <p className="font-[600] text-[#F12727]">{status}</p>
+            </div>
+        </div>
+    );
+}

client/src/app/components/timeline/Timeline.tsx

@@ -1,38 +1,18 @@
 import React from "react";
-import { timelineEvents } from "@/app/config/Timeline/timeline";
-import TimelineCard from "./TimelineCard";
-import Image from "next/image";
+import Desktop from "./Desktop/Desktop";
+import Mobile from "./Mobile/Mobile";
+
 export default function Timeline() {
     return (
-        <div className="p-20">
-            <h1 className="font-jost font-500 text-[48px] text-[#F12727] ">
+        <div className="p-[1rem] smd:p-0 slg:p-[4rem] lg:p-[4.5rem] xl:p-20 overflow-clip">
+            <h1 className="font-jost smd:ml-10 smd:mt-5 slg:ml-0 slg:mt-0 font-500 text-[48px] text-[#F12727] ">
                 Timeline
             </h1>
-            <div className="grid grid-cols-3 gap-20 max-w-6xl mx-auto mt-20">
-                {timelineEvents.map((event, index) =>
-                    event.date ? (
-                        <TimelineCard key={index} {...event} />
-                    ) : (
-                        <div
-                            key={index}
-                            className="flex flex-col justify-end relative"
-                        >
-                            <Image
-                                src={"/1.png"}
-                                alt="1"
-                                width={1000}
-                                height={200}
-                                className={`z-10 -bottom-[36.8px] absolute scale-x-[1.5] ${
-                                    event.midEnd === "right"
-                                        ? "-left-[7rem] scale-x-[1.25] scale-y-[1.5]"
-                                        : event.midEnd === "left"
-                                        ? "-right-[4.5rem] scale-y-[1.5]"
-                                        : "scale-y-[1.5]"
-                                }`}
-                            />
-                        </div>
-                    )
-                )}
+            <div className="slg:block hidden">
+                <Desktop />
+            </div>
+            <div className="block slg:hidden">
+                <Mobile />
             </div>
         </div>
     );

client/src/app/config/Timeline/timeline.ts → client/src/app/config/content/Timeline/timeline.ts

@@ -27,7 +27,7 @@ export const timelineEvents = [
     },
     {
         date: "Sept 20, 2024",
-        title: "Registration Open for Participants",
+        title: "Registration Open for",
         status: "Participants",
         image: "https://res.cloudinary.com/dmvdbpyqk/image/upload/v1725309320/char3_gembtn.png",
         align: "center",