update

asyncapi · Sep 26, 2023 · c0514cc · c0514cc
2 parents 2eaa456 + fa25c2d
commit c0514cc
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 63 deletions.
diff --git a/components/Agenda/agenda.js b/components/Agenda/agenda.js
@@ -3,7 +3,6 @@ import Heading from '../Typography/heading'
 import Paragraph from '../Typography/paragraph'
 
 function Agenda({ city }) {
-	console.log(city)
   return (
 	  <div className=''>
 		  <div className='flex flex-col justify-center items-center'>
@@ -53,7 +52,25 @@ function Agenda({ city }) {
 									  {city.speakers[talk.speaker-1].title}
 								  </Paragraph>
 							  </div>
-						  </div> : <div></div>}
+							  </div> : <div></div>}
+							  {talk.speaker && typeof talk.speaker === 'object' && <div className='flex flex-col'>
+								  {talk.speaker.map((speak, i) => <div key={i} className='mt-6'>
+										  <div className='flex items-center lg:mt-4'>
+										  <div className='w-[94px] h-[94px]'>
+											  <img src={city.speakers[speak - 1].img} alt={city.speakers[speak - 1].name} className='object-cover rounded-full  w-full h-full' />
+										  </div>
+										  <div className='ml-4 w-[300px] sm:w-[250px]'>
+								  <Heading typeStyle='heading-sm-semibold' className='text-white'>
+									  {city.speakers[speak-1].name}
+								  </Heading>
+								  <Paragraph typeStyle='body-sm' className="mt-2">
+									  {city.speakers[speak-1].title}
+								  </Paragraph>
+							  </div>
+							  </div>
+									  </div> )
+							  }
+							  </div>}
 						  </div>
 					  </div>
 				})}

