templates/default/offers.html.twig line 1

Open in your IDE?
  1. {# templates/escapade/show.html.twig #}
  2. {% extends 'base.html.twig' %}
  4. {% block title %}O'Escapade — {{ escapade.title|default('Carnaval St Lucie') }}{% endblock %}
  6. {# Header standard ou overlay si besoin sur le hero #}
  7. {% block header_classes %}header-overlay{% endblock %}
  8. {% block navbar_theme %}navbar-dark{% endblock %}
  10. {% block body %}
  12. {# -----------------------------
  13.    HERO Escapade (avec inclus)
  14. ------------------------------ #}
  15. <section class="position-relative text-white">
  16.   <div class="ratio ratio-21x9">
  17.     <img src="{{ asset('img/2633.jpg') }}" alt="" class="object-fit-cover w-100 h-100">
  18.   </div>
  20.   <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center">
  21.     <div class="container">
  22.       <div class="bg-white text-dark p-4 p-md-5 rounded-4 shadow-sm" style="max-width: 600px;">
  23.         <h1 class="display-5 fw-bold txt-ot-green mb-3">{{typeOffer.name}}</h1>
  24.         <p class="mb-3">{{typeOffer.hook}}</p>
  25.       </div>
  26.     </div>
  27.   </div>
  28. </section>
  30. {# Fil d'Ariane #}
  31. <nav class="container my-4" aria-label="breadcrumb">
  32.   <ol class="breadcrumb small">
  33.     <li class="breadcrumb-item"><a href="{{ path('app') }}">Accueil</a></li>
  34.     <li class="breadcrumb-item active">{{typeOffer.name}}</li>
  35.   </ol>
  36. </nav>
  37. {# -----------------------------
  38.    OFFRES DU MOMENT — réutilisation grille cartes maquette
  39. ------------------------------ #}
  40. <section class="py-5 bg-white">
  41.   <div class="container">
  42.     <header class="mb-3">
  43.       <h2 class="h3 txt-ot-green mb-1 fw-bold">Notre sélection {{typeOffer.name}}.</h2>
  44.       <p class="text-muted mb-0">{{typeOffer.description}}</p>
  45.     </header>
  47.   <div class="row g-3 g-md-4">
  48.       {% for o in offers %}
  49.       <div class="col-12 col-sm-6 col-lg-3">
  50.         <article class="card card-offer border-0 shadow-sm h-100 overflow-hidden rounded-4">
  51.         {% if o.type.id == '1' %}
  52.           <a href="{{ path('o.escapade.destination',{slug:o.destination.slug}) }}" class="stretched-link text-decoration-none text-white">
  53.           <div class="ratio ratio-4x5">
  54.               <img src="{{asset('img/destination/' ~ o.destination.slug  ~ '/' ~ o.destination.img)}}" alt="{{ o.title }}" alt="{{ o.title }}" class="object-fit-cover w-100 h-100">
  55.         {% elseif o.type.id == '2' %}
  56.           <a href="{{ path('o.circuit.destination',{slug:o.slug})}}" class="stretched-link text-decoration-none text-white">
  57.           <div class="ratio ratio-4x5">
  58.               <img src="{{asset('img/circuits/' ~ o.slug  ~ '/' ~ o.img)}}" alt="{{ o.title }}" class="object-fit-cover w-100 h-100">
  59.         {% elseif o.type.id == "3" %}
  60.           <a href="{{ path('o.roadtrip.destination',{slug:o.slug})}}" class="stretched-link text-decoration-none text-white">
  61.           <div class="ratio ratio-4x5">
  62.               <img src="{{asset('img/road/' ~ o.slug  ~ '/' ~ o.img)}}" alt="{{ o.title }}" class="object-fit-cover w-100 h-100">
  63.         {% elseif o.type.id == "4" %}
  64.           <a href="{{ path('o.croisiere.destination',{slug:o.slug})}}" class="stretched-link text-decoration-none text-white">
  65.           <div class="ratio ratio-4x5">
  66.               <img src="{{asset('img/croisiere/' ~ o.slug  ~ '/' ~ o.img)}}" alt="{{ o.title }}" class="object-fit-cover w-100 h-100">
  67.         {% endif %}
  68.             </div>
  69.             <div class="card-img-overlay d-flex flex-column justify-content-end p-3 p-md-4">
  70.               <h3 class="h5 fw-bold text-white text-shadow-sm mb-3">{{ o.title }}</h3>
  71.               <div>
  72.                 <span class="btn btn-outline-light btn-sm rounded-pill">Découvrir</span>
  73.               </div>
  74.             </div>
  75.           </a>
  76.         </article>
  77.       </div>
  78.       {% endfor %}
  79.     </div>
  81.     <div class="section-divider mx-auto my-5"></div>
  82.   </div>
  83. </section>
  85. {% endblock %}
  87. {% block extra_head %}
  88.   {{ parent() }}
  89.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
  90.   <style>
  91.     .text-shadow-sm{ text-shadow:0 2px 4px rgba(0,0,0,.35); }
  92.     .text-ot-green{ color: var(--ot-primary, #2ea37a); }
  93.     .bg-ot-green{ background: var(--ot-primary, #2ea37a); }
  94.   </style>
  95. {% endblock %}