templates/web/index.html.twig line 1

Open in your IDE?
  1. {% extends 'web/base.html.twig' %}
  3. {% block title %}2sweet – Slastičarnica Zagreb | Svadbene torte, desert stolovi, kolači{% endblock %}
  5. {% block seo %}
  6. <meta name="description" content="2sweet slastičarnica Zagreb – svadbene torte, desert stolovi i kolači po narudžbi. 15+ godina iskustva, 500+ svadbenih torti. Naručite već danas: 01/707-9009">
  7. <meta property="og:title" content="2sweet – Slastičarnica Zagreb | Svadbene torte i kolači">
  8. <meta property="og:description" content="Svadbene torte, desert stolovi i kolači po narudžbi iz Zagreba. 15+ godina iskustva. Nazovite: 01/707-9009">
  9. {% endblock %}
  11. {% block body %}
  13.     {{ include('web/components/inner/header-slider.html.twig') }}
  15.     {{ include('web/components/inner/goodies.html.twig') }}
  17.     {% if latestVideos|length > 0 %}
  18.     <div class="bgWhite">
  19.         <div class="container">
  20.             <div class="emptySpace75 emptySpace-xs40"></div>
  21.             <div class="row">
  22.                 <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3" style="text-align:center;">
  23.                     <div class="big titleShortcode">
  24.                         <h2 class="h2 bottomLine">Videoteka</h2>
  25.                         <div class="emptySpace30"></div>
  26.                     </div>
  27.                 </div>
  28.             </div>
  29.             <div class="emptySpace30 emptySpace-xs15"></div>
  30.             <div class="row">
  31.                 {% for video in latestVideos %}
  32.                 <div class="col-sm-6 col-md-4" style="margin-bottom:30px;">
  33.                     <div style="cursor:pointer;" onclick="openVideoModal('home_{{ video.id }}')">
  34.                         <div style="position:relative; border-radius:6px; overflow:hidden;">
  35.                             {% if video.type == 'youtube' and video.youtubeId %}
  36.                                 <img src="https://img.youtube.com/vi/{{ video.youtubeId }}/hqdefault.jpg"
  37.                                      style="width:100%; height:200px; object-fit:cover; display:block;" alt="{{ video.title }}">
  38.                             {% elseif video.thumbnail %}
  39.                                 <img src="{{ asset('uploads/' ~ video.thumbnail) }}"
  40.                                      style="width:100%; height:200px; object-fit:cover; display:block;" alt="{{ video.title }}">
  41.                             {% else %}
  42.                                 <div style="width:100%; height:200px; background:#f0ebe8; display:flex; align-items:center; justify-content:center;">
  43.                                     <span style="font-size:48px; opacity:0.4;">🎬</span>
  44.                                 </div>
  45.                             {% endif %}
  46.                             <div style="position:absolute; inset:0; background:rgba(0,0,0,0.25); display:flex; align-items:center; justify-content:center;"
  47.                                  onmouseover="this.style.background='rgba(0,0,0,0.4)'"
  48.                                  onmouseout="this.style.background='rgba(0,0,0,0.25)'">
  49.                                 <div style="width:52px; height:52px; background:#b85b63; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,0.3);">
  50.                                     <span style="color:#fff; font-size:20px; margin-left:4px;">&#9654;</span>
  51.                                 </div>
  52.                             </div>
  53.                         </div>
  54.                         <div class="emptySpace10"></div>
  55.                         <h4 class="h4" style="margin-bottom:4px;">{{ video.title }}</h4>
  56.                         {% if video.description %}
  57.                             <p class="normall" style="color:#888; font-size:13px;">{{ video.description|slice(0, 80) }}{% if video.description|length > 80 %}…{% endif %}</p>
  58.                         {% endif %}
  59.                     </div>
  60.                 </div>
  61.                 {% endfor %}
  62.             </div>
  63.             <div class="emptySpace30"></div>
  64.             <div class="row">
  65.                 <div class="col-sm-12" style="text-align:center;">
  66.                     <a href="{{ path('web_videos') }}" class="btn" style="background:#b85b63; color:#fff; padding:12px 36px; border-radius:3px; font-size:14px; font-weight:600; text-decoration:none; display:inline-block; text-transform:uppercase; letter-spacing:1px;">
  67.                         Svi videi
  68.                     </a>
  69.                 </div>
  70.             </div>
  71.             <div class="emptySpace75 emptySpace-xs40"></div>
  72.         </div>
  73.     </div>
  74.     {% endif %}
  76.     {{ include('web/components/inner/services-home.html.twig') }}
  78.     <!-- CTA Banner -->
  79.     <div style="background: linear-gradient(135deg, #4b2c20 0%, #7a3f2e 100%); padding: 70px 0; text-align:center;">
  80.         <div class="container">
  81.             <h2 class="h2" style="color:#fff; margin-bottom:15px;">Svadbena torta po Vašoj mjeri</h2>
  82.             <p class="normall" style="color:rgba(255,255,255,0.85); max-width:560px; margin:0 auto 35px; line-height:1.8;">
  83.                 Napravili smo ih stotine — svaka je bila jedinstvena, kao i par koji je stoji iza nje.
  84.                 Kontaktirajte nas i zajedno ćemo kreirati tortu o kojoj ste sanjali.
  85.             </p>
  86.             <a href="{{ path('web_calculator') }}" class="btn" style="background:#b85b63; color:#fff; padding:14px 40px; border-radius:3px; font-size:15px; font-weight:600; text-decoration:none; display:inline-block; margin-right:12px; margin-bottom:10px;">
  87.                 Kalkulator
  88.             </a>
  89.             <a href="{{ path('web_contact') }}" class="btn" style="background:transparent; color:#fff; padding:13px 40px; border-radius:3px; font-size:15px; font-weight:600; text-decoration:none; display:inline-block; border:2px solid rgba(255,255,255,0.6); margin-right:12px; margin-bottom:10px;">
  90.                 Kontaktirajte nas
  91.             </a>
  92.             <button onclick="document.getElementById('sibi-panel').classList.remove('is-closed'); document.getElementById('sibi-toggle').setAttribute('aria-expanded','true');" class="btn" style="background:transparent; color:#fff; padding:13px 40px; border-radius:3px; font-size:15px; font-weight:600; text-decoration:none; display:inline-block; border:2px solid rgba(255,255,255,0.6); margin-bottom:10px; cursor:pointer;">
  93.                 💬 Pitaj Slađanu
  94.             </button>
  95.         </div>
  96.     </div>
  98.     <!-- Stats strip -->
  99.     <div class="bgWhite">
  100.         <div class="container">
  101.             <div class="emptySpace75 emptySpace-xs40"></div>
  102.             <div class="row" style="text-align:center;">
  103.                 <div class="col-sm-4">
  104.                     <div class="emptySpace-xs30"></div>
  105.                     <p style="font-size:48px; font-weight:700; color:#b85b63; margin-bottom:5px; font-family:'Berkshire Swash', cursive;">500+</p>
  106.                     <p class="normall" style="color:#555; font-size:15px;">svadbenih torti</p>
  107.                 </div>
  108.                 <div class="col-sm-4">
  109.                     <div class="emptySpace-xs30"></div>
  110.                     <p style="font-size:48px; font-weight:700; color:#b85b63; margin-bottom:5px; font-family:'Berkshire Swash', cursive;">15+</p>
  111.                     <p class="normall" style="color:#555; font-size:15px;">godina iskustva</p>
  112.                 </div>
  113.                 <div class="col-sm-4">
  114.                     <div class="emptySpace-xs30"></div>
  115.                     <p style="font-size:48px; font-weight:700; color:#b85b63; margin-bottom:5px; font-family:'Berkshire Swash', cursive;">30+</p>
  116.                     <p class="normall" style="color:#555; font-size:15px;">vrsta kolača</p>
  117.                 </div>
  118.             </div>
  119.             <div class="emptySpace75 emptySpace-xs40"></div>
  120.         </div>
  121.     </div>
  123.     {# Video modal za naslovnicu #}
  124.     <div id="video-modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:9998; align-items:center; justify-content:center;"
  125.          onclick="closeVideoModal()">
  126.         <button onclick="closeVideoModal()" style="position:absolute; top:20px; right:30px; background:none; border:none; color:#fff; font-size:36px; cursor:pointer;">&times;</button>
  127.         <div onclick="event.stopPropagation();" style="width:90vw; max-width:900px;">
  128.             <div id="video-modal-inner" style="position:relative; padding-bottom:56.25%; height:0;"></div>
  129.         </div>
  130.     </div>
  132.     <script>
  133.     var homeVideoData = {
  134.         {% for video in latestVideos %}
  135.         'home_{{ video.id }}': {
  136.             type: '{{ video.type }}',
  137.             {% if video.type == 'youtube' %}embedUrl: '{{ video.embedUrl }}',
  138.             {% elseif video.type == 'vimeo' %}embedUrl: '{{ video.embedUrl }}',
  139.             {% elseif video.type == 'upload' %}src: '{{ asset('uploads/' ~ video.videoSource) }}',
  140.             {% elseif video.type == 'link' %}embedUrl: '{{ video.embedUrl }}',
  141.             {% endif %}
  142.         },
  143.         {% endfor %}
  144.     };
  145.     function openVideoModal(id) {
  146.         var v = homeVideoData[id];
  147.         if (!v) return;
  148.         var inner = document.getElementById('video-modal-inner');
  149.         inner.innerHTML = v.type === 'upload'
  150.             ? '<video controls autoplay style="position:absolute;top:0;left:0;width:100%;height:100%;background:#000;"><source src="' + v.src + '"></video>'
  151.             : '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="' + v.embedUrl + '" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>';
  152.         document.getElementById('video-modal').style.display = 'flex';
  153.         document.body.style.overflow = 'hidden';
  154.     }
  155.     function closeVideoModal() {
  156.         document.getElementById('video-modal').style.display = 'none';
  157.         document.getElementById('video-modal-inner').innerHTML = '';
  158.         document.body.style.overflow = '';
  159.     }
  160.     document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeVideoModal(); });
  161.     </script>
  163.     <div class="footerSeparator"></div>
  164.     <div class="emptySpace50 emptySpace-xs30"></div>
  166. {% endblock %}