Skip to content

Commit f8a4ca7

Browse files
maheswar-dileepmaheswar-dileep
committed
style: Improve responsive layout and sizing for the animated hero section elements.
1 parent 8d1dfd5 commit f8a4ca7

1 file changed

Lines changed: 42 additions & 37 deletions

File tree

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

Lines changed: 42 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -27,43 +27,43 @@ export default function AnimatedHeroClient() {
2727
initial={{ opacity: 0, y: 20 }}
2828
animate={{ opacity: 1, y: 0 }}
2929
transition={{ duration: 0.5 }}
30-
className="flex items-center mb-10"
30+
className="flex items-center justify-center mb-8 md:mb-10 w-full px-2"
3131
>
3232
<Image
3333
src="/images/leaf-l.png"
3434
alt="Laurel left"
3535
width={28}
3636
height={52}
37-
className="w-auto h-12 opacity-80"
37+
className="w-auto h-8 md:h-12 opacity-80 shrink-0"
3838
/>
39-
<div className="flex items-center gap-3">
40-
<div className="flex -space-x-3">
39+
<div className="flex items-center gap-2 md:gap-3 mx-2 md:mx-4">
40+
<div className="flex -space-x-3 shrink-0">
4141
<Image
4242
src="https://avatars.githubusercontent.com/u/63339782?v=4"
4343
alt="Customer 1"
4444
width={36}
4545
height={36}
4646
priority
47-
className="w-9 h-9 rounded-full border-2 border-white object-cover shadow-sm relative z-0"
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"
4848
/>
4949
<Image
5050
src="https://avatars.githubusercontent.com/u/93549213?v=4"
5151
alt="Customer 2"
5252
width={36}
5353
height={36}
5454
priority
55-
className="w-9 h-9 rounded-full border-2 border-white object-cover shadow-sm relative z-10"
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"
5656
/>
5757
<Image
5858
src="https://avatars.githubusercontent.com/u/135146135?v=4"
5959
alt="Customer 3"
6060
width={36}
6161
height={36}
6262
priority
63-
className="w-9 h-9 rounded-full border-2 border-white bg-purple-100 object-cover shadow-sm relative z-20"
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"
6464
/>
6565
</div>
66-
<span className="text-[17px] font-medium text-[#7a7a7a] tracking-tight">
66+
<span className="text-sm md:text-[17px] font-medium text-[#7a7a7a] tracking-tight whitespace-nowrap">
6767
Trusted by 2k+ Customers
6868
</span>
6969
</div>
@@ -72,7 +72,7 @@ export default function AnimatedHeroClient() {
7272
alt="Laurel right"
7373
width={28}
7474
height={52}
75-
className="w-auto h-12 opacity-80"
75+
className="w-auto h-8 md:h-12 opacity-80 shrink-0"
7676
/>
7777
</motion.div>
7878

@@ -81,33 +81,39 @@ export default function AnimatedHeroClient() {
8181
initial={{ opacity: 0, y: 20 }}
8282
animate={{ opacity: 1, y: 0 }}
8383
transition={{ duration: 0.5, delay: 0.1 }}
84-
className="text-5xl md:text-[76px] font-semibold text-[#111] leading-[1.1] tracking-tight text-center max-w-5xl"
84+
className="text-[40px] leading-[1.1] sm:text-5xl md:text-[76px] font-semibold text-[#111] tracking-tight text-center max-w-5xl px-2"
8585
>
86-
Effortless{' '}
87-
<motion.span
88-
animate={{ y: [4, -8, 4] }}
89-
transition={{ repeat: Infinity, duration: 4, ease: "easeInOut" }}
90-
className="inline-flex relative -top-1 md:-top-2 border-3 border-white rotate-8 items-center justify-center bg-indigo-50 size-8 md:size-16 rounded-xl md:rounded-2xl mx-1 md:mx-3 shadow-inner text-2xl md:text-3xl shadow-md"
91-
>
92-
👨‍💻
93-
</motion.span>{' '}
94-
Portfolios <br className="hidden md:block" />
95-
for{' '}
96-
<motion.span
97-
animate={{ y: [4, -10, 4] }}
98-
transition={{ repeat: Infinity, duration: 3.5, ease: "easeInOut", delay: 0.5 }}
99-
className="inline-flex relative -top-1 md:-top-2 border-3 border-white -rotate-6 items-center justify-center bg-rose-50 size-8 md:size-16 rounded-xl md:rounded-2xl mx-1 md:mx-3 shadow-inner text-2xl md:text-3xl shadow-md"
100-
>
101-
💻️
102-
</motion.span>{' '}
103-
Developers{' '}
104-
<motion.span
105-
animate={{ y: [4, -6, 4] }}
106-
transition={{ repeat: Infinity, duration: 4.5, ease: "easeInOut", delay: 1 }}
107-
className="inline-flex relative -top-1 md:-top-2 border-3 border-white -rotate-10 items-center justify-center bg-amber-50 size-8 md:size-16 rounded-xl md:rounded-2xl mx-1 md:mx-3 shadow-inner text-2xl md:text-3xl shadow-md"
108-
>
109-
📁
110-
</motion.span>
86+
<span className="whitespace-nowrap">
87+
Effortless{' '}
88+
<motion.span
89+
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"
92+
>
93+
👨‍💻
94+
</motion.span>
95+
</span>{' '}
96+
<span className="whitespace-nowrap">Portfolios</span> <br className="hidden md:block" />
97+
<span className="whitespace-nowrap">
98+
for{' '}
99+
<motion.span
100+
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"
103+
>
104+
💻
105+
</motion.span>
106+
</span>{' '}
107+
<span className="whitespace-nowrap">
108+
Developers{' '}
109+
<motion.span
110+
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"
113+
>
114+
📁
115+
</motion.span>
116+
</span>
111117
</motion.h1>
112118

113119
{/* Subhead */}
@@ -117,8 +123,7 @@ export default function AnimatedHeroClient() {
117123
transition={{ duration: 0.5, delay: 0.2 }}
118124
className="text-lg md:text-xl text-gray-500 mt-8 max-w-2xl text-center px-4"
119125
>
120-
Automatic portfolio generation powered by your GitHub profile.
121-
<br className="hidden md:block" />
126+
Automatic portfolio generation powered by your GitHub profile. <br className="hidden md:block" />
122127
Zero maintenance required. Setup once, let it narrate your story.
123128
</motion.p>
124129

0 commit comments

Comments
 (0)