From 6804569e35047a7d35d928aaa36532421772a695 Mon Sep 17 00:00:00 2001
From: Mouaz Salah <mouaz.salah05@gmail.com>
Date: Wed, 8 Oct 2025 20:41:54 +0300
Subject: [PATCH 1/4] feat(contact): activate contact form and update text
 content as per program guidelines

---
 src/components/sections/ContactSection.tsx | 61 +++++++++++++++++-----
 src/styles/ContactSection.css              | 57 ++++++++++++++++++++
 2 files changed, 104 insertions(+), 14 deletions(-)

diff --git a/src/components/sections/ContactSection.tsx b/src/components/sections/ContactSection.tsx
index 11bdf33..21ac8eb 100644
--- a/src/components/sections/ContactSection.tsx
+++ b/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>
   );
diff --git a/src/styles/ContactSection.css b/src/styles/ContactSection.css
index 48ab237..198e9e5 100644
--- a/src/styles/ContactSection.css
+++ b/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);
+}
+

From 6e92fd9246258ee93cfc4cb5b39f0f052cf5fc12 Mon Sep 17 00:00:00 2001
From: Mouaz Salah <mouaz.salah05@gmail.com>
Date: Mon, 13 Oct 2025 17:01:18 +0300
Subject: [PATCH 2/4] feat(contact): simplify contact form and add WhatsApp
 redirect button for Financial Manager

---
 src/components/sections/ContactSection.tsx | 53 +++++++++++-----------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/components/sections/ContactSection.tsx b/src/components/sections/ContactSection.tsx
index 21ac8eb..502ce56 100644
--- a/src/components/sections/ContactSection.tsx
+++ b/src/components/sections/ContactSection.tsx
@@ -11,13 +11,16 @@ const ContactSection: React.FC = () => {
           Ready to connect with the Elmentor Program? We'd love to hear from you!
         </p>
 
-      <form
-        className="contact-form"
-        onSubmit={(e) => {
-          e.preventDefault();
-          window.open('https://forms.office.com/pages/responsepage.aspx?id=VMuHclbbA0SbDZvix-_OTiBS0-e3DjdBpyuSsEcOutNUQ002QVU3U1IyU0JWSzRXUlBDOTdNQkIyMiQlQCN0PWcu&route=shorturl', '_blank');
-        }}
-      >
+        <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!
@@ -28,31 +31,27 @@ const ContactSection: React.FC = () => {
           </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.
+            If you'd like to bypass the waiting list, you may contact:
           </p>
 
-          <div className="form-group">
-            <label htmlFor="name">Full Name</label>
-            <input type="text" id="name" name="name" required />
+          <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>
+            <button
+              type="button"
+              className="messenger-contact-button"
+              onClick={() =>
+                window.open('https://wa.me/201224073193', '_blank', 'noopener,noreferrer')
+              }
+            >
+              Message Financial Manager on WhatsApp
+            </button>
           </div>
 
-          <div className="form-group">
-            <label htmlFor="email">Email Address</label>
-            <input type="email" id="email" name="email" required />
+          <div style={{ textAlign: 'center' }}>
+            <button type="submit" className="messenger-contact-button">
+              Start Application
+            </button>
           </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>
@@ -62,4 +61,4 @@ const ContactSection: React.FC = () => {
   );
 };
 
-export default ContactSection;
+export default ContactSection;
\ No newline at end of file

From 6a01f592267311e9c03576c91d36b6c7b2d0926a Mon Sep 17 00:00:00 2001
From: Mouaz Salah <mouaz.salah05@gmail.com>
Date: Wed, 15 Oct 2025 18:05:48 +0300
Subject: [PATCH 3/4] feat(contact): add disclaimer about offers not applying
 when bypassing waiting list

---
 src/components/sections/ContactSection.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/sections/ContactSection.tsx b/src/components/sections/ContactSection.tsx
index 502ce56..f07ca04 100644
--- a/src/components/sections/ContactSection.tsx
+++ b/src/components/sections/ContactSection.tsx
@@ -46,6 +46,10 @@ const ContactSection: React.FC = () => {
             </button>
           </div>
 
+          <p className="contact-small-text" style={{ color: '#d9534f', fontWeight: 'bold' }}>
+            Please note that offers and discounts will not apply in this case.
+          </p>
+
           <div style={{ textAlign: 'center' }}>
             <button type="submit" className="messenger-contact-button">
               Start Application

From cfef80b258dca5f69eae788049e0b9146dc665af Mon Sep 17 00:00:00 2001
From: Mouaz Salah <mouaz.salah05@gmail.com>
Date: Sat, 1 Nov 2025 06:05:55 +0300
Subject: [PATCH 4/4] feat(contact-section): Rebuilt the Contact section with
 the finalized layout and styling.

---
 src/components/sections/ContactSection.tsx | 77 +++++++++++-----------
 src/styles/ContactSection.css              |  8 ++-
 2 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/src/components/sections/ContactSection.tsx b/src/components/sections/ContactSection.tsx
index f07ca04..7a51eec 100644
--- a/src/components/sections/ContactSection.tsx
+++ b/src/components/sections/ContactSection.tsx
@@ -3,66 +3,67 @@ import '../../styles/ContactSection.css';
 import '../../styles/ContactInfo.css';
 
 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>
 
-        <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">
-            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>
+        <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">
-            If you'd like to bypass the waiting list, you may contact:
+            Due to high interest, applications may take several months to review.
           </p>
 
-          <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>
+          <div style={{ textAlign: 'center', margin: '1.5rem 0' }}>
             <button
               type="button"
-              className="messenger-contact-button"
-              onClick={() =>
-                window.open('https://wa.me/201224073193', '_blank', 'noopener,noreferrer')
-              }
+              className="messenger-contact-button primary-button"
+              onClick={openApplicationForm}
+              aria-label="Start your application to join Elmentor Community"
             >
-              Message Financial Manager on WhatsApp
+              Start Application
             </button>
           </div>
 
-          <p className="contact-small-text" style={{ color: '#d9534f', fontWeight: 'bold' }}>
-            Please note that offers and discounts will not apply in this case.
+          <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>
 
-          <div style={{ textAlign: 'center' }}>
-            <button type="submit" className="messenger-contact-button">
-              Start Application
+          <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>
 
-          <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 className="contact-info-text">
+            Please note that offers and discounts don't apply in this case.
           </p>
-        </form>
+        </div>
       </div>
     </section>
   );
 };
 
-export default ContactSection;
\ No newline at end of file
+export default ContactSection;
diff --git a/src/styles/ContactSection.css b/src/styles/ContactSection.css
index 198e9e5..0f61cdc 100644
--- a/src/styles/ContactSection.css
+++ b/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);
@@ -137,11 +137,13 @@
 .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 {
@@ -215,7 +217,7 @@
   text-decoration: none;
   border: none;
   cursor: pointer;
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-lg);
 }
 
 .messenger-contact-button:hover {