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

* feat(contact): activate contact form and update text content as per program guidelines

* feat(contact): simplify contact form and add WhatsApp redirect button for Financial Manager

* feat(contact): add disclaimer about offers not applying when bypassing waiting list

* feat(contact-section): Rebuilt the Contact section with the finalized layout and styling.

Author: MouazSalah

src/components/sections/ContactSection.tsx

@@ -1,28 +1,65 @@
 import React from 'react';
 import '../../styles/ContactSection.css';
 import '../../styles/ContactInfo.css';
-import { FaInfoCircle } from 'react-icons/fa';
 
 const ContactSection: React.FC = () => {
+  const openApplicationForm = () => {
+    window.open(
+      'https://forms.office.com/pages/responsepage.aspx?id=VMuHclbbA0SbDZvix-_OTiBS0-e3DjdBpyuSsEcOutNUQ002QVU3U1IyU0JWSzRXUlBDOTdNQkIyMiQlQCN0PWcu&route=shorturl',
+      '_blank',
+      'noopener,noreferrer'
+    );
+  };
+
+  const openWhatsApp = () => {
+    window.open('https://wa.me/201224073193', '_blank', 'noopener,noreferrer');
+  };
+
   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">
-          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 className="contact-form">
+
+          <h1 className="contact-info-title">Apply to Join Elmentor Community</h1>
+
+          <p className="contact-info-text" > We’re excited to hear from you!</p>
+
+          <p className="contact-info-text">
+            Due to high interest, applications may take several months to review.
+          </p>
+
+          <div style={{ textAlign: 'center', margin: '1.5rem 0' }}>
+            <button
+              type="button"
+              className="messenger-contact-button primary-button"
+              onClick={openApplicationForm}
+              aria-label="Start your application to join Elmentor Community"
+            >
+              Start Application
+            </button>
+          </div>
+
+          <p className="contact-info-text">
+            Your application will be added to the waiting list — we’ll contact you once you’re selected for an interview.
+          </p>
+
+          <h2 className="contact-info-title">Need a faster option?</h2>
+
+          <div style={{ textAlign: 'center', margin: '1.5rem 0' }}>
+            <button
+              type="button"
+              className="messenger-contact-button secondary-button"
+              onClick={openWhatsApp}
+              aria-label="Message Financial Manager on WhatsApp"
+            >
+              Message Financial Manager on WhatsApp
+            </button>
           </div>
-          <h3 className="contact-info-title">Contact Form Coming Soon!</h3>
+
           <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 offers and discounts don't apply in this case.
           </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>
       </div>
     </section>

src/styles/ContactSection.css

@@ -63,7 +63,7 @@
 
 .form-group label {
   display: block;
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
   color: var(--color-primary);
   margin-bottom: var(--spacing-sm);
@@ -75,7 +75,7 @@
 .form-group textarea {
   width: 100%;
   padding: var(--spacing-sm) var(--spacing-md);
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-lg);
   color: var(--color-gray-800);
   background-color: var(--color-white);
   border: 2px solid var(--color-gray-300);
@@ -129,6 +129,34 @@
   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;
+  font-size: xx-large;
+}
+
+.contact-small-text {
+  color: var(--color-gray-700) !important;
+  text-align: center;
+  font-size: xx-large;
+}
+
+.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 +193,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-lg);
+}
+
+.messenger-contact-button:hover {
+  background-color: var(--color-primary-dark);
+}
+