feat: added helsinki speakers and agenda (#320)

* added speakers list * added helsinki agenda * card radius fix * fix agenda and date * speaker's update * .
asyncapi · May 2, 2024 · 27e84ec · 27e84ec
1 parent ec09af9
commit 27e84ec
Show file tree

Hide file tree

Showing 10 changed files with 205 additions and 16 deletions.
diff --git a/components/Agenda/agenda.js b/components/Agenda/agenda.js
@@ -18,7 +18,7 @@ function Agenda({ city }) {
 		  {city.agenda && <div className='mt-[40px]'>
 			  <Heading
 				  typeStyle='heading-md'
-				  className='countdown-text-gradient text-2xl'
+				  className='text-gradient text-2xl'
 				  level='h3'>
 				  {city.date}
 			  </Heading>
@@ -29,7 +29,7 @@ function Agenda({ city }) {
 							  {talk.time}
 						  </Paragraph>
 						  <div className='flex justify-between lg:flex-col w-[75%] lg:w-full'>
-							  <div className='w-[50%] lg:w-full'>
+							<div className='w-[50%] lg:w-full'>
 							  <Paragraph typeStyle='body-sm' className=''>
 								  {talk.type}
 							  </Paragraph>
@@ -65,7 +65,7 @@ function Agenda({ city }) {
 								  </Paragraph>
 							  </div>
 							  </div>
-									  </div> )
+							</div> )
 							  }
 							  </div>}
 						  </div>

diff --git a/components/Dropdown/dropdown.js b/components/Dropdown/dropdown.js
@@ -7,7 +7,7 @@ function Dropdown({ active, items, setOptions, setOptions2 }) {
 			<div className='w-full'>
 				<button
 					type='button'
-					className='flex justify-between text-white p-4 w-full justify-center gap-x-1.5 rounded-md shadow-sm card-bg hover:bg-gray-50 gradient-bg no-border'
+					className='flex justify-between text-white p-4 w-full justify-center gap-x-1.5 shadow-sm card-bg hover:bg-gray-50 gradient-bg no-border rounded-md'
 					id='menu-button'
 					aria-expanded='true'
 					aria-haspopup='true'

diff --git a/components/Speaker/speaker.js b/components/Speaker/speaker.js
@@ -3,7 +3,7 @@ import React from 'react'
 function Speaker({details, location, className}) {
   return (
 		<div
-			className={`w-auto text-center flex flex-col items-center card-bg h-auto rounded-md p-[27px] ${className}`}
+			className={`w-auto text-center flex flex-col items-center card h-auto rounded-md p-[27px] ${className}`}
 		>
 			<div className='w-[300px] h-[300px] lg:w-[250px] lg:h-[250px]'>
 				<img
@@ -21,10 +21,10 @@ function Speaker({details, location, className}) {
 				>
 					<div>
 						{' '}
-						<p className='mt-[6.6px] text-[20px] text-gray'>{details.title}</p>
+						<p className='mt-[6.6px] text-[18px] text-gray-500'>{details.title}</p>
 					</div>
 					<div>
-						<p className='mt-[6.6px] text-[20px] text-gray'>
+						<p className='mt-[6.6px] text-[20px] text-gradient'>
 							{location?.location}
 						</p>
 					</div>

diff --git a/components/Typography/paragraph.js b/components/Typography/paragraph.js
@@ -1,6 +1,6 @@
 export default function Paragraph({
 	typeStyle = 'body-lg',
-	textColor = 'text-gray-800',
+	textColor = 'text-gray-400',
 	fontWeight,
 	className,
 	children,

diff --git a/components/Venue/venue.js b/components/Venue/venue.js
@@ -6,7 +6,7 @@ function Venue({ className, city }) {
 	return (
 		<Link href={`/venue/${city.name}`}>
 			<div style={{'--image-url': `url(${city.img})`}}
-				className='relative w-[300px] h-[400px] sm:w-[250px] sm:h-[350px] card-bg bg-[image:var(--image-url)] flex items-center justify-center p-4 cursor-pointer'>
+				className='relative w-[300px] h-[400px] sm:w-[250px] sm:h-[350px] card-bg rounded-md bg-[image:var(--image-url)] flex items-center justify-center p-4 cursor-pointer'>
 				<div className='flex justify-between flex-col w-full h-full'>
 					<div className='flex items-center'>
 						{city.cfp? <div className='border text-white text-md rounded-lg p-1 text-center mt-2'>cfp is open</div> :null}

diff --git a/config/city-lists.json b/config/city-lists.json
@@ -2,7 +2,7 @@
 	{
 		"name": "Helsinki",
 		"country": "Finland",
-		"date": "May 28-29 2024",
+		"date": "May 29 2024",
 		"description": "Join us in Helsinki for the AsyncAPI Conference, where we will explore all things AsyncAPI and connect physical and digital worlds. Get excited as we delve into sustainable APIs for the Era of AI, Data Platforms, and Quantum Computing!.",
 		"img": "/img/finland.webp",
 		"address": "Pikku-Finlandia, Helsinki, Karamzininranta 4, 00100 Helsinki, Finland",

diff --git a/config/speakers.json b/config/speakers.json
@@ -7,19 +7,60 @@
 	{
 		"location": "Helsinki, Finland",
 		"city": "Helsinki",
-		"agenda": [],
-		"lists": []
+		"agenda": [
+			{
+				"time": "01:50 PM CEST - 02:15 PM CEST",
+				"session": "Getting Started With Event Driven Architecture & AsyncAPI",
+				"speaker": 1,
+				"type": "Technical Speaker"
+			},
+			{
+				"time": "02:15 PM CEST - 02:40 PM CEST",
+				"session": "Navigating The Jungle of The AsyncAPI Ecosystem",
+				"speaker": 2,
+				"type": "Technical Speaker"
+			},
+			{
+				"time": "02:40 PM CEST - 03:05 PM CEST",
+				"session": "AsyncAPI In Production - The True Potential",
+				"speaker": 3,
+				"type": "Keynote Speaker"
+			},
+			{
+				"time": "03:05 PM CEST - 03:30 PM CEST",
+				"session": "Using Test Containers for AsyncAPI Unit Testing and Mocking",
+				"speaker": 1,
+				"type": "Technical Speaker"
+			}
+		],
+		"lists": [
+			{
+				"name": "Hugo Guerrero",
+				"title": "Developer Advocate at Redhat",
+				"img": "https://avatars.githubusercontent.com/u/1001939?v=4"
+			},
+			{
+				"name": "Jonas Lagoni",
+				"title": "Lead Software Engineer at Postman",
+				"img": "https://pbs.twimg.com/profile_images/1507770710789402630/w4IZfLUZ_400x400.jpg"
+			},
+			{
+				"name": "Lukasz Gornicki",
+				"title": "Executive Director at AsyncAPI Initiative and Developer Relations Manager at Postman",
+				"img": "https://pbs.twimg.com/profile_images/1683523954957328393/W009Rxsj_400x400.jpg"
+			}
+		]
 	},
 	{
 		"location": "London, United Kingdom",
 		"city": "London",
-		"agenda": [],
+		"agenda": null,
 		"lists": []
 	},
 	{
 		"city": "Paris",
 		"location": "Paris, France",
 		"lists": [],
-		"agenda": []
+		"agenda": null
 	}
 ]
diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/index.js b/pages/index.js
@@ -1,8 +1,8 @@
 /* eslint-disable @next/next/no-img-element */
 /* eslint-disable react/no-unescaped-entities */
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Head from 'next/head';
-// import ReactGA from 'react-ga';
+import { useMediaQuery } from 'react-responsive';
 import Header from '../components/Header/header';
 import cities from '../config/city-lists.json';
 import Sponsors from '../components/Sponsors/sponsors';
@@ -11,7 +11,31 @@ import TicketCards from '../components/Cards/ticketCards';
 import Heading from '../components/Typography/heading';
 import Paragraph from '../components/Typography/paragraph';
 import Subcription from '../components/Form/subscription';
+import Speaker from '../components/Speaker/speaker';
+import speakers from '../config/speakers.json';
+import Link from 'next/link';
+import Button from '../components/Buttons/button';
+import Dropdown from '../components/Dropdown/dropdown';
+
 export default function Home() {
+	const isTablet = useMediaQuery({ maxWidth: '1118px' });
+	const [speakersList, setSpeakersList] = useState([]);
+	const [city, setCity] = useState("");
+	speakers[0].lists = [];
+	speakers.map((speaker) => {
+		if (Array.isArray(speaker.lists) && Object.keys(speaker.lists).length > 0) {
+			speakers[0].lists.push(...speaker.lists);
+		}
+	});
+	const list = speakers[0].lists.filter((obj, index) => {
+		return index === speakers[0].lists.findIndex(o => obj.name=== o.name);
+	});
+	speakers[0].lists =[...list];
+
+	useEffect(() => {
+		setCity(speakers[0]);
+		setSpeakersList(speakers[0].lists);
+	},[]);
 	return (
 		<div>
 			<Head>
@@ -26,6 +50,112 @@ export default function Home() {
 			</div>
 			<div id="register" className='container mt-20'>
 			<div className='flex items-center flex-col justify-center'>
+			<div
+			id='speakers'
+			className='relative flex flex-col items-center justify-center'
+			>
+				<div className='text-center'>
+					<div className='flex items-center justify-center'>
+						<div className='w-[40px] h-[3px] bg-blue-400' />
+						<div className='ml-4 text-lg sm:text-sm text-white font-semi-bold'>Speakers</div>
+					</div>
+				</div>
+				<Heading typeStyle='heading-md' className='text-gradient text-center lg:mt-10'>
+				Meet The Speakers
+				</Heading>
+				<div className='max-w-3xl sm:w-full text-center'>
+					<Paragraph typeStyle='body-lg' className="mt-6" textColor='text-gray-200' >
+					Discover the inspiring voices shaping our event, each bringing unique insights and expertise to the forefront of their respective fields.
+					</Paragraph>
+				</div>
+				<div className='lg:py-20 w-[1130px] lg:w-full'>
+						<div className='mt-[64px] '>
+							{isTablet ? (
+								<div className='w-full'>
+									<Dropdown
+									active={city.city}
+									items={speakers}
+									setOptions={setCity}
+									setOptions2={setSpeakersList}
+								/>
+						</div>
+							) : (
+								<div className='flex justify-center'>
+									<div className='w-[900px] lg:w-full flex justify-between'>
+										{speakers.map((speaker) => {
+											return (
+												<div
+												key={speaker.location}
+												onClick={() => {
+													setCity(speaker);
+													setSpeakersList(speaker.lists);
+												}}
+												>
+													<Button
+													className={`w-[168px] ${
+														city.city === speaker.city
+															? 'gradient-bg'
+															: 'border border-gray'
+													}`}
+													overlay={true}
+													>
+													{speaker.city}
+													</Button>
+												</div>
+											);
+										})}
+									</div>
+								</div>
+							)}
+						</div>
+
+						<div className='mt-[64px] pb-[181px]'>
+							{typeof speakersList === 'string' ? (
+								<div className='mt-[140px] flex items-center justify-center text-center'>
+									<div className='w-[720px] lg:w-full'>
+										<Heading className='text-white'>
+											{city.city} Speakers To Be Announced Soon - Stay Tuned!
+										</Heading>
+									</div>
+								</div>
+							) : Object.keys(speakersList).length > 0 ? (
+								<div className='w-full grid grid-cols-3 lg:grid-cols-2 sm:grid-cols-1 gap-4'>
+									{speakersList.map((speaker, i) => {
+										return (
+											<Speaker
+												key={i}
+												details={speaker}
+												location={city}
+												className='mt-10'
+											/>
+										);
+									})}
+								</div>
+							) : (
+								<div className='mt-[140px] flex items-center justify-center text-center'>
+									<div className='w-[720px] lg:w-full'>
+										<Heading typeStyle='heading-md' className='text-white'>
+											{city.city} Speakers Coming Soon - Stay Tuned!
+										</Heading>
+										<Paragraph className='mt-12 text-gray-200'>
+											We are actively accepting speaker applications, and you
+											can start your journey by clicking the button below. Join
+											us on stage and share your valuable insights with our
+											enthusiastic audience!
+										</Paragraph>
+										<Link legacyBehavior href="https://apidays.typeform.com/to/ILJeAaV8?typeform-source=www.apidays.global#event_name=xxxxx">
+										<a target="_blank">
+											<Button className='mt-[80px] w-[244px] border border-gray card-bg'>
+											Apply as a Speaker
+											</Button>
+										</a>
+										</Link>
+									</div>
+								</div>
+							)}
+						</div>
+					</div>
+				</div>
 			<div className='flex items-center'>
 				<div className='w-[40px] h-[3px] bg-blue-400' />
 				<div className='ml-4 text-lg sm:text-sm text-white font-semi-bold'>Tickets</div>

diff --git a/pages/venue/[id].js b/pages/venue/[id].js
@@ -6,6 +6,7 @@ import Heading from '../../components/Typography/heading';
 import Paragraph from '../../components/Typography/paragraph';
 import speakers from '../../config/speakers.json';
 import Sponsors from '../../components/Sponsors/sponsors';
+import Agenda from '../../components/Agenda/agenda';
 
 export async function getStaticProps({ params }) {
 	let res = {};
@@ -61,6 +62,14 @@ function Venue({ city }) {
 					</div>
 				</div>
 			</div>
+			<div
+				id='agenda'
+				className='border border border-x-0 border-b-0 border-t-[#333] py-28 container flex flex-col justify-center items-center '
+			>
+				<div className='w-[1130px] lg:w-full'>
+					<Agenda city={city} />
+				</div>
+			</div>
 			<div
 				id='sponsors'
 			>