Added agenda page

nairobi-gophers · Sep 11, 2024 · a69d290 · a69d290
1 parent fa8f871
commit a69d290
Show file tree

Hide file tree

Showing 21 changed files with 169 additions and 99 deletions.
diff --git a/frontend/src/components/Agenda.tsx b/frontend/src/components/Agenda.tsx
@@ -0,0 +1,43 @@
+
+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>
+  )
+}
+
+export default Sessions
diff --git a/frontend/src/components/CallForSpeakers.tsx b/frontend/src/components/CallForSpeakers.tsx
@@ -4,7 +4,7 @@ export default function CallForSpeakers() {
   return (
     <section
       id="speakers"
-      className="container mx-auto bg-accent flex flex-col lg:flex-row lg:px-6 h-fit  lg:h-[50vh]"
+      className="container mx-auto bg-accent flex flex-col lg:flex-row lg:px-6 h-fit lg:h-[50vh]"
     >
       <div className="md:w-1/2 flex justify-center items-center">
         <img

diff --git a/frontend/src/components/ConnectWithUs.tsx b/frontend/src/components/ConnectWithUs.tsx
@@ -3,7 +3,7 @@ import xLogo from "../assets/xLogo.png";
 
 export default function ConnectWithUs() {
   return (
-    <section className={"container mx-auto bg-accent lg:h-[50vh] text-secondary flex flex-col justify-center text-center p-6"} id='contact'>
+    <section className={"container mx-auto bg-accent py-8 lg:py-16 text-secondary flex flex-col justify-center text-center mt-16"} id='contact'>
       <div className="lg:w-[700px] px-6 mx-auto">
         <h2 className={"text-5xl  md:text-3xl font-bold text-secondary mb-3"}>
           Connect With Us

diff --git a/frontend/src/components/GopherconForAll.tsx b/frontend/src/components/GopherconForAll.tsx
@@ -8,25 +8,15 @@ export default function GopherconForAll() {
     >
       <div className={"text-center md:w-1/2 p-6 md:text-left flex flex-col lg:justify-center md:ml-24 "}>
         <h2 className={"text-5xl  md:text-3xl font-bold text-secondary mb-3 text-wrap"}>
-          #gophercon for all
+          GopherCon Africa 2024 Ticket Scholarships
         </h2>
 
         <div className={"text-justify lg:max-w-[500px] text-secondary text-sm mb-6"}>
-          We are committed to ensuring everyone has the opportunity to join us for gophercon.
-          Inline with this we have introduced two new ways  to purchase tickets.
-
-          <br />
-          <br />
-          <b>Sponsored Tickets: </b>This allows for anyone in our gopher community to sponsor our fellow gophers for the event.
-          <br />
-          <b>Lipa pole pole: </b>This allows you to pay for your ticket in installments
-
-          <br />
-          <br />
-          For more info, kindly contact us at <b>[email protected]</b>
+          <p>We are committed to ensuring that everyone has the opportunity to attend GopherCon Africa. To support this, GoBridge has pledged to sponsor tickets for underrepresented and diverse Go enthusiasts.</p>
+          <p className="mt-4 font-semibold">Apply with the link below</p>
         </div>
 
-        <a href={"mailto:[email protected]"} target={"_blank"} className="button w-fit mx-auto lg:m-0">Contact Us</a>
+        <a href="https://forms.gle/13Csm1tFv5iRPvMX6" target={"_blank"} className="button w-fit mx-auto px-8 lg:m-0">Apply For GopherCon Africa 2024 Ticket Scholarships</a>
       </div>
 
       <div className="md:w-1/2 flex justify-center items-center p-6">

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
@@ -97,6 +97,12 @@ const Navbar: React.FC = () => {
                 >
                     Home
                 </NavLink>
+                <NavLink
+                    to="/agenda"
+                    className={({ isActive }) => `border-b-2 p-3 ${isActive ? 'border-secondary' : 'border-white'}`}
+                >
+                    Agenda
+                </NavLink>
                 <NavLink
                     to="/speakers"
                     className={({ isActive }) => `border-b-2 p-3 ${isActive ? 'border-secondary' : 'border-white'}`}

diff --git a/frontend/src/components/Socials.tsx b/frontend/src/components/Socials.tsx
@@ -4,15 +4,14 @@ export default function Socials() {
     return (
         <section
             id="sponsors"
-            className="container mx-auto px-6 py-12 md:py-24 flex flex-col items-center text-center text-secondary mt-20"
+            className="container mx-auto px-6 py-12 md:py-24 flex flex-col items-center text-center text-secondary"
         >
             <Navbar />
             <h2 className="text-3xl md:text-5xl font-bold mt-8 mb-6">
                 Socials
             </h2>
-            <p className="max-w-lg mb-8 text-sm md:text-base">
+            <p className="w-[60%] mb-8 text-sm md:text-base">
                 GopherCon Africa offers abundant networking prospects for you to connect with fellow Go developers, renowned speakers, and our esteemed event sponsors throughout the conference. Embrace numerous opportunities to foster meaningful connections and engage in valuable exchanges within the vibrant Go community.            </p>
-
         </section>
     );
 }
diff --git a/frontend/src/components/Speakers.tsx b/frontend/src/components/Speakers.tsx
@@ -20,19 +20,19 @@ export default function Speakers() {
       {speakers.length > 0 ?
         <>
           <h2 className="text-3xl md:text-5xl font-bold mt-8 mb-6">
-            Our Event Speakers
+            Speakers
           </h2>
           <p className="max-w-lg mb-8 text-sm md:text-base">
             GopherCon Africa features global speakers who deliver cutting-edge content on Go programming and related technologies to keep attendees at the forefront of the field.
           </p>
 
-          <div className="p-6 max-w-lg mx-auto ">
-            <div className="flex items-center justify-between mt-20">
-              <div>
-                <h2 className="text-2xl font-bold text-black">Our Speakers List</h2>
-              </div>
-            </div>
-          </div>
+          {/*<div className="p-6 max-w-lg mx-auto ">*/}
+          {/*  <div className="flex items-center justify-between mt-20">*/}
+          {/*    <div>*/}
+          {/*      <h2 className="text-2xl font-bold text-black">Our Speakers List</h2>*/}
+          {/*    </div>*/}
+          {/*  </div>*/}
+          {/*</div>*/}
 
           <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 gap-6 p-4 sm:p-6">
             {speakers.map((speaker, index) => (

diff --git a/frontend/src/components/SponsorBtn.tsx b/frontend/src/components/SponsorBtn.tsx
@@ -0,0 +1,12 @@
+export const SponsorBtn = (props: {btnTitle: string}) => {
+  return (
+      <div className="my-14">
+          <a
+              className="button w-full md:w-auto px-8"
+              href="mailto:[email protected]?subject=GopherCon%20Africa%20Sponsorship"
+          >
+              {props.btnTitle}
+          </a>
+      </div>
+  )
+}
diff --git a/frontend/src/components/Sponsors.tsx b/frontend/src/components/Sponsors.tsx
@@ -1,21 +1,23 @@
 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";
 
 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 mt-20"
+      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">
-        Our Event Sponsors
+        Sponsors
       </h2>
-      <p className="max-w-lg mb-8 text-sm md:text-base">
-        Don't miss this chance to supercharge your brand and tap into the vibrant energy of Nairobi's Go programming community. Connect with over 100 senior Go developers and contact us today to explore more sponsorship opportunities. Join us in creating an unforgettable event!
+      <p className="mb-4 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>
 
-      <div className="flex flex-col md:flex-row gap-4 md-6">
+      <div className="flex flex-col md:flex-row gap-4 my-4">
         <a
           className="button w-full md:w-auto mb-4 md:mb-0"
           href="/sponsorship"
@@ -31,20 +33,19 @@ export default function Sponsors() {
           Become a Sponsor
         </a>
       </div>
-      <div className="p-6 max-w-lg mx-auto ">
-        <div className="flex items-center justify-between mt-20">
-          <div>
-            <h2 className="text-2xl font-bold text-black">Our Sponsors</h2>
-          </div>
-        </div>
+      <div className="mt-8">
+        <SponsorshipHeader title='Platinum Sponsor' />
+        <SponsorBtn btnTitle='Become our Platinum Sponsor' />
+        <SponsorshipHeader title='Gold Sponsor'/>
+        <GoogleSponsor/>
+        <SponsorshipHeader title='Silver Sponsor'/>
+        <SponsorBtn btnTitle='Become our Silver Sponsor' />
+        <SponsorshipHeader title='Bronze Sponsor'/>
+        <APItoolkitSponsor/>
+        <PartnaSponsor/>
+        {/*<SponsorshipHeader title='Ticket Sponsor' />*/}
+        {/*<SponsorshipHeader title='Venue Sponsor' />*/}
       </div>
-      <div className="mt-20">
-      </div>
-      <GoogleSponsor/>
-      <APItoolkitSponsor/>
-      <PartnaSponsor/>
-
-
     </section>
   );
 }
diff --git a/frontend/src/components/SponsorshipHeader.tsx b/frontend/src/components/SponsorshipHeader.tsx
@@ -0,0 +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>
+  )
+}
+
+export default SponsorshipHeader
diff --git a/frontend/src/components/Ticket.tsx b/frontend/src/components/Ticket.tsx
@@ -4,7 +4,7 @@ function SponsorCard(props: { title: string, price: string, body: string, isPopu
   const { title, price, body, isPopular, link } = props;
 
   return (
-    <div className={`p-6 rounded-lg  border text-center flex flex-col gap-6 h-[350px] justify-center relative ${isPopular ? ` bg-primary text-white border-white` : ' border-secondary mt-6 '}`}>
+    <div className={`p-6 rounded-lg  border text-center flex flex-col gap-6 h-[350px] justify-center relative ${isPopular ? ` bg-primary text-white border-white` : ' border-secondary mt-6'}`}>
       {isPopular ? <div className="bg-white text-primary px-2 py-1 w-fit text-xs absolute top-3 left-3 rounded-3xl font-semibold">Popular</div> : null}
       <h3 className="text-lg">{title}</h3>
       <p className="font-bold text-3xl">{price}</p>
@@ -23,31 +23,30 @@ const Ticket = () => {
   return (
     <section
       id="tickets"
-      className="text-secondary container mx-auto p-6 my-3 flex flex-col justify-center gap-3 md:gap-16"
+      className="text-secondary container mx-auto flex flex-col justify-center gap-3 md:gap-16"
     >
-      <div className="w-fit mx-auto text-center">
-        <h2 className="text-5xl  md:text-3xl font-bold text-secondary ">Tickets</h2>
-        <p>Get your  early bird tickets today!</p>
+      <div className="w-fit mx-auto mt-12 text-center">
+        <p className="text-xl font-semibold">Get your tickets today!</p>
       </div>
 
       <div className="flex flex-col lg:flex-row gap-6 justify-center">
         <SponsorCard
           title="Student Ticket"
-          price="1000 KSH"
+          price="2,000 KSH"
           body='In a bid to encourage students we have a package specific for you.'
           link='https://paystack.com/buy/student-ticket-qvbzec'
           isPopular={false}
         />
         <SponsorCard
           title="Regular Ticket"
-          price="2000 KSH"
+          price="5,000 KSH"
           body='This package is for our veteran gophers who want to join us for our 2 day thrilling Gophercon event'
           link='https://paystack.com/buy/regular-ticket-pjeyye'
           isPopular={true}
         />
         <SponsorCard
           title="Corporate Ticket"
-          price="3500 KSH"
+          price="7,500 KSH"
           body='This conference ticket is designated for Corporate Gophers and is available for purchase as a single ticket or in groups of five.'
           link='https://paystack.com/buy/corporate-ticket-znbmom'
           isPopular={false}
@@ -56,14 +55,14 @@ const Ticket = () => {
       <div className="flex flex-col lg:flex-row gap-6 justify-center">
         <SponsorCard
           title="Group of 5"
-          price="8500 KSH"
+          price="21,250 KSH"
           body='This package is for a group of five people who want to join us for our 2 day thrilling Gophercon event.'
           link='https://paystack.com/buy/group-of-five-15-off-wjvosb'
           isPopular={false}
         />
       </div>
 
-      <p className="bg-[#FFF4E5] text-[#663C00] lg:w-[700px] mx-auto p-6 text-sm rounded text-justify">
+      <p className="bg-[#FFF4E5] text-[#663C00] lg:w-[700px] mx-auto p-6 my-8 text-sm rounded text-justify">
         All student must present a student identification card at the conference during check-in
         Our refund policy is up to 45 days prior to the event. Kindly note that transactions fees are not refundable.
       </p>

diff --git a/frontend/src/components/TicketsHome.tsx b/frontend/src/components/TicketsHome.tsx
@@ -4,17 +4,15 @@ export default function TicketHome() {
   return (
     <section
       id="sponsors"
-      className="container mx-auto px-6 py-12 md:py-24 flex flex-col items-center text-center text-secondary mt-20"
+      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">
-        Our Tickets
+        Tickets
       </h2>
-      <p className="max-w-lg mb-8 text-sm md:text-base">
+      <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>
 
       <Ticket />
-
-
     </section>
   );
 }
diff --git a/frontend/src/components/TravelInfoIntro.tsx b/frontend/src/components/TravelInfoIntro.tsx
@@ -4,7 +4,7 @@ export default function TravelInfoIntro() {
   return (
     <section
       id="travel-info"
-      className="container mx-auto flex flex-col lg:flex-row lg:px-6 h-fit lg:h-[50vh]"
+      className="container mx-auto flex flex-col lg:flex-row lg:px-6 h-fit"
     >
       <div className="md:w-1/2 flex justify-center items-center">
         <img

diff --git a/frontend/src/components/sponsors/APItoolkitSponsors.tsx b/frontend/src/components/sponsors/APItoolkitSponsors.tsx
@@ -4,7 +4,7 @@ import apitoolkit from "../../assets/APItoolkit-01.png";
 
 const APItoolkitSponsor: React.FC = () => {
   return (
-    <div className="border-2 rounded-lg border-black p-4 mt-4 relative">
+    <div className="rounded-lg p-4 mt-4 relative">
       <div className="flex flex-col md:flex-row md:items-center md:justify-center">
         <img
           src={apitoolkit}

diff --git a/frontend/src/components/sponsors/GoogleSponsor.tsx b/frontend/src/components/sponsors/GoogleSponsor.tsx
@@ -4,7 +4,7 @@ import googleImageUrl from "../../assets/google.png";
 
 const GoogleSponsor: React.FC = () => {
   return (
-    <div className="border-2 rounded-lg border-black p-4 mt-4 relative">
+    <div className="rounded-lg p-4 mt-4 relative">
       <div className="flex flex-col md:flex-row md:items-center md:justify-center">
         <img
           src={googleImageUrl}

diff --git a/frontend/src/components/sponsors/PartnaSponsors.tsx b/frontend/src/components/sponsors/PartnaSponsors.tsx
@@ -4,7 +4,7 @@ import partna from "../../assets/wordmark_primary.svg";
 
 const PartnaSponsor: React.FC = () => {
   return (
-    <div className="border-2 rounded-lg border-black p-4 mt-4 relative">
+    <div className="rounded-lg p-4 mt-4 relative">
       <div className="flex flex-col md:flex-row md:items-center md:justify-center">  
         <img
           src={partna}

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -5,12 +5,12 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Home from "./pages/Home.tsx";
 import Error from "./pages/Error.tsx";
 import SponsorshipRedirect from './pages/SponsorshipRedirect';
-import Sponsors from './components/Sponsors.tsx';
 import Sponsorship from './pages/Sponsorship.tsx';
 import SpeakersList from './pages/SpeakersList.tsx';
 import TicketList from './pages/TicketsList.tsx';
 import SocialsList from './pages/SocialsList.tsx';
 import TravelInfo from "./pages/TravelInfo.tsx";
+import Agenda from "./pages/Agenda.tsx";
 
 
 const router = createBrowserRouter([
@@ -24,12 +24,12 @@ const router = createBrowserRouter([
     element: <SponsorshipRedirect />,
   },
   {
-    path: "/sponsors",
-    element: <Sponsorship />,
+    path: "/agenda",
+    element: <Agenda />,
   },
   {
     path: "/sponsors",
-    element: <Sponsors />,
+    element: <Sponsorship />,
   },
   {
     path: "/speakers",