{% extends 'base.html.twig' %}{% block title %}Otropik — Agence de voyage en Guadeloupe & dans le monde{% endblock %}{% block body %}{# ----------------------------- HERO avec fond + recherche------------------------------ #}<section class="section-hero position-relative"> <picture> {# sources webp/jpg si dispo #} <img src="{{ asset('img/3004.jpg') }}" alt="Plage paradisiaque en Guadeloupe" class="hero-bg w-100 h-100"> </picture> <div class="hero-overlay container py-5 text-center text-white"> <img src="{{ asset('img/otropik-logo.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('app_sejours') }#}" 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/' ~ o.file ~ '/' ~ o.slug ~ '/' ~ o.img)}}" alt="{{ o.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>{{ 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, nous croyons que chaque voyage doit être unique, conçu avec soin et adapté à vos envies.</p> <p class="text-muted">Forte d’une solide expérience dans le tourisme et d’une véritable passion pour le voyage, notre agence vous accompagne dans la création de séjours qui vous ressemblent.</p> <p class="text-muted">Notre priorité : que vos vacances soient inoubliables et que vous vous sentiez privilégiés à chaque étape, de la préparation à votre retour.</p> {# <div class="mt-4"> <a href="{#{ path('app_agence') }}" class="btn btn-primary">En savoir plus</a> </div> #} </div> </div> {# --- O’Atouts (sous la row principale) --- #} <div class="row mt-5 mb-4"> <div class="col-12"> <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> <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"> 🌍<br><strong class="txt-ot-green">Une offre diversifiée</strong><br> <small class="text-muted">Autotours, séjours, circuits, croisières dans des destinations prisées, méconnues ou inattendues.</small> </div> </div> <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"> 🎓<br><strong class="txt-ot-green">Une expertise confirmée</strong><br> <small class="text-muted">Plus de 15 ans d’expérience pour vous conseiller avec précision.</small> </div> </div> <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"> 👥<br><strong class="txt-ot-green">Des formules adaptées</strong><br> <small class="text-muted">Voyages en groupe ou en individuel, pré-établis ou 100% sur mesure.</small> </div> </div> <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"> 💳<br><strong class="txt-ot-green">Facilités de paiement</strong><br> <small class="text-muted">3xCB, chèques vacances, virements, paiements en 6 ou 10 fois.</small> </div> </div> <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"> 🛡️<br><strong class="txt-ot-green">Sécurité renforcée</strong><br> <small class="text-muted">Assurances spéciales voyage pour partir sereinement.</small> </div> </div> <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"> 🤝<br><strong class="txt-ot-green">Accompagnement personnalisé</strong><br> <small class="text-muted">Une équipe à votre écoute avant, pendant et après le séjour.</small> </div> </div> <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"> ⭐<br><strong class="txt-ot-green">Programme fidélité</strong><br> <small class="text-muted">Bientôt disponible pour récompenser votre confiance.</small> </div> </div> <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"> 💼<br><strong class="txt-ot-green">Compte voyage</strong><br> <small class="text-muted">Planifiez vos prochaines escapades en toute liberté.</small> </div> </div> </div> <div class="section-divider mx-auto my-5"></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"><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"><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">Bureau : <a class="link-info" href="tel:+590590505134">0590 50 51 34</a><br> Mobile : <a class="link-info" href="tel:+590690357030">0690 35 70 30</a><br> Mobile : <a class="link-info" href="tel:+590690762562">0690 76 25 62</a> </p> </div> <div class="col-12 col-md-4"> <div class="contact-ico mb-2"><i class="bi bi-geo-alt"></i></div> <h3 class="text-success h6 fw-bold">Localisation</h3> <p class="small text-muted mb-0">CENTRE SHOPPING CENTER, RAIZET <br> 97139 LES ABYMES </p> </div> </div> </div></section>{% endblock %}