feat: first iteration of the AACOT'23 website implementation

components/About/about.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import Heading from '../Typography/heading';
+import Paragraph from '../Typography/paragraph';
+
+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>
+				</div>
+			</div>
+		);
+}
+
+export default About

components/Agenda/agenda.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import Heading from '../Typography/heading'
+import Paragraph from '../Typography/paragraph'
+
+function Agenda() {
+  return (
+		<div className='container flex flex-col justify-center items-center'>
+			<Heading className='text-[30px] text-white'>
+				Agenda
+			</Heading>
+			<Paragraph className='mt-[16px]'>
+				The conference will commence at 8:00am BST (UTC+1)
+			</Paragraph>
+			<div className='w-[720px] lg:w-full mt-[140px] text-center'>
+				<Heading typeStyle='lg' className='text-white text-[30px]'>
+					Agendas Coming Soon - Stay Tuned!
+				</Heading>
+          </div>
+		</div>
+	);
+}
+
+export default Agenda

components/Buttons/button.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+function Button({className, children, overlay, onClick}) {
+  return (
+	  <button
+		  onClick={onClick}
+			className={`${overlay ? '' : 'gradient-bg'} text-white h-[54px] rounded-md p-[8px] ${className}`}
+      >{children}</button>
+	);
+}
+
+export default Button

components/Countdown/countdown.js

