templates/website/index.html.twig line 1

Open in your IDE?
  1. {% extends 'website/base.html.twig' %}
  3. {% block title %}Iglesia Virtual{% endblock %}
  5. {% block menu %}
  6.     <div id="navigation">
  7.         <!-- Navigation Menu-->   
  8.         <ul class="navigation-menu nav-light nav-right" id="navmenu-nav">
  9.             <li class="has-submenu">
  10.                 <a href="#home">Inicio</a>
  11.             </li>
  12.             <li class="has-submenu">
  13.                 <a href="#features">Funciones</a>
  14.             </li>
  15.             <li class="has-submenu">
  16.                 <a href="#pricing">Planes</a>
  17.             </li>
  18.             <li class="has-submenu">
  19.                 <a href="#contact">Contacto</a>
  20.             </li>
  21.             <!-- <li class="has-submenu">
  22.                 <a href="#contact">Contact Us</a>
  23.             </li> -->
  24.         </ul><!--end navigation menu-->
  25.     </div><!--end navigation-->
  26. {% endblock %}
  28. {% block body %}
  31. <!-- Hero Start -->
  32. <section class="bg-half-260 pb-lg-0 pb-md-4 d-table w-100" style="background: url('{{ asset("assets/website/images/bg/apps.jpg") }}') no-repeat center;" id="home">
  33.     <div class="bg-overlay bg-gradient-primary opacity-9"></div>
  34.     <div class="container">
  35.         <div class="row position-relative" style="z-index: 1;">
  36.             <div class="col-md-7 col-12 mt-lg-5">
  37.                 <div class="title-heading">
  38.                     <h1 class="heading text-white title-dark mb-4">Tecnología para compartir las Buenas Noticias</h1>
  39.                     <p class="para-desc text-black-50">Con <i>Iglesia Virtual</i>, su congregación podrá obtener una aplicación móvil, sitio web y herramientas administrativas, que le ayudarán a llevar el mensaje y visión de su Iglesia más lejos.</p>
  40.                     <div class="mt-4 pt-2">
  41.                         <a href="#features" class="btn btn-primary">Conozca las Funciones</a>
  42.                     </div>
  43.                 </div>
  44.             </div><!--end col-->
  46.             <div class="col-md-5 col-12 mt-4 pt-2 mt-sm-0 pt-sm-0">
  47.                 <div class="shape-before">
  48.                     <div class="carousel-cell">
  49.                         <img src="{{ asset('assets/website/images/phone_website.png') }}" class="img-fluid" alt="">
  50.                     </div>
  51.                 </div>
  52.             </div><!--end col-->
  53.         </div><!--end row-->
  54.     </div><!--end container-->
  55. </section><!--end section-->
  56. <div class="position-relative">
  57.     <div class="shape overflow-hidden text-white">
  58.         <svg viewBox="0 0 2880 250" fill="none" xmlns="http://www.w3.org/2000/svg">
  59.             <path d="M720 125L2160 0H2880V250H0V125H720Z" fill="currentColor"></path>
  60.         </svg>
  61.     </div>
  62. </div>
  63. <!-- Hero End -->
  66. <!-- Start -->
  67. <!--
  68. <section class="section overflow-hidden pb-0" id="services">
  69.     <div class="container">
  70.         <div class="row justify-content-center">
  71.             <div class="col-lg-4 col-md-6">
  72.                 <div class="card p-4 rounded features features-classic feature-primary">
  73.                     <div class="fea-icon rounded bg-light shadow icon">
  74.                         <i class="uil uil-airplay mb-0 text-primary"></i>
  75.                     </div>
  76.                     <div class="content mt-4">
  77.                         <a href="page-single-service.html" class="title h5 text-dark">Alcanzar</a>
  79.                         <p class="text-muted mt-3">Con <i>Iglesia Virtual</i> podrá enviar notificaciones PUSH a los miembros de su congregación, administrar su agenda de eventos y gestionar conferencias privadas. </p>
  80.                     </div>
  82.                     <a href="page-single-service.html">
  83.                         <span class="text-dark">Read More <i class="uil uil-arrow-right"></i></span>
  84.                     </a>
  85.                 </div>
  86.             </div>
  88.             <div class="col-lg-4 col-md-6 mt-4 pt-2 mt-sm-0 pt-sm-0">
  89.                 <div class="card p-4 rounded features features-classic feature-primary">
  90.                     <div class="fea-icon rounded bg-light shadow icon">
  91.                         <i class="uil uil-atom mb-0 text-primary"></i>
  92.                     </div>
  94.                     <div class="content mt-4">
  95.                         <a href="page-single-service.html" class="title h5 text-dark">Enseñar</a>
  97.                         <p class="text-muted mt-3">It is said that song composers of the past used dummy texts as lyrics when writing to sing with the melody.</p>
  98.                     </div>
  100.                     <a href="page-single-service.html">
  101.                         <span class="text-dark">Read More <i class="uil uil-arrow-right"></i></span>
  102.                     </a>
  103.                 </div>
  104.             </div>
  106.             <div class="col-lg-4 col-md-6 mt-4 pt-2 mt-lg-0 pt-lg-0">
  107.                 <div class="card p-4 rounded features features-classic feature-primary">
  108.                     <div class="fea-icon rounded bg-light shadow icon">
  109.                         <i class="uil uil-users-alt mb-0 text-primary"></i>
  110.                     </div>
  112.                     <div class="content mt-4">
  113.                         <a href="page-single-service.html" class="title h5 text-dark">Enviar</a>
  115.                         <p class="text-muted mt-3">It is said that song composers of the past used dummy texts as lyrics when writing to sing with the melody.</p>
  116.                     </div>
  118.                     <a href="page-single-service.html">
  119.                         <span class="text-dark">Read More <i class="uil uil-arrow-right"></i></span>
  120.                     </a>
  121.                 </div>
  122.             </div>
  123.         </div>
  124.     </div><!--end container-->
  125. <section class="section" id="services">
  127.     <div class="container" id='features'>
  128.         <div class="row align-items-center">
  129.             <div class="col-lg-5 col-md-6 order-md-1 order-2 mt-4 mt-am-0 pt-2 pt-sm-0">
  130.                 <div class="app-feature-shape position-relative">
  131.                     <div class="tiny-single-item">
  132.                         <div class="tiny-slide">
  133.                             <img src="{{ asset('assets/website/images/app/1.png') }}" class="img-fluid" style='margin:0 auto;' alt="">
  134.                         </div>
  135.                         <div class="tiny-slide">
  136.                             <img src="{{ asset('assets/website/images/app/2.png') }}" class="img-fluid" alt="">
  137.                         </div>
  138.                         <div class="tiny-slide">
  139.                             <img src="{{ asset('assets/website/images/app/3.png') }}" class="img-fluid" alt="">
  140.                         </div>
  141.                         <div class="tiny-slide">
  142.                             <img src="{{ asset('assets/website/images/app/4.png') }}" class="img-fluid" alt="">
  143.                         </div>
  144.                         <div class="tiny-slide">
  145.                             <img src="{{ asset('assets/website/images/app/5.png') }}" class="img-fluid" alt="">
  146.                         </div>                                             
  147.                         <div class="tiny-slide">
  148.                             <img src="{{ asset('assets/website/images/app/6.png') }}" class="img-fluid" alt="">
  149.                         </div>                           
  150.                     </div>
  151.                 </div>
  152.             </div><!--end col-->
  154.             <div class="col-lg-7 col-md-6 order-md-2 order-1">
  155.                 <div class="ms-lg-5">
  156.                     <div class="section-title">
  157.                         <h6 class="text-primary">Funciones Principales</h6>
  158.                         <h4 class="title mb-4">La mejor tecnología<br>al servicio de la Iglesia<br></h4>
  159.                         <p class="text-muted para-desc mb-0">
  160.                             Con <i>Iglesia Virtual</i> su iglesia tendrá acceso a las siguientes funciones
  161.                         </p>
  162.                     
  163.                         <ul class="list-unstyled text-muted mt-3">
  164.                             <li class="mb-0"><span class="text-primary h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Enviar Notificaciones a todos los miembros</li>
  165.                             <li class="mb-0"><span class="text-primary h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Administrar agenda de Eventos</li>
  166.                             <li class="mb-0"><span class="text-primary h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Publicar sermones en audio, video y texto</li>
  167.                             <li class="mb-0"><span class="text-primary h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Más de 20 Biblias para usarlas sin Internet</li>                            
  168.                             <li class="mb-0"><span class="text-primary h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Gestionar ministerios de ayuda con conferencias privadas</li>
  169.                             <li class="mb-0"><span class="text-primary h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Publicar sermones con Lectura de voz automática</li>                            
  170.                             <li class="mb-0"><span class="text-primary h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Reuniones virtuales ilimitadas hasta para 50 personas</li>                                                        
  171.                             <li class="mb-0"><span class="text-primary h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Gestionar seguimientos de nuevos miembros</li>                                                                                    
  172.                         </ul>
  174.                         <div class="mt-4">
  175.                             <a href="javascript:void(0)" class="btn btn-soft-primary">Ver Planes <i data-feather="arrow-right" class="fea icon-sm"></i></a>
  176.                         </div>
  177.                     </div>
  178.                 </div>
  179.             </div><!--end col-->
  180.         </div><!--end row-->
  181.     </div><!--end container-->
  182. </section><!--end section-->
  183.     
  184.     
  185.     {#
  186.         <div class="container">
  187.             <div class="row align-items-center">
  188.                 <div class="col-md-8">
  189.                     <div class="section-title">
  190.                         <div class="d-flex">
  191.                             <i class="uil uil-envelope-star display-4"></i>
  192.                             <div class="flex-1 ms-md-4 ms-3">
  193.                                 <h4 class="fw-bold title-dark mb-1">Subscribe to our newsletters</h4>
  194.                                 <p class="text-muted mb-0">Sign up and receive the latest tips via email.</p>
  195.                             </div>
  196.                         </div>
  197.                     </div>
  198.                 </div><!--end col-->
  200.                 <div class="col-md-4 mt-4 mt-sm-0">
  201.                     <div class="text-md-end ms-5 ms-sm-0">
  202.                         <a href="javascript:void(0)" class="btn btn-primary">Subscribe Now</a>
  203.                     </div>
  204.                 </div><!--end col-->
  205.             </div><!--end row-->
  206.         </div><!--end container-->
  207.     #}
  211.     <div class="container mt-60">
  212.         <div class="row align-items-lg-center align-items-end">
  213.             <div class="col-md-6">
  214.                 <div class="section-title mb-4 pb-2">
  215.                     <h4 class="title mb-4">Aplicación Móvil personalizada<br>con el diseño de su Iglesia</h4>
  216.                     <p class="text-muted para-desc mb-0">La aplicación móvil tendrá el logotipo y diseño de su iglesia, el cual podrá cambiar en cualquier momento desde la sección administrativa.</p>
  218.                     <ul class="list-unstyled mb-0">
  219.                         <li class="d-flex mt-4">
  220.                             <i class="uil uil-check-circle h4 text-primary"></i>
  222.                             <div class="flex-1 ms-3">
  223.                                 <h6 class="mb-0">Fácil de personalizar</h6>
  224.                                 <p class="text-muted mt-2 mb-0">Suba sus imágenes y visión de su congregación fácilmente</p>
  225.                             </div>
  226.                         </li>
  228.                         <li class="d-flex mt-4">
  229.                             <i class="uil uil-check-circle h4 text-primary"></i>
  231.                             <div class="flex-1 ms-3">
  232.                                 <h6 class="mb-0">Publicación privada en PlayStore</h6>
  233.                                 <p class="text-muted mt-2 mb-0">La aplicación móvil tendrá el nombre de su congregación y estará cargada de forma privada en el la tienda de Android</p>
  234.                             </div>
  235.                         </li>
  236.                     </ul>
  238.                     <!--<div class="mt-4">
  239.                         <a href="javascript:void(0)" class="btn btn-primary">Download Now</a>
  240.                     </div>-->
  241.                 </div>
  242.             </div><!--end col-->
  244.             <div class="col-md-6">
  245.                 <div class="app-feature-shape position-relative">
  246.                     <img src="{{ asset('assets/website/images/app/hand_logo.png') }}" class="img-fluid" alt="">
  247.                 </div>
  248.             </div><!--end col-->
  249.         </div><!--end row-->
  250.     </div><!--end container-->
  251. </section><!--end section-->
  253. <section class="section bg-light">
  254.     <div class='container'>
  255.         <div class="row align-items-center">
  256.             <div class="col-lg-5 col-md-6">
  257.                 <img src="{{asset('assets/img/worship.jpg')}}" class="img-fluid rounded shadow" alt="">
  258.             </div><!--end col-->
  259.             <div class="col-lg-7 col-md-6 mt-4 pt-2 mt-sm-0 pt-sm-0">
  260.                 <div class="section-title ms-lg-5">
  261.                     <h4 class="title mb-3">Herramientas para Ministros de Alabanza</h4>
  262.                     <p class="text-muted">Las distracciones técnicas son uno de los obstáculos más grandes que los Ministerios de Alabanza deben superar en cada servicio. 
  263. Iglesia Virtual puede equipar al ministerio con las mejores herramientas de tecnología parar superar los obstáculos técnicos y para que el ministerio de alabanza pueda concentrarse en lo más importante: Adorar y alabar a Dios. Estas son algunas herramientas que incluye Iglesia Virtual para ministerios de Alabanza:
  264. </p>
  265.                     <ul class="list-unstyled text-muted mb-0">
  266.                         <li class="mb-0"><span class="text-dark h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Inventario de Cantos</li>
  267.                         <li class="mb-0"><span class="text-dark h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Visualizador de estructura por canto</li>
  268.                         <li class="mb-0"><span class="text-dark h5 me-2"><i class="uil uil-check-circle align-middle"></i></span>Creador de listado de cantos</li>
  269.                     </ul>                        
  270.                 </div>
  271.             </div><!--end col-->
  272.         </div>
  273.     </div>  
  274. </section>
  277. <section class="section" id="review">
  278.     {#
  279.     <div class="container mt-100 mt-60">
  280.         <div class="row justify-content-center">
  281.             <div class="col-12">
  282.                 <div class="section-title mb-4 pb-2 text-center">
  283.                     <h4 class="title mb-3">Preguntas Frecuentes</h4>
  284.                     <p class="text-muted mx-auto para-desc mb-0">No dude en <a href="#contact">contactarnos</a> si su pregunta no aparece en este listado</p>
  285.                 </div>
  286.             </div><!--end col-->
  287.         </div><!--end row-->
  289.         <div class="row justify-content-center">
  290.             <div class="col-lg-10 mt-4 pt-2">
  291.                 <div class="accordion" id="buyingquestion">
  292.                     <div class="row">
  293.                         <div class="col-md-6">
  294.                             <div class="accordion-item rounded border-0 shadow">
  295.                                 <h2 class="accordion-header" id="headingOne">
  296.                                     <button class="accordion-button border-0 bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
  297.                                         aria-expanded="true" aria-controls="collapseOne">
  298.                                         How does it work ?
  299.                                     </button>
  300.                                 </h2>
  301.                                 <div id="collapseOne" class="accordion-collapse border-0 collapse show" aria-labelledby="headingOne"
  302.                                     data-bs-parent="#buyingquestion">
  303.                                     <div class="accordion-body text-muted bg-white">
  304.                                         There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
  305.                                     </div>
  306.                                 </div>
  307.                             </div>
  308.                             
  309.                             <div class="accordion-item rounded border-0 shadow mt-3">
  310.                                 <h2 class="accordion-header" id="headingTwo">
  311.                                     <button class="accordion-button border-0 bg-white collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
  312.                                         aria-expanded="false" aria-controls="collapseTwo">
  313.                                         Do I need a designer to use Starty ?
  314.                                     </button>
  315.                                 </h2>
  316.                                 <div id="collapseTwo" class="accordion-collapse border-0 collapse" aria-labelledby="headingTwo"
  317.                                     data-bs-parent="#buyingquestion">
  318.                                     <div class="accordion-body text-muted bg-white">
  319.                                         There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
  320.                                     </div>
  321.                                 </div>
  322.                             </div>
  324.                             <div class="accordion-item rounded border-0 shadow mt-3">
  325.                                 <h2 class="accordion-header" id="headingThree">
  326.                                     <button class="accordion-button border-0 bg-white collapsed" type="button" data-bs-toggle="collapse"
  327.                                         data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  328.                                         What do I need to do to start selling ?
  329.                                     </button>
  330.                                 </h2>
  331.                                 <div id="collapseThree" class="accordion-collapse border-0 collapse" aria-labelledby="headingThree"
  332.                                     data-bs-parent="#buyingquestion">
  333.                                     <div class="accordion-body text-muted bg-white">
  334.                                         There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
  335.                                     </div>
  336.                                 </div>
  337.                             </div>
  339.                             <div class="accordion-item rounded border-0 shadow mt-3">
  340.                                 <h2 class="accordion-header" id="headingfive">
  341.                                     <button class="accordion-button border-0 bg-white collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsefive"
  342.                                         aria-expanded="false" aria-controls="collapsefive">
  343.                                         Does CMR offer relocation assistance?
  344.                                     </button>
  345.                                 </h2>
  346.                                 <div id="collapsefive" class="accordion-collapse border-0 collapse" aria-labelledby="headingfive"
  347.                                     data-bs-parent="#buyingquestion">
  348.                                     <div class="accordion-body text-muted bg-white">
  349.                                         There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
  350.                                     </div>
  351.                                 </div>
  352.                             </div>                            
  353.                         </div>
  355.                         <div class="col-md-6">
  356.                             <div class="accordion-item rounded border-0 shadow mt-3 mt-sm-0">
  357.                                 <h2 class="accordion-header" id="headingnine">
  358.                                     <button class="accordion-button border-0 bg-white collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsenine"
  359.                                         aria-expanded="false" aria-controls="collapsenine">
  360.                                         What is the salary like at CMR?
  361.                                     </button>
  362.                                 </h2>
  363.                                 <div id="collapsenine" class="accordion-collapse border-0 collapse" aria-labelledby="headingnine"
  364.                                     data-bs-parent="#buyingquestion">
  365.                                     <div class="accordion-body text-muted bg-white collapsed">
  366.                                         There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
  367.                                     </div>
  368.                                 </div>
  369.                             </div>
  370.                             
  371.                             <div class="accordion-item rounded border-0 shadow mt-3">
  372.                                 <h2 class="accordion-header" id="headingten">
  373.                                     <button class="accordion-button border-0 bg-white collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseten"
  374.                                         aria-expanded="false" aria-controls="collapseten">
  375.                                         What is a typical working day like at CMR?
  376.                                     </button>
  377.                                 </h2>
  378.                                 <div id="collapseten" class="accordion-collapse border-0 collapse" aria-labelledby="headingten"
  379.                                     data-bs-parent="#buyingquestion">
  380.                                     <div class="accordion-body text-muted bg-white">
  381.                                         There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
  382.                                     </div>
  383.                                 </div>
  384.                             </div>
  386.                             <div class="accordion-item rounded border-0 shadow mt-3">
  387.                                 <h2 class="accordion-header" id="headingeleven">
  388.                                     <button class="accordion-button border-0 bg-white collapsed" type="button" data-bs-toggle="collapse"
  389.                                         data-bs-target="#collapseeleven" aria-expanded="false" aria-controls="collapseeleven">
  390.                                         What is the work environment like at CMR?
  391.                                     </button>
  392.                                 </h2>
  393.                                 <div id="collapseeleven" class="accordion-collapse border-0 collapse" aria-labelledby="headingeleven"
  394.                                     data-bs-parent="#buyingquestion">
  395.                                     <div class="accordion-body text-muted bg-white">
  396.                                         There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
  397.                                     </div>
  398.                                 </div>
  399.                             </div>
  401.                             <div class="accordion-item rounded border-0 shadow mt-3">
  402.                                 <h2 class="accordion-header" id="headingtwelve">
  403.                                     <button class="accordion-button border-0 bg-white collapsed" type="button" data-bs-toggle="collapse"
  404.                                         data-bs-target="#collapsetwelve" aria-expanded="false" aria-controls="collapsetwelve">
  405.                                         What are working conditions like at CMR?
  406.                                     </button>
  407.                                 </h2>
  408.                                 <div id="collapsetwelve" class="accordion-collapse border-0 collapse" aria-labelledby="headingtwelve"
  409.                                     data-bs-parent="#buyingquestion">
  410.                                     <div class="accordion-body text-muted bg-white">
  411.                                         There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
  412.                                     </div>
  413.                                 </div>
  414.                             </div>
  415.                         </div><!--end col-->
  416.                     </div><!--end row-->
  417.                 </div><!--end -->
  418.             </div><!--end col-->
  419.         </div><!--end row-->
  420.     </div><!--end container-->
  421.     #}
  422.     
  423.     <div class="container mb-60">
  424.         <div class="row align-items-center">
  425.             <div class="col-lg-5 col-md-5 col-12">
  426.                 <img src="{{ asset('assets/website/images/app/apps.png') }}" class="img-fluid" alt="">
  427.             </div><!--end col-->
  429.             <div class="col-lg-7 col-md-7 col-12 mt-4 mt-sm-0 pt-2 pt-sm-0">
  430.                 <div class="section-title ms-lg-5">
  431.                     <h4 class="title mb-4">Publicación en Android en 72 horas</h4>
  432.                     <p class="text-muted para-desc mb-0">La aplicación móvil será publicada en Google Play Store. Para que todos los miembros de su Iglesia que tengan un teléfono android puedan descargarla</p>
  433.                     <div class="my-4">
  434.                         {#<a href="javascript:void(0)" class="btn btn-lg btn-dark mt-2 me-2"><i class="uil uil-apple"></i> App Store</a>#}
  435.                         <a href="javascript:void(0)" class="btn btn-lg btn-dark mt-2"><i class="uil uil-google-play"></i> Play Store</a>
  436.                     </div>
  437.                     {#
  438.                     <div class="d-inline-block">
  439.                         <div class="pt-4 d-flex align-items-center border-top">
  440.                             <i data-feather="smartphone" class="fea icon-md me-2 text-primary"></i>
  441.                             <div class="content">
  442.                                 <h6 class="mb-0">Install app now on your cellphones</h6>
  443.                                 <a href="javascript:void(0)" class="text-primary">Learn More <i class="uil uil-angle-right-b align-middle"></i></a> 
  444.                             </div>
  445.                         </div>
  446.                     </div>
  447.                     #}
  448.                 </div>
  449.             </div><!--end col-->
  450.         </div><!--end row-->
  451.     </div><!--end container-->
  452. </section><!--end section-->
  453. <!-- End -->
  456. <section class="section bg-light" id='pricing'>
  457.     <div class="container">
  458.         <div class="row align-items-center">
  459.             <div class="col-12">
  460.                 <div class="section-title text-center mb-4 pb-2">
  461.                     <h6 class="text-primary">Precios accesibles</h6>
  462.                     <h4 class="title fw-semibold mt-2 mb-3">Seleccione el plan que<br>se adapte mejor a su congregación</h4>
  463.                     <p class="text-muted para-desc mx-auto mb-0">Todos los planes son de pago mensual. Todos los precios son en USD.</p>
  464.                 </div>
  465.             </div><!--end col-->
  466.         </div><!--end row-->
  468.         <div class="row">
  469.             <div class="col-md-12">
  470.                 <div class="card pricing price-two rounded border-0 shadow px-4 py-4 bg-white">
  471.                     <div class='row'>
  472.                         <div class='col-md-3 text-center'>
  473.                             <br>
  474.                             <h1 class="display-4 fw-medium mb-0">$60</h1>                            
  475.                         </div>
  476.                         <div class='col-md-9'>
  477.                             <br>
  478.                             <p style='margin:0px; padding:0px;'>
  479.                             Pago único que se realiza el primer mes, adicional al costo mensual, para cubrir los gastos de configuración inicial y de publicación. Los costos mensuales varían según la cantidad de miembros de su Iglesia. Se inicia a pagar el costo mensual a partir de la publicación de su Iglesia en PlayStore
  480.                             </p>
  481.                             <br>
  482.                         </div>
  483.                     </div>
  484.                 </div>
  485.             </div>
  486.         </div>
  488.         <div class="row">
  489.             <div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
  490.                 <div class="card pricing price-two rounded text-center border-0 shadow px-4 py-5 bg-white">
  491.                     <div class="mb-5">
  492.                         <h1 class="display-4 fw-medium mb-0">$25</h1>
  493.                         <p class="text-muted mb-0">Mensuales</p>
  494.                     </div>
  496.                     <div class="p-2 bg-light h6 mx-5 rounded-lg">
  497.                         <span class="text-dark text-uppercase">Plan Inicial</span>
  498.                     </div>
  499.                     
  500.                     <h3 style='margin-top:20px;'>De 1 a 50</h3>
  501.                     <p>Usuarios Registrados</p>
  502.                     <hr> 
  503.                     
  504.                     <ul class="list-unstyled mb-0" style='text-align:left'>
  505.                         <li class="text-muted mt-3">&bull; Aplicación Móvil Personalizada</li>
  506.                         <li class="text-muted mt-3">&bull; Sitio web Administrativo</li>                        
  507.                         <li class="text-muted mt-3">&bull; Ayuda por medio de Chat en Vivo</li>                                                
  508.                         <li class="text-muted mt-3">&bull; Todas las <a href="#features">funciones</a> habilitadas</li>                        
  509.                     </ul>                    
  511.                     <div class="mt-4 pt-2">
  512.                         <a href="{{ path('homepage_register',{'plan':1}) }}" class="btn btn-light">Solicitar este Plan</a>
  513.                     </div>
  514.                 </div>
  515.             </div><!--end col-->
  517.             <div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
  518.                 <div class="card pricing price-two rounded text-center border-0 shadow px-4 py-5 bg-white">
  519.                     <div class="mb-5">
  520.                         <h1 class="display-4 fw-medium mb-0">$59</h1>
  521.                         <p class="text-muted mb-0">Mensuales</p>
  522.                     </div>
  524.                     <div class="p-2 bg-light h6 mx-5 rounded-lg">
  525.                         <span class="text-dark text-uppercase">Plan Intermedio</span>
  526.                     </div>
  527.                     
  528.                     <h3 style='margin-top:20px;'>De 51 a 200</h3>
  529.                     <p>Usuarios Registrados</p>
  530.                     <hr>                    
  532.                     <ul class="list-unstyled mb-0" style='text-align:left'>
  533.                         <li class="text-muted mt-3">&bull; Aplicación Móvil Personalizada</li>
  534.                         <li class="text-muted mt-3">&bull; Sitio web Administrativo</li>                        
  535.                         <li class="text-muted mt-3">&bull; Ayuda por medio de Chat en Vivo</li>                                                
  536.                         <li class="text-muted mt-3">&bull; Todas las <a href="#features">funciones</a> habilitadas</li>                        
  537.                     </ul>
  539.                     <div class="mt-4 pt-2">
  540.                         <a href="{{ path('homepage_register',{'plan':2}) }}" class="btn btn-light">Solicitar este Plan</a>
  541.                     </div>
  542.                 </div>
  543.             </div><!--end col-->
  545.             <div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
  546.                 <div class="card pricing price-two rounded text-center border-0 shadow px-4 py-5 bg-white">
  547.                     <div class="mb-5">
  548.                         <h1 class="display-4 fw-medium mb-0">$95</h1>
  549.                         <p class="text-muted mb-0">Plan Avanzado</p>
  550.                     </div>
  552.                     <div class="p-2 bg-light h6 mx-5 rounded-lg">
  553.                         <span class="text-dark text-uppercase">Plan Avanzado</span>
  554.                     </div>
  555.         
  556.                     <h3 style='margin-top:20px;'>De 201 a 400</h3>
  557.                     <p>Usuarios Registrados</p>
  558.                     <hr>
  559.                     <ul class="list-unstyled mb-0" style='text-align:left'>
  560.                         <li class="text-muted mt-3">&bull; Aplicación Móvil Personalizada</li>
  561.                         <li class="text-muted mt-3">&bull; Sitio web Administrativo</li>                        
  562.                         <li class="text-muted mt-3">&bull; Ayuda por medio de Chat en Vivo</li>                                                
  563.                         <li class="text-muted mt-3">&bull; Todas las <a href="#features">funciones</a> habilitadas</li>                        
  564.                     </ul>
  565.                     <div class="mt-4 pt-2">
  566.                         <a href="{{ path('homepage_register',{'plan':3}) }}" class="btn btn-light">Solicitar este Plan</a>
  567.                     </div>
  568.                 </div>
  569.             </div><!--end col-->
  570.         </div><!--end row-->
  571.     </div><!--end container-->
  572. </section><!--end section-->
  577. <!-- Start Contact -->
  578. <section class="section" id="contact">
  579.     <div class="container">
  580.         <div class="row justify-content-center">
  581.             <div class="col-lg-8">
  582.                 <div class="section-title mb-5 pb-2 text-center">
  583.                     <h4 class="title mb-3">Comuníquese con nosotros</h4>
  584.                     <p class="text-muted para-desc mx-auto mb-0">
  585.                         Será un gusto resolver todas las dudas que usted tenga. Ingrese sus datos en el siguiente formulario y nos pondremos en contacto con usted lo antes posible.
  586.                     </p>
  587.                 </div>
  588.                 
  589.                 {{ include('flash.html.twig') }}
  590.                 
  591.                 <div class="custom-form">
  592.                     <form method="post" id='contactForm' name="myForm" action="{{path('homepage_contact_execute')}}">
  593.                         <p id="error-msg" class="mb-0"></p>
  594.                         <div id="simple-msg"></div>
  595.                         <div class="row">
  596.                             <div class="col-md-6">
  597.                                 <div class="mb-3">
  598.                                     <label class="form-label">Su Nombre <span class="text-danger">*</span></label>
  599.                                         <input name="contact[name]" id="name" type="text" class="form-control" required="true">
  600.                                 </div>
  601.                             </div>
  603.                             <div class="col-md-6">
  604.                                 <div class="mb-3">
  605.                                     <label class="form-label">Email <span class="text-danger">*</span></label>
  606.                                         <input name="contact[email]" id="email" type="email" class="form-control"  required="true">
  607.                                 </div> 
  608.                             </div><!--end col-->
  610.                             <div class="col-12">
  611.                                 <div class="mb-3">
  612.                                     <label class="form-label">Nombre de Iglesia <span class="text-danger">*</span></label>
  613.                                         <input name="contact[church_name]" id="subject" class="form-control">
  614.                                 </div>
  615.                             </div><!--end col-->
  617.                             <div class="col-12">
  618.                                 <div class="mb-3">
  619.                                     <label class="form-label">Escriba su Pregunta <span class="text-danger">*</span></label>
  620.                                         <textarea name="contact[comments]" id="comments" rows="4" class="form-control" required="true"></textarea>
  621.                                 </div>
  622.                             </div>
  623.                         </div>
  624.                         <br>
  625.                         <div class='row'>
  626.                             <div class='col-6'>                                
  627.                                   <div class="g-recaptcha" data-sitekey="6LcZFegeAAAAANRxBjPPp42LpCa3L6Nk9f4jwIZy" required='true'></div>
  628.                             </div>
  629.                         </div>                                                
  630.                         <br>
  631.                         <div class="row">
  632.                             <div class="col-12">
  633.                                 <div class="d-grid">
  634.                                     <button type="submit" id="submit" name="send" class="btn btn-primary">Enviar Mensaje</button>
  635.                                 </div>
  636.                             </div><!--end col-->
  637.                         </div><!--end row-->
  638.                     </form>
  639.                 </div><!--end custom-form-->
  640.             </div><!--end col-->
  641.         </div><!--end row-->
  642.     </div><!--end container-->
  643. </section><!--end section-->
  645. {% endblock %}
  646. {% block javascripts %}
  648. <script src='https://www.google.com/recaptcha/api.js'></script>
  649. <script>
  650.     
  651.     
  652.     
  653.     document.getElementById("contactForm").addEventListener("submit",function(evt)
  654.     {
  655.           
  656.         var response = grecaptcha.getResponse();
  657.         if(response.length == 0) 
  658.         { 
  659.             //reCaptcha not verified
  660.             alert("Por favor, verifique que es un humano haciendo click sobre la casilla arriba del botón azul"); 
  661.             evt.preventDefault();
  662.             return false;
  663.         }
  664.         
  665.     });
  666.     
  667. </script>     
  668. {% endblock %}