Skip to content

Commit a6f9a02

Browse files
maheswar-dileepmaheswar-dileep
committed
fix: PR issues fix
1 parent 8c53378 commit a6f9a02

1 file changed

Lines changed: 64 additions & 35 deletions

File tree

‎www/components/animated-hero/client.tsx‎

Lines changed: 64 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import { motion } from 'framer-motion';
44
import Image from 'next/image';
55
import { useEffect, useState } from 'react';
66
import GitHubModal from '../github-modal/client';
7-
import { Info, Github, GitFork } from 'lucide-react';
7+
import { Github, GitFork } from 'lucide-react';
88
import Counter from '../counter';
9+
import Link from 'next/link';
910

1011
export default function AnimatedHeroClient() {
1112
const [showGithubModal, setShowGithubModal] = useState(false);
@@ -20,6 +21,27 @@ export default function AnimatedHeroClient() {
2021
}
2122
}, []);
2223

24+
const contributorAvatars = [
25+
{
26+
src: 'https://avatars.githubusercontent.com/u/63339782?v=4',
27+
alt: 'Customer 1',
28+
zIndex: 'z-0',
29+
extraClass: '',
30+
},
31+
{
32+
src: 'https://avatars.githubusercontent.com/u/93549213?v=4',
33+
alt: 'Customer 2',
34+
zIndex: 'z-10',
35+
extraClass: '',
36+
},
37+
{
38+
src: 'https://avatars.githubusercontent.com/u/135146135?v=4',
39+
alt: 'Customer 3',
40+
zIndex: 'z-20',
41+
extraClass: 'bg-purple-100',
42+
},
43+
];
44+
2345
return (
2446
<section className="w-full flex flex-col items-center justify-center pb-16 md:pb-24">
2547
{/* Trusted badge */}
@@ -38,30 +60,17 @@ export default function AnimatedHeroClient() {
3860
/>
3961
<div className="flex items-center gap-2 md:gap-3 mx-2 md:mx-4">
4062
<div className="flex -space-x-3 shrink-0">
41-
<Image
42-
src="https://avatars.githubusercontent.com/u/63339782?v=4"
43-
alt="Customer 1"
44-
width={36}
45-
height={36}
46-
priority
47-
className="w-7 h-7 md:w-9 md:h-9 rounded-full border-2 border-white object-cover shadow-sm relative z-0"
48-
/>
49-
<Image
50-
src="https://avatars.githubusercontent.com/u/93549213?v=4"
51-
alt="Customer 2"
52-
width={36}
53-
height={36}
54-
priority
55-
className="w-7 h-7 md:w-9 md:h-9 rounded-full border-2 border-white object-cover shadow-sm relative z-10"
56-
/>
57-
<Image
58-
src="https://avatars.githubusercontent.com/u/135146135?v=4"
59-
alt="Customer 3"
60-
width={36}
61-
height={36}
62-
priority
63-
className="w-7 h-7 md:w-9 md:h-9 rounded-full border-2 border-white bg-purple-100 object-cover shadow-sm relative z-20"
64-
/>
63+
{contributorAvatars.map((avatar, index) => (
64+
<Image
65+
key={index}
66+
src={avatar.src}
67+
alt={avatar.alt}
68+
width={36}
69+
height={36}
70+
priority
71+
className={`w-7 h-7 md:w-9 md:h-9 rounded-full border-2 border-white object-cover shadow-sm relative ${avatar.zIndex} ${avatar.extraClass}`}
72+
/>
73+
))}
6574
</div>
6675
<span className="text-sm md:text-[17px] font-medium text-[#7a7a7a] tracking-tight whitespace-nowrap">
6776
Trusted by 2k+ Customers
@@ -86,30 +95,44 @@ export default function AnimatedHeroClient() {
8695
<span className="whitespace-nowrap">
8796
Effortless{' '}
8897
<motion.span
98+
aria-hidden="true"
8999
animate={{ y: [4, -8, 4] }}
90-
transition={{ repeat: Infinity, duration: 4, ease: "easeInOut" }}
91-
className="inline-flex relative -top-1 md:-top-2 border-2 md:border-[3px] border-white rotate-6 items-center justify-center bg-indigo-50 w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl mx-1 shadow-inner text-[22px] md:text-3xl shadow-md"
100+
transition={{ repeat: Infinity, duration: 4, ease: 'easeInOut' }}
101+
className="inline-flex relative -top-1 md:-top-2 border-2 md:border-[3px] border-white rotate-6 items-center justify-center bg-indigo-50 w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl mx-1 shadow-inner text-[22px] md:text-3xl shadow-lg shadow-[#B9FF66]/30"
92102
>
93103
👨‍💻
94104
</motion.span>
95105
</span>{' '}
96-
<span className="whitespace-nowrap">Portfolios</span> <br className="hidden md:block" />
106+
<span className="whitespace-nowrap">Portfolios</span>{' '}
107+
<br className="hidden md:block" />
97108
<span className="whitespace-nowrap">
98109
for{' '}
99110
<motion.span
111+
aria-hidden="true"
100112
animate={{ y: [4, -10, 4] }}
101-
transition={{ repeat: Infinity, duration: 3.5, ease: "easeInOut", delay: 0.5 }}
102-
className="inline-flex relative -top-1 md:-top-2 border-2 md:border-[3px] border-white -rotate-6 items-center justify-center bg-rose-50 w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl mx-1 shadow-inner text-[22px] md:text-3xl shadow-md"
113+
transition={{
114+
repeat: Infinity,
115+
duration: 3.5,
116+
ease: 'easeInOut',
117+
delay: 0.5,
118+
}}
119+
className="inline-flex relative -top-1 md:-top-2 border-2 md:border-[3px] border-white -rotate-6 items-center justify-center bg-rose-50 w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl mx-1 shadow-inner text-[22px] md:text-3xl shadow-lg shadow-[#B9FF66]/30"
103120
>
104121
💻
105122
</motion.span>
106123
</span>{' '}
107124
<span className="whitespace-nowrap">
108125
Developers{' '}
109126
<motion.span
127+
aria-hidden="true"
110128
animate={{ y: [4, -6, 4] }}
111-
transition={{ repeat: Infinity, duration: 4.5, ease: "easeInOut", delay: 1 }}
112-
className="inline-flex relative -top-1 md:-top-2 border-2 md:border-[3px] border-white -rotate-12 items-center justify-center bg-amber-50 w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl mx-1 shadow-inner text-[22px] md:text-3xl shadow-md"
129+
transition={{
130+
repeat: Infinity,
131+
duration: 4.5,
132+
ease: 'easeInOut',
133+
delay: 1,
134+
}}
135+
className="inline-flex relative -top-1 md:-top-2 border-2 md:border-[3px] border-white -rotate-12 items-center justify-center bg-amber-50 w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl mx-1 shadow-inner text-[22px] md:text-3xl shadow-lg shadow-[#B9FF66]/30"
113136
>
114137
📁
115138
</motion.span>
@@ -123,7 +146,8 @@ export default function AnimatedHeroClient() {
123146
transition={{ duration: 0.5, delay: 0.2 }}
124147
className="text-lg md:text-xl text-gray-500 mt-8 max-w-2xl text-center px-4"
125148
>
126-
Automatic portfolio generation powered by your GitHub profile. <br className="hidden md:block" />
149+
Automatic portfolio generation powered by your GitHub profile.{' '}
150+
<br className="hidden md:block" />
127151
Zero maintenance required. Setup once, let it narrate your story.
128152
</motion.p>
129153

@@ -140,9 +164,14 @@ export default function AnimatedHeroClient() {
140164
>
141165
<Github className="w-5 h-5" /> Generate Portfolio
142166
</button>
143-
<button className="bg-white border text-gray-700 border-gray-200 px-8 py-3.5 rounded-full text-base font-medium hover:bg-gray-50 transition-colors flex items-center justify-center gap-2 shadow-sm">
167+
<Link
168+
href="https://github.com/sunithvs/devb.io"
169+
target="_blank"
170+
rel="noopener noreferrer"
171+
className="bg-white border text-gray-700 border-gray-200 px-8 py-3.5 rounded-full text-base font-medium hover:bg-gray-50 transition-colors flex items-center justify-center gap-2 shadow-sm"
172+
>
144173
<GitFork className="w-4 h-4 text-black" /> Contribute
145-
</button>
174+
</Link>
146175
</motion.div>
147176
{/* Metrics Section */}
148177
<motion.div

0 commit comments

Comments
 (0)