templates/front_myflix/index.html.twig line 1

Open in your IDE?
  1. {% extends 'front_myflix/base.html.twig' %}
  3. {% block body %}
  4.     <!-- Hero -->
  5.     <section id="slider" class="hero p-0 odd">
  6.         <div class="swiper-container no-slider animation slider-h-100 slider-h-auto">
  7.             <div class="swiper-wrapper">
  9.                 <!-- Item 1 -->
  10.                 <div class="swiper-slide slide-center">
  12.                     <!-- Media -->
  13.                     <video class="full-image to-bottom" data-mask="70" playsinline autoplay muted loop>
  14.                         <source src="{{ asset('assets_front_myflix/videos/city.mp4') }}" type="video/mp4"/>
  15.                     </video>
  17.                     <div class="slide-content row">
  18.                         <div class="col-12 d-flex justify-content-start justify-content-md-center inner">
  19.                             <div class="center text-left text-md-center">
  21.                                 <!-- Content -->
  22.                                 <h1 data-aos="zoom-in" data-aos-delay="2000" class="title effect-static-text">My<span
  23.                                             class="featured"><span>Flix</span></span></h1>
  24.                                 <p data-aos="zoom-in" data-aos-delay="2400"
  25.                                    class="description mr-auto ml-auto">{{ 'front.text.title'|trans }}</p>
  26.                                 <!-- <p data-aos="zoom-in" data-aos-delay="2400" class="description mr-auto ml-auto">Votre plateforme sécurisé, 100% paramétrable! </p>-->
  28.                                 <!-- Action -->
  29.                                 <div data-aos="fade-up" data-aos-delay="2800" class="buttons">
  30.                                     <div class="d-sm-inline-flex">
  31.                                         <a href="#contact"
  32.                                            class="smooth-anchor mt-4 btn primary-button">{{ 'front.text.menu.contact'|trans }}</a>
  33.                                         <a href="#about"
  34.                                            class="smooth-anchor ml-sm-4 mt-4 btn outline-button">{{ 'front.text.view.more'|trans }}</a>
  35.                                     </div>
  36.                                 </div>
  37.                             </div>
  38.                         </div>
  39.                     </div>
  40.                 </div>
  42.             </div>
  43.         </div>
  44.     </section>
  46.     <!-- About -->
  47.     <section id="about" class="section-2 highlights image-right featured">
  48.         <div class="container">
  49.             <div class="row">
  50.                 <div class="col-12 col-md-6 pr-md-5 align-self-center text-center text-md-left text">
  51.                     <div data-aos="fade-up" class="row intro">
  52.                         <div class="col-12 p-0">
  53.                             <h2><span class="featured"><span>{{ 'front.text.title.about'|trans }} </span></span> Myflix
  54.                                 ?</h2>
  55.                             <p>« My-flix.io » {{ 'front.text.title.text'|trans }}
  56.                                 <br/><br/>{{ 'front.text.title.text.2'|trans }} </p>
  57.                         </div>
  58.                     </div>
  59.                     <div class="row items">
  60.                         <div data-aos="fade-up" class="col-12 col-md-6 pr-md-4 item  p-2">
  61.                             <h4 class="myflix-title"><i class="mr-2 icon-lock"></i>{{ 'front.text.security'|trans }}
  62.                             </h4>
  63.                             <p>{{ 'front.text.security.text'|trans }}</p>
  64.                         </div>
  65.                         <div data-aos="fade-up" class="col-12 col-md-6 item  p-2">
  66.                             <h4 class="myflix-title"><img
  67.                                         src="{{ asset('assets_front_myflix/images/icons/cinema.png ') }}" class="mr-2"
  68.                                         alt="Data">{{ 'front.text.controle'|trans }}</h4>
  69.                             <p>{{ 'front.text.controle.text'|trans }}</p>
  70.                         </div>
  71.                     </div>
  72.                     <div class="row items">
  73.                         <div data-aos="fade-up" class="col-12 col-md-6 item  p-2">
  74.                             <h4 class="myflix-title"><img
  75.                                         src="{{ asset('assets_front_myflix/images/icons/marketing.png ') }}"
  76.                                         class="mr-2" alt="Data">{{ 'front.text.sponsoring'|trans }}</h4>
  77.                             <p>{{ 'front.text.sponsoring.text'|trans }} <br/>{{ 'front.text.sponsoring.text.2'|trans }}
  78.                             </p>
  79.                         </div>
  80.                         <div data-aos="fade-up" class="col-12 col-md-6 pr-md-4 item  p-2">
  81.                             <h4 class="myflix-title"><img
  82.                                         src="{{ asset('assets_front_myflix/images/icons/database.png ') }}" class="mr-2"
  83.                                         alt="Data">{{ 'front.text.data'|trans }}</h4>
  84.                             <p>{{ 'front.text.data.text'|trans }}</p>
  85.                         </div>
  86.                     </div>
  87.                 </div>
  88.                 <div class="col-12 col-md-6 p-0 image">
  89.                     <img src="{{ asset('assets_front_myflix/images/about.jpg ') }}" class="fit-image" alt="About">
  90.                 </div>
  91.             </div>
  92.         </div>
  93.     </section>
  95.     <!-- Services -->
  96.     <section id="services" class="section-3 odd offers">
  97.         <div class="container">
  98.             <div class="row intro">
  99.                 <div class="col-12 col-md-9 align-self-center text-center text-md-left">
  100.                     <h2>{{ 'front.text.title.service.1'|trans }} <span
  101.                                 class="featured"><span>{{ 'front.text.title.service.2'|trans }} </span></span></h2>
  102.                     <p>{{ 'front.service.text'|trans }}</p>
  103.                 </div>
  104.             </div>
  105.             <div class="row justify-content-center items">
  106.                 <div class="col-12 col-md-6 col-lg-4 item">
  107.                     <div class="card function-card">
  108.                         <div class="function-img"><img
  109.                                     src="{{ asset('assets_front_myflix/images/icons/diagram.png ') }}"
  110.                                     alt="{{ 'front.text.category'|trans }}" width="64"></div>
  111.                         <h4 class="function-title">{{ 'front.text.category'|trans }}</h4>
  112.                         <p class="function-para">{{ 'front.category.text'|trans }}</p>
  113.                     </div>
  114.                 </div>
  115.                 <div class="col-12 col-md-6 col-lg-4 item">
  116.                     <div class="card function-card">
  117.                         <div class="function-img"><img
  118.                                     src="{{ asset('assets_front_myflix/images/icons/publicity.png ') }}"
  119.                                     alt="{{ 'front.text.webinars'|trans }}" width="64"></div>
  120.                         <h4 class="function-title">{{ 'front.text.webinars'|trans }}</h4>
  121.                         <p class="function-para">{{ 'front.webinars.text'|trans }}</p>
  122.                     </div>
  123.                 </div>
  124.                 <div class="col-12 col-md-6 col-lg-4 item">
  125.                     <div class="card function-card">
  126.                         <div class="function-img"><img src="{{ asset('assets_front_myflix/images/icons/watch.png ') }}"
  127.                                                        alt="{{ 'front.text.view'|trans }}" width="64"></div>
  128.                         <h4 class="function-title">{{ 'front.text.view'|trans }}</h4>
  129.                         <p class="function-para">{{ 'front.view.text'|trans }}</p>
  130.                     </div>
  131.                 </div>
  132.                 <div class="col-12 col-md-6 col-lg-4 item">
  133.                     <div class="card function-card">
  134.                         <div class="function-img"><img src="{{ asset('assets_front_myflix/images/icons/chat.png ') }}"
  135.                                                        alt="{{ 'front.text.chat'|trans }}" width="64"></div>
  136.                         <h4 class="function-title">{{ 'front.text.chat'|trans }}</h4>
  137.                         <p class="function-para">{{ 'front.chat.text'|trans }}</p>
  138.                     </div>
  139.                 </div>
  140.                 <div class="col-12 col-md-6 col-lg-4 item">
  141.                     <div class="card function-card">
  142.                         <div class="function-img"><img src="{{ asset('assets_front_myflix/images/icons/backup.png ') }}"
  143.                                                        alt="{{ 'front.text.mnemonic'|trans }}" width="64"></div>
  144.                         <h4 class="function-title">{{ 'front.text.mnemonic'|trans }}</h4>
  145.                         <p class="function-para">{{ 'front.mnemonic.text'|trans }}</p>
  146.                     </div>
  147.                 </div>
  148.                 <div class="col-12 col-md-6 col-lg-4 item">
  149.                     <div class="card function-card">
  150.                         <div class="function-img"><img
  151.                                     src="{{ asset('assets_front_myflix/images/icons/attractif.png ') }}"
  152.                                     alt="{{ 'front.text.content'|trans }}" width="64"></div>
  153.                         <h4 class="function-title">{{ 'front.text.content'|trans }}</h4>
  154.                         <p class="function-para">{{ 'front.content.text'|trans }}</p>
  155.                     </div>
  156.                 </div>
  157.             </div>
  158.         </div>
  159.     </section>
  161.     <!-- Subscribe -->
  162.     <section id="subscribe" class="section-6 odd subscribe">
  163.         <div class="container smaller">
  164.             <div class="row">
  165.                 <div class="col-12 col-md-6 m-md-0 intro">
  166.                     <span class="pre-title m-0">{{ 'front.text.ask.demo'|trans }} {{ 'front.text.demo'|trans }}</span>
  167.                     <h2>
  168.                         <span class="featured"><span>{{ 'front.text.ask.demo'|trans }} </span></span> {{ 'front.text.demo'|trans }}
  169.                     </h2>
  170.                 </div>
  171.                 <div class="col-12 col-md-6">
  172.                     <form action="{{ path('ask_for_demo') }}" id="myflix-subscribe" class="row m-auto items">
  173.                         <input type="hidden" name="section" value="nexgen_subscribe">
  174.                         <div class="col-12 mt-0 input-group align-self-center item">
  175.                             <input type="text" name="name" class="form-control less-opacity field-name"
  176.                                    placeholder="{{ 'front.demo.name'|trans }}">
  177.                         </div>
  178.                         <div class="col-12 input-group align-self-center item">
  179.                             <input type="text" name="company" class="form-control less-opacity field-name"
  180.                                    placeholder="{{ 'front.demo.company'|trans }}">
  181.                         </div>
  182.                         <div class="col-12 input-group align-self-center item">
  183.                             <input type="email" name="email" class="form-control less-opacity field-email"
  184.                                    placeholder="{{ 'front.demo.email'|trans }}">
  185.                         </div>
  186.                         <div class="col-12 input-group align-self-center item">
  187.                             <a data-aos="zoom-in" class="btn primary-button">{{ 'front.demo.send'|trans }}</a>
  188.                         </div>
  189.                         <div class="col-12 item">
  190.                             <span class="alert form-alert mt-3 mb-0"></span>
  191.                         </div>
  192.                     </form>
  193.                 </div>
  194.             </div>
  195.         </div>
  196.     </section>
  198.     {% set check = 'false' %}
  199.     {% if is_granted('IS_AUTHENTICATED_FULLY') and getTypeUser('ROLE_SUPER_PARTNER') %}{% set check = 'true' %}{% endif %}
  201.     <!-- Pricing -->
  202.     <section id="pricing" class="section-4 plans">
  203.         <div class="container-fluid">
  204.             <div class="row text-center intro">
  205.                 <div class="col-12">
  206.                     <span class="pre-title">{{ 'front.text.plans'|trans }}</span>
  207.                     <h2>
  208.                         <span class="featured"><span>{{ 'front.plans.text.table'|trans }} </span></span> {{ 'front.plans.text.tarifs'|trans }}
  209.                     </h2>
  210.                     <p class="text-max-1000">{{ 'front.plans.text.title'|trans }}  </p>
  211.                 </div>
  212.                 {% if check == 'false' %}
  213.                     <div class="col-12 mt-5">
  214.                         <div class="switches-container">
  215.                             <input type="radio" id="switchMonthly" name="switchPlan" value="Monthly" checked="checked"/>
  216.                             <input type="radio" id="switchYearly" name="switchPlan" value="Yearly"/>
  217.                             <label for="switchMonthly">{{ 'front.plans.text.monthly'|trans }}</label>
  218.                             <label for="switchYearly"
  219.                                    {% if percent != 0 %}tooltip="{{ 'front.save.pricing' |trans }} {{ percent }}%"
  220.                                    flow="down"{% endif %}>{{ 'front.plans.text.annual'|trans }}</label>
  221.                             <div class="switch-wrapper">
  222.                                 <div class="switch">
  223.                                     <div>{{ 'front.plans.text.monthly'|trans }}</div>
  224.                                     <div>{{ 'front.plans.text.annual'|trans }}</div>
  225.                                 </div>
  226.                             </div>
  227.                         </div>
  228.                     </div>
  230.                     {% if  conversionRate['status']['euro'] or conversionRate['status']['usd'] %}
  231.                         <div class="col-12 mt-5">
  232.                             <div class="switcher currencyswitcher flex-horizontal-align-center text-center">
  233.                                 {% if conversionRate['status']['tnd'] %}
  234.                                     <span class="switcher-btn" id="TND"
  235.                                           style="{% if conversionRate['count'] == 1 %}display: none;{% endif %}">TND</span>
  236.                                 {% endif %}
  237.                                 {% if conversionRate['status']['euro'] %}
  238.                                     <span class="switcher-btn" id="EURO"
  239.                                           style="{% if conversionRate['count'] == 1 %}display: none;{% endif %}">EUR &euro;</span>
  240.                                 {% endif %}
  241.                                 {% if conversionRate['status']['usd'] %}
  242.                                     <span class="switcher-btn" id="USD"
  243.                                           style="{% if conversionRate['count'] == 1 %}display: none;{% endif %}">USD $</span>
  244.                                 {% endif %}
  245.                             </div>
  246.                         </div>
  247.                     {% endif %}
  248.                 {% endif %}
  249.             </div>
  250.             <!-- Package start -->
  251.             <div class="row justify-content-center text-center items">
  252.                 {% for key,package in packages %}
  253.                     {% set packageInfo =  package.getPackageInfo() %}
  254.                     <div class="col-12 col-md-6 col-lg-3 align-self-center text-center item package-myflix {% if detail and package.id !=  detail.package.id %} hide {% endif %}" >
  255.                         <div data-aos="fade-up" class="card " style="padding-left: 20px;padding-right: 20px">
  256.                             {% if  is_granted('IS_AUTHENTICATED_FULLY') == null %}
  257.                                 <form action="{{ path('save_payment_details_partner', {'package' : package.id  }) }}" method="post">
  258.                             {% else %}
  259.                                 {% if is_granted('IS_AUTHENTICATED_FULLY') and getTypeUser('ROLE_SUPER_PARTNER') %}
  260.                                     <form action="{{ path('super_partner_renew', {'package_id': package.id,'type': 'upgrade'}) }}" method="post">
  261.                                 {% else %}
  262.                                     <form action="#" class="smooth-anchor" method="post">
  263.                                 {% endif %}
  264.                             {% endif %}
  266.                                         <input type="hidden" value="tnd" name="currency-val" class="currency-val">
  267.                                         {% if package.onDemand != 1 %}
  268.                                             <button class="btn choose-plan mt-0 p-0" type="submit"><i class="btn-icon pulse fas fas fa-arrow-right"></i></button>
  269.                                         {% endif %}
  270.                                         <i class="icon icon-rocket"></i>
  271.                                         <h4>
  272.                                             {% if app.request.locale == 'fr' %}
  273.                                                 {{ package.title }}
  274.                                             {% else %}
  275.                                                 {{ package.titleEn }}
  276.                                             {% endif %}
  277.                                         </h4>
  278.                                         {% if package.onDemand == 1 %}
  279.                                             <h6>{{ 'super_admin.on_demand'|trans }}</h6>
  280.                                         {% endif %}
  281.                                         {% if package.onDemand != 1 %}
  282.                                             <div class="price currency-tnd">
  283.                                                 {% set amount =  package.amount %}
  284.                                                 {% set amounta =  ((package.amount * 12) * (1 - (percent / 100))) %}
  285.                                                 <input type="hidden" id="price__pack--{{ package.id }}" name="amount"
  286.                                                        value="{{ amount }}">
  287.                                                 <input type="hidden" id="price__pack---{{ package.id }}"
  288.                                                        class="amount-annuel" name="amount-annual" value="{{ amounta }}">
  289.                                                 <span id="price__canal--{{ package.id }}"
  290.                                                       class="amount-mensuel">{{ package.amount }}</span>
  291.                                                 <span id="price__canal---{{ package.id }}" class="amount-annuel"
  292.                                                       style="display: none;">{{ ((package.amount * 12) * (1 - (percent / 100))) }}</span>
  293.                                                 <i>DT TTC</i>
  294.                                                 <span class="plan"
  295.                                                       id="text-canal--{{ package.id }}"></span>
  296.                                             </div>
  297.                                             <div class="price currency-euro" style="display: none">
  298.                                                 {% set amount =  package.amountEuro %}
  299.                                                 {% set amount = package.amountEuro|number_format(0, '.', '') %}
  300.                                                 {% set amounta =  (((package.amountEuro * 12) * (1 - (percent / 100)))) | number_format(0, '.', '') %}
  301.                                                 <input type="hidden" id="price_euro_pack--{{ package.id }}"
  302.                                                        name="amount-euro" value="{{ amount }}">
  303.                                                 <input type="hidden" id="price_euro_pack---{{ package.id }}"
  304.                                                        class="amount-annuel-euro" name="amount-annual-euro"
  305.                                                        value="{{ amounta }}">
  306.                                                 <span id="price_euro_canal--{{ package.id }}"
  307.                                                       class="amount-mensuel-euro">{{ package.amountEuro |number_format(0, '.', '') }}</span>
  308.                                                 <span id="price_euro_canal---{{ package.id }}"
  309.                                                       class="amount-annuel-euro"
  310.                                                       style="display: none;">{{ ((package.amountEuro * 12) * (1 - (percent / 100))) |number_format(0, '.', '') }}</span>
  311.                                                 <i>&euro;</i>
  312.                                                 <span class="plan" id="text-canal-euro-{{ package.id }}"></span>
  313.                                             </div>
  314.                                             <div class="price currency-usd" style="display: none">
  315.                                                 {% set amount =  package.amount %}
  316.                                                 {% set amount = package.amountUsd|number_format(0, '.', '') %}
  317.                                                 {% set amounta =  (((package.amountUsd * 12) * (1 - (percent / 100)))) |number_format(0, '.', '') %}
  318.                                                 <input type="hidden" id="price_usd_pack--{{ package.id }}" name="amount-usd" value="{{ amount }}">
  319.                                                 <input type="hidden" id="price_usd_pack---{{ package.id }}" class="amount-annuel-usd" name="amount-annual-usd" value="{{ amounta }}">
  320.                                                 <span id="price_usd_canal--{{ package.id }}" class="amount-mensuel-usd">{{ package.amountUsd |number_format(0, '.', '') }}</span>
  321.                                                 <span id="price_usd_canal---{{ package.id }}" class="amount-annuel-usd" style="display: none;">{{ ((package.amountUsd * 12) * (1 - (percent / 100))) |number_format(0, '.', '') }}</span>
  322.                                                 <i>$</i>
  323.                                                 <span class="plan" id="text-canal-usd-{{ package.id }}"></span>
  324.                                             </div>
  325.                                         {% endif %}
  326.                                         {% if package.unlimited == 1 %}
  327.                                         {% endif %}
  328.                                         {% if package.onDemand != 1 %}
  329.                                             {% if is_granted('IS_AUTHENTICATED_FULLY') and getTypeUser('ROLE_SUPER_PARTNER') %}
  330.                                                 <button class="btn ml-lg-auto mr-lg-auto primary-button mb-3" type="submit">  {{ 'super_partner.btn_upgrade'|trans }} </button>
  331.                                             {% else %}
  332.                                                 <button class="btn ml-lg-auto mr-lg-auto primary-button mb-3" type="submit">  {{ 'front.subscribe'|trans }} </button>
  333.                                             {% endif %}
  334.                                         {% endif %}
  335.                                         <input type="hidden" class="payment-period" name="payment-period" value="monthly">
  336.                                     </form>
  337.                             <ul class="list-group list-group-flush">
  338.                                 {% for info in packageInfo %}
  339.                                     <li class="list-group-item d-flex justify-content-between align-items-center text-left">
  340.                                         <span style="text-align: center;width: 100%;">
  341.                                             {% if app.request.locale == 'fr' %}
  342.                                                 {{ info.descriptionFr }}
  343.                                             {% else %}
  344.                                                 {{ info.descriptionEn }}
  345.                                             {% endif %}
  346.                                         </span>
  347.                                         <i class="icon-min m-0 fas fa-check text-right"></i>
  348.                                     </li>
  349.                                 {% endfor %}
  350.                             </ul>
  351.                         </div>
  352.                     </div>
  353.                 {% endfor %}
  354.             </div>
  355.             <!-- Package end -->
  356.         </div>
  357.     </section>
  358.     <!-- Blog -->
  360.     <!-- Contact -->
  361.     <section id="contact" class="section-7 form contact">
  362.         <div class="container">
  363.             <div class="row">
  364.                 <div class="col-12 col-md-8 pr-md-5 align-self-center text">
  365.                     <div class="row intro">
  366.                         <div class="col-12 p-0">
  367.                             <span class="pre-title m-0">{{ 'front.contact.text.send'|trans }}</span>
  368.                             <h2>{{ 'front.contact.text.contact'|trans }} <span
  369.                                         class="featured"><span>{{ 'front.contact.text.us'|trans }}</span></span></h2>
  370.                             <p>{{ 'front.contact.text.title'|trans }}</p>
  371.                         </div>
  372.                     </div>
  373.                 </div>
  374.             </div>
  375.             <div class="row">
  376.                 <div class="col-12 col-md-8">
  377.                     <form action="{{ path('contact_myflix') }}" id="myflix-simple-form" class="myflix-simple-form">
  378.                         <input type="hidden" name="section" value="nexgen_form">
  379.                         <div class="row form-group-margin">
  380.                             <div class="col-12 col-md-6 m-0 p-2 input-group">
  381.                                 <input type="text" name="name" class="form-control field-name"
  382.                                        placeholder="{{ 'front.demo.name'|trans }}">
  383.                             </div>
  384.                             <div class="col-12 col-md-6 m-0 p-2 input-group">
  385.                                 <input type="email" name="email" class="form-control field-email"
  386.                                        placeholder="{{ 'front.demo.email'|trans }}">
  387.                             </div>
  388.                             <div class="col-12 col-md-12 m-0 p-2 input-group">
  389.                                 <input type="text" name="phone" class="form-control field-phone"
  390.                                        placeholder="{{ 'front.contact.text.phone'|trans }}">
  391.                             </div>
  392.                             <div class="col-12 m-0 p-2 input-group">
  393.                                 <textarea name="message" class="form-control field-message"
  394.                                           placeholder="{{ 'front.contact.text.message'|trans }}"></textarea>
  395.                             </div>
  396.                             <div class="col-12 col-12 m-0 p-2 input-group">
  397.                                 <span class="alert form-alert"></span>
  398.                             </div>
  399.                             <div class="col-12 input-group m-0 p-2">
  400.                                 <a class="btn primary-button">{{ 'front.demo.send'|trans }}</a>
  401.                             </div>
  402.                         </div>
  403.                     </form>
  404.                 </div>
  405.                 <div class="col-12 col-md-4">
  406.                     <div class="contacts">
  407.                         <ul class="navbar-nav">
  408.                             <li class="nav-item">
  409.                                 <a href="#" class="nav-link">
  410.                                     <i class="fas fa-phone-alt mr-2"></i>
  411.                                     <span> +(216) 71 752 999 </span>
  412.                                 </a>
  413.                             </li>
  414.                             <li class="nav-item">
  415.                                 <a href="#" class="nav-link">
  416.                                     <i class="fas fa-envelope mr-2"></i>
  417.                                     <span>support@my-flix.io</span>
  418.                                 </a>
  419.                             </li>
  420.                             <li class="nav-item">
  421.                                 <a href="#" class="nav-link">
  422.                                     <i class="fas fa-map-marker-alt mr-2"></i>
  423.                                     <span>{{ 'front.text.menu.address'|trans }}</span>
  424.                                 </a>
  425.                             </li>
  427.                         </ul>
  428.                     </div>
  429.                 </div>
  430.             </div>
  431.         </div>
  432.     </section>
  433. {% endblock %}
  435. {% block javascripts %}
  436.     {{ parent() }}
  438. {% endblock %}