ticket update

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",
@@ -44,24 +44,5 @@
 		"isFree": true,
 		"ended": false,
 		"cfp": "https://apidays.typeform.com/to/ILJeAaV8?typeform-source=www.apidays.global#event_name=xxxxx"
-	},
-
-	{
-
-		"name": "Online",
-		"country": " Edition",
-		"date": "30th October 2024",
-		"description": "Join us for the AsyncAPI Online Conference Edition as the community unites across the globe to share experiences, collaborate, and foster meaningful connections.",
-		"img": "/img/testMic.png",
-		"address": "AsyncAPI Youtube Channel",
-		"map": "https://www.youtube.com/@AsyncAPI",
-		"sponsors": [
-			"/img/apidays.png"
-		],
-		"ticket": false,
-		"isFree": true,
-		"ended": false,
-		"cfp": "/venue/online/register"
-
 	}
 ]

config/links.json

@@ -15,10 +15,6 @@
 				"title": "London, UK",
 				"ref": "/venue/London"
 			},
-			{
-				"title": "Online",
-				"ref": "/venue/Online"
-			},
 			{
 				"title": "Paris, France",
 				"ref": "/venue/Paris"
@@ -29,6 +25,10 @@
 		"title": "Speakers",
 		"ref": "/#speakers"
 	},
+	{
+		"title": "Tickets",
+		"ref": "/#tickets"
+	},
 	{
 		"title": "Sponsors",
 		"ref": "/#sponsors"
@@ -51,7 +51,4 @@
 	]
 }
 
-]
-
-
-
+]

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'>
@@ -181,4 +181,4 @@ export default function Home() {
 			</div>
 		</div>
 	);
-}
+}

styles/globals.css

@@ -206,6 +206,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 */
 }