{% extends "base.html" %} {% block main %}

<main>
  <!-- Hero Section -->
  <section
    class="hero-section"
    style="position: relative; text-align: center; padding: 60px 20px"
  >
    <!-- ✨ Floating Shapes -->
    <div class="floating-shape one"></div>
    <div class="floating-shape two"></div>

    <h1 data-aos="fade-up" id="dynamic-headline"></h1>
    <p data-aos="fade-up" data-aos-delay="200">
      We specialize in delivering Cloud and DevOps consulting services tailored
      to your unique business needs.
    </p>
    <a
      href="{{ url_for('services') }}"
      class="btn btn-primary mt-3"
      data-aos="zoom-in"
      data-aos-delay="400"
    >
      Explore Our Services
    </a>
  </section>

  <!-- add demo -->
  <section style="background: #f8f9fa; padding: 60px 20px; text-align: center">
    <h2
      style="
        color: #1b1b1b;
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 10px;
      "
    >
      Drive More Sales and Deliver an Effortless Experience
    </h2>
    <h1
      style="
        color: #005f73;
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 20px;
      "
    >
      Live Chat Customer Service Software
    </h1>
    <p
      style="
        color: #333;
        font-size: 18px;
        max-width: 700px;
        margin: 0 auto 30px;
      "
    >
      CDC’s highly effective solution for cross-channel interactive customer
      interactions.
    </p>
    <a
      href="/contact-form"
      style="
        display: inline-block;
        background-color: #005f73;
        color: white;
        padding: 15px 30px;
        border-radius: 30px;
        font-weight: 600;
        text-decoration: none;
      "
    >
      Request A Demo
    </a>
  </section>
  <!-- add demo -->

  <!-- Moving Image Section -->
  <section class="moving-image-container">
    <img
      src="{{ url_for('static', filename='images/image.jpg') }}"
      alt="Moving Image"
      class="moving-image"
    />
  </section>

  <!-- Services Highlights -->
  <section class="services-highlight">
    <h3>Our Key Services</h3>
    <div class="service-cards">
      <div class="card">
        <h4>Cloud Consulting</h4>
        <p>
          Cloud migration, strategy, and optimization tailored for your
          business.
        </p>
        <a href="{{ url_for('services') }}" class="btn-link">Learn More</a>
      </div>
      <div class="card">
        <h4>DevOps Solutions</h4>
        <p>
          CI/CD pipelines, automated infrastructure, and efficient delivery.
        </p>
        <a href="{{ url_for('services') }}" class="btn-link">Learn More</a>
      </div>
      <div class="card">
        <h4>Security & Compliance</h4>
        <p>
          Ensure security and compliance across your cloud and on-premise
          environments.
        </p>
        <a href="{{ url_for('services') }}" class="btn-link">Learn More</a>
      </div>
    </div>
  </section>

  <!-- me added -->
  <!-- Impact Stats Section -->
  <section
    class="stats-section"
    style="background: #f9f9f9; padding: 60px 20px; text-align: center"
  >
    <h2 data-aos="fade-up">Our Impact in Numbers</h2>
    <div
      class="stats-grid"
      style="
        display: flex;
        justify-content: center;
        gap: 40px;
        flex-wrap: wrap;
        margin-top: 40px;
      "
    >
      <div class="stat" data-aos="fade-up" data-aos-delay="100">
        <div
          class="counter"
          data-target="1000"
          style="font-size: 48px; font-weight: bold"
        >
          0
        </div>
        <p>Projects Delivered</p>
      </div>
      <div class="stat" data-aos="fade-up" data-aos-delay="200">
        <div
          class="counter"
          data-target="700"
          style="font-size: 48px; font-weight: bold"
        >
          0
        </div>
        <p>Happy Clients</p>
      </div>
      <div class="stat" data-aos="fade-up" data-aos-delay="300">
        <div
          class="counter"
          data-target="950"
          style="font-size: 48px; font-weight: bold"
        >
          0
        </div>
        <p>Supported Regions</p>
      </div>
    </div>
  </section>

  <!--add testimony-->
  <section class="testimonials-carousel">
    <h3>What Our Clients Say</h3>
    <div class="carousel">
      <div class="testimonial active">
        <p>CDC helped us streamline our cloud migration. Highly recommend!</p>
        <span>– <strong>Jane D.</strong></span>
      </div>
      <div class="testimonial">
        <p>Professional, reliable, and skilled team.</p>
        <span>– <strong>TechCorp Inc.</strong></span>
      </div>
      <div class="testimonial">
        <p>Their DevOps support transformed our infrastructure!</p>
        <span>– <strong>DevOps Solutions</strong></span>
      </div>
    </div>
  </section>

  <!-- Quick Links Section -->
  <section class="quick-links">
    <h3>Quick Links for more</h3>
    <ul>
      <li><a href="{{ url_for('services') }}">View Our Services</a></li>
      <li><a href="{{ url_for('contact_form') }}">Contact Form</a></li>
    </ul>
  </section>

  <!-- Subscription Section -->
  <section
    style="
      background-color: rgb(16, 194, 210);
      color: white;
      padding: 40px 20px;
      text-align: center;
    "
  >
    <h2 style="margin-bottom: 20px">
      Subscribe to get info's concerning our services & trainings
    </h2>
    <form
      style="display: flex; justify-content: center; flex-wrap: wrap; gap: 10px"
      action="/subscribe"
      method="post"
    >
      <input
        type="email"
        name="email"
        required
        placeholder="e.g., email@example.com"
        style="
          padding: 12px 20px;
          width: 300px;
          border: 2px solidrgb(13, 161, 70);
          border-radius: 5px;
          font-size: 16px;
        "
      />
      <button
        type="submit"
        style="
          padding: 12px 25px;
          background-color: rgb(13, 161, 65);
          color: white;
          border: none;
          border-radius: 5px;
          font-size: 16px;
          cursor: pointer;
        "
      >
        Subscribe
      </button>
    </form>
  </section>

  <!-- Subscription Section -->
</main>

{% endblock main %}