diff --git a/components/Countdown/countdown.js b/components/Countdown/countdown.js
@@ -4,7 +4,7 @@ import Countdown from 'react-countdown';
 const dates = [
 	{
 		name: 'London, UK',
-		date: 'September 26, 2023',
+		date: 'September 20, 2023',
 	},
 	{
 		name: 'Madrid, Spain',
@@ -44,7 +44,21 @@ function Countdowns() {
 	const renderer = ({ days, hours, minutes, seconds, completed }) => {
 		if (completed) {
 			// Render a completed state
-			return '';
+			return <div
+					className='home-title flex items-center  w-[200px] sm:w-[100px] justify-between'
+					ref={dateRef}
+			>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div>
+						<span className='glitch text-white text-[30px] sm:text-[18px]'>
+							Ended
+						</span>
+						{/* <p className='text-lg mt-[30px]'>Seconds</p> */}
+					</div>
+				</div>
 		} else {
 			// Render a countdown
 			return (

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 border border-gray card-bg hover:bg-gray-50'
+					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'
 					id='menu-button'
 					aria-expanded='true'
 					aria-haspopup='true'

diff --git a/components/Header/header.js b/components/Header/header.js
@@ -67,7 +67,6 @@ function Header() {
 								el.style.width = `${d.size}px`;
 								el.style['pointer-events'] = 'auto';
 								el.style.cursor = 'pointer';
-								el.onclick = () => console.info(d);
 								return el;
 							}}
 							globeImageUrl='https://raw.githubusercontent.com/vasturiano/react-globe.gl/master/example/clouds/clouds.png'
@@ -82,9 +81,9 @@ function Header() {
 						<div className='flex flex-col justify-center items-center w-full'>
 							<div className='w-[624px] sm:w-full text-center'>
 								<Heading
-									className='countdown-text-gradient'
+									className='countdown-text-gradient text-7xl sm:text-4xl leading-normal sm:leading-38px tracking-[-3px] sm:tracking-[-0.02em] font-extrabold'
 									level='h1'
-									typeStyle='heading-lg'
+									typeStyle='heading'
 								>
 									AsyncAPI Conf On Tour 2023
 								</Heading>

diff --git a/components/Venue/venue.js b/components/Venue/venue.js
@@ -9,7 +9,7 @@ function Venue({ className, city }) {
 		<Link href={`/venue/${city.name}`}>
 			<div className={`w-[500px] cursor-pointer sm:w-auto ${className}`}>
 				<div className='w-[450px] sm:w-auto sm:h-[320px] card-bg flex items-center justify-center p-10'>
-					<img src={city.img} className='sm:w-[350px] h-[250px] rounded-lg' />
+					<img src={city.img} className='sm:w-[350px] h-[250px] rounded-lg hoverEffect' />
 				</div>
 
 				<div className='mt-[24px] w-[450px] sm:w-full'>

diff --git a/config/city-lists.json b/config/city-lists.json
@@ -6,7 +6,13 @@
 		"description": "Join us in London for the AsyncAPI Conference and unlock the API of opportunities! Let's bridge the messaging gap and create a tech buzz you will want to experience!",
 		"img": "/img/london.jpeg",
 		"address": "IBM UK Limited 20 York Road London SE1 7ND",
-		"sponsors": ["/img/IBM.png"]
+		"sponsors": [
+			"/img/IBM.png"
+		],
+		"ticket": "https://opencollective.com/asyncapi/events/asyncapi-conference-on-tour-6b3c0aa1/contribute/aacot-london-edition-61313",
+		"freeTickets":"",
+		"freeTicketText":"Grab Free Tickets",
+		"buttonText":"Get your Tickets"
 	},
 	{
 		"name": "Madrid",
@@ -15,7 +21,13 @@
 		"description": "Join us in Madrid for AsyncAPI Conference and learn how to speak fluent API! Let's taco about messaging and have a fiesta you will remember!",
 		"img": "https://images.unsplash.com/photo-1539037116277-4db20889f2d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
 		"address": "Sngular Madrid, C. de Labastida, 1, 28034 Madrid, Spain",
-		"sponsors": ["/img/sngular.png"]
+		"sponsors": [
+			"/img/sngular.png"
+		],
+		"ticket": "",
+		"freeTickets":"https://docs.google.com/forms/d/e/1FAIpQLSdwqi27LpsIi8tKQoQBcUWDUJZi0be0cHpWnDtWhhHVn00hFA/viewform",
+		"freeTicketText":"Grab Free Tickets",
+		"buttonText":"Get your Tickets"
 	},
 	{
 		"name": "Bangalore",
@@ -24,7 +36,13 @@
 		"description": "Join us in Bengaluru for the AsyncAPI Conference and decode the language of APIs! Let's crack the language of APIs and ignite a tech revolution with some spice you'll remember!",
 		"img": "https://images.unsplash.com/photo-1596176530529-78163a4f7af2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2454&q=80",
 		"address": "310, 6th Main Rd, HAL 2nd Stage, Indiranagar, Bengaluru, Karnataka 560038, India",
-		"sponsors": ["/img/postman.png"]
+		"sponsors": [
+			"/img/postman.png"
+		],
+		"ticket": "",
+		"freeTickets":"",
+		"freeTicketText":"Grab Free Tickets",
+		"buttonText":"Get your Tickets"
 	},
 	{
 		"name": "Paris",
@@ -33,6 +51,12 @@
 		"description": "Join us at apidays Paris for the AsyncAPI Conference and experience the art of API perfection! Let's craft a symphony of messaging and celebrate tech in style!",
 		"img": "https://images.unsplash.com/photo-1508050919630-b135583b29ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2306&q=80",
 		"address": "CNIT (Centre des Nouvelles Industries et Technologies), Paris 2 Place de la Défense, 92092 Puteaux",
-		"sponsors": ["/img/apidays.png"]
+		"sponsors": [
+			"/img/apidays.png"
+		],
+		"ticket": "",
+		"freeTickets":"",
+		"freeTicketText":"Grab Free Tickets",
+		"buttonText":"Get your Tickets"
 	}
-]
+]
diff --git a/config/speakers.json b/config/speakers.json
@@ -1,4 +1,9 @@
 [
+	{
+		"location": "",
+		"city": "All",
+		"lists": []
+	},
 	{
 		"location": "Madrid, Spain",
 		"city": "Madrid",
@@ -184,7 +189,7 @@
 			},
 
 			{
-				"name": "Lorna Jane",
+				"name": "Lorna Mitchell",
 				"title": "Developer Experience at Redocly",
 				"img": "https://lornajane.net/wp-content/uploads/2011/08/IMG_9410-smaller.jpg"
 			},

diff --git a/pages/index.js b/pages/index.js
@@ -28,15 +28,16 @@ export default function Home() {
 		ReactGA.initialize('UA-109278936-3');
 		ReactGA.pageview(window.location.pathname + window.location.search);
 	}
+	speakers[0].lists = [];
+	speakers.map((speaker) => {
+		if (Array.isArray(speaker.lists) && Object.keys(speaker.lists).length > 0) {
+			speakers[0].lists.push(...speaker.lists);
+		}
+	});
 	useEffect(() => {
-		const newArr = []
-		speakers.map((speaker) => {
-			if (Array.isArray(speaker.lists) && Object.keys(speaker.lists).length > 0) {
-				newArr.push(...speaker.lists)
-			}
-		});
-		setSpeakersList(newArr)
-	},[])
+		setCity(speakers[0]);
+		setSpeakersList(speakers[0].lists);
+	},[]);
 	return (
 		<div>
 			<Head>
@@ -90,7 +91,7 @@ export default function Home() {
 								</div>
 							) : (
 								<div className='flex justify-center'>
-									<div className='w-[720px] lg:w-full flex justify-between'>
+									<div className='w-[900px] lg:w-full flex justify-between'>
 										{speakers.map((speaker) => {
 											return (
 												<div
@@ -152,9 +153,11 @@ export default function Home() {
 											us on stage and share your valuable insights with our
 											enthusiastic audience!
 										</Paragraph>
-										<Button className='mt-[80px] w-[244px] border border-gray card-bg'>
-											Apply as a Speaker
-										</Button>
+										<a href='https://apidays.typeform.com/to/ILJeAaV8#event_name=xxxxx' target="_blank" rel="noopener noreferrer">
+											<Button className='mt-[80px] w-[244px] border border-gray card-bg'>
+												Apply as a Speaker
+											</Button>
+										</a>
 									</div>
 								</div>
 							)}

diff --git a/pages/venue/[id].js b/pages/venue/[id].js
@@ -50,6 +50,7 @@ export async function getStaticPaths() {
 function Venue({ city }) {
 	const router = useRouter();
 	const [active, setActive] = useState(tabs[0].title);
+	console.log(city.name);
 	return (
 		<div>
 			<div className='w-full h-[500px] sm:h-[auto] bg-madrid bg-cover bg-center'>
@@ -66,37 +67,17 @@ function Venue({ city }) {
 						<Heading typeStyle='lg' className='text-white mt-[24px]'>
 							{city.date}
 						</Heading>
-					</div>
-					<div className='kinda-dark py-[10px] w-full'>
-						<div className='sm:hidden container'>
-							<div className='flex justify-center'>
-								<div className='w-[600px] lg:w-full flex justify-between'>
-									{tabs.map((tab) => {
-										return (
-											<div
-												key={tab.title}
-												onClick={() => {
-													setActive(tab.title);
-												}}
-											>
-												<Button
-													onClick={() =>
-														router.push(`#${tab.title.toLowerCase()}`)
-													}
-													className={`w-[154px] h-[48px] ${
-														active === tab.title
-															? 'card-bg'
-															: 'border border-gray'
-													}`}
-													overlay={true}
-												>
-													{tab.title}
-												</Button>
-											</div>
-										);
-									})}
-								</div>
-							</div>
+						<div className='m-[30px]'>
+							{city.ticket !== "" && (
+								<a href={city.ticket} target='_blank' rel='noreferrer'>
+									<Button className="px-8 m-2">{city.buttonText}</Button>
+								</a>
+							)}
+							{city.freeTickets !== "" && (
+								<a href={city.freeTickets} target='_blank' rel='noreferrer'>
+									<Button className="px-8 m-2">{city.freeTicketText}</Button>
+								</a>
+							)}
 						</div>
 					</div>
 				</div>
@@ -153,9 +134,11 @@ function Venue({ city }) {
 									stage and share your valuable insights with our enthusiastic
 									audience!
 								</Paragraph>
-								<Button className='mt-[80px] w-[244px] border border-gray card-bg'>
-									Apply as a Speaker
-								</Button>
+								<a href={city.name === 'Paris' ? 'https://apidays.typeform.com/to/ILJeAaV8#event_name=xxxxx' : null} target="_blank" rel="noopener noreferrer">	
+									<Button className='mt-[80px] w-[244px] border border-gray card-bg'>
+										Apply as a Speaker
+									</Button>
+								</a>
 							</div>
 						)}
 					</div>

diff --git a/styles/globals.css b/styles/globals.css
@@ -69,8 +69,8 @@ body {
   bottom: 0 !important;
 }
 
-.gradient-bg{
-   background-image: linear-gradient(225deg, #2DCCFD 9.35%, #AD20E2 88.41%);
+.gradient-bg {
+   background-image: linear-gradient(225deg, #2DCCFD 9.35%, #AD20E2 88.41%) !important;
 }
 
 .navbg:hover, .navbg:focus{
@@ -90,6 +90,10 @@ body {
   box-shadow: 0px 59px 100px rgba(0, 0, 0, 0.25), 0px 44px 94px rgba(0, 0, 0, 0.15);
 }
 
+.no-border {
+  border: none !important;
+}
+
 .header-bg{
 background: linear-gradient(320deg, #2db4fd 10.35%, #410854 88.41%);
 }
@@ -265,3 +269,11 @@ mix-blend-mode: lighten;
     0% {transform: translateX(0)}
     100% {transform: translateX(200%)}
 }
+
+.hoverEffect{
+  transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
+}
+
+.hoverEffect:hover {
+  transform: scale(1.1); /* Scale the image by 10% on hover */
+}