Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add Hover Animations with Tailwind CSS to “Join the AsyncAPI Conf in Paris” Button #512 #515

Closed
wants to merge 2 commits into from
+215 −136
Closed

feat: add Hover Animations with Tailwind CSS to “Join the AsyncAPI Conf in Paris” Button #512 #515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
75491f7
fix: align 'Get Tickets' section and improve design
Jan 10, 2025
42feaab
feat: Add hover animations to 'Join the AsyncAPI Conf in Paris' button
Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions components/announcement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ 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'>Join the AsyncAPI Conf in Paris!</div>
<div className="announcement">
<span>Join the AsyncAPI Conf in Paris!</span>
</div>
</Link>
)
}
);
}
270 changes: 138 additions & 132 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@ export default function Home() {
}
});
const list = speakers[0].lists.filter((obj, index) => {
return index === speakers[0].lists.findIndex(o => obj.name=== o.name);
return index === speakers[0].lists.findIndex(o => obj.name === o.name);
});
speakers[0].lists =[...list];
speakers[0].lists = [...list];

useEffect(() => {
setCity(speakers[0]);
setSpeakersList(speakers[0].lists);
},[]);
}, []);
return (
<div>
<Head>
Expand All @@ -49,148 +49,154 @@ export default function Home() {
<About />
</div>
<div id="register" className='container mt-20'>
<div className='flex items-center flex-col justify-center'>
<div
id='speakers'
className='relative flex flex-col items-center justify-center'
>
<div className='text-center'>
<div className='flex items-center justify-center'>
<div className='text-lg sm:text-sm text-white font-semi-bold border-b-2 border-blue-400 mb-1'>Speakers</div>
</div>
</div>
<Heading typeStyle='heading-md' className='text-gradient text-center lg:mt-10'>
Meet The Speakers
</Heading>
<div className='max-w-3xl sm:w-full text-center'>
<Paragraph typeStyle='body-lg' className="mt-6" textColor='text-gray-200' >
Discover the inspiring voices shaping our event, each bringing unique insights and expertise to the forefront of their respective fields.
</Paragraph>
</div>
<div className='lg:py-20 w-[1130px] lg:w-full'>
<div className='mt-[64px] '>
{isTablet ? (
<div className='w-full'>
<Dropdown
active={city.city}
items={speakers}
setOptions={setCity}
setOptions2={setSpeakersList}
/>
<div className='flex items-center flex-col justify-center'>
<div
id='speakers'
className='relative flex flex-col items-center justify-center'
>
<div className='text-center'>
<div className='flex items-center justify-center'>
<div className='text-lg sm:text-sm text-white font-semi-bold border-b-2 border-blue-400 mb-1'>Speakers</div>
</div>
</div>
) : (
<div className='flex justify-center'>
<div className='w-[900px] lg:w-full flex justify-between'>
{speakers.map((speaker) => {
return (
<div
key={speaker.location}
onClick={() => {
setCity(speaker);
setSpeakersList(speaker.lists);
}}
>
<Button
className={`w-[168px] ${
city.city === speaker.city
? 'gradient-bg'
: 'border border-gray btn relative overflow-hidden transition-all rounded group py-1.5 px-2.5 '
}`}
overlay={true}
<Heading typeStyle='heading-md' className='text-gradient text-center lg:mt-10'>
Meet The Speakers
</Heading>
<div className='max-w-3xl sm:w-full text-center'>
<Paragraph typeStyle='body-lg' className="mt-6" textColor='text-gray-200' >
Discover the inspiring voices shaping our event, each bringing unique insights and expertise to the forefront of their respective fields.
</Paragraph>
</div>
<div className='lg:py-20 w-[1130px] lg:w-full'>
<div className='mt-[64px] '>
{isTablet ? (
<div className='w-full'>
<Dropdown
active={city.city}
items={speakers}
setOptions={setCity}
setOptions2={setSpeakersList}
/>
</div>
) : (
<div className='flex justify-center'>
<div className='w-[900px] lg:w-full flex justify-between'>
{speakers.map((speaker) => {
return (
<div
key={speaker.location}
onClick={() => {
setCity(speaker);
setSpeakersList(speaker.lists);
}}
>
{/* {speaker.city} */}
{city.city !== speaker.city && (
<>
<span className="transparent-bg "></span>
<span className="relative w-full rounded transition-colors duration-300 ease-in-out group-hover:text-white">
{speaker.city}
</span>
</>
)}
{city.city === speaker.city && speaker.city}
</Button>
</div>
);
})}
<Button
className={`w-[168px] ${city.city === speaker.city
? 'gradient-bg'
: 'border border-gray btn relative overflow-hidden transition-all rounded group py-1.5 px-2.5 '
}`}
overlay={true}
>
{/* {speaker.city} */}
{city.city !== speaker.city && (
<>
<span className="transparent-bg "></span>
<span className="relative w-full rounded transition-colors duration-300 ease-in-out group-hover:text-white">
{speaker.city}
</span>
</>
)}
{city.city === speaker.city && speaker.city}
</Button>
</div>
);
})}
</div>
</div>
</div>
)}
</div>
)}
</div>

<div className='mt-[64px] pb-[181px]'>
{typeof speakersList === 'string' ? (
<div className='mt-[140px] flex items-center justify-center text-center'>
<div className='w-[720px] lg:w-full'>
<Heading className='text-white'>
{city.city} Speakers To Be Announced Soon - Stay Tuned!
</Heading>
<div className='mt-[64px] pb-[181px]'>
{typeof speakersList === 'string' ? (
<div className='mt-[140px] flex items-center justify-center text-center'>
<div className='w-[720px] lg:w-full'>
<Heading className='text-white'>
{city.city} Speakers To Be Announced Soon - Stay Tuned!
</Heading>
</div>
</div>
</div>
) : Object.keys(speakersList).length > 0 ? (
<div className='w-full grid grid-cols-3 lg:grid-cols-2 sm:grid-cols-1 gap-4'>
{speakersList.map((speaker, i) => {
return (
<Speaker
key={i}
details={speaker}
location={city}
className='mt-10'
/>
);
})}
</div>
) : (
<div className='mt-[140px] flex items-center justify-center text-center'>
<div className='w-[720px] lg:w-full'>
<Heading typeStyle='heading-md' className='text-white'>
{city.city} Speakers Coming Soon - Stay Tuned!
</Heading>
<Paragraph className='mt-12 text-gray-200'>
We are actively accepting speaker applications, and you
can start your journey by clicking the button below. Join
us on stage and share your valuable insights with our
enthusiastic audience!
</Paragraph>
<Link legacyBehavior href="https://apidays.typeform.com/to/ILJeAaV8?typeform-source=www.apidays.global#event_name=xxxxx">
<a className='flex justify-center' target="_blank">
<Button className='mt-[80px] w-[244px] border border-gray card-bg'>
Apply as a Speaker
</Button>
</a>
</Link>
) : Object.keys(speakersList).length > 0 ? (
<div className='w-full grid grid-cols-3 lg:grid-cols-2 sm:grid-cols-1 gap-4'>
{speakersList.map((speaker, i) => {
return (
<Speaker
key={i}
details={speaker}
location={city}
className='mt-10'
/>
);
})}
</div>
) : (
<div className='mt-[140px] flex items-center justify-center text-center'>
<div className='w-[720px] lg:w-full'>
<Heading typeStyle='heading-md' className='text-white'>
{city.city} Speakers Coming Soon - Stay Tuned!
</Heading>
<Paragraph className='mt-12 text-gray-200'>
We are actively accepting speaker applications, and you
can start your journey by clicking the button below. Join
us on stage and share your valuable insights with our
enthusiastic audience!
</Paragraph>
<Link legacyBehavior href="https://apidays.typeform.com/to/ILJeAaV8?typeform-source=www.apidays.global#event_name=xxxxx">
<a className='flex justify-center' target="_blank">
<Button className='mt-[80px] w-[244px] border border-gray card-bg'>
Apply as a Speaker
</Button>
</a>
</Link>
</div>
</div>
)}
</div>
</div>
</div>
<div id='tickets' className='flex items-center'>
<div className='text-lg sm:text-sm text-white font-semi-bold border-b-2 border-blue-400 mb-1'>Tickets</div>
</div>
<div data-test="ticket-section">
<div className="bg-darkBlue-900 py-16 px-8">
<div className="max-w-4xl mx-auto text-center">
<h2 className="text-4xl font-bold text-blue-500 mb-4">
Get Tickets
</h2>
<p className="text-lg text-gray-200 mb-6">
Experience the Future of Asynchronous Communication: Get Tickets for the <br /> AsyncAPI Conference on Tour!
</p>
<div className="flex justify-center">
<Button className="bg-blue-500 hover:bg-blue-600 text-white text-lg font-medium py-3 px-8 rounded shadow-lg transition">
Buy Tickets
</Button>
</div>
)}
</div>
</div>
<div className='w-[1000px] lg:w-full mt-10 flex justify-between lg:flex-col'>
{cities.map((city) => {
if (city.ended === false) {
return <TicketCards key={city.name} city={city} className='lg:mt-10' />
}
})}
</div>
</div>
</div>
<div id='tickets' className='flex items-center'>
<div className='text-lg sm:text-sm text-white font-semi-bold border-b-2 border-blue-400 mb-1'>Tickets</div>
</div>
<div data-test="ticket-section">
<Heading typeStyle='heading-md' className='text-gradient text-center lg:mt-10'>
Get Tickets
</Heading>
<div className='max-w-3xl sm:w-full text-center'>
<Paragraph typeStyle='body-lg' className="mt-6" textColor='text-gray-200' >
Experience the Future of Asynchronous Communication: Get Tickets for the AsyncAPI Conference on Tour!
</Paragraph>
</div>
<div className='w-[1000px] lg:w-full mt-10 flex justify-between lg:flex-col'>
{cities.map((city) => {
if(city.ended === false){
return <TicketCards key={city.name} city={city} className='lg:mt-10' />
}
})}
</div>
</div>
</div>
</div>
<div id='sponsors' className='mt-20'>
<Sponsors eventSponsors={[{image:'/img/apidays.png',websiteUrl:"https://www.apidays.global/"}]} financialSponsor={[{image:"/img/graviteeio.svg" , websiteUrl: "https://www.gravitee.io/",className:"w-[250px] h-[50px]" } , {image:"/img/postman.png" ,websiteUrl:"https://www.postman.com/",className:"w-[240px] h-[70px]"}]} />
<Sponsors eventSponsors={[{ image: '/img/apidays.png', websiteUrl: "https://www.apidays.global/" }]} financialSponsor={[{ image: "/img/graviteeio.svg", websiteUrl: "https://www.gravitee.io/", className: "w-[250px] h-[50px]" }, { image: "/img/postman.png", websiteUrl: "https://www.postman.com/", className: "w-[240px] h-[70px]" }]} />
</div>
<div className='mt-5'>
<Subscription/>
<Subscription />
</div>
</div>
);
Expand Down
73 changes: 72 additions & 1 deletion styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,4 +225,75 @@ mix-blend-mode: lighten;

.hoverEffect:hover {
transform: scale(1.1); /* Scale the image by 10% on hover */
}
}

.announcement {
background: linear-gradient(to right, #8b5cf6, #ec4899);
color: white;
padding: 0.3rem 0.6rem;
text-align: center;
font-size: 0.9rem;
font-weight: 500;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.3s ease-in-out;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transform: scale(1);
max-width: 200px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

.announcement::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 300%;
height: 300%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
transform: translate(-50%, -50%) scale(0);
transition: transform 0.5s ease-in-out;
pointer-events: none;
}

.announcement:hover {
background: linear-gradient(to right, #ec4899, #8b5cf6);
transform: scale(1.05);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.5);
}

.announcement:hover::before {
transform: translate(-50%, -50%) scale(1);
}

.announcement span {
display: inline-block;
transition: transform 0.3s ease-in-out;
}

.announcement:hover span {
transform: scale(1.1);
}

@media (min-width: 768px) {
.announcement {
padding: 0.4rem 0.7rem;
max-width: 220px;
}
}

@media (min-width: 1024px) {
.announcement {
padding: 0.5rem 0.8rem;
max-width: 240px;
}
}

@media (min-width: 1280px) {
.announcement {
padding: 0.6rem 1rem;
max-width: 260px;
}
}
Loading