templates/default/escapade-destination.html.twig line 1

Open in your IDE?
  1. {# templates/escapade/show.html.twig #}
  2. {% extends 'base.html.twig' %}
  4. {% block title %}O'Escapade — {{ offer.title }} | O Tropik – Agence de voyage en Guadeloupe {% endblock %}
  5. {% block seo %}
  6.  <meta name="description" content="{{offer.description}}" >
  8.     <meta property="og:title" content="{{offer.metaTitle}}" />
  9.     <meta property="og:type" content="Website" />
  10.     <meta property="og:description" content="{{offer.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="{{offer.metaTitle}}">
  16.     <meta name="twitter:description" content="{{offer.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 #}
  20. {% block header_classes %}header-overlay{% endblock %}
  21. {% block navbar_theme %}navbar-dark{% endblock %}
  23. {% block body %}
  25. {# -----------------------------
  26.    HERO Escapade (avec inclus)
  27. ------------------------------ #}
  28. <section class="hero hero--offer-fallback is-animated position-relative text-white">
  29.   <div class="hero__media ratio ratio-21x9">
  30.     {% if offer.img %}
  31.       <img src="{{ asset('img/offer/' ~ offer.img) }}"
  32.            alt="{{ offer.title }}"
  33.            class="hero__img object-fit-cover w-100 h-100">
  34.     {% else %}
  35.       <img src="{{ asset('img/destination/' ~ offer.destination.slug ~ '/' ~ offer.destination.img) }}"
  36.            alt="{{ offer.title }}"
  37.            class="hero__img object-fit-cover w-100 h-100">
  38.     {% endif %}
  39.   </div>
  41.   <div class="hero__overlay hero__overlay--left">
  42.     <div class="container">
  43.       <div class="hero__card" style="max-width: 600px;">
  44.         <h1 class="hero__title display-5 fw-bold txt-ot-green mb-3">{{ offer.title }}</h1>
  45.         <p class="hero__subtitle mb-3">{{ offer.subtitle }}</p>
  47.         {% if offer.includedText %}
  48.           <h6 class="fw-bold txt-ot-green mb-2">Inclus :</h6>
  49.           <ul class="list-unstyled mb-0">
  50.             {% for line in offer.includedText|split("\n") %}
  51.               {% if line|trim != '' %}
  52.                 <li class="mb-1">✔️ {{ line }}</li>
  53.               {% endif %}
  54.             {% endfor %}
  55.           </ul>
  56.         {% endif %}
  57.       </div>
  58.     </div>
  59.   </div>
  60. </section>
  62. {# Fil d'Ariane #}
  63. <nav class="container my-4" aria-label="breadcrumb">
  64.   <ol class="breadcrumb small">
  65.     <li class="breadcrumb-item"><a href="{{ path('app') }}">Accueil</a></li>
  66.     <li class="breadcrumb-item"><a href="{{ path('o.escapade') }}">O'escapade</a></li>
  67.     <li class="breadcrumb-item active" aria-current="page">{{offer.destination.name}}</li>
  68.   </ol>
  69. </nav>
  71. {% if formules %}
  72. {# -----------------------------
  73.    Formules
  74. ------------------------------ #}
  75. <section class="container py-5">
  77.   <h2 class="display-6 lh-1 fw-bold txt-ot-green mb-4">Nos formules O’Escapade</h2>
  79.   <div class="row row-cols-1 row-cols-md-2 g-4">
  80.   {% for f in formules %}
  81.     {# Formule 1 #}
  82.     <div class="col">
  83.       <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
  84.         <div class="card-body p-4">
  85.           <span class="badge bg-ot-green text-white mb-3">{{f.durationLabel}}</span>
  86.           <h3 class="h5 fw-bold mb-3">{{f.title}}</h3>
  88.           <p class="small text-muted mb-2"><i class="bi bi-calendar-week"></i> Départs :</p>
  89.           <ul class="small mb-3">
  90.             {% for line in f.departuresText|split("\n") %}
  91.                 {% if line|trim != '' %}
  92.                    <li class="mb-1">{{ line }}</li>
  93.                 {% endif %}
  94.             {% endfor %}
  95.           </ul>
  97.           <p class="small text-muted mb-2"><i class="bi bi-airplane"></i> Transports :</p>
  98.           <ul class="small mb-3">
  99.             {% for line in f.transportText|split("\n") %}
  100.                 {% if line|trim != '' %}
  101.                    <li class="mb-1">{{ line }}</li>
  102.                 {% endif %}
  103.             {% endfor %}
  104.           </ul>
  106.           <p class="text-muted small mb-4">{{f.description}}</p>
  107.           <a href="{{ path('o.devis') }}" class="btn btn-outline-ot-green rounded-pill">Demander un devis</a>
  108.         </div>
  109.       </div>
  110.     </div>
  111.     {% endfor %}
  112. </section>
  113.   {% endif %}
  115. {# -----------------------------
  116.    SECTION 1 — Hébergement (SÉLECTION D'HÔTELS)
  117. ------------------------------ #}
  118. <section class="container py-4 py-md-5">
  119.   <div class="row g-4">
  120.     <div class="col-12 col-lg-6">
  121.       <p class="text-muted small mb-1">{{offer.title}}</p>
  122.       <h2 class="display-6 lh-1 fw-bold txt-ot-green mb-3">Hébergement</h2>
  123.       <p class="text-muted">
  124.         Notre sélection d’hôtels partenaires pour une escapade sans fausse note : confort, localisation idéale et accueil au top.
  125.       </p>
  126.     </div>
  127.   </div>
  129.   <div class="row g-3 g-md-4 mt-2">
  130.     {% for h in offerHebergement %}
  131.       <div class="col-12 col-sm-6 col-lg-4">
  132.         <article class="card hotel-card border-0 shadow-sm h-100 rounded-4 overflow-hidden">
  133.           <a href="{#{ h.url }#}" class="stretched-link text-decoration-none">
  134.             <div class="ratio ratio-4x3">
  135.               <img src="{{asset('img/hotels/' ~ h.hebergement.country.slug ~ '/' ~ h.hebergement.slug ~ '/' ~ h.hebergement.img)}}" alt="{{ h.hebergement.name }} — photo de l’hôtel" class="object-fit-cover w-100 h-100">
  136.             </div>
  137.             <div class="card-body">
  138.               <h3 class="h6 mb-1 d-flex justify-content-between align-items-baseline">
  139.                 <span class="hotel-name">{{ h.hebergement.name }}</span>
  140.                 <span class="hotel-price">à partir de {{ h.priceFrom }}€</span>
  141.               </h3>
  142.               <p class="small text-muted mb-0">{{ h.blurb }}</p>
  143.             </div>
  144.           </a>
  145.         </article>
  146.       </div>
  147.     {% endfor %}
  148.   </div>
  149. </section>
  151. {% if offer.widget %}
  152. <div class="container">
  153.   <h2 class="h3 txt-ot-green fw-bold mb-3">Activités</h2>
  154. <div class="widget">
  155.   {{offer.widget|raw}}
  156. </div>
  157. </div>
  158. {% endif %}
  160. {# -----------------------------
  161.    SECTION 2 — Parade (texte gauche, image droite)
  162. ------------------------------ 
  163. <section class="container py-4 py-md-5">
  164.   <div class="row g-4 align-items-center">
  165.     <div class="col-12 col-lg-6 order-1 order-lg-0">
  166.       <p class="text-muted small mb-1">{{ escapade.kicker|default('Carnaval St Lucie') }}</p>
  167.       <h2 class="display-6 lh-1 fw-bold text-ot-green mb-3">Parade</h2>
  168.       <p class="text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry…</p>
  169.     </div>
  170.     <div class="col-12 col-lg-6 order-0 order-lg-1">
  171.       <div class="ratio ratio-4x3 rounded-4 overflow-hidden shadow-sm">
  172.         <img src="{{ asset(escapade.parade_img|default('img/escapade/parade.jpg')) }}" alt="Parade" class="object-fit-cover w-100 h-100">
  173.       </div>
  174.     </div>
  175.   </div>
  176. </section>#}
  178. {# -----------------------------
  179.    SECTION 3 — Activités (image gauche, texte droite)
  180. ------------------------------ 
  181. <section class="container py-4 py-md-5">
  182.   <div class="row g-4 align-items-center">
  183.     <div class="col-12 col-lg-6">
  184.       <div class="ratio ratio-4x3 rounded-4 overflow-hidden shadow-sm">
  185.         <img src="{{ asset(escapade.activites_img|default('img/escapade/activity.jpg')) }}" alt="Activités" class="object-fit-cover w-100 h-100">
  186.       </div>
  187.     </div>
  188.     <div class="col-12 col-lg-6">
  189.       <p class="text-muted small mb-1">{{ escapade.kicker|default('Carnaval St Lucie') }}</p>
  190.       <h2 class="display-6 lh-1 fw-bold text-ot-green mb-3">Activités</h2>
  191.       <p class="text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry…</p>
  192.     </div>
  193.   </div>
  194. </section> #}
  196. {# -----------------------------
  197.    OFFRES DU MOMENT — réutilisation grille cartes maquette
  198. ------------------------------ #}
  199. <section class="py-5 bg-white">
  200.   <div class="container">
  201.     <header class="mb-3">
  202.       <h2 class="h3 txt-ot-green mb-1 fw-bold">Nos O'offres du moment</h2>
  203.       <p class="text-muted mb-0">Découvrez nos dernières expériences en immersion !</p>
  204.     </header>
  206.     <div class="row g-3 g-md-4">
  207.       {% set offres = [
  208.         { title: 'Carnaval St Lucie', img: 'carnaval.jpg', url: '#' },
  209.         { title: 'Croisière Caraïbes', img: 'caraibes.jpg', url: '#' },
  210.         { title: 'Spring Break Cancun', img: 'cancun.jpg', url: '#' },
  211.         { title: 'Road trip Route 66', img: 'road-66.jpg', url: '#' }
  212.       ] %}
  213.       {% for o in offres %}
  214.       <div class="col-12 col-sm-6 col-lg-3">
  215.         <article class="card card-offer border-0 shadow-sm h-100 overflow-hidden rounded-4">
  216.           <a href="{{ o.url }}" class="stretched-link text-decoration-none text-white">
  217.             <div class="ratio ratio-4x5">
  218.               <img src="{{ asset('img/offre/' ~ o.img) }}" alt="{{ o.title }}" class="object-fit-cover w-100 h-100">
  219.             </div>
  220.             <div class="card-img-overlay d-flex flex-column justify-content-end p-3 p-md-4">
  221.               <h3 class="h5 fw-bold text-white text-shadow-sm mb-3">{{ o.title }}</h3>
  222.               <div>
  223.                 <span class="btn btn-outline-light btn-sm">Découvrir</span>
  224.               </div>
  225.             </div>
  226.           </a>
  227.         </article>
  228.       </div>
  229.       {% endfor %}
  230.     </div>
  232.     <div class="section-divider mx-auto my-5"></div>
  233.   </div>
  234. </section>
  236. {% endblock %}
  238. {% block extra_head %}
  239.   {{ parent() }}
  240.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
  241.   <style>
  242.     .text-shadow-sm{ text-shadow:0 2px 4px rgba(0,0,0,.35); }
  243.     .text-ot-green{ color: var(--ot-primary, #2ea37a); }
  244.   </style>
  245. {% endblock %}