feat(contact): activate contact form and update text content as per p…

src/components/sections/ContactSection.tsx

@@ -1,29 +1,62 @@
 import React from 'react';
 import '../../styles/ContactSection.css';
 import '../../styles/ContactInfo.css';
-import { FaInfoCircle } from 'react-icons/fa';
 
 const ContactSection: React.FC = () => {
   return (
     <section id="contact" className="contact-section">
       <div className="contact-container">
-        <h2 className="contact-section-title">Get in Touch</h2>        <p className="contact-section-subtitle">
+        <h2 className="contact-section-title">Get in Touch</h2>
+        <p className="contact-section-subtitle">
           Ready to connect with the Elmentor Program? We'd love to hear from you!
         </p>
-
-        <div className="contact-info-box">
-          <div className="contact-info-icon">
-            <FaInfoCircle />
-          </div>
-          <h3 className="contact-info-title">Contact Form Coming Soon!</h3>
+
+      <form
+        className="contact-form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          window.open('https://forms.office.com/pages/responsepage.aspx?id=VMuHclbbA0SbDZvix-_OTiBS0-e3DjdBpyuSsEcOutNUQ002QVU3U1IyU0JWSzRXUlBDOTdNQkIyMiQlQCN0PWcu&route=shorturl', '_blank');
+        }}
+      >
+          <h3 className="contact-info-title">Apply to Join Elmentor Community</h3>
+          <p className="contact-info-text">
+            We’re excited to hear from you!
+          </p>
           <p className="contact-info-text">
-            We're working on implementing a contact form. For now, the best way to reach us is through Facebook.
+            Please note that we currently have a substantial waiting list, 
+            and it may take up to six months or more before we can get back to you.
+          </p>
+
+          <p className="contact-info-text">
+            If you'd like to bypass the waiting list, you may contact 
+            <strong> Ms. Nadia (Financial Manager)</strong> at 
+            <a href="tel:+201224073193" className="contact-link"> +20 122 407 3193</a>. 
+            Please note that offers and discounts will not apply in this case.
+          </p>
+
+          <div className="form-group">
+            <label htmlFor="name">Full Name</label>
+            <input type="text" id="name" name="name" required />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="email">Email Address</label>
+            <input type="email" id="email" name="email" required />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="message">Why do you want to join?</label>
+            <textarea id="message" name="message" required />
+          </div>
+
+          <button type="submit" className="messenger-contact-button">
+            Submit Your Application
+          </button>
+
+          <p className="contact-small-text">
+            Your application will be added to the waiting list — we’ll contact you once you’re selected for an interview.
           </p>
-          <a href="https://www.facebook.com/mohamedradwan.me" className="messenger-contact-button" target="_blank" rel="noopener noreferrer">
-            Message Eng Mohamed Radwan
-          </a>
-          <p className="contact-small-text">directly for questions, feedback, or to join our community.</p>
-        </div>
+        </form>
       </div>
     </section>
   );

src/styles/ContactSection.css

@@ -129,6 +129,32 @@
   border: 1px solid var(--color-error);
 }
 
+.contact-info-title {
+  color: var(--color-gray-700) !important;
+  text-align: center;
+}
+
+.contact-info-text {
+  color: var(--color-gray-700) !important;
+  text-align: center;
+}
+
+.contact-small-text {
+  color: var(--color-gray-700) !important;
+  text-align: center;
+}
+
+.contact-small-text {
+  font-size: var(--font-size-lg);
+  color: var(--color-gray-700) !important;
+  text-align: center;
+  max-width: 700px;
+  margin: 0 auto var(--spacing-3xl) auto;
+  line-height: var(--line-height-relaxed);
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-sm);
+}
+
 .message-icon {
   flex-shrink: 0;
 }
@@ -165,3 +191,34 @@
     padding: var(--spacing-md);
   }
 }
+
+
+.contact-link {
+  color: var(--color-primary-light);
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.contact-link:hover {
+  text-decoration: none;
+  color: var(--color-secondary-light);
+}
+
+.messenger-contact-button {
+  display: inline-block;
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  font-weight: var(--font-weight-semibold);
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border-radius: var(--border-radius-md);
+  transition: var(--transition-all);
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  font-size: var(--font-size-base);
+}
+
+.messenger-contact-button:hover {
+  background-color: var(--color-primary-dark);
+}
+