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

<main>
  <!-- Hero Section -->
  <section class="hero">
    <h2>Empowering Your Cloud & DevOps Journey</h2>
    <p>
      We specialize in delivering Cloud and DevOps consulting services tailored
      to meet your unique business needs.
    </p>
    <button onclick="window.location.href='{{ url_for('services') }}'">
      Explore our Services
    </button>
  </section>

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

  <!-- adding about pag-->

  <section class="about-hero">
    <div class="about-container">
      <h1>🚀 About CDC Firm</h1>
      <p>
        At CDC Firm, we are a passionate team of cloud and DevOps engineers
        committed to helping businesses embrace modern, scalable, and secure
        solutions.
      </p>
      <p>
        Our expertise spans across cloud architecture, CI/CD automation,
        Kubernetes deployments, infrastructure-as-code, and DevSecOps practices
        — all tailored to accelerate your digital transformation.
      </p>
      <p style="font-weight: bold; color: hotpink">{{ message }}</p>

      <!-- templates/about.html -->
      <form action="/about" method="post">
        <label for="mood">What's your mood?</label>
        <input
          type="text"
          name="mood"
          placeholder="excited / curious / other"
          required
        />
        <button type="submit">Submit</button>
      </form>

      <hr />

      {% if message %}
      <p><strong>Message:</strong> {{ message }}</p>
      {% endif %}
    </div>
  </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>

  <!-- Quick Links Section -->
  <section class="quick-links">
    <h3>Quick Links</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>
</main>

{% endblock main %}
