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

{% block content %}
<!-- Hero Section -->
<div class="hero-section">
    <h1>ML Model Creation</h1>
    <p class="flow-text">Tailored Machine Learning Models for Any Problem Set</p>
  </div>

  <!-- About ML Model Creation Section -->
  <div class="section white">
    <div class="row container">
      <h2 class="header">About ML Model Creation</h2>
      <p class="flow-text">
        At AI ML Operations, we specialize in creating custom machine learning models to solve complex problems across industries. With extensive expertise in supervised, unsupervised, and reinforcement learning, we design models that deliver accurate, scalable, and actionable insights. Whether you need predictive analytics, pattern recognition, or decision-making systems, we provide end-to-end solutions tailored to your needs.
      </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">supervised_user_circle</i>
          <h5>Supervised Learning</h5>
          <p>Create models for classification, regression, and prediction tasks.</p>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="icon-block">
          <i class="material-icons">explore</i>
          <h5>Unsupervised Learning</h5>
          <p>Discover patterns and insights from unlabeled data.</p>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="icon-block">
          <i class="material-icons">trending_up</i>
          <h5>Reinforcement Learning</h5>
          <p>Develop systems that learn and adapt through interaction.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Applications Section -->
  <div class="section white">
    <div class="row container">
      <h2 class="header">Applications</h2>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="{% static 'public/img/ml_models/card-1.jpg' %}"  height="225" width="400" alt="Predictive Analytics">
          </div>
          <div class="card-content">
            <span class="card-title">Predictive Analytics</span>
            <p>Forecast trends and outcomes with high accuracy.</p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="{% static 'public/img/ml_models/card-2.jpg' %}"  height="225" width="400" alt="Fraud Detection">
          </div>
          <div class="card-content">
            <span class="card-title">Fraud Detection</span>
            <p>Identify and prevent fraudulent activities in real-time.</p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="{% static 'public/img/ml_models/card-3.jpg' %}"  height="225" width="400" alt="Recommendation Systems">
          </div>
          <div class="card-content">
            <span class="card-title">Recommendation Systems</span>
            <p>Personalize user experiences with intelligent recommendations.</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 Solve Your Problem?</h2>
      <p class="flow-text">Contact us today to create your custom ML model.</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 %}