Skip to content

Commit 4fa8387

Browse files
DavidthecodeDavidthecode
committed
chore: updated hero component
1 parent 76097fb commit 4fa8387

1 file changed

Lines changed: 174 additions & 14 deletions

File tree

‎apps/web/components/home/hero.tsx‎

Lines changed: 174 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,40 @@
1+
"use client";
2+
3+
import {
4+
animate,
5+
motion,
6+
useMotionTemplate,
7+
useMotionValue,
8+
} from "motion/react";
19
import Link from "next/link";
10+
import { useEffect } from "react";
211

312
export const HeroSection = () => {
13+
const percentage = useMotionValue(0);
14+
15+
useEffect(() => {
16+
const controls = animate(percentage, [0, 150], {
17+
duration: 3,
18+
ease: "linear",
19+
repeat: Number.POSITIVE_INFINITY,
20+
repeatDelay: 0,
21+
});
22+
return controls.stop;
23+
}, [percentage]);
24+
25+
const mask = useMotionTemplate`radial-gradient(
26+
circle at 0% 0%,
27+
transparent calc(${percentage}% - 175%),
28+
black calc(${percentage}% - 150%),
29+
transparent calc(${percentage}% - 145%),
30+
transparent calc(${percentage}% - 25%),
31+
black ${percentage}%,
32+
transparent calc(${percentage}% + 5%)
33+
)`;
34+
435
return (
5-
<section className="container-landing group relative py-12 md:py-24">
6-
<div className="border border-gray-300/90">
36+
<section className="container-landing group relative py-12 md:py-12">
37+
<div className="border border-gray-400/70">
738
<div className="grid h-32 grid-cols-12 border-gray-300/90 border-b">
839
{/* Top Left: Fan/Perspective Pattern */}
940
<div className="relative col-span-3 overflow-hidden border-gray-300/90 border-r">
@@ -14,6 +45,16 @@ export const HeroSection = () => {
1445
"repeating-conic-gradient(from 0deg at 0% 0%, transparent 0deg, transparent 1deg, #e5e7eb 1deg, #e5e7eb 2deg)",
1546
}}
1647
/>
48+
{/* Animated Fan Overlay */}
49+
<motion.div
50+
className="absolute inset-0"
51+
style={{
52+
backgroundImage:
53+
"repeating-conic-gradient(from 0deg at 0% 0%, transparent 0deg, transparent 1deg, #FD6524 1deg, #FD6524 2deg)",
54+
maskImage: mask,
55+
WebkitMaskImage: mask,
56+
}}
57+
/>
1758
</div>
1859

1960
<div className="relative col-span-3 border-gray-300/90 border-r" />
@@ -55,19 +96,138 @@ export const HeroSection = () => {
5596

5697
{/* Right Side: Vertical Grid */}
5798
<div className="relative col-span-3 hidden grid-cols-4 lg:grid">
58-
<div className="relative h-full border-gray-200/60 border-r">
59-
<div className="absolute top-[15%] h-px w-full bg-gray-200/60" />
60-
<div className="absolute top-[85%] h-px w-full bg-gray-200/60" />
99+
{/* Column 1 */}
100+
<div className="relative h-full">
101+
<div className="absolute top-0 right-0 bottom-0 w-px overflow-hidden bg-gray-300/50">
102+
<motion.div
103+
animate={{ top: ["-30%", "100%"] }}
104+
className="absolute top-0 left-0 h-[30%] w-full bg-linear-to-b from-transparent via-gray-500 to-transparent opacity-50"
105+
transition={{
106+
duration: 4,
107+
ease: "linear",
108+
repeat: Number.POSITIVE_INFINITY,
109+
repeatDelay: 1,
110+
}}
111+
/>
112+
</div>
113+
114+
{/* Horizontal Lines */}
115+
<div className="absolute top-[15%] h-px w-full overflow-hidden bg-gray-300/50">
116+
<motion.div
117+
animate={{ left: ["-30%", "100%"] }}
118+
className="absolute top-0 left-0 h-full w-[30%] bg-linear-to-r from-transparent via-gray-500 to-transparent opacity-50"
119+
transition={{
120+
duration: 2,
121+
ease: "linear",
122+
repeat: Number.POSITIVE_INFINITY,
123+
delay: 0.5,
124+
repeatDelay: 2,
125+
}}
126+
/>
127+
</div>
128+
<div className="absolute top-[85%] h-px w-full overflow-hidden bg-gray-300/50">
129+
<motion.div
130+
animate={{ left: ["-30%", "100%"] }}
131+
className="absolute top-0 left-0 h-full w-[30%] bg-linear-to-r from-transparent via-gray-500 to-transparent opacity-50"
132+
transition={{
133+
duration: 2,
134+
ease: "linear",
135+
repeat: Number.POSITIVE_INFINITY,
136+
delay: 2.5,
137+
repeatDelay: 2,
138+
}}
139+
/>
140+
</div>
61141
</div>
62-
<div className="relative h-full border-gray-200/60 border-r">
63-
<div className="absolute top-[40%] h-px w-full bg-gray-200/60" />
142+
143+
{/* Column 2 */}
144+
<div className="relative h-full">
145+
<div className="absolute top-0 right-0 bottom-0 w-px overflow-hidden bg-gray-300/50">
146+
<motion.div
147+
animate={{ top: ["-30%", "100%"] }}
148+
className="absolute top-0 left-0 h-[30%] w-full bg-linear-to-b from-transparent via-gray-500 to-transparent opacity-50"
149+
transition={{
150+
duration: 5,
151+
ease: "linear",
152+
repeat: Number.POSITIVE_INFINITY,
153+
delay: 2,
154+
repeatDelay: 0.5,
155+
}}
156+
/>
157+
</div>
158+
<div className="absolute top-[40%] h-px w-full overflow-hidden bg-gray-300/50">
159+
<motion.div
160+
animate={{ left: ["-30%", "100%"] }}
161+
className="absolute top-0 left-0 h-full w-[30%] bg-linear-to-r from-transparent via-gray-500 to-transparent opacity-50"
162+
transition={{
163+
duration: 2.5,
164+
ease: "linear",
165+
repeat: Number.POSITIVE_INFINITY,
166+
delay: 1,
167+
repeatDelay: 3,
168+
}}
169+
/>
170+
</div>
64171
</div>
65-
<div className="relative h-full border-gray-200/60 border-r">
66-
<div className="absolute top-[10%] h-px w-full bg-gray-200/60" />
67-
<div className="absolute top-[60%] h-px w-full bg-gray-200/60" />
172+
173+
{/* Column 3 */}
174+
<div className="relative h-full">
175+
<div className="absolute top-0 right-0 bottom-0 w-px overflow-hidden bg-gray-300/50">
176+
<motion.div
177+
animate={{ top: ["-30%", "100%"] }}
178+
className="absolute top-0 left-0 h-[30%] w-full bg-linear-to-b from-transparent via-gray-500 to-transparent opacity-50"
179+
transition={{
180+
duration: 3.5,
181+
ease: "linear",
182+
repeat: Number.POSITIVE_INFINITY,
183+
delay: 1,
184+
repeatDelay: 2,
185+
}}
186+
/>
187+
</div>
188+
<div className="absolute top-[10%] h-px w-full overflow-hidden bg-gray-300/50">
189+
<motion.div
190+
animate={{ left: ["-30%", "100%"] }}
191+
className="absolute top-0 left-0 h-full w-[30%] bg-linear-to-r from-transparent via-gray-500 to-transparent opacity-50"
192+
transition={{
193+
duration: 1.5,
194+
ease: "linear",
195+
repeat: Number.POSITIVE_INFINITY,
196+
delay: 2,
197+
repeatDelay: 4,
198+
}}
199+
/>
200+
</div>
201+
<div className="absolute top-[60%] h-px w-full overflow-hidden bg-gray-300/50">
202+
<motion.div
203+
animate={{ left: ["-30%", "100%"] }}
204+
className="absolute top-0 left-0 h-full w-[30%] bg-linear-to-r from-transparent via-gray-500 to-transparent opacity-50"
205+
transition={{
206+
duration: 2,
207+
ease: "linear",
208+
repeat: Number.POSITIVE_INFINITY,
209+
delay: 3,
210+
repeatDelay: 1,
211+
}}
212+
/>
213+
</div>
68214
</div>
215+
216+
{/* Column 4 */}
69217
<div className="relative h-full">
70-
<div className="absolute top-1/2 h-px w-full bg-gray-200/60" />
218+
<div className="absolute top-1/2 h-px w-full overflow-hidden bg-gray-300/50">
219+
<motion.div
220+
animate={{ left: ["-30%", "100%"] }}
221+
className="absolute top-0 left-0 h-full w-[30%] bg-linear-to-r from-transparent via-gray-500 to-transparent opacity-50"
222+
transition={{
223+
duration: 3,
224+
ease: "linear",
225+
repeat: Number.POSITIVE_INFINITY,
226+
delay: 0,
227+
repeatDelay: 2,
228+
}}
229+
/>
230+
</div>
71231
</div>
72232
</div>
73233
</div>
@@ -76,7 +236,7 @@ export const HeroSection = () => {
76236
<div className="relative border-gray-300/90 border-b p-10 transition-colors hover:bg-gray-50/50 md:border-r md:border-b-0">
77237
<div className="flex items-center gap-3">
78238
<span className="font-bold text-gray-400 text-xs uppercase tracking-widest">
79-
01. Precision
239+
Precision
80240
</span>
81241
<div
82242
className="h-2 w-2"
@@ -95,7 +255,7 @@ export const HeroSection = () => {
95255
<div className="relative border-gray-300/90 border-b p-10 transition-colors hover:bg-gray-50/50 md:border-r md:border-b-0">
96256
<div className="flex items-center gap-3">
97257
<span className="font-bold text-gray-400 text-xs uppercase tracking-widest">
98-
02. Velocity
258+
Velocity
99259
</span>
100260
<div
101261
className="h-2 w-2"
@@ -114,7 +274,7 @@ export const HeroSection = () => {
114274
<div className="relative p-10 transition-colors hover:bg-gray-50/50">
115275
<div className="flex items-center gap-3">
116276
<span className="font-bold text-gray-400 text-xs uppercase tracking-widest">
117-
03. Insight
277+
Insight
118278
</span>
119279
<div
120280
className="h-2 w-2"

0 commit comments

Comments
 (0)