app/Resources/views/includes/footer.html.twig line 1

Open in your IDE?
  1. {% use "includes/blocks/blocks.html.twig" %}
  2. <footer class="relative">
  3.     <!-- DECORATIONS -->
  4.     <img src="{{ asset('vue/decor/iam-funradio.svg', 'img') }}"
  5.          class="absolute right-[-10px] lg:right-0 w-[100px] top-[-35px] lg:w-[160px] lg:top-[-65px] 2xl:w-[260px] 2xl:top-[-90px]" alt="Fun Radio"
  6.     />
  7.     <div class="hidden 2xl:block 2xl:absolute bottom-0 left-0 right-0 overflow-hidden h-[180px]">
  8.         <img src="{{ asset('vue/decor/square-blue.svg', 'img') }}"
  9.              class="hidden 2xl:block 2xl:absolute left-0 w-[12vw] max-w-[80px] min-w-[70px] bottom-[-50px]" alt="Fun Radio"
  10.         />
  11.     </div>
  12.     <!-- FOOTER 1 MOBILE + DESKTOP -->
  13.     <div class="flex flex-col items-center bg-frDarkBlue text-white mid-section-pb mid-section-pt">
  14.         <div class="container w-fit lg:w-full justify-center grid grid-cols-2 lg:grid-cols-4 gap-50 lg:gap-54">
  15.             <!-- STUDIO -->
  16.             <div class="flex flex-col min-w-[180px] gap-6">
  17.                 <div class="row flex items-center gap-6 lg:gap-10">
  18.                     <img class="w-12 h-12 lg:w-18 lg:h-18" src="{{ asset('vue/icons/tel-studio.svg', 'img') }}"  alt=""/>
  19.                     <div class="sm-text-card">Štúdio</div>
  20.                 </div>
  21.                 <div class="row flex flex-start gap-6 lg:gap-10 items-center">
  22.                     <a
  23.                         href="tel:0903943003"
  24.                         title="Volať 0903 943 003"
  25.                         class="flex md-text-card mr-0 group relative">
  26.                         0903 943 003
  27.                         <span class="flex items-center ml-6">
  28.                             <img class="w-16 transition-transform duration-300 group-hover:translate-x-5"
  29.                                  src="{{ asset('vue/icons/arrow-link-pink.svg', 'img') }}" alt="→" />
  30.                         </span>
  31.                     </a>
  32.                 </div>
  33.             </div>
  34.             <!-- DOPRAVA -->
  35.             <div class="flex flex-col min-w-[180px] gap-6">
  36.                 <div class="row flex items-center gap-6 lg:gap-10">
  37.                     <img class="w-15 h-12 lg:w-22 lg:h-16" src="{{ asset('vue/icons/tel-doprava.svg', 'img') }}"  alt=""/>
  38.                     <div class="sm-text-card">Doprava</div>
  39.                 </div>
  40.                 <div class="row flex flex-nowrap flex-start gap-6 lg:gap-10 items-center">
  41.                     <a
  42.                         href="tel:0800800200"
  43.                         title="Volať 0800 800 200"
  44.                         class="flex md-text-card mr-0 group relative">
  45.                         0800 800 200
  46.                         <span class="flex items-center ml-6">
  47.                             <img class="w-16 transition-transform duration-300 group-hover:translate-x-5"
  48.                                  src="{{ asset('vue/icons/arrow-link-pink.svg', 'img') }}" alt="→" />
  49.                         </span>
  50.                     </a>
  51.                 </div>
  52.             </div>
  53.             <!-- RECEPCIA -->
  54.             <div class="flex flex-col min-w-[180px] gap-6">
  55.                 <div class="row flex items-center gap-6 lg:gap-10">
  56.                     <img class="w-12 h-12 lg:w-18 lg:h-18" src="{{ asset('vue/icons/tel-recepcia.svg', 'img') }}"  alt=""/>
  57.                     <div class="sm-text-card">Recepcia</div>
  58.                 </div>
  59.                 <div class="row flex flex-start gap-6 lg:gap-10 items-center">
  60.                     <a
  61.                         href="tel:02/57787111"
  62.                         title="Volať 02 / 577 87 111"
  63.                         class="flex md-text-card mr-0 group relative">
  64.                         02 / 577 87 111
  65.                         <span class="flex items-center ml-6">
  66.                             <img class="w-16 transition-transform duration-300 group-hover:translate-x-5"
  67.                                  src="{{ asset('vue/icons/arrow-link-pink.svg', 'img') }}" alt="→" />
  68.                         </span>
  69.                     </a>
  70.                 </div>
  71.             </div>
  72.             <!-- E-MAIL -->
  73.             <div class="flex flex-col min-w-[180px] gap-6">
  74.                 <div class="row flex items-center gap-6 lg:gap-10">
  75.                     <img class="w-13 h-10 lg:w-20 lg:h-16" src="{{ asset('vue/icons/e-mail.svg', 'img') }}"  alt=""/>
  76.                     <div class="sm-text-card">E-mail</div>
  77.                 </div>
  78.                 <div class="row flex flex-start gap-6 lg:gap-10 items-center">
  79.                     <a
  80.                         href="mailto:info@funradio.sk"
  81.                         title="E-mail na info@funradio.sk"
  82.                         class="flex md-text-card mr-0 group relative">
  83.                         info@funradio.sk
  84.                         <span class="flex items-center ml-6">
  85.                             <img class="w-16 transition-transform duration-300 group-hover:translate-x-5"
  86.                                  src="{{ asset('vue/icons/arrow-link-pink.svg', 'img') }}" alt="→" />
  87.                         </span>
  88.                     </a>
  89.                 </div>
  90.             </div>
  91.         </div>
  92.     </div>
  93.     <!-- FOOTER 2 MOBILE -->
  94.     <div class="lg:hidden bg-frDarkBlue text-white flex flex-col items-center">
  95.         <div class="container">
  96.             <hr class="border-t-1 border-white" />
  97.         </div>
  98.         <div class="container flex flex-col items-center pb-47">
  99.             <div class="lg:hidden grid grid-cols-2 gap-x-54 w-fit mt-48">
  100.                 <div class="flex flex-row">
  101.                     <img src="{{ asset('vue/icons/funRadioLogo.svg', 'img') }}" width="110" height="56" alt="Fun Radio" />
  102.                 </div>
  103.                 <div class="flex flex-row gap-54">
  104.                     {{ block('social_footer') }}
  105.                 </div>
  106.                 <!-- COL LEFT 1 -->
  107.                 <div class="flex flex-col mt-[54px]">
  108.                     <h3 class="md-text-card text-frMagenta font-bold footerArrow-mobile mb-20">Aplikácia</h3>
  109.                     <div class="footerApps">
  110.                         <img src="{{ asset('vue/iphone.webp', 'img') }}"
  111.                              alt="Appstore"
  112.                              class="relative max-w-fit w-[160px] mb-5 left-[-20px]"
  113.                         />
  114.                         <a href="#" class="block mb-[5px]">
  115.                             <img src="{{ asset('vue/icons/googleplay.webp', 'img') }}"
  116.                                  alt="Google Play"
  117.                                  class="w-100"
  118.                             />
  119.                         </a>
  120.                         <a href="#">
  121.                             <img src="{{ asset('vue/icons/appstore.webp', 'img') }}"
  122.                                  alt="App store"
  123.                                  class="w-100"
  124.                             />
  125.                         </a>
  126.                     </div>
  127.                 </div>
  128.                 <!-- COL RIGHT 1 -->
  129.                 <div class="flex flex-col mt-[54px]">
  130.                     {# Broadcasts #}
  131.                     {% if footer_menu_airing is not empty %}
  132.                         <h3 class="md-text-card mb-20 lg:mb-40 text-frMagenta font-bold">Vysielanie</h3>
  133.                         {% for item in footer_menu_airing %}
  134.                             {% if item.type == "custom" %}
  135.                                 {% set slug = item.url %}
  136.                             {% elseif item.type == "category" %}
  137.                                 {% set slug = path('category', {category: item.slug}) %}
  138.                             {% elseif item.type == "broadcast" %}
  139.                                 {% set slug = path('broadcast', {id: item.item, slug: item.slug}) %}
  140.                             {% else %}
  141.                                 {% set slug = path('staticPage', {id: item.item, slug: item.slug}) %}
  142.                             {% endif %}
  143.                             {% set rel = item.rel ? ' rel="' ~ item.rel ~ '"' : '' %}
  144.                             {% set target = item.target ? ' target="' ~ item.target ~ '"' : '' %}
  145.                             <a href="{{ slug }}" class="sm-text-card {{ loop.last ? 'pb-20' : 'pb-4' }}" {{ rel|raw }}{{ target|raw }}>{{ item.title }}</a>
  146.                         {% endfor %}
  147.                     {% endif %}
  148.                 </div>
  149.                 <!-- COL LEFT 2 -->
  150.                 <div class="flex flex-col mt-20">
  151.                     {# Categories #}
  152.                     {% if footer_menu_categories is not empty %}
  153.                         {% for item in footer_menu_categories %}
  154.                             {% if item.type == "custom" %}
  155.                                 {% set slug = item.url %}
  156.                             {% elseif item.type == "category" %}
  157.                                 {% set slug = path('category', {category: item.slug}) %}
  158.                             {% elseif item.type == "broadcast" %}
  159.                                 {% set slug = path('broadcast', {id: item.item, slug: item.slug}) %}
  160.                             {% else %}
  161.                                 {% set slug = path('staticPage', {id: item.item, slug: item.slug}) %}
  162.                             {% endif %}
  163.                             {% set rel = item.rel ? ' rel="' ~ item.rel ~ '"' : '' %}
  164.                             {% set target = item.target ? ' target="' ~ item.target ~ '"' : '' %}
  165.                             <a href="{{ slug }}" class="sm-text-card pb-4" {{ rel|raw }}{{ target|raw }}>{{ item.title }}</a>
  166.                         {% endfor %}
  167.                     {% endif %}
  168.                 </div>
  169.                 <!-- COL RIGHT 2 -->
  170.                 {# Podcasts #}
  171.                 {% if footer_menu_podcasts is not empty %}
  172.                     <div class="flex flex-col">
  173.                         <h3 class="md-text-card mb-20 lg:mb-40 text-frMagenta font-bold">Podcasty</h3>
  174.                         {% for item in footer_menu_podcasts %}
  175.                             <a href="{{ item.link }}" class="sm-text-card pb-4">{{ item.name }}</a>
  176.                         {% endfor %}
  177.                     </div>
  178.                 {% endif %}
  179.             </div>
  180.         </div>
  181.     </div>
  182.     <!-- FOOTER 2 DESKTOP -->
  183.     <div class="hidden lg:flex bg-frDarkBlue text-white flex-col items-center">
  184.         <div class="container">
  185.             <hr class="border-t-1 border-white lg:mid-section-pb" />
  186.         </div>
  187.         <div class="container grid grid-cols-4 items-start gap-10 lg:pb-40">
  188.             <!-- COL 1 -->
  189.             <div class="footer2__col1 flex flex-col gap-30 h-full justify-between">
  190.                 <div class="flex flex-col gap-28">
  191.                     <div class="flex">
  192.                         <img src="{{ asset('vue/icons/funRadioLogo.svg', 'img') }}" width="110" height="56" alt="Fun Radio" />
  193.                     </div>
  194.                     <div class="flex flex-row gap-54">
  195.                         {{ block('social_footer') }}
  196.                     </div>
  197.                 </div>
  198.                 {# Categories #}
  199.                 {% if footer_menu_categories is not empty %}
  200.                     <div class="flex flex-col items-start">
  201.                         {% for item in footer_menu_categories %}
  202.                             {% if item.type == "custom" %}
  203.                                 {% set slug = item.url %}
  204.                             {% elseif item.type == "category" %}
  205.                                 {% set slug = path('category', {category: item.slug}) %}
  206.                             {% elseif item.type == "broadcast" %}
  207.                                 {% set slug = path('broadcast', {id: item.item, slug: item.slug}) %}
  208.                             {% else %}
  209.                                 {% set slug = path('staticPage', {id: item.item, slug: item.slug}) %}
  210.                             {% endif %}
  211.                             {% set rel = item.rel ? ' rel="' ~ item.rel ~ '"' : '' %}
  212.                             {% set target = item.target ? ' target="' ~ item.target ~ '"' : '' %}
  213.                             <a href="{{ slug }}" class="sm-text-card" {{ rel|raw }}{{ target|raw }}>{{ item.title }}</a>
  214.                         {% endfor %}
  215.                     </div>
  216.                 {% endif %}
  217.             </div>
  218.             {# Broadcasts #}
  219.             {% if footer_menu_airing is not empty %}
  220.                 <div class="flex flex-col">
  221.                     <h3 class="md-text-card mb-20 lg:mb-40 text-frMagenta font-bold">Vysielanie</h3>
  222.                     {% for item in footer_menu_airing %}
  223.                         {% if item.type == "custom" %}
  224.                             {% set slug = item.url %}
  225.                         {% elseif item.type == "category" %}
  226.                             {% set slug = path('category', {category: item.slug}) %}
  227.                         {% elseif item.type == "broadcast" %}
  228.                             {% set slug = path('broadcast', {id: item.item, slug: item.slug}) %}
  229.                         {% else %}
  230.                             {% set slug = path('staticPage', {id: item.item, slug: item.slug}) %}
  231.                         {% endif %}
  232.                         {% set rel = item.rel ? ' rel="' ~ item.rel ~ '"' : '' %}
  233.                         {% set target = item.target ? ' target="' ~ item.target ~ '"' : '' %}
  234.                         <a href="{{ slug }}" class="sm-text-card" {{ rel|raw }}{{ target|raw }}>{{ item.title }}</a>
  235.                     {% endfor %}
  236.                 </div>
  237.             {% endif %}
  238.             {# Podcasts #}
  239.             {% if footer_menu_podcasts is not empty %}
  240.                 <div class="flex flex-col">
  241.                     <h3 class="md-text-card mb-20 lg:mb-40 text-frMagenta font-bold">Podcasty</h3>
  242.                     {% for item in footer_menu_podcasts %}
  243.                         <a href="{{ item.link }}" class="sm-text-card">{{ item.name }}</a>
  244.                     {% endfor %}
  245.                 </div>
  246.             {% endif %}
  247.             <!-- COL 4 -->
  248.             <div class="flex flex-col">
  249.                 <h3 class="md-text-card mb-20 text-frMagenta font-bold footerArrow">Aplikácia</h3>
  250.                 <div>
  251.                     <div class="footerApps w-129">
  252.                         <a href="#" class="lg:mb-5 block">
  253.                             <img src="{{ asset('vue/icons/googleplay.webp', 'img') }}" width="auto" alt="Google Play" class="w-129" />
  254.                         </a>
  255.                         <a href="#">
  256.                             <img src="{{ asset('vue/icons/appstore.webp', 'img') }}" width="auto" alt="App store" class="w-129" />
  257.                         </a>
  258.                     </div>
  259.                     <img src="{{ asset('vue/iphone.webp', 'img') }}" width="auto" alt="Appstore" class="h-126 lg:h-224 lg:w-auto lg:-ml-24" />
  260.                 </div>
  261.             </div>
  262.         </div>
  263.     </div>
  264.     <div class="flex items-center justify-center bg-frDarkBlue text-white lg:pb-[100px]">
  265.         <!-- FOOTER 3 -->
  266.         <div class="container pb-23 lg:pb-40 relative z-10">
  267.             <hr class="border-t-1 border-white mb-25 lg:mb-40" />
  268.             <div class="flex">
  269.                 <span class="xs-text-card w-auto whitespace-nowrap mr-40">&#9400; {{ 'now'|date('Y') }} {{ site_title }}</span>
  270.                 {% if footer_menu_bottom is not empty %}
  271.                     <div class="flex flex-wrap justify-between gap-10 ml-auto">
  272.                         {% for item in footer_menu_bottom %}
  273.                             {% if item.type == "custom" %}
  274.                                 {% set slug = item.url %}
  275.                             {% elseif item.type == "category" %}
  276.                                 {% set slug = path('category', {category: item.slug}) %}
  277.                             {% elseif item.type == "broadcast" %}
  278.                                 {% set slug = path('broadcast', {id: item.item, slug: item.slug}) %}
  279.                             {% else %}
  280.                                 {% set slug = path('staticPage', {id: item.item, slug: item.slug}) %}
  281.                             {% endif %}
  282.                             {% set rel = item.rel ? ' rel="' ~ item.rel ~ '"' : '' %}
  283.                             {% set target = item.target ? ' target="' ~ item.target ~ '"' : '' %}
  284.                             <a href="{{ slug }}" class="xs-text-card lg:mx-20" {{ rel|raw }}{{ target|raw }}>{{ item.title }}</a>
  285.                         {% endfor %}
  286.                     </div>
  287.                 {% endif %}
  288.             </div>
  289.         </div>
  290.     </div>
  291. </footer>