feat: preparation for 2024 conference on tour

components/About/about.js

@@ -1,37 +1,42 @@
+/* eslint-disable react/no-unescaped-entities */
 import React from 'react'
 import Heading from '../Typography/heading';
 import Paragraph from '../Typography/paragraph';
+import Button from '../Buttons/button';
 
 function About() {
     return (
-			<div className='relative overflow-hidden h-[900px] lg:h-full'>
-				<img src='/img/sun.png' className='bg-03' />
-				<div className='pt-[160px] lg:py-[100px] container flex items-center justify-center w-full'>
-					<div className='w-[1120px] lg:w-full flex lg:flex-col-reverse items-center justify-between'>
-						<div
-							className='w-[500px] h-[500px] lg:w-[350px] lg:h-[350px] lg:mt-10 border p-10 card-bg'
-							style={{
-								borderRadius: '100%',
-							}}
-						>
-							<img src='/img/hand.png' className='w-[660px]' />
-						</div>
-						<div className='w-[600px] ml-10 lg:ml-0 lg:w-full lg:text-center'>
-							<Heading className='text-white'>
-								About AsyncAPI Conf on Tour 2023?
-							</Heading>
-							<Paragraph typeStyle='md' className="lg:mt-10" >
-								The AsyncAPI Conf on Tour 2023 is planned to take the online
-								event to the next level by hosting physical events in four
-								different locations across the globe. Each location will feature
-								its own keynote speakers, panels, and networking events,
-								allowing attendees to experience the conference in person while
-								still connecting with the larger global community.
-							</Paragraph>
-						</div>
+		<div className='p-24 container flex items-center justify-center w-full'>
+			<div className='w-[1120px] lg:w-full flex lg:flex-col-reverse items-center justify-between'>
+				<div style={{'--image-url': `url('/img/about.jpeg')`}} className='lg:mt-16 bg-[image:var(--image-url)] bg-center bg-cover w-[450px] h-[550px] sm:w-[100%] sm:h-[500px] rounded-[30px]' >
+			</div>
+				<div className='w-[600px] ml-10 lg:ml-0 lg:w-full lg:text-center'>
+				<div className='flex items-center lg: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'>About The Event</div>
 					</div>
+					<Heading typeStyle='heading-md' className='text-gradient lg:mt-10'>
+					AACoT'24
+					</Heading>
+					<Paragraph typeStyle='body-lg' className="mt-6" textColor='text-gray-200' >
+					The AsyncAPI Conf on Tour is an official event created by the AsyncAPI
+					Initiative. This conference is aimed primarily at the community to share and
+					exchange experiences between existing users and new members. We plan to
+					integrate new members into the community and expand their knowledge about
+					the project.
+					</Paragraph>
+					<div className='mt-10'>
+						<a
+						href='https://opencollective.com/asyncapi/events/asyncapi-conference-on-tour-6b3c0aa1'
+						target='_blank'
+						rel='noreferrer'
+						>
+							<Button className='w-[250px]'>Become a sponsor now</Button>
+						</a>
+				</div>
 				</div>
 			</div>
+		</div>
 		);
 }
 

components/Cards/ticketCards.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import Button from '../Buttons/button'
+
+function TicketCards({className, city}) {
+  return (
+    <div className={`w-[300px] lg:w-full opacity-20 h-[400px] flex flex-col text-white justify-between rounded-lg card bg-white ${className}`}>
+        <div className='p-4'>
+            <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'><Button disabled={true} className='w-[200px]'>Buy now</Button></div>
+    </div>
+  )
+}
+
+export default TicketCards

components/Footer/footer.js

