Skip to content

Commit 73a9eaa

Browse files
Jecomo-Alyssa-LynJecomo-Alyssa-Lyn
committed
Fix the meet the team display due to incorrect data fetch
2 parents 854cbdd + 10e4b1e commit 73a9eaa

31 files changed

Lines changed: 1575 additions & 114 deletions

‎apps/codebility/app/auth/onboarding/TeamSectionWrapper.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
// app/auth/onboarding/TeamSectionWrapper.tsx
2-
"use client";
3-
4-
import dynamic from "next/dynamic";
5-
6-
const TeamSection = dynamic(() => import("./_components/Team/TeamSection"), {
7-
ssr: false,
8-
});
2+
import TeamSection from "./_components/Team/TeamSection";
93

104
export default function TeamSectionWrapper() {
115
return <TeamSection />;

‎apps/codebility/app/auth/onboarding/_components/Expect/ExpectSection.tsx‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -60,25 +60,22 @@ export default function ExpectSectionLight() {
6060
return (
6161
<section
6262
ref={sectionRef}
63-
className="relative flex w-full items-center justify-center overflow-hidden bg-white px-6 py-24 text-zinc-800 lg:min-h-screen"
63+
className="relative flex w-full items-center justify-center overflow-hidden bg-gradient-to-br from-zinc-950 via-black to-zinc-950 px-6 py-24 text-white lg:min-h-screen"
6464
>
65-
{/* very soft background accents */}
66-
<div className="pointer-events-none absolute inset-0 opacity-70">
67-
<div className="absolute -right-24 -top-24 h-80 w-80 rounded-full bg-cyan-100 blur-2xl" />
68-
<div className="absolute -bottom-24 -left-24 h-80 w-80 rounded-full bg-pink-100 blur-2xl" />
69-
</div>
65+
{/* soft pastel glows for dark motif */}
66+
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(900px_520px_at_85%_20%,rgba(236,72,153,0.1),transparent_60%),radial-gradient(800px_480px_at_10%_80%,rgba(20,184,166,0.1),transparent_60%)]" />
7067

7168
<div className="w-full max-w-5xl">
7269
{/* Heading */}
7370
<motion.h2
74-
initial={{ opacity: 0, y: 24 }}
71+
initial={{ opacity: 0, y: 30 }}
7572
whileInView={{ opacity: 1, y: 0 }}
76-
transition={{ duration: 0.6 }}
73+
transition={{ duration: 0.7, ease: "easeOut" }}
7774
viewport={{ once: true }}
78-
className="mb-14 text-center text-3xl font-extrabold tracking-tight"
75+
className="mb-16 text-center text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl"
7976
>
8077
What we expect from{" "}
81-
<span className="bg-gradient-to-r from-purple-600 via-fuchsia-600 to-cyan-600 bg-clip-text font-extrabold text-transparent">
78+
<span className="bg-gradient-to-r from-pink-400 via-purple-500 to-teal-600 bg-clip-text font-extrabold text-transparent">
8279
YOU
8380
</span>
8481
</motion.h2>
@@ -90,8 +87,8 @@ export default function ExpectSectionLight() {
9087
ref={lineRef}
9188
initial={{ height: 0 }}
9289
animate={{ height: "100%" }}
93-
transition={{ duration: 0.9, ease: "easeInOut" }}
94-
className="absolute left-1/2 hidden w-px -translate-x-1/2 bg-zinc-200 md:block"
90+
transition={{ duration: 1.2, ease: "easeInOut" }}
91+
className="absolute left-1/2 hidden w-px -translate-x-1/2 bg-gradient-to-b from-cyan-400/50 via-purple-500/50 to-pink-400/50 md:block"
9592
/>
9693

9794
{/* Steps */}
@@ -102,42 +99,45 @@ export default function ExpectSectionLight() {
10299
return (
103100
<motion.div
104101
key={item.number}
105-
initial={{ opacity: 0, y: 18 }}
106-
whileInView={{ opacity: 1, y: 0 }}
107-
transition={{ duration: 0.45, delay: i * 0.05 }}
102+
initial={{ opacity: 0, x: isLeft ? -40 : 40, y: 20 }}
103+
whileInView={{ opacity: 1, x: 0, y: 0 }}
104+
transition={{
105+
duration: 0.6,
106+
delay: i * 0.1,
107+
ease: "easeOut"
108+
}}
108109
viewport={{ once: true, amount: 0.3 }}
109110
className={`relative flex flex-col items-center md:flex-row ${
110111
isLeft ? "md:justify-start" : "md:justify-end"
111112
}`}
112113
>
113-
{/* Connector (super soft) */}
114-
{i !== 0 && (
115-
<div className="absolute left-1/2 top-[-18px] z-0 hidden h-full w-px -translate-x-1/2 bg-zinc-100 md:block" />
116-
)}
117-
118114
{/* Row */}
119115
<div
120-
className={`z-10 flex w-full flex-col items-center gap-4 md:w-[calc(50%-1rem)] md:flex-row ${
116+
className={`z-10 flex w-full flex-col items-center gap-6 md:w-[calc(50%-1rem)] md:flex-row ${
121117
isLeft
122118
? "md:order-2 md:mr-auto"
123119
: "flex-row-reverse md:order-1 md:ml-auto"
124120
}`}
125121
>
126-
{/* Number badge (light, with border) */}
127-
<div
128-
className={`flex h-14 w-14 items-center justify-center rounded-full text-lg font-bold text-white ${item.color} shadow-sm ring-1 ring-white/60`}
122+
{/* Number badge (enhanced with gradient) */}
123+
<motion.div
124+
whileHover={{ scale: 1.1, rotate: 5 }}
125+
transition={{ type: "spring", stiffness: 300 }}
126+
className={`flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-full text-xl font-bold text-white ${item.color} shadow-lg ring-2 ring-white/40`}
129127
>
130128
{item.number}
131-
</div>
129+
</motion.div>
132130

133-
{/* Card (light, subtle shadow) */}
134-
<div
135-
className={`mt-2 w-full rounded-xl border border-zinc-200 bg-white/80 p-5 text-center text-sm leading-relaxed shadow-sm backdrop-blur-sm md:mt-0 ${
131+
{/* Card (dark theme with larger text) */}
132+
<motion.div
133+
whileHover={{ scale: 1.02 }}
134+
transition={{ type: "spring", stiffness: 300 }}
135+
className={`mt-2 w-full rounded-xl border border-white/10 bg-white/[0.06] p-6 text-center text-base leading-relaxed text-white/90 shadow-md backdrop-blur-md md:mt-0 md:text-lg ${
136136
isLeft ? "md:text-left" : "md:text-right"
137137
}`}
138138
>
139139
{item.text}
140-
</div>
140+
</motion.div>
141141
</div>
142142
</motion.div>
143143
);

‎apps/codebility/app/auth/onboarding/_components/HeroWithAboutEffect/Slides/AboutUs.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,37 +13,37 @@ export default function AboutUsSlide() {
1313
<div className="flex w-full items-center justify-center md:w-1/2">
1414
<Lottie
1515
animationData={require("@/public/assets/images/onboarding/animation/developer-01-whoooa.json")}
16-
className="w-[280px] sm:w-[400px] md:w-[500px] lg:w-[550px]"
16+
className="w-[280px] sm:w-[400px] md:w-[500px] lg:w-[550px] brightness-150 invert"
1717
loop
1818
autoplay
1919
/>
2020
</div>
2121

2222
{/* RIGHT: Text Content */}
23-
<div className="mt-10 w-full text-stone-900 md:mt-0 md:w-1/2 md:pl-10">
23+
<div className="mt-10 w-full text-white md:mt-0 md:w-1/2 md:pl-10">
2424
<h2 className="text-center text-4xl font-bold sm:text-5xl md:text-left">
25-
ABOUT <span className="text-purple-600">US</span>
25+
ABOUT <span className="bg-gradient-to-r from-pink-400 via-purple-500 to-teal-600 bg-clip-text text-transparent">US</span>
2626
</h2>
2727

28-
<p className="mt-6 text-base leading-relaxed md:text-lg">
29-
Codebility is not a traditional bootcamp. It’s a growing community of
28+
<p className="mt-6 text-base leading-relaxed text-white/80 md:text-lg">
29+
Codebility is not a traditional bootcamp. It's a growing community of
3030
aspiring and experienced developers who collaborate, learn, and build
3131
real-world projects together. Think of it as a supportive ecosystem
3232
where members gain experience, grow their skills, and boost their
3333
portfolios through teamwork and mentorship.
3434
</p>
3535

36-
<div className="mt-6 space-y-2 text-base">
37-
<p className="font-semibold">We provide:</p>
36+
<div className="mt-6 space-y-2 text-base text-white/80">
37+
<p className="font-semibold text-white">We provide:</p>
3838
<ul className="ml-4 list-disc space-y-1">
3939
<li>Access to mini-projects and internal tools</li>
4040
<li>Guidance from experienced team leads</li>
4141
<li>Opportunities to get involved in client or open-source work</li>
4242
</ul>
4343
</div>
4444

45-
<p className="mt-6 text-base leading-relaxed md:text-lg">
46-
However, joining Codebility doesn’t replace the need to study and
45+
<p className="mt-6 text-base leading-relaxed text-white/80 md:text-lg">
46+
However, joining Codebility doesn't replace the need to study and
4747
build your own foundation. Members are expected to continue learning
4848
on their own, and then apply those skills in the community to
4949
accelerate their growth.

‎apps/codebility/app/auth/onboarding/_components/HeroWithAboutEffect/Slides/Launchpad.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ export default function LaunchpadSlide() {
2121

2222
{/* Centered Text */}
2323
<div className="relative z-10 max-w-4xl px-6 text-center">
24-
<h2 className="text-3xl font-bold leading-tight text-stone-900 sm:text-4xl md:text-5xl lg:text-6xl">
25-
It’s not a course—it’s a launchpad.
24+
<h2 className="text-3xl font-bold leading-tight text-white sm:text-4xl md:text-5xl lg:text-6xl">
25+
It's not a course—it's a launchpad.
2626
</h2>
27-
<p className="mt-6 text-xl font-medium text-stone-900 sm:text-2xl">
27+
<p className="mt-6 text-xl font-medium text-white/80 sm:text-2xl">
2828
You learn by doing, by helping, and by being part of something bigger.
2929
</p>
3030
</div>

‎apps/codebility/app/auth/onboarding/_components/HeroWithAboutEffect/Slides/MissionVisionSlide.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
export default function MissionVisionSlide() {
66
return (
7-
<div className="slide justify-cente flex w-screen items-center px-6 text-stone-900 lg:h-screen">
7+
<div className="slide justify-cente flex w-screen items-center px-6 text-white lg:h-screen">
88
<div className="mx-auto flex max-w-7xl flex-col justify-center gap-10 lg:flex-row lg:gap-16">
99
{/* LEFT: Header and Vision */}
1010
<div className="flex flex-col justify-center">
@@ -13,12 +13,12 @@ export default function MissionVisionSlide() {
1313
</h2>
1414

1515
{/* Vision Card */}
16-
<div className="mt-10 w-full rounded-xl bg-gradient-to-br from-purple-100 to-purple-200 p-6 shadow-md lg:max-w-lg">
16+
<div className="mt-10 w-full rounded-xl border border-white/10 bg-white/[0.06] p-6 shadow-md backdrop-blur-md lg:max-w-lg">
1717
<div className="mb-2 flex items-center gap-3">
1818
<VisionIcon />
19-
<h3 className="text-3xl font-bold">vision</h3>
19+
<h3 className="text-3xl font-bold text-white">vision</h3>
2020
</div>
21-
<p className="text-sm sm:text-base">
21+
<p className="text-sm text-white/80 sm:text-base">
2222
To become the most impactful developer community in the world—
2323
where aspiring and experienced developers, UI/UX designers, and QA
2424
professionals grow together, build exceptional portfolios, and
@@ -30,15 +30,15 @@ export default function MissionVisionSlide() {
3030

3131
{/* RIGHT: Mission */}
3232
<div className="flex flex-col justify-between gap-6">
33-
<div className="w-full rounded-xl bg-gradient-to-br from-slate-100 to-slate-200 p-6 shadow-md lg:max-w-xl">
33+
<div className="w-full rounded-xl border border-white/10 bg-white/[0.06] p-6 shadow-md backdrop-blur-md lg:max-w-xl">
3434
<div className="mb-2 flex items-center gap-3">
3535
<MissionIcon />
36-
<h3 className="text-3xl font-bold">mission</h3>
36+
<h3 className="text-3xl font-bold text-white">mission</h3>
3737
</div>
38-
<ul className="list-disc space-y-2 pl-5 text-sm sm:text-base">
38+
<ul className="list-disc space-y-2 pl-5 text-sm text-white/80 sm:text-base">
3939
<li>
4040
To empower every member to become world-class in their
41-
craft—whether it’s development, design, or QA.
41+
craft—whether it's development, design, or QA.
4242
</li>
4343
<li>
4444
To provide a supportive space where members can learn by doing,
@@ -70,7 +70,7 @@ export default function MissionVisionSlide() {
7070
function VisionIcon() {
7171
return (
7272
<svg
73-
className="h-8 w-8 text-purple-600"
73+
className="h-8 w-8 text-purple-300"
7474
fill="none"
7575
stroke="currentColor"
7676
strokeWidth="2"
@@ -85,7 +85,7 @@ function VisionIcon() {
8585
function MissionIcon() {
8686
return (
8787
<svg
88-
className="h-8 w-8 text-teal-500"
88+
className="h-8 w-8 text-teal-300"
8989
fill="none"
9090
stroke="currentColor"
9191
strokeWidth="2"

‎apps/codebility/app/auth/onboarding/_components/HeroWithAboutEffect/Slides/WhyChooseUsSlide.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,27 +30,27 @@ export default function WhyChooseUsSlide() {
3030
];
3131

3232
return (
33-
<div className="slide relative flex w-screen flex-col justify-center text-stone-900 lg:h-screen">
33+
<div className="slide relative flex w-screen flex-col justify-center text-white lg:h-screen">
3434
{/* Features Grid */}
3535
<div className="z-0 flex flex-col items-center justify-center px-6 md:px-12 lg:px-24">
36-
<h2 className="mb-16 text-4xl font-bold tracking-tight text-[#130a3d] md:text-5xl">
37-
Why Choose <span className="text-purple-600">Codebility</span>?
36+
<h2 className="mb-16 text-4xl font-bold tracking-tight text-white md:text-5xl">
37+
Why Choose <span className="bg-gradient-to-r from-pink-400 via-purple-500 to-teal-600 bg-clip-text text-transparent">Codebility</span>?
3838
</h2>
3939
<div className="grid w-full max-w-7xl grid-cols-1 gap-8 sm:grid-cols-2">
4040
{features.map((item, i) => (
4141
<motion.div
4242
key={i}
43-
className="group flex items-start gap-4 rounded-xl bg-[#f7f7f7] p-6 shadow-md transition-all duration-300 hover:shadow-[0_0_20px_#02e6dd]"
43+
className="group flex items-start gap-4 rounded-xl border border-white/10 bg-white/[0.06] p-6 shadow-md backdrop-blur-md transition-all duration-300 hover:border-cyan-400/30 hover:shadow-cyan-500/20"
4444
whileHover={{ scale: 1.03 }}
4545
transition={{ type: "spring", stiffness: 100, damping: 12 }}
4646
>
47-
<div className="primary-gradient flex h-12 w-12 items-center justify-center rounded-full text-white">
47+
<div className="primary-gradient flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-full text-white">
4848
<item.icon />
4949
</div>
5050

5151
<div>
52-
<h3 className="mb-2 text-lg font-bold">{item.title}</h3>
53-
<p className="text-sm text-gray-700">{item.desc}</p>
52+
<h3 className="mb-2 text-lg font-bold text-white">{item.title}</h3>
53+
<p className="text-sm text-white/80">{item.desc}</p>
5454
</div>
5555
</motion.div>
5656
))}
@@ -62,7 +62,7 @@ export default function WhyChooseUsSlide() {
6262
function BriefcaseIcon() {
6363
return (
6464
<svg
65-
className="h-6 w-6"
65+
className="h-8 w-8"
6666
fill="none"
6767
stroke="currentColor"
6868
strokeWidth="2"
@@ -77,7 +77,7 @@ function BriefcaseIcon() {
7777
function UsersIcon() {
7878
return (
7979
<svg
80-
className="h-6 w-6"
80+
className="h-8 w-8"
8181
fill="none"
8282
stroke="currentColor"
8383
strokeWidth="2"
@@ -94,7 +94,7 @@ function UsersIcon() {
9494
function GlobeIcon() {
9595
return (
9696
<svg
97-
className="h-6 w-6"
97+
className="h-8 w-8"
9898
fill="none"
9999
stroke="currentColor"
100100
strokeWidth="2"
@@ -109,7 +109,7 @@ function GlobeIcon() {
109109
function LightbulbIcon() {
110110
return (
111111
<svg
112-
className="h-6 w-6"
112+
className="h-8 w-8"
113113
fill="none"
114114
stroke="currentColor"
115115
strokeWidth="2"

‎apps/codebility/app/auth/onboarding/_components/HeroWithAboutEffect/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,10 @@ export default function HeroWithAboutEffect() {
5858
<section
5959
ref={aboutRef}
6060
id="about-section"
61-
className="relative z-10 w-full overflow-hidden bg-white lg:h-screen"
61+
className="relative z-10 w-full overflow-hidden bg-gradient-to-br from-zinc-950 via-black to-zinc-950 lg:h-screen"
6262
>
63-
{/* soft pastel glows for light motif */}
64-
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(900px_520px_at_85%_20%,rgba(236,72,153,0.15),transparent_60%),radial-gradient(800px_480px_at_10%_80%,rgba(20,184,166,0.15),transparent_60%)]" />
63+
{/* soft pastel glows for dark motif */}
64+
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(900px_520px_at_85%_20%,rgba(236,72,153,0.1),transparent_60%),radial-gradient(800px_480px_at_10%_80%,rgba(20,184,166,0.1),transparent_60%)]" />
6565

6666
<div className="z-10 h-auto w-full lg:sticky lg:top-0 lg:h-screen">
6767
<AboutSlides slidesRef={slidesRef} />

0 commit comments

Comments
 (0)