Skip to content

Commit 13bcffd

Browse files
adity1rautadity1raut
committed
✨ feat: enhance MaintainerLadderPage with hover effects and improved layout
Signed-off-by: adity1raut <araut7798@gmail.com>
1 parent 7f6f546 commit 13bcffd

1 file changed

Lines changed: 170 additions & 126 deletions

File tree

‎src/app/[locale]/ladder/page.tsx‎

Lines changed: 170 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ import {
99
PageActions,
1010
} from "../../../components/index";
1111
import { useTranslations } from "next-intl";
12+
import { useState } from "react";
1213

1314
export default function MaintainerLadderPage() {
1415
const t = useTranslations("ladderPage");
16+
const [hoveredLevel, setHoveredLevel] = useState<number | null>(null);
1517

1618
const levels = [
1719
{
@@ -259,185 +261,227 @@ export default function MaintainerLadderPage() {
259261
<section className="py-8 sm:py-12 md:py-16 lg:py-20">
260262
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
261263
{/* Mobile Layout */}
262-
<div className="lg:hidden">
264+
<div className="lg:hidden space-y-6">
263265
{levels.map((level, index) => (
264-
<div key={level.id} className="mb-4">
265-
{/* Level Card */}
266-
<div className="bg-gray-800/40 backdrop-blur-md rounded-lg p-6 border border-white/10 relative">
267-
{/* Level Number */}
268-
<div className="absolute -top-6 left-1/2 transform -translate-x-1/2">
266+
<div
267+
key={level.id}
268+
className="relative group"
269+
onMouseEnter={() => setHoveredLevel(level.id)}
270+
onMouseLeave={() => setHoveredLevel(null)}
271+
>
272+
{/* Glowing border effect */}
273+
<div
274+
className={`absolute -inset-[2px] bg-gradient-to-r ${level.gradient} rounded-xl opacity-0 group-hover:opacity-70 blur-sm transition-opacity duration-500`}
275+
></div>
276+
277+
<div className="relative bg-gradient-to-br from-gray-900/90 to-gray-800/90 backdrop-blur-xl rounded-xl p-5 border border-white/5 overflow-hidden">
278+
{/* Animated background particles */}
279+
<div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700">
280+
<div
281+
className={`absolute top-0 left-0 w-32 h-32 bg-gradient-to-br ${level.gradient} rounded-full blur-3xl opacity-20`}
282+
></div>
283+
<div
284+
className={`absolute bottom-0 right-0 w-32 h-32 bg-gradient-to-tl ${level.gradient} rounded-full blur-3xl opacity-20`}
285+
></div>
286+
</div>
287+
288+
{/* Level badge */}
289+
<div className="absolute -top-3 -right-3">
269290
<div
270-
className={`w-12 h-12 bg-gradient-to-br ${level.gradient} rounded-full flex items-center justify-center shadow-lg`}
291+
className={`w-10 h-10 bg-gradient-to-br ${level.gradient} rounded-full flex items-center justify-center shadow-lg shadow-black/50 group-hover:scale-110 transition-transform duration-300`}
271292
>
272-
<span className="text-white font-bold text-lg">
293+
<span className="text-white font-bold text-sm">
273294
{level.id}
274295
</span>
275296
</div>
276297
</div>
277298

278-
<div className="pt-4">
279-
<div className="text-center mb-4">
280-
<div
281-
className={`inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br ${level.gradient} rounded-full mb-3`}
282-
>
283-
<div className="text-white">{level.icon}</div>
284-
</div>
285-
<h3 className="text-xl font-bold text-white mb-2">
299+
<div className="relative flex items-start gap-4">
300+
{/* Icon */}
301+
<div
302+
className={`flex-shrink-0 w-12 h-12 bg-gradient-to-br ${level.gradient} rounded-lg flex items-center justify-center group-hover:rotate-6 transition-transform duration-300`}
303+
>
304+
<div className="text-white scale-90">{level.icon}</div>
305+
</div>
306+
307+
{/* Content */}
308+
<div className="flex-1 min-w-0">
309+
<h3 className="text-lg font-bold text-white mb-1 group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-white group-hover:to-gray-300 transition-all duration-300">
286310
{level.title}
287311
</h3>
288312
{level.timeframe && (
289-
<div className="inline-block bg-blue-900/50 rounded-full px-3 py-1 text-xs text-blue-200 mb-2">
313+
<div className="inline-block bg-blue-500/20 rounded-full px-2 py-0.5 text-xs text-blue-300 mb-2">
290314
{level.timeframe}
291315
</div>
292316
)}
293-
<p className="text-gray-300 text-sm mb-4">
317+
<p className="text-gray-400 text-sm mb-3 line-clamp-2">
294318
{level.description}
295319
</p>
296-
</div>
297320

298-
<div className="space-y-2">
299-
<h4 className="text-sm font-semibold text-white mb-2">
300-
{t("requirementsLabel")}
301-
</h4>
302-
<ul className="space-y-1">
303-
{level.requirements.map((req, reqIndex) => (
304-
<li
305-
key={reqIndex}
306-
className="text-xs text-gray-300 flex items-start"
307-
>
308-
<span className="text-green-400 mr-2 mt-1">
309-
•
310-
</span>
311-
<span>{req}</span>
312-
</li>
321+
{/* Compact requirements */}
322+
<div className="space-y-1">
323+
{level.requirements.slice(0, 2).map((req, reqIndex) => (
324+
<div key={reqIndex} className="flex items-start gap-2">
325+
<div
326+
className={`w-1 h-1 rounded-full bg-gradient-to-r ${level.gradient} mt-1.5 flex-shrink-0`}
327+
></div>
328+
<p className="text-xs text-gray-400 line-clamp-1">
329+
{req}
330+
</p>
331+
</div>
313332
))}
314-
</ul>
315-
</div>
316-
317-
{level.goodStanding && (
318-
<div className="mt-4 p-3 bg-blue-900/20 border border-blue-500/30 rounded-lg">
319-
<h4 className="text-sm font-semibold text-blue-300 mb-2">
320-
{t("goodStandingLabel")}
321-
</h4>
322-
<p className="text-xs text-gray-300 leading-relaxed">
323-
{level.goodStanding}
324-
</p>
333+
{level.requirements.length > 2 && (
334+
<p className="text-xs text-gray-500 italic">
335+
+{level.requirements.length - 2} more
336+
</p>
337+
)}
325338
</div>
326-
)}
339+
</div>
340+
</div>
327341

328-
{index < levels.length - 1 && (
329-
<div className="text-center mt-4">
330-
<div className="text-xs text-gray-400">
331-
{t("nextLevelLabel")}
332-
</div>
333-
<div className="text-sm font-semibold text-blue-400">
342+
{/* Next level indicator */}
343+
{index < levels.length - 1 && (
344+
<div className="mt-3 pt-3 border-t border-white/5">
345+
<div className="flex items-center justify-between">
346+
<span className="text-xs text-gray-500">Next:</span>
347+
<span
348+
className={`text-xs font-semibold bg-gradient-to-r ${level.gradient} bg-clip-text text-transparent`}
349+
>
334350
{level.nextLevel}
335-
</div>
351+
</span>
336352
</div>
337-
)}
338-
</div>
353+
</div>
354+
)}
339355
</div>
340-
341-
{/* Connector */}
342-
{index < levels.length - 1 && (
343-
<div className="flex justify-center mt-2">
344-
<div className="w-0.5 h-6 bg-gradient-to-b from-blue-500 to-purple-500"></div>
345-
</div>
346-
)}
347356
</div>
348357
))}
349358
</div>
350359

351360
{/* Desktop Layout */}
352361
<div className="hidden lg:block">
353-
{/* Central Ladder Line */}
354-
<div className="absolute left-1/2 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-500 via-purple-500 to-red-500 transform -translate-x-1/2 z-5"></div>
362+
{/* Central Ladder Line with pulse effect */}
363+
<div className="absolute left-1/2 top-0 bottom-0 w-1 transform -translate-x-1/2 z-5">
364+
<div className="absolute inset-0 bg-gradient-to-b from-blue-500 via-purple-500 to-red-500"></div>
365+
<div className="absolute inset-0 bg-gradient-to-b from-blue-400 via-purple-400 to-red-400 animate-pulse opacity-50"></div>
366+
</div>
355367

356368
{levels.map((level, index) => (
357-
<div key={level.id} className="relative z-20">
369+
<div
370+
key={level.id}
371+
className="relative z-20 mb-8"
372+
onMouseEnter={() => setHoveredLevel(level.id)}
373+
onMouseLeave={() => setHoveredLevel(null)}
374+
>
358375
<div
359-
className={`flex items-center ${index % 2 === 0 ? "flex-row" : "flex-row-reverse"}`}
376+
className={`flex items-center ${
377+
index % 2 === 0 ? "flex-row" : "flex-row-reverse"
378+
}`}
360379
>
361380
{/* Content Side */}
362381
<div
363-
className={`w-5/12 ${index % 2 === 0 ? "pr-12" : "pl-12"}`}
382+
className={`w-5/12 ${
383+
index % 2 === 0 ? "pr-12" : "pl-12"
384+
}`}
364385
>
365-
<div className="bg-gray-800/40 backdrop-blur-md rounded-lg p-8 border border-white/10 transition-all duration-300 hover:bg-gray-800/50 hover:border-white/20 hover:scale-105">
366-
<div className="flex items-center mb-4">
367-
<div
368-
className={`w-12 h-12 bg-gradient-to-br ${level.gradient} rounded-full flex items-center justify-center mr-4`}
369-
>
370-
<div className="text-white">{level.icon}</div>
371-
</div>
372-
<div>
373-
<h3 className="text-2xl font-bold text-white">
374-
{level.title}
375-
</h3>
376-
{level.timeframe && (
377-
<div className="inline-block bg-blue-900/50 rounded-full px-3 py-1 text-xs text-blue-200 mt-1">
378-
{level.timeframe}
379-
</div>
380-
)}
381-
</div>
382-
</div>
386+
<div className="relative group">
387+
{/* Glowing border */}
388+
<div
389+
className={`absolute -inset-[2px] bg-gradient-to-r ${level.gradient} rounded-xl opacity-0 group-hover:opacity-70 blur transition-opacity duration-500`}
390+
></div>
383391

384-
<p className="text-gray-300 mb-6 leading-relaxed">
385-
{level.description}
386-
</p>
392+
<div className="relative bg-gradient-to-br from-gray-900/90 to-gray-800/90 backdrop-blur-xl rounded-xl p-6 border border-white/5 overflow-hidden">
393+
{/* Animated corner accents */}
394+
<div
395+
className={`absolute top-0 ${
396+
index % 2 === 0 ? "right-0" : "left-0"
397+
} w-24 h-24 bg-gradient-to-br ${level.gradient} rounded-full blur-3xl opacity-0 group-hover:opacity-20 transition-opacity duration-700`}
398+
></div>
387399

388-
<div className="space-y-3">
389-
<h4 className="text-lg font-semibold text-white">
390-
{t("requirementsLabel")}
391-
</h4>
392-
<ul className="space-y-2">
393-
{level.requirements.map((req, reqIndex) => (
394-
<li
395-
key={reqIndex}
396-
className="text-gray-300 flex items-start"
400+
<div className="relative">
401+
{/* Header */}
402+
<div className="flex items-center gap-3 mb-3">
403+
<div
404+
className={`w-10 h-10 bg-gradient-to-br ${level.gradient} rounded-lg flex items-center justify-center group-hover:rotate-12 transition-transform duration-300`}
397405
>
398-
<span className="text-green-400 mr-3 mt-1 text-lg">
399-
•
400-
</span>
401-
<span className="text-sm leading-relaxed">
402-
{req}
403-
</span>
404-
</li>
405-
))}
406-
</ul>
407-
</div>
406+
<div className="text-white scale-90">
407+
{level.icon}
408+
</div>
409+
</div>
410+
<div className="flex-1">
411+
<h3 className="text-xl font-bold text-white group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-white group-hover:to-gray-300 transition-all duration-300">
412+
{level.title}
413+
</h3>
414+
{level.timeframe && (
415+
<div className="inline-block bg-blue-500/20 rounded-full px-2 py-0.5 text-xs text-blue-300 mt-1">
416+
{level.timeframe}
417+
</div>
418+
)}
419+
</div>
420+
</div>
408421

409-
{level.goodStanding && (
410-
<div className="mt-6 p-4 bg-blue-900/20 border border-blue-500/30 rounded-lg">
411-
<h4 className="text-base font-semibold text-blue-300 mb-2">
412-
{t("goodStandingLabel")}
413-
</h4>
414-
<p className="text-sm text-gray-300 leading-relaxed">
415-
{level.goodStanding}
422+
{/* Description */}
423+
<p className="text-gray-400 text-sm mb-4 leading-relaxed">
424+
{level.description}
416425
</p>
417-
</div>
418-
)}
419426

420-
{index < levels.length - 1 && (
421-
<div className="mt-6 pt-4 border-t border-gray-700/50">
422-
<div className="text-sm text-gray-400">
423-
{t("nextLevelLabel")}
424-
</div>
425-
<div className="text-lg font-semibold text-blue-400">
426-
{level.nextLevel}
427+
{/* Requirements */}
428+
<div className="space-y-2 mb-4">
429+
{level.requirements.map((req, reqIndex) => (
430+
<div
431+
key={reqIndex}
432+
className="flex items-start gap-2 group/item"
433+
>
434+
<div
435+
className={`w-1.5 h-1.5 rounded-full bg-gradient-to-r ${level.gradient} mt-1.5 flex-shrink-0 group-hover/item:scale-150 transition-transform duration-200`}
436+
></div>
437+
<p className="text-xs text-gray-400 leading-relaxed">
438+
{req}
439+
</p>
440+
</div>
441+
))}
427442
</div>
443+
444+
{/* Good Standing */}
445+
{level.goodStanding && (
446+
<div className="p-3 bg-gradient-to-br from-blue-500/10 to-purple-500/10 border border-blue-500/20 rounded-lg">
447+
<p className="text-xs text-gray-300 leading-relaxed">
448+
{level.goodStanding}
449+
</p>
450+
</div>
451+
)}
452+
453+
{/* Next Level */}
454+
{index < levels.length - 1 && (
455+
<div className="mt-4 pt-3 border-t border-white/5 flex items-center justify-between">
456+
<span className="text-xs text-gray-500">Next Level:</span>
457+
<span
458+
className={`text-sm font-semibold bg-gradient-to-r ${level.gradient} bg-clip-text text-transparent`}
459+
>
460+
{level.nextLevel}
461+
</span>
462+
</div>
463+
)}
428464
</div>
429-
)}
465+
</div>
430466
</div>
431467
</div>
432468

433469
{/* Center Circle */}
434470
<div className="w-2/12 flex justify-center">
435471
<div
436-
className={`w-20 h-20 bg-gradient-to-br ${level.gradient} rounded-full flex items-center justify-center shadow-2xl z-30 transition-all duration-300 hover:scale-110`}
472+
className={`relative w-16 h-16 bg-gradient-to-br ${level.gradient} rounded-full flex items-center justify-center shadow-2xl z-30 transition-all duration-300 ${
473+
hoveredLevel === level.id ? "scale-125" : "scale-100"
474+
}`}
437475
>
438-
<span className="text-white font-bold text-2xl">
476+
<span className="text-white font-bold text-xl">
439477
{level.id}
440478
</span>
479+
{/* Ripple effect */}
480+
{hoveredLevel === level.id && (
481+
<div
482+
className={`absolute inset-0 rounded-full bg-gradient-to-br ${level.gradient} animate-ping opacity-75`}
483+
></div>
484+
)}
441485
</div>
442486
</div>
443487

0 commit comments

Comments
 (0)