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

{% block title %}
Divisions - CodNesta Group
{% endblock %}

{% block meta_description %}
Learn about codnesta group divisions and how we can help you with your business needs.
{% endblock %}

{% block meta_keywords %}
divisions, codnesta, business, services
{% 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/divisions.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="divisions-page">

<!-- =========================================
     DIVISIONS HERO
========================================== -->
<section class="page-hero divisions-hero" id="divisions-hero">

    <!-- Background artwork -->
    <div class="page-hero__background-word" aria-hidden="true">
        OUR<br>DIVISIONS
    </div>

    <div class="container page-hero__container">

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

            <h1 class="page-hero__title">
                Different Expertise.
                <span>One Mission.</span>
            </h1>

            <p class="page-hero__description">
                CodNesta is organised into specialised divisions focused on
                education, digital solutions, consultancy, innovation, and
                community development. Each division serves a distinct purpose
                while contributing to one shared mission of building practical
                solutions and creating lasting impact.
            </p>

            <div class="page-hero__actions">

                <a href="#academy" class="button button--primary">
                    Explore Our Divisions
                </a>

                <a href="/contact" class="button button--secondary">
                    Contact Us
                </a>

            </div>

        </div>

    </div>

</section>

<!-- =========================================
     CODNESTA ACADEMY
     FIRST DIVISION
========================================== -->
<section class="division division--academy" id="academy">

    <div class="container reveal reveal--up-scale">

        <!-- Academy Main Introduction -->
        <div class="academy-intro reveal reveal--up">

            <span class="academy-intro__eyebrow">
                CodNesta Academy
            </span>

            <h2 class="academy-intro__title">
                Building Skills
                <span>That Last.</span>
            </h2>

            <p class="academy-intro__description">
                CodNesta Academy equips learners with practical knowledge,
                real project experience, professional guidance, and a
                structured development pathway designed to help them grow
                from learners into confident technology professionals.
            </p>

        </div>


        <!-- Simple Learning Philosophy -->
        <div class="academy-philosophy-simple">

            <div class="academy-philosophy-simple__heading reveal reveal-delay-3">

                <span class="academy-intro__eyebrow">
                    Our Learning Philosophy
                </span>

                <h3>
                    How learners grow at CodNesta Academy
                </h3>

            </div>


            <div class="academy-philosophy-badges">

                <article class="academy-philosophy-badge reveal reveal-delay-7">

                    <span class="academy-philosophy-badge__number">
                        01
                    </span>

                    <h4>
                        Learn
                    </h4>

                </article>


                <span class="academy-philosophy-line"></span>


                <article class="academy-philosophy-badge reveal reveal-delay-5">

                    <span class="academy-philosophy-badge__number">
                        02
                    </span>

                    <h4>
                        Practise
                    </h4>

                </article>


                <span class="academy-philosophy-line"></span>


                <article class="academy-philosophy-badge reveal reveal--up">

                    <span class="academy-philosophy-badge__number">
                        03
                    </span>

                    <h4>
                        Build</h4>

                </article>


                <span class="academy-philosophy-line"></span>


                <article class="academy-philosophy-badge reveal reveal--up">

                    <span class="academy-philosophy-badge__number">
                        04
                    </span>

                    <h4>
                        Improve
                    </h4>

                </article>


                <span class="academy-philosophy-line"></span>


                <article class="academy-philosophy-badge reveal reveal-delay-1">

                    <span class="academy-philosophy-badge__number">
                        05
                    </span>

                    <h4>
                        Progress
                    </h4>

                </article>

            </div>

        </div>


        <!-- Academy CTA -->
        <section class="academy-cta reveal reveal-delay-4">

            <span class="academy-cta__eyebrow">
                Ready to Begin?
            </span>

            <h3 class="academy-cta__title">
                Start Your Learning Journey
                with CodNesta Academy.
            </h3>

            <p class="academy-cta__description">
                Join Pre-Dev and take the first step toward building practical
                skills, gaining experience, and preparing for future
                opportunities within the CodNesta ecosystem.
            </p>

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

        </section>

    </div>

</section>

<!-- CODNESTA DIGITAL DIVISION -->

<main class="division-page">

    <!-- Division Hero Section -->
    <section class="division-hero reveal reveal--left-scale">
        <div class="division-hero-container">

            <div class="division-hero-content">
                <span class="division-label">CodNesta Group Division</span>

                <h1>CodNesta Digital</h1>

                <p>
                    We design and develop practical digital solutions that help
                    businesses, organisations and individuals build a stronger
                    presence, improve their operations and reach more people.
                </p>

                <div class="division-hero-actions">
                    <a href="#digital-services" class="primary-btn">
                        Explore Our Services
                    </a>

                    <a href="#digital-enquiry" class="secondary-btn">
                        Start a Project
                    </a>
                </div>
            </div>

            <div class="division-hero-visual" aria-hidden="true">
                <span>DIGITAL</span>
            </div>

        </div>
    </section>


    <!-- Introduction Section -->
    <section class="division-introduction">
        <div class="section-container">

            <div class="section-heading">
                <span class="academy-intro__eyebrow">Building for the Digital World</span>

                <h2>Turning ideas into useful <div class="intro-text-color">digital experiences</div> </h2>

                <p>
                    CodNesta Digital supports clients from the early idea stage
                    through design, development, deployment and continuous
                    improvement.
                </p>
            </div>

            <div class="digital-intro-grid">

                <article class="digital-intro-card reveal reveal-delay-6">
                    <span class="card-number">01</span>
                    <h3>Understand</h3>
                    <p>
                        We study your goals, users, challenges and existing
                        processes before recommending a solution.
                    </p>
                </article>

                <article class="digital-intro-card">
                    <span class="card-number">02</span>
                    <h3>Design</h3>
                    <p>
                        We create clear interfaces and digital experiences that
                        are easy to understand and use.
                    </p>
                </article>

                <article class="digital-intro-card">
                    <span class="card-number">03</span>
                    <h3>Develop</h3>
                    <p>
                        We build reliable websites, platforms and software
                        solutions suited to your needs.
                    </p>
                </article>

                <article class="digital-intro-card">
                    <span class="card-number">04</span>
                    <h3>Improve</h3>
                    <p>
                        We support testing, maintenance and continuous
                        improvement after launch.
                    </p>
                </article>

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


    <!-- Digital Services Section -->
    <section class="digital-services " id="digital-services">
        <div class="section-container">

            <div class="section-heading">
                <span class="academy-intro__eyebrow">What We Do</span>
                <h2>Digital solutions built around real needs</h2>
                <p>
                    Our services combine technology, creativity and practical
                    business understanding.
                </p>
            </div>

            <div class="digital-services-grid">

                <article class="digital-service-card reveal reveal-delay-3">
                    <div class="service-icon">
                         <i class="fa-solid fa-briefcase"></i>
                    </div>

                    <h3>Website Development</h3>

                    <p>
                        Professional, responsive and user-friendly websites for
                        businesses, institutions, <div class="intro-text-color">organisations</div> and personal
                        brands.
                    </p>

                    <a href="#digital-enquiry">
                        Request a Website
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>
                </article>


                <article class="digital-service-card reveal reveal--right">
                    <div class="service-icon">
                        <i class="fa-solid fa-code"></i>
                    </div>

                    <h3>Web Application Development</h3>

                    <p>
                        Custom web-based systems that support operations,
                        communication, data management and service delivery.
                    </p>

                    <a href="#digital-enquiry">
                        Discuss Your Application
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>
                </article>


                <article class="digital-service-card reveal reveal--right">
                    <div class="service-icon">
                        <i class="fa-solid fa-mobile-screen-button"></i>
                    </div>

                    <h3>Mobile-Friendly Solutions</h3>

                    <p>
                        Digital platforms designed to work smoothly across
                        smartphones, tablets and desktop devices.
                    </p>

                    <a href="#digital-enquiry">
                        Build a Mobile Solution
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>
                </article>


                <article class="digital-service-card reveal reveal--right">
                    <div class="service-icon">
                        <i class="fa-solid fa-pen-ruler"></i>
                    </div>

                    <h3>UI and UX Design</h3>

                    <p>
                        Clean and thoughtful interfaces that improve usability,
                        accessibility and the overall customer experience.
                    </p>

                    <a href="#digital-enquiry">
                        Design Your Product
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>
                </article>


                <article class="digital-service-card reveal reveal--right">
                    <div class="service-icon">
                        <i class="fa-solid fa-gears"></i>
                    </div>

                    <h3>Business Process Automation</h3>

                    <p>
                        Digital tools that reduce repetitive work, organise
                        information and improve operational efficiency.
                    </p>

                    <a href="#digital-enquiry">
                        Automate a Process
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>
                </article>


                <article class="digital-service-card reveal reveal--left">
                    <div class="service-icon">
                        <i class="fa-solid fa-screwdriver-wrench"></i>
                    </div>

                    <h3>Maintenance and Support</h3>

                    <p>
                        Ongoing technical support, updates, performance
                        improvement and problem resolution for digital products.
                    </p>

                    <a href="#digital-enquiry">
                        Get Technical Support
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>
                </article>

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


    <!-- Who We Serve Section -->
    <section class="digital-clients  reveal reveal--left-scale">
        <div class="section-container">

            <div class="section-heading">
                <span class="academy-intro__eyebrow">Who We Serve</span>
                <h2>Technology for <div class="intro-text-color">organisations</div> at every stage</h2>
            </div>

            <div class="digital-clients-grid">

                <article class="client-card reveal reveal--up">
                    <i class="fa-solid fa-store"></i>
                    <h3>Small Businesses</h3>
                    <p>
                        Establish a professional online presence and improve
                        customer access to your services.
                    </p>
                </article>

                <article class="client-card reveal reveal--left">
                    <i class="fa-solid fa-building"></i>
                    <h3>Growing Companies</h3>
                    <p>
                        Introduce digital systems that support expansion,
                        coordination and better service delivery.
                    </p>
                </article>

                <article class="client-card reveal reveal--rotate">
                    <i class="fa-solid fa-graduation-cap"></i>
                    <h3>Educational Institutions</h3>
                    <p>
                        Improve academic, administrative and communication
                        processes through practical digital tools.
                    </p>
                </article>

                <article class="client-card reveal reveal--rotate">
                    <i class="fa-solid fa-people-group"></i>
                    <h3>Non-Profit Organisations</h3>
                    <p>
                        Build platforms that support awareness, community
                        programmes and stakeholder engagement.
                    </p>
                </article>

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


    <!-- Our Process Section -->
<section class="digital-process  reveal reveal--left">
    <div class="section-container reveal reveal--up-scale">

        <div class="section-heading">
            <span class="academy-intro__eyebrow">Our Process</span>
            <h2>How we bring your project to life</h2>
        </div>

        <div class="process-badges">

            <div class="process-badge reveal reveal-delay-5">
                <span>01</span>
                <h3>Consultation</h3>
            </div>

            <div class="process-line"></div>

            <div class="process-badge reveal reveal-delay-6">
                <span>02</span>
                <h3>Planning</h3>
            </div>

            <div class="process-line"></div>

            <div class="process-badge reveal reveal-delay-2">
                <span>03</span>
                <h3>Design</h3>
            </div>

            <div class="process-line"></div>

            <div class="process-badge reveal reveal-delay-4">
                <span>04</span>
                <h3>Development</h3>
            </div>

            <div class="process-line"></div>

            <div class="process-badge reveal reveal-delay-5">
                <span>05</span>
                <h3>Launch</h3>
            </div>

        </div>

    </div>
</section>


    <!-- Call to Action / Enquiry Section -->
    <section class="digital-enquiry" id="digital-enquiry">
        <div class="section-container reveal reveal--left">

            <div class="digital-enquiry-content">
                <span class="academy-intro__eyebrow ">Start Your Digital Project</span>
                <h2>Have an idea or digital challenge?</h2>
                <p>
                    Tell us what you are trying to build, improve or automate.
                    Our team will help you identify the right digital solution.
                </p>

                <div class="digital-enquiry-actions  reveal reveal--up-scale">
                    <a href="mailto:contact@codnesta.com" class="primary-btn">
                        <i class="fa-solid fa-envelope"></i>
                        Contact CodNesta Digital
                    </a>

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

        </div>
    </section>

<!-- =========================================
     CODNESTA LAB, COMMUNITY AND CONSULTANCY
========================================== -->
<section
    class="division division--lab-community "
    id="lab-community"
>
    <div class="container">

        <div class="lab-community-grid">

            <!-- CodNesta Lab -->
            <article class="lab-community-card lab-community-card--lab  reveal reveal--left-scale" id="lab">

                <span class="lab-community-card__eyebrow">
                    Innovation and Partnerships
                </span>

                <h2 class="lab-community-card__title">
                    CodNesta Lab
                </h2>

                <p class="lab-community-card__description">
                    A space for exploring ideas, developing innovative
                    solutions, and collaborating with organisations and
                    partners on meaningful technology projects.
                </p>

                <a
                    href="mailto:partners@codnesta.com"
                    class="lab-community-card__link"
                >
                    partners@codnesta.com
                </a>

            </article>


            <!-- CodNesta Community -->
            <article class="lab-community-card lab-community-card--community reveal reveal--left-scale" id="community">

                <span class="lab-community-card__eyebrow">
                    Open to Pre-Dev Participants
                </span>

                <h2 class="lab-community-card__title">
                    CodNesta Community
                </h2>

                <p class="lab-community-card__description">
                    A collaborative environment where Pre-Dev participants
                    connect, learn together, share ideas, and grow through
                    continued engagement within the CodNesta ecosystem.
                </p>

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

            </article>


            <!-- CodNesta Consultancy -->
            <article class="lab-community-card lab-community-card--consultancy reveal reveal--left-scale" id="consultancy">

                <span class="lab-community-card__eyebrow">
                    Strategy and Professional Guidance
                </span>

                <h2 class="lab-community-card__title">
                    CodNesta Consultancy
                </h2>

                <p class="lab-community-card__description">
                    We support businesses, institutions, and organisations
                    with practical technology guidance, digital strategy,
                    project planning, and solution recommendations.
                </p>

                <a
                    href="mailto:contact@codnesta.com"
                    class="lab-community-card__link"
                >
                    Request Consultation
                </a>

            </article>

        </div>

    </div>
</section>

</main>
</main>

{% endblock %}