Pree

components/NavBar.tsx

@@ -7,7 +7,7 @@ const Links = [
   { href: '/', label: 'Home' },
   { href: '/about', label: 'About' },
   { href: '/committee', label: 'Committee' },
-  { href: '/speakers', label: 'Keynote Speakers' },
+  { href: '/speakers', label: 'Speakers' },
   { href: '/papers', label: 'Call for Papers' },
   { href: '/awards', label: 'Awards' },
   { href: '/registration', label: 'Registration' },

components/SpeakerCard.tsx

@@ -4,14 +4,15 @@ type SpeakerType = {
   id: number
   name: string
   designation: string
+  topic?: string
   imageLink: string
 }
 
 const SpeakerCard = ({ speaker }: { speaker: SpeakerType }) => {
   return (
     <div
       key={speaker.id}
-      className="hover:border-gradient-to-r relative flex w-72 flex-col space-y-3 rounded-3xl border-2 border-transparent bg-white from-purple-500 via-indigo-500 to-blue-500 p-4 shadow-lg transition-all duration-300 hover:-translate-y-3 hover:shadow-2xl"
+      className="hover:border-gradient-to-r relative flex w-72 flex-col space-y-3 rounded-3xl border-2 border-transparent bg-white p-4 shadow-lg transition-all duration-300 hover:-translate-y-3 hover:shadow-2xl"
     >
       {/* Image Section */}
       <div className="relative h-64 w-full overflow-hidden rounded-xl shadow-lg">
@@ -26,10 +27,14 @@ const SpeakerCard = ({ speaker }: { speaker: SpeakerType }) => {
       <div className="text-center">
         <h1 className="text-xl font-semibold text-gray-800">{speaker.name}</h1>
         <h2 className="mt-1 text-sm text-gray-500">{speaker.designation}</h2>
+        {speaker.topic && (
+          <p className="mt-2 text-sm font-medium italic text-gray-600">
+            Topic: {speaker.topic}
+          </p>
+        )}
       </div>
 
-      {/* Hover Effect */}
-      <div className="absolute inset-0 rounded-3xl bg-gradient-to-r from-purple-500 via-indigo-500 to-blue-500 opacity-0 transition-opacity duration-300 hover:opacity-20"></div>
+      {/* Hover Overlay Effect */}
     </div>
   )
 }

components/TimeLine.tsx

@@ -1,6 +1,7 @@
-import { Text, Timeline } from '@mantine/core'
+import { Text, Button, Timeline } from '@mantine/core'
 import { AnnotationIcon } from '@heroicons/react/solid'
 import { useEffect, useState } from 'react'
+
 const data = [
   {
     label: 'Submission of Full-length Manuscript (opens from)',
@@ -27,10 +28,54 @@ const data = [
     label: 'Submission of Camera-ready Manuscript and Copyright Form',
     date: '10th October 2024',
   },
-
   {
     label: 'Pre-Conference Tutorial',
     date: '7th November 2024',
+    venue: 'ISE Department',
+    time: '8:30 AM - 9:30 AM',
+    subEvents: [
+      {
+        track: 'Track 1: AI for All',
+        venue: 'MV Seminar Hall (Dept. of Civil Engg., 3rd Floor)',
+        events: [
+          {
+            time: '9:30 AM - 11:00 AM',
+            speaker: 'Mr. Raj Pagaku',
+            topic: 'Inclusive AI: Shaping the Future for Everyone',
+          },
+          {
+            time: '11:00 AM - 11:30 AM',
+            speaker: 'Tea Break',
+          },
+          {
+            time: '11:30 AM - 1:00 PM',
+            speaker: 'Dr. Nagaraju G',
+            topic: 'AI in Health Care',
+          },
+        ],
+      },
+      {
+        track: 'Track 2: Digital Transformation',
+        venue:
+          'ET Seminar Hall (Dept. of Electronics & Telecom. Engg., Ground Floor)',
+        events: [
+          {
+            time: '9:30 AM - 11:00 AM',
+            speaker: 'Dr. K B Shyam Prasad',
+            topic: 'Accelerate Innovation through Digital Tools',
+          },
+          {
+            time: '11:00 AM - 11:30 AM',
+            speaker: 'Tea Break',
+          },
+          {
+            time: '11:30 AM - 1:00 PM',
+            speaker: 'Mr. Abhi Anand',
+            topic: 'Sustainable AI Applications',
+          },
+        ],
+      },
+    ],
   },
   {
     label: 'Conference Dates',
@@ -54,6 +99,16 @@ export default function CustomTimeLine() {
     return () => window.removeEventListener('scroll', handleScroll)
   }, [])
 
+  const handleDownload = () => {
+    const fileUrl = '/PRE_CONFERENCE.pdf' // Path to your file
+    const element = document.createElement('a')
+    element.href = fileUrl
+    element.download = 'PreConferenceSchedule.pdf' // Specify file name
+    document.body.appendChild(element)
+    element.click()
+    document.body.removeChild(element)
+  }
+
   return (
     <div className={`timeline-container ${isVisible ? 'fade-in' : ''}`}>
       <h1 className="timeline-title">Important Dates</h1>
@@ -79,9 +134,49 @@ export default function CustomTimeLine() {
                 item.date
               )}
             </Text>
+            {item.venue && (
+              <Text size="md" color="gray">
+                Venue: {item.venue} | Time: {item.time}
+              </Text>
+            )}
+            {/* Sub-events for Pre-Conference Tutorial */}
+            {item.subEvents && (
+              <div className="sub-events mt-4">
+                {item.subEvents.map((subEvent, subIndex) => (
+                  <div key={subIndex} className="sub-event mt-4">
+                    <Text size="sm" color="gray" weight={600}>
+                      {subEvent.track} - {subEvent.venue}
+                    </Text>
+                    {subEvent.events.map((event, eventIndex) => (
+                      <div key={eventIndex} className="event mt-2">
+                        <Text size="sm" color="gray">
+                          {event.time}
+                        </Text>
+                        <Text size="sm" color="gray" weight={600}>
+                          {event.speaker}
+                        </Text>
+                        {event.topic && (
+                          <Text size="sm" color="gray">
+                            <span style={{ fontStyle: 'italic' }}>
+                              Topic: {event.topic}
+                            </span>
+                          </Text>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                ))}
+              </div>
+            )}
           </Timeline.Item>
         ))}
       </Timeline>
+      {/* Download Button */}
+      <div className="download-button mt-4">
+        <Button onClick={handleDownload} variant="outline" color="teal">
+          Download Pre-Conference Schedule
+        </Button>
+      </div>
     </div>
   )
 }

pages/speakers.tsx

@@ -5,15 +5,16 @@ type SpeakerType = {
   id: number
   name: string
   designation: string
+  topic?: string
   imageLink: string
 }
 
-const speakerList: SpeakerType[] = [
+const keynoteSpeakers: SpeakerType[] = [
   {
     id: 1,
     name: 'Sri. S S Iyengar',
     designation:
-      'Distinguised University Professor, Florida International University (FIU), Miami',
+      'Distinguished University Professor, Florida International University (FIU), Miami',
     imageLink: './speakers/ss_iyenger.jpeg',
   },
   {
@@ -31,17 +32,59 @@ const speakerList: SpeakerType[] = [
   },
 ]
 
-const speakers = () => {
+const aiForAllSpeakers: SpeakerType[] = [
+  {
+    id: 4,
+    name: 'Mr. Raj Pagaku',
+    designation:
+      'VP Engineering, Security Business Unit, Juniper Networks India Pvt Ltd, Bengaluru, India',
+    topic: 'Inclusive AI: Shaping the Future for Everyone',
+    imageLink:
+      'https://media.licdn.com/dms/image/v2/D5603AQHYe3rt7tTUZA/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1690629699833?e=1735776000&v=beta&t=kILq2XM2fufTdX-vVWqQWYw2E8EJGwS_sSRuuxW5dfs',
+  },
+  {
+    id: 5,
+    name: 'Dr. Nagaraju G',
+    designation:
+      'Director, Ophthalmology, Minto Eye Hospital, BMCRI, Bengaluru',
+    topic: 'AI in Health Care',
+    imageLink:
+      'https://mhbmcri.karnataka.gov.in/storage/pdf-files/DrNagraj.jpg',
+  },
+]
+
+const digitalTransformationSpeakers: SpeakerType[] = [
+  {
+    id: 6,
+    name: 'Dr. K B Shyam Prasad',
+    designation:
+      'Momentive Performance Materials India Pvt Ltd, India Technology Centre, Bengaluru',
+    topic: 'Accelerate Innovation through Digital Tools',
+    imageLink:
+      'https://media.licdn.com/dms/image/v2/C5603AQH8tHEbqXh4dg/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1517713735746?e=1735776000&v=beta&t=PEUeA-D3bFctLoqUEMUQ_8IAL_IlunJ3RPc2rVHb9kI',
+  },
+  {
+    id: 7,
+    name: 'Mr. Abhi Anand',
+    designation:
+      'Director (Financial Services Leader), PwC, Bagmane Tech Park, Bengaluru',
+    topic: 'Sustainable AI Applications',
+    imageLink:
+      'https://media.licdn.com/dms/image/v2/D5603AQHZ1kZTvzQ-tA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1692179908763?e=1735776000&v=beta&t=Rya_Qbez8e9baX4U9ZtaTIalpl8o95Z5xbyI_Gf_Q6Y',
+  },
+]
+
+const Speakers = () => {
   return (
     <div className="min-h-screen bg-white py-10">
+      {/* Keynote Speakers Section */}
       <div className="flex justify-center">
         <h1 className="w-fit rounded-full bg-gradient-to-r from-purple-600 via-indigo-600 to-blue-600 bg-clip-text px-6 py-3 text-4xl font-extrabold text-transparent shadow-lg">
           Keynote Speakers
         </h1>
       </div>
-
       <div className="mt-12 flex flex-wrap justify-center gap-8 py-6 px-4 lg:px-16">
-        {speakerList.map((speaker: SpeakerType) => (
+        {keynoteSpeakers.map((speaker) => (
           <div
             key={speaker.id}
             className="hover:border-gradient-to-r w-full max-w-xs rounded-2xl border-2 border-transparent bg-white bg-clip-border p-6 shadow-lg transition-all hover:scale-105 hover:from-purple-500 hover:via-indigo-500 hover:to-blue-500 hover:shadow-2xl"
@@ -50,8 +93,49 @@ const speakers = () => {
           </div>
         ))}
       </div>
+
+      {/* Pre Conference Speakers Section */}
+      <div className="mt-16 flex justify-center">
+        <h1 className="w-fit rounded-full bg-gradient-to-r from-teal-600 via-green-600 to-yellow-600 bg-clip-text px-6 py-3 text-4xl font-extrabold text-transparent shadow-lg">
+          Pre Conference Speakers
+        </h1>
+      </div>
+
+      {/* AI for All Track */}
+      <div className="mt-12 flex justify-center">
+        <h2 className="w-fit rounded-full bg-gradient-to-r from-purple-600 via-indigo-600 to-blue-600 bg-clip-text px-6 py-3 text-3xl font-extrabold text-transparent shadow-lg">
+          Track 1: AI for All
+        </h2>
+      </div>
+      <div className="mt-8 flex flex-wrap justify-center gap-8 py-6 px-4 lg:px-16">
+        {aiForAllSpeakers.map((speaker) => (
+          <div
+            key={speaker.id}
+            className="hover:border-gradient-to-r w-full max-w-xs rounded-2xl border-2 border-transparent bg-white bg-clip-border p-6 shadow-lg transition-all hover:scale-105 hover:from-purple-500 hover:via-indigo-500 hover:to-blue-500 hover:shadow-2xl"
+          >
+            <SpeakerCard speaker={speaker} />
+          </div>
+        ))}
+      </div>
+
+      {/* Digital Transformation Track */}
+      <div className="mt-16 flex justify-center">
+        <h2 className="w-fit rounded-full bg-gradient-to-r from-pink-600 via-red-600 to-yellow-600 bg-clip-text px-6 py-3 text-3xl font-extrabold text-transparent shadow-lg">
+          Track 2: Digital Transformation
+        </h2>
+      </div>
+      <div className="mt-8 flex flex-wrap justify-center gap-8 py-6 px-4 lg:px-16">
+        {digitalTransformationSpeakers.map((speaker) => (
+          <div
+            key={speaker.id}
+            className="hover:border-gradient-to-r w-full max-w-xs rounded-2xl border-2 border-transparent bg-white bg-clip-border p-6 shadow-lg transition-all hover:scale-105 hover:from-pink-500 hover:via-red-500 hover:to-yellow-500 hover:shadow-2xl"
+          >
+            <SpeakerCard speaker={speaker} />
+          </div>
+        ))}
+      </div>
     </div>
   )
 }
 
-export default speakers
+export default Speakers

styles/globals.css

@@ -259,3 +259,10 @@
 .animated-date span:nth-child(23) {
   animation-delay: 5.2s;
 }
+.download-button {
+  margin-top: 20px;
+}
+
+html {
+  scroll-behavior: smooth;
+}