{% extends "layouts/base.html" %} {% block title %} Contact CodNesta {% endblock
%} {% block meta_description %} Contact CodNesta Group for general enquiries,
digital services, programs, technical support and information about our work. {%
endblock %} {% block extra_css %}

<link
  rel="icon"
  type="image/png"
  href="{{ url_for('static', filename='images/favicon1.png') }}"
/>

<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/pages/contact.css') }}"
/>

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
/>

{% endblock %} {% block content %}

<main class="contact-page">
  <!-- =====================================================
         SHARED PAGE HERO
         Styled by hero.css
    ====================================================== -->
  <section class="page-hero page-hero--contact">
    <div class="container page-hero__container">
      <div class="page-hero__content reveal reveal--up">
        <span class="section-label"> Contact CodNesta </span>

        <h1 class="page-hero__title">
          Let’s Start a
          <span>Conversation.</span>
        </h1>

        <p class="page-hero__description">
          Contact our team for general enquiries, service information, program
          support or guidance on the right CodNesta pathway for your needs.
        </p>

        <div class="page-hero__actions">
          <a href="#contact-form" class="button button--primary">
            Send a Message
          </a>

          <a
            href="https://wa.me/237652243978"
            class="button button--secondary"
            target="_blank"
            rel="noopener noreferrer"
          >
            Chat on WhatsApp
          </a>
        </div>
      </div>

      <div class="page-hero__background-word" aria-hidden="true">Contact</div>
    </div>
  </section>

  <!-- =====================================================
         CONTACT INTRODUCTION
    ====================================================== -->
  <section class="contact-section">
    <div class="container">
      <header class="contact-heading reveal reveal--up">
        <span class="contact-eyebrow"> Reach Our Team </span>

        <h2 class="contact-title">
          Choose the easiest way to
          <span>reach CodNesta.</span>
        </h2>

        <p class="contact-description">
          Our team is available to answer general questions, explain our
          services and programs, and direct you to the appropriate CodNesta
          division or pathway.
        </p>
      </header>

      <div class="contact-methods">
        <!-- Email -->
        <article class="contact-method reveal reveal--up reveal-delay-1">
          <div class="contact-method__icon">
            <i class="fa-solid fa-envelope"></i>
          </div>

          <h3 class="contact-method__title">Email Us</h3>

          <p class="contact-method__description">
            Send general enquiries and requests directly to our team.
          </p>

          <a href="mailto:contact@codnesta.com" class="contact-method__link">
            Send Mail ->
          </a>
        </article>

        <!-- WhatsApp -->
        <article class="contact-method reveal reveal--up reveal-delay-2">
          <div class="contact-method__icon">
            <i class="fa-brands fa-whatsapp"></i>
          </div>

          <h3 class="contact-method__title">WhatsApp</h3>

          <p class="contact-method__description">
            Chat with us for quick enquiries and general assistance.
          </p>

          <a
            href="https://wa.me/237652243978"
            class="contact-method__link"
            target="_blank"
            rel="noopener noreferrer"
          >
            WhatsApp ->
          </a>
        </article>

        <!-- Business Hours -->
        <article class="contact-method reveal reveal--up reveal-delay-3">
          <div class="contact-method__icon">
            <i class="fa-solid fa-clock"></i>
          </div>

          <h3 class="contact-method__title">Business Hours</h3>

          <p class="contact-method__description">
            Our communication channels are open every day.
          </p>

          <span class="contact-method__value"> 7:00 AM–10:00 PM GMT+1 </span>
        </article>
      </div>
    </div>
  </section>

  <!-- =====================================================
     CONTACT FORM SECTION
