Skip to content

Fix : Text Visibility in light mode on Contact page #545

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 20, 2025
Merged

Fix : Text Visibility in light mode on Contact page #545

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8061825
Done
Codeboy20 Sep 20, 2025
3cf9e4e
Merge branch 'main' into jayyy
Codeboy20 Sep 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 37 additions & 30 deletions src/pages/contact-us/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const ContactUs: React.FC = () => {
<h1 className="text-4xl md:text-5xl font-bold gradient-text mb-6">
Get In Touch
</h1>
<p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
<p className="text-lg max-w-2xl mx-auto" style={{color: 'white'}}>
Have questions, feedback, or want to collaborate? We'd love to hear from you.
Reach out to us and we'll get back to you as soon as possible.
</p>
Expand All @@ -109,7 +109,7 @@ const ContactUs: React.FC = () => {
{/* Contact Information */}
<div className="space-y-8">
<div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
<h2 className="text-2xl font-bold mb-6" style={{color: 'white'}}>
Contact Information
</h2>

Expand All @@ -120,14 +120,14 @@ const ContactUs: React.FC = () => {
<Mail className="w-6 h-6 text-blue-600 dark:text-blue-400" />
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">Email</h3>
<h3 className="font-semibold" style={{color: 'white'}}>Email</h3>
<a
href="mailto:[email protected]"
className="text-blue-600 dark:text-blue-400 hover:underline"
className="text-blue-400 hover:underline"
>
[email protected]
</a>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
<p className="text-sm mt-1" style={{color: 'white'}}>
General inquiries and support
</p>
</div>
Expand All @@ -139,11 +139,11 @@ const ContactUs: React.FC = () => {
<Clock className="w-6 h-6 text-green-600 dark:text-green-400" />
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">Response Time</h3>
<p className="text-gray-600 dark:text-gray-300">
<h3 className="font-semibold" style={{color: 'white'}}>Response Time</h3>
<p style={{color: 'white'}}>
Within 24-48 hours
</p>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
<p className="text-sm mt-1" style={{color: 'white'}}>
We'll get back to you promptly
</p>
</div>
Expand All @@ -155,11 +155,11 @@ const ContactUs: React.FC = () => {
<MapPin className="w-6 h-6 text-purple-600 dark:text-purple-400" />
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">Location</h3>
<p className="text-gray-600 dark:text-gray-300">
<h3 className="font-semibold" style={{color: 'white'}}>Location</h3>
<p style={{color: 'white'}}>
Online & Global
</p>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
<p className="text-sm mt-1" style={{color: 'white'}}>
Serving developers worldwide
</p>
</div>
Expand All @@ -168,11 +168,11 @@ const ContactUs: React.FC = () => {
</div>

{/* Additional Information */}
<div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 p-6 rounded-xl">
<h3 className="font-bold text-gray-900 dark:text-white mb-3">
<div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-950/50 dark:to-purple-950/50 border border-gray-200 dark:border-gray-700 p-6 rounded-xl">
<h3 className="font-bold mb-3" style={{color: 'white'}}>
What we can help you with:
</h3>
<ul className="space-y-2 text-gray-600 dark:text-gray-300">
<ul className="space-y-2" style={{color: 'white'}}>
<li className="flex items-center space-x-2">
<span className="w-2 h-2 bg-blue-500 rounded-full"></span>
<span>Learning resources and tutorials</span>
Expand All @@ -198,21 +198,22 @@ const ContactUs: React.FC = () => {
</div>

{/* Contact Form */}
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8">
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
<div className="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-xl p-8">
<h2 className="text-2xl font-bold mb-6" style={{color: 'white'}}>
Send us a message
</h2>

<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid md:grid-cols-2 gap-4">
<div>
<label htmlFor="firstName" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<label htmlFor="firstName" className="block text-sm font-medium mb-2" style={{color: 'white'}}>
First Name
</label>
<input
type="text"
id="firstName"
name="firstName"
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-colors"
value={formData.firstName}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
Expand All @@ -221,13 +222,14 @@ const ContactUs: React.FC = () => {
{errors.firstName && <p className="text-red-500 text-xs mt-1">{errors.firstName}</p>}
</div>
<div>
<label htmlFor="lastName" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<label htmlFor="lastName" className="block text-sm font-medium mb-2" style={{color: 'white'}}>
Last Name
</label>
<input
type="text"
id="lastName"
name="lastName"
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-colors"
value={formData.lastName}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
Expand All @@ -238,13 +240,14 @@ const ContactUs: React.FC = () => {
</div>

<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<label htmlFor="email" className="block text-sm font-medium mb-2" style={{color: 'white'}}>
Email Address
</label>
<input
type="email"
id="email"
name="email"
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-colors"
value={formData.email}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
Expand All @@ -254,17 +257,19 @@ const ContactUs: React.FC = () => {
</div>

<div>
<label htmlFor="subject" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<label htmlFor="subject" className="block text-sm font-medium mb-2" style={{color: 'white'}}>
Subject
</label>
<select
id="subject"
name="subject"
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white transition-colors"
required
value={formData.subject}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
>
<option value="">Select a subject</option>
<option value="" className="text-gray-500 dark:text-gray-400">Select a subject</option>
<option value="general">General Inquiry</option>
<option value="support">Technical Support</option>
<option value="collaboration">Collaboration</option>
Expand All @@ -276,13 +281,15 @@ const ContactUs: React.FC = () => {
</div>

<div>
<label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<label htmlFor="message" className="block text-sm font-medium mb-2" style={{color: 'white'}}>
Message
</label>
<textarea
id="message"
name="message"
rows={6}
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 resize-none transition-colors"

value={formData.message}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white resize-none"
Expand All @@ -293,7 +300,7 @@ const ContactUs: React.FC = () => {

<button
type="submit"
className="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold py-3 px-6 rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-[1.02] shadow-lg"
className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-xl"
>
Send Message
</button>
Expand All @@ -303,15 +310,15 @@ const ContactUs: React.FC = () => {

{/* Additional Resources */}
<div className="mt-16 text-center">
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-8">
<h2 className="text-2xl font-bold mb-8" style={{color: 'white'}}>
Other Ways to Connect
</h2>
<div className="grid md:grid-cols-3 gap-6">
<a
href="/community"
className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02]"
className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02] group"
>
<div className="text-blue-600 dark:text-blue-400 text-2xl mb-3">📚</div>
<div className="text-blue-600 dark:text-blue-400 text-2xl mb-3 group-hover:scale-110 transition-transform">📚</div>
<h3 className="font-semibold text-gray-900 dark:text-white mb-2">Community</h3>
<p className="text-gray-600 dark:text-gray-400 text-sm">
Join our community and connect with fellow developers
Expand All @@ -320,9 +327,9 @@ const ContactUs: React.FC = () => {

<a
href="/docs"
className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02]"
className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02] group"
>
<div className="text-green-600 dark:text-green-400 text-2xl mb-3">📖</div>
<div className="text-green-600 dark:text-green-400 text-2xl mb-3 group-hover:scale-110 transition-transform">📖</div>
<h3 className="font-semibold text-gray-900 dark:text-white mb-2">Documentation</h3>
<p className="text-gray-600 dark:text-gray-400 text-sm">
Explore our comprehensive learning resources
Expand All @@ -331,9 +338,9 @@ const ContactUs: React.FC = () => {

<a
href="/blogs"
className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02]"
className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02] group"
>
<div className="text-purple-600 dark:text-purple-400 text-2xl mb-3">✍️</div>
<div className="text-purple-600 dark:text-purple-400 text-2xl mb-3 group-hover:scale-110 transition-transform">✍️</div>
<h3 className="font-semibold text-gray-900 dark:text-white mb-2">Blog</h3>
<p className="text-gray-600 dark:text-gray-400 text-sm">
Read our latest articles and tutorials
Expand Down
Loading