Added Agenda

frontend/src/components/Agenda.tsx

@@ -1,43 +1,64 @@
+import { useEffect, useState } from "react";
+import SessionsList from "../utils/sessions.ts";
+import SessionCard, {ISession} from "./SessionCard.tsx";
 
 const Sessions = () => {
-    // const [activeNav, setActiveNav] = useState<string>('all')
-  return (
-      <section
-          id="sponsors"
-          className="container mx-auto px-6 py-12 md:py-24 flex flex-col items-center text-center text-secondary"
-      >
-          <h2 className="text-3xl md:text-5xl font-bold mt-8 mb-6">
-              Coming Soon
-          </h2>
-          {/*<div className="w-full lg:w-[80%] mt-8">*/}
-          {/*    <div className="border border-b-2 border-l-0 border-r-0 border-t-0">*/}
-          {/*        <ul className="flex space-x-8 cursor-pointer">*/}
-          {/*            <li onClick={() => setActiveNav('all')} className={`${activeNav == 'all' ? 'border border-b-4 border-l-0 border-r-0 border-t-0 border-blue-600' : ''} px-2`}>All Days</li>*/}
-          {/*            <li onClick={() => setActiveNav('18th')} className={`${activeNav == '18th' ? 'border border-b-4 border-l-0 border-r-0 border-t-0 border-blue-600' : ''} px-2`}>Fri Oct 18th</li>*/}
-          {/*            <li onClick={() => setActiveNav('19th')} className={`${activeNav == '19th' ? 'border border-b-4 border-l-0 border-r-0 border-t-0 border-blue-600' : ''} px-2`}>Sat Oct 19th</li>*/}
-          {/*        </ul>*/}
-          {/*    </div>*/}
-          {/*    <div>*/}
-          {/*        <div className="border w-full flex text-left space-x-4">*/}
-          {/*            <button className="px-4 py-2 bg-blue-700">*/}
-          {/*                9:00 AM*/}
-          {/*            </button>*/}
-          {/*            <div>*/}
-          {/*                <p>9:00 AM - 10:00 AM EAT / Fri Oct 18th</p>*/}
-          {/*                <p>GopherCon Demo Talk</p>*/}
-          {/*                <p>Location</p>*/}
-          {/*                <div>*/}
-          {/*                    demo demo*/}
-          {/*                </div>*/}
-          {/*                <p>Level</p>*/}
-          {/*                <div>*/}
-          {/*                </div>*/}
-          {/*            </div>*/}
-          {/*        </div>*/}
-          {/*    </div>*/}
-          {/*</div>*/}
-      </section>
-  )
+    const [activeDay, setActiveDay] = useState<string>('all')
+    const [activeSessions, setActiveSessions] = useState<Array<ISession>>([])
+    useEffect(() => {
+        let sessions = SessionsList()
+        if (activeDay != 'all') {
+            sessions = sessions.filter(item => item.day == activeDay)
+        }
+        setActiveSessions(sessions)
+    }, [activeDay]);
+
+
+    return (
+        <section
+            id="sponsors"
+            className="container mx-auto px-6 py-12 md:py-24 flex flex-col items-center text-center text-secondary"
+        >
+            <h2 className="text-3xl md:text-5xl font-bold mt-8 mb-6">
+                GopherCon Africa Agenda
+            </h2>
+            <div className="w-full lg:w-[80%] mt-8">
+                <div className="border border-b-2 border-l-0 border-r-0 border-t-0 overscroll-contain">
+                    <ul className="flex space-x-4 cursor-pointer">
+                        <li onClick={() => setActiveDay('all')} className={`${activeDay == 'all' ? 'border border-b-4 border-l-0 border-r-0 border-t-0 border-blue-600' : ''} px-2`}>All Days</li>
+                        <li onClick={() => setActiveDay('18th')} className={`${activeDay == '18th' ? 'border border-b-4 border-l-0 border-r-0 border-t-0 border-blue-600' : ''} px-2`}>Fri Oct 18th</li>
+                        <li onClick={() => setActiveDay('19th')} className={`${activeDay == '19th' ? 'border border-b-4 border-l-0 border-r-0 border-t-0 border-blue-600' : ''} px-2`}>Sat Oct 19th</li>
+                    </ul>
+                </div>
+                <div className="my-8">
+                    {(activeDay == 'all' || activeDay == '18th') && <div className="mt-8">
+                        <p className="text-left text-lg font-semibold">Fri Oct 18</p>
+                        {
+                            activeSessions.map(session => {
+                                if (session.day == '18th') {
+                                    return (
+                                        <SessionCard session={session} />
+                                    )
+                                }
+                            })
+                        }
+                    </div>}
+                    {(activeDay == 'all' || activeDay == '19th') && <div className="mt-8">
+                        <p className="text-left text-lg font-semibold">Fri Oct 19</p>
+                        {
+                            activeSessions.map(session => {
+                                if (session.day == '19th') {
+                                    return (
+                                        <SessionCard session={session} />
+                                    )
+                                }
+                            })
+                        }
+                    </div>}
+                </div>
+            </div>
+        </section>
+    )
 }
 
 export default Sessions

