From e234e3451eb05f7c38532da4fb726bbca4facb40 Mon Sep 17 00:00:00 2001
From: Rohan <r0hansingh@Rohans-MacBook-Pro.local>
Date: Thu, 9 Jan 2025 13:20:14 +0530
Subject: [PATCH 1/2] Hey! i have added a hovering effect for cards in venue.js
 file in first link tag just after return statement by using tailwind css.

---
 components/Venue/venue.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/Venue/venue.js b/components/Venue/venue.js
index bc24eb5d..6c14bfdc 100644
--- a/components/Venue/venue.js
+++ b/components/Venue/venue.js
@@ -29,14 +29,14 @@ function Venue({ className, city }) {
 	return (
 		<Link href={`/venue/${city.name}`}>
 			<div style={{background: `linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0, .3)), url(${city.img})`, backgroundSize: "cover"}}
-				className='relative w-[300px] h-[400px] sm:w-[250px] sm:h-[350px] card-bg rounded-md bg-[image:var(--image-url)] flex items-center justify-center p-4 cursor-pointer m-2'>
-				<div className='flex justify-between flex-col w-full h-full'>
+				className='relative w-[300px] h-[400px] sm:w-[250px] sm:h-[350px] card-bg rounded-md bg-[image:var(--image-url)] flex items-center justify-center p-4 cursor-pointer m-2 hover:shadow-[0_4px_20px_10px_rgba(0,0,0,0.3)] hover:scale-105 transition-all duration-300 ease-in-out'>
+				<div className='flex flex-col justify-between w-full h-full'>
 					<div className='flex items-center'>
 						{city.cfp? <div className={`border ${textColor} text-md rounded-lg p-1 text-center mt-2`}>cfp is open</div> :null}
 						<button onClick={(e) => {
 							e.preventDefault()
 							window.open(city.map, '_blank', 'noopener')
-						}} className='w-8 h-8 bg-white rounded-xl flex items-center justify-center ml-auto'>
+						}} className='flex items-center justify-center w-8 h-8 ml-auto bg-white rounded-xl'>
 							<Image src='/img/mapIcon.svg' alt='Map Icon' width={24} height={24} />
 						</button>
 					</div>
@@ -45,8 +45,8 @@ function Venue({ className, city }) {
 						<div>
 							{city.name=='Online'?<span className='text-lg font-bold'>{city.name} {city.country}</span>:<span className='text-lg font-bold'>{city.country}, {city.name}</span>}
 						</div>
-						<div className='flex align-end flex-row justify-between pt-2'>
-							<div className='inline-block border border-gray-400 rounded-lg py-1 px-2 text-center sm:text-sm text-base'>{city.date}</div>
+						<div className='flex flex-row justify-between pt-2 align-end'>
+							<div className='inline-block px-2 py-1 text-base text-center border border-gray-400 rounded-lg sm:text-sm'>{city.date}</div>
 							<span className=' text-white flex align-middle pt-2 sm:text-[0.8rem] sm:leading-4 text-base'>{eventStatus}</span>
 						</div>
 					</div>

From 960583f298a077c7993756f232698f94b866bfd9 Mon Sep 17 00:00:00 2001
From: Rohan <r0hansingh@Rohans-MacBook-Pro.local>
Date: Thu, 9 Jan 2025 13:26:18 +0530
Subject: [PATCH 2/2] feat: add hover effect in the card components in venue.js
 file

---
 components/Venue/venue.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Venue/venue.js b/components/Venue/venue.js
index 6c14bfdc..3102cf23 100644
--- a/components/Venue/venue.js
+++ b/components/Venue/venue.js
@@ -29,7 +29,7 @@ function Venue({ className, city }) {
 	return (
 		<Link href={`/venue/${city.name}`}>
 			<div style={{background: `linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0, .3)), url(${city.img})`, backgroundSize: "cover"}}
-				className='relative w-[300px] h-[400px] sm:w-[250px] sm:h-[350px] card-bg rounded-md bg-[image:var(--image-url)] flex items-center justify-center p-4 cursor-pointer m-2 hover:shadow-[0_4px_20px_10px_rgba(0,0,0,0.3)] hover:scale-105 transition-all duration-300 ease-in-out'>
+				className='relative w-[300px] h-[400px] sm:w-[250px] sm:h-[350px] card-bg rounded-md bg-[image:var(--image-url)] flex items-center justify-center p-4 cursor-pointer m-2 hover:shadow-[0_4px_20px_10px_rgba(0,0,0,0.3)] hover:scale-105 transition-all duration-350 ease-in-out'>
 				<div className='flex flex-col justify-between w-full h-full'>
 					<div className='flex items-center'>
 						{city.cfp? <div className={`border ${textColor} text-md rounded-lg p-1 text-center mt-2`}>cfp is open</div> :null}