templates/pages/telematics-infrastructure.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  2. {% block content %}
  3.     {{ include('@components/hero-header.html.twig', {
  4.         image: content.image ? content.image.url,
  5.         text: content.heroImageText
  6.     }) }}
  7.     {% if (content.teaserUrlTitle1 and content.teaserUrl1) %}
  8.         {{ include('@components/image-text-section.html.twig', {
  9.             image: content.teaserImage1.url|default('/website/images/placeholder-image.png'),
  10.             text: content.teaserText1,
  11.             order: {
  12.                 text: '1',
  13.                 image: '2'
  14.             },
  15.             button: {
  16.                 withIcon: true,
  17.                 text: content.teaserUrlTitle1,
  18.                 link: content.teaserUrl1
  19.             }
  20.         }) }}
  21.     {% else %}
  22.         {{ include('@components/image-text-section.html.twig', {
  23.             image: content.teaserImage1.url|default('/website/images/placeholder-image.png'),
  24.             text: content.teaserText1,
  25.             order: {
  26.                 text: '1',
  27.                 image: '2'
  28.             }
  29.         }) }}
  30.     {% endif %}
  31.     <div class="bg-neutral-grey py-5">
  32.         <div class="container">
  33.             <div class="row">
  34.                 <div class="col-12 mb-4">
  35.                     <h2 class="point light">{{ content.teaserBlocksTitle }}</h2>
  36.                 </div>
  37.             </div>
  38.             <div class="row gy-5 gap-lg-0">
  39.                 {% for teaserBlock in content.teaserBlocks %}
  40.                     <div class="col-12 col-lg-4">
  41.                         <div class="bg-white white-box h-100">
  42.                             <div class="p-3 p-lg-5">
  43.                                 {{ teaserBlock.text|raw }}
  44.                                 {% if (teaserBlock.outerUrl and teaserBlock.outerUrlTitle) %}
  45.                                     {{ include('@components/button-with-icon.html.twig', {
  46.                                         text: teaserBlock.outerUrlTitle,
  47.                                         link: {
  48.                                             href: teaserBlock.outerUrl
  49.                                         },
  50.                                         order: {
  51.                                             icon: '2',
  52.                                             text: '1'
  53.                                         },
  54.                                     }) }}
  55.                                 {% endif %}
  56.                             </div>
  57.                         </div>
  58.                     </div>
  59.                 {% endfor %}
  60.             </div>
  61.         </div>
  62.     </div>
  63.     <div class="py-5 mt-7">
  64.         <div class="container">
  65.             {{ include('@components/image-text-section.html.twig', {
  66.                 text: content.textImageText,
  67.                 image: content.textImageImage.url|default('/website/images/placeholder-image.png'),
  68.             }) }}
  69.         </div>
  70.     </div>
  71.     <div class="py-5 bg-neutral-grey mt-7" id="angebot">
  72.         <div class="container">
  73.             <div class="row mb-5">
  74.                 <div class="col-12">
  75.                     <h2 class="point light">{{ content.registerProcessTitle }}</h2>
  76.                     <hr>
  77.                     {{ content.registerProcessText|raw }}
  78.                 </div>
  79.             </div>
  80.             <div class="row gy-5 gap-lg-0">
  81.                 {% for registerProcessBlock in content.registerProcessBlocks %}
  82.                     <div class="col-12 col-lg-6 col-xl-4">
  83.                         <div class="slide-up-rounded-border-box-shadow register-process-card text-center icon-white-box-with-buttons p-3 p-xl-5 d-flex justify-content-between flex-column h-100">
  84.                             <div>
  85.                                 <img class="icon mb-4" src="{{ registerProcessBlock.icon is not empty ? registerProcessBlock.icon.formats["sulu-100x100"] : '' }}" alt="">
  86.                                 {{ registerProcessBlock.text1|raw }}
  87.                                 <div class="py-4">
  88.                                     {% if (registerProcessBlock.available) %}
  89.                                         {{ include('@components/button-with-icon.html.twig', {
  90.                                             text: registerProcessBlock.checkPermissionButtonText,
  91.                                             link: {
  92.                                                 href: registerProcessBlock.checkPermissionButtonLink
  93.                                             },
  94.                                             order: {
  95.                                                 icon: '2',
  96.                                                 text: '1'
  97.                                             },
  98.                                             color: 'check-permission-button',
  99.                                             iconColor: 'text-dark'
  100.                                         }) }}
  101.                                         <div class="pt-4">{{ registerProcessBlock.text2|raw }}</div>
  102.                                     {% else %}
  103.                                         {{ include('@components/button.html.twig', {
  104.                                             text: 'Bald verfügbar',
  105.                                             color: 'bg-neutral-grey',
  106.                                             disabled: true
  107.                                         }) }}
  108.                                     {% endif %}
  109.                                 </div>
  110.                             </div>
  111.                             {% if (registerProcessBlock.available) %}
  112.                                     <div>
  113.                                         {% if (registerProcessBlock.copyCode) %}
  114.                                             <div class="py-4">
  115.                                                 <div
  116.                                                     data-controller="copy-to-clipboard"
  117.                                                     data-action="click->copy-to-clipboard#copy"
  118.                                                     data-copy-to-clipboard-code-value="{{ registerProcessBlock.copyCode }}"
  119.                                                     data-copy-to-clipboard-copy-text-value="{{ registerProcessBlock.copyCodeButtonText }}"
  120.                                                     data-copy-to-clipboard-target="button"
  121.                                                     class="copy-button">
  122.                                                         {{ include('@components/button-with-icon.html.twig', {
  123.                                                             text: registerProcessBlock.copyCodeButtonText,
  124.                                                             color: 'text-white bg-yellow',
  125.                                                             icon: 'fa-copy',
  126.                                                             iconColor: 'text-white',
  127.                                                             order: {
  128.                                                                 icon: '2',
  129.                                                                 text: '1'
  130.                                                             }
  131.                                                         }) }}
  132.                                                 </div>
  133.                                             </div>
  134.                                         {% endif %}
  135.                                         {% if (registerProcessBlock.orderButtonLink) %}
  136.                                             <div class="mt-4">
  137.                                                 {{ include('@components/button-with-icon.html.twig', {
  138.                                                     text: registerProcessBlock.orderButtonText,
  139.                                                     link: {
  140.                                                         href: registerProcessBlock.orderButtonLink
  141.                                                     },
  142.                                                     order: {
  143.                                                         icon: '2',
  144.                                                         text: '1'
  145.                                                     }
  146.                                                 }) }}
  147.                                             </div>
  148.                                         {% endif %}
  149.                                     </div>
  150.                             {% endif %}
  151.                         </div>
  152.                     </div>
  153.                 {% endfor %}
  154.             </div>
  155.         </div>
  156.         <div class="container">
  157.             <div class="row mb-5">
  158.                 <div class="col-12">
  159.                     {{ content.directOrderText|raw }}
  160.                 </div>
  161.             </div>
  162.             <div class="row gy-5 gap-lg-0">
  163.                 {% for directOrderBlock in content.directOrderBlocks %}
  164.                     {% if directOrderBlock.type == 'directOrderBlock' %}
  165.                     <div class="col-12 col-lg-6">
  166.                         <div class="slide-up-rounded-border-box-shadow register-process-card icon-white-box-with-buttons p-3 p-xl-5 d-flex justify-content-between flex-column h-100">
  167.                             <div>
  168.                                 {{ directOrderBlock.text1|raw }}
  169.                                 <div class="pt-4">{{ directOrderBlock.text2|raw }}</div>
  170.                                 <div class="py-4">
  171.                                     {{ include('@components/button-with-icon.html.twig', {
  172.                                         text: directOrderBlock.checkPermissionButtonText,
  173.                                         link: {
  174.                                             href: directOrderBlock.checkPermissionButtonLink
  175.                                         },
  176.                                         order: {
  177.                                             icon: '2',
  178.                                             text: '1'
  179.                                         },
  180.                                         color: 'check-permission-button',
  181.                                         iconColor: 'text-dark'
  182.                                     }) }}
  183.                                     
  184.                                 </div>
  185.                             </div>
  186.                                 <div>
  187.                                     <div class="pt-4">{{ directOrderBlock.text3|raw }}</div>
  188.                                     {% if (directOrderBlock.copyCode) %}
  189.                                         <div class="py-4">
  190.                                             <div
  191.                                                 data-controller="copy-to-clipboard"
  192.                                                 data-action="click->copy-to-clipboard#copy"
  193.                                                 data-copy-to-clipboard-code-value="{{ directOrderBlock.copyCode }}"
  194.                                                 data-copy-to-clipboard-copy-text-value="{{ directOrderBlock.copyCodeButtonText }}"
  195.                                                 data-copy-to-clipboard-target="button"
  196.                                                 class="copy-button">
  197.                                                     {{ include('@components/button-with-icon.html.twig', {
  198.                                                         text: directOrderBlock.copyCodeButtonText,
  199.                                                         color: 'text-white bg-yellow',
  200.                                                         icon: 'fa-copy',
  201.                                                         iconColor: 'text-white',
  202.                                                         order: {
  203.                                                             icon: '2',
  204.                                                             text: '1'
  205.                                                         }
  206.                                                     }) }}
  207.                                             </div>
  208.                                         </div>
  209.                                     {% endif %}
  210.                                     <div class="pt-4">{{ directOrderBlock.text4|raw }}</div>
  211.                                     {% if (directOrderBlock.orderButtonLink) %}
  212.                                         <div class="mt-4">
  213.                                             {{ include('@components/button-with-icon.html.twig', {
  214.                                                 text: directOrderBlock.orderButtonText,
  215.                                                 link: {
  216.                                                     href: directOrderBlock.orderButtonLink
  217.                                                 },
  218.                                                 order: {
  219.                                                     icon: '2',
  220.                                                     text: '1'
  221.                                                 }
  222.                                             }) }}
  223.                                         </div>
  224.                                     {% endif %}
  225.                                     <div class="pt-4">{{ directOrderBlock.text5|raw }}</div>
  226.                                 </div>
  227.                         </div>
  228.                     </div>
  229.                     {% else %}
  230.                      <div class="col-12 col-lg-6">
  231.                         <div class="slide-up-rounded-border-box-shadow register-process-card icon-white-box-with-buttons p-3 p-xl-5 d-flex justify-content-between flex-column h-100">
  232.                             <div>
  233.                                 {{ directOrderBlock.text1|raw }}
  234.                             </div>
  235.                         </div>
  236.                     </div>
  237.                     {% endif %}
  238.                 {% endfor %}
  239.             </div>
  240.         </div>
  241.     </div>
  242.     <div class="bg-yellow py-5" id="newsletter">
  243.         <div class="container">
  244.             <div class="row">
  245.                 <div class="col-12 mb-5">
  246.                     <h2 class="point dark">{{ content.newsletterTitle }}</h2>
  247.                     {{ content.newsletterText|raw }}
  248.                 </div>
  249.                 <div class="col-12">
  250.                     {% if content.form %}
  251.                         {% if app.request.get('send') != 'true' %}
  252.                             {% form_theme content.form 'components/forms/newsletter.html.twig' %}
  253.                             {{ form(content.form) }}
  254.                         {% else %}
  255.                             {{ include('@components/alert.html.twig', {
  256.                                 type: 'success',
  257.                                 text: view.form.entity.successText
  258.                             }) }}
  259.                         {% endif %}
  260.                     {% endif %}
  261.                 </div>
  262.             </div>
  263.         </div>
  264.     </div>
  265.     <div class="container py-5">
  266.         <div class="row">
  267.             <div class="col-12 mb-4">
  268.                 <h2 class="point light">{{ content.teaserBlocksTitle1 }}</h2>
  269.             </div>
  270.         </div>
  271.         <div class="row gy-5 gap-lg-0">
  272.             {% for teaserBlock in content.teaserBlocks1 %}
  273.                 <div class="col-12 col-md-6 col-lg-4">
  274.                     <div class="white-box h-100">
  275.                         <div class="p-3 p-lg-5">
  276.                             <img class="mb-4 d-block mx-auto" src="{{ teaserBlock.icon is not empty ? teaserBlock.icon.formats["sulu-100x100"] : '' }}" alt="">
  277.                             {{ teaserBlock.text|raw }}
  278.                         </div>
  279.                     </div>
  280.                 </div>
  281.             {% endfor %}
  282.         </div>
  283.     </div>
  284.     <div class="container my-5">
  285.         <div class="row">
  286.             <div class="col-12">
  287.                 <h2 class="point light">{{ content.appsTitle }}</h2>
  288.                 <p>{{ content.appsText|raw }}</p>
  289.             </div>
  290.             <div class="col-12">
  291.                 <div class="accordion" id="appsInIt">
  292.                     {% for item in content.appsBlock %}
  293.                         {% set itemId = ["appsInIt", item.title|slug]|join('-')|lower %}
  294.                         <div class="accordion-item yellow my-2 border-0 rounded-0">
  295.                             <div class="accordion-header" id="{{ itemId }}">
  296.                                 <button class="d-flex align-items-center accordion-button icon collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ itemId }}" aria-expanded="false" aria-controls="collapse-{{ itemId }}">
  297.                                     <span class="fw-bolder">{{ item.title }}</span>
  298.                                 </button>
  299.                             </div>
  300.                             <div id="collapse-{{ itemId }}" class="accordion-collapse collapse" aria-labelledby="{{ itemId }}" data-bs-parent="#appsInIt">
  301.                                 <div class="accordion-body">
  302.                                     {{ item.text|raw }}
  303.                                 </div>
  304.                             </div>
  305.                         </div>
  306.                     {% endfor %}
  307.                 </div>
  308.             </div>
  309.         </div>
  310.         <div class="row mt-6">
  311.             <div class="col-12">
  312.                 <img class="d-none d-lg-block w-100" src="{{ asset('build/website/images/diagram.svg') }}" alt="">
  313.                 <img class="d-lg-none w-100" src="{{ asset('build/website/images/diagram-mobile.svg') }}" alt="">
  314.             </div>
  315.         </div>
  316.         {{ include('@components/table-section.html.twig', {
  317.             table: content.tabel,
  318.         }) }}
  319.         <div class="row">
  320.             <div class="col-12">
  321.                 {{ content.additionalInfoBlock|raw }}
  322.             </div>
  323.         </div>
  324.     </div>
  325. {% endblock %}
  326. {% block custom_javascripts %}
  327.     {{ encore_entry_script_tags('forms') }}
  328. {% endblock %}