From 48fedaba5a8afeb6178e6f5c61b45cded6a3b556 Mon Sep 17 00:00:00 2001
From: acethecreator <devaze007@gmail.com>
Date: Fri, 30 Aug 2024 15:30:27 +0100
Subject: [PATCH] ticket update

---
 components/Cards/ticketCards.js   | 16 ----------------
 components/Tickets/ticketCards.js | 32 +++++++++++++++++++++++++++++++
 config/city-lists.json            | 23 ++--------------------
 config/links.json                 | 13 +++++--------
 pages/index.js                    | 10 +++++-----
 styles/globals.css                |  4 ++++
 6 files changed, 48 insertions(+), 50 deletions(-)
 delete mode 100644 components/Cards/ticketCards.js
 create mode 100644 components/Tickets/ticketCards.js

diff --git a/components/Cards/ticketCards.js b/components/Cards/ticketCards.js
deleted file mode 100644
index 7589c054..00000000
--- a/components/Cards/ticketCards.js
+++ /dev/null
@@ -1,16 +0,0 @@
-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
\ No newline at end of file
diff --git a/components/Tickets/ticketCards.js b/components/Tickets/ticketCards.js
new file mode 100644
index 00000000..5f73b8e4
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/config/city-lists.json b/config/city-lists.json
index dae2f5c6..4f03a80b 100644
--- a/config/city-lists.json
+++ b/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"
-
 	}
 ]
\ No newline at end of file
diff --git a/config/links.json b/config/links.json
index 01a5cf41..af6329b4 100644
--- a/config/links.json
+++ b/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 @@
 	]
 }
 
-]
-
-
-    
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index d418853a..cb31ea3c 100644
--- a/pages/index.js
+++ b/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>
 	);
-}
+}
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index 1b73bfb3..120c7c0d 100644
--- a/styles/globals.css
+++ b/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 */
 }
\ No newline at end of file