style: enhance hover effect on venue card and map icon (Fixes #492)

components/Sponsors/sponsors.js

@@ -17,7 +17,7 @@ function Sponsors({eventSponsors,financialSponsor}) {	 //eventSponsors,financial
 						orchestrate an unforgettable celebration.
 					</Paragraph>
 				</div>
-				<Heading typeStyle='heading-md' className='text-white mt-10 sm:text-2xl sm:mt-5'>Event and Host Sponsor</Heading>
+				<Heading typeStyle='heading-md' className='text-gray-800 mt-10 sm:text-2xl sm:mt-5'>Event and Host Sponsor</Heading>
 				<div className='flex justify-center  w-[650px] sm:w-full sm:flex-col sm:justify-center sm:items-center'>
 					{eventSponsors &&
 						eventSponsors.map((sponsor) => (
@@ -31,7 +31,7 @@ function Sponsors({eventSponsors,financialSponsor}) {	 //eventSponsors,financial
 						))}
 				</div>
 				<div className=' flex space-y-2 flex-col items-center justify-center text-white text-2xl font-bold'>
-				<Heading typeStyle='heading-md' className='text-white mb-12 sm:text-2xl'>Financial Sponsor</Heading>
+				<Heading typeStyle='heading-md' className='text-gray-800 mb-12 sm:text-2xl'>Financial Sponsor</Heading>
 				<div className='flex flex-col space-y-6'>
 					{financialSponsor &&
 						financialSponsor.map((sponsor) => (

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'>
+				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-3 hover:scale-105 hover:shadow-xl transition-transform duration-300 ease-in-out'>
 				<div className='flex justify-between flex-col 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='w-8 h-8 bg-white rounded-xl flex items-center justify-center ml-auto hover:bg-gray-400 transition-colors duration-300'>
 							<Image src='/img/mapIcon.svg' alt='Map Icon' width={24} height={24} />
 						</button>
 					</div>

pages/index.js

@@ -186,7 +186,7 @@ export default function Home() {
 			</div>
 			</div>
 			<div id='sponsors' className='mt-20'>
-				<Sponsors eventSponsors={[{image:'/img/apidays.png',websiteUrl:"https://www.apidays.global/"}]} financialSponsor={[{image:"/img/graviteeio.svg" , websiteUrl: "https://www.gravitee.io/",className:"w-[250px] h-[50px]" } , {image:"/img/postman.png" ,websiteUrl:"https://www.postman.com/",className:"w-[240px] h-[70px]"}]}  />
+				<Sponsors eventSponsors={[{image:'/img/apidays_2.webp',websiteUrl:"https://www.apidays.global/"}]} financialSponsor={[{image:"/img/graviteeIo_1.png" , websiteUrl: "https://www.gravitee.io/",className:"w-[250px] h-[50px]" } , {image:"/img/postman_1.png" ,websiteUrl:"https://www.postman.com/",className:"w-[240px] h-[70px]"}]}  />
 			</div>
 			<div className='mt-5'>
 			<Subscription/>