{# templates/escapade/show.html.twig #}{% extends 'base.html.twig' %}{% block title %}O'Continent — {% endblock %}{# Header standard ou overlay si besoin sur le hero #}{% block header_classes %}header-overlay{% endblock %}{% block navbar_theme %}navbar-dark{% endblock %}{% block body %}{# ----------------------------- HERO Escapade (avec inclus)------------------------------ #}<section class="hero hero--continent is-animated position-relative text-white"> <div class="hero__media ratio ratio-21x9"> <img src="{{ asset('img/continent/' ~ continent.img) }}" alt="{{ continent.name }}" class="hero__img object-fit-cover w-100 h-100"> </div> <div class="hero__overlay hero__overlay--left"> <div class="container"> <div class="hero__card" style="max-width: 600px;"> <h1 class="hero__title display-5 fw-bold txt-ot-green mb-2" style="margin:0 !important"> {{ continent.name }} </h1> <p class="hero__subtitle mb-0">{{ continent.subtitle }}</p> </div> </div> </div></section>{# Fil d'Ariane #}<nav class="container my-4" aria-label="breadcrumb"> <ol class="breadcrumb small"> <li class="breadcrumb-item"><a href="{{ path('app') }}">Accueil</a></li> <li class="breadcrumb-item active" aria-current="page">Continent</li> <li class="breadcrumb-item active" aria-current="page">{{ continent.name }}</li> </ol></nav>{# ----------------------------- OFFRES DU MOMENT — réutilisation grille cartes maquette------------------------------ #}<section class="py-5 bg-white"> <div class="container"> <div class="text-center mb-5"> {% if continent.id == 1 %} <h2 class="h3 text-ot-green mb-1 fw-bold">Explorez l'{{ continent.name }} autrement</h2> <p class="text-muted mb-0">Entre paysages spectaculaires, cultures fascinantes et expériences authentiques, l'{{ continent.name }} vous invite à vivre un voyage unique.</p> <p class="text-muted mb-0">Découvrez nos offres soigneusement sélectionnées et laissez-vous guider vers votre prochaine grande aventure.</p> {% elseif continent.id == 2 %} <h2 class="h3 text-ot-green mb-1 fw-bold">Partez à la conquête des {{ continent.name }} !</h2> <p class="text-muted mb-0">De villes vibrantes en paysages sauvages, ce continent regorge d’expériences inoubliables à vivre.</p> <p class="text-muted mb-0">Parcourez nos circuits, escapades, roadtrips et croisières et trouvez le voyage qui fera battre votre cœur d’aventurier.</p> {% elseif continent.id == 3 %} <h2 class="h3 text-ot-green mb-1 fw-bold">L'{{ continent.name }}, une invitation à l’évasion.</h2> <p class="text-muted mb-0">De ses sites emblématiques à ses trésors cachés, chaque voyage sur ce continent est une promesse d’émotions et de découvertes.</p> <p class="text-muted mb-0">Laissez-vous séduire par nos offres d’exception et vivez le charme incomparable de l'{{ continent.name }}.</p> {% elseif continent.id == 4 %} <h2 class="h3 text-ot-green mb-1 fw-bold">L'{{ continent.name }} n’attend plus que vous !</h2> <p class="text-muted mb-0">Que vous rêviez de grandes routes, de plages dorées ou de capitales bouillonnantes, nos offres vous emmènent au cœur de l’action.</p> <p class="text-muted mb-0">Faites vos valises et laissez-vous tenter par une nouvelle aventure signée O’Tropik</p> {% elseif continent.id == 5 %} <div class="text-center mb-5 green"> <h2 class="h3 text-ot-green mb-1 fw-bold">Cap sur la {{ continent.name }}</h2> <p class="text-muted mb-0">Entre plages de sable blanc, eaux turquoise et ambiance créole, chaque île vous invite à la détente et à la découverte.</p> <p class="text-muted mb-0">Explorez nos offres et laissez-vous porter par la chaleur et la beauté des Antilles..</p> </div> {% endif %} </div> <div class="row g-3 g-md-4"> {% for o in offers %} <div class="col-12 col-sm-6 col-lg-3"> <article class="card card-offer border-0 shadow-sm h-100 overflow-hidden rounded-4"> {% if o.type.id == 1 %} <a href="{{ path('o.escapade.destination',{slug:o.slug}) }}" class="stretched-link text-decoration-none text-white"> <div class="ratio ratio-4x5"> <img src="{#{asset('img/destination/' ~ o.destination.slug ~ '/' ~ o.destination.img)}#}" alt="{{ o.title }}" class="object-fit-cover w-100 h-100"> </div> {% elseif o.type.id == 2 %} <a href="{{ path('o.circuit.destination',{slug:o.slug}) }}" class="stretched-link text-decoration-none text-white"> <div class="ratio ratio-4x5"> <img src="{{asset('img/offer/circuit/' ~ o.slug ~ '/' ~ o.img)}}" alt="{{ o.title }}" class="object-fit-cover w-100 h-100"> </div> {% elseif o.type.id == 3 %} <a href="{{ path('o.roadtrip.destination',{slug:o.slug}) }}" class="stretched-link text-decoration-none text-white"> <div class="ratio ratio-4x5"> <img src="{{asset('img/offer/road/' ~ o.slug ~ '/' ~ o.img)}}" alt="{{ o.title }}" class="object-fit-cover w-100 h-100"> </div> {% elseif o.type.id == 4 %} <a href="{{ path('o.croisiere.destination',{slug:o.slug})}}" class="stretched-link text-decoration-none text-white"> <div class="ratio ratio-4x5"> <img src="{{asset('img/offer/croisiere/' ~ o.slug ~ '/' ~ o.img)}}" alt="{{ o.title }}" class="object-fit-cover w-100 h-100"> </div> {% endif %} <div class="card-img-overlay d-flex flex-column justify-content-end p-3 p-md-4"> <p>{{o.type.name}}</p> <h3 class="h5 fw-bold text-white text-shadow-sm mb-3">{{ o.title }}</h3> <div> <span class="btn btn-outline-light btn-sm">Découvrir</span> </div> </div> </a> </article> </div> {% endfor %} </div> <div class="section-divider mx-auto my-5"></div> </div></section>{% endblock %}{% block extra_head %} {{ parent() }} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"> <style> .text-shadow-sm{ text-shadow:0 2px 4px rgba(0,0,0,.35); } .text-ot-green{ color: var(--ot-primary, #2ea37a); } .bg-ot-green{ background: var(--ot-primary, #2ea37a); } </style>{% endblock %}