frontend/src/components/SessionCard.tsx

@@ -0,0 +1,65 @@
+import {LocationIcon} from "./icons/Location.tsx";
+import SpeakerImagePH from "../assets/speakers/placeholder.png";
+
+export interface ISession {
+    startTime: string
+    date: string
+    duration: string
+    title: string
+    room: string
+    description: string
+    level: string
+    image?: string
+    name: string
+    role: string
+    company: string
+    titleDescription: string
+    day: string
+}
+
+interface IProps {
+    session: ISession
+}
+const SessionCard = (props: IProps) => {
+  return (
+      <div className={`w-full lg:flex text-left my-4 flex-1 lg:space-x-4`}>
+          <div className="py-4 w-20 text-center">
+              <div className="bg-blue-700 text-white rounded p-2">
+                  {props.session.startTime}
+              </div>
+          </div>
+          <div className="border flex-1 p-4">
+              <p className="font-semibold text-gray-600 tracking-wider">{props.session.date} <span
+                  className="text-gray-400">({props.session.duration})</span></p>
+              <p className="font-semibold text-gray-800 text-lg lg:text-xl my-1 tracking-wide">{props.session.title}</p>
+              <div className="flex justify-start items-center">
+                  <LocationIcon/><p className="text-gray-500 text-sm">{props.session.room}</p></div>
+              {props.session.name.length > 3 && <div>
+                  <div className="my-1 text-gray-800 ml-4 mt-2">
+                      <p className="text-lg text-gray-700 font-semibold">Description</p>
+                      <div className="ml-2 text-gray-600" dangerouslySetInnerHTML={{ __html: props.session.description }} />
+                  </div>
+                  <div className="my-2">
+                      <p className="text-gray-800 "><span
+                          className="font-semibold text-sm text-gray-800">Talk/Attendee Level:</span> {props.session.level}
+                      </p>
+                  </div>
+                  <div className="mt-2">
+                      <div className="flex justify-start space-x-1 items-center">
+                          <div className="p-4">
+                          <img className="w-16" src={props.session.image ?? SpeakerImagePH} alt=""/>
+                          </div>
+                          <div className="font-normal">
+                          <p className="font-semibold">{props.session.name}</p>
+                              <p>{props.session.role} {props.session.company}</p>
+                          </div>
+                      </div>
+                      <p>{props.session.titleDescription}</p>
+                  </div>
+              </div>}
+          </div>
+      </div>
+  )
+}
+
+export default SessionCard

frontend/src/components/Sponsors.tsx

@@ -2,18 +2,18 @@ import APItoolkitSponsor from "./sponsors/APItoolkitSponsors";
 import GoogleSponsor from "./sponsors/GoogleSponsor";
 import PartnaSponsor from "./sponsors/PartnaSponsors";
 import SponsorshipHeader from "./SponsorshipHeader.tsx";
