feat: add hover transform effect to card components (asyncapi#599)

Co-authored-by: Ram Shukla <codewithrex@gmail.com>

Author: Recxsmacx

components/Sponsors/sponsors.js

@@ -20,12 +20,7 @@ function Sponsors({ eventSponsors, financialSponsor }) {
             we 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 flex-col  items-center">
           {eventSponsors &&
             eventSponsors.map((sponsor) => (
@@ -48,12 +43,7 @@ function Sponsors({ eventSponsors, financialSponsor }) {
           <div className="flex flex-col space-y-6">
             {financialSponsor && (
               <div>
-                <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>
                 {financialSponsor.map((sponsor) => (
                   <div
                     key={sponsor.image}

components/Venue/venue.js

@@ -29,15 +29,13 @@ 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-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'>
-							<Image src='/img/mapIcon.svg' alt='Map Icon' width={24} height={24} />
+						}} 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>
 					<div></div>

pages/index.js

@@ -233,19 +233,7 @@ export default function Home() {
         </div>
       </div>
       <div id="sponsors" className="mt-20">
-        <Sponsors
-          eventSponsors={[
-            {
-              image: "/img/logos/apidays.png",
-              websiteUrl: "https://www.apidays.global/",
-            },
-            {
-              image: "/img/logos/APICONF-LOGO-White.png",
-              websiteUrl: "https://apiconf.net/",
-            },
-          ]}
-          // 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 />