{% extends "base.html" %}

{% block title %}
Econet Business
{% endblock %}

{% block content %}

<section class="hero"
    style="background-image: url('{{ url_for('static', filename='images/city1.png') }}');
           background-size: cover;
           background-position: center;
           height: 600px;
           position: relative;">

    <div class="overlay"></div>

    <div class="hero-content">

        <h1 class="typing">POWER YOUR WEB PRESENCE</h1>

        <h2 class="typing">DOMAINS, HOSTING & VPS SOLUTIONS</h2>

        <div class="hero-buttons">
        
            <button><i class="fa-solid fa-globe"></i> Web Hosting</button>
        
            <button><i class="fa-solid fa-server"></i> VPS Hosting</button>
        
            <button><i class="fa-solid fa-cloud"></i> Cloud Backup</button>
        
        </div>

        <div class="domain-search">

            <input type="text"
                   placeholder="Find Your Perfect Domain">

            <button>
                <i class="fas fa-search"></i>
            </button>

        </div>

    </div>

</section>

<section class="services">

    <div class="service-card">

        <img src="{{ url_for('static', filename='images/webhosting.png') }}">

        <h3>VPS Servers</h3>

    </div>

    <div class="service-card">

        <img src="{{ url_for('static', filename='images/Servers.png') }}">

        <h3>Cloud Servers</h3>

    </div>

    <div class="service-card">

        <img src="{{ url_for('static', filename='images/support.jpg') }}">

        <h3>Get Started</h3>

    </div>

</section>

<section class="hosting-title">

    <h2>
        RELIABLE HOSTING SERVICES FOR YOUR BUSINESS
    </h2>

</section>

<section class="support-banner">

    <img src="{{ url_for('static', filename='images/24.jpeg') }}"
         alt="24 Hours Support Services">

</section>

{% endblock %}