@@ -0,0 +1,103 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Countdown from 'react-countdown';
+
+const dates = [
+	{
+		name: 'London, UK',
+		date: 'September 26, 2023',
+	},
+	{
+		name: 'Madrid, Spain',
+		date: 'October 19, 2023',
+	},
+	{
+		name: 'Bangalore, India',
+		date: 'November 30, 2023',
+	},
+];
+
+function Countdowns() {
+	const [selectedIndex, setSelectedIndex] = useState(0);
+
+	const locationRef = useRef(null);
+	const dateRef = useRef(null);
+	useEffect(() => {
+		const intervalId = setInterval(() => {
+			locationRef.current.classList.remove('hidden');
+			locationRef.current.classList.add('home-title');
+			dateRef.current.classList.remove('hidden');
+			dateRef.current.classList.add('home-title');
+			setSelectedIndex((prevIndex) => (prevIndex + 1) % dates.length);
+			setTimeout(() => {
+				locationRef.current.classList.remove('home-title');
+				locationRef.current.classList.add('hidden');
+				dateRef.current.classList.remove('home-title');
+				dateRef.current.classList.add('hidden');
+			}, 9900); // Element stays visible for 800 milliseconds
+		}, 10000); // Toggle visibility every 1500 milliseconds
+
+		return () => {
+			clearInterval(intervalId);
+		};
+	}, []);
+
+	const renderer = ({ days, hours, minutes, seconds, completed }) => {
+		if (completed) {
+			// Render a completed state
+			return '';
+		} else {
+			// Render a countdown
+			return (
+				<div
+					className='home-title flex items-center  w-[200px] sm:w-[100px] justify-between'
+					ref={dateRef}
+				>
+					<div>
+						<span className='glitch text-white text-[30px] sm:text-[18px]'>
+							{days}:
+						</span>
+						{/* <p className='text-lg mt-[30px]'>Days</p> */}
+					</div>
+					<div>
+						<span className='glitch text-white text-[30px] sm:text-[18px]'>
+							{hours}:
+						</span>
+						{/* <p className='text-lg mt-[30px]'>Hours</p> */}
+					</div>
+					<div>
+						<span className='glitch text-white text-[30px] sm:text-[18px]'>
+							{minutes}:
+						</span>
+						{/* <p className='text-lg mt-[30px]'>Minutes</p> */}
+					</div>
+					<div>
+						<span className='glitch text-white text-[30px] sm:text-[18px]'>
+							{seconds}
+						</span>
+						{/* <p className='text-lg mt-[30px]'>Seconds</p> */}
+					</div>
+				</div>
+			);
+		}
+	};
+	return (
+		<div className='mt-[400px] sm:mt-[150px] flex items-center justify-between'>
+			<div className='h-[40px]'>
+				<div className='home-title' ref={locationRef}>
+					<span className='text-[25px] sm:text-[18px] text-white font-bold'>
+						{dates[selectedIndex].name}
+					</span>
+				</div>
+			</div>
+			<div className='h-[40px]'>
+				<Countdown
+					date={new Date(dates[selectedIndex].date)}
+					daysInHours={false}
+					renderer={renderer}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default Countdowns;

components/Dropdown/dropdown.js

@@ -0,0 +1,77 @@
+import React, {useState} from 'react';
+
+function Dropdown({ active, items, setOptions, setOptions2 }) {
+    const [show, setShow] = useState(false)
+	return (
+		<div class='relative inline-block w-full'>
+			<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'
+					id='menu-button'
+					aria-expanded='true'
+					aria-haspopup='true'
+					onClick={() => setShow(true)}
+				>
+					<div>{active}</div>
+					<svg
+						className='-mr-1 h-5 w-5 text-gray-400'
+						viewBox='0 0 20 20'
+						fill='currentColor'
+						aria-hidden='true'
+					>
+						<path
+							fill-rule='evenodd'
+							d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'
+							clip-rule='evenodd'
+						/>
+					</svg>
+				</button>
+			</div>
+			{/* 
+  <!--
+    Dropdown menu, show/hide based on menu state.
+
+    Entering: "transition ease-out duration-100"
+      From: "transform opacity-0 scale-95"
+      To: "transform opacity-100 scale-100"
+    Leaving: "transition ease-in duration-75"
+      From: "transform opacity-100 scale-100"
+      To: "transform opacity-0 scale-95"
+  --> */}
+			{show && (
+				<div
+					className='w-full absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
+					role='menu'
+					aria-orientation='vertical'
+					aria-labelledby='menu-button'
+					tabindex='-1'
+				>
+					<div className='' role='none'>
+						{items &&
+							items.map((item) => {
+								return (
+									<div
+										key={item.city}
+										onClick={() => {
+											setOptions(item);
+											setOptions2(item.lists);
+											setShow(false);
+										}}
+										className={`text-gray-700 block p-4 text-md hover:text-white cursor-pointer navbg`}
+										role='menuitem'
+										tabindex='-1'
+										id='menu-item-0'
+									>
+										{item.city}
+									</div>
+								);
+							})}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default Dropdown;

components/Footer/footer.js

@@ -2,14 +2,50 @@ import React from 'react'
 
 function Footer() {
   return (
-    <div style={{
-          borderTop: "1px solid #333",
-      }}>
-          <div className='mt-2 text-lg text-gray-300 py-4'>
-            Copyright © AsyncAPI Project a Series of LF Projects, LLC
-          </div>
-      </div>
-  )
+		<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'
+						>
+							Code of Conduct
+						</a>
+					</div>
+					<div className='flex justify-between items-center w-[284px] sm:mt-6'>
+						<div className='text-[16px] text-white'>
+							<span>Follow us</span>
+						</div>
+						<a
+							href='https://github.com/asyncapi'
+							target='_blank'
+							rel='noreferrer'
+							className='w-[52px] h-[52px] rounded-lg border border-[#556061] flex items-center justify-center'
+						>
+							<img src='/img/Github.png' />
+						</a>
+						<a
+							target='_blank'
+							href='https://www.linkedin.com/company/asyncapi/'
+							className='w-[52px] h-[52px] rounded-lg border border-[#556061] flex items-center justify-center' rel="noreferrer"
+						>
+							<img src='/img/Linkedln.png' />
+						</a>
+						<a
+							href='https://twitter.com/asyncapispec'
+							target='_blank'
+							className='w-[52px] h-[52px] rounded-lg border border-[#556061] flex items-center justify-center' rel="noreferrer"
+						>
+							<img src='/img/Twitter.png' />
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
 }
 
 export default Footer