{% extends 'base.html.twig' %}
{% block title %}Agence de voyage en Guadeloupe – OTropik| Séjours & Circuits sur mesure{% endblock %}
{% block seo %}
<meta name="description" content="OTropik est une agence de voyage en Guadeloupe spécialisée dans les séjours, circuits et voyages sur mesure au départ des Antilles. Conseillers locaux et accompagnement personnalisé." >
<meta property="og:title" content="Agence de voyage en Guadeloupe – OTropik| Séjours & Circuits sur mesure" />
<meta property="og:type" content="Website" />
<meta property="og:description" content="OTropik est une agence de voyage en Guadeloupe spécialisée dans les séjours, circuits et voyages sur mesure au départ des Antilles. Conseillers locaux et accompagnement personnalisé." />
<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="Agence de voyage en Guadeloupe – OTropik| Séjours & Circuits sur mesure">
<meta name="twitter:description" content="OTropik est une agence de voyage en Guadeloupe spécialisée dans les séjours, circuits et voyages sur mesure au départ des Antilles. Conseillers locaux et accompagnement personnalisé.">
<meta name="twitter:image" content="{#{asset('img/asset/cardimg-fb.jpg')}#}">
{% endblock %}
{% block body %}
{# -----------------------------
HERO
------------------------------ #}
<section class="py-5 bg-light">
<div class="container">
<div class="row align-items-center g-4">
<div class="col-12 col-lg-7">
<h1 class="display-5 text-success fw-bold mb-3"> OTropik Agence de voyage <br> en Guadeloupe</h1>
<p class="lead text-muted mb-4">
OTropik est une agence de voyage en Guadeloupe spécialisée dans l’organisation de séjours, circuits et voyages sur mesure au départ des Antilles.
Basée en Guadeloupe, notre équipe accompagne les voyageurs dans la création d’expériences personnalisées vers l’Europe, l’Amérique, l’Asie et le reste du monde.
</p>
<p class="text-muted mb-4">
Grâce à notre expertise locale, nous proposons des solutions adaptées aux voyageurs guadeloupéens souhaitant partir depuis Pointe-à-Pitre
ou organiser un séjour international en toute sérénité.
</p>
<div class="d-flex gap-2 flex-wrap">
<a href="{{ path('o.contact') }}" class="btn btn-primary rounded-pill px-4">Nous contacter</a>
<a href="{{ path('o.devis') }}" class="btn btn-outline-success rounded-pill px-4">Demander un devis</a>
</div>
</div>
<div class="col-12 col-lg-5">
<div class="ratio ratio-4x3 rounded-4 overflow-hidden shadow-sm">
<img src="{{ asset('img/photo-agence.jpg') }}"
alt="OTropik - Agence de voyage en Guadeloupe"
class="w-100 h-100 object-fit-cover">
</div>
<p class="small text-muted mt-2 mb-0">Départs depuis Pointe-à-Pitre • Conseils locaux • Itinéraires sur mesure</p>
</div>
</div>
</div>
</section>
{# -----------------------------
CONTENU SEO
------------------------------ #}
<section class="py-5">
<div class="container">
<div class="row g-4">
<div class="col-12 col-lg-8">
<h2 class="h3 text-success fw-bold mb-3">Une agence de voyage locale au cœur de la Guadeloupe</h2>
<p class="text-muted">
Implantée en Guadeloupe, OTropik met à disposition un accompagnement personnalisé pour :
</p>
<div class="row g-2">
<div class="col-12 col-sm-6">
<ul class="list-unstyled mb-0">
<li class="d-flex gap-2"><span class="text-success">✔</span> Voyages en famille</li>
<li class="d-flex gap-2"><span class="text-success">✔</span> Lunes de miel</li>
<li class="d-flex gap-2"><span class="text-success">✔</span> Circuits découverte</li>
</ul>
</div>
<div class="col-12 col-sm-6">
<ul class="list-unstyled mb-0">
<li class="d-flex gap-2"><span class="text-success">✔</span> Roadtrips</li>
<li class="d-flex gap-2"><span class="text-success">✔</span> Croisières</li>
<li class="d-flex gap-2"><span class="text-success">✔</span> Voyages premium</li>
</ul>
</div>
</div>
<p class="text-muted mt-3 mb-0">
Notre connaissance du marché antillais nous permet de proposer des itinéraires adaptés aux départs depuis la Guadeloupe.
</p>
<hr class="my-5">
<h2 class="h3 text-success fw-bold mb-3">Des voyages sur mesure depuis la Guadeloupe</h2>
<p class="text-muted">
En tant qu’agence de voyage en Guadeloupe, nous construisons des voyages personnalisés selon votre budget, vos envies et votre calendrier.
</p>
<p class="text-muted mb-3">
Que vous rêviez :
</p>
<ul class="text-muted">
<li>d’un circuit en Amérique du Sud,</li>
<li>d’un séjour en Europe,</li>
<li>d’une croisière dans les Caraïbes,</li>
<li>ou d’un roadtrip aux États-Unis,</li>
</ul>
<p class="text-muted mb-0">OTropik vous accompagne à chaque étape.</p>
<hr class="my-5">
<h2 class="h3 text-success fw-bold mb-3">Pourquoi choisir OTropik ?</h2>
<div class="row g-3">
<div class="col-12 col-md-6">
<div class="p-3 border rounded-4 h-100">
<div class="fw-semibold">✔️ Agence basée en Guadeloupe</div>
<div class="text-muted small">Un accompagnement pensé pour les voyageurs antillais.</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="p-3 border rounded-4 h-100">
<div class="fw-semibold">✔️ Conseillers spécialisés</div>
<div class="text-muted small">Des recommandations selon votre style de voyage.</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="p-3 border rounded-4 h-100">
<div class="fw-semibold">✔️ Voyages personnalisés</div>
<div class="text-muted small">Budget, rythme, dates : on ajuste tout.</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="p-3 border rounded-4 h-100">
<div class="fw-semibold">✔️ Assistance et suivi</div>
<div class="text-muted small">Un interlocuteur, avant et pendant le départ.</div>
</div>
</div>
<div class="col-12">
<div class="p-3 border rounded-4">
<div class="fw-semibold">✔️ Expertise destinations monde</div>
<div class="text-muted small">Europe, Amérique, Asie, Caraïbes… et au-delà.</div>
</div>
</div>
</div>
<div class="mt-5 p-4 bg-light rounded-4">
<p class="mb-2">
Faire appel à OTropik, c’est choisir une agence de voyage en Guadeloupe qui comprend les besoins des voyageurs antillais
et propose un accompagnement sur mesure.
</p>
<div class="d-flex gap-2 flex-wrap">
<a href="{{ path('o.contact')}}" class="btn btn-primary rounded-pill px-4">Contacter OTropik</a>
<a href="{{ path('o.devis') }}" class="btn btn-outline-success rounded-pill px-4">Demander un devis</a>
</div>
</div>
</div>
{# Sidebar (optionnel) #}
<div class="col-12 col-lg-4">
<div class="sticky-top" style="top: 90px;">
<div class="card border-0 shadow-sm rounded-4">
<div class="card-body">
<h3 class="h5 fw-bold mb-3">Besoin d’un conseil ?</h3>
<p class="text-muted mb-3">Dis-nous ta destination, tes dates et ton budget : on te propose une idée de voyage.</p>
<a href="{{ path('o.devis') }}" class="btn btn-primary w-100 rounded-pill">Demander un devis</a>
<div class="small text-muted mt-2">Réponse rapide • Conseillers basés en Guadeloupe</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{# -----------------------------
DÉCOUVREZ NOS OFFRES (CAROUSEL)
------------------------------ #}
{% set destinations = [
{ title:'Sainte-Lucie', subtitle:"Escapade nature & plages", img:'img/destinations/st-lucie.jpg', url:'#' },
{ title:'États-Unis', subtitle:"Roadtrip & grandes villes", img:'img/destinations/usa.jpg', url:'#' },
{ title:'République Dominicaine', subtitle:"All inclusive & détente", img:'img/destinations/rep-dom.jpg', url:'#' },
{ title:'Europe', subtitle:"City-break & circuits", img:'img/destinations/europe.jpg', url:'#' },
{ title:'Caraïbes', subtitle:"Croisières & îles", img:'img/destinations/caraibes.jpg', url:'#' },
{ title:'Asie', subtitle:"Dépaysement total", img:'img/destinations/asie.jpg', url:'#' }
] %}
<section class="py-5 bg-white">
<div class="container">
<div class="d-flex align-items-end justify-content-between gap-3 mb-3">
<div>
<h2 class="h3 fw-bold mb-1">Découvrez nos offres</h2>
<p class="text-muted mb-0">Une sélection de destinations au départ des Antilles.</p>
</div>
<div class="d-none d-md-flex gap-2">
<button class="btn btn-outline-secondary btn-sm rounded-pill" type="button" data-bs-target="#destCarousel" data-bs-slide="prev">
‹
</button>
<button class="btn btn-outline-secondary btn-sm rounded-pill" type="button" data-bs-target="#destCarousel" data-bs-slide="next">
›
</button>
</div>
</div>
<div id="destCarousel"
class="carousel slide"
data-bs-ride="carousel"
data-bs-interval="4500"
data-bs-touch="true">
<div class="carousel-inner">
{# 3 cards par slide (desktop), 2 (md), 1 (mobile) #}
{% for chunk in offers|batch(3, null) %}
<div class="carousel-item {% if loop.first %}active{% endif %}">
<div class="row g-3">
{% for o in chunk %}
{% if o %}
<div class="col-12 col-md-6 col-lg-4">
{% if o.type.id == 1 %}
<a href="{{ path('o.escapade.destination',{slug:o.slug})}}"
{% elseif o.type.id == 2 %}
<a href="{{ path('o.circuit.destination',{slug:o.slug})}}"
{% elseif o.type.id == 3 %}
<a href="{{ path('o.roadtrip.destination',{slug:o.slug})}}"
{% endif %}
class="text-decoration-none">
<article class="card border-0 shadow-sm rounded-4 overflow-hidden h-100">
<div class="ratio ratio-4x3">
<img src="{{asset('img/offer/' ~ o.file ~ '/' ~ o.slug ~ '/' ~ o.img)}}" alt="{{ o.file }}"
class="w-100 h-100 object-fit-cover">
</div>
<div class="card-body">
<span>{{ o.type.name }}</span>
<h3 class="h5 fw-bold mb-1">{{ o.title }}</h3>
<p class="text-muted mb-0">{{ o.subtitle }}</p>
</div>
</article>
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
</div>
<button class="carousel-control-prev d-md-none" type="button" data-bs-target="#destCarousel" 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 d-md-none" type="button" data-bs-target="#destCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Suivant</span>
</button>
</div>
<div class="text-center mt-4">
<a href="{#{ path('o.offers')|default('#') }#}" class="btn btn-outline-success rounded-pill px-4">
Voir toutes les offres
</a>
</div>
</div>
</section>
{% endblock %}