{% extends "layouts/base.html" %}

{% block title %}
CodNesta Programs
{% endblock %}

{% block meta_description %}
Explore CodNesta bootcamps, certified developer pathways, practical workshops,
student programs and professional learning experiences.
{% 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/programs.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="program-page">

    <!-- =====================================================
         SHARED PAGE HERO
         Styled by hero.css
    ====================================================== -->
    <section class="page-hero page-hero--programs">

        <div class="container page-hero__container">

            <div class="page-hero__content reveal reveal--up">

                <span class="section-label">
                    CodNesta Programs
                </span>

                <h1 class="page-hero__title">
                    Practical Programs Built
                    <span>for Real Growth.</span>
                </h1>

                <p class="page-hero__description">
                    Explore structured learning experiences that combine
                    practical training, mentorship, projects and professional
                    development for learners at different stages.
                </p>

                <div class="page-hero__actions">

                    <a
                        href="#programs"
                        class="button button--primary"
                    >
                        Explore Programs
                    </a>

                    <a
                         href="{{ url_for('predev.index') }}#predev-application"
                        class="button button--secondary"
                        target="_self"
                        rel="noopener noreferrer"
                    >
                        Begin With Pre-Dev
                    </a>

                </div>

            </div>

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

        </div>

    </section>


    <!-- =====================================================
         PROGRAM INTRODUCTION
    ====================================================== -->
    <section class="program-section program-section--intro" id="programs">

        <div class="container">

            <div class="program-intro">

                <div class="program-intro__content reveal reveal--right">

                    <span class="program-eyebrow">
                        Learning With Purpose
                    </span>

                    <h2 class="program-title">
                        More than lessons.
                        <span>Programs that build capability.</span>
                    </h2>

                    <p class="program-description">
                        CodNesta programs are designed around practical
                        participation. Learners do not only receive information;
                        they practise, build, collaborate, receive guidance and
                        develop experience they can apply beyond the classroom.
                    </p>

                    <p class="program-description">
                        Each program may differ in duration, level and delivery
                        format, but the goal remains the same: helping
                        participants grow through structured and relevant
                        learning.
                    </p>

                </div>


                <div class="program-intro__principles">

                    <article class="program-principle reveal reveal--up reveal-delay-1">

                        <span class="program-principle__number">
                            01
                        </span>

                        <div>
                            <h3 class="program-principle__title">
                                Learn Practically
                            </h3>

                            <p class="program-principle__description">
                                Apply concepts through exercises, guided tasks
                                and hands-on activities.
                            </p>
                        </div>

                    </article>


                    <article class="program-principle reveal reveal--up reveal-delay-2">

                        <span class="program-principle__number">
                            02
                        </span>

                        <div>
                            <h3 class="program-principle__title">
                                Build Projects
                            </h3>

                            <p class="program-principle__description">
                                Transform knowledge into visible and usable
                                project outcomes.
                            </p>
                        </div>

                    </article>


                    <article class="program-principle reveal reveal--up reveal-delay-3">

                        <span class="program-principle__number">
                            03
                        </span>

                        <div>
                            <h3 class="program-principle__title">
                                Grow Professionally
                            </h3>

                            <p class="program-principle__description">
                                Strengthen teamwork, communication,
                                accountability and career readiness.
                            </p>
                        </div>

                    </article>

                </div>

            </div>

        </div>

    </section>


    <!-- =====================================================
         BOOTCAMPS
    ====================================================== -->
    <section class="program-section program-section--soft" id="bootcamps">

        <div class="container">

            <div class="program-split">

                <div class="program-image image-reveal reveal-delay-1">

                    <img
                        src="{{ url_for('static', filename='images/programs/bootcamp.jpg') }}"
                        alt="Learners participating in a practical CodNesta bootcamp"
                    >

                </div>


                <div class="program-content reveal reveal--left">

                    <span class="program-eyebrow">
                        CodNesta Bootcamps
                    </span>

                    <h2 class="program-title">
                        Focused learning for
                        <span>faster practical progress.</span>
                    </h2>

                    <p class="program-description">
                        CodNesta bootcamps are intensive learning experiences
                        built around a focused technology, skill area or
                        practical outcome.
                    </p>

                    <p class="program-description">
                        Participants work through guided lessons, exercises and
                        project tasks within a defined period. Bootcamps may be
                        delivered online, onsite or through a blended format.
                    </p>

                    <ul class="program-list">

                        <li>
                            <span class="program-list__icon">
                                <i class="fa-solid fa-check"></i>
                            </span>

                            Short and intensive learning structure.
                        </li>

                        <li>
                            <span class="program-list__icon">
                                <i class="fa-solid fa-check"></i>
                            </span>

                            Practical exercises and project-based activities.
                        </li>

                        <li>
                            <span class="program-list__icon">
                                <i class="fa-solid fa-check"></i>
                            </span>

                            Guidance, feedback and collaborative participation.
                        </li>

                    </ul>

                    <div class="program-actions">

                        <a
                            href="{{ url_for('predev.index') }}#predev-application"
                            class="button button--primary"
                            target="_self"
                            rel="noopener noreferrer"
                        >
                            Prepare Through Pre-Dev
                        </a>

                    </div>

                </div>

            </div>

        </div>

    </section>


    <!-- =====================================================
         CERTIFIED DEVELOPER PROGRAM
    ====================================================== -->
    <section class="program-section" id="certified-developer">

        <div class="container">

            <header class="program-heading reveal reveal--up">

                <span class="program-eyebrow">
                    Certified Developer Program
                </span>

                <h2 class="program-title">
                    Structured development from junior to
                    <span>senior level.</span>
                </h2>

                <p class="program-description">
                    A progressive programming pathway for developers who want
                    to strengthen their foundations, build production skills
                    and grow toward advanced technical responsibility.
                </p>

            </header>


            <!-- Developer Levels -->
            <div class="program-grid program-grid--three">

                <article class="program-card reveal reveal--right">

                    <div class="program-card__icon">
                        <i class="fa-solid fa-seedling"></i>
                    </div>

                    <span class="program-badge">
                        Junior Level
                    </span>

                    <h3 class="program-card__title">
                        Build Strong Foundations
                    </h3>

                    <p class="program-card__description">
                        Learn programming fundamentals, development tools,
                        clean coding practices and how to build complete
                        beginner-level applications.
                    </p>

                </article>


                <article class="program-card reveal reveal--left">

                    <div class="program-card__icon">
                        <i class="fa-solid fa-code-branch"></i>
                    </div>

                    <span class="program-badge">
                        Mid-Level
                    </span>

                    <h3 class="program-card__title">
                        Develop Production Skills
                    </h3>

                    <p class="program-card__description">
                        Work with frameworks, APIs, databases, authentication,
                        reusable components and more complex application
                        requirements.
                    </p>

                </article>


                <article class="program-card reveal reveal--right">

                    <div class="program-card__icon">
                        <i class="fa-solid fa-layer-group"></i>
                    </div>

                    <span class="program-badge">
                        Senior Level
                    </span>

                    <h3 class="program-card__title">
                        Lead and Architect Solutions
                    </h3>

                    <p class="program-card__description">
                        Focus on architecture, security, performance,
                        scalability, technical leadership and reliable
                        production delivery.
                    </p>

                </article>

            </div>


            <!-- Technology Tracks -->
            <div class="program-tracks">

                <header class="program-heading reveal reveal--up">

                    <span class="program-eyebrow">
                        Available Tracks
                    </span>

                    <h3 class="program-title program-title--small">
                        Learn modern technologies used to build
                        <span>real applications.</span>
                    </h3>

                </header>


                <div class="program-grid program-grid--four">

                    <article class="program-card program-card--track reveal reveal-delay-1">
                        <h4 class="program-card__title">
                            JavaScript
                        </h4>

                        <p class="program-card__description">
                            Build strong frontend and backend web-programming
                            foundations.
                        </p>
                    </article>


                    <article class="program-card program-card--track reveal reveal--up ">
                        <h4 class="program-card__title">
                            Vue.js
                        </h4>

                        <p class="program-card__description">
                            Develop responsive and reusable component-based
                            user interfaces.
                        </p>
                    </article>


                    <article class="program-card program-card--track reveal reveal--left">
                        <h4 class="program-card__title">
                            Nuxt
                        </h4>

                        <p class="program-card__description">
                            Build structured Vue applications with routing,
                            rendering and server capabilities.
                        </p>
                    </article>


                    <article class="program-card program-card--track reveal reveal--right">
                        <h4 class="program-card__title">
                            React
                        </h4>

                        <p class="program-card__description">
                            Create modern interfaces using components, hooks
                            and application state.
                        </p>
                    </article>


                    <article class="program-card program-card--track reveal reveal--right">
                        <h4 class="program-card__title">
                            Next.js
                        </h4>

                        <p class="program-card__description">
                            Develop full-stack React applications with routing,
                            rendering and API integration.
                        </p>
                    </article>


                    <article class="program-card program-card--track reveal reveal--left">
                        <h4 class="program-card__title">
                            Node.js
                        </h4>

                        <p class="program-card__description">
                            Build APIs, backend services, authentication and
                            database-connected systems.
                        </p>
                    </article>


                    <article class="program-card program-card--track reveal reveal--right">
                        <h4 class="program-card__title">
                            Laravel
                        </h4>

                        <p class="program-card__description">
                            Develop secure PHP applications using MVC,
                            databases, authentication and APIs.
                        </p>
                    </article>


                    <article class="program-card program-card--track reveal reveal-delay-4">
                        <h4 class="program-card__title">
                            Angular
                        </h4>

                        <p class="program-card__description">
                            Build structured and scalable frontend applications
                            using TypeScript.
                        </p>
                    </article>

                </div>

            </div>

        </div>

    </section>


    <!-- =====================================================
         WORKSHOPS
    ====================================================== -->
    <section class="program-section program-section--soft" id="workshops">

        <div class="container">

            <header class="program-heading reveal reveal--left-scale">

                <span class="program-eyebrow">
                    Practical Workshops
                </span>

                <h2 class="program-title">
                    Short learning experiences with
                    <span>clear outcomes.</span>
                </h2>

                <p class="program-description">
                    CodNesta workshops introduce participants to practical
                    skills, tools and professional topics through focused and
                    interactive sessions.
                </p>

            </header>


            <div class="program-gallery">

                <article class="program-gallery-card reveal reveal--right-scale">

                    <div class="program-gallery-card__image image-reveal">

                        <img
                            src="{{ url_for('static', filename='images/programs/technology-workshop.jpg') }}"
                            alt="Participants attending a CodNesta technology workshop"
                        >

                    </div>

                    <div class="program-gallery-card__content">

                        <span class="program-badge">
                            Technology
                        </span>

                        <h3 class="program-gallery-card__title">
                            Technology Workshops
                        </h3>

                        <p class="program-gallery-card__description">
                            Practical sessions covering programming, digital
                            tools, web development, AI and emerging
                            technologies.
                        </p>

                    </div>

                </article>


                <article class="program-gallery-card reveal reveal--right-scale">

                    <div class="program-gallery-card__image image-reveal">

                        <img
                            src="{{ url_for('static', filename='images/programs/career-workshop.jpg') }}"
                            alt="Young professionals participating in a career development workshop"
                        >

                    </div>

                    <div class="program-gallery-card__content">

                        <span class="program-badge">
                            Professional Growth
                        </span>

                        <h3 class="program-gallery-card__title">
                            Career Readiness Workshops
                        </h3>

                        <p class="program-gallery-card__description">
                            Sessions on communication, teamwork, portfolios,
                            professional profiles, interviews and workplace
                            preparation.
                        </p>

                    </div>

                </article>


                <article class="program-gallery-card reveal reveal--up reveal-delay-3">

                    <div class="program-gallery-card__image image-reveal">

                        <img
                            src="{{ url_for('static', filename='images/programs/business-workshop.jpg') }}"
                            alt="Participants learning business and innovation skills"
                        >

                    </div>

                    <div class="program-gallery-card__content">

                        <span class="program-badge">
                            Business and Innovation
                        </span>

                        <h3 class="program-gallery-card__title">
                            Business Development Workshops
                        </h3>

                        <p class="program-gallery-card__description">
                            Practical guidance on ideas, customer needs,
                            branding, digital presence and presenting solutions.
                        </p>

                    </div>

                </article>

            </div>

        </div>

    </section>


    <!-- =====================================================
         STUDENT AND SPECIAL PROGRAMS
    ====================================================== -->
    <section class="program-section" id="special-programs">

        <div class="container">

            <div class="program-split">

                <div class="program-content reveal reveal--right">

                    <span class="program-eyebrow">
                        Student and Special Programs
                    </span>

                    <h2 class="program-title">
                        Learning experiences designed for
                        <span>specific communities.</span>
                    </h2>

                    <p class="program-description">
                        CodNesta may organise or support programs for schools,
                        students, institutions, community groups and selected
                        audiences with particular learning or development
                        needs.
                    </p>

                    <p class="program-description">
                        These programs may include school technology sessions,
                        youth workshops, mentorship activities, outreach
                        programs and collaborative learning initiatives.
                    </p>

                    <ul class="program-list">

                        <li>
                            <span class="program-list__icon">
                                <i class="fa-solid fa-check"></i>
                            </span>

                            School and student technology programs.
                        </li>

                        <li>
                            <span class="program-list__icon">
                                <i class="fa-solid fa-check"></i>
                            </span>

                            Youth learning and mentorship activities.
                        </li>

                        <li>
                            <span class="program-list__icon">
                                <i class="fa-solid fa-check"></i>
                            </span>

                            Programs developed with institutions and partners.
                        </li>

                    </ul>

                </div>


                <div class="program-image image-reveal reveal-delay-1">

                    <img
                        src="{{ url_for('static', filename='images/programs/student-program.jpg') }}"
                        alt="Students participating in a practical technology learning program"
                    >

                </div>

            </div>

        </div>

    </section>


    <!-- =====================================================
         PROGRAM PARTICIPATION
    ====================================================== -->
    <section class="program-section program-section--soft">

        <div class="container">

            <header class="program-heading reveal reveal--up">

                <span class="program-eyebrow">
                    How to Participate
                </span>

                <h2 class="program-title">
                    Find the right pathway for
                    <span>your stage.</span>
                </h2>

            </header>


            <div class="program-steps">

                <article class="program-step reveal reveal--up reveal-delay-1">

                    <span class="program-step__number">
                        01
                    </span>

                    <h3 class="program-step__title">
                        Explore
                    </h3>

                    <p class="program-step__description">
                        Review available programs and identify the experience
                        that matches your goals.
                    </p>

                </article>


                <span class="program-step__line"></span>


                <article class="program-step reveal reveal--up reveal-delay-2">

                    <span class="program-step__number">
                        02
                    </span>

                    <h3 class="program-step__title">
                        Prepare
                    </h3>

                    <p class="program-step__description">
                        Complete Pre-Dev or any stated preparation requirements
                        where applicable.
                    </p>

                </article>


                <span class="program-step__line"></span>


                <article class="program-step reveal reveal--up reveal-delay-3">

                    <span class="program-step__number">
                        03
                    </span>

                    <h3 class="program-step__title">
                        Apply
                    </h3>

                    <p class="program-step__description">
                        Submit your interest or application when registration
                        opens.
                    </p>

                </article>


                <span class="program-step__line"></span>


                <article class="program-step reveal reveal--up reveal-delay-4">

                    <span class="program-step__number">
                        04
                    </span>

                    <h3 class="program-step__title">
                        Participate
                    </h3>

                    <p class="program-step__description">
                        Attend, complete practical activities and contribute
                        consistently.
                    </p>

                </article>

            </div>

        </div>

    </section>


    <!-- =====================================================
         FINAL CTA
    ====================================================== -->
    <section class="program-section">

        <div class="container">

            <div class="program-cta reveal reveal--up-scale">

                <span class="program-eyebrow">
                    Begin Your Development
                </span>

                <h2 class="program-cta__title">
                    Choose a program and start building practical experience.
                </h2>

                <p class="program-cta__description">
                    Begin with Pre-Dev, prepare for continued learning and
                    position yourself for CodNesta bootcamps, workshops,
                    certified development pathways and other programs.
                </p>

                <div class="program-actions program-actions--center">

                    <a
                         href="{{ url_for('predev.index') }}#predev-application"
                        class="button button--primary"
                        target="_self"
                        rel="noopener noreferrer"
                    >
                        Explore Pre-Dev
                    </a>

                    <a
                        href="{{ url_for('opportunities.index') }}"
                        class="button button--secondary"
                    >
                        View Opportunities
                    </a>

                </div>

            </div>

        </div>

    </section>

</main>

{% endblock %}