Skip to content

Commit ca6929e

Browse files
vLuckyyyvLuckyyy
committed
Enhance Hero component: add animated background elements, improve layout, and update text for better engagement.
1 parent 5155f7d commit ca6929e

File tree

3 files changed

+211
-25
lines changed

3 files changed

+211
-25
lines changed

‎app/docs/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const metadata: Metadata = {
3838
export default function DocsLayout({ children }: { children: React.ReactNode }) {
3939
return (
4040
<div
41-
className={`${poppins.className} min-h-screen bg-lightGray-100 antialiased transition-colors duration-200 dark:bg-gray-900`}
41+
className={`${poppins.className} relative min-h-screen bg-lightGray-100 antialiased transition-colors duration-200 dark:bg-gray-900`}
4242
>
4343
<Navbar />
4444
<div className="mx-auto min-h-[calc(100vh-7rem)] max-w-screen-xl px-4 py-12 pt-56 md:pt-36">

‎app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export default function RootLayout({
107107
return (
108108
<html lang="en" suppressHydrationWarning className={poppins.variable}>
109109
<body
110-
className={`${poppins.className} min-h-screen bg-lightGray-100 antialiased dark:bg-gray-900`}
110+
className={`${poppins.className} relative min-h-screen bg-lightGray-100 antialiased dark:bg-gray-900`}
111111
>
112112
<Providers>
113113
<NextTopLoader

‎components/hero/Hero.tsx‎

Lines changed: 209 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,248 @@
11
"use client";
22

3+
import { motion, useAnimation } from "framer-motion";
4+
import { Github, Users, Rocket, CheckCircle, Zap } from "lucide-react";
5+
import Link from "next/link";
6+
import { useEffect, useCallback } from "react";
7+
import { useInView } from "react-intersection-observer";
8+
39
import { AnimatedSection, AnimatedElement, AnimatedContainer } from "@/components/animations";
4-
import BackgroundHeroButton from "@/components/hero/button/BackgroundHeroButton";
5-
import TransparentHeroButton from "@/components/hero/button/TransparentHeroButton";
610
import Terminal from "@/components/hero/terminal/Terminal";
11+
import ArrowForwardHeroIcon from "@/components/icons/arrow-forward-hero";
12+
import PeopleGroupIcon from "@/components/icons/people-group";
13+
import { Button } from "@/components/ui/button";
714

815
export default function Hero() {
16+
const { ref: bgRef, inView: bgInView } = useInView({ triggerOnce: false, threshold: 0.1 });
17+
const bgControls = useAnimation();
18+
19+
const handleBgAnimation = useCallback(() => {
20+
if (bgInView) bgControls.start({ opacity: 1, y: 0 });
21+
else bgControls.start({ opacity: 0, y: 20 });
22+
}, [bgInView, bgControls]);
23+
24+
useEffect(() => {
25+
handleBgAnimation();
26+
}, [handleBgAnimation]);
27+
28+
const { ref: transRef, inView: transInView } = useInView({ triggerOnce: false, threshold: 0.1 });
29+
930
return (
10-
<AnimatedSection
11-
className="relative mx-auto mt-16 max-w-screen-xl px-4 pt-28"
12-
animationType="fade"
13-
aria-labelledby="hero-heading"
14-
>
15-
<div className="flex flex-col-reverse items-center justify-center gap-8 py-8 md:flex-row lg:py-16">
16-
<div className="text-center lg:text-left">
31+
<div className="relative overflow-hidden">
32+
{/* Animated Blue Blob - Top Right */}
33+
<motion.div
34+
className="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-gradient-to-br from-blue-400/20 to-blue-600/15 blur-3xl"
35+
animate={{
36+
x: [0, 15, -10, 20, 0],
37+
y: [0, -12, 18, -8, 0],
38+
scale: [1, 1.1, 0.95, 1.05, 1],
39+
}}
40+
transition={{
41+
duration: 25,
42+
repeat: Infinity,
43+
ease: "easeInOut",
44+
}}
45+
/>
46+
47+
{/* Animated Blue Blob - Top Left */}
48+
<motion.div
49+
className="absolute -left-32 -top-32 h-80 w-80 rounded-full bg-gradient-to-br from-blue-500/15 to-blue-700/10 blur-3xl"
50+
animate={{
51+
x: [0, -20, 10, -30, 0],
52+
y: [0, 15, -10, 22, 0],
53+
scale: [1, 0.95, 1.1, 0.9, 1],
54+
}}
55+
transition={{
56+
duration: 30,
57+
repeat: Infinity,
58+
ease: "easeInOut",
59+
delay: 5,
60+
}}
61+
/>
62+
63+
{/* Animated Blue Blob - Bottom Left */}
64+
<motion.div
65+
className="from-blue-300/18 to-blue-500/12 absolute -bottom-24 -left-16 h-72 w-72 rounded-full bg-gradient-to-br blur-3xl"
66+
animate={{
67+
x: [0, 25, -15, 35, 0],
68+
y: [0, -20, 12, -30, 0],
69+
scale: [1, 1.15, 0.9, 1.1, 1],
70+
}}
71+
transition={{
72+
duration: 28,
73+
repeat: Infinity,
74+
ease: "easeInOut",
75+
delay: 10,
76+
}}
77+
/>
78+
79+
{/* Animated Blue Blob - Bottom Right */}
80+
<motion.div
81+
className="from-blue-400/18 to-blue-600/12 absolute -bottom-20 -right-16 h-56 w-56 rounded-full bg-gradient-to-br blur-3xl"
82+
animate={{
83+
x: [0, -18, 12, -25, 0],
84+
y: [0, 22, -15, 30, 0],
85+
scale: [1, 0.9, 1.2, 0.95, 1],
86+
}}
87+
transition={{
88+
duration: 26,
89+
repeat: Infinity,
90+
ease: "easeInOut",
91+
delay: 15,
92+
}}
93+
/>
94+
95+
{/* Animated Blue Blob - Center */}
96+
<motion.div
97+
className="absolute left-1/4 top-1/2 h-48 w-48 -translate-y-1/2 rounded-full bg-gradient-to-br from-blue-300/15 to-blue-500/10 blur-2xl"
98+
animate={{
99+
x: [0, 30, -20, 40, 0],
100+
y: [0, -15, 25, -10, 0],
101+
scale: [1, 1.1, 0.9, 1.05, 1],
102+
}}
103+
transition={{
104+
duration: 32,
105+
repeat: Infinity,
106+
ease: "easeInOut",
107+
delay: 20,
108+
}}
109+
/>
110+
111+
<AnimatedSection
112+
className="relative mx-auto max-w-screen-xl px-6 pb-24 pt-60 lg:flex lg:items-center lg:justify-between lg:gap-12"
113+
animationType="fade"
114+
aria-labelledby="hero-heading"
115+
>
116+
<div className="flex flex-col items-center text-center lg:flex-1 lg:items-start lg:text-left">
117+
<AnimatedElement
118+
as="div"
119+
className="mb-6 flex flex-wrap items-center justify-center gap-3 lg:justify-start"
120+
animationType="fadeDown"
121+
delay={0.05}
122+
>
123+
<span className="inline-flex items-center gap-1.5 rounded-full bg-blue-100/80 px-4 py-1.5 text-xs font-semibold text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-950 dark:text-blue-300 dark:ring-blue-400/30">
124+
<CheckCircle className="h-3.5 w-3.5" />
125+
Open Source
126+
</span>
127+
<span className="inline-flex items-center gap-1.5 rounded-full bg-blue-200/70 px-4 py-1.5 text-xs font-semibold text-blue-800 ring-1 ring-inset ring-blue-700/20 dark:bg-blue-950 dark:text-blue-300 dark:ring-blue-400/30">
128+
<Users className="h-3.5 w-3.5" />
129+
40+ Contributors
130+
</span>
131+
</AnimatedElement>
132+
17133
<AnimatedElement
18134
as="h1"
19135
id="hero-heading"
20-
className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight dark:text-white md:text-5xl lg:mb-6 lg:text-6xl"
136+
className="max-w-2xl whitespace-nowrap text-5xl font-bold leading-tight tracking-tight md:text-6xl lg:text-7xl"
21137
animationType="fadeDown"
22138
delay={0.1}
23139
>
24-
EternalCode.pl
140+
<span className="bg-gradient-to-r from-blue-700 via-blue-600 to-blue-800 bg-clip-text text-transparent dark:from-blue-300 dark:via-blue-200 dark:to-blue-400">
141+
EternalCode.pl
142+
</span>
25143
</AnimatedElement>
26144

27145
<AnimatedElement
28146
as="p"
29-
className="mb-6 ml-[3px] max-w-2xl font-light text-gray-500 dark:text-gray-400 md:text-lg lg:mb-8 lg:text-xl"
147+
className="mt-6 max-w-2xl text-lg text-gray-600 dark:text-gray-300 md:text-xl lg:text-2xl"
30148
animationType="fadeUp"
31149
delay={0.2}
32150
>
33-
We are a team creating open source projects!
151+
Building the future with{" "}
152+
<span className="font-semibold text-blue-600 dark:text-blue-400">open source</span>.
153+
<br />
154+
Join our community of passionate developers.
34155
</AnimatedElement>
35156

36157
<AnimatedContainer
37-
className="flex flex-row justify-center lg:justify-start"
158+
className="mt-10 flex flex-col gap-4 sm:flex-row sm:gap-4"
38159
staggerDelay={0.1}
39160
delay={0.3}
40161
>
41-
<AnimatedElement as="div" animationType="fadeLeft" interactive={true}>
42-
<TransparentHeroButton />
162+
<AnimatedElement as="div" animationType="fadeLeft" interactive>
163+
<Link href="/team">
164+
<motion.div ref={bgRef} animate={bgControls} initial={{ opacity: 0, y: 20 }}>
165+
<Button
166+
variant="primary"
167+
className="flex items-center gap-2"
168+
leftIcon={<PeopleGroupIcon className="h-5 w-5" />}
169+
>
170+
See our team!
171+
</Button>
172+
</motion.div>
173+
</Link>
174+
</AnimatedElement>
175+
176+
<AnimatedElement as="div" animationType="fadeUp" interactive>
177+
<Link href="/#about">
178+
<motion.div
179+
ref={transRef}
180+
initial={{ opacity: 0, y: 20 }}
181+
animate={transInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
182+
transition={{ duration: 0.3 }}
183+
>
184+
<Button
185+
variant="outline"
186+
className="group flex items-center gap-2"
187+
rightIcon={
188+
<ArrowForwardHeroIcon className="h-4 w-4 transition-transform group-hover:translate-x-1" />
189+
}
190+
>
191+
About us
192+
</Button>
193+
</motion.div>
194+
</Link>
43195
</AnimatedElement>
44196

45-
<AnimatedElement as="div" animationType="fadeRight" interactive={true}>
46-
<BackgroundHeroButton />
197+
<AnimatedElement as="div" animationType="fadeRight" interactive>
198+
<Link
199+
href="https://github.com/EternalCodeTeam"
200+
target="_blank"
201+
rel="noopener noreferrer"
202+
>
203+
<Button
204+
variant="outline"
205+
className="flex items-center gap-2"
206+
leftIcon={<Github className="h-4 w-4" />}
207+
>
208+
GitHub
209+
</Button>
210+
</Link>
47211
</AnimatedElement>
48212
</AnimatedContainer>
213+
214+
<AnimatedElement
215+
as="div"
216+
className="mt-12 flex flex-wrap items-center justify-center gap-8 text-sm lg:justify-start"
217+
animationType="fadeUp"
218+
delay={0.4}
219+
>
220+
<div className="flex items-center gap-2">
221+
<Zap className="h-4 w-4 animate-pulse text-blue-500" />
222+
<span className="text-gray-600 dark:text-gray-400">Active Development</span>
223+
</div>
224+
<div className="flex items-center gap-2">
225+
<Rocket className="h-4 w-4 text-blue-500" />
226+
<span className="text-gray-600 dark:text-gray-400">Community Driven</span>
227+
</div>
228+
<div className="flex items-center gap-2">
229+
<CheckCircle className="h-4 w-4 text-blue-600" />
230+
<span className="text-gray-600 dark:text-gray-400">Production Ready</span>
231+
</div>
232+
</AnimatedElement>
49233
</div>
50234

51235
<AnimatedElement
52236
as="div"
53-
className="hidden w-full px-20 lg:col-span-8 lg:block lg:pl-36 lg:pr-0"
237+
className="mt-20 w-full lg:mt-0 lg:w-[52%] lg:flex-shrink-0"
54238
animationType="fadeLeft"
55-
delay={0.4}
239+
delay={0.5}
56240
>
57-
<Terminal />
241+
<div className="relative">
242+
<Terminal />
243+
</div>
58244
</AnimatedElement>
59-
</div>
60-
</AnimatedSection>
245+
</AnimatedSection>
246+
</div>
61247
);
62248
}

0 commit comments

Comments
 (0)