Skip to content

Commit cec422e

Browse files
7se7en720257se7en72025
authored
Merge branch 'main' into faviconchange
2 parents 577e283 + 8a49cac commit cec422e

File tree

3 files changed

+182
-63
lines changed

3 files changed

+182
-63
lines changed

‎src/components/AboutUs/RoadmapSection.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@ const RoadmapSection: React.FC = () => {
1212
{/* Section header */}
1313
<div className="text-center mb-16">
1414
<motion.h2
15-
className="text-3xl font-semibold text-slate-800 dark:text-slate-200 sm:text-4xl mb-4 tracking-tight"
15+
className="text-4xl font-semibold sm:text-5xl mb-4 tracking-tight"
1616
initial={{ opacity: 0, y: 20 }}
1717
whileInView={{ opacity: 1, y: 0 }}
1818
viewport={{ once: true }}
1919
transition={{ duration: 0.6 }}
2020
>
21-
<span className="text-blue-900 dark:text-blue-400 font-medium">
21+
<span className="text-blue-600 dark:text-blue-400 font-medium">
2222
{roadmapContent.title.prefix}
2323
</span>{' '}
2424
<span className="text-red-600 dark:text-red-400 font-medium">
@@ -27,15 +27,15 @@ const RoadmapSection: React.FC = () => {
2727
</motion.h2>
2828

2929
<motion.div
30-
className="h-0.5 w-24 bg-gradient-to-r from-blue-600 to-red-600 mx-auto mb-8"
30+
className="h-0.5 w-24 bg-gradient-to-r from-blue-500 to-red-500 dark:from-blue-400 dark:to-red-400 mx-auto mb-8"
3131
initial={{ width: 0 }}
3232
whileInView={{ width: 96 }}
3333
viewport={{ once: true }}
3434
transition={{ duration: 0.8, delay: 0.2 }}
3535
/>
3636

3737
<motion.p
38-
className="text-base sm:text-lg text-slate-600 dark:text-slate-300 max-w-3xl mx-auto"
38+
className="text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto"
3939
initial={{ opacity: 0, y: 20 }}
4040
whileInView={{ opacity: 1, y: 0 }}
4141
viewport={{ once: true }}
@@ -47,7 +47,7 @@ const RoadmapSection: React.FC = () => {
4747

4848
<div className="hidden md:block relative w-full mt-20">
4949
<motion.div
50-
className="absolute top-0 bottom-0 left-1/2 w-0.5 bg-slate-200 dark:bg-gray-700 transform -translate-x-1/2"
50+
className="absolute top-0 bottom-0 left-1/2 w-0.5 bg-gray-200 dark:bg-gray-600/50 transform -translate-x-1/2"
5151
initial={{ scaleY: 0, transformOrigin: 'top' }}
5252
whileInView={{ scaleY: 1 }}
5353
viewport={{ once: true }}
@@ -70,14 +70,14 @@ const RoadmapSection: React.FC = () => {
7070
{/* Content */}
7171
<div className={`w-3/7 ${index % 2 === 0 ? 'pr-1' : 'pl-1'}`}>
7272
<div
73-
className={`p-5 bg-white dark:bg-gray-800 rounded-lg shadow-md border-t-2 ${
74-
item.borderColor || 'border-blue-600'
75-
} transition-all duration-300 hover:shadow-lg`}
73+
className={`p-5 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-xl dark:shadow-black/20
74+
border-t-2 ${item.borderColor || 'border-blue-600 dark:border-blue-400'}
75+
transition-all duration-300 hover:shadow-lg dark:hover:shadow-2xl dark:hover:shadow-black/30`}
7676
>
77-
<h3 className="text-base font-semibold text-slate-800 mb-2 pb-2 border-b border-slate-100">
77+
<h3 className="text-base font-semibold text-gray-900 dark:text-gray-100 mb-2 pb-2 border-b border-gray-100 dark:border-gray-700">
7878
{item.title}
7979
</h3>
80-
<p className="text-slate-600 dark:text-slate-400 text-sm">
80+
<p className="text-gray-600 dark:text-gray-300 text-sm">
8181
{item.description || 'Milestone in our journey'}
8282
</p>
8383
</div>
@@ -138,9 +138,9 @@ const RoadmapSection: React.FC = () => {
138138

139139
{/* Card */}
140140
<div
141-
className={`flex-grow p-5 bg-white dark:bg-gray-800 rounded-lg shadow-md border-l-2 ${
142-
item.borderColor || 'border-blue-600'
143-
}`}
141+
className={`flex-grow p-5 bg-white dark:bg-gray-800/90 rounded-lg shadow-md dark:shadow-xl dark:shadow-black/20
142+
border-l-2 ${item.borderColor ? item.borderColor.replace('border-', 'border-') + ' dark:' + item.borderColor.replace('blue', 'blue').replace('red', 'red') : 'border-blue-600 dark:border-blue-400'}
143+
backdrop-blur-sm`}
144144
>
145145
<h3 className="text-base font-semibold text-slate-800 mb-2 pb-2 border-b border-slate-100">
146146
{item.title}

‎src/components/shared/DarkModeToggle.tsx‎

Lines changed: 113 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { useState, useEffect } from 'react';
2+
import { Moon, Sun } from 'lucide-react';
23

34
const DarkModeToggle = () => {
45
const [isDarkMode, setIsDarkMode] = useState(false);
6+
const [isHovered, setIsHovered] = useState(false);
57

68
useEffect(() => {
79
const theme = localStorage.getItem('theme');
@@ -25,12 +27,121 @@ const DarkModeToggle = () => {
2527
setIsDarkMode(!isDarkMode);
2628
};
2729

30+
const trackWidth = 72;
31+
const thumbWidth = 28;
32+
const padding = 3;
33+
34+
const translateX = isDarkMode ? trackWidth - thumbWidth - padding : padding;
35+
2836
return (
2937
<button
3038
onClick={toggleDarkMode}
31-
className="p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200"
39+
onMouseEnter={() => setIsHovered(true)}
40+
onMouseLeave={() => setIsHovered(false)}
41+
className="group relative inline-flex h-9 w-18 items-center rounded-full transition-all duration-500 focus:outline-none focus:ring-2 focus:ring-offset-1"
42+
style={{
43+
backgroundColor: isDarkMode ? '#1e293b' : '#bae6fd',
44+
boxShadow: isDarkMode
45+
? '0 6px 16px rgba(30, 41, 59, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.05)'
46+
: '0 6px 16px rgba(186, 230, 253, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.1)',
47+
48+
transform: isHovered ? 'scale(1.05)' : 'scale(1)',
49+
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
50+
}}
51+
aria-label={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
52+
role="switch"
53+
aria-checked={isDarkMode}
3254
>
33-
{isDarkMode ? '☀️' : '🌙'}
55+
<div
56+
className="absolute inset-0 rounded-full overflow-hidden"
57+
style={{
58+
background: isDarkMode
59+
? 'linear-gradient(135deg, rgba(148, 163, 184, 0.1) 0%, transparent 50%, rgba(71, 85, 105, 0.1) 100%)'
60+
: 'linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%, rgba(56, 189, 248, 0.2) 100%)',
61+
opacity: isHovered ? 1 : 0.6,
62+
transition: 'opacity 0.3s ease',
63+
}}
64+
/>
65+
66+
<span
67+
className="absolute rounded-full blur-md transition-all duration-500"
68+
style={{
69+
width: `${thumbWidth}px`,
70+
height: `${thumbWidth}px`,
71+
backgroundColor: isDarkMode ? '#818cf8' : '#fbbf24',
72+
opacity: isHovered ? 0.5 : 0.3,
73+
transform: `translateX(${translateX}px)`,
74+
}}
75+
/>
76+
77+
<span
78+
className="relative z-10 inline-flex h-7 w-7 items-center justify-center rounded-full bg-white overflow-hidden"
79+
style={{
80+
transform: `translateX(${translateX}px) ${isHovered ? 'scale(1.1)' : 'scale(1)'}`,
81+
boxShadow: isDarkMode
82+
? '0 3px 12px rgba(129, 140, 248, 0.5), 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.7)'
83+
: '0 3px 12px rgba(251, 191, 36, 0.5), 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.8)',
84+
transition: 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)',
85+
}}
86+
>
87+
<div
88+
className="absolute inset-0"
89+
style={{
90+
background: isDarkMode
91+
? 'radial-gradient(circle, rgba(129, 140, 248, 0.3) 0%, transparent 70%)'
92+
: 'radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, transparent 70%)',
93+
}}
94+
/>
95+
96+
<Sun
97+
className="absolute transition-all duration-500"
98+
size={16}
99+
style={{
100+
color: '#f59e0b',
101+
opacity: isDarkMode ? 0 : 1,
102+
transform: isDarkMode
103+
? 'rotate(360deg) scale(0.3)'
104+
: `rotate(0deg) scale(1) ${isHovered ? 'rotate(30deg)' : ''}`,
105+
filter: isDarkMode
106+
? 'blur(2px)'
107+
: 'blur(0px) drop-shadow(0 0 6px rgba(245, 158, 11, 0.5))',
108+
transition: 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)',
109+
}}
110+
/>
111+
112+
<Moon
113+
className="absolute transition-all duration-500"
114+
size={16}
115+
style={{
116+
color: '#818cf8',
117+
opacity: isDarkMode ? 1 : 0,
118+
transform: isDarkMode
119+
? 'rotate(0deg) scale(1)'
120+
: 'rotate(-360deg) scale(0.3)',
121+
filter: isDarkMode
122+
? 'drop-shadow(0 0 6px rgba(129, 140, 248, 0.5))'
123+
: 'blur(2px)',
124+
transition: 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)',
125+
}}
126+
/>
127+
</span>
128+
129+
<Sun
130+
className="absolute left-2 top-1/2 -translate-y-1/2 transition-all duration-500"
131+
size={12}
132+
style={{
133+
color: 'rgba(255, 255, 255, 0.9)',
134+
opacity: isDarkMode ? 0.2 : 0.7,
135+
}}
136+
/>
137+
<Moon
138+
className="absolute right-2 top-1/2 -translate-y-1/2 transition-all duration-500"
139+
size={12}
140+
style={{
141+
color: 'rgba(255, 255, 255, 0.9)',
142+
opacity: isDarkMode ? 0.7 : 0.2,
143+
}}
144+
/>
34145
</button>
35146
);
36147
};

0 commit comments

Comments
 (0)