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 %}{{typeOffer.title}}{% endblock %}
  5. {% block seo %}
  6.  <meta name="description" content="{{typeOffer.description}}" >
  8.     <meta property="og:title" content="{{typeOffer.metaTitle}}" />
  9.     <meta property="og:type" content="Website" />
  10.     <meta property="og:description" content="{{typeOffer.metaDescription}}" />
  11.     <meta property="og:url" content="{{absolute_url( app.request.uri)}}" />
  12.     <meta property="og:image" content="{#{asset('img/asset/cardimg-fb.jpg')}#}" />
  14.     <meta name ="twitter:card" content="summary_large_image" />
  15.     <meta name="twitter:title" content="{{typeOffer.metaTitle}}">
  16.     <meta name="twitter:description" content="{{typeOffer.metaDescription}}">
  17.     <meta name="twitter:image" content="{#{asset('img/asset/cardimg-fb.jpg')}#}">
  18. {% endblock %}
  19. {# Header standard ou overlay si besoin sur le hero #}
  21. {% block body %}
  23. {# -----------------------------
  24.    HERO Escapade (avec inclus)
  25. ------------------------------ #}
  26. <section class="hero hero--type is-animated position-relative text-white">
  27.   <div class="hero__media ratio ratio-21x9">
  28.     {% if typeOffer.img %}
  29.       <img src="{{ asset('img/offer/') ~ typeOffer.img }}"
  30.            alt="{{ typeOffer.name }}"
  31.            class="hero__img object-fit-cover w-100 h-100">
  32.     {% else %}
  33.       <img src="{{ asset('img/2633.jpg') }}"
  34.            alt="{{ typeOffer.name }}"
  35.            class="hero__img object-fit-cover w-100 h-100">
  36.     {% endif %}
  37.   </div>
  39.   <div class="hero__overlay hero__overlay--left">
  40.     <div class="container">
  41.       <div class="hero__card" style="max-width: 600px;">
  42.         <h1 class="hero__title display-5 fw-bold mb-3
  43.           {% if typeOffer.id == '1' %} txt-ot-green
  44.           {% elseif typeOffer.id == '2' %} txt-ot-yellow
  45.           {% elseif typeOffer.id == '3' %} txt-ot-brown
  46.           {% elseif typeOffer.id == '4' %} txt-ot-blue
  47.           {% endif %}">
  48.           {{ typeOffer.name }}
  49.         </h1>
  51.         <p class="hero__subtitle mb-0">{{ typeOffer.hook }}</p>
  52.       </div>
  53.     </div>
  54.   </div>
  55. </section>
  57. {# Fil d'Ariane #}
  58. <nav class="container my-4" aria-label="breadcrumb">
  59.   <ol class="breadcrumb small">
  60.     <li class="breadcrumb-item"><a href="{{ path('app') }}">Accueil</a></li>
  61.     <li class="breadcrumb-item active">{{typeOffer.name}}</li>
  62.   </ol>
  63. </nav>
  64. {# -----------------------------
  65.    OFFRES DU MOMENT — réutilisation grille cartes maquette
  66. ------------------------------ #}
  67. <section class="py-5 bg-white">
  68.   <div class="container">
  69.     <header class="mb-3">
  70.       <h2 class="h3 txt-ot-{{typeOffer.color}} mb-1 fw-bold">Notre sélection {{typeOffer.name}}.</h2>
  71.       <p class="text-muted mb-0">{{typeOffer.summary}}</p>
  72.     </header>
  74.   <div class="row g-3 g-md-4">
  75.       {% for o in offers %}
  76.       <div class="col-12 col-sm-6 col-lg-3">
  77.         <article class="card card-offer border-0 shadow-sm h-100 overflow-hidden rounded-4">
  78.         {% if o.type.id == '1' %}
  79.           <a href="{{ path('o.escapade.destination',{slug:o.destination.slug}) }}" class="stretched-link text-decoration-none text-white">
  80.           <div class="ratio ratio-4x5">
  81.               <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">
  82.         {% elseif o.type.id == '2' %}
  83.           <a href="{{ path('o.circuit.destination',{slug:o.slug})}}" class="stretched-link text-decoration-none text-white">
  84.           <div class="ratio ratio-4x5">
  85.               <img src="{{asset('img/offer/circuit/' ~ o.slug  ~ '/' ~ o.img)}}" alt="{{ o.file }}" class="object-fit-cover w-100 h-100">
  86.         {% elseif o.type.id == "3" %}
  87.           <a href="{{ path('o.roadtrip.destination',{slug:o.slug})}}" class="stretched-link text-decoration-none text-white">
  88.           <div class="ratio ratio-4x5">
  89.               <img src="{{asset('img/offer/road/' ~ o.slug  ~ '/' ~ o.img)}}" alt="{{ o.title }}" class="object-fit-cover w-100 h-100">
  90.         {% elseif o.type.id == "4" %}
  91.           <a href="{{ path('o.croisiere.destination',{slug:o.slug})}}" class="stretched-link text-decoration-none text-white">
  92.           <div class="ratio ratio-4x5">
  93.               <img src="{{asset('img/offer/croisiere/' ~ o.slug  ~ '/' ~ o.img)}}" alt="{{ o.title }}" class="object-fit-cover w-100 h-100">
  94.         {% endif %}
  95.             </div>
  96.             <div class="card-img-overlay d-flex flex-column justify-content-end p-3 p-md-4">
  97.               <h3 class="h5 fw-bold text-white text-shadow-sm mb-3">{{ o.title }}</h3>
  98.               <div>
  99.                 <span class="btn btn-outline-light btn-sm rounded-pill">Découvrir</span>
  100.               </div>
  101.             </div>
  102.           </a>
  103.         </article>
  104.       </div>
  105.       {% endfor %}
  106.     </div>
  108.     <div class="section-divider mx-auto my-5"></div>
  109.   </div>
  110. </section>
  112. {% endblock %}
  114. {% block extra_head %}
  115.   {{ parent() }}
  116.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
  117.   <style>
  118.     .text-shadow-sm{ text-shadow:0 2px 4px rgba(0,0,0,.35); }
  119.     .text-ot-green{ color: var(--ot-primary, #2ea37a); }
  120.     .bg-ot-green{ background: var(--ot-primary, #2ea37a); }
  121.   </style>
  122. {% endblock %}