templates/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.     {{ encore_entry_link_tags('styles/checkbox') }}
  5. {% endblock %}
  7. {% block body %}
  8.     <div class="presentation px-4">
  9.         <div class="row text-center">
  10.             <div class="col-12">
  11.                 <p>{{ 'index.presentation.h'|trans|raw }}</p>
  12.                 <p>{{ 'index.presentation.p'|trans|raw }}</p>
  13.                 <a href="{{ path('register') }}">{{ 'index.discover'|trans|raw }}</a>
  14.             </div>
  15.             <div class="col-12">
  16.                 <img src="{{ asset('images/presentation.svg') }}" alt="socialVault - presentation" class="img-fluid" >
  17.             </div>
  18.         </div>
  19.     </div>
  20.     <div class="how px-4">
  21.         <div class="title">
  22.             <p class="purple_title">{{ 'index.how.h'|trans|raw }}</p>
  23.         </div>
  24.         <div class="row text-center icones">
  25.             <div class="col-lg-4 col-sm-12 col-md-4 col-xl-4">
  26.                 <img src="{{ asset('images/widget.svg') }}" alt="">
  27.                 <div>
  28.                     <p>{{ 'index.how.widget.h'|trans|raw }}</p>
  29.                     <p>{{ 'index.how.widget.p'|trans|raw }}</p>
  30.                 </div>
  31.             </div>
  32.             <div class="col-lg-4 col-sm-12 col-md-4 col-xl-4">
  33.                 <img src="{{ asset('images/notification.svg') }}" alt="">
  34.                 <div>
  35.                     <p>{{ 'index.how.notification.h'|trans|raw }}</p>
  36.                     <p>{{ 'index.how.notification.p'|trans|raw }}</p>
  37.                 </div>
  38.             </div>
  39.             <div class="col-lg-4 col-sm-12 col-md-4 col-xl-4">
  40.                 <img src="{{ asset('images/search.svg') }}" alt="">
  41.                 <div>
  42.                     <p>{{ 'index.how.search.h'|trans|raw }}</p>
  43.                     <p>{{ 'index.how.search.p'|trans|raw }}</p>
  44.                 </div>
  45.             </div>
  46.         </div>
  47.     </div>
  49.     <div class="subscription text-center mt-4">
  50.         <div class="row justify-content-center mx-0">
  51.             <div class="card-group card-group-container">
  52.                 <div class="card col-sm-12 col-md-6 col-lg-4 col-xl-4" id="payment-card">
  53.                     <div class="card-body bg-white" style="border-radius: 20px;">
  54.                         <div class="card-header pb-3" style="background-color: white; border: none;">
  55.                             <span class="sub-title"><strong>{{ 'index.payment.free.title'|trans }}</strong></span>
  56.                         </div>
  57.                         <h5 class="card-title">{{ 'index.payment.free.description'|trans({'%count%': MAX_UPLOAD}) }}</h5>
  58.                         <p class="card-text py-4 font-weight-bold" >{{ 'index.payment.free.number'|trans({'%count%': MAX_UPLOAD}) }}</p><br>
  59.                         <div class="souscrire_btn"><a href="{{ path('register') }}" class="btn purple_btn text-white">{{ 'subscribe'|trans({}, 'commons')|upper }}</a></div>
  60.                     </div>
  61.                 </div>
  63.                 <div class="card col-sm-12 col-md-6 col-lg-4 col-xl-4" id="payment-card">
  64.                     <div class="card-body bg-white" style="border-radius: 20px;">
  65.                         <div class="card-header pb-3" style="background-color: white; border: none;">
  66.                             <span class="sub-title">{{ 'index.payment.pro.title'|trans }}</span>
  68.                         </div>
  69.                         <h5 class="card-title">{{ 'index.payment.pro.description'|trans }}</h5>
  70.                         <div class="demo">
  71.                             <form class="mensuel_annuel" action="#">
  72.                                 <span class="text-secondary mr-2">{{ 'IntervalType.month'|trans({}, 'forms')|upper }}</span>
  74.                                 <div class="switch">
  75.                                     <input id="switch-1" type="checkbox" class="switch-input">
  76.                                     <label for="switch-1" class="switch-label">Switch</label>
  77.                                 </div>
  79.                                 <span class="text-secondary ml-2">{{ 'IntervalType.year'|trans({}, 'forms')|upper }}</span>
  80.                             </form>
  81.                         </div>
  82.                         <p class="card-text py-4 font-weight-bold" data-type="price">{{ displayPrice(subscriptions[0].amount, app.request.locale) }}<br><br></p>
  83.                         <div class="souscrire_btn"><a href="#" class="btn purple_btn text-white" id="sub_button" data-stripe="{{ subscriptions[0].stripeId }}">{{ 'subscribe'|trans({}, 'commons')|upper }}</a></div>
  84.                     </div>
  85.                 </div>
  86.             </div>
  87.         </div>
  88.     </div>
  90.     <div class="started px-4">
  91.         <div class="title mb-0">
  92.             <p class="yellow_title">{{ 'index.started.h'|trans|raw }}</p>
  93.         </div>
  94.         <div class="row">
  95.             <div class="col-12 text-center">
  96.                 <p>{{ 'index.started.p'|trans|raw }}</p>
  98.                 <div class="yellow_card text-center mt-5">
  99.                     <div class="yellow_card_header">
  100.                         <a href="{{ path('register') }}">{{ 'index.started.card.header'|trans|raw }}</a>
  101.                     </div>
  103.                     <div class="yellow_card_body">
  104.                         <span class="yellow_card_title">{{ 'index.started.card.body.title'|trans|raw }}</span>
  105.                         <ul class="yellow_card_text">
  106.                             <li><img class="mr-3 align-top" src="{{ asset('images/checker_yellow.svg') }}" alt="">{{ 'index.started.card.body.text.1'|trans|raw }}</li>
  107.                             <li><img class="mr-3 align-top" src="{{ asset('images/checker_yellow.svg') }}" alt="">{{ 'index.started.card.body.text.2'|trans|raw }}</li>
  108.                             <li><img class="mr-3 align-top" src="{{ asset('images/checker_yellow.svg') }}" alt="">{{ 'index.started.card.body.text.3'|trans|raw }}</li>
  109.                             <li><img class="mr-3 align-top" src="{{ asset('images/checker_yellow.svg') }}" alt="">{{ 'index.started.card.body.text.4'|trans|raw }}</li>
  110.                         </ul>
  111.                     </div>
  113.                     <div class="yellow_card_footer">
  114.                         <a href="{{ path('register') }}">{{ 'index.started.card.footer'|trans|raw }}</a>
  115.                     </div>
  116.                 </div>
  117.             </div>
  118.         </div>
  119.     </div>
  121.     <div class="partnership mt-5 px-4">
  122.         <div class="title mb-0">
  123.             <p class="purple_title">{{ 'index.partnership.h'|trans|raw }}</p>
  124.         </div>
  125.         <div class="row">
  126.             <div class="col text-center">
  127.                 <p>{{ 'index.partnership.p'|trans|raw }}</p>
  128.                 <a href="https://www.cosavostra.com" target="_blank"><img src="{{ asset('images/logo_cosavostra.svg') }}" alt=""></a>
  129.             </div>
  130.         </div>
  131.     </div>
  132. {% endblock %}
  134. {% block javascripts %}
  135.     <script src="https://socialvault.com/snippet/80372d97d0e055fe/socialvault.js"></script>
  137.     <script>
  138.         $(document).ready(function()
  139.         {
  140.             let price = $('p[data-type="price"]');
  142.             $('.switch-input').change(function()
  143.             {
  144.                 if (this.checked) {
  145.                     price.html("<span style='text-decoration: line-through;'>{{ displayPrice(subscriptions[1].amount, app.request.locale) }}</span><br>{{ displayPrice((12 - dayToMonth(subscriptions[1].trialPeriodDays)) * subscriptions[0].amount, app.request.locale) }}<span class='ml-2' style='font-size: 0.7rem;'>({{ 'user_subscription.index.trial.month'|trans({'%count%': subscriptions[1].trialPeriodDays|dayToMonth})|raw }})</span>");
  146.                     $('#sub_button').attr('data-stripe', '{{ subscriptions[1].stripeId }}');
  147.                 } else {
  148.                     price.html("{{ displayPrice(subscriptions[0].amount, app.request.locale) }}<br><br>");
  149.                     $('#sub_button').attr('data-stripe', '{{ subscriptions[0].stripeId }}');
  150.                 }
  151.             });
  153.             $('#sub_button').click(function(e) {
  154.                 e.preventDefault();
  156.                 url = '{{ path('register', {'stripeId': 'STRIPE'}) }}';
  157.                 url = url.replace('STRIPE', $(this).data('stripe'));
  158.                 window.location.href = url;
  159.             })
  160.         });
  161.     </script>
  162. {% endblock %}