Skip to content

Commit 78f9dcf

Browse files
RajVishhRaj Vishwakarma
RajVishh
and
Raj Vishwakarma
authored
link: improve link hover animation (#122)
* link: improve link hover animation * dependency: remove unused motion dependency * chore(frontend): restore package-lock.json from upstream * CI: fix CI error * HomeComponent: Add link hover animation in HomeComponents and update hyperlink destination * CI fix: fix prettier CI error * CI error: fix prettier code formatting error --------- Co-authored-by: Raj Vishwakarma <rajvishidk@gmai.com>
1 parent 3283288 commit 78f9dcf

5 files changed

Lines changed: 67 additions & 91 deletions

File tree

‎frontend/src/components/HomeComponents/FAQ/FAQ.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Accordion } from '@/components/ui/accordion';
22
import { FAQItem } from './FAQItem';
33
import { FAQList } from './faq-utils';
44
import { BlueHeading } from '@/lib/utils';
5+
import { HighlightLink } from '@/components/ui/link-highlight';
56

67
export const FAQ = () => {
78
return (
@@ -24,13 +25,9 @@ export const FAQ = () => {
2425

2526
<h3 className="font-medium mt-4">
2627
Still have questions?{' '}
27-
<a
28-
rel="noreferrer noopener"
29-
href="#contact"
30-
className="inline bg-gradient-to-r from-[#F596D3] to-[#D247BF] text-transparent bg-clip-text"
31-
>
28+
<HighlightLink rel="noreferrer noopener" href={'#contact'}>
3229
Contact us
33-
</a>
30+
</HighlightLink>
3431
</h3>
3532
</section>
3633
);

‎frontend/src/components/HomeComponents/Footer/Footer.tsx‎

Lines changed: 13 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { HighlightLink } from '@/components/ui/link-highlight';
12
import logo from '../../../assets/logo.png';
23
import logoLight from '../../../assets/logo_light.png';
34
import { url } from '@/components/utils/URLs';
@@ -36,80 +37,53 @@ export const Footer = () => {
3637
<div className="flex flex-col gap-2">
3738
<h3 className="font-bold text-lg">Community</h3>
3839
<div>
39-
<a
40-
rel="noreferrer noopener"
41-
href="#"
42-
className="opacity-60 hover:opacity-100"
43-
>
40+
<HighlightLink rel="noreferrer noopener" href={url.githubRepoURL}>
4441
Github
45-
</a>
42+
</HighlightLink>
4643
</div>
4744

4845
<div>
49-
<a
50-
rel="noreferrer noopener"
51-
href="#"
52-
className="opacity-60 hover:opacity-100"
53-
>
46+
<HighlightLink rel="noreferrer noopener" href={url.zulipURL}>
5447
Zulip
55-
</a>
56-
</div>
57-
<div>
58-
<a
59-
rel="noreferrer noopener"
60-
href="#"
61-
className="opacity-60 hover:opacity-100"
62-
>
63-
Discord
64-
</a>
48+
</HighlightLink>
6549
</div>
6650
</div>
6751

6852
<div className="flex flex-col gap-2">
6953
<h3 className="font-bold text-lg">About</h3>
7054
<div>
71-
<a
72-
rel="noreferrer noopener"
73-
href="#setup-guide"
74-
className="opacity-60 hover:opacity-100"
75-
>
55+
<HighlightLink rel="noreferrer noopener" href={'#setup-guide'}>
7656
Setup Guide
77-
</a>
57+
</HighlightLink>
7858
</div>
7959

8060
<div>
81-
<a
82-
rel="noreferrer noopener"
83-
href="#faq"
84-
className="opacity-60 hover:opacity-100"
85-
>
61+
<HighlightLink rel="noreferrer noopener" href={'#faq'}>
8662
FAQ
87-
</a>
63+
</HighlightLink>
8864
</div>
8965
</div>
9066

9167
<div className="flex flex-col gap-2">
9268
<h3 className="font-bold text-lg">Important Links</h3>
9369
<div>
94-
<a
70+
<HighlightLink
9571
rel="noreferrer noopener"
9672
href={url.taskwarriorURL}
97-
className="opacity-60 hover:opacity-100"
9873
target="_blank"
9974
>
10075
Taskwarrior
101-
</a>
76+
</HighlightLink>
10277
</div>
10378

10479
<div>
105-
<a
80+
<HighlightLink
10681
rel="noreferrer noopener"
10782
href={url.taskchampionSyncServerURL}
108-
className="opacity-60 hover:opacity-100"
10983
target="_blank"
11084
>
11185
Taskchampion-sync-server
112-
</a>
86+
</HighlightLink>
11387
</div>
11488
</div>
11589
</section>

‎frontend/src/components/LandingComponents/FAQ/FAQ.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { FAQItem } from './FAQItem';
33
import { FAQList } from './faq-utils';
44
import { BlueHeading } from '@/lib/utils';
55
import { url } from '@/components/utils/URLs';
6+
import { HighlightLink } from '@/components/ui/link-highlight';
67

78
export const FAQ = () => {
89
return (
@@ -22,13 +23,9 @@ export const FAQ = () => {
2223

2324
<h3 className="font-medium mt-4">
2425
Still have questions?{' '}
25-
<a
26-
rel="noreferrer noopener"
27-
href={url.githubRepoURL}
28-
className="inline bg-gradient-to-r from-[#F596D3] to-[#D247BF] text-transparent bg-clip-text"
29-
>
26+
<HighlightLink rel="noreferrer noopener" href={url.githubRepoURL}>
3027
Contact us
31-
</a>
28+
</HighlightLink>
3229
</h3>
3330
</section>
3431
);

‎frontend/src/components/LandingComponents/Footer/Footer.tsx‎

Lines changed: 13 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { HighlightLink } from '@/components/ui/link-highlight';
12
import logo from '../../../assets/logo.png';
23
import logoLight from '../../../assets/logo_light.png';
34
import { url } from '@/components/utils/URLs';
@@ -35,80 +36,52 @@ export const Footer = () => {
3536
<div className="flex flex-col gap-2">
3637
<h3 className="font-bold text-lg">Community</h3>
3738
<div>
38-
<a
39-
rel="noreferrer noopener"
40-
href={url.githubRepoURL}
41-
className="opacity-60 hover:opacity-100"
42-
>
39+
<HighlightLink rel="noreferrer noopener" href={url.githubRepoURL}>
4340
Github
44-
</a>
41+
</HighlightLink>
4542
</div>
46-
4743
<div>
48-
<a
49-
rel="noreferrer noopener"
50-
href={url.zulipURL}
51-
className="opacity-60 hover:opacity-100"
52-
>
44+
<HighlightLink rel="noreferrer noopener" href={url.zulipURL}>
5345
Zulip
54-
</a>
55-
</div>
56-
<div>
57-
<a
58-
rel="noreferrer noopener"
59-
href="#"
60-
className="opacity-60 hover:opacity-100"
61-
>
62-
Discord
63-
</a>
46+
</HighlightLink>
6447
</div>
6548
</div>
6649

6750
<div className="flex flex-col gap-2">
6851
<h3 className="font-bold text-lg">About</h3>
6952
<div>
70-
<a
71-
rel="noreferrer noopener"
72-
href="#howItWorks"
73-
className="opacity-60 hover:opacity-100"
74-
>
53+
<HighlightLink rel="noreferrer noopener" href={'#howItWorks'}>
7554
Features
76-
</a>
55+
</HighlightLink>
7756
</div>
7857

7958
<div>
80-
<a
81-
rel="noreferrer noopener"
82-
href="#faq"
83-
className="opacity-60 hover:opacity-100"
84-
>
59+
<HighlightLink rel="noreferrer noopener" href={'#faq'}>
8560
FAQ
86-
</a>
61+
</HighlightLink>
8762
</div>
8863
</div>
8964

9065
<div className="flex flex-col gap-2">
9166
<h3 className="font-bold text-lg">Important Links</h3>
9267
<div>
93-
<a
68+
<HighlightLink
9469
rel="noreferrer noopener"
9570
href={url.taskwarriorURL}
96-
className="opacity-60 hover:opacity-100"
9771
target="_blank"
9872
>
9973
Taskwarrior
100-
</a>
74+
</HighlightLink>
10175
</div>
10276

10377
<div>
104-
<a
78+
<HighlightLink
10579
rel="noreferrer noopener"
10680
href={url.taskchampionSyncServerURL}
107-
className="opacity-60 hover:opacity-100"
10881
target="_blank"
10982
>
11083
Taskchampion-sync-server
111-
</a>
84+
</HighlightLink>
11285
</div>
11386
</div>
11487
</section>

‎frontend/src/components/ui/link-highlight.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { motion } from 'framer-motion';
2+
import { useState } from 'react';
3+
4+
export function HighlightLink({
5+
href,
6+
children,
7+
rel,
8+
target,
9+
}: {
10+
href: string;
11+
children: React.ReactNode;
12+
rel: string;
13+
target?: string;
14+
}) {
15+
const [isHovered, setIsHovered] = useState(false);
16+
17+
return (
18+
<motion.a
19+
target={target}
20+
rel={rel}
21+
href={href}
22+
onHoverStart={() => setIsHovered(true)}
23+
onHoverEnd={() => setIsHovered(false)}
24+
className="opacity-60 hover:opacity-100 relative inline-block"
25+
>
26+
{children}
27+
<motion.span
28+
initial={{ width: 0 }}
29+
animate={{ width: isHovered ? '100%' : 0 }}
30+
transition={{ duration: 0.3 }}
31+
className="absolute -bottom-1 left-0 h-0.5 bg-gradient-to-r from-[#E776CB] via-[#FFFFFF] to-[#5FD9FA] rounded"
32+
/>
33+
</motion.a>
34+
);
35+
}

0 commit comments

Comments
 (0)