feat: update ticket cards (asyncapi#359)

Co-authored-by: acethecreator <[email protected]>

components/Header/header.js

@@ -33,9 +33,9 @@ function Header() {
 							</div>
 							<div className='mt-[54px] relative flex items-center justify-center'>
 								<Link
-									href='#register'
+									href='#tickets'
 								>
-									<Button className='w-[250px]'>Register now</Button>
+									<Button className='w-[250px]'>Register Now</Button>
 								</Link>
 							</div>
 						</div>

components/Tickets/ticketCards.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Button from '../Buttons/button';
+
+function TicketCards({ className, city }) {
+  // Determine card style based on event status
+  const isEndedOrUpcoming = city.ended || !city.ticket;
+  const cardOpacity = isEndedOrUpcoming ? 'opacity-40' : 'opacity-100';
+  const buttonText = city.isFree ? 'Get Your Ticket' : 'Buy Now';
+
+  return (
+    <div className={`w-[300px] lg:w-full ${cardOpacity} hoverEffect h-[400px] cursor-pointer 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'>
+        {/* Show a button based on the event status */}
+        {isEndedOrUpcoming ? (
+          <Button disabled overlay={true} className='w-[200px] bg-gray-400'>
+            {city.ended ? 'Ended' : 'Coming soon'}
+          </Button>
+        ) : (
+          <a href={city.ticket} target='_blank' rel='noreferrer'>
+            <Button className='w-[200px]'>{buttonText}</Button>
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default TicketCards;

config/city-lists.json

@@ -11,8 +11,8 @@
 			"/img/apidays.png"
 		],
 		"ticket": false,
-		"isFree": true,
-		"ended": false
+		"isFree": false,
+		"ended": true
 	},
 	{
 		"name": "London",

config/links.json

@@ -25,6 +25,10 @@
 		"title": "Speakers",
 		"ref": "/#speakers"
 	},
+	{
+		"title": "Tickets",
+		"ref": "/#tickets"
+	},
 	{
 		"title": "Sponsors",
 		"ref": "/#sponsors"

pages/index.js

@@ -7,7 +7,7 @@ import Header from '../components/Header/header';
 import cities from '../config/city-lists.json';
 import Sponsors from '../components/Sponsors/sponsors';
 import About from '../components/About/about';
-import TicketCards from '../components/Cards/ticketCards';
+import TicketCards from '../components/Tickets/ticketCards';
 import Heading from '../components/Typography/heading';
 import Paragraph from '../components/Typography/paragraph';
 import Subscription from '../components/Form/subscription';
@@ -156,16 +156,16 @@ export default function Home() {
 						</div>
 					</div>
 				</div>
-			<div className='flex items-center'>
+			<div id='tickets' className='flex items-center'>
 				<div className='w-[40px] h-[3px] bg-blue-400' />
 				<div className='ml-4 text-lg sm:text-sm text-white font-semi-bold'>Tickets</div>
 			</div>
 			<Heading typeStyle='heading-md' className='text-gradient text-center lg:mt-10'>
-				Tickets Sale [Coming Soon]
+				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: Tickets for Sale for the AsyncAPI Conference on Tour!
+			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'>

styles/globals.css

@@ -205,6 +205,10 @@ mix-blend-mode: lighten;
   transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
 }
 
+.card-opacity:hover{
+  opacity: 100;
+}
+
 .hoverEffect:hover {
   transform: scale(1.1); /* Scale the image by 10% on hover */
 }