@@ -19,24 +19,23 @@ function Footer() {
     },
   ];
   return (
-    <div className="mt-[160px] w-full flex justify-center border border-t-[#333] container py-[96px]">
-      <div className="w-[1131px]">
-        <img src="/img/logo.png" className="w-[150px]" />
-        <div className="mt-[82px] flex items-center justify-between sm:flex-col sm:items-start">
-          <div className="mt-2 text-[14px] text-gray py-4 underline">
-            <a
-              href="https://github.com/asyncapi/.github/blob/master/CODE_OF_CONDUCT.md"
-              target="_blank"
-              rel="noreferrer"
-              className="hover:text-sky-500 duration-200 ease-in-out"
-            >
+    <div className="container">
+          <div className="w-full flex justify-between items-center p-4">
+            <img src="/img/logo.png" className="w-[150px]" />
+      <div className="mt-2 text-[14px] text-gray underline">
+        <a
+        href="https://github.com/asyncapi/.github/blob/master/CODE_OF_CONDUCT.md"
+        target="_blank"
+        rel="noreferrer"
+        className="hover:text-sky-500 duration-200 ease-in-out"
+        >
               Code of Conduct
             </a>
           </div>
+      <div>
+      </div>
+        <div className="flex items-center justify-between sm:flex-col sm:items-start">
           <div className="flex flex-col justify-between items-start gap-2 w-[284px] sm:mt-6">
-            <div className="text-[16px] text-slate-300">
-              <span>Follow us</span>
-            </div>
             <div className="flex justify-between items-center gap-3">
               {socials.map((social, index) => {
                 return (
@@ -58,7 +57,7 @@ function Footer() {
             </div>
           </div>
         </div>
-      </div>
+    </div>
     </div>
   );
 }

components/Header/header.js

@@ -1,115 +1,54 @@
-import React, { useEffect, useState, useRef } from 'react';
-import cities from '../../config/cities.json';
-import cityList from '../../config/city-lists.json';
-let Globe = () => null;
+import React from 'react';
 import Heading from '../Typography/heading';
 import Paragraph from '../Typography/paragraph';
 import Button from '../Buttons/button';
-import { useMediaQuery } from 'react-responsive';
-import Countdowns from '../Countdown/countdown';
+import ReactSlider from '../Slider/slider';
+import cities from '../../config/city-lists.json';
+import Venue from '../Venue/venue';
+import Announcement from '../announcement';
+import Link from 'next/link';
 
 function Header() {
-	const isTablet = useMediaQuery({ maxWidth: '1118px' });
-	if (typeof window !== 'undefined') Globe = require('react-globe.gl').default;
-	const globeEl = useRef();
-	const [places, setPlaces] = useState(cities.features);
-	const markerSvg = `<svg viewBox="-4 0 36 36">
-    <path fill="currentColor" d="M14,0 C21.732,0 28,5.641 28,12.6 C28,23.963 14,36 14,36 C14,36 0,24.064 0,12.6 C0,5.641 6.268,0 14,0 Z"></path>
-    <circle fill="white" cx="14" cy="14" r="7"></circle>
-  </svg>`;
-
-	useEffect(() => {
-		// Auto-rotate
-		globeEl.current.controls().autoRotate = true;
-		globeEl.current.controls().autoRotateSpeed = 2;
-		globeEl.current.controls().enableZoom = false;
-	}, []);
-
-	const gData = [...places].map((place) => {
-		let color = null;
-		let size = null;
-		for (let i = 0; i < cityList.length; i++) {
-			if (place.properties.name === cityList[i].name) {
-				color = '#5100ff';
-				size = 30;
-			}
-		}
-		return {
-			lat: place.properties.latitude,
-			lng: place.properties.longitude,
-			size: size ? size : 20,
-			color: color ? color : 'white',
-		};
-	});
-
 	return (
-		<div className='overflow-hidden h-[57rem] lg:h-[auto] relative'>
-			<img src='/img/illustra.png' className='bg-01' />
+		<div className='relative'>
 			<div className='container w-full flex items-center justify-center'>
-				<div
-					className='absolute sm:hidden flex items-center justify-center'
-					style={{
-						display: isTablet && 'none',
-						top: '400px',
-					}}
-				>
-					<div className='globe-overlay'></div>
-					<div className='globe-viz'>
-						<Globe
-							ref={globeEl}
-							zoom={false}
-							htmlTransitionDuration={1000}
-							htmlElementsData={gData}
-							htmlElement={(d) => {
-								const el = document.createElement('div');
-								el.innerHTML = markerSvg;
-								el.style.color = d.color;
-								el.style.width = `${d.size}px`;
-								el.style['pointer-events'] = 'auto';
-								el.style.cursor = 'pointer';
-								return el;
-							}}
-							globeImageUrl='https://raw.githubusercontent.com/vasturiano/react-globe.gl/master/example/clouds/clouds.png'
-							backgroundColor='rgba(0,0,0,0)'
-							width='700px'
-							height='700px'
-						/>
-					</div>
-				</div>
-				<div className='w-[1131px] pb-8 z-99'>
-					<div className='flex justify-center w-full mt-12'>
+				<div className=''>
+					<div className='flex justify-center w-full mt-32'>
 						<div className='flex flex-col justify-center items-center w-full'>
-							<div className='w-[624px] sm:w-full text-center'>
+						<div className='my-10'><Announcement /></div>
+							<div className='sm:w-full text-center'>
 								<Heading
-									className='countdown-text-gradient text-7xl sm:text-4xl leading-normal sm:leading-38px tracking-[-3px] sm:tracking-[-0.02em] font-extrabold'
+									className='text-6xl sm:text-4xl leading-normal sm:leading-38px tracking-[-3px] sm:tracking-[-0.02em] font-extrabold text-gradient'
 									level='h1'
 									typeStyle='heading'
 								>
-									AsyncAPI Conf On Tour 2023
+									AsyncAPI Conf On Tour 2024
 								</Heading>
 							</div>
 							<div className='w-[624px] sm:w-full text-center'>
-								<Paragraph className='mt-[16px]'>
-									Join us for the first-ever AsyncAPI Conference on Tour,
-									bringing the latest in AsyncAPI technology to locations
-									worldwide!
+								<Paragraph className='mt-[16px]' textColor='text-gray-200'>
+								Join us for the AsyncAPI Conference on Tour,
+								bringing the latest in AsyncAPI technology to locations worldwide!
 								</Paragraph>
 							</div>
 							<div className='mt-[54px] relative flex items-center justify-center'>
-								<a
-									href='https://ticket.apidays.global/event/apidays-paris-2023/8a1f3904-e2be-4c69-a880-37d2ddf1027d/cart?coupon=ASYNCAPICONF23'
-									target='_blank'
-									rel='noreferrer'
+								<Link
+									href='#register'
 								>
-									<Button className='w-[200px]'>Get Paris Tickets</Button>
-								</a>
+									<Button className='w-[250px]'>Register now</Button>
+								</Link>
 							</div>
 						</div>
 					</div>
-					<Countdowns />
 				</div>
 			</div>
-			<div></div>
+			<div className='mt-24'>
+				<ReactSlider>
+					{cities.map((city) => {
+						return <Venue key={city.name} city={city}/>;
+					})}
+				</ReactSlider>
+			</div>
 		</div>
 	);
 }

components/Navbar/navbar.js

@@ -39,10 +39,10 @@ function Navbar() {
 	  };
 	}, [menuRef]);
 	return (
-		<div className='container flex justify-center items-center sticky top-0 backdrop-blur z-[99]'>
+		<div className='flex justify-center items-center sticky top-0 z-[99] text-white'>
 			<div className='w-[1131px]'>
 				<div className='flex justify-between h-[75px] w-full items-center'>
-					<div className='flex items-center sm:justify-between text-white sm:w-full'>
+					<div className='flex items-center sm:justify-between sm:w-full'>
 						<Link href='/'>
 							<div className='flex items-center cursor-pointer w-[120px]'>
 								<img src='/img/logo.png' alt='conference logo' />
@@ -69,16 +69,17 @@ function Navbar() {
 										onClick={() =>
 											show === link.title ? setShow(null) : setShow(link.title)
 										}
-										className='text-[#F0F4F5] ml-16 text-[15px] group cursor-pointer relative flex flex-col'
+										className='ml-16 text-[14px] group cursor-pointer relative flex flex-col'
 									>
 										<div>
 											{link.subMenu ? (
 												<div className='flex items-center '>
 													{link.title}{' '}
 													{link.subMenu && (
 														<Dropdown
-															className={`ml-2 transition-transform duration-700 ${show === link.title ? 'rotate-180' : 'rotate-0'
-															}`}
+														color="white"
+														className={`ml-2 transition-transform duration-700 ${show === link.title ? 'rotate-180' : 'rotate-0'
+													}`}
 														/>
 													)}
 												</div>