{% extends "base.html" %} {% load static %} {% block content %} {%if messages%}
<div class="mt-3">
  {% for message in messages %}
  <div class="alert alert-success text-center" role="alert">{{ message }}</div>
  {% endfor %}
</div>
{% endif %}
<!-- Hero Section -->
<section
  class="hero-section d-flex align-items-center"
  data-aos="fade-right"
  data-aos-delay="400"
>
  <div class="container">
    <div class="row align-items-center h-100">
      <!-- Left Side: Text Content -->
      <div class="col-md-7 col-12 text-md-start text-center">
        <h1 class="display-4 fw-bold">
          Empowering Your Business with Innovative Tech Solutions
        </h1>
        <p class="lead text-muted">
          We bring creativity and technology together to drive your business
          forward. Let’s build a smarter future, together.
        </p>
        <!-- Core Values as a Paragraph with Icons -->
        <p class="fw-bold text-muted lead">
          Integrity . Competence . Responsibility
        </p>
        <a
          href="{% url 'onboarding' %}"
          class="btn btn-secondary btn-lg mt-3 rounded-pill me-3"
          >Get Started</a
        >
        <a
          href="tel:+254794933942"
          class="btn btn-outline-primary rounded-pill mt-3 py-2"
          >Call: +254 794 933 942</a
        >
      </div>

      <!-- Right Side: Image Content -->
      <div
        class="col-md-5 col-12 d-flex justify-content-center position-relative"
      >
        <div class="image-wrapper position-relative">
          <!-- Background Logo -->
          <img
            src="{% static 'img/secondary-logo.png' %}"
            alt="Background Logo"
            class="hero-bg-logo position-absolute top-50 start-50 translate-middle img-fluid"
          />
          <!-- Main Image: Person with Laptop -->
          <img
            src="{% static 'img/hero-1.png' %}"
            alt="Person holding a laptop"
            class="hero-main-image position-relative img-fluid"
          />
        </div>
      </div>
    </div>
  </div>
</section>

<!-- About Section -->
<section
  id="about-section"
  class="text-center py-5"
  data-aos="fade-up"
  data-aos-delay="400"
>
  <div class="container overflow-hidden">
    <!-- Section Heading and Description -->
    <h2 class="section-title">Who we are</h2>
    <p
      class="lead text-muted mx-auto mb-5"
      style="max-width: 700px"
      data-aos="fade-right"
      data-aos-delay="500"
    >
      Janja Programmers is a tech-solutions company built by passionate
      individuals, dedicated to helping our clients continuously create value
      for their customers. We believe in transforming ideas into reality through
      technology.
    </p>

    <!-- Statistic Cards -->
    <div class="row justify-content-center mx-0">
      <div
        class="col-lg-3 col-md-4 col-6 mb-4"
        data-aos="fade-right"
        data-aos-delay="500"
      >
        <div
          class="stat-card p-4 rounded shadow-sm bg-primary text-white text-center"
        >
          <h3 class="display-4" id="projects-completed">0</h3>
          <p class="lead mb-0">Projects Completed</p>
        </div>
      </div>
      <div
        class="col-lg-3 col-md-4 col-6 mb-4"
        data-aos="fade-left"
        data-aos-delay="600"
      >
        <div
          class="stat-card p-4 rounded shadow-sm bg-secondary text-white text-center"
        >
          <h3 class="display-4" id="happy-clients">0</h3>
          <p class="lead mb-0">Happy Clients</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Services Section -->
<section
  id="what-we-do"
  class="text-center py-5"
  data-aos="fade-up"
  data-aos-delay="400"
