fix: added micro-interactions to improve the website ui design #356 (#…

…381) * fix issue #356 * hover interactions are added --------- Co-authored-by: Cody's Dad <[email protected]>
asyncapi · Sep 16, 2024 · 2651f8d · 2651f8d
1 parent af3aadc
commit 2651f8d
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git a/components/Buttons/button.js b/components/Buttons/button.js
@@ -6,7 +6,7 @@ function Button({className, children, overlay, onClick, type, disabled}) {
 		  disabled={disabled}
 		  type={type}
 		  onClick={onClick}
-			className={`${overlay ? '' : 'gradient-bg'} text-white h-[54px] rounded-md p-[8px] ${className}`}
+			className={`${overlay ? '' : 'gradient-bg'}  text-white h-[54px] rounded-md p-[8px] ${className}`}
       >{children}</button>
 	);
 }

diff --git a/components/Navbar/navbar.js b/components/Navbar/navbar.js
@@ -94,13 +94,13 @@ function Navbar() {
 					) : (
 						<div className='flex items-center'>
 							{links.map((link) => (
-								<div href={link.ref} key={link.title}>
+								<div href={link.ref} key={link.title} >
 									<div
 										onMouseEnter={() => handleMouseEnter(link.title)}
 										onMouseLeave={handleMouseLeave}
-										className='ml-16 text-[14px] group cursor-pointer relative flex flex-col'
+										className='ml-16 text-[14px] group cursor-pointer relative flex flex-col '
 									>
-										<div>
+										<div >
 											{link.subMenu ? (
 												<div className='flex items-center'>
 													{link.title}{' '}
@@ -113,9 +113,12 @@ function Navbar() {
 													)}
 												</div>
 											) : (
-												<Link href={link.ref}>{link.title}</Link>
+												<Link href={link.ref} >{link.title}</Link>
 											)}
+
 										</div>
+										<span class="after:absolute after:-bottom-1 after:left-1/2 after:w-0 after:transition-all after:h-0.5 after:bg-white after:group-hover:w-3/6  "></span>
+                                       <span class="after:absolute after:-bottom-1 after:right-1/2 after:w-0 after:transition-all after:h-0.5 after:bg-white after:group-hover:w-3/6"></span>
 										{show === link.title && link.subMenu && (
 											<div
 												className='subMenu absolute z-[9] mt-8 w-[140px] rounded-md left-[-15px] gradient-bg px-2 py-1 flex flex-col justify-center space-y-0'

diff --git a/components/Speaker/speaker.js b/components/Speaker/speaker.js
@@ -6,8 +6,8 @@ function Speaker({details, location, className}) {
 		<div
 			className={`w-auto text-center flex flex-col items-center card h-auto rounded-md p-[27px] ${className}`}
 		>
-			<div className='w-[300px] h-[300px] lg:w-[250px] lg:h-[250px]'>
-				<Image src={details.img} alt={details.name} width={0} height={0} sizes='100vw' className='rounded-full object-cover' />
+			<div className='w-[300px] h-[300px] lg:w-[250px] lg:h-[250px] relative overflow-hidden  rounded-full'>
+				<Image src={details.img} alt={details.name} width={0} height={0} sizes='100vw' className='rounded-full    object-cover  transition-all duration-300 hover:scale-110' />
 			</div>
 			<div className='mt-[19px]'>
 				<h3 className='text-[23px] text-white'>{details.name}</h3>

diff --git a/pages/index.js b/pages/index.js
@@ -95,11 +95,20 @@ export default function Home() {
 													className={`w-[168px] ${
 														city.city === speaker.city
 															? 'gradient-bg'
-															: 'border border-gray'
+															: 'border border-gray btn relative  overflow-hidden  transition-all  rounded  group py-1.5 px-2.5 '
 													}`}
 													overlay={true}
 													>
-													{speaker.city}
+													{/* {speaker.city} */}
+	 												{city.city !== speaker.city && (
+        <>
+        <span className="transparent-bg "></span>
+        <span className="relative w-full  rounded transition-colors duration-300 ease-in-out group-hover:text-white">
+          {speaker.city}
+        </span>
+      </>
+    )}
+    {city.city === speaker.city && speaker.city}
 													</Button>
 												</div>
 											);

diff --git a/styles/globals.css b/styles/globals.css
@@ -87,6 +87,9 @@ body {
   opacity: 1;
 }
 
+.transparent-bg{
+  @apply w-56 h-48 rounded gradient-bg absolute bottom-0 left-0 translate-x-full ease-out duration-500 transition-all translate-y-full mb-9 ml-9 group-hover:ml-0 group-hover:mb-32 group-hover:translate-x-0
+}
 .navbg:hover, .navbg:focus{
     background: linear-gradient(225deg, #AD20E2 9.35%, #2DCCFD 88.41%);
 }