Schedule component

src/app/page.tsx

@@ -10,6 +10,7 @@ import SessionTypes from '@components/SessionTypes';
 // import Outcomes from '@components/Outcomes';
 import KeyComponents from '@components/KeyComponents';
 import Partners from '@components/Partners';
+import { Schedule } from '@components/Schedule';
 
 const Outcomes = dynamic(() => import('@components/Outcomes'), { ssr: false });
 const Hackathon = dynamic(() => import('@components/Hackathon'), { ssr: false });
@@ -21,6 +22,7 @@ export default function Page() {
       <Partners />
       <Speakers />
       <SessionTypes />
+      <Schedule />
       <KeyComponents />
       <Hackathon />
       <Outcomes />

src/components/Schedule.jsx

@@ -0,0 +1,93 @@
+'use client';
+import { BookIcon, ClipboardIcon, Clock, HammerIcon, UsersIcon } from 'lucide-react';
+import React, { useState } from 'react';
+import scheduleData from '../data/schedule.json';
+
+const sessionTypes = {
+  keynote: {
+    icon: <BookIcon className="h-5 w-5" />,
+    title: 'Keynote Session',
+  },
+  theory: {
+    icon: <ClipboardIcon className="h-5 w-5" />,
+    title: 'Fundamental Theory',
+  },
+  workshop: {
+    icon: <HammerIcon className="h-5 w-5" />,
+    title: 'Hands-on Workshop',
+  },
+  panel: {
+    icon: <UsersIcon className="h-5 w-5" />,
+    title: 'Panel Discussion',
+  },
+};
+
+export const Schedule = () => {
+
+  const [activeDate, setActiveDate] = useState('July 29');
+
+  return (
+    <section id="schedule" className="mx-auto px-4 md:px-8 max-w-screen-xl py-2 md:py-16 pt-20">
+      <div>
+        <h1 className="text-center md:text-left font-bold text-4xl md:text-6xl tracking-wide leading-tight">
+          <span className="text-white">Schedule</span>
+        </h1>
+      </div>
+      <div className="flex gap-4 md:gap-8 mt-8 justify-start md:justify-around max-w-[90vw] overflow-auto">
+        {Object.keys(scheduleData).map((date, index) => (
+          <div key={date} onClick={() => setActiveDate(date)}>
+            <div className={`ml-2 text-gray-200 text-base md:text-xl font-bold py-2 px-4 bg-gradient-to-l from-gray-900 to-cyan-900 rounded-tl-xl ${activeDate === date ? 'bg-cyan-700' : ''}`}>
+              Day {index + 1}
+            </div>
+            <a href={`#schedule-${date.replace(/ /g, '-')}`} className={`py-3 px-4 w-[170px] text-base md:text-lg tracking-wide inline-block font-semibold text-white ${activeDate === date ? 'bg-[#222]' : ' backdrop-blur-sm bg-black bg-opacity-20'} rounded-tl-lg rounded-bl-lg border-white transition-all duration-300`}>
+              <span className="flex items-center justify-center">{date}</span>
+            </a>
+          </div>
+        ))}
+      </div>
+      <div className="mt-10">
+        {scheduleData[activeDate].map((event, index) => (
+          <div key={index} className="flex">
+            <div className={`flex border-r-2 border-white border-opacity-50 ${event.first ? '' : 'pt-3'} ${event.last ? '' : 'pb-3'}`}>
+              <div className="w-32 md:w-48 items-center justify-between flex rounded-l-lg bg-gradient-to-r backdrop-blur-sm bg-black bg-opacity-20">
+                <div className="ml-2 md:ml-4">
+                  <div className="text-white font-bold text-base md:text-xl">{event.time}</div>
+                  <div className="text-gray-100 text-sm md:text-base">{event.date}</div>
+                </div>
+                <div className="w-2 md:w-4 border-t-2 border-white border-opacity-40"></div>
+              </div>
+            </div>
+            <div className={`backdrop-blur-sm bg-black bg-opacity-20 flex-1 rounded-r-lg ${event.first ? '' : 'mt-3'} ${event.last ? '' : 'mb-3'}`}>
+              <div className="flex py-2 md:py-2 px-1 md:px-2 items-center gap-2 md:gap-4 my-4">
+                <div className="flex flex-col mx-3 md:mx-0 items-center md:items-start text-center md:text-start">
+                  <div className="text-white font-bold text-lg md:text-2xl md:mx-4 my-3">{event.title}</div>
+                  <div className="flex flex-wrap w-full items-center md:items-start justify-center md:justify-start gap-3">
+                    {event.speakers && event.speakers.map((speaker, idx) => (
+                      <div key={idx} className="mt-1 md:mt-2 flex flex-col md:flex-row items-center">
+                        <div className="flex items-center justify-center border-2 rounded-full border-white border-opacity-50 w-20 h-20 mx-4 overflow-hidden">
+                          <img src={speaker.image} alt="img" className="text-5xl" />
+                        </div>
+                        <div className=' flex flex-col items-center md:items-start justify-center'>
+                          <div className="text-white font-semibold text-base md:text-xl">{speaker.name}</div>
+                          <div className="text-gray-100 text-sm md:text-base">{speaker.company}</div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                  <div className=' flex'>
+                    {event.sessionType && (<div className='text-white flex items-center gap-1 bg-gray-800 bg-opacity-60 backdrop-blur-sm w-fit p-2 rounded-2xl ml-4 mt-3 border border-white border-opacity-50 '>
+                      {sessionTypes[event.sessionType].icon} <h3>{sessionTypes[event.sessionType].title}</h3>
+                    </div>)}
+                    {event.duration && (<div className='text-white flex items-center gap-1 bg-gray-800 bg-opacity-60 backdrop-blur-sm w-fit p-2 rounded-2xl ml-4 mt-3 border border-white border-opacity-50 '>
+                      <Clock /> <h3>{event.duration}</h3>
+                    </div>)}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};

src/data/schedule.json

@@ -0,0 +1,256 @@
+{
+  "July 29": [
+    {
+      "time": "08:30 AM IST",
+      "duration": "1h 30m",
+      "date": "July 29",
+      "title": "Overview of Evolution of Web and Web 3.0",
+      "speakers": [
+        {
+          "name": "Laisha Wadhwa",
+          "company": "ML @Lucidity, Ex- Goldman Sachs",
+          "image": "/speakers/laisha_wadhwa.webp"
+        }
+      ],
+      "sessionType": "keynote",
+      "first": true
+    },
+    {
+      "time": "10:30 AM IST",
+      "date": "July 29",
+      "title": "comming soon"
+    },
+    {
+      "time": "01:30 PM IST",
+      "duration": "2h 30m",
+      "date": "July 29",
+      "title": "Building some fun Full Stack System",
+      "speakers": [
+        {
+          "name": "Dr. Rajendra Prasath",
+          "company": "Associate Professor, IIIT Sri City",
+          "image": "/speakers/dr_rajendra_prasath.webp"
+        }
+      ],
+      "sessionType": "workshop"
+    },
+    {
+      "time": "05:00 PM IST",
+      "date": "July 29",
+      "title": "comming soon",
+      "last": true
+    }
+  ],
+  "July 30": [
+    {
+      "time": "08:30 AM IST",
+      "duration": "1h 30m",
+      "date": "July 30",
+      "title": "Fullstack development ecosystem, landscape, snippets",
+      "speakers": [
+        {
+          "name": "Jelena Gjorgjev",
+          "company": "Senior Full-Stack Developer",
+          "image": "/speakers/jelena_gjorgjev.webp"
+        }
+      ],
+      "sessionType": "keynote",
+      "first": true
+    },
+    {
+      "time": "10:30 AM IST",
+      "duration": "2h",
+      "date": "July 30",
+      "title": "System Design of UPI",
+      "speakers": [
+        {
+          "name": "Prashant Kumar",
+          "company": "SDE Juspay, Working on UPI",
+          "image": "/speakers/prashant_kumar.webp"
+        }
+      ],
+      "sessionType": "theory"
+    },
+    {
+      "time": "01:30 PM IST",
+      "date": "July 30",
+      "title": "comming soon"
+    },
+    {
+      "time": "05:00 PM IST",
+      "date": "July 30",
+      "title": "comming soon",
+      "last": true
+    }
+  ],
+  "July 31": [
+    {
+      "time": "08:30 AM IST",
+      "duration": "1h 30m",
+      "date": "July 31",
+      "title": "comming soon",
+      "first": true
+    },
+    {
+      "time": "10:30 AM IST",
+      "date": "July 31",
+      "title": "comming soon"
+    },
+    {
+      "time": "01:30 PM IST",
+      "date": "July 31",
+      "title": "comming soon"
+    },
+    {
+      "time": "05:00 PM IST",
+      "date": "July 31",
+      "title": "comming soon",
+      "last": true
+    }
+  ],
+  "August 01": [
+    {
+      "time": "08:30 AM IST",
+      "duration": "1h 30m",
+      "date": "August 01",
+      "title": "Dapps",
+      "speakers": [
+        {
+          "name": "Dr. Shashidhar",
+          "company": "Lead Researcher, Samsung R&D",
+          "image": "/speakers/dr_shashidhar_r.webp"
+        }
+      ],
+      "sessionType": "keynote",
+      "first": true
+    },
+    {
+      "time": "10:30 AM IST",
+      "duration": "2h",
+      "date": "August 01",
+      "title": "Pranshu Rastogi",
+      "speakers": [
+        {
+          "name": "Pranshu Rastogi",
+          "company": "Head of Ecosystem, Push Protocol",
+          "image": "/speakers/pranshu_rastogi.webp"
+        }
+      ],
+      "sessionType": "theory"
+    },
+    {
+      "time": "01:30 PM IST",
+      "duration": "2h 30m",
+      "date": "August 01",
+      "title": "Building Decentralized Ecommerce Marketplace",
+      "speakers": [
+        {
+          "name": "Sudharsanan Kirubanandhan",
+          "company": "Rust Dev",
+          "image": "/speakers/sudharsanan_kirubanandhan.webp"
+        }
+      ],
+      "sessionType": "workshop"
+    },
+    {
+      "time": "05:00 PM IST",
+      "date": "August 01",
+      "title": "comming soon",
+      "last": true
+    }
+  ],
+  "August 02": [
+    {
+      "time": "08:30 AM IST",
+      "duration": "1h 30m",
+      "date": "August 02",
+      "title": "comming soon",
+      "first": true
+    },
+    {
+      "time": "10:30 AM IST",
+      "duration": "2h",
+      "date": "August 02",
+      "title": "DLT, DeFi, ReFi",
+      "speakers": [
+        {
+          "name": "Jelena Gjorgjev",
+          "company": "Senior Full-Stack Developer",
+          "image": "/speakers/jelena_gjorgjev.webp"
+        }
+      ],
+      "sessionType": "theory"
+    },
+    {
+      "time": "01:30 PM IST",
+      "duration": "2h 30m",
+      "date": "August 02",
+      "title": "Building web3 app stack with web2 skills with okto",
+      "speakers": [
+        {
+          "name": "Dr. Ovia Seshadri",
+          "company": "Head of DevRel at Okto by CoinDCX",
+          "image": "/speakers/dr_ovia_seshadri.webp"
+        }
+      ],
+      "sessionType": "workshop"
+    },
+    {
+      "time": "05:00 PM IST",
+      "date": "August 02",
+      "title": "comming soon",
+      "last": true
+    }
+  ],
+  "August 03": [
+    {
+      "time": "08:30 AM IST",
+      "duration": "1h 30m",
+      "date": "August 03",
+      "title": "Future of Web 3.0",
+      "speakers": [
+        {
+          "name": "Ritesh Kant",
+          "company": "Co-founder and CEO Wow Talkies",
+          "image": "/speakers/ritesh_kant.webp"
+        }
+      ],
+      "sessionType": "keynote",
+      "first": true
+    },
+    {
+      "time": "10:30 AM IST",
+      "duration": "2h",
+      "date": "August 03",
+      "title": "Practical Proj + Solidity Dev, Smart Contracts",
+      "speakers": [
+        {
+          "name": "Zaryab Afsar",
+          "company": "Blockchain Lead, Push Protocol",
+          "image": "/speakers/zaryab_afser.webp"
+        }
+      ],
+      "sessionType": "theory"
+    },
+    {
+      "time": "01:30 PM IST",
+      "duration": "2h 30m",
+      "date": "August 03",
+      "title": "Web 3.0 Security",
+      "speakers": [
+        {
+          "name": "Jozef Jagan",
+          "company": "Wallet Hunter, NIT Calicut",
+          "image": "/speakers/jozef_jagan.webp"
+        }
+      ],
+      "sessionType": "workshop"
+    },
+    {
+      "time": "05:00 PM IST",
+      "date": "August 03",
+      "title": "comming soon",
+      "last": true
+    }
+  ]
+}