>
  <div class="container overflow-hidden">
    <!-- Section Heading and Description -->
    <h2 class="section-title">What we do</h2>
    <p class="lead text-muted mx-auto mb-5" style="max-width: 700px">
      We help businesses save time and increase sales by automating tasks and
      enhancing their online presence. Explore our services below to see how we
      can support your growth.
    </p>

    <!-- Service Cards -->
    <div class="row service-cards mx-0">
      <!-- Card 1: Web Development -->
      <div
        class="col-lg-4 col-md-6 col-12 mb-4"
        data-aos="fade-right"
        data-aos-delay="400"
      >
        <div class="card h-100 shadow">
          <div class="card-body">
            <h5 class="card-title">Web Development</h5>
            <p class="card-text">
              Partner with our expert web development team to expand your online
              presence with a dedicated, collaborative approach tailored to your
              business needs.
            </p>
            <a
              href="{% url 'web-development-detail' %}"
              class="btn btn-outline-primary"
              >View Service</a
            >
          </div>
        </div>
      </div>

      <!-- Card 2: Mobile App Development -->
      <div
        class="col-lg-4 col-md-6 col-12 mb-4"
        data-aos="fade-right"
        data-aos-delay="400"
      >
        <div class="card h-100 shadow">
          <div class="card-body">
            <h5 class="card-title">Mobile App Development</h5>
            <p class="card-text">
              Our team in Mombasa, Kenya, specializes in custom Android and iOS
              applications to enhance user engagement on mobile platforms.
            </p>
            <a
              href="{%url 'mobile-app-development-detail' %}"
              class="btn btn-outline-primary"
              >View Service</a
            >
          </div>
        </div>
      </div>

      <!-- Card 3: Management Information Systems -->
      <div
        class="col-lg-4 col-md-6 col-12 mb-4"
        data-aos="fade-right"
        data-aos-delay="400"
      >
        <div class="card h-100 shadow">
          <div class="card-body">
            <h5 class="card-title">Management Information Systems</h5>
            <p class="card-text">
              We offer comprehensive solutions, including ERP, healthcare, and
              school management systems, designed to improve business
              operations.
            </p>
            <a
              href="{%url 'management-information-systems-detail' %}"
              class="btn btn-outline-primary"
              >View Service</a
            >
          </div>
        </div>
      </div>

      <!-- Card 4: AI & ML Development -->
      <div
        class="col-lg-4 col-md-6 col-12 mb-4"
        data-aos="fade-left"
        data-aos-delay="400"
      >
        <div class="card h-100 shadow">
          <div class="card-body">
            <h5 class="card-title">AI & ML Development</h5>
            <p class="card-text">
              Unlock intelligent solutions with our AI and machine learning
              expertise, driving innovation and automation for your business.
            </p>
            <a
              href="{%url 'ai-ml-development-detail' %}"
              class="btn btn-outline-primary"
              >View Service</a
            >
          </div>
        </div>
      </div>

      <!-- Card 5: IT Consultancy -->
      <div
        class="col-lg-4 col-md-6 col-12 mb-4"
        data-aos="fade-left"
        data-aos-delay="400"
      >
        <div class="card h-100 shadow">
          <div class="card-body">
            <h5 class="card-title">IT Consultancy</h5>
            <p class="card-text">
              Accelerate your project development with our IT consultancy
              services, helping you launch MVPs faster and reduce costs.
            </p>
            <a
              href="{%url 'it-consultancy-detail' %}"
              class="btn btn-outline-primary"
              >View Service</a
            >
          </div>
        </div>
      </div>

      <!-- Card 6: Search Engine Optimization -->
      <div
        class="col-lg-4 col-md-6 col-12 mb-4"
        data-aos="fade-left"
        data-aos-delay="400"
      >
        <div class="card h-100 shadow">
          <div class="card-body">
            <h5 class="card-title">Search Engine Optimization</h5>
            <p class="card-text">
              Boost your online visibility with our SEO expertise, helping
              businesses reach more customers and drive growth.
            </p>
            <a
              href="{%url 'search-engine-optimization-detail' %}"
              class="btn btn-outline-primary"
              >View Service</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Product Development -->
<section
  id="product-development"
  class="text-center py-5"
  data-aos="fade-up"
  data-aos-delay="400"
