feat: Redesign contact form with modern layout and social icons (#1402)

* add: footer social icon

Co-Authored-By: Sanjay Viswanathan <[email protected]>

* feat: Redesign contact form with modern layout and social icons

- Updated form layout with Name, Email, and Message fields
- Added send icon to the "Send Message" button
- Included centered social media icons (GitHub, LinkedIn, X, Facebook)
- Applied gradient background and rounded corners for modern UI
- Improved responsiveness for mobile devices
- Updated placeholder texts and heading to "Contact Us"

Co-Authored-By: Sanjay Viswanathan <[email protected]>

---------

Co-authored-by: Sanjay Viswanathan <[email protected]>

Author: codewithdhruba01

pages/help.html

@@ -222,41 +222,97 @@ <h3 class="main-heading">Scroll into see how to get most out of this website</h3
                </div>
            </div>
        </div>
-    
-       <div class="container">
-        <form id="contact-form">
-          
-         <div>
-          <h3>Contact Form</h3>
-          <p>Please take a moment to get in touch, we will get back to you shortly</p>
-         </div>
-          <div class="form0">
-      
-         
-         <div class="form1">
-          <label for="name">Name</label>
-          <input type="text" id="name" name="from_name">
-      
-          <label for="email">Email</label>
-          <input type="email" id="email" name="user_email">
-          <label for="phone">Phone Number</label>
-          <input type="number" id="phone" name="number">
-      
-      
-          <label for="subject">Subject</label>
-          <input type="text" id="subject" name="subject" >
-      
-         </div>
-          <div class="form2">
-              <label for="msg">Message</label>
-          <textarea id="subject" name="message" placeholder="Write something.." style="height:210px;"></textarea>
+
+    <div class="container">
+    <form class="contact-box">
+      <h2>Contact Us</h2>
+      <p>Please take a moment to get in touch, we will get back to you shortly</p>
+      <input type="text" placeholder="Your Name" required />
+      <input type="email" placeholder="Your Email" required />
+      <textarea rows="4" placeholder="Your Message" required></textarea>
 
-          <input type="submit" value="Send Message" class="btn">
-          </div>
-      </div>
-        </form>
+      <button type="submit">
+        <i class="fas fa-paper-plane"></i> Send Massage
+      </button>
+
+      <div class="social-icons">
+        <a href="https://github.com/sanjay-kv"><i class="fab fa-github"></i></a>
+        <a href="https://www.linkedin.com/in/sanjay-k-v/"><i class="fab fa-linkedin"></i></a>
+        <a href="https://twitter.com/sanjay_kv"><i class="fab fa-x"></i></a>
+        <a href="https://www.facebook.com/sanjay.k.viswanathan/"><i class="fab fa-facebook"></i></a>
       </div>
+    </form>
+  </div>
+
+  <style>
+    
+
+
+.contact-box {
+  background: linear-gradient(135deg, #164563, #303233);
+  padding: 50px;
+  border-radius: 10px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+}
 
+.contact-box h2 {
+  margin-bottom: 20px;
+}
+
+.contact-box p {
+  margin-bottom: 5px;
+  margin-top: 2px;
+  color: #ccc;
+  font-size: 18px;
+  padding-bottom: 10px;
+}
+
+.contact-box input,
+.contact-box textarea {
+  width: 100%;
+  padding: 12px;
+  margin: 10px 0;
+  border: none;
+  border-radius: 6px;
+  font-size: 1rem;
+}
+
+.contact-box button {
+  background-color: #007bff;
+  color: white;
+  padding: 12px;
+  width: 100%;
+  border: none;
+  border-radius: 6px;
+  font-size: 1rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: background 0.3s ease;
+}
+
+.contact-box button:hover {
+  background-color: #0056b3;
+}
+
+.social-icons {
+  margin-top: 20px;
+}
+
+.social-icons a {
+  margin: 0 10px;
+  color: #333;
+  font-size: 1.5rem;
+  transition: color 0.3s ease;
+}
+
+.social-icons a:hover {
+  color: #8f141e;
+
+}
+  </style>
     <footer id="Contact" class="footer-2">
     <div class="footer-container">
         <div class="footer-content">
@@ -278,7 +334,7 @@ <h3>Contact Form</h3>
                       <i class="fab fa-linkedin-in footer-linkedin-icon"></i>
                       <div class="filled"></div>
                   </a>
-                  <a href="https://twitter.com/sanjay_kv_" target="_blank" aria-label="Twitter" data-social="twitter">
+                  <a href="https://twitter.com/sanjay_kv" target="_blank" aria-label="Twitter" data-social="twitter">
                       <i class="fab fa-twitter footer-twitter-icon"></i>
                       <div class="filled"></div>
                   </a>