From 066c265efd450829accb10f1a0c77545322205ad Mon Sep 17 00:00:00 2001
From: V Thulisile Sibanda <66913810+thulieblack@users.noreply.github.com>
Date: Fri, 23 Aug 2024 09:35:35 +0200
Subject: [PATCH] feat: update ticket cards (#359)

Co-authored-by: acethecreator <devaze007@gmail.com>
---
 components/Cards/ticketCards.js   | 16 ----------------
 components/Header/header.js       |  4 ++--
 components/Tickets/ticketCards.js | 32 +++++++++++++++++++++++++++++++
 config/city-lists.json            |  4 ++--
 config/links.json                 |  4 ++++
 pages/index.js                    |  8 ++++----
 styles/globals.css                |  4 ++++
 7 files changed, 48 insertions(+), 24 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/Header/header.js b/components/Header/header.js
index 08d55b4d..9f077bf9 100644
--- a/components/Header/header.js
+++ b/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>
diff --git a/components/Tickets/ticketCards.js b/components/Tickets/ticketCards.js
new file mode 100644
index 00000000..e88e72c7
--- /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;
diff --git a/config/city-lists.json b/config/city-lists.json
index 0a564927..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",
diff --git a/config/links.json b/config/links.json
index 155bb309..4627249e 100644
--- a/config/links.json
+++ b/config/links.json
@@ -25,6 +25,10 @@
 		"title": "Speakers",
 		"ref": "/#speakers"
 	},
+	{
+		"title": "Tickets",
+		"ref": "/#tickets"
+	},
 	{
 		"title": "Sponsors",
 		"ref": "/#sponsors"
diff --git a/pages/index.js b/pages/index.js
index d418853a..7830810b 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'>
diff --git a/styles/globals.css b/styles/globals.css
index 6d1d8e73..8cbe22f1 100644
--- a/styles/globals.css
+++ b/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 */
 }
\ No newline at end of file