Symfony Profiler

{% 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>
{% 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, 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-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 %}

templates/default/index.html.twig line 1