src/Modules/Package/Templates/Package/details.html.twig line 1

  1. {% extends 'layouts/pages.html.twig' %}
  2. {% trans_default_domain 'package' %}
  4. {% set package = data.entity %}
  6. {% block content %}
  7.     <div class="container text-dark">
  8.         <h4 class="py-3 text-center text-white">
  9.             Zamów pakiet <strong class="text-uppercase sum-package-name">Standard</strong>
  10.         </h4>
  12.         {{ include('Modules/Package/Templates/Package/partials/orderSteps.html.twig', { 'step': 2 }) }}
  14.         <section class="pb-5 pt-3 pt-md-5 summary-block">
  15.             <div class="">
  16.                 <div class="d-flex mx-auto mt-5 pt-md-4 voucher-special text-white">
  17.                     <div class="row m-0 w-100">
  18.                         <div class="col-md-9 p-0 pe-md-2">
  19.                             <div class="position-relative w-100" style="display: block; max-width: 900px;">
  20.                                 <div class="vouchers-slider-wrap position-static" style="width: auto;">
  21.                                     <div class="voucher d-flex voucher-bg-1 rounded-5 p-lg-4 p-3">
  22.                                         <div class="row justify-content-between w-100 pb-1 pt-3 pb-md-3 pt-md-3">
  23.                                             <div class="col-10 col-md-9 d-flex">
  24.                                                 <div class="ps-2 pe-0 ps-md-3 pe-md-3 d-flex flex-column justify-content-between align-items-start">
  25.                                                     <div class="d-flex align-items-end position-relative">
  26.                                                         <div class="svg-animation head-dott d-none">
  27.                                                             <svg class="overflow-visible head-dott-svg" fill="none" xmlns="http://www.w3.org/2000/svg">
  28.                                                                 <circle class="reveal--pulse-repeat-slow" r="6" stroke="#8CFFF5" stroke-opacity="0.4" stroke-width="4" fill="#8CFFF5" fill-opacity="0.4" style="--delay: 0.15s"></circle>
  29.                                                                 <circle class="reveal--grow" r="4" fill="#8CFFF5"></circle>
  30.                                                             </svg>
  31.                                                         </div>
  32.                                                         <img src="{{ asset('assets/front/new-assets/oct.png') }}" alt="" class="oct-img">
  33.                                                     </div>
  34.                                                     <div class="mt-4 pb-3">
  35.                                                         <h4 class="fw-bold title-svg-anim position-relative">
  36.                                                             <div class="svg-animation d-none">
  37.                                                                 <svg class="overflow-visible">
  38.                                                                     <line x1="0.5" x2="0.5" y2="50" stroke="black" stroke-dasharray="2 2" class="stroke-offset-5-anim"></line>
  39.                                                                     <circle class="reveal--pulse-repeat-slow" r="6" stroke="#46F1E4" stroke-opacity="0.4" stroke-width="4" fill="#8CFFF5" fill-opacity="0.4" style="--delay:0.3s"></circle>
  40.                                                                     <circle class="reveal--grow" r="4" fill="#E9FFFD"></circle>
  41.                                                                 </svg>
  42.                                                             </div>
  43.                                                             Smart voucher
  44.                                                         </h4>
  45.                                                         <h6 class="op-5 py-3 text-uppercase">Miejsce na Twoje hasło reklamowe.</h6>
  46.                                                         <p class="m-0 voucher-card-text"><i class="fa fa-credit-card" aria-hidden="true"></i>
  47.                                                             <span class="px-2">Odkryj potencjał realizacji sprzedaży z elegancją.</span>
  48.                                                         </p>
  49.                                                     </div>
  50.                                                     <div class="mt-2 mt-md-5">
  51.                                                         <div class="typewriter-container">
  52.                                                             <p class="m-0 typed-out d-none">Cześć, jestem Smart Voucher – zwiększam Twoją sprzedaż!</p>
  53.                                                             <p class="m-0 typed-out">Hi, I am Smart Voucher – I boost your sales!</p>
  54.                                                             <div class="typed-out-after"></div>
  55.                                                         </div>
  56.                                                     </div>
  57.                                                 </div>
  58.                                             </div>
  59.                                             <script>
  60.                                                 const changeTypingText = () => {
  61.                                                     setTimeout(() => {
  62.                                                         const hidden = $('.typed-out.d-none')
  63.                                                         const visible = $('.typed-out:not(.d-none)')
  65.                                                         hidden.removeClass('d-none')
  66.                                                         visible.addClass('d-none')
  68.                                                         changeTypingText()
  69.                                                     }, 7000);
  70.                                                 };
  72.                                                 changeTypingText();
  73.                                             </script>
  74.                                             <div class="col-2 col-md-3 px-0 py-lg-2 d-flex align-items-center justify-content-end">
  75.                                                 <div class="qr d-flex flex-column justify-content-between bg-white p-1 mx-md-2">
  76.                                                     <p><img src="{{ asset('assets/app/images/qr_code_example.png ') }}" class="img-fluid" /></p>
  77.                                                     <div class="mx-auto">
  78.                                                         <div class="d-flex justify-content-center" style="color: #000;">SNR-123654999</div>
  79.                                                     </div>
  80.                                                 </div>
  81.                                             </div>
  82.                                         </div>
  83.                                     </div>
  84.                                 </div>
  85.                             </div>
  86.                             <div class="d-block d-md-none pt-4">
  87.                                 <div class="d-flex flex-column gap-2">
  88.                                     <div class="function-block white d-flex align-items-center">
  89.                                         <i class="fas fa-building"></i>
  90.                                         Dostosowany tytuł i opis vouchera.
  91.                                     </div>
  92.                                     <div class="function-block white d-flex align-items-center">
  93.                                         <i class="fas fa-qrcode"></i>
  94.                                         Unikalny kod QR
  95.                                     </div>
  96.                                     <div class="function-block white d-flex align-items-center">
  97.                                         <i class="fas fa-mobile"></i>
  98.                                         A lot of other benefits
  99.                                     </div>
  100.                                 </div>
  101.                             </div>
  102.                         </div>
  103.                         <div class="col-md-3 d-flex position-relative p-0 mt-3 mt-md-0">
  104.                             <div class="card w-100 p-3 br-10 summary-card d-flex justify-content-center">
  105.                                 <div>
  106.                                     <div class="text-center py-lg-3 py-1 mb-2 text-dark">
  107.                                         <h3 class="text-primary text-uppercase mb-md-4 mb-2">
  108.                                             <strong>{{ package.name }}</strong>
  109.                                         </h3>
  111.                                         <p class="h2 mb-0">
  112.                                             <strong class="price text-black fw-bold">
  113.                                                 {{ data.price|formatPrice('code', null, true) }}
  114.                                             </strong>
  115.                                         </p>
  116.                                         <small>cena netto / rok</small>
  117.                                     </div>
  118.                                     <div class="d-grid px-3 mb-3">
  119.                                         <a href="{{ path('package_buy', { 'slug': package.slug }) }}" class="btn btn-gradient btn-gradient2">Zamów</a>
  120.                                     </div>
  121.                                     <small class="d-none text-dark text-center">Nie wymagamy karty kredytowej</small>
  122.                                 </div>
  123.                             </div>
  124.                         </div>
  125.                     </div>
  126.                     <div class="svg-animation first-tooltip">
  127.                         <div class="svg-tooltip">
  128.                             <i class="fas fa-qrcode"></i>
  129.                             Unikalny kod QR
  130.                         </div>
  131.                         <svg class="overflow-visible" width="165" height="63" viewBox="0 0 165 63" fill="none" xmlns="http://www.w3.org/2000/svg" style="--length: 181.7195281982422;">
  132.                             <mask id="mask3">
  133.                                 <path x-data="svgPathLength({classOnFinish:'reveal--stroke'})" class=" reveal--stroke" d="M1.78286 0.840036L3.92586 21.0212C5.75354 38.2328 20.9295 51.9009 38.2123 51.9009L149.223 51.9009" stroke="white" stroke-width="3" stroke-dasharray="181.7195281982422" stroke-dashoffset="181.7195281982422" style="--delay: 0.2s; stroke-dashoffset: calc(181px * 2); opacity: 1;"></path>
  134.                             </mask>
  135.                             <path class="stroke-offset-5-anim" style="--offset: 5" mask="url(#mask3)" d="M1.78286 0.840036L3.92586 21.0212C5.75354 38.2328 20.9295 51.9009 38.2123 51.9009L149.223 51.9009" stroke="#8CFFF5" stroke-opacity="0.7" stroke-width="2" stroke-dasharray="2 3"></path>
  136.                             <circle class="reveal--pulse-repeat" cx="155" cy="53" r="8" transform-origin="155 53" stroke="#46F1E4" stroke-opacity="0.4" stroke-width="4" fill="#8CFFF5" fill-opacity="0.4" style="--delay:0.3s"></circle>
  137.                             <circle class="reveal--grow" cx="155" cy="53" r="6" transform-origin="155 53" fill="#E9FFFD"></circle>
  138.                         </svg>
  139.                     </div>
  140.                     <div class="svg-animation second-tooltip">
  141.                         <div class="svg-tooltip">
  142.                             <i class="fas fa-building"></i>
  143.                             Dostosowany tytuł i opis vouchera.
  144.                         </div>
  145.                         <svg class="overflow-visible" width="178" height="72" viewBox="0 0 178 72" fill="none" xmlns="http://www.w3.org/2000/svg" style="--length: 198.9769287109375;">
  146.                             <mask id="mask2">
  147.                                 <path x-data="svgPathLength({classOnFinish:'reveal--stroke'})" class=" reveal--stroke" d="M177 0V0C177 15.9829 164.043 28.9396 148.06 28.9396H37.0604C22.1154 28.9396 10 41.0549 10 56V56" stroke="white" stroke-width="3" stroke-dasharray="198.9769287109375" stroke-dashoffset="198.9769287109375" style="--delay: 0.2s; stroke-dashoffset: calc(198px * 2); opacity: 1;"></path>
  148.                             </mask>
  149.                             <path class="stroke-offset-5-anim" style="--offset: 5" mask="url(#mask2)" d="M177 0V0C177 15.9829 164.043 28.9396 148.06 28.9396H37.0604C22.1154 28.9396 10 41.0549 10 56V56" stroke="#8CFFF5" stroke-opacity="0.7" stroke-width="2" stroke-dasharray="2 3"></path>
  150.                             <circle class="reveal--pulse-repeat" cx="10" cy="62" r="8" transform-origin="10 62" stroke="#8CFFF5" stroke-opacity="0.4" stroke-width="4" fill="#8CFFF5" fill-opacity="0.4" style="--delay: 0.15s">
  151.                             </circle>
  152.                             <circle class="reveal--grow" cx="10" cy="62" r="6" transform-origin="10 62" fill="#8CFFF5"></circle>
  153.                         </svg>
  154.                     </div>
  155.                     <div class="svg-animation third-tooltip">
  156.                         <div class="svg-tooltip">
  157.                             <i class="fas fa-mobile"></i>
  158.                             A lot of other benefits!
  159.                         </div>
  160.                         <svg class="overflow-visible" width="165" height="63" viewBox="0 0 165 63" fill="none" xmlns="http://www.w3.org/2000/svg" style="--length: 181.7195281982422;">
  161.                             <mask id="mask3">
  162.                                 <path x-data="svgPathLength({classOnFinish:'reveal--stroke'})" class=" reveal--stroke" d="M1.78286 0.840036L3.92586 21.0212C5.75354 38.2328 20.9295 51.9009 38.2123 51.9009L149.223 51.9009" stroke="white" stroke-width="3" stroke-dasharray="181.7195281982422" stroke-dashoffset="181.7195281982422" style="--delay: 0.2s; stroke-dashoffset: calc(181px * 2); opacity: 1;"></path>
  163.                             </mask>
  164.                             <path class="stroke-offset-5-anim" style="--offset: 5" mask="url(#mask3)" d="M1.78286 0.840036L3.92586 21.0212C5.75354 38.2328 20.9295 51.9009 38.2123 51.9009L149.223 51.9009" stroke="#8CFFF5" stroke-opacity="0.7" stroke-width="2" stroke-dasharray="2 3"></path>
  165.                             <circle class="reveal--pulse-repeat" cx="155" cy="53" r="8" transform-origin="155 53" stroke="#46F1E4" stroke-opacity="0.4" stroke-width="4" fill="#8CFFF5" fill-opacity="0.4" style="--delay:0.3s"></circle>
  166.                             <circle class="reveal--grow" cx="155" cy="53" r="6" transform-origin="155 53" fill="#E9FFFD"></circle>
  167.                         </svg>
  168.                     </div>
  169.                 </div>
  170.             </div>
  171.             <div class="package-benefit-cards g-7">
  172.                 {% if package.voucherCreator %}
  173.                     <div class="benefit-card text-center">
  174.                         <img src="{{ asset('assets/front/new-assets/icons/icon-6.png') }}" alt="" />
  175.                         <p class="mb-0 mt-3 text">baza szablonów + kreator vouchera</p>
  176.                     </div>
  177.                 {% endif %}
  178.                 <div class="benefit-card text-center">
  179.                     <img src="{{ asset('assets/front/new-assets/icons/icon-7.png') }}" alt="" />
  180.                     <p class="mb-0 mt-3 text">pakiet voucherów <b>{{ package.vouchersNumber }} {{ 'szt.'|trans }}</b></p>
  181.                 </div>
  182.                 <div class="benefit-card text-center">
  183.                     <img src="{{ asset('assets/front/new-assets/icons/icon-8.png') }}" alt="">
  184.                     <p class="mb-0 mt-3 text">system zarządzania voucherami <b>{{ data.voucher_management_type_name }}</b></p>
  185.                 </div>
  186.                 {% if package.codeSNSerialization %}
  187.                     <div class="benefit-card text-center">
  188.                         <img src="{{ asset('assets/front/new-assets/icons/icon-1.png') }}" alt="">
  189.                         <p class="mb-0 mt-3 text">serializacja <b>KOD/SN + QR</b></p>
  190.                     </div>
  191.                 {% endif %}
  192.                 <div class="benefit-card text-center">
  193.                     <img src="{{ asset('assets/front/new-assets/icons/icon-10.png') }}" alt="">
  194.                     <p class="mb-0 mt-3 text">statystyki i raporty <b>{{ data.reports_type_name }}</b></p>
  195.                 </div>
  196.                 <div class="benefit-card text-center">
  197.                     <img src="{{ asset('assets/front/new-assets/icons/icon-11.png') }}" alt="">
  198.                     <p class="mb-0 mt-3 text">druk (pakiet startowy) <b>{{ package.printVouchersNumber }} {{ 'szt.'|trans }}</b></p>
  199.                 </div>
  200.                 <div class="benefit-card text-center special-card">
  201.                     <img src="{{ asset('assets/front/new-assets/icons/icon-1.png') }}" alt="" />
  202.                     <p class="mb-0 mt-3 text">
  203.                         Special Text!
  204.                         Lorem ipsum dolor sit amet consectetur adipisicing elit.
  205.                     </p>
  206.                 </div>
  207.             </div>
  208.         </section>
  209.     </div>
  210. {% endblock %}