@extends('layouts.web')

@section('contenido')

<section style="padding-top: 100px;">
    <div class="container">
        <div class="row">
            <div class="col text-center">
                <h1>publicidad</h1>
            </div>
        </div>
    </div>
</section>

<style>
    th {
        border-top: none !important;
    }

    i.fa-times {
        color: #444;
    }
</style>

<section class="mt-4">
    <div class="container">
        <div class="row justify-content-center text-white">
            <div class="col-10">
                <span>PASO 1 de 3</span>
                <h5>Seleccionar el plan.</h5>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-10">
                <table class="table text-white">
                    <thead>
                        <tr>
                            <th></th>
                            <th width="15%" class="text-center">
                                <button class="btn btn-danger">BASIC</button>
                            </th>
                            <th width="15%" class="text-center">
                                <button class="btn btn-outline-danger">MEDIUM</button>
                            </th>
                            <th width="15%" class="text-center">
                                <button class="btn btn-outline-danger">PREMIUM</button>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Datos de la <strong>empresa</strong>: logo, nombre, descripción.</td>
                            <td class="text-center"><i class="fas fa-check"></i></td>
                            <td class="text-center"><i class="fas fa-check"></i></td>
                            <td class="text-center"><i class="fas fa-check"></i></td>
                        </tr>
                        <tr>
                            <td>Formas de <strong>contacto</strong>: ubicación, teléfono, mail, sitio web.</td>
                            <td class="text-center"><i class="fas fa-check"></i></td>
                            <td class="text-center"><i class="fas fa-check"></i></td>
                            <td class="text-center"><i class="fas fa-check"></i></td>
                        </tr>
                        <tr>
                            <td><strong>Galería</strong> de imágenes.</td>
                            <td class="text-center"><i class="fas fa-times"></i></td>
                            <td class="text-center"><i class="fas fa-check"></i></td>
                            <td class="text-center"><i class="fas fa-check"></i></td>
                        </tr>
                        <tr>
                            <td>Canal de <strong>Youtube</strong></td>
                            <td class="text-center"><i class="fas fa-times"></i></td>
                            <td class="text-center"><i class="fas fa-check"></i></td>
                            <td class="text-center"><i class="fas fa-check"></i></td>
                        </tr>
                        <tr>
                            <td>Publicación de <strong>ofertas</strong>.</td>
                            <td class="text-center"><i class="fas fa-times"></i></td>
                            <td class="text-center"><i class="fas fa-check"></i></td>
                            <td class="text-center"><i class="fas fa-check"></i></td>
                        </tr>
                        <tr>
                            <td>Publicación de <strong>novedades</strong>.</td>
                            <td class="text-center"><i class="fas fa-times"></i></td>
                            <td class="text-center"><i class="fas fa-times"></i></td>
                            <td class="text-center"><i class="fas fa-check"></i></td>
                        </tr>
                        <tr>
                            <td>Publicación de <strong>equipos</strong> para venta o alquiler.</td>
                            <td class="text-center"><i class="fas fa-check"></i></td>
                            <td class="text-center"><i class="fas fa-times"></i></td>
                            <td class="text-center"><i class="fas fa-check"></i></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row justify-content-center text-white mt-5">
            <div class="col-10">
                <span>PASO 2 de 3</span>
                <h5>Seleccionar el contrato de duración.</h5>
            </div>
        </div>
        <div class="row justify-content-center text-center my-5">
            <div class="col-3">
                <button class="btn btn-danger">1 MES</button>
            </div>
            <div class="col-3">
                <button class="btn btn-outline-danger">3 MESES</button>
            </div>
            <div class="col-3">
                <button class="btn btn-outline-danger">6 MESES</button>
            </div>
        </div>
        <div class="row justify-content-center text-white mt-5">
            <div class="col-10">
                <span>PASO 3 de 3</span>
                <h5>Enviar solicitud.</h5>
            </div>
        </div>
        <div class="row justify-content-center text-center my-5">
            <div class="col">
                <button class="btn btn-danger btn-lg">
                    <i class="fas fa-paper-plane mr-2"></i>
                    <span>ENVIAR</span>
                </button>
            </div>
        </div>
    </div>
</section>

@endsection