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

{% block content %}

<!-- Hero Section -->
<div class="hero-section">
    <h1>File Hosting</h1>
    <p class="flow-text">Secure, Scalable, and Reliable File Storage with Weekly Backups</p>
  </div>

  <!-- About File Hosting Section -->
  <div class="section white">
    <div class="row container">
      <h2 class="header">About Our File Hosting Service</h2>
      <p class="flow-text">
        At AI ML Operations, we provide secure and scalable file hosting solutions tailored to your business needs. Our platform ensures your data is always accessible, protected, and backed up with weekly backups for added peace of mind. Whether you're storing critical business documents, media files, or large datasets, our file hosting service is designed to meet your requirements with reliability and efficiency.
      </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">cloud</i>
          <h5>Secure Storage</h5>
          <p>Your files are stored securely with advanced encryption protocols.</p>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="icon-block">
          <i class="material-icons">backup</i>
          <h5>Weekly Backups</h5>
          <p>Automatic weekly backups to ensure your data is always safe.</p>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="icon-block">
          <i class="material-icons">storage</i>
          <h5>Scalable Solutions</h5>
          <p>Easily scale your storage as your business grows.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Benefits Section -->
  <div class="section white">
    <div class="row container">
      <h2 class="header">Why Choose Us?</h2>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="{% static 'public/img/file_hosting/card-1.jpg' %}"  height="225" width="400" alt="Data Security">
          </div>
          <div class="card-content">
            <span class="card-title">Data Security</span>
            <p>Advanced encryption and access controls to protect your files.</p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="{% static 'public/img/file_hosting/card-2.jpg' %}"  height="225" width="400" alt="Reliability">
          </div>
          <div class="card-content">
            <span class="card-title">Reliability</span>
            <p>99.9% uptime guarantee for uninterrupted access to your files.</p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="{% static 'public/img/file_hosting/card-3.jpg' %}"  height="225" width="400" alt="Easy Management">
          </div>
          <div class="card-content">
            <span class="card-title">Easy Management</span>
            <p>User-friendly interface for seamless file management.</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 Secure Your Files?</h2>
      <p class="flow-text">Contact us today to get started with our file hosting service.</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 %}