>
  <div class="container">
    <!-- Section Heading and Description -->
    <h2 class="section-title">Startup Product Development</h2>
    <p
      class="lead text-muted mx-auto mb-5"
      style="max-width: 700px"
      data-aos="fade-right"
      data-aos-delay="500"
    >
      As a startup, building, testing, and refining your product can be a
      daunting task. That's where Janja Programmers comes in. We have the
      expertise and experience to help you bring your product to life, and
      ensure that it meets the needs and expectations of your customers.
    </p>

    <div class="row align-items-center">
      <div
        class="col-md-6 col-12 d-flex justify-content-center align-items-center mb-5"
      >
        <div
          class="image-wrapper w-100 h-100"
          data-aos="fade-right"
          data-aos-delay="500"
        >
          <img
            src="{% static 'img/startup-1.jpg' %}"
            alt="Product Development"
            class="img-fluid start-up-img"
          />
        </div>
      </div>

      <div class="col-md-6 col-12 text-start">
        <div class="feature" data-aos="fade-right" data-aos-delay="600">
          <h4 class="feature-title">Define</h4>
          <p class="feature-description">
            Our team of designers and developers will work with you to
            understand your vision for your product, and help you bring it to
            fruition through custom software development.
          </p>
        </div>

        <div class="feature" data-aos="fade-right" data-aos-delay="700">
          <h4 class="feature-title">Build & Test</h4>
          <p class="feature-description">
            We'll help you build a robust, scalable, and user-friendly product
            that meets your business goals. Once your product is built, we'll
            work with you to test and refine it, ensuring that it meets the
            highest quality standards.
          </p>
        </div>

        <div class="feature" data-aos="fade-right" data-aos-delay="800">
          <h4 class="feature-title">Iterate & Support</h4>
          <p class="feature-description">
            Throughout the process, we'll be there to support you and offer
            guidance, ensuring that your product is a success. With our help,
            you'll be able to confidently bring your product to market, knowing
            that it has been thoroughly tested and refined to meet the needs of
            your customers.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Tech Stack -->
<section
  id="tech-stack"
  class="text-center py-5"
  data-aos="fade-up"
  data-aos-delay="400"
>
  <div class="container tech-stack-container overflow-hidden">
    <!-- Section Heading and Description -->
    <h2 class="section-title">Our Tech Stack</h2>
    <div class="row justify-content-center text-center mx-0">
      <div
        class="col-4 col-sm-3 col-md-2 my-2"
        data-aos="fade-right"
        data-aos-delay="700"
      >
        <img
          src="{% static 'img/python-logo.png' %}"
          alt="Python"
          class="tech-icon"
        />
      </div>
      <div
        class="col-4 col-sm-3 col-md-2 my-2"
        data-aos="fade-right"
        data-aos-delay="600"
      >
        <img
          src="{% static 'img/js-logo.png' %}"
          alt="JavaScript"
          class="tech-icon"
        />
      </div>
      <div
        class="col-4 col-sm-3 col-md-2 my-2"
        data-aos="fade-right"
        data-aos-delay="500"
      >
        <img
          src="{% static 'img/django-logo.png' %}"
          alt="Django"
          class="tech-icon"
        />
      </div>
      <div
        class="col-4 col-sm-3 col-md-2 my-2"
        data-aos="fade-left"
        data-aos-delay="500"
      >
        <img
          src="{% static 'img/react-logo.png' %}"
          alt="React"
          class="tech-icon"
        />
      </div>
      <div
        class="col-4 col-sm-3 col-md-2 my-2"
        data-aos="fade-left"
        data-aos-delay="600"
      >
        <img
          src="{% static 'img/flutter-logo.png' %}"
          alt="Flutter"
          class="tech-icon"
        />
      </div>
      <div
        class="col-4 col-sm-3 col-md-2 my-2"
        data-aos="fade-left"
        data-aos-delay="700"
      >
        <img
          src="{% static 'img/react-native-logo.png' %}"
          alt="React Native"
          class="tech-icon"
        />
      </div>
    </div>
  </div>
</section>

{% endblock %}