feat: past editions module

components/About/about.js

@@ -1,49 +1,69 @@
 /* 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';
+import React from "react";
+import Heading from "../Typography/heading";
+import Paragraph from "../Typography/paragraph";
+import Button from "../Buttons/button";
+import { CommonUtils } from "../../utils/common-utils";
 
-function About() {
-    return (
-		<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>
-					<Paragraph  typeStyle='body-lg' className="mt-6" textColor='text-gray-200'>
-					We are currently looking for sponsors, for more details please read our Sponsorship Prospectus.
-					</Paragraph>
-					<div className='mt-10 flex'>
-						<a
-						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='https://drive.google.com/file/d/15rQ7cp-LLmxSCcAb2aBFitgJkGhYXBrd/view' target='_blank' rel="noreferrer">
-						<Button overlay={true} className='w-[200px] ml-4 border'>Sponsorship prospectus</Button>
-						</a>
-				</div>
-				</div>
-			</div>
-		</div>
-		);
+function About({ year = CommonUtils.getCurrentYear2Digit(), isEnded = false }) {
+  return (
+    <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'{year}
+          </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>
+          {!isEnded?<Paragraph
+            typeStyle="body-lg"
+            className="mt-6"
+            textColor="text-gray-200"
+          >
+            We are currently looking for sponsors, for more details please read
+            our Sponsorship Prospectus.
+          </Paragraph>:null}
+          <div className="mt-10 flex">
+            <a
+              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="https://drive.google.com/file/d/15rQ7cp-LLmxSCcAb2aBFitgJkGhYXBrd/view"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <Button overlay={true} className="w-[200px] ml-4 border">
+                Sponsorship prospectus
+              </Button>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
 
-export default About
+export default About;

components/Footer/footer.js

@@ -27,7 +27,7 @@ function Footer() {
         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"
+        className="hover:text-sky-500 text-white duration-200 ease-in-out"
         >
               Code of Conduct
             </a>

components/Slider/slider.js

@@ -1,34 +1,33 @@
-import Slider from 'react-slick';
-import Arrow from '../illustration/arrow';
-import React, { useEffect, useState, useRef } from 'react';
-import { useMediaQuery } from 'react-responsive';
+import Slider from "react-slick";
+import React, { useEffect, useState, useRef } from "react";
+import { useMediaQuery } from "react-responsive";
 
 function ReactSlider({ children }) {
-	const isMobile = useMediaQuery({ maxWidth: '590px' });
-	const [slides, setSlides] = useState(1);
+  const isMobile = useMediaQuery({ maxWidth: "590px" });
+  const [slides, setSlides] = useState(1);
 
-	useEffect(() => {
-		if (isMobile) {
-			setSlides(1);
-		}
-	}, [isMobile]);
-	const slider = useRef(null);
-	const settings = {
-		slidesToScroll: slides,
-		infinite: true,
-		autoplay: true,
-		speed: 10000,
-		autoplaySpeed: 0,
-		centerMode: true,
-		cssEase: 'linear',
-		variableWidth: isMobile ? false : true,
-		arrows: false,
-	};
-	return (
-		<Slider ref={slider} {...settings}>
-			{children}
-		</Slider>
-	);
+  useEffect(() => {
+    if (isMobile) {
+      setSlides(1);
+    }
+  }, [isMobile]);
+  const slider = useRef(null);
+  const settings = {
+    slidesToScroll: slides,
+    infinite: true,
+    autoplay: true,
+    speed: 10000,
+    autoplaySpeed: 0,
+    centerMode: true,
+    cssEase: "linear",
+    variableWidth: isMobile ? false : true,
+    arrows: false,
+  };
+  return (
+    <Slider ref={slider} {...settings}>
+      {children}
+    </Slider>
+  );
 }
 
 export default ReactSlider;

components/Speaker/speaker.js

@@ -1,30 +1,29 @@
 import React from 'react'
 
-function Speaker({details, location, className}) {
+function Speaker({details, location, className, size='md'}) {
   return (
 		<div
-			className={`w-auto text-center flex flex-col items-center card-bg h-auto rounded-md p-[27px] ${className}`}
+			className={`w-[300px]  my-5 text-center flex flex-col items-center card-bg h-auto rounded-md p-7 ${className}`}
 		>
-			<div className='w-[300px] h-[300px] lg:w-[250px] lg:h-[250px]'>
+			<div className='w-[200px] h-[200px]'>
 				<img
 					src={details.img}
 					alt={details.name}
-					className='rounded-full w-full h-full object-cover'
+					className='rounded-full hover:scale-105 transition-transform w-full h-full object-cover'
 				/>
 			</div>
-			<div className='mt-[19px]'>
-				<h3 className='text-[23px] text-white'>{details.name}</h3>
+			<div className='mt-5'>
+				<h3 className='text-xl font-semibold  text-white'>{details.name}</h3>
 				<div
 					className={`flex flex-col ${
-						location && 'min-h-[150px]'
+						location ? 'min-h-[150px]':''
 					} justify-between`}
 				>
 					<div>
-						{' '}
-						<p className='mt-[6.6px] text-[20px] text-gray'>{details.title}</p>
+						<p className='mt-[6.6px] text-md text-white'>{details.title}</p>
 					</div>
 					<div>
-						<p className='mt-[6.6px] text-[20px] text-gray'>
+						<p className='mt-[6.6px] text-md text-gray'>
 							{location?.location}
 						</p>
 					</div>

components/Venue/venue.js

@@ -1,31 +1,50 @@
 /* eslint-disable react/no-unescaped-entities */
-import React from 'react';
+import React from "react";
 
 function Venue({ className, city }) {
-	return (
-		<div>
-			<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'>
-				<div className='flex justify-between flex-col w-full h-full'>
-					<div className='flex justify-between items-center'>
-						<div><div className={`border text-white text-md rounded-lg p-1 text-center mt-2 ${city.cfp ? 'block': 'hidden' }`}>cfp is open</div></div>
-						<a href={city.map} target='_blank' className='w-8 h-8 bg-white rounded-xl flex items-center justify-center' rel="noreferrer">
-						<img src='/img/mapIcon.svg' className='w-6' />
-						</a>
-					</div>
-					<div></div>
-					<div className='text-white'>
-						<div>
-							<span className='text-lg font-bold'>{city.country}, {city.name}</span>
-						</div>
-						<div className='flex items-center justify-between w-full'>
-						<div className='border border-gray-400 rounded-lg p-1 text-center mt-2'>{city.date}</div>
-						</div>
-					</div>
-					</div>
-				</div>
-		</div>
-	);
+  return (
+    <div>
+      <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"
+      >
+        <div className="flex justify-between flex-col w-full h-full">
+          <div className="flex justify-between items-center">
+            <div>
+              <div
+                className={`border text-white text-md rounded-lg p-1 text-center mt-2 ${
+                  city.cfp ? "block" : "hidden"
+                }`}
+              >
+                cfp is open
+              </div>
+            </div>
+            <a
+              href={city.map}
+              target="_blank"
+              className="w-8 h-8 bg-white rounded-xl flex items-center justify-center"
+              rel="noreferrer"
+            >
+              <img src="/img/mapIcon.svg" className="w-6" />
+            </a>
+          </div>
+          <div></div>
+          <div className="text-white">
+            <div>
+              <span className="text-lg font-bold">
+                {city.country}, {city.name}
+              </span>
+            </div>
+            <div className="flex items-center justify-between w-full">
+              <div className="border border-gray-400 rounded-lg p-1 text-center mt-2">
+                {city.date}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export default Venue;