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

{% block content %}
<!-- Hero Section -->
<div class="hero-section">
    <h1>Computer Solutions</h1>
    <p class="flow-text">From Gaming PCs to AI Servers – We Build, Deploy, and Maintain</p>
  </div>

  <!-- About Computer Solutions Section -->
  <div class="section white">
    <div class="row container">
      <h2 class="header">About Our Computer Solutions</h2>
      <p class="flow-text">
        At AI ML Operations, we specialize in procuring, building, deploying, and maintaining computers tailored to your specific needs. Whether you're a gamer, a creative professional, or a business requiring high-performance workstations or AI servers, we deliver reliable, scalable, and efficient solutions. Our end-to-end service ensures your systems are optimized for performance and longevity.
      </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">build</i>
          <h5>Custom Builds</h5>
          <p>We design and build computers tailored to your specific requirements, from gaming PCs to AI servers.</p>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="icon-block">
          <i class="material-icons">cloud_upload</i>
          <h5>Deployment</h5>
          <p>Seamless deployment of systems, ensuring they are ready for immediate use.</p>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="icon-block">
          <i class="material-icons">settings</i>
          <h5>Maintenance</h5>
          <p>Ongoing support and maintenance to keep your systems running smoothly.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Solutions Section -->
  <div class="section white">
    <div class="row container">
      <h2 class="header">Our Solutions</h2>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="{% static 'public/img/computers/card-1.jpg' %}"  height="225" width="400" alt="Gaming PCs">
          </div>
          <div class="card-content">
            <span class="card-title">Gaming PCs</span>
            <p>High-performance gaming rigs built for the latest games and VR experiences.</p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="{% static 'public/img/computers/card-2.jpg' %}"  height="225" width="400" alt="Workstations">
          </div>
          <div class="card-content">
            <span class="card-title">Workstations</span>
            <p>Powerful workstations for creative professionals, engineers, and developers.</p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="{% static 'public/img/computers/card-3.jpg' %}"  height="225" width="400" alt="Storage Servers">
          </div>
          <div class="card-content">
            <span class="card-title">Storage Servers</span>
            <p>Scalable storage solutions for data-intensive applications and backups.</p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="{% static 'public/img/computers/card-4.jpg' %}"  height="225" width="400" alt="AI Servers">
          </div>
          <div class="card-content">
            <span class="card-title">AI Servers</span>
            <p>High-performance servers optimized for AI and machine learning workloads.</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 Upgrade Your Systems?</h2>
      <p class="flow-text">Contact us today to discuss your computer needs.</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 %}