{% extends "base.html" %}
{% load static %}

{% block title %}File Hosting - AI ML Operations, LLC{% endblock %}
{% block meta_description %}Secure, scalable, and reliable file hosting with weekly backups by AI ML Operations, LLC.
Protect your data with our advanced storage solutions.{% endblock %}

{% block content %}

<!-- Hero Section -->
<div class="hero-section" style="height: 40vh; min-height: 300px;">
  <div class="hero-content">
    <h1 class="hero-title">File Hosting</h1>
    <p class="hero-subtitle">Secure, Scalable, and Reliable File Storage with Weekly Backups</p>
  </div>
</div>

<!-- About File Hosting Section -->
<div class="section">
  <div class="container">
    <h2 class="section-title">About Our File Hosting Service</h2>
    <p style="text-align: center; max-width: 800px; margin: 0 auto; color: var(--text-muted); font-size: 1.1rem;">
      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" style="background: var(--surface-color);">
  <div class="container">
    <h2 class="section-title">What We Offer</h2>
    <div class="card-grid">
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Secure Storage</h5>
        <p class="card-text">Your files are stored securely with advanced encryption protocols.</p>
      </div>
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Weekly Backups</h5>
        <p class="card-text">Automatic weekly backups to ensure your data is always safe.</p>
      </div>
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Scalable Solutions</h5>
        <p class="card-text">Easily scale your storage as your business grows.</p>
      </div>
    </div>
  </div>
</div>

<!-- Benefits Section -->
<div class="section">
  <div class="container">
    <h2 class="section-title">Why Choose Us?</h2>
    <div class="card-grid">
      <div class="card">
        <img src="{% static 'public/img/file_hosting/card-1.jpg' %}" alt="Data Security"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Data Security</span>
        <p class="card-text">Advanced encryption and access controls to protect your files.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/file_hosting/card-2.jpg' %}" alt="Reliability"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Reliability</span>
        <p class="card-text">99.9% uptime guarantee for uninterrupted access to your files.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/file_hosting/card-3.jpg' %}" alt="Easy Management"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Easy Management</span>
        <p class="card-text">User-friendly interface for seamless file management.</p>
      </div>
    </div>
  </div>
</div>

<!-- Call to Action Section -->
<div class="section" style="text-align: center;">
  <div class="container">
    <h2 class="section-title">Ready to Secure Your Files?</h2>
    <p class="hero-subtitle" style="margin-bottom: 2rem;">Contact us today to get started with our file hosting service.
    </p>
    <a href="{% url 'contact' %}" class="btn">Get Started</a>
  </div>
</div>

{% endblock %}