templates/home.html.twig line 1

  1. {% extends './base.html.twig' %}
  3. {% block title %}{{ 'title_home'|trans({}, 'messages') }}{% endblock %}
  5. {% block body %}
  6.     <div class="border-bottom">
  7.         <div class="bg-light py-1">
  8.             <div class="container-fluid">
  9.                 <div class="row align-items-center gx-lg-2 gx-0">
  10.                     <div class="col-6"><span>A simple way to send SMS messages to your customers.</span></div>
  11.                     <div class="col-6 text-end">
  12.                         {{ flags|raw }}
  13.                     </div>
  14.                 </div>
  15.             </div>
  16.         </div>
  17.         <div class="py-3">
  18.             <div class="container-fluid">
  19.                 <div class="row w-100 align-items-center gx-lg-2 gx-0">
  20.                     <div class="col-xxl-2 col-lg-3 col-md-6 col-5">
  21.                         <a class="navbar-brand d-none d-lg-block" href="./index.html">
  22.                             <img src="../../../internalImages/logo.png" alt="eCommerce HTML Template" style="width: 200px;">
  23.                         </a>
  24.                         <div class="d-flex justify-content-between w-100 d-lg-none">
  25.                             <a class="navbar-brand" href="./index.html">
  26.                                 <img src="../../../internalImages/logo.png" alt="eCommerce HTML Template" style="width: 200px;">
  27.                             </a>
  28.                         </div>
  29.                     </div>
  30.                     <div class="col-lg-10 col-xxl-10 text-end col-md-6 col-7">
  31.                         <div class="list-inline">
  32.                             <div class="list-inline-item">
  33.                                 {% if is_granted('ROLE_USER') %}
  34.                                     <a href="{{ path('logout') }}" class="text-decoration-none" title="{{ 'logout_button_alt'|trans({}, 'messages') }}">
  35.                                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="40"><path d="M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34zM192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12z"/></svg>
  36.                                     </a>
  37.                                 {% else %}
  38.                                     <a href="{{ path('login') }}" class="text-decoration-none" title="{{ 'login_button_alt'|trans({}, 'messages') }}">
  39.                                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="40"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8 .4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z"/></svg>
  40.                                     </a>                        
  41.                                 {% endif %}        
  42.                             </div>
  43.                         </div>
  44.                     </div>
  45.                 </div>
  46.             </div>
  47.         </div>
  48.         <nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Eighth navbar example">
  49.             <div class="container-fluid">
  50.               
  51.               <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
  52.                 <span class="navbar-toggler-icon"></span>
  53.               </button>
  54.         
  55.               <div class="navbar-collapse collapse" id="navbarsExample07">
  56.                 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
  57.                   <li class="nav-item">
  58.                     {% if is_granted('ROLE_USER') %}
  59.                         <a href="{{ path('home') }}" class="nav-link" title="{{ 'home_button_alt'|trans({}, 'messages') }}"><i class="fas fa-user-edit"></i> {{ 'home_button'|trans({}, 'messages') }}</a>
  60.                     {% endif %}
  61.                   </li>
  62.                   <li class="nav-item dropdown">
  63.                     <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Categorias</a>
  64.                     <ul class="dropdown-menu">
  65.                       <li><a class="dropdown-item" href="#">Action</a></li>
  66.                       <li><a class="dropdown-item" href="#">Another action</a></li>
  67.                       <li><a class="dropdown-item" href="#">Something else here</a></li>
  68.                     </ul>
  69.                   </li>
  70.                 </ul>
  71.                 <form role="search">
  72.                   <input class="form-control" type="search" placeholder="Search" aria-label="Search">
  73.                 </form>
  74.               </div>
  75.             </div>
  76.           </nav>
  77.         
  78.     </div>
  79.     <div class="container-fluid mb-5">
  80.         <div class="row">
  81.             {% set message = '' %} {% set color = '' %} {% set filename = '' %}
  82.             {% for key, value in app.flashes %}
  83.                 {% if key == 'message' %}
  84.                     {% set message = value[0] %}
  85.                 {% elseif key == 'color' %}
  86.                     {% set color = value[0] %}
  87.                 {% elseif key == 'filename' %}
  88.                     {% set filename = value[0] %}
  89.                 {% else %}                
  90.                 {% endif %}
  91.             {% endfor %}
  92.             {% if message %}
  93.             <div class="container">
  94.                 <div class="row d-flex justify-content-between align-items-center my-3 pb-3">
  95.                     <div class="alert alert-{{ color }} mt-3" role="alert">
  96.                         {{ message }}
  97.                     </div>
  98.                 </div>
  99.             </div>
  100.             {% endif %} 
  101.             <div class="container pt-3">
  102.                 <div class="row">
  103.                     <section class="py-5">
  104.                         <div class="container">
  105.                             <div class="row justify-content-center text-center mb-4">
  106.                                 <div class="col-lg-8 col-xxl-7">
  107.                                     <h2 class="display-5 fw-bold">How it Works</h2>
  108.                                     <p class="lead">Follow these steps to create an account and start using our SMS service.</p>
  109.                                 </div>
  110.                             </div>
  111.                             <div class="row">
  112.                                 <div class="col-md-3">
  113.                                     <div class="text-center position-relative">
  114.                                         <div class="step-icon mx-auto bg-primary border rounded-circle d-flex align-items-center justify-content-center " style="width:120px;height:120px;">
  115.                                             <i class="fas fa-user-plus text-white" style="font-size: 30px;"></i>
  116.                                         </div>
  117.                                         <h4 class="mt-3 fs-5">Create Account</h4>
  118.                                         <p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Fill out the registration form to create an account.</p>
  119.                                         <div class="arrow-icon position-absolute d-none d-lg-block" style="top:50px; right:-25px">
  120.                                             <svg class="bi bi-arrow-right" fill="currentColor" height="30" viewBox="0 0 16 16" width="30" xmlns="http://www.w3.org/2000/svg">
  121.                                             <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" fill-rule="evenodd"></path></svg>
  122.                                         </div>
  123.                                     </div>
  124.                                 </div>
  125.                                 <div class="col-md-3">
  126.                                     <div class="text-center position-relative">
  127.                                         <div class="step-icon mx-auto bg-primary border rounded-circle d-flex align-items-center justify-content-center" style="width: 120px;height: 120px;">
  128.                                             <svg class="bi bi-envelope-exclamation text-white" fill="currentColor" height="30" viewBox="0 0 16 16" width="30" xmlns="http://www.w3.org/2000/svg">
  129.                                             <path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2H2Zm3.708 6.208L1 11.105V5.383l4.708 2.825ZM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2-7-4.2Z"></path>
  130.                                             <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1.5a.5.5 0 0 1-1 0V11a.5.5 0 0 1 1 0Zm0 3a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z"></path></svg>
  131.                                         </div>
  132.                                         <h4 class="mt-3 fs-5">Activate Your Accoount</h4>
  133.                                         <p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Check your email for the activation link.</p>
  134.                                         <div class="arrow-icon d-none d-lg-block position-absolute" style="top:50px; right:-25px">
  135.                                             <svg class="bi bi-arrow-right" fill="currentColor" height="30" viewBox="0 0 16 16" width="30" xmlns="http://www.w3.org/2000/svg">
  136.                                             <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" fill-rule="evenodd"></path></svg>
  137.                                         </div>
  138.                                     </div>
  139.                                 </div>
  140.                                 <div class="col-md-3">
  141.                                     <div class="text-center position-relative">
  142.                                         <div class="step-icon mx-auto bg-primary border rounded-circle d-flex align-items-center justify-content-center" style="width: 120px;height: 120px;">
  143.                                             <i class="fas fa-money-check-alt text-white" style="font-size: 30px;"></i>
  144.                                         </div>
  145.                                         <h4 class="mt-3 fs-5">Purchase Credits</h4>
  146.                                         <p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">Purchase credits to send SMS messages.</p>
  147.                                         <div class="arrow-icon d-none d-lg-block position-absolute" style="top:50px; right:-25px">
  148.                                             <svg class="bi bi-arrow-right" fill="currentColor" height="30" viewBox="0 0 16 16" width="30" xmlns="http://www.w3.org/2000/svg">
  149.                                             <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" fill-rule="evenodd"></path></svg>
  150.                                         </div>
  151.                                     </div>
  152.                                 </div>
  153.                                 <div class="col-md-3">
  154.                                     <div class="text-center position-relative">
  155.                                         <div class="step-icon mx-auto bg-primary border rounded-circle d-flex align-items-center justify-content-center" style="width: 120px;height: 120px;">
  156.                                             <i class="fas fa-key text-white" style="font-size: 30px;"></i>
  157.                                         </div>
  158.                                         <h4 class="mt-3 fs-5">Send SMS</h4>
  159.                                         <p class="lead text-muted mt-4 fs-5 px-lg-3 mb-5 mb-lg-0">You will receive an API key to send SMS messages.</p>
  160.                                     </div>
  161.                                 </div>
  162.                             </div>
  163.                         </div>
  164.                     </section>
  165.                 </div>
  166.             </div>
  167.         </div>
  168.     </div> 
  169.     
  170. {% endblock %}