Skip to content

Commit

Permalink
feat: preparation for 2024 conference on tour (#263)
Browse files Browse the repository at this point in the history 
* updated conf logo

* completed the heading page

* adding correct venues

* used default background color

* making page responsive

* fixed about layouting issue

* making page responsive

* made homepage responsive

* adding info to venue section

* ready for initial review

* fixed compiler issue

* adding ticket section

* added ticket section

* added suggested changes

* updated cfp link

* changed button placeholder

* added links length

* .
  • Loading branch information
@AceTheCreator
AceTheCreator authored Mar 5, 2024
1 parent 693a383 commit a6d4aa2
Show file tree
Hide file tree
Showing 28 changed files with 247 additions and 1,524 deletions.
61 changes: 36 additions & 25 deletions components/About/about.js
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,48 @@
/* 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>
<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>
);
}

Expand Down
16 changes: 16 additions & 0 deletions components/Cards/ticketCards.js
View file
Original file line number Diff line number Diff line change
@@ -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
29 changes: 14 additions & 15 deletions components/Footer/footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -58,7 +57,7 @@ function Footer() {
</div>
</div>
</div>
</div>
</div>
</div>
);
}
Expand Down
115 changes: 27 additions & 88 deletions components/Header/header.js
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}
Expand Down
11 changes: 6 additions & 5 deletions components/Navbar/navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' />
Expand All @@ -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>
Expand Down
Loading

0 comments on commit a6d4aa2

Please sign in to comment.