{% extends "base.html" %}
{% load static %}
{% block path %}  url({% static 'public/img/education_bg.jpg' %}) {% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="hero-section">
    <h1>AI Education</h1>
    <p class="flow-text">Empowering Businesses with AI Knowledge</p>
  </div>

  <!-- About AI Education Section -->
  <div class="section white">
    <div class="row container">
      <h2 class="header">About AI Education</h2>
      <p class="flow-text">
        At AI ML Operations, we believe that understanding AI is the first step toward leveraging its power. Our AI Education service is designed to equip businesses with the knowledge and skills needed to integrate AI into their workflows effectively. We offer tailored courses, hands-on workshops, and ongoing support to ensure your team is confident and capable in using AI technologies.
      </p>
    </div>
  </div>

  <!-- Features Section -->
  <div class="section grey lighten-3">
    <div class="row container">
      <h2 class="header">What We Offer</h2>
      <div class="col s12 m4">
        <div class="icon-block">
          <i class="material-icons">school</i>
          <h5>Custom Courses</h5>
          <p>Tailored AI courses designed to meet your business needs and goals.</p>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="icon-block">
          <i class="material-icons">work</i>
          <h5>Hands-On Workshops</h5>
          <p>Interactive sessions to apply AI concepts in real-world scenarios.</p>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="icon-block">
          <i class="material-icons">support</i>
          <h5>Ongoing Support</h5>
          <p>Continuous learning and support to keep your team up-to-date.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Course Highlights Section -->
  <div class="section white">
    <div class="row container">
      <h2 class="header">Course Highlights</h2>
      <div class="col s12 m4">
        <div class="card">
          <div class="card-image">
            <img src="{% static 'public/img/ai_education/card-1.jpg' %}" height="225" width="400" alt="AI Fundamentals">
          </div>
          <div class="card-content">
            <span class="card-title">AI Fundamentals</span>
            <p>Learn the basics of AI, including machine learning, neural networks, and data preprocessing.</p>
          </div>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="card">
          <div class="card-image">
            <img src="{% static 'public/img/ai_education/card-2.jpg' %}" height="225" width="400" alt="AI for Business">
          </div>
          <div class="card-content">
            <span class="card-title">AI for Business</span>
            <p>Discover how AI can optimize operations, improve decision-making, and drive innovation.</p>
          </div>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="card">
          <div class="card-image">
            <img src="{% static 'public/img/ai_education/card-3.jpg' %}"  height="225" width="400" alt="Advanced AI Techniques">
          </div>
          <div class="card-content">
            <span class="card-title">Advanced AI Techniques</span>
            <p>Dive deep into advanced topics like deep learning, natural language processing, and computer vision.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Call to Action Section -->
  <div class="section blue-grey darken-3 white-text">
    <div class="row container center">
      <h2 class="header">Ready to Transform Your Business?</h2>
      <p class="flow-text">Contact us today to schedule your AI Education sessions.</p>
      <a href="{% url 'contact' %}" class="btn-large waves-effect waves-light white blue-grey-text text-darken-3">Get Started</a>
    </div>
  </div>
{% endblock %}