Merge branch 'master' of https://github.com/asyncapi/conference-website…

… into feat/add-testing-framework

.nvmrc

@@ -1 +1 @@
-14
+18

components/About/about.js

@@ -30,25 +30,24 @@ function About() {
 					</Paragraph>
 					<div className='mt-10 flex gap-4 sm:flex-col lg:justify-center' data-test="prospectus-download">
 						<a
-						href='https://opencollective.com/asyncapi/events/asyncapi-conference-on-tour-6b3c0aa1'
-						target='_blank'
-						rel='noreferrer'
+							className='flex justify-center'
+							href='https://opencollective.com/asyncapi/events/asyncapi-conference-on-tour-6b3c0aa1'
+							target='_blank'
+							rel='noreferrer'
 						>
 							<Button className='w-[200px]'>Become a sponsor now</Button>
 						</a>
-						<a href='/pdf/conf-2024.pdf' download= {`conf ${new Date().getFullYear()}.pdf`} >
-						<Button overlay={true} className='w-[240px] border'>
-						<div className='flex gap-2 justify-center'>
-						<div>
-							<Image src="/img/Download_icon.png" height={20} width={20} alt='Download-icon' objectFit='contain'/>
-						</div>
-						<div>
-							Sponsorship prospectus
-						</div>
-						</div>
+						<a className='flex justify-center ' href='/pdf/conf-2024.pdf' download={`conf ${new Date().getFullYear()}.pdf`} >
+							<Button overlay={true} className='w-[240px] border'>
+								<div className='flex gap-2 justify-center items-center'>
+									<Image src="/img/Download_icon.png" height={20} width={20} alt='Download-icon' objectFit='contain' />
+									<div>
+										Sponsorship prospectus
+									</div>
+								</div>
 							</Button>
 						</a>
-				</div>
+					</div>
 				</div>
 			</div>
 		</div>

components/Agenda/agenda.js

@@ -43,7 +43,7 @@ function Agenda({ city }) {
 						  </div>
 						  {talk.speaker && typeof talk.speaker === 'number' ? <div className='flex items-center lg:mt-4'>
 							  <div className='w-[94px] h-[94px]'>
-								  <Image src={city.speakers[talk.speaker - 1].img} alt={city.speakers[talk.speaker -1].name} className='object-cover rounded-full' height={'100%'} width={'100%'} />
+								  <Image src={city.speakers[talk.speaker - 1].img} alt={city.speakers[talk.speaker -1].name} width={0} height={0} className='object-cover rounded-full w-[100%] h-[100%]' />
 							  </div>
 							  <div className='ml-4 w-[300px] sm:w-[250px]'>
 								  <Heading typeStyle='heading-sm-semibold' className='text-white'>
@@ -58,7 +58,7 @@ function Agenda({ city }) {
 								  {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]'>
-											  <Image src={city.speakers[speak - 1].img} alt={city.speakers[speak - 1].name} className='object-cover rounded-full' height={'100%'} width={'100%'} />
+											  <Image src={city.speakers[speak - 1].img} alt={city.speakers[speak - 1].name} width={0} height={0} className='object-cover rounded-full w-[100%] h-[100%]' />
 										  </div>
 										  <div className='ml-4 w-[300px] sm:w-[250px]'>
 								  <Heading typeStyle='heading-sm-semibold' className='text-white'>

components/Buttons/button.js

@@ -7,7 +7,7 @@ function Button({className, children, overlay, onClick, type, disabled,test}) {
 		  data-test={test || ""}
 		  type={type}
 		  onClick={onClick}
-			className={`${overlay ? '' : 'gradient-bg'}  text-white h-[54px] rounded-md p-[8px] ${className}`}
+			className={`${overlay ? '' : 'gradient-bg'} flex items-center justify-center text-white h-[54px] rounded-md p-[8px] ${className}`}
       >{children}</button>
 	);
 }

components/Header/header.js

@@ -7,8 +7,10 @@ import cities from '../../config/city-lists.json';
 import Venue from '../Venue/venue';
 import Announcement from '../announcement';
 import Link from 'next/link';
+import { useMediaQuery } from 'react-responsive';
 
 function Header() {
+	const isMobile = useMediaQuery({ maxWidth: '590px' });
 	return (
 		<div className='relative'>
 			<div className='container w-full flex items-center justify-center'>
@@ -44,7 +46,7 @@ function Header() {
 				</div>
 			</div>
 			<div className='mt-24'>
-				<ReactSlider>
+			    <ReactSlider>
 					{cities.map((city) => {
 						return <Venue key={city.name} city={city}/>;
 					})}

components/Navbar/navbar.js

@@ -55,7 +55,7 @@ function Navbar() {
 			if (!isSubMenuHovered) {
 				setShow(null);
 			}
-		}, 300);  
+		}, 300);
 	};
 
 	const handleSubMenuEnter = () => {
@@ -122,11 +122,12 @@ function Navbar() {
                                        <span class="after:absolute after:-bottom-1 after:right-1/2 after:w-0 after:transition-all after:h-0.5 after:bg-white after:group-hover:w-3/6"></span>
 										{show === link.title && link.subMenu && (
 											<div
-												onMouseLeave={handleSubMenuLeave}
-												className='subMenu absolute z-[9] mt-8 w-[140px] rounded-md left-[-15px] gradient-bg pl-2 pt-1 flex flex-col justify-center space-y-0'>
+												className='subMenu absolute z-[9] mt-8 w-[150px] rounded-md left-[-15px] gradient-bg px-2 py-1 flex flex-col justify-center space-y-0'
+												onMouseEnter={handleSubMenuEnter}
+												onMouseLeave={handleSubMenuLeave}>
 												{link.subMenu.map((subL) => (
 													<Link href={subL.ref} key={subL.title}>
-														<div className='h-[32px] text-[16px] hover:scale-95 hover:translate-x-1 transition-all'
+														<div className={`flex items-center ${link.subMenu.length === 1 ? "justify-center" : "justify-start"} min-h-[32px] text-[16px] hover:scale-95 hover:translate-x-1 transition-all`}
 														data-test={`nav-sub-${subL.title}`}>
 															{subL.title}
 														</div>

components/Slider/slider.js

@@ -24,10 +24,15 @@ function ReactSlider({ children }) {
 		variableWidth: isMobile ? false : true,
 		arrows: false,
 	};
+
 	return (
-		<Slider ref={slider} {...settings}>
+		<>
+		{ children.length > 4 || isMobile ? 
+		(<Slider ref={slider} {...settings}>
 			{children}
-		</Slider>
+		</Slider>):(
+	       <div className='flex m-2 justify-center'>{children}</div>)}
+	    </>
 	);
 }
 

components/Speaker/guideline.js

@@ -54,7 +54,7 @@ function Guidelines({talkDeadLine,virtual,name,cfp}) {
                       }}>
                           <div className={`flex justify-between ${show === i ? "text-white" : "text-gray-400"} hover:text-white`}>
                               <h2 className={`text-xl w-[90%]`}>{faq.q}</h2>
-                              <button className='pointer border h-[30px] border-[#ffff] mr-[20px] rounded-3xl p-1'><Plus className={`w-[20px] transition-transform  duration-700 ${show === i ? 'rotate-12' : 'rotate-90'}`} /></button>
+                              <button className='pointer border h-[30px] border-[#ffff] mr-[20px] rounded-3xl p-1'><Plus className={`w-[20px] transition-transform  duration-700 ${show === i ? 'rotate-45' : 'rotate-90'}`} /></button>
                           </div>
 
 
@@ -78,7 +78,7 @@ function Guidelines({talkDeadLine,virtual,name,cfp}) {
                       }}>
                           <div className={`flex justify-between ${show === i ? "text-white" : "text-gray-400"} hover:text-white`}>
                               <h2 className={`text-xl w-[90%]`}>{faq.q}</h2>
-                              <button className='pointer border h-[30px] border-[#ffff] mr-[20px] rounded-3xl p-1'><Plus className={`w-[20px] transition-transform  duration-700 ${show === i ? 'rotate-12' : 'rotate-90'}`} /></button>
+                              <button className='pointer border h-[30px] border-[#ffff] mr-[20px] rounded-3xl p-1'><Plus className={`w-[20px] transition-transform  duration-700 ${show === i ? 'rotate-45' : 'rotate-90'}`} /></button>
                           </div>
                           {
                           virtual?<p className={`mt-8 text-md text-white ${show === i ? "block" : "hidden"}`}>{faq.av}</p>:  
@@ -102,7 +102,7 @@ function Guidelines({talkDeadLine,virtual,name,cfp}) {
                   }}>
                       <div className={`flex justify-between ${show === i ? "text-white" : "text-gray-400"} hover:text-white`}>
                           <h2 className={`text-xl w-[90%]`}>{faq.q}</h2>
-                          <button className='pointer border h-[30px] border-[#ffff] mr-[20px] rounded-3xl p-1'><Plus className={`w-[20px] transition-transform  duration-700 ${show === i ? 'rotate-12' : 'rotate-90'}`} /></button>
+                          <button className='pointer border h-[30px] border-[#ffff] mr-[20px] rounded-3xl p-1'><Plus className={`w-[20px] transition-transform  duration-700 ${show === i ? 'rotate-45' : 'rotate-90'}`} /></button>
                       </div>
                       {
 
@@ -114,7 +114,7 @@ function Guidelines({talkDeadLine,virtual,name,cfp}) {
               </div>
           })}
       </div>
-     <div className='text-center mt-20'>
+     <div className='flex items-center justify-center text-center mt-20'>
      {cfp && <a href={name === 'online'? "/venue/online/register" :cfp}target={name=='Online'?"":'_blank'} rel='noreferrer'>
 							<Button className="x-8 m-2 w-[250px] text-center">Submit Talk Proposal</Button>
 		</a>}

components/Speaker/speaker.js

@@ -8,7 +8,7 @@ function Speaker({details, location, className}) {
 			data-test="speakers-section"
 		>
 			<div className='w-[300px] h-[300px] lg:w-[250px] lg:h-[250px] relative overflow-hidden  rounded-full'>
-				<Image src={details.img} alt={details.name} width={0} height={0} sizes='100vw' className='rounded-full    object-cover  transition-all duration-300 hover:scale-110' />
+				<Image src={details.img} alt={details.name} width={0} height={0} sizes='100vw' className='rounded-full object-cover transition-all duration-300 hover:scale-110 w-[100%] h-[100%]' />
 			</div>
 			<div className='mt-[19px]'>
 				<h3 className='text-[23px] text-white'>{details.name}</h3>

components/Tickets/ticketCards.js

@@ -13,7 +13,7 @@ function TicketCards({ className, city }) {
         <div className='text-xl font-bold text-gradient'>{city.name}, {city.country}</div>
         <div className='mt-2 text-lg'>{city.date}</div>
       </div>
-      <div className='border-t h-20 border-dashed p-4 text-center'>
+      <div className='flex justify-center border-t h-20 border-dashed p-4 text-center'>
         {/* Show a button based on the event status */}
         {isEndedOrUpcoming ? (
           <Button disabled overlay={true} className='w-[200px] bg-gray-400'>

components/Venue/venue.js

@@ -7,7 +7,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 rounded-md 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 m-2'>
 				<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}

components/announcement.js

@@ -3,8 +3,8 @@ import Link from 'next/link';
 
 export default function Announcement() {
   return (
-    <Link href="/venue/Paris">
-    <div className='cursor-pointer border text-white min-w-[300px] rounded-lg p-1 text-center text-lg'>Call for Speakers for Paris is now open!</div>
+    <Link href="/venue/Online">
+    <div className='cursor-pointer border text-white min-w-[300px] rounded-lg p-1 text-center text-lg'>Join the AsyncAPI Online Edition!</div>
     </Link>
   )
 }

config/city-lists.json

@@ -5,7 +5,7 @@
 		"date": "30th October 2024",
 		"cfpdate":"Not announced yet",
 		"description": "Join us for the AsyncAPI Online Conference Edition as the community unites across the globe to share experiences, collaborate, and foster meaningful connections.",
-		"img": "/img/testMic.png",
+		"img": "/img/testMic.webp",
 		"address": "AsyncAPI Youtube Channel",
 		"map": "https://www.youtube.com/@AsyncAPI",
 		"sponsors": [
@@ -52,7 +52,7 @@
 		"name": "Paris",
 		"country": "France",
 		"date": "December 3-5, 2024",
-		"cfpdate":"October 12, 2024",
+		"cfpdate":"Not announced yet",
 		"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://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExd24yenR4djEyZzRoeDA0ZmEyb3Y1c2F4NWVmbG13NmZwYWNhZzdnNiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Tuy3QxNZF1cxG/giphy.gif",
 		"address": "CNIT (Centre des Nouvelles Industries et Technologies), Paris 2 Place de la Défense, 92092 Puteaux",
@@ -62,7 +62,6 @@
 		],
 		"ticket": false,
 		"isFree": true,
-		"ended": false,
-		"cfp": "https://apidays.typeform.com/to/ILJeAaV8?typeform-source=www.apidays.global#event_name=xxxxx"
+		"ended": true
 	}
 ]

config/links.json

@@ -50,8 +50,14 @@
                 "title": "Helsinki Slides",
                 "ref": "https://drive.google.com/drive/folders/1nY7dZF8WFXZ3r2rCWJDDoT2C_GMfQJMV?usp=drive_link",
                 "target": "_blank"
+            },
+			{
+                "title": "London Slides",
+                "ref": "https://drive.google.com/drive/folders/1PsIZSsQmsvSILZ83f9L-2ErV-pXM6PQf?usp=drive_link",
+                "target": "_blank"
             }
 
+
 	]
 }
 

config/speakers.json

@@ -1,4 +1,3 @@
-
 [
 	{
 		"location": "",
@@ -164,14 +163,66 @@
 	{
 		"city": "Paris",
 		"location": "Paris, France",
-		"lists": [],
+		"lists": [
+			{
+				"name": "Dr. Annegret Junker",
+				"title": "Chief Software Architect at codecentric AG",
+				"img": "img/paris-images/Annegret.webp"
+			},
+			{
+				"name": "Leonid Lukyanov",
+				"title": "Co-Founder, CEO at Aklivity",
+				"img": "img/paris-images/Leonid.webp"
+			},			
+			{
+				"name": "Hugo Guerrero",
+				"title": "Developer Advocate at Redhat",
+				"img": "img/paris-images/Hugo.webp"
+			},			
+			{
+				"name": "Naresh Jain",
+				"title": "Founder, CEO at Specmatic",
+				"img": "img/paris-images/Naresh.webp"
+			},			
+			{
+				"name": "Frank Kilcommins",
+				"title": "Principal API Technical Evangelist at SmartBear",
+				"img": "img/paris-images/Frank.webp"
+			},			
+			{
+				"name": "Laurent Broudoux",
+				"title": "Co-founder at Microcks",
+				"img": "img/paris-images/Laurent.webp"
+			},			
+			{
+				"name": "Hari Krishnan",
+				"title": "Co-Founder, CTO at Specmatic",
+				"img": "img/paris-images/Hari.webp"
+			},			
+			{
+				"name": "Joel Rosario",
+				"title": "Chief Scientist at Specmatic",
+				"img": "img/paris-images/Joel.webp"
+			},			
+			{
+				"name": "Julien Testut",
+				"title": "Senior Principal Product Manager at Oracle",
+				"img": "img/paris-images/Julien.webp"
+			},			
+			{
+				"name": "Alessandro Cagnetti",
+				"title": "Customer Engineering at Solace",
+				"img": "img/paris-images/Alessandro.webp"
+			}
+		],
 		"agenda": null
 	},
 
 	{
 		"city": "Online",
 		"location": "Online Edition",
-		"lists": [			{
+		"lists": [
+		{
 			"name": "Hari Krishnan",
 			"title": "Co-founder, CTO at Specmatic",
 			"img": "img/online-conf-images/HariKrishanan.webp"
@@ -210,7 +261,18 @@
 			"name": "Giri Venkatesan",
 			"title": "Principal Developer Advocate and Architect at Solace",
 			"img": "img/online-conf-images/GiriVenkatesan.webp"
-		}],
+		},
+		{
+			"name": "Dr. Annegret Junker",
+			"title": "Chief Software Architect at codecentric AG",
+			"img": "img/online-conf-images/Annegret.webp"
+		},
+		{
+			"name": "Lukasz Gornicki",
+			"title": "Executive Director at AsyncAPI Initiative",
+			"img": "img/online-conf-images/Lukasz.webp"
+		}
+	],
 		"agenda": null
 	}
 ]