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

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