Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 5 commits into from
Sep 16, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8051d4e
fix issue #356
Saurabhchaudhary9799 Sep 4, 2024
5d07b19
hover interactions are added
Saurabhchaudhary9799 Sep 5, 2024
87c7d85
Merge branch 'master' into fix-issue-#356
Saurabhchaudhary9799 Sep 5, 2024
3442497
Merge branch 'master' into fix-issue-#356
Saurabhchaudhary9799 Sep 6, 2024
d0e41c1
Merge branch 'master' into fix-issue-#356
AceTheCreator Sep 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/Buttons/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
11 changes: 7 additions & 4 deletions components/Navbar/navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}{' '}
Expand All @@ -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'
Expand Down
4 changes: 2 additions & 2 deletions components/Speaker/speaker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
13 changes: 11 additions & 2 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
3 changes: 3 additions & 0 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
}
Expand Down
Loading