{% extends 'base.html.twig' %}{% block title %}OTropik – Agence de voyage en Guadeloupe | Circuits & Séjours sur mesure{% endblock %}{% block seo %} <meta name="description" content="Découvrez OTropik, agence de voyages proposant circuits, séjours, roadtrips et croisières sur mesure depuis la Guadeloupe vers le monde entier." > <meta property="og:title" content="OTropik – Agence de voyages, circuits et séjours sur mesure" /> <meta property="og:type" content="Website" /> <meta property="og:description" content="Explorez le monde avec OTropik : circuits, séjours, roadtrips et croisières sur mesure depuis la Guadeloupe." /> <meta property="og:url" content="{{absolute_url( app.request.uri)}}" /> <meta property="og:image" content="{#{asset('img/asset/cardimg-fb.jpg')}#}" /> <meta name ="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="OTropik – Agence de voyages, circuits et séjours sur mesure"> <meta name="twitter:description" content="Explorez le monde avec OTropik : circuits, séjours, roadtrips et croisières sur mesure depuis la Guadeloupe."> <meta name="twitter:image" content="{#{asset('img/asset/cardimg-fb.jpg')}#}">{% endblock %}{% block body %}{# ----------------------------- HERO avec fond + recherche------------------------------ #}<section class="section-hero position-relative"> <picture> {% if banner.img %} <img src="{{ asset('img/banner/')}}{{banner.img}}" alt="Plage paradisiaque" class="hero-bg w-100 h-100"> {% else %} <img src="{{ asset('img/3004.jpg') }}" alt="Plage paradisiaque en Guadeloupe" class="hero-bg w-100 h-100"> {% endif %} </picture> <div class="hero-overlay container py-5 text-center text-white"> <img src="{{ asset('img/logo-otropik.png') }}" alt="Otropik" class="mb-3" style="max-width: 240px; height: auto;"> <p class="lead fw-semibold text-shadow-sm">N'imaginez plus vos vacances, vivez-les !</p> <form class="d-flex justify-content-center mt-4" action="{{ path('search') }}" method="get" role="search" aria-label="Recherche de séjours"> <div class="search-pill bg-white rounded-pill shadow-lg d-flex align-items-center overflow-hidden w-100" style="max-width:760px;"> <input class="form-control border-0 px-4 py-3 flex-grow-1" type="search" name="q" placeholder="Où partez-vous ? (ex: Guadeloupe, New York, croisière…)" aria-label="Rechercher"> <button class="btn btn-primary rounded-0 px-4 py-3" type="submit">Rechercher</button> </div> </form> <div class="d-flex gap-2 justify-content-center mt-3 flex-wrap"> <a href="{{ path('o.circuit') }}" class="btn btn-outline-light btn-sm rounded-pill">O' Circuit</a> <a href="{{ path('o.escapade') }}" class="btn btn-outline-light btn-sm rounded-pill">O' Escapade</a> <a href="{{ path('o.roadtrip') }}" class="btn btn-outline-light btn-sm rounded-pill">O' RoadTrip</a> <a href="{{ path('o.croisiere') }}" class="btn btn-outline-light btn-sm rounded-pill">O' Croisière</a> </div> </div></section>{# ----------------------------- Offres du moment + chips------------------------------ #}<section class="py-5 bg-white"> <div class="container"> <header class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3"> <div> <h2 class="h3 text-success mb-1 fw-bold">Nos O'ffres du moment</h2> <p class="text-muted mb-0">Découvrez nos dernières expériences en immersion !</p> </div> <div class="d-flex gap-2 flex-wrap"> <a href="{{ path('o.circuit') }}" class="chip">O' Circuit</a> <a href="{{ path('o.escapade') }}" class="chip">O' Escapade</a> <a href="{{ path('o.roadtrip') }}" class="chip">O' RoadTrip</a> </div> </header> <div class="row g-3 g-md-4"> {% for o in ourOffer %} <div class="col-12 col-sm-6 col-lg-3"> <article class="card card-offer border-0 shadow-sm h-10s0 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"> {% elseif o.type.id == 2 %} <a href="{{ path('o.circuit.destination',{slug:o.slug})}}" class="stretched-link text-decoration-none text-white"> {% elseif o.type.id == 3 %} <a href="{{ path('o.roadtrip.destination',{slug:o.slug})}}" class="stretched-link text-decoration-none text-white"> {% endif %} <div class="ratio ratio-4x5"> <img src="{{asset('img/offer/' ~ o.file ~ '/' ~ o.slug ~ '/' ~ o.img)}}" alt="{{ o.file }}" class="object-fit-cover w-100 h-100"> </div> <div class="card-img-overlay d-flex flex-column justify-content-end p-3 p-md-4"> <span>{{ o.type.name }}</span> <h3 class="h5 fw-bold text-white text-shadow-sm mb-3">{{ o.title }}</h3> <div> <span class="btn btn-outline-light btn-sm rounded-pill">Découvrir</span> </div> </div> </a> </article> </div> {% endfor %} </div> <div class="section-divider mx-auto my-5"></div> </div></section>{# ----------------------------- O'Selection (grille 4 cartes)------------------------------ #}<section class="py-5 bg-white"> <div class="container"> <header class="mb-3"> <h2 class="h3 text-success mb-1 fw-bold">Nos O'Sélections</h2> <p class="text-muted mb-0">Découvrez nos dernières expériences en immersion !</p> </header> <div class="row g-3 g-md-4"> {% for offer in offEscapade %} <div class="col-12 col-sm-6 col-lg-3"> <article class="card card-dest border-0 shadow-sm h-100 overflow-hidden rounded-4"> {% if offer.destination %} <a href="{{ path('o.escapade.destination',{slug:offer.destination.slug}) }}" class="stretched-link text-decoration-none text-white"> <div class="ratio ratio-4x5"> <img src="{{asset('img/destination/' ~ offer.destination.slug ~ '/' ~ offer.destination.img)}}" alt="{{ offer.title }}" class="object-fit-cover w-100 h-100"> </div> <div class="card-img-overlay d-flex flex-column justify-content-end p-3 p-md-4"> {# <span class="badge bg-light text-dark rounded-pill small mb-2">{{ c.badge }}</span> #} <h3 class="h5 fw-bold text-white text-shadow-sm mb-0">{{ offer.title }}</h3> <div class="mt-3"> <span class="btn btn-outline-light btn-sm rounded-pill">Découvrir</span> </div> </div> </a> {% endif %} </article> </div>{% endfor %} <div class="section-divider mx-auto my-5"></div> </div></section>{# ----------------------------- Bandeau CTA parallax------------------------------ #}<section class="cta-parallax text-white text-center"> {# bg en CSS via variable -> parallax #} <div class="cta-parallax__bg" style="--bg:url('{{ asset('img/para.jpg') }}');"></div> <div class="cta-parallax__overlay"></div> <div class="container position-relative py-5 py-lg-7"> <h2 class="display-6 fw-bold text-shadow-sm mb-3">Une envie de voyage particulière ?</h2> {# tags / chips #} <ul class="cta-chips list-unstyled mx-auto mb-3" role="list" aria-label="Idées de voyages"> {% set tags = ['Randonnée','Road trip','Croisière','Immersion','Aventure','Découverte'] %} {#{% for t in tags %} <li class="chip chip--ghost">{{ t }}</li> {% endfor %}#} {% for c in continents %} <a class="chip chip--ghost" href="{{path('o.continent',{slug:c.slug})}}"><li>{{ c.name }}</li></a> {% endfor %} </ul> <p class="opacity-90 mb-4">Construisez votre voyage avec un spécialiste</p> <div class="d-flex gap-2 justify-content-center flex-wrap"> <a href="{{ path('o.contact') }}" class="btn btn-outline-light rounded-pill">Nous contacter</a> <a href="{{ path('o.devis') }}" class="btn btn-primary rounded-pill">Demander un devis</a> </div> </div></section>{# ----------------------------- Pourquoi voyager avec nous + O’Atouts------------------------------ #}<section class="py-5 bg-white"> <div class="container"> {# --- Partie Pourquoi voyager avec nous --- #} <div class="row align-items-center g-4"> <div class="col-12 col-lg-6"> <div id="carouselAtouts" class="carousel slide rounded-4 overflow-hidden shadow-sm" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="{{ asset('img/photo-agence.jpg') }}" class="d-block w-100 object-fit-cover" alt="Voyage 1"> </div> <div class="carousel-item"> <img src="{{ asset('img/photo-agence-0.jpg') }}" class="d-block w-100 object-fit-cover" alt="Voyage 2"> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselAtouts" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Précédent</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselAtouts" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Suivant</span> </button> </div> </div> <div class="col-12 col-lg-6"> <h2 class="h3 txt-ot-green fw-bold mb-3">Pourquoi voyager avec O’TROPIK ?</h2> <p class="text-muted">Chez O’TROPIK, agence de voyage en Guadeloupe, nous croyons que chaque voyage doit être unique, conçu avec soin et entièrement adapté à vos envies. Spécialisée dans les voyages sur mesure au départ des Antilles, notre équipe met son expertise au service de vos projets d’évasion.</p> <p class="text-muted">Forte d’une solide expérience dans le secteur du tourisme et animée par une véritable passion pour le voyage, notre agence accompagne les voyageurs dans la création de séjours personnalisés, circuits et escapades vers des destinations d’exception.</p> <p class="text-muted">Notre priorité : vous offrir des vacances inoubliables, avec un accompagnement attentif et privilégié à chaque étape, de la conception de votre itinéraire jusqu’à votre retour en Guadeloupe.</p> <div class="mt-4"> <a href="{{ path('o.agency') }}" class="btn btn-primary">Découvrir notre agence</a> </div> </div> </div> {# --- O’Atouts (sous la row principale) --- #} <div class="row mt-5 mb-2"> <div class="col-12 mb-3"> <h2 class="h3 fw-bold txt-ot-green">O’ Atouts</h2> <p class="text-muted mb-0">Parce que chaque détail compte, voici ce qui rend nos voyages uniques.</p> </div> {% for a in atouts %} <div class="col-12 col-md-6 col-lg-3 mb-3"> <div class="p-3 text-center h-100 border rounded-4 shadow-sm"> <strong class="txt-ot-green">{{a.title}}</strong><br> <small class="text-muted">{{a.description}}</small> </div> </div> {% endfor %} </div> <div class="section-divider mx-auto my-5"></div> </div></section><section><h2 class="h3 fw-bold txt-ot-green text-center"> Accréditations & partenaires de confiance</h2> <div class="partner-slider"> <div class="track"> <img src="/img/logos/apst.png" alt="APST"> <img src="/img/logos/assurever.png" alt="Assurever"> <img src="/img/logos/hiscox.png" alt="Hiscox"> <img src="/img/logos/iata.png" alt="IATA"> <img src="/img/logos/atout-france.png" alt="Atout France"> <img src="/img/logos/tourcom.png" alt="TourCom"> </div></div></section>{# ----------------------------- Call to action (bandeau photo)------------------------------ <section class="position-relative overflow-hidden"> <div class="ratio ratio-21x9"> <img src="{{ asset('img/cta-tourist.jpg') }}" alt="Famille en voyage" class="object-fit-cover w-100 h-100"> </div> <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center"> <div class="container"> <div class="row"> <div class="col-12 col-lg-6 text-white"> <h2 class="h4 mb-1">Call to action</h2> <p class="mb-0 opacity-90">Accroche…</p> </div> </div> </div> </div></section>. #}{# ----------------------------- Infos contact (3 colonnes)------------------------------ #}<section class="py-5 bg-white"> <div class="container"> <div class="row text-center g-4"> <div class="col-12 col-md-4"> <div class="contact-ico mb-2" style="font-size: 2em;color: #1a8754;"><i class="bi bi-clock"></i></div> <h3 class="text-success h6 fw-bold">Horaire Agence</h3> <p class="small text-muted mb-0">Du lundi au Vendredi de 09h à 12h et de 13H à 17h00 <br>Un samedi sur deux</p> </div> <div class="col-12 col-md-4"> <div class="contact-ico mb-2" style="font-size: 2em;color: #1a8754;"><i class="bi bi-telephone"></i></div> <h3 class="text-success h6 fw-bold">Téléphone</h3> <p class="small text-muted mb-0"> {% if infos.phone %} Bureau : <a class="link-info" href="tel:+590590505134">{{infos.phone}}</a><br> {% endif %} {% if infos.mobile %} Mobile : <a class="link-info" href="tel:+590690357030">{{infos.mobile}}</a><br> {% endif %} {% if infos.mobileTwo %} Mobile : <a class="link-info" href="tel:+590690762562">{{infos.mobileTwo}}</a> {% endif %} </p> </div> <div class="col-12 col-md-4"> <div class="contact-ico mb-2" style="font-size: 2em;color: #1a8754;"><i class="bi bi-geo-alt"></i></div> <h3 class="text-success h6 fw-bold">Localisation</h3> <p class="small text-muted mb-0">{{infos.adress}} <br> {{infos.zip}} {{infos.city}} </p> </div> </div> </div></section><script>document.addEventListener("DOMContentLoaded", function () { const slider = document.querySelector('.partner-slider'); const track = slider.querySelector('.track'); const logos = [...track.children]; const dotsContainer = slider.querySelector('.dots'); // clone images to simulate infinite scroll visually logos.forEach(logo => { const clone = logo.cloneNode(true); track.appendChild(clone); }); // create dots logos.forEach((_, i) => { const dot = document.createElement('span'); if (i === 0) dot.classList.add('active'); dotsContainer.appendChild(dot); }); let index = 0; const dots = [...dotsContainer.children]; setInterval(() => { index = (index + 1) % logos.length; dots.forEach(d => d.classList.remove('active')); dots[index].classList.add('active'); }, 3000);});</script>{% endblock %}