====================================================== -->
<section class="contact-section contact-section--soft" id="contact-form">
  <div class="container">
    <div class="contact-layout">

      <!-- Supporting content (Left Column) -->
      <div class="contact-content reveal reveal--right">
        <span class="contact-eyebrow"> General Enquiry </span>

        <h2 class="contact-title">
          Tell us how we can
          <span>help.</span>
        </h2>

        <p class="contact-description">
          Complete the short form and provide enough information for our team
          to understand your enquiry and respond appropriately.
        </p>

        <div class="contact-notice">
          <div class="contact-notice__icon">
            <i class="fa-solid fa-handshake"></i>
          </div>

          <div>
            <h3 class="contact-notice__title">
              Looking to work with CodNesta?
            </h3>

            <p class="contact-notice__description">
              Partnership, collaboration and volunteering requests should be
              submitted through our central Work With CodNesta page.
            </p>
          </div>
        </div>
      </div>

      <!-- General Contact Form (Right Column) -->
      <form
        id="contactForm"
        class="contact-form reveal reveal--left"
        data-validate-form
        method="post"
        action="{{ url_for('contact.index') }}"
        style="position: relative"
      >
        <!-- CodNesta Loader Overlay -->
        <div
          id="formLoader"
          class="form-loader-overlay"
          style="display: none"
        >
          <div class="spinner"></div>
          <p class="loader-text">Submitting, please wait...</p>
        </div>

        {% if form is defined %} {{ form.hidden_tag() }} {% endif %}

        <!-- Row 1: Full Name & Email -->
        <div class="predev-form__row">
          <div class="predev-form__group">
            <label for="contact-name" class="predev-form__label">Full Name</label>
            <input
              type="text"
              id="contact-name"
              name="name"
              class="predev-form__input"
              placeholder="Enter your full name"
              autocomplete="name"
              maxlength="120"
              required
            />
          </div>

          <div class="predev-form__group">
            <label for="contact-email" class="predev-form__label">Email Address</label>
            <input
              type="email"
              id="contact-email"
              name="email"
              class="predev-form__input"
              placeholder="Enter your email address"
              autocomplete="email"
              maxlength="150"
              data-validate="email"
              required
            />
          </div>
        </div>

        <!-- Row 2: Phone & Subject -->
        <div class="predev-form__row">
          <div class="predev-form__group">
            <label for="contact-phone" class="predev-form__label">Phone / WhatsApp (Optional)</label>
            <input
              type="tel"
              id="contact-phone"
              name="phone"
              class="predev-form__input"
              placeholder="+237..."
              autocomplete="tel"
              maxlength="30"
            />
          </div>

          <div class="predev-form__group">
            <label for="contact-subject" class="predev-form__label">Subject</label>
            <select
              id="contact-subject"
              name="subject"
              class="predev-form__select"
              required
            >
              <option value="" selected disabled>Select enquiry type</option>
              <option value="General Support">General Enquiry</option>
              <option value="Services & Consultation">Services & Consultation</option>
              <option value="Partnership">Partnership / Collaboration</option>
              <option value="Feedback">Feedback</option>
              <option value="Other">Other</option>
            </select>
          </div>
        </div>

        <!-- Row 3: Message -->
        <div class="predev-form__group">
          <label for="contact-message" class="predev-form__label">Message</label>
          <textarea
            id="contact-message"
            name="message"
            class="predev-form__textarea"
            rows="5"
            maxlength="1000"
            placeholder="How can we help you?"
            required
          ></textarea>
        </div>

        <!-- Privacy & Consent Agreement -->
        <div class="predev-form__agreement">
          <input
            type="checkbox"
            id="contact-consent"
            name="privacy_consent"
            value="accepted"
            required
          />
          <label for="contact-consent">
            I agree to CodNesta storing and processing my information to respond to my enquiry.
          </label>
        </div>

        <!-- Submit Button -->
        <button
          type="submit"
          class="button button--primary predev-form__submit"
        >
          Send Message
          <i class="fa-solid fa-paper-plane"></i>
        </button>

        <p class="predev-form__note">
          We usually respond within 24–48 business hours.
        </p>
      </form>

    </div>
  </div>
</section>

  <!-- =====================================================
         QUICK DIRECTIONS
    ====================================================== -->
  <section class="contact-section">
    <div class="container">
      <header class="contact-heading reveal reveal--up">
        <span class="contact-eyebrow"> Find the Right Path </span>

        <h2 class="contact-title">
          Looking for something
          <span>specific?</span>
        </h2>
      </header>

      <div class="contact-directions">
        <a
          href="{{ url_for('services.index') }}"
          class="contact-direction reveal reveal--up reveal-delay-1"
        >
          <span class="contact-direction__icon">
            <i class="fa-solid fa-laptop-code"></i>
          </span>

          <span class="contact-direction__content">
            <strong>Digital Services</strong>
            <small>Explore websites, systems and digital solutions.</small>
          </span>

          <i class="fa-solid fa-arrow-right"></i>
        </a>

        <a
          href="{{ url_for('programs.index') }}"
          class="contact-direction reveal reveal--up reveal-delay-2"
        >
          <span class="contact-direction__icon">
            <i class="fa-solid fa-graduation-cap"></i>
          </span>

          <span class="contact-direction__content">
            <strong>Programs</strong>
            <small>Explore bootcamps, workshops and training.</small>
          </span>

          <i class="fa-solid fa-arrow-right"></i>
        </a>

        <a
          href="{{ url_for('opportunities.index') }}"
          class="contact-direction reveal reveal--up reveal-delay-3"
        >
          <span class="contact-direction__icon">
            <i class="fa-solid fa-arrow-trend-up"></i>
          </span>

          <span class="contact-direction__content">
            <strong>Opportunities</strong>
            <small>Discover Pre-Dev and growth pathways.</small>
          </span>

          <i class="fa-solid fa-arrow-right"></i>
        </a>

        <a href="#" class="contact-direction reveal reveal--up reveal-delay-4">
          <span class="contact-direction__icon">
            <i class="fa-solid fa-handshake"></i>
          </span>

          <span class="contact-direction__content">
            <strong>Work With CodNesta</strong>
            <small>Collaborate, volunteer or become a partner.</small>
          </span>

          <i class="fa-solid fa-arrow-right"></i>
        </a>
      </div>
    </div>
  </section>
</main>

{% endblock %} {% block extra_js %}
<!-- Include Form Validation Scripts -->
<script src="{{ url_for('static', filename='js/forms/contact-msg.js') }}"></script>
{% endblock %}