{% extends "layouts/base.html" %} {% block title %} CodNesta Pre-Dev | A
Measurable Pathway Into the Digital Economy {% endblock %} {% block
meta_description %} CodNesta Pre-Dev helps emerging digital talents move beyond
learning into opportunity discovery, value creation, real-world experience and
measurable professional progression. {% 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/predev.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="predev-page">
  <!-- =====================================================
         1. HERO SECTION
         Main styles are inherited from hero.css
    ====================================================== -->
  <section class="page-hero page-hero--predev">
    <div class="container page-hero__container">
      <!-- Left Side: Text -->
      <div class="page-hero__content reveal reveal--up">
        <span class="section-label">CodNesta Pre-Dev</span>

        <h1 class="page-hero__title">
          You Learned the Skill.<br />
          <span>What Comes Next?</span>
        </h1>

        <p class="page-hero__description">
          CodNesta Pre-Dev is a measurable pathway designed to help emerging
          digital talents move beyond learning into discovering opportunities,
          creating value, building real-world experience, and participating more
          confidently in the digital economy.
        </p>

        <div class="page-hero__actions">
          <a href="#predev-application" class="button button--primary">
            Apply for Pre-Dev
          </a>
          <a href="#how-predev-works" class="button button--secondary">
            Discover How It Works
          </a>
        </div>
      </div>

      <div class="page-hero__background-word" aria-hidden="true">Pre‑Dev</div>
    </div>
  </section>

  <!-- ===============================
     2. THE PROBLEM
================================= -->
<section class="predev-section" id="the-problem">
  <div class="container">
    <div class="predev-problem">

      <!-- Problem Content -->
      <div class="predev-problem__content reveal reveal--right">
        <span class="predev-eyebrow"> The Challenge </span>

        <h2 class="predev-title">
          Learning the skill is only
          <span>the beginning.</span>
        </h2>

        <p class="predev-description">
          You completed the course and built your portfolio. Yet employers ask for experience, platforms are crowded, and finding the first real opportunity remains difficult.
        </p>

        <div class="predev-problem__statement">
          <i class="fa-solid fa-lightbulb"></i>
          <p>Maybe you don’t need another course. Maybe you need a pathway.</p>
        </div>

        <!-- CTA -->
        <div class="predev-actions">
          <a href="#what-is-predev" class="button button--primary">
            Discover the Pre‑Dev Pathway
          </a>
        </div>
      </div>

      <!-- Problem Visuals (Condensed) -->
      <div class="predev-problem__visual reveal reveal--left">
        <article class="predev-problem-card">
          <span class="predev-problem-card__number">01</span>
          <h3>Skills Acquired</h3>
        </article>

        <article class="predev-problem-card">
          <span class="predev-problem-card__number">02</span>
          <h3>Applications Submitted</h3>
        </article>

        <article class="predev-problem-card">
          <span class="predev-problem-card__number">03</span>
          <h3>Experience Requested</h3>
        </article>
      </div>

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

<!-- ===============================
     3/..x WHAT IS PRE-DEV
================================= -->
<section class="predev-section predev-section--soft reveal reveal--up" id="what-is-predev">
  <div class="container">
    <header class="predev-heading reveal reveal--down">
      <span class="predev-eyebrow"> What Is Pre‑Dev? </span>
      <h2 class="predev-title">
        A pathway into
        <span>the digital economy.</span>
      </h2>
      <p class="predev-description">
        Pre‑Dev is not another course. It connects emerging talent to opportunity discovery, value creation, real‑world experience, and measurable growth.
      </p>
    </header>

    <!-- Value Flow (Condensed) -->
    <div class="predev-value-flow">
      <article class="predev-value-flow__item">
        <i class="fa-solid fa-laptop-code"></i>
        <h3>Skills</h3>
      </article>
      <i class="fa-solid fa-arrow-right predev-value-flow__arrow"></i>
      <article class="predev-value-flow__item">
        <i class="fa-solid fa-magnifying-glass-chart"></i>
        <h3>Opportunities</h3>
      </article>
      <i class="fa-solid fa-arrow-right predev-value-flow__arrow"></i>
      <article class="predev-value-flow__item">
        <i class="fa-solid fa-briefcase"></i>
        <h3>Experience</h3>
      </article>
      <i class="fa-solid fa-arrow-right predev-value-flow__arrow"></i>
      <article class="predev-value-flow__item">
        <i class="fa-solid fa-arrow-trend-up"></i>
        <h3>Growth</h3>
      </article>
    </div>

    <!-- CTA -->
    <div class="predev-actions predev-actions--center">
      <a href="#predev-application" class="button button--primary">
        Start Your Pre‑Dev Journey
      </a>
    </div>
  </div>
</section>

<!-- ===============================
     4/8 WHO IS IT FOR
================================= -->
<section class="predev-section" id="who-predev-is-for">
  <div class="container">
    <header class="predev-heading reveal reveal--up">
      <span class="predev-eyebrow"> Who Is It For? </span>
      <h2 class="predev-title">
        Built for emerging digital talent at
        <span>different starting points.</span>
      </h2>
    </header>

    <!-- Audience Grid (Condensed) -->
    <div class="predev-grid predev-grid--four">
      <article class="predev-audience-card">
        <i class="fa-solid fa-user-graduate"></i>
        <h3>Students</h3>
      </article>
      <article class="predev-audience-card">
        <i class="fa-solid fa-graduation-cap"></i>
        <h3>Graduates</h3>
      </article>
      <article class="predev-audience-card">
        <i class="fa-solid fa-book-open-reader"></i>
        <h3>Self‑Taught</h3>
      </article>
      <article class="predev-audience-card">
        <i class="fa-solid fa-chalkboard-user"></i>
        <h3>Bootcampers</h3>
      </article>
      <article class="predev-audience-card">
        <i class="fa-solid fa-code"></i>
        <h3>Developers</h3>
      </article>
      <article class="predev-audience-card">
        <i class="fa-solid fa-pen-ruler"></i>
        <h3>Designers</h3>
      </article>
      <article class="predev-audience-card">
        <i class="fa-solid fa-bullhorn"></i>
        <h3>Marketers</h3>
      </article>
      <article class="predev-audience-card">
        <i class="fa-solid fa-network-wired"></i>
        <h3>Emerging Professionals</h3>
      </article>
    </div>

    <!-- Note -->
    <div class="predev-audience-note">
      <i class="fa-solid fa-circle-info"></i>
      <p>No degree required. Progression depends on evidence and conduct.</p>
    </div>
  </div>
</section>

<!-- ===============================
     5/8 WHAT MAKES PRE-DEV DIFFERENT
================================= -->
<section class="predev-section predev-section--soft reveal reveal--up">
  <div class="container">
    <div class="predev-problem-layout">

      <!-- Left Side: Content -->
      <div class="predev-problem__content">
        <header class="predev-heading reveal reveal--up" style="text-align: left;">
          <span class="predev-eyebrow"> What Makes Pre‑Dev Different? </span>
          <h2 class="predev-title">
            It is not built around learning
            <span>alone.</span>
          </h2>
        </header>

        <p class="predev-description">
          Moving beyond tutorials into structured, value‑driven execution.
        </p>

        <!-- CTA -->
        <div class="predev-actions">
          <a href="#predev-application" class="button button--primary">
            Apply & Enter the Ecosystem
          </a>
        </div>
      </div>

      <!-- Right Side: Grid (Condensed) -->
      <div class="predev-grid--three reveal reveal--left">
        <article class="predev-card">
          <i class="fa-solid fa-arrow-up-right-dots"></i>
          <h3>Beyond Learning</h3>
          <p>Apply skills in practical contexts.</p>
        </article>

        <article class="predev-card">
          <i class="fa-solid fa-magnifying-glass-dollar"></i>
          <h3>Beyond Applications</h3>
          <p>Discover where your abilities create value.</p>
        </article>

        <article class="predev-card">
          <i class="fa-solid fa-briefcase"></i>
          <h3>Real‑World Experience</h3>
          <p>Build evidence through projects and activities.</p>
        </article>

        <article class="predev-card">
          <i class="fa-solid fa-coins"></i>
          <h3>Opportunity to Earn</h3>
          <p>Eligible participants may qualify for commissions.</p>
        </article>

        <article class="predev-card">
          <i class="fa-solid fa-people-group"></i>
          <h3>Professional Ecosystem</h3>
          <p>Participate in a supportive network.</p>
        </article>
      </div>

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

<!-- ===============================
     6/8 THE FOUR-STAGE JOURNEY
================================= -->
<section class="predev-section predev-section--navy" id="how-predev-works">
  <div class="container">
    <header class="predev-heading predev-heading--light reveal reveal--up">
      <span class="predev-eyebrow"> The Four‑Stage Journey </span>
      <h2 class="predev-title">
        Progress from discovery to
        <span>professional contribution.</span>
      </h2>
      <p class="predev-description">
        Every participant begins at Stage One. Advancement depends on measurable participation and evidence.
      </p>
    </header>

    <!-- Stage Timeline (Condensed) -->
    <div class="predev-stage-timeline reveal reveal--left">
      <article class="predev-stage-card">
        <span class="predev-stage-card__number">01</span>
        <h3>Verified Member</h3>
        <p>Clarify your level and standards.</p>
      </article>

      <article class="predev-stage-card">
        <span class="predev-stage-card__number">02</span>
        <h3>Opportunity Explorer</h3>
        <p>Recognise problems and opportunities.</p>
      </article>

      <article class="predev-stage-card">
        <span class="predev-stage-card__number">03</span>
        <h3>Opportunity Builder</h3>
        <p>Create genuine value and solutions.</p>
      </article>

      <article class="predev-stage-card">
        <span class="predev-stage-card__number">04</span>
        <h3>Talent Partner</h3>
        <p>Contribute to projects and advanced opportunities.</p>
      </article>
    </div>

    <!-- CTA -->
    <div class="predev-actions predev-actions--center">
      <a href="#predev-application" class="button button--primary">
        Begin at Stage One
      </a>
    </div>
  </div>
</section>

<!-- ===============================
     7/8 WHAT YOU CAN GAIN
================================= -->
<section class="predev-section predev-section--soft" id="predev-benefits">
  <div class="container">
    <header class="predev-heading reveal reveal--up">
      <span class="predev-eyebrow"> What You Can Gain </span>
      <h2 class="predev-title">
        Build evidence, confidence and
        <span>professional capacity.</span>
      </h2>
    </header>

    <!-- Benefits Grid (Condensed to 5 essentials) -->
    <div class="predev-grid predev-grid--four reveal reveal--left">
      <article class="predev-development">
        <i class="fa-solid fa-chart-column"></i>
        <h3>Measurable Development</h3>
        <p>Track progress with clear outcomes.</p>
      </article>

      <article class="predev-development">
        <i class="fa-solid fa-briefcase"></i>
        <h3>Real‑World Experience</h3>
        <p>Gain hands‑on exposure to industry practices.</p>
      </article>

      <article class="predev-development">
        <i class="fa-solid fa-folder-open"></i>
        <h3>Portfolio Evidence</h3>
        <p>Strengthen your portfolio with proven work.</p>
      </article>

      <article class="predev-development">
        <i class="fa-solid fa-person-circle-check"></i>
        <h3>Professional Confidence</h3>
        <p>Develop assurance in your abilities.</p>
      </article>

      <article class="predev-development">
        <i class="fa-solid fa-arrow-trend-up"></i>
        <h3>Advanced Opportunities</h3>
        <p>Step into higher‑level roles and challenges.</p>
      </article>
    </div>

    <!-- CTA -->
    <div class="predev-actions predev-actions--center">
      <a href="#predev-application" class="button button--primary">
        Apply for Pre‑Dev
      </a>
    </div>
  </div>
</section>

<!-- ===============================
     8/8 PROGRAM SNAPSHOT
================================= -->
<section class="predev-section reveal reveal--up" id="program-details">
  <div class="container">
    <header class="predev-heading reveal reveal--up">
      <span class="predev-eyebrow"> Program Snapshot </span>
      <h2 class="predev-title">
        A clear structure for
        <span>measurable progression.</span>
      </h2>
    </header>

    <!-- Program Stats (Condensed) -->
    <div class="predev-program-stats reveal reveal--up">
      <article class="predev-program-stat">
        <i class="fa-solid fa-route"></i>
        <span>Journey</span>
        <strong>3 Months</strong>
      </article>

      <article class="predev-program-stat">
        <i class="fa-solid fa-id-card"></i>
        <span>Membership</span>
        <strong>6 Months</strong>
      </article>

      <article class="predev-program-stat">
        <i class="fa-solid fa-wallet"></i>
        <span>Fee</span>
        <strong>10,000 XAF</strong>
      </article>

      <article class="predev-program-stat">
        <i class="fa-solid fa-laptop"></i>
        <span>Mode</span>
        <strong>Virtual</strong>
      </article>

      <article class="predev-program-stat">
        <i class="fa-solid fa-calendar-check"></i>
        <span>Start</span>
        <strong>1–4 Weeks</strong>
      </article>

      <article class="predev-program-stat">
        <i class="fa-solid fa-chart-line"></i>
        <span>Progression</span>
        <strong>Evidence‑Based</strong>
      </article>
    </div>
    <br />
    <!-- CTA -->
    <div class="predev-actions predev-actions--center">
      <a href="#predev-application" class="button button--primary">
        Choose Your Start Period
      </a>
    </div>
  </div>
</section>

<!-- =====================================================
     EXPRESSION OF INTEREST FORM
====================================================== -->
<section class="predev-section reveal reveal--up" id="predev-application">
  <div class="container">
    <div class="predev-form-layout">
      <div class="predev-form-content reveal reveal--right">
        <span class="predev-eyebrow"> Expression of Interest </span>

        <h2 class="predev-title">
          Take the first step into
          <span>Pre-Dev.</span>
        </h2>

        <p class="predev-description">
          Complete this short form with your essential information. CodNesta
          will review your expression of interest and communicate the next step.
        </p>

        <div class="predev-form-info">
          <div class="predev-form-info__icon">
            <i class="fa-solid fa-circle-info"></i>
          </div>
          <div>
            <h3 class="predev-form-info__title"> This is a simple interest form </h3>
            <p class="predev-form-info__description">
              Submission does not automatically confirm admission. Further registration,
              verification and payment instructions may follow.
            </p>
          </div>
        </div>
      </div>

      <form id="predev-form" class="predev-form reveal reveal--left" action="{{ url_for('predev.index') }}" method="POST">
        {% if form is defined %} {{ form.hidden_tag() }} {% endif %}

        <div class="predev-form__row">
          <div class="predev-form__group">
            <label for="predev-name" class="predev-form__label"> Full Name </label>
            <input type="text" id="predev-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="predev-email" class="predev-form__label"> Email Address </label>
            <input type="email" id="predev-email" name="email" class="predev-form__input"
                   placeholder="Enter your email address" autocomplete="email" maxlength="150" required />
          </div>
        </div>

        <div class="predev-form__row">
          <div class="predev-form__group">
            <label for="predev-whatsapp" class="predev-form__label"> WhatsApp Number </label>
            <input type="tel" id="predev-whatsapp" name="whatsapp" class="predev-form__input"
                   placeholder="+237..." autocomplete="tel" maxlength="30" required />
          </div>
          <div class="predev-form__group">
            <label for="predev-location" class="predev-form__label"> Current Location </label>
            <input type="text" id="predev-location" name="location" class="predev-form__input"
                   placeholder="City and country" maxlength="100" required />
          </div>
        </div>

        <div class="predev-form__row">
          <div class="predev-form__group">
            <label for="predev-status" class="predev-form__label"> Current Status </label>
            <select id="predev-status" name="current_status" class="predev-form__select" required>
              <option value="" selected disabled> Select your current status </option>
              <option value="student">Student</option>
              <option value="graduate">Graduate</option>
              <option value="self-taught-talent">Self-Taught Talent</option>
              <option value="bootcamp-graduate">Bootcamp Graduate</option>
              <option value="emerging-professional">Emerging Digital Professional</option>
              <option value="employed">Employed Professional</option>
              <option value="other">Other</option>
            </select>
          </div>
          <div class="predev-form__group">
            <label for="predev-skill" class="predev-form__label"> Primary Digital Skill or Area </label>
            <select id="predev-skill" name="primary_skill" class="predev-form__select" required>
              <option value="" selected disabled> Select your main area </option>
              <option value="web-development">Web Development</option>
              <option value="software-development">Software Development</option>
              <option value="graphic-design">Graphic Design</option>
              <option value="video-editing">Video Editing & Motion Graphics</option>
              <option value="digital-marketing">Digital Marketing & Growth</option>
              <option value="data-ai">Data and Artificial Intelligence</option>
              <option value="ui-ux">UI/UX Design</option>
              <option value="content-media">Content and Digital Media</option>
              <option value="other">Other</option>
            </select>
          </div>
        </div>

        <div class="predev-form__row">
          <div class="predev-form__group">
            <label for="predev-level" class="predev-form__label"> Current Experience Level </label>
            <select id="predev-level" name="experience_level" class="predev-form__select" required>
              <option value="" selected disabled>Select your level</option>
              <option value="beginner">Beginner</option>
              <option value="learning">Currently Learning</option>
              <option value="some-projects">Completed Some Projects</option>
              <option value="freelance-experience">Some Freelance Experience</option>
              <option value="professional-experience">Some Professional Experience</option>
            </select>
          </div>
          <div class="predev-form__group">
            <label for="predev-start-period" class="predev-form__label"> Preferred Start Period </label>
            <select id="predev-start-period" name="preferred_start_period" class="predev-form__select" required>
              <option value="" selected disabled> Choose your preferred start period </option>
              <option value="1-week">Within 1 Week</option>
              <option value="2-weeks">Within 2 Weeks</option>
              <option value="3-weeks">Within 3 Weeks</option>
              <option value="4-weeks">Within 4 Weeks</option>
            </select>
          </div>
        </div>

        <div class="predev-form__group">
          <label for="predev-goal" class="predev-form__label"> What do you hope to achieve through Pre-Dev? </label>
          <textarea id="predev-goal" name="development_goal" class="predev-form__textarea"
                    rows="4" maxlength="500" placeholder="Briefly describe your main goal" required></textarea>
        </div>

        <div class="predev-form__agreement">
          <input type="checkbox" id="predev-agreement" name="program_understanding" value="accepted" required />
          <label for="predev-agreement">
            I understand that Pre-Dev is a three-month active journey within a six-month membership,
            primarily virtual, with a non-refundable 10,000 XAF membership fee. I also understand that
            participation does not guarantee employment, internships, income, commissions, projects
            or automatic progression.
          </label>
        </div>

        <button type="submit" class="button button--primary predev-form__submit">
          Submit Expression of Interest <i class="fa-solid fa-arrow-right"></i>
        </button>

        <p class="predev-form__note">
          Provide accurate contact details so the CodNesta team can reach you.
        </p>
      </form>
    </div>
  </div>
</section>


<!-- ===============================
     10/10 FREQUENTLY ASKED QUESTIONS
================================= -->
<section class="predev-section predev-section--soft reveal reveal--down" id="predev-faq">
  <div class="container">
    <header class="predev-heading reveal reveal--up">
      <span class="predev-eyebrow"> Frequently Asked Questions </span>
      <h2 class="predev-title">
        Understand the pathway before
        <span>you apply.</span>
      </h2>
    </header>

    <div class="predev-faq reveal reveal--left">
      <details class="predev-faq__item">
        <summary>What is Pre‑Dev?</summary>
        <p>Pre‑Dev is a measurable pathway that helps emerging digital talents move from learning into opportunity discovery, value creation, and real‑world contribution.</p>
      </details>

      <details class="predev-faq__item">
        <summary>Who can apply?</summary>
        <p>Students, graduates, self‑taught talents, bootcampers, developers, designers, marketers, and other emerging professionals.</p>
      </details>

      <details class="predev-faq__item">
        <summary>Do I need a degree?</summary>
        <p>No. Progression depends on evidence, participation, and conduct.</p>
      </details>

      <details class="predev-faq__item">
        <summary>Is Pre‑Dev a bootcamp?</summary>
        <p>No. It focuses on measurable progression, opportunity discovery, and professional participation.</p>
      </details>

      <details class="predev-faq__item">
        <summary>How long is the program?</summary>
        <p>The active journey lasts about 3 months, while membership lasts 6 months.</p>
      </details>

      <details class="predev-faq__item">
        <summary>What is the membership fee?</summary>
        <p>10,000 XAF (non‑refundable).</p>
      </details>

      <details class="predev-faq__item">
        <summary>Is employment guaranteed?</summary>
        <p>No. Opportunities depend on evidence, readiness, and availability.</p>
      </details>

      <details class="predev-faq__item">
        <summary>Can participants earn?</summary>
        <p>Eligible participants may qualify for commissions where successful value creation generates revenue.</p>
      </details>
    </div>

    <!-- CTA -->
    <div class="predev-actions predev-actions--center">
      <a href="{{ url_for('contact.index') }}" class="button button--secondary-dark">
        Still Have Questions? Contact CodNesta
      </a>
    </div>
  </div>
</section>

  <!-- =====================================================
         MOBILE APPLY BUTTON
    ====================================================== -->
  <a
    href="#predev-application"
    class="predev-mobile-apply"
    aria-label="Apply for CodNesta Pre-Dev"
  >
    <i class="fa-solid fa-paper-plane"></i>
    Apply for Pre-Dev
  </a>
</main>

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