-import {SponsorBtn} from "./SponsorBtn.tsx";
+import { SponsorBtn } from "./SponsorBtn.tsx";
 
 export default function Sponsors() {
   return (
     <section
       id="sponsors"
-      className="container mx-auto px-6 py-12 md:py-24 flex flex-col items-center text-center text-secondary"
+      className="container mx-auto py-12 md:py-24 flex flex-col items-center text-center text-secondary"
     >
       <h2 className="text-3xl md:text-5xl font-bold mt-8 mb-6">
         Sponsors
       </h2>
-      <p className="mb-4 w-[60%] text-sm md:text-base">
+      <p className="mb-4 w-full lg:w-[60%] text-sm md:text-base">
         From the seas and mountains to the savannahs of Africa, we invite you to connect with the dynamic Go community in Africa and around the world. Don’t miss this chance to engage with a vibrant and growing network. We welcome your sponsorship and support!
       </p>
 
@@ -36,13 +36,13 @@ export default function Sponsors() {
       <div className="mt-8">
         <SponsorshipHeader title='Platinum Sponsor' />
         <SponsorBtn btnTitle='Become our Platinum Sponsor' />
-        <SponsorshipHeader title='Gold Sponsor'/>
-        <GoogleSponsor/>
-        <SponsorshipHeader title='Silver Sponsor'/>
+        <SponsorshipHeader title='Gold Sponsor' />
+        <GoogleSponsor />
+        <SponsorshipHeader title='Silver Sponsor' />
         <SponsorBtn btnTitle='Become our Silver Sponsor' />
-        <SponsorshipHeader title='Bronze Sponsor'/>
-        <APItoolkitSponsor/>
-        <PartnaSponsor/>
+        <SponsorshipHeader title='Bronze Sponsor' />
+        <APItoolkitSponsor />
+        <PartnaSponsor />
         {/*<SponsorshipHeader title='Ticket Sponsor' />*/}
         {/*<SponsorshipHeader title='Venue Sponsor' />*/}
       </div>

frontend/src/components/SponsorshipHeader.tsx

@@ -1,9 +1,9 @@
-const SponsorshipHeader = (props: {title: string}) => {
-  return (
-      <div className="py-4 bg-blue-400 text-white font-semibold tracking-wider text-lg">
-          <p>{ props.title}</p>
-      </div>
-  )
+const SponsorshipHeader = (props: { title: string }) => {
+      return (
+            <div className="w-full py-4 bg-blue-400 text-white font-semibold tracking-wider text-lg">
+                  <p>{props.title}</p>
+            </div>
+      )
 }
 
 export default SponsorshipHeader

frontend/src/components/Ticket.tsx

@@ -29,7 +29,7 @@ const Ticket = () => {
         <p className="text-xl font-semibold">Get your tickets today!</p>
       </div>
 
-      <div className="flex flex-col lg:flex-row gap-6 justify-center">
+      <div className="mx-4 flex flex-col lg:flex-row gap-6 justify-center">
         <SponsorCard
           title="Student Ticket"
           price="2,000 KSH"
@@ -52,7 +52,7 @@ const Ticket = () => {
           isPopular={false}
         />
       </div>
-      <div className="flex flex-col lg:flex-row gap-6 justify-center">
+      <div className="mx-4 flex flex-col lg:flex-row gap-6 justify-center">
         <SponsorCard
           title="Group of 5"
           price="21,250 KSH"

frontend/src/components/TicketsHome.tsx

@@ -9,8 +9,8 @@ export default function TicketHome() {
       <h2 className="text-3xl md:text-5xl font-bold mt-8 mb-6">
         Tickets
       </h2>
-      <p className="w-[60%] mb-8 text-sm md:text-base">
-      Buy your tickets to GopherCon Africa 2024 and join hundreds of leading developers from across the Go community for 2 days of talks, networking and socials.      </p>
+      <p className="w-full lg:w-[60%] mb-8 text-sm md:text-base">
+        Buy your tickets to GopherCon Africa 2024 and join hundreds of leading developers from across the Go community for 2 days of talks, networking and socials.      </p>
 
       <Ticket />
     </section>

frontend/src/components/icons/Location.tsx

@@ -0,0 +1,11 @@
+export const LocationIcon = () => {
+  return (
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor"
+           className="size-6">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
+          <path strokeLinecap="round" strokeLinejoin="round"
+                d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"/>
+      </svg>
+
+  )
+}

frontend/src/pages/TravelInfo.tsx

@@ -49,7 +49,7 @@ function VisaInfo() {
           Visa applications in Kenya are done online through the
           {' '}
           <a href={'https://www.ecitizen.go.ke'} target='_blank'
-             className={'font-bold underline'}>ecitizen</a>
+            className={'font-bold underline'}>ecitizen</a>
           {' '}
           website, which is the official service portal for the Kenyan
           Government.
@@ -61,7 +61,7 @@ function VisaInfo() {
         </p>
 
         <a href={'https://immigration.ecitizen.go.ke/index.php?id=5'} target='_blank'
-           className="button w-fit mx-auto lg:m-0">Visa Process</a>
+          className="button w-fit mx-auto lg:m-0">Visa Process</a>
 
       </div>
 
@@ -81,15 +81,15 @@ function VisaInfo() {
 const TravelInfo: React.FC = () => {
   return (
     <div className="text-sm id" id='sponsorship'>
-      <Navbar/>
+      <Navbar />
       <div
-          className={"container mx-auto md:w-1/2 p-6 md:text-left flex flex-col lg:mt-[104px]"}>
+        className={"container mx-auto md:w-1/2 p-6 md:text-left flex flex-col lg:mt-[104px]"}>
         <h2 className="text-3xl md:text-5xl font-bold mb-6 text-center">
           Travel Info
         </h2>
 
         <p
-            className={"w-[70%] mx-auto text-secondary text-sm mb-6 text-justify lg:text-center"}>
+          className={"w-full lg:w-[70%] mx-auto text-secondary text-sm mb-6 text-justify lg:text-center"}>
           We're thrilled that you've decided to join us for GopherCon
           Africa
           2024!
@@ -106,11 +106,11 @@ const TravelInfo: React.FC = () => {
         </p>
       </div>
 
-      <AccommodationInfo/>
-      <VisaInfo/>
-      <Footer/>
+      <AccommodationInfo />
+      <VisaInfo />
+      <Footer />
     </div>
-    );
+  );
 };
 
 export default TravelInfo;