@extends('layouts.principal')

@section('css')
@endsection

@section('content')
    <div class="container">
        <br><br><br>
        <div class="text-center">
            <h1 class="h2-class text-green">ELIGA TU PLAN</h1>
            <div>
                <img src="{{ asset('img/Franja.svg') }}" alt="">
            </div>
            <br><br><br>
            <div>
                <div class="mb-3">
                    <span class="fs-1 text-dark">En este espacio podrás conocer cómo funciona cada parte de la plataforma What’sKing</span>
                </div>
            </div>
        </div>
        <br>
    </div>

    <div class="container-fluid">
        <div class="container">
            <div class="row g-3 text-center">
                <div class="col-xl-4">
                    <div class="mb-4 rounded-3 p-3 shadow-price-two">
                        <div class=" py-3">
                            <h3 class="my-0 h-class fs-1 text-dark">PEQUEÑA EMPRESA</h3>
                        </div>
                        <div class="card-body">
                            <span class="fs-2 text-dark">Agiliza la atención al cliente</span>
                            <div class="separator my-2 border-2"></div>
                            <div>
                                <span class="fs-2 text-dark">Máximo <span class="fw-bolder">2000</span> clientes</span>
                                <div class="separator my-2 border-2"></div>
                                <span class="fs-2 text-dark fw-bolder">Con nuestro servicio de WhatsKing personalizado,
                                    podrás:
                                </span>
                                <div>
                                    <div class="mb-3 mt-3 mx-7">
                                        <div class="d-flex flex-column align-items-start">
                                            <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Respuestas automáticas</span>
                                            <li class=" d-flex align-items-start">
                                                <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                <div class="d-flex align-items-start text-start"><span class="fs-2 text-dark">Ofrece
                                                        información instantánea a preguntas
                                                        frecuentes.</span>
                                                </div>
                                            </li>
                                        </div>

                                        <div class="d-flex flex-column align-items-start">
                                            <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Catálogo de productos</span>
                                            <li class=" d-flex align-items-start">
                                                <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                <div class="d-flex align-items-start text-start"><span
                                                        class="fs-2 text-dark">Facilita la compra y reduce el tiempo de
                                                        respuesta.
                                                        frecuentes.</span>
                                                </div>
                                            </li>
                                        </div>

                                        <div class="d-flex flex-column align-items-start">
                                            <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Optimiza la gestión de leads
                                            </span>
                                        </div>

                                        <div class="d-flex flex-column align-items-start">
                                            <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Calificación de leads
                                            </span>
                                            <li class=" d-flex align-items-start">
                                                <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                <div class="d-flex align-items-start text-start"><span
                                                        class="fs-2 text-dark">Segmenta a los clientes potenciales según su
                                                        interés.
                                                    </span>
                                                </div>
                                            </li>
                                        </div>


                                        <div class="d-flex flex-column align-items-start">
                                            <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Programación de citas
                                            </span>
                                            <li class=" d-flex align-items-start">
                                                <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                <div class="d-flex align-items-start text-start"><span
                                                        class="fs-2 text-dark">Permite a los clientes agendar citas o realizar
                                                        reservas.
                                                    </span>
                                                </div>
                                            </li>
                                        </div>

                                        <div class="text-start mt-3">
                                            <h2 class="fs-2 fw-bolder">Bonus
                                            </h2>
                                            <span class="fw-bolder fs-2 text-dark">Análisis de datos
                                            </span>
                                            <p class="fs-2 text-dark">Obtén información valiosa sobre el comportamiento de tus
                                                clientes.
                                            </p>
                                        </div>

                                    </div>
                                </div>
                                <button type="button" class="btn-w btn-lg fs-1">Obtener plan</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-4">
                    <div class="mb-4 rounded-3 p-3 shadow-price-one">
                        <div class=" py-3">
                            <h3 class="my-0 h-class fs-1 text-dark">MEDIANA EMPRESA
                            </h3>
                        </div class="">
                        <div class="card-body">
                            <span class="fs-2 text-dark">Agiliza la atención al cliente</span>
                            <div class="separator my-2 border-2"></div>
                            <div>
                                <span class="fs-2 text-dark">Máximo <span class="fw-bolder">4000</span> clientes</span>
                                <div class="separator my-2 border-2"></div>
                                <span class="fs-2 text-dark fw-bolder">Con nuestro servicio de WhatsKing personalizado,
                                    podrás:
                                </span>
                                <div>
                                    <div class="mb-3 mt-3 mx-7">
                                        <div class="overflow-size">
                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Respuestas automáticas</span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Ofrece información instantánea a preguntas
                                                            frecuentes.</span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Catálogo de productos</span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Facilita la compra y reduce el tiempo de
                                                            respuesta.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Chatbots con IA

                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Interactúa con los clientes, resuelve dudas
                                                            y captura leads.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>


                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Comunicación personalizada

                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Interactúa con tus clientes de forma más
                                                            cercana y personal.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Fidelización
                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Crea una conexión más fuerte con tu marca y
                                                            aumenta la lealtad de tus clientes.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Canal de comunicación directo
                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Permite a los clientes agendar citas o
                                                            realizar reservas.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Canal de comunicación directo
                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Mantén a tus clientes informados sobre
                                                            novedades y promociones.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Calificación de leads
                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Segmenta a los clientes potenciales según
                                                            su interés.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Programación de citas
                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Permite a los clientes agendar citas o
                                                            realizar reservas.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Integración con CRM (STP K2):
                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Centraliza la información de los clientes y
                                                            facilita el seguimiento.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Resolución de dudas
                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Reduce el tiempo de espera y la necesidad
                                                            de intervención manual.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>
                                            <br><br>
                                        </div>
                                        <div class="text-start mt-3">
                                            <h2 class="fs-2 fw-bolder">Bonus
                                            </h2>
                                            <span class="fw-bolder fs-2 text-dark">Análisis de datos
                                            </span>
                                            <p class="fs-2 text-dark">Obtén información valiosa sobre el comportamiento de tus
                                                clientes.
                                            </p>
                                            <p class="fs-2 text-dark"><span class="fw-bolder">Envio de reporte mensual</span> a la
                                                medida de tus necesidades y objetivos estratégicos
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn-w btn-lg fs-1">Obtener plan</button>
                        </div>
                    </div>
                </div>

                <div class="col-xl-4">
                    <div class="mb-4 rounded-3 p-3 shadow-price-three text-center">
                        <div class=" py-3">
                            <div class="text-king d-inline">
                                <div class="d-inline">
                                    <h3 class="my-0 h-class text-center fs-1 text-dark">KING</h3>
                                </div>
                                <img class="img-king" src="{{ asset('img/Crown.png') }}" alt="">
                            </div>

                        </div class="">
                        <div class="card-body">
                            <span class="fs-2 text-dark mx-7">Las reglas las pone las necesidades y objetivos de tu negocio,
                                ajustamos nuestra plataforma WK a la medida de tu categoria de negocio y necesidades
                                puntuales ¡Despídete de las respuestas tardías y los mensajes perdidos!
                            </span>
                            <div class="separator my-2 border-2"></div>
                            <div>
                                <span class="fs-2 text-dark fw-bolder">Con nuestro servicio de WhatsKing personalizado,
                                    podrás:
                                </span>
                                <div>
                                    <div class="mb-3 mt-3 mx-7">
                                        <div class="overflow-size">
                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Catálogo digital </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Muestra tus productos o servicios de forma
                                                            atractiva y facilita la compra.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Chatbots con IA </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Responde preguntas frecuentes, califica
                                                            leads y agenda citas.
                                                            /span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Carrito de compra integrado


                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Permite a los clientes comprar sin salir de
                                                            WhatsApp.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>


                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Recuperación de carritos
                                                    abandonados
                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Recuerda a los clientes que no completaron
                                                            su compra.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Respuestas inmediatas
                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Ofrece información instantánea a las
                                                            consultas de tus clientes, incluso fuera de tu horario
                                                            laboral.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Atención personalizada
                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Interactúa con tus clientes de forma
                                                            cercana y resuelve sus dudas en tiempo real.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Catálogo digital
                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Muestra tus productos o servicios de forma
                                                            atractiva y facilita la compra.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Chatbots con IA
                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Responde preguntas frecuentes, califica
                                                            leads y agenda citas.

                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Carrito de compra integrado

                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Permite a los clientes comprar sin salir de
                                                            WhatsApp.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Integración con CRM (STP K2):
                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Centraliza la información de los clientes y
                                                            facilita el seguimiento.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Recuperación de carritos
                                                    abandonados

                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Recuerda a los clientes que no completaron
                                                            su compra.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Respuestas inmediatas
                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Ofrece información instantánea a las
                                                            consultas de tus clientes, incluso fuera de tu horario
                                                            laboral.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Atención personalizada
                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Interactúa con tus clientes de forma
                                                            cercana y resuelve sus dudas en tiempo real.

                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Soporte 24/7

                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Brinda asistencia a tus clientes en
                                                            cualquier momento y lugar.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Análisis de datos
                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Obtén información valiosa sobre el
                                                            comportamiento de tus clientes y toma decisiones
                                                            estratégicas.
                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Automatización de tareas

                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Ahorra tiempo y recursos en la atención al
                                                            cliente.

                                                        </span>
                                                    </div>
                                                </li>
                                            </div>

                                            <div class="d-flex flex-column align-items-start">
                                                <span class="fw-bolder fs-2 text-dark mt-2 mb-2">Mejora la productividad

                                                </span>
                                                <li class=" d-flex align-items-start">
                                                    <div class="d-flex"><i class="bi bi-check-lg me-2 text-dark mt-2"></i> </div>
                                                    <div class="d-flex align-items-start text-start"><span
                                                            class="fs-2 text-dark">Aumenta la eficiencia y rentabilidad de tu
                                                            negocio.

                                                        </span>
                                                    </div>
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-start mt-3 mx-7">
                                        <h2 class="fs-2 text-dark fw-bolder text-center">¡No te quedes atrás!</h2>
                                        <span class="fw-bolder fs-2 text-dark lh-sm">Solicita una demo gratuita y descubre cómo
                                            nuestro servicio de Whatsking puede ayudarte a alcanzar tus objetivos.
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn-w btn-lg fs-1 mt-3">Obtener plan</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>
    </div>
@endsection

@section('scripts')
@endsection