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

{% block title %}
CodNesta Group - Innovation for Generations
{% endblock %}

{% block meta_description %}
CodNesta Group develops practical talent, digital solutions, responsible innovation, professional support and community opportunity.
{% endblock %}

{% block extra_css %}

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

<link
    rel="stylesheet"
    href="{{ url_for('static', filename='css/pages/home.css') }}"
>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
{% endblock %}

{% block content %}
<!-- ==========================================
       HERO CAROUSEL SECTION
       ========================================== -->
  <section class="hero swiper hero-swiper" id="home">
    <div class="hero__molecular-mesh" aria-hidden="true"></div>

    <div class="swiper-wrapper">

      <!-- SLIDE 1: CodNesta General -->
      <div class="swiper-slide page-hero page-hero--general">
        
        <div class="container hero__inner">
          <div class="hero__content">
            <span class="hero__eyebrow">CodNesta Group</span>

            <h1 class="hero__title">
              Turning Knowledge Into
              <span class="hero__title-accent">Skills, Solutions and Opportunity.</span>
            </h1>

            <p class="hero__text">
              We develop practical talent, build digital solutions, explore innovation and create opportunities through five specialized divisions.
            </p>

            <div class="hero__actions">
              <a class="button button--primary" href="{{ url_for('divisions.index') }}">
                Explore CodNesta
              </a>
              <a class="button button--secondary" href="{{ url_for('work_with_us.index') }}">
                Work With Us
              </a>
            </div>

            <ul class="hero__proof">
              <li class="hero__proof-item">Practical learning</li>
              <li class="hero__proof-item">Digital solutions</li>
              <li class="hero__proof-item">Responsible innovation</li>
            </ul>
          </div>

          <div class="hero__visual">
            <div class="hero__image-frame reveal image-reveal">
              <img
                src="{{ url_for('static', filename='images/codnesta-learning-hero4.jpg') }}"
                alt="CodNesta participants working together on practical technology projects"
              >
              <div class="hero__image-overlay" aria-hidden="true"></div>
            </div>

            <div class="hero__badge">
              <span class="hero__badge-number">5 Specialized divisions</span>
              <p class="hero__badge-text">One coordinated mission.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- SLIDE 2: CodNesta Pre-Dev -->
      <div class="swiper-slide page-hero page-hero--predev hero--predev">

        <div class="container hero__inner">
          <div class="hero__content">
            <span class="hero__eyebrow">CodNesta Pre-Dev</span>

            <h1 class="hero__title">
              Bridging the Gap From
              <span class="hero__title-accent"><span id="hero-slide3-text-gold">Learning to Real-World Engineering.</span></span>
            </h1>

            <p class="hero__text">
              Gain practical project experience, build industry-ready code, and collaborate under real engineering workflows before stepping into the market.
            </p>

            <div class="hero__actions">
              <a class="button button--primary" href="{{ url_for('predev.index') if url_for else '#' }}">
                Join Pre-Dev
              </a>
              <a class="button button--secondary" href="{{ url_for('work_with_us.index') }}">
                Work With Us
              </a>
            </div>

            <ul class="hero__proof">
              <li class="hero__proof-item">Hands-on experience</li>
              <li class="hero__proof-item">Production standards</li>
              <li class="hero__proof-item">Mentorship driven</li>
            </ul>
          </div>

          <div class="hero__visual">
            <div class="hero__image-frame reveal image-reveal">
              <img
                src="{{ url_for('static', filename='images/programs/predev.jpg') }}"
                alt="CodNesta Pre-Dev"
              >
              <div class="hero__image-overlay" aria-hidden="true"></div>
            </div>

            <div class="hero__badge">
              <span class="hero__badge-number">Talent Development</span>
              <p class="hero__badge-text">Pre-Dev Pipeline.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- SLIDE 3: Agentee Business Network (Agentee B.N.) -->
      <div class="swiper-slide page-hero page-hero--abn hero--abn">

        <div class="container hero__inner">
          <div class="hero__content">
            <span class="hero__eyebrow">Agentee Business Network</span>

            <h1 class="hero__title">
             <span id="hero-slide3-text-gold">Ecosystems</span> For
              <span class="hero__title-accent">Opportunities, Partnerships & Growth.</span>
            </h1>

            <p class="hero__text">
              A collaborative network connecting startups, SMEs, NGOs, and skilled professionals to create opportunities, strategic partnerships, and pathways to employment within the CodNesta ecosystem.
            </p>

            <div class="hero__actions">
              <a class="button button--primary" href="#agentee-card">
                Enquire About Network
              </a>
              <a class="button button--secondary" href="{{ url_for('work_with_us.index') }}">
                Work With Us
              </a>
            </div>

            <ul class="hero__proof">
              <li class="hero__proof-item">Strategic Partnerships</li>
              <li class="hero__proof-item">Decentralized Talent</li>
              <li class="hero__proof-item">Ecosystem Growth</li>
            </ul>
          </div>

          <div class="hero__visual">
            <div class="hero__image-frame reveal image-reveal">
              <img src="{{ url_for('static', filename='images/work-with-us/collaboration.jpg') }}" alt="Agentee Business Network">
              
              <div class="hero__image-overlay" aria-hidden="true"></div>
            </div>

            <div class="hero__badge">
              <span class="hero__badge-number">Agentee B.N.</span>
              <p class="hero__badge-text">Collaborative Network.</p>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- Carousel Pagination and Controls -->
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </section>

