Skip to content

Commit f96615f

Browse files
BistNaveenSinghBistNaveenSingh
committed
feat: add light/dark mode support to contributors section
1 parent 723fa76 commit f96615f

1 file changed

Lines changed: 25 additions & 25 deletions

File tree

‎app/contributors/ContributorsClient.tsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -158,12 +158,12 @@ export default function ContributorsClient({
158158
return (
159159
<div
160160
ref={containerRef}
161-
className="relative min-h-screen bg-[#050505] text-white selection:bg-cyan-500/30 overflow-hidden font-sans"
161+
className="relative min-h-screen bg-white dark:bg-[#050505] text-black dark:text-white selection:bg-cyan-500/30 overflow-hidden font-sans"
162162
>
163163
{/* ── Custom Cursor ── */}
164164
<div
165165
ref={cursorRef}
166-
className="fixed top-0 left-0 w-8 h-8 rounded-full bg-white mix-blend-difference pointer-events-none z-[100] -ml-4 -mt-4 hidden md:block"
166+
className="fixed top-0 left-0 w-8 h-8 rounded-full bg-black dark:bg-white mix-blend-difference pointer-events-none z-[100] -ml-4 -mt-4 hidden md:block"
167167
style={{ transition: 'width 0.2s, height 0.2s' }}
168168
/>
169169

@@ -173,7 +173,7 @@ export default function ContributorsClient({
173173
<div className="absolute inset-0 opacity-[0.03] bg-[url('https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Dissolve_Noise_Texture.png')] bg-repeat" />
174174

175175
{/* Animated Grid */}
176-
<div className="bg-grid absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
176+
<div className="bg-grid absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.05)_1px,transparent_1px)] dark:bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
177177

178178
{/* Ambient Glows */}
179179
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-cyan-600/20 blur-[150px]" />
@@ -191,10 +191,10 @@ export default function ContributorsClient({
191191
initial={{ opacity: 0, y: -20 }}
192192
animate={{ opacity: 1, y: 0 }}
193193
transition={{ duration: 1, delay: 0.2, ease: 'easeOut' }}
194-
className="mb-8 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 backdrop-blur-md"
194+
className="mb-8 inline-flex items-center gap-2 rounded-full border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 px-4 py-2 backdrop-blur-md"
195195
>
196-
<Sparkles className="h-4 w-4 text-cyan-400" />
197-
<span className="text-xs uppercase tracking-widest text-zinc-400 font-semibold">
196+
<Sparkles className="h-4 w-4 text-cyan-500 dark:text-cyan-400" />
197+
<span className="text-xs uppercase tracking-widest text-zinc-600 dark:text-zinc-400 font-semibold">
198198
The Architect Collective
199199
</span>
200200
</motion.div>
@@ -206,7 +206,7 @@ export default function ContributorsClient({
206206
transition={{ duration: 1.2, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
207207
className="max-w-6xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl md:text-8xl lg:text-[10rem]"
208208
>
209-
<span className="block text-transparent bg-clip-text bg-gradient-to-b from-white to-white/40">
209+
<span className="block text-transparent bg-clip-text bg-gradient-to-b from-black to-black/60 dark:from-white dark:to-white/40">
210210
BUILDING
211211
</span>
212212
<span className="block text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-500 pb-4">
@@ -219,7 +219,7 @@ export default function ContributorsClient({
219219
initial={{ opacity: 0, y: 20 }}
220220
animate={{ opacity: 1, y: 0 }}
221221
transition={{ duration: 1, delay: 0.6, ease: 'easeOut' }}
222-
className="mt-8 max-w-2xl text-lg md:text-xl text-zinc-400 font-light"
222+
className="mt-8 max-w-2xl text-lg md:text-xl text-zinc-600 dark:text-zinc-400 font-light"
223223
>
224224
Meet the elite developers shaping the future of GitHub visualization through open-source
225225
mastery and relentless innovation.
@@ -228,7 +228,7 @@ export default function ContributorsClient({
228228
<MagneticButton className="mt-12">
229229
<a
230230
href="#explore"
231-
className="group relative inline-flex items-center justify-center gap-3 rounded-full bg-white px-8 py-4 text-black font-semibold transition-transform hover:scale-105 active:scale-95 overflow-hidden"
231+
className="group relative inline-flex items-center justify-center gap-3 rounded-full bg-black dark:bg-white px-8 py-4 text-white dark:text-black font-semibold transition-transform hover:scale-105 active:scale-95 overflow-hidden"
232232
>
233233
<span className="relative z-10 flex items-center gap-2">
234234
Explore The Elite{' '}
@@ -244,35 +244,35 @@ export default function ContributorsClient({
244244
{/* ── Stats Section ── */}
245245
<section ref={statsRef} className="mx-auto max-w-7xl px-6">
246246
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
247-
<div className="stat-item group relative overflow-hidden rounded-[2rem] border border-white/10 bg-white/[0.02] p-10 backdrop-blur-3xl hover:bg-white/[0.04] transition-colors duration-500">
247+
<div className="stat-item group relative overflow-hidden rounded-[2rem] border border-black/10 dark:border-white/10 bg-black/[0.02] dark:bg-white/[0.02] p-10 backdrop-blur-3xl hover:bg-black/[0.04] dark:hover:bg-white/[0.04] transition-colors duration-500">
248248
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
249-
<Users className="h-10 w-10 text-cyan-400 mb-6" />
249+
<Users className="h-10 w-10 text-cyan-500 dark:text-cyan-400 mb-6" />
250250
<div className="text-6xl font-black tracking-tighter mb-2">
251251
<AnimatedCounter value={contributors.length} />+
252252
</div>
253-
<div className="text-zinc-500 uppercase tracking-widest text-sm font-semibold">
253+
<div className="text-zinc-600 dark:text-zinc-500 uppercase tracking-widest text-sm font-semibold">
254254
Global Architects
255255
</div>
256256
</div>
257257

258-
<div className="stat-item group relative overflow-hidden rounded-[2rem] border border-white/10 bg-white/[0.02] p-10 backdrop-blur-3xl hover:bg-white/[0.04] transition-colors duration-500">
258+
<div className="stat-item group relative overflow-hidden rounded-[2rem] border border-black/10 dark:border-white/10 bg-black/[0.02] dark:bg-white/[0.02] p-10 backdrop-blur-3xl hover:bg-black/[0.04] dark:hover:bg-white/[0.04] transition-colors duration-500">
259259
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
260-
<GitPullRequest className="h-10 w-10 text-purple-400 mb-6" />
260+
<GitPullRequest className="h-10 w-10 text-purple-500 dark:text-purple-400 mb-6" />
261261
<div className="text-6xl font-black tracking-tighter mb-2">
262262
<AnimatedCounter value={totalContributions} />+
263263
</div>
264-
<div className="text-zinc-500 uppercase tracking-widest text-sm font-semibold">
264+
<div className="text-zinc-600 dark:text-zinc-500 uppercase tracking-widest text-sm font-semibold">
265265
Total Commits
266266
</div>
267267
</div>
268268

269-
<div className="stat-item group relative overflow-hidden rounded-[2rem] border border-white/10 bg-white/[0.02] p-10 backdrop-blur-3xl hover:bg-white/[0.04] transition-colors duration-500">
269+
<div className="stat-item group relative overflow-hidden rounded-[2rem] border border-black/10 dark:border-white/10 bg-black/[0.02] dark:bg-white/[0.02] p-10 backdrop-blur-3xl hover:bg-black/[0.04] dark:hover:bg-white/[0.04] transition-colors duration-500">
270270
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
271-
<Globe className="h-10 w-10 text-blue-400 mb-6" />
272-
<div className="text-6xl font-black tracking-tighter mb-2 text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400">
271+
<Globe className="h-10 w-10 text-blue-500 dark:text-blue-400 mb-6" />
272+
<div className="text-6xl font-black tracking-tighter mb-2 text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-cyan-500 dark:from-blue-400 dark:to-cyan-400">
273273
OSS
274274
</div>
275-
<div className="text-zinc-500 uppercase tracking-widest text-sm font-semibold">
275+
<div className="text-zinc-600 dark:text-zinc-500 uppercase tracking-widest text-sm font-semibold">
276276
Community Driven
277277
</div>
278278
</div>
@@ -283,7 +283,7 @@ export default function ContributorsClient({
283283
<section className="mx-auto mt-40 max-w-7xl px-6">
284284
<div className="mb-20">
285285
<h2 className="text-5xl md:text-7xl font-black tracking-tighter">THE VANGUARD</h2>
286-
<p className="mt-4 text-xl text-zinc-500 max-w-2xl font-light">
286+
<p className="mt-4 text-xl text-zinc-600 dark:text-zinc-500 max-w-2xl font-light">
287287
The highest impact contributors pushing the boundaries of what is possible.
288288
</p>
289289
</div>
@@ -294,7 +294,7 @@ export default function ContributorsClient({
294294
<section className="mx-auto mt-40 max-w-7xl px-6">
295295
<div className="mb-20">
296296
<h2 className="text-5xl md:text-7xl font-black tracking-tighter">THE COLLECTIVE</h2>
297-
<p className="mt-4 text-xl text-zinc-500 max-w-2xl font-light">
297+
<p className="mt-4 text-xl text-zinc-600 dark:text-zinc-500 max-w-2xl font-light">
298298
Every single mind that has contributed code, ideas, and passion to the project.
299299
</p>
300300
</div>
@@ -303,15 +303,15 @@ export default function ContributorsClient({
303303

304304
{/* ── CTA Section ── */}
305305
<section className="mx-auto mt-40 mb-20 max-w-5xl px-6">
306-
<div className="relative overflow-hidden rounded-[3rem] border border-white/10 bg-white/[0.02] p-16 text-center backdrop-blur-3xl shadow-2xl">
306+
<div className="relative overflow-hidden rounded-[3rem] border border-black/10 dark:border-white/10 bg-black/[0.02] dark:bg-white/[0.02] p-16 text-center backdrop-blur-3xl shadow-2xl">
307307
{/* Inner Glows */}
308308
<div className="absolute -top-32 -left-32 w-64 h-64 bg-cyan-500/30 blur-[100px] rounded-full pointer-events-none" />
309309
<div className="absolute -bottom-32 -right-32 w-64 h-64 bg-purple-500/30 blur-[100px] rounded-full pointer-events-none" />
310310

311311
<h2 className="text-5xl md:text-7xl font-black tracking-tighter mb-6">
312312
READY TO BUILD?
313313
</h2>
314-
<p className="text-xl text-zinc-400 mb-12 max-w-2xl mx-auto font-light">
314+
<p className="text-xl text-zinc-600 dark:text-zinc-400 mb-12 max-w-2xl mx-auto font-light">
315315
Join the elite collective of developers. Your next great contribution starts here.
316316
</p>
317317

@@ -320,7 +320,7 @@ export default function ContributorsClient({
320320
<Link
321321
href="https://github.com/JhaSourav07/commitpulse"
322322
target="_blank"
323-
className="group relative inline-flex items-center gap-3 rounded-full bg-white px-10 py-5 font-bold text-black transition-transform hover:scale-105 active:scale-95"
323+
className="group relative inline-flex items-center gap-3 rounded-full bg-black dark:bg-white px-10 py-5 font-bold text-white dark:text-black transition-transform hover:scale-105 active:scale-95"
324324
>
325325
<GitFork className="h-6 w-6" />
326326
View Repository
@@ -331,7 +331,7 @@ export default function ContributorsClient({
331331
<Link
332332
href="https://github.com/JhaSourav07/commitpulse/issues"
333333
target="_blank"
334-
className="group relative inline-flex items-center gap-3 rounded-full border border-white/20 bg-white/5 px-10 py-5 font-bold text-white transition-colors hover:bg-white/10 hover:border-white/40 backdrop-blur-md"
334+
className="group relative inline-flex items-center gap-3 rounded-full border border-black/20 dark:border-white/20 bg-black/5 dark:bg-white/5 px-10 py-5 font-bold text-black dark:text-white transition-colors hover:bg-black/10 dark:hover:bg-white/10 hover:border-black/40 dark:hover:border-white/40 backdrop-blur-md"
335335
>
336336
Start Contributing{' '}
337337
<ArrowRight className="h-5 w-5 group-hover:translate-x-2 transition-transform" />

0 commit comments

Comments
 (0)