Skip to content

Commit 53aa37a

Browse files
yyyortyyyort
committed
improve roadmap
1 parent 8e61e14 commit 53aa37a

1 file changed

Lines changed: 146 additions & 29 deletions

File tree

‎apps/codebility/app/auth/onboarding/_components/RoadMap/RoadMapIntro.tsx‎

Lines changed: 146 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,158 @@
11
"use client";
22

3-
import roadmapBg from "@/public/assets/images/onboarding/animation/infinite_road.json";
43
import { motion } from "framer-motion";
5-
import Lottie from "lottie-react";
64

75
export default function RoadMapIntro() {
86
return (
9-
<section className="relative w-full overflow-hidden bg-[#3b3636] lg:min-h-screen">
10-
{/* Lottie Background */}
11-
<div className="pointer-events-none absolute inset-0 z-0 scale-[1.4] md:scale-[1.7]">
12-
<Lottie
13-
animationData={roadmapBg}
14-
loop
15-
autoplay
16-
className="h-full w-full object-cover"
17-
/>
7+
<section className="relative w-full overflow-hidden bg-gradient-to-b from-gray-900 via-slate-900 to-[#111111] lg:min-h-screen">
8+
{/* Geometric Background Elements */}
9+
<div className="pointer-events-none absolute inset-0 z-0">
10+
{/* Glowing Orbs */}
11+
<div className="absolute top-20 right-20 h-32 w-32 rounded-full bg-gradient-to-r from-teal-400/20 to-cyan-400/20 blur-xl"></div>
12+
<div className="absolute bottom-32 left-16 h-24 w-24 rounded-full bg-gradient-to-r from-purple-400/20 to-pink-400/20 blur-lg"></div>
13+
<div className="absolute top-1/3 left-1/4 h-16 w-16 rounded-full bg-gradient-to-r from-blue-400/30 to-teal-400/30 blur-md"></div>
14+
15+
{/* Additional glows that blend into next section */}
16+
<div className="absolute -bottom-44 -left-44 h-80 w-80 rounded-full bg-cyan-400/10 blur-3xl"></div>
17+
<div className="absolute -bottom-24 -right-24 h-96 w-96 rounded-full bg-fuchsia-500/10 blur-3xl"></div>
18+
19+
{/* Hexagonal Shapes */}
20+
<div className="absolute top-1/4 right-1/3">
21+
<div className="h-20 w-20 rotate-12 border border-teal-400/30 bg-gradient-to-br from-teal-400/10 to-transparent"
22+
style={{ clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)' }}></div>
23+
</div>
24+
<div className="absolute bottom-1/3 right-1/4">
25+
<div className="h-16 w-16 -rotate-6 border border-purple-400/30 bg-gradient-to-br from-purple-400/10 to-transparent"
26+
style={{ clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)' }}></div>
27+
</div>
28+
29+
{/* Circuit-like Lines */}
30+
<svg className="absolute inset-0 h-full w-full opacity-20" viewBox="0 0 1000 1000">
31+
<defs>
32+
<linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
33+
<stop offset="0%" stopColor="#14b8a6" />
34+
<stop offset="100%" stopColor="#06b6d4" />
35+
</linearGradient>
36+
</defs>
37+
<path
38+
d="M100 200 Q300 100 500 200 T900 200"
39+
stroke="url(#lineGradient)"
40+
strokeWidth="2"
41+
fill="none"
42+
strokeDasharray="5,5"
43+
/>
44+
<path
45+
d="M200 800 Q400 700 600 800 T1000 800"
46+
stroke="url(#lineGradient)"
47+
strokeWidth="2"
48+
fill="none"
49+
strokeDasharray="3,7"
50+
/>
51+
</svg>
52+
53+
{/* Grid Pattern */}
54+
<div className="absolute inset-0 opacity-5">
55+
<div className="h-full w-full" style={{
56+
backgroundImage: `
57+
linear-gradient(rgba(20, 184, 166, 0.3) 1px, transparent 1px),
58+
linear-gradient(90deg, rgba(20, 184, 166, 0.3) 1px, transparent 1px)
59+
`,
60+
backgroundSize: '50px 50px'
61+
}}></div>
62+
</div>
1863
</div>
1964

20-
{/* Centered Text */}
21-
<div className="bg-black-600/85 relative z-10 flex flex-col items-center justify-center py-20 text-center lg:min-h-screen">
22-
<motion.h1
23-
initial={{ opacity: 0, scale: 0.8 }}
24-
animate={{ opacity: 1, scale: 1 }}
25-
transition={{ duration: 1, ease: "easeOut" }}
26-
className="text-[40px] font-extrabold text-teal-400 sm:text-[100px] md:text-[130px] lg:text-[170px]"
27-
>
28-
ROADMAP TO SUCCESS
29-
</motion.h1>
65+
{/* Main Content */}
66+
<div className="relative z-10 flex flex-col items-center justify-center py-20 text-center lg:min-h-screen lg:pb-32">
67+
{/* Background overlay for better text readability */}
68+
<div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/60 to-transparent"></div>
69+
70+
<div className="relative z-20 max-w-6xl px-4">
71+
<motion.div
72+
initial={{ opacity: 0, y: -20 }}
73+
animate={{ opacity: 1, y: 0 }}
74+
transition={{ duration: 0.8, ease: "easeOut" }}
75+
className="mb-8"
76+
>
77+
<div className="flex items-center justify-center space-x-3 mb-4">
78+
<div className="h-8 w-8 rounded-lg bg-gradient-to-br from-teal-400 to-cyan-500 flex items-center justify-center">
79+
<span className="text-white font-bold text-sm">C</span>
80+
</div>
81+
<span className="text-teal-300 font-semibold text-lg">Codebility</span>
82+
</div>
83+
<span className="inline-block rounded-full bg-gradient-to-r from-teal-400/20 to-cyan-400/20 px-6 py-2 text-sm font-semibold text-teal-300 backdrop-blur-sm border border-teal-400/30">
84+
Welcome to Your Journey
85+
</span>
86+
</motion.div>
3087

31-
<motion.h2
32-
initial={{ opacity: 0, y: 10 }}
33-
animate={{ opacity: 1, y: 0 }}
34-
transition={{ delay: 0.5, duration: 0.8 }}
35-
className="mt-4 text-base font-medium text-teal-400 sm:text-lg md:text-2xl"
36-
>
37-
Check your journey below
38-
</motion.h2>
88+
<motion.h1
89+
initial={{ opacity: 0, scale: 0.9 }}
90+
animate={{ opacity: 1, scale: 1 }}
91+
transition={{ duration: 1, ease: "easeOut", delay: 0.2 }}
92+
className="mb-8 text-[48px] font-bold leading-tight text-white sm:text-[80px] md:text-[120px] lg:text-[150px] xl:text-[180px]"
93+
>
94+
<span className="block bg-gradient-to-r from-white via-gray-100 to-white bg-clip-text text-transparent tracking-wider">
95+
ROADMAP
96+
</span>
97+
</motion.h1>
98+
99+
<motion.p
100+
initial={{ opacity: 0, y: 20 }}
101+
animate={{ opacity: 1, y: 0 }}
102+
transition={{ delay: 0.6, duration: 0.8 }}
103+
className="mx-auto max-w-2xl text-lg font-medium text-gray-300 sm:text-xl md:text-2xl"
104+
>
105+
Navigate your path from
106+
<span className="text-yellow-400 font-semibold"> Intern </span>
107+
to
108+
<span className="text-pink-400 font-semibold"> Codev </span>
109+
to
110+
<span className="text-blue-400 font-semibold"> Mentor</span>
111+
<br />
112+
<span className="text-teal-400 text-base mt-2 block">Check your journey below</span>
113+
</motion.p>
114+
115+
<motion.div
116+
initial={{ opacity: 0 }}
117+
animate={{ opacity: 1 }}
118+
transition={{ delay: 1, duration: 0.8 }}
119+
className="mt-12"
120+
>
121+
<div className="flex items-center justify-center space-x-2 mb-8">
122+
<div className="h-1 w-12 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full"></div>
123+
<div className="h-1 w-8 bg-gradient-to-r from-pink-400 to-purple-400 rounded-full"></div>
124+
<div className="h-1 w-12 bg-gradient-to-r from-blue-400 to-teal-400 rounded-full"></div>
125+
</div>
126+
</motion.div>
127+
128+
{/* Transition Element - Road Start */}
129+
<motion.div
130+
initial={{ opacity: 0, y: 30 }}
131+
animate={{ opacity: 1, y: 0 }}
132+
transition={{ delay: 1.4, duration: 1 }}
133+
className="mt-16 flex flex-col items-center"
134+
>
135+
{/* Start point circle */}
136+
<div className="relative">
137+
<div className="h-6 w-6 rounded-full bg-green-500 border-2 border-white shadow-lg"></div>
138+
<div className="absolute -top-1 -left-1 h-8 w-8 rounded-full bg-green-500/30 animate-ping"></div>
139+
</div>
140+
141+
{/* Road leading down */}
142+
<div className="mt-4 h-24 w-1 bg-gradient-to-b from-yellow-400 via-yellow-500 to-transparent"></div>
143+
144+
{/* Arrow pointing down */}
145+
<motion.div
146+
animate={{ y: [0, 8, 0] }}
147+
transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
148+
className="mt-2"
149+
>
150+
<svg className="h-6 w-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24">
151+
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
152+
</svg>
153+
</motion.div>
154+
</motion.div>
155+
</div>
39156
</div>
40157
</section>
41158
);

0 commit comments

Comments
 (0)