<!-- One Group 5 Specialized Divisions -->
 <section class="section ecosystem" id="divisions">
    <div class="container ecosystem__inner">
        <div class="ecosystem__intro reveal reveal--left">
            <span class="section__eyebrow">
                The CodNesta Ecosystem
            </span>

            <h2 class="section__title">
                One Group. Five Specialized Divisions.
            </h2>

            <p class="section__text">
                Each CodNesta division focuses on a distinct area of need,
                while sharing one coordinated mission: turning knowledge,
                technology and collaboration into practical value.
            </p>

            <a class="button button--secondary" href="{{url_for('divisions.index')}}">
                Explore All Divisions
            </a>
        </div>

        <div class="ecosystem__list">
            <article class="division-row reveal reveal--right reveal-delay-1">
                <span class="division-row__number">01</span>

                <div>
                    <h3>CodNesta Academy</h3>
                    <p>
                        Practical learning, mentorship, internships and
                        talent-development pathways.
                    </p>
                </div>

                <a href="{{ url_for('divisions.index') }}#academy" aria-label="Explore CodNesta Academy">→</a>
            </article>

            <article class="division-row reveal reveal--right reveal-delay-2">
                <span class="division-row__number">02</span>

                <div>
                    <h3>CodNesta Lab</h3>
                    <p>
                        Research, experimentation, product validation and
                        responsible innovation.
                    </p>
                </div>

                <a href="{{ url_for('divisions.index') }}#lab" aria-label="Explore CodNesta Lab">→</a>
            </article>

            <article class="division-row reveal reveal--right reveal-delay-3">
                <span class="division-row__number">03</span>

                <div>
                    <h3>CodNesta Digital</h3>
                    <p>
                        Websites, software, digital products and practical
                        technology solutions.
                    </p>
                </div>

                <a href="{{ url_for('divisions.index') }}#digital" aria-label="Explore CodNesta Digital">→</a>
            </article>

            <article class="division-row reveal reveal--right reveal-delay-4">
                <span class="division-row__number">04</span>

                <div>
                    <h3>CodNesta Consultancy</h3>
                    <p>
                        Assessment, strategy, advisory support and
                        professional guidance.
                    </p>
                </div>

                <a href="{{ url_for('divisions.index') }}#consultancy" aria-label="Explore CodNesta Consultancy">→</a>
            </article>

            <article class="division-row reveal reveal--right reveal-delay-5">
                <span class="division-row__number">05</span>

                <div>
                    <h3>CodNesta Community</h3>
                    <p>
                        Opportunities, events, outreach, collaboration and
                        meaningful community engagement.
                    </p>
                </div>

                <a href="{{ url_for('divisions.index') }}#community" aria-label="Explore CodNesta Community">→</a>
            </article>
        </div>
    </div>
</section>

<!-- WHY WE EXIST -->
 <section class="purpose-section" id="about">
    <div class="purpose-section__wave" aria-hidden="true">

    <svg
        class="purpose-section__wave-gold"
        viewBox="0 0 1440 140"
        preserveAspectRatio="none"
    >
        <path
            d="M0,88
               C220,120 380,45 560,80
               C760,118 940,42 1110,70
               C1260,94 1360,45 1440,60
               L1440,140
               L0,140
               Z"
        />
    </svg>

    <svg
        class="purpose-section__wave-navy"
        viewBox="0 0 1440 140"
        preserveAspectRatio="none"
    >
        <path
            d="M0,82
               C180,118 300,38 470,76
               C640,112 790,48 960,78
               C1120,106 1270,58 1440,82
               L1440,140
               L0,140
               Z"
        />
    </svg>

</div>
    <div class="container purpose-section__inner">
        <div class="purpose-section__visual reveal reveal--left-scale image-reveal">
            <img
                src="{{ url_for('static', filename='images/hero-mobile1.jpg') }}"
                alt="Learners collaborating during a practical technology session"
            >

            <div class="purpose-section__label">
                <span>From theory</span>
                <strong>to practical capability</strong>
            </div>
        </div>

        <div class="purpose-section__content reveal reveal--right">
            <span class="section__eyebrow">
                Why CodNesta Exists
            </span>

            <h2 class="section__title">
                Knowledge Should Lead to Capability.
                Technology Should Create Opportunity.
            </h2>

            <p>
                Too often, academic learning remains disconnected from
                practical experience, useful technology remains inaccessible,
                and promising ideas lack the support required to become
                meaningful solutions.
            </p>

            <p>
                CodNesta Group helps close these gaps through practical
                learning, digital solutions, responsible innovation,
                professional support and community opportunity.
            </p>

            <div class="purpose-section__outcomes">
                <div class="purpose-outcome">
                    <span>01</span>
                    <strong>Learn Practically</strong>
                </div>

                <div class="purpose-outcome">
                    <span>02</span>
                    <strong>Build Useful Solutions</strong>
                </div>

                <div class="purpose-outcome">
                    <span>03</span>
                    <strong>Create Lasting Impact</strong>
                </div>
            </div>

            <a class="button button--secondary" href="{{url_for('about.index')}}">
                Learn More About CodNesta
            </a>
        </div>
    </div>
</section>

<!-- Featured Content -->
 <section class="section featured-programs" id="programs">
    <div class="container">

        <div class="featured-programs__header reveal reveal--up">
            <div>
                <span class="section__eyebrow">
                    Featured Programs
                </span>

                <h2 class="section__title">
                    Pathways Built Around Practical Preparation.
                </h2>
            </div>

            <p class="section__text">
                CodNesta programs are designed around real challenges
                affecting emerging talent, with practical pathways that
                support preparation, skill development and professional growth.
            </p>
        </div>

        <div class="featured-programs__list">

            <article class="featured-program reveal reveal--left">
                <div class="featured-program__image image-reveal">
                    <img
                        src="{{ url_for('static', filename='images/programs/intern-in-advance.jpg') }}"
                        alt="Students developing practical professional skills"
                    >
                </div>

                <div class="featured-program__content">
                    <span class="featured-program__number">01</span>

                    <span class="featured-program__category">
                        Career Preparation
                    </span>

                    <h3>Intern in Advance Pathway</h3>

                    <p>
                        A proactive pathway that helps students begin
                        developing practical skills before the pressure,
                        congestion and uncertainty of the official internship period.
                    </p>

                    <a class="featured-program__link" href="{{ url_for('opportunities.index') }}#intern-in-advance">
                        Explore Intern in Advance
                        <span aria-hidden="true">→</span>
                    </a>
                </div>
            </article>

            <article class="featured-program featured-program--reverse reveal reveal--right">
                <div class="featured-program__image image-reveal">
                    <img
                        src="{{ url_for('static', filename='images/programs/predev.jpg') }}"
                        alt="Emerging developers learning practical technology skills"
                    >
                </div>

                <div class="featured-program__content">
                    <span class="featured-program__number">02</span>

                    <span class="featured-program__category">
                        Talent Development
                    </span>

                    <h3>Pre-Dev Pathway</h3>

                    <p>
                        A structured preparation pathway that helps emerging
                        developers build the foundations, discipline and
                        practical readiness required for advanced development programs.
                    </p>

                    <a
                        class="featured-program__link"
                        href="{{ url_for('predev.index') }}#predev-application"
                    >
                        Explore Pre-Dev
                        <span aria-hidden="true">→</span>
                    </a>
                </div>
            </article>

        </div>

    </div>
</section>

<!-- Flagship pathway -->
 <section class="section predev-feature" id="predev">
    <div class="container predev-feature__inner">

        <div class="predev-feature__content reveal reveal--left">
            <span class="section__eyebrow">
                Flagship Pathway
            </span>

            <h2 class="section__title">
                Turning Potential Into Practical Capability.
            </h2>

            <p class="predev-feature__text">
                PRE-DEV is CodNesta’s flagship preparation pathway,
                helping aspiring developers build practical skills,
                professional discipline and real-world readiness before
                progressing into advanced software development and
                technology careers.
            </p>

            <div class="predev-feature__highlights">
                <span>Practical Learning</span>
                <span>Industry-Focused Training</span>
                <span>Community-Driven Growth</span>
                <span>Remote</span>
                <span>Onsite</span>
            </div>

            <a
                class="button button--primary"
                href="{{ url_for('predev.index') }}#predev-application"
                target="_self"
                rel="noopener noreferrer"
            >
                Apply for PRE-DEV
            </a>
        </div>

       <div class="predev-feature__visual reveal reveal--right-scale image-reveal">

    <div
        class="predev-feature__blue-panel"
        aria-hidden="true"
    ></div>

    <div class="predev-feature__image image-reveal">
        <img
            src="{{ url_for('static', filename='images/programs/predev-cohort-1.jpg') }}"
            alt="Participants during PRE-DEV Cohort 1"
        >
    </div>

    <div class="predev-feature__impact reveal reveal--up reveal-delay-3">
        <span class="predev-feature__number">
            200+
        </span>

        <strong>
            Participants Trained
        </strong>

        <p>
            PRE-DEV Cohort 1
        </p>
    </div>

</div>

    </div>
</section>

<!--  CODNESTA LAB — EXPERIMENTAL PRODUCTS -->
 <section class="section innovation-lab" id="lab">
    <div class="container">

        <div class="innovation-lab__header reveal reveal--up">
            <div>
                <span class="section__eyebrow">
                    CodNesta Lab
                </span>

                <h2 class="section__title">
                    Building Tomorrow’s Solutions.
                </h2>
            </div>

            <p class="section__text">
                CodNesta Lab explores ideas, tests practical concepts
                and develops experimental products designed around
                real problems and emerging opportunities.
            </p>
        </div>

        <div class="innovation-lab__grid">

            <article class="experiment-card experiment-card--gold reveal reveal--right-scale reveal-delay-2">
                <div class="experiment-card__top">
                    <span class="experiment-card__status">
                        Experimental
                    </span>

                    <span class="experiment-card__number">
                        02
                    </span>
                </div>

                <div class="experiment-card__content">
                    <span class="experiment-card__division">
                        CodNesta Lab
                    </span>

                    <h3>
                        Agentee
                    </h3>

                    <p>
                        An Experimental Gig platform and collective employment
                        for quality output,backup and continuity aimed at helping
                        organisations, SMEs, startups, social enterprise, schools 
                        and other employers discover and hire talent differently 
                        while allowing talents the oportunity to gig responsibly.
                    </p>
                </div>

                <div class="experiment-card__footer">
                    <span>
                        Research technology
                    </span>

                     <div class="predev-feature__highlights">  
                        <span>Comming soon</span>
                    </div>
                </div>
            </article>

             <article class="experiment-card reveal reveal--left-scale reveal-delay-1" id="agentee-card">
                <div class="experiment-card__top">
                    <span class="experiment-card__status">
                        Experimental
                    </span>

                    <span class="experiment-card__number">
                        01
                    </span>
                </div>

                <div class="experiment-card__content">
                    <span class="experiment-card__division">
                        CodNesta Lab
                    </span>

                    <h3>
                        Agentee B. N.
                    </h3>

                    <p>
                        A collaborative network connecting startups, SMEs, NGOs, and skilled professionals
                        to create opportunities, partnerships, and pathways to employment. Agentee Business
                        Network is an experimental initiative exploring new models of collaboration and
                        decentralized employment within the CodNesta ecosystem.
                    </p>
                </div>

                <div class="experiment-card__footer">
                    <span>
                      Business Network
                    </span>

                    <a
                            href="mailto:contact@codnesta.com"
                            class="button button--primary" >
                            I need more information ->
                     </a>

                    
                </div>
            </article>

        </div>

        <div class="innovation-lab__note reveal reveal--up reveal-delay-3">
            <span aria-hidden="true">●</span>

            <p>
                These products are currently under experimentation as a response to emerging
                needs and opportunities. This is CodNesta's innovative approach to solving
                real-world problems.
            </p>
        </div>

    </div>
</section>

<!-- Impact Section -->
 <section class="section impact-section" id="impact">
    <div class="container">

        <div class="impact-section__header reveal reveal--up">
            <div>
                <span class="section__eyebrow">Our Impact <div class="impact-card__icon">
            </div></span>

                <h2 class="section__title">
                    Progress Measured Through People, Programs and Possibility.
                </h2>
            </div>

            <p class="section__text">
                CodNesta is building practical pathways that help people
                develop relevant skills, access opportunities and contribute
                meaningfully to the future of technology.
            </p>
        </div>

        <div class="impact-section__content">

            <article class="impact-feature reveal reveal--left-scale">
                <div class="impact-feature__number">250+</div>

                <div class="impact-feature__body">
                    <span class="impact-feature__label">
                        Participants Trained
                    </span>

                    <p>
                        Through PRE-DEV Cohort 1, participants received
                        practical preparation designed to strengthen
                        confidence, technical capability and readiness
                        for future opportunities.
                    </p>
                </div>
            </article>

            <div class="impact-stats">

                <article class="impact-stat reveal reveal--up reveal-delay-1">
                    <span class="impact-stat__number">5</span>

                    <div>
                        <h3>Specialized Divisions</h3>

                        <p>
                            Working across education, technology,
                            innovation and digital opportunity.
                        </p>
                    </div>
                </article>

                <article class="impact-stat reveal reveal--up reveal-delay-2">
                    <span class="impact-stat__number">2</span>

                    <div>
                        <h3>Flagship Programs</h3>

                        <p>
                            PRE-DEV and Intern in Advance support
                            practical development and preparation.
                        </p>
                    </div>
                </article>

                <article class="impact-stat reveal reveal--up reveal-delay-3">
                    <span class="impact-stat__number">2</span>

                    <div>
                        <h3>Products in Development</h3>

                        <p>
                            SnapCode and Agentee are being explored
                            through CodNesta Lab.
                        </p>
                    </div>
                </article>

                <article class="impact-stat reveal reveal--up reveal-delay-4">
                    <span class="impact-stat__number">1</span>

                    <div>
                        <h3>Growing Community</h3>

                        <p>
                            A collaborative network of learners,
                            builders, mentors and professionals.
                        </p>
                    </div>
                </article>

            </div>

        </div>

    </div>
</section>

<!-- WHO WE SERVE -->
 <section class="section who-we-serve" id="who-we-serve">
    <div class="container">

       <div class="who-we-serve__header reveal reveal--up">
            <span class="section__eyebrow">
                Who We Serve
            </span>

            <h2 class="section__title">
                Supporting People and Organizations at Different Stages of Growth.
            </h2>

            <p class="section__text">
                Whether you are beginning your journey, strengthening your
                workforce or looking to collaborate, CodNesta creates
                opportunities designed around practical outcomes.
            </p>
        </div>

        <div class="who-we-serve__grid">

            <article class="audience-card reveal reveal--left-scale reveal-delay-1">
                <div class="audience-card__number">01</div>

                <div class="audience-card__content">
                    <h3> <div class="serve-card__icon">
                </div>Students</h3>

                    <p>
                        Build practical skills, gain experience and prepare for
                        internships, employment and entrepreneurship.
                    </p>
                </div>

                <a href="{{ url_for('programs.index') }}" class="audience-card__link">
                    Explore Student Programs
                    <span>→</span>
                </a>
            </article>

            <article class="audience-card reveal reveal--right-scale reveal-delay-2">
                <div class="audience-card__number">02</div>

                <div class="audience-card__content">
                    <h3><div class="serve-card__icon">
                    Professionals 
                </div></h3>

                    <p>
                        Continue learning through industry-focused programs,
                        workshops and emerging technology initiatives.
                    </p>
                </div>

                <a href="{{url_for('programs.index')}}#certified-developer" class="audience-card__link">
                    Explore Professional Growth
                    <span aria-hidden="true">→</span>
                </a>
            </article>

            <article class="audience-card reveal reveal--left-scale reveal-delay-3">
                <div class="audience-card__number">03</div>

                <div class="audience-card__content">
                    <h3><div class="serve-card__icon">
                </div>Educational Institutions</h3>

                    <p>
                        Partner with us to strengthen practical learning,
                        innovation and student development.
                    </p>
                </div>

                <a href="{{url_for('opportunities.index')}}#partnerships" class="audience-card__link">
                    Explore Education Partnerships
                    <span aria-hidden="true">→</span>
                </a>
            </article>

            <article class="audience-card reveal reveal--right-scale reveal-delay-4">
                <div class="audience-card__number">04</div>

                <div class="audience-card__content">
                    <h3> <div class="serve-card__icon">
                    Organizations
                </div></h3>

                    <p>
                        Collaborate with CodNesta to develop digital solutions,
                        training initiatives and innovation projects.
                    </p>
                </div>

               <a href="{{url_for('work_with_us.index')}}" class="audience-card__link">
                    Work With CodNesta
                    <span aria-hidden="true">→</span>
                </a>
            </article>

        </div>

    </div>
</section>

{% endblock %}

{% block extra_js %}
<!-- Swiper.js Script & Initialization -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const heroSwiper = new Swiper('.hero-swiper', {
        loop: true,
        speed: 800,
        autoplay: {
          delay: 6000,
          disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    });
  </script>
{% endblock %}