Merge pull request #545 from Codeboy20/jayyy

Fix : Text Visibility in light mode on Contact page

Author: sanjay-kv

src/pages/contact-us/index.tsx

@@ -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>
@@ -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>
 
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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"
@@ -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"
@@ -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"
@@ -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>
@@ -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"
@@ -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>
@@ -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
@@ -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
@@ -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