Skip to content

Commit 8075e79

Browse files
cherylpintocherylpinto
committed
minor fixes
1 parent 3d0aec4 commit 8075e79

File tree

1 file changed

+40
-30
lines changed

1 file changed

+40
-30
lines changed

‎src/pages/About/ContactUs.tsx‎

Lines changed: 40 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ interface CardProps {
2121

2222
const Card: React.FC<CardProps> = ({ icon, title, content }) => (
2323
<motion.div
24-
className="relative bg-gradient-to-b from-white to-blue-50 border border-gray-200
24+
className="relative bg-gradient-to-b from-white to-blue-50 dark:from-gray-800 dark:to-gray-900
25+
border border-gray-200 dark:border-gray-700
2526
rounded-2xl p-8 text-center shadow-md hover:shadow-xl
2627
transition-all duration-300 overflow-hidden"
2728
variants={cardFadeIn}
@@ -30,19 +31,24 @@ const Card: React.FC<CardProps> = ({ icon, title, content }) => (
3031
{/* Gradient bar at top */}
3132
<div className="absolute top-0 left-0 w-full h-1 rounded-t-2xl bg-gradient-to-r from-blue-500 to-blue-700" />
3233

33-
<div className="mx-auto w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4 shadow-inner mt-2">
34+
<div className="mx-auto w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mb-4 shadow-inner mt-2">
3435
<img src={icon} alt={`${title} Icon`} className="h-8 w-8" />
3536
</div>
36-
<h3 className="text-xl font-bold text-gray-900 mb-3">{title}</h3>
37-
<div className="text-sm text-gray-600 leading-relaxed">{content}</div>
37+
<h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">
38+
{title}
39+
</h3>
40+
<div className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
41+
{content}
42+
</div>
3843
</motion.div>
3944
);
4045

4146
const ContactUs = () => {
4247
return (
43-
<div className="min-h-screen bg-white text-gray-900">
48+
<div className="min-h-screen bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
4449
<Header />
4550
<main className="container mx-auto p-4">
51+
{/* Hero Section */}
4652
<motion.section
4753
className="my-8 flex justify-center"
4854
initial="hidden"
@@ -59,7 +65,7 @@ const ContactUs = () => {
5965
Contact Us
6066
</motion.h1>
6167
<motion.p
62-
className="text-gray-600 mt-2 text-lg"
68+
className="text-gray-600 dark:text-gray-400 mt-2 text-lg"
6369
variants={fadeIn}
6470
>
6571
We'd love to hear from you. Reach out to our team and join our
@@ -82,6 +88,7 @@ const ContactUs = () => {
8288
</motion.section>
8389

8490
<div className="w-4/5 max-w-5xl mx-auto">
91+
{/* Contact Methods */}
8592
<motion.section
8693
className="my-16 px-6"
8794
initial="hidden"
@@ -90,25 +97,24 @@ const ContactUs = () => {
9097
variants={fadeIn}
9198
>
9299
<motion.h2
93-
className="text-4xl md:text-5xl font-bold text-gray-900 text-center"
100+
className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-gray-100 text-center"
94101
variants={headerReveal}
95102
>
96103
<motion.span
97-
className="text-blue-600 font-Pacifico"
104+
className="text-blue-600 dark:text-blue-400 font-Pacifico"
98105
variants={fadeIn}
99106
>
100107
Get In{' '}
101108
</motion.span>
102109
Touch
103110
</motion.h2>
104111

105-
<hr className="w-24 border-t-4 border-blue-600 mx-auto mt-3" />
112+
<hr className="w-24 border-t-4 border-blue-600 dark:border-blue-500 mx-auto mt-3" />
106113

107114
<motion.div
108115
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mt-12"
109116
variants={fadeIn}
110117
>
111-
{/* Mail */}
112118
<Card
113119
icon="assets/Icons/mail.svg"
114120
title="By Mail"
@@ -123,28 +129,26 @@ const ContactUs = () => {
123129
}
124130
/>
125131

126-
{/* Phone */}
127132
<Card
128133
icon="assets/Icons/phone.svg"
129134
title="By Phone"
130135
content={
131136
<a
132137
href="tel:+16177024088"
133-
className="text-blue-600 hover:underline font-medium"
138+
className="text-blue-600 dark:text-blue-400 hover:underline font-medium"
134139
>
135140
+1 (617) 702-4088
136141
</a>
137142
}
138143
/>
139144

140-
{/* Email */}
141145
<Card
142146
icon="assets/Icons/email.svg"
143147
title="By Email"
144148
content={
145149
<a
146150
href="mailto:[email protected]"
147-
className="text-blue-600 hover:underline font-medium break-all"
151+
className="text-blue-600 dark:text-blue-400 hover:underline font-medium break-all"
148152
>
149153
[email protected]
150154
</a>
@@ -153,6 +157,7 @@ const ContactUs = () => {
153157
</motion.div>
154158
</motion.section>
155159

160+
{/* Social Links */}
156161
<motion.section
157162
className="my-16 mt-4 justify-center px-6"
158163
initial="hidden"
@@ -161,21 +166,21 @@ const ContactUs = () => {
161166
variants={fadeIn}
162167
>
163168
<motion.h2
164-
className="text-4xl md:text-5xl font-bold text-gray-900 text-center"
169+
className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-gray-100 text-center"
165170
variants={headerReveal}
166171
>
167172
<motion.span
168-
className="text-blue-600 font-Pacifico"
173+
className="text-blue-600 dark:text-blue-400 font-Pacifico"
169174
variants={fadeIn}
170175
>
171176
Connect{' '}
172177
</motion.span>
173178
With Our Community
174179
</motion.h2>
175180

176-
<hr className="w-32 border-t-4 border-blue-600 mx-auto mt-2" />
181+
<hr className="w-32 border-t-4 border-blue-600 dark:border-blue-500 mx-auto mt-2" />
177182
<motion.p
178-
className="text-gray-600 text-center mt-4 text-lg max-w-3xl mx-auto"
183+
className="text-gray-600 dark:text-gray-400 text-center mt-4 text-lg max-w-3xl mx-auto"
179184
variants={fadeIn}
180185
>
181186
Join our global community of educators, developers, and learners
@@ -193,10 +198,10 @@ const ContactUs = () => {
193198
href={social.href}
194199
target="_blank"
195200
rel="noopener noreferrer"
196-
className="w-24 h-24 bg-white shadow-md rounded-2xl
201+
className="w-24 h-24 bg-white dark:bg-gray-800 shadow-md rounded-2xl
197202
flex flex-col items-center justify-center
198-
border border-gray-200 hover:shadow-lg
199-
hover:bg-blue-50 hover:border-blue-300
203+
border border-gray-200 dark:border-gray-700 hover:shadow-lg
204+
hover:bg-blue-50 dark:hover:bg-gray-700 hover:border-blue-300
200205
transition-all duration-300"
201206
variants={cardFadeIn}
202207
initial="hidden"
@@ -208,48 +213,53 @@ const ContactUs = () => {
208213
<img
209214
src={social.icon || '/placeholder.svg'}
210215
alt={social.name}
211-
className={`w-6 h-6 ${social.name === 'X' ? 'brightness-0' : ''}`}
216+
className={`w-6 h-6 ${
217+
social.name === 'X'
218+
? 'brightness-0 dark:invert'
219+
: 'dark:invert'
220+
}`}
212221
/>
213222
</div>
214-
<span className="text-xs text-gray-700 font-medium text-center">
223+
<span className="text-xs text-gray-700 dark:text-gray-300 font-medium text-center">
215224
{social.name}
216225
</span>
217226
</motion.a>
218227
))}
219228
</motion.div>
220229
</motion.section>
221230

231+
{/* Matrix Chat */}
222232
<motion.section
223233
className="my-16"
224234
initial="hidden"
225235
whileInView="visible"
226236
viewport={{ once: true, amount: 0.2 }}
227237
variants={slideInBottom}
228238
>
229-
<div className="bg-white shadow-lg rounded-2xl p-8 border border-gray-200">
239+
<div className="bg-white dark:bg-gray-900 shadow-lg rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
230240
<div className="flex flex-col md:flex-row items-center gap-6">
231241
<div className="flex-shrink-0">
232-
<div className="w-16 h-16 bg-blue-50 flex items-center justify-center rounded-lg border border-blue-100">
242+
<div className="w-16 h-16 bg-blue-50 dark:bg-blue-900 flex items-center justify-center rounded-lg border border-blue-100 dark:border-blue-800">
233243
<img
234244
src="assets/Icons/chat.svg"
235-
alt=""
236-
className="h-8 w-8"
245+
alt="Chat Icon"
246+
className="h-8 w-8 dark:invert"
237247
/>
238248
</div>
239249
</div>
240250
<div className="flex-grow text-center md:text-left">
241-
<h3 className="text-3xl font-bold text-gray-900 mb-2 font-[Caveat]">
251+
<h3 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2 font-[Caveat]">
242252
Join Our Matrix Chat
243253
</h3>
244-
<p className="text-gray-600 leading-relaxed">
254+
<p className="text-gray-600 dark:text-gray-400 leading-relaxed">
245255
Connect with our community in real-time. Get help, share
246256
ideas, and collaborate with fellow educators and developers.
247257
</p>
248258
</div>
249259
<div className="flex-shrink-0">
250260
<Link
251261
to="matrix"
252-
className="inline-block px-6 py-3 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition-colors font-medium whitespace-nowrap"
262+
className="inline-block px-6 py-3 bg-blue-600 dark:bg-blue-500 text-white rounded-full hover:bg-blue-700 dark:hover:bg-blue-400 transition-colors font-medium whitespace-nowrap"
253263
>
254264
Join Chat →
255265
</Link>

0 commit comments

Comments
 (0)