{% extends 'base.html.twig' %}

{% block title %}Conception de Sites Internet Sur Mesure à Bourges | Expert Web Local
{% endblock %}

{% block body %}
	<section class="hero position-relative overflow-hidden">
		<div class="container pb-5 position-relative z-1">
			<div class="row">
				<div class="mt-1 col-lg-8 mx-auto d-flex flex-column justify-content-center text-center ">
					<span class="badge bg-info bg-opacity-25 text-white border border-info border-opacity-25 rounded-pill align-self-center mb-3 px-3 py-2">
						<i class="bi bi-laptop me-2"></i>Création de Sites Web
					</span>
					<h1 class="text-white display-4 fw-bold mb-3">Solutions Web Personnalisées<br>
						<span class="text-info">pour Tous Vos Besoins</span>
					</h1>
					<p class="text-white lead mb-4 px-lg-5">
						De la vitrine au e-commerce, nous concevons des sites performants, esthétiques et adaptés à votre activité.
					</p>
					<div class="d-flex justify-content-center gap-3" data-controller="anti-spam">
						<p class="btn btn-lg btn-custom rounded-pill px-4 py-3 d-none d-sm-inline-flex align-items-center shadow-lg">
							<i class="bi bi-telephone-fill me-2"></i>
							<span data-anti-spam-target="phoneText"></span>
						</p>
						<a class="btn btn-custom rounded-pill px-4 py-2 d-inline-flex d-sm-none align-items-center shadow-lg" data-anti-spam-target="phoneLink">
							<i class="bi bi-telephone-fill me-2"></i>
							Appeler
						</a>
					</div>
				</div>
				{% for message in app.flashes('success') %}
					<div class="alert alert-success shadow-sm border-1 rounded-3" role="alert">
						<i class="bi bi-check-circle-fill me-2"></i>
						{{ message }}
					</div>
				{% endfor %}

				{% for message in app.flashes('error') %}
					<div class="alert alert-danger shadow-sm border-1 rounded-3" role="alert">
						<i class="bi bi-exclamation-triangle-fill me-2"></i>
						{{ message }}
					</div>
				{% endfor %}
			</div>
		</div>
	</section>

	<section class="services mt-5 mb-5">
		<div class="container">
			<div class="text-center mb-5">
				<h2 class="text-blue fw-bold display-6">Nos Offres de Création de
					<span class="text-primary">Sites Internet</span>
				</h2>
				<div class="hr-blue mx-auto my-4" style="width: 100px;"></div>
				<p class="text-muted lead">Choisissez l'offre qui correspond le mieux à vos besoins et à votre budget.</p>
			</div>

			<div class="row g-4 justify-content-center">
				<div class="col-xl-3 col-lg-6 col-md-6">
					<div class="card h-100 border-1 shadow-sm hover-lift card-hover-effect transition-all">
						<div class="card-body p-4 text-center d-flex flex-column">
							<div class="icon-box mb-3 text-primary icon-transition">
								<i class="bi bi-window-desktop fs-1"></i>
							</div>
							<h3 class="card-title fw-bold text-blue title-transition">Site Vitrine</h3>
							<p class="card-text text-muted small text-transition">
								Idéal pour présenter votre activité. Inclus : design responsive, optimisation SEO de base, formulaire de contact et intégration Google Maps. Une présence essentielle pour votre image de marque.
							</p>
							<h4 class="mt-auto fw-bold text-blue title-transition">À partir de 150
								<i class="bi bi-currency-euro"></i>
							</h4>
						</div>
					</div>
				</div>
				<div class="col-xl-3 col-lg-6 col-md-6">
					<div class="card h-100 border-1 shadow-sm hover-lift card-hover-effect transition-all">
						<div class="card-body p-4 text-center d-flex flex-column">
							<div class="icon-box mb-3 text-success icon-transition">
								<i class="bi bi-journal-text fs-1"></i>
							</div>
							<h3 class="card-title fw-bold text-blue title-transition">Blog</h3>
							<p class="card-text text-muted small text-transition">
								Partagez votre expertise. Système de gestion de contenu (CMS) intuitif, catégories, commentaires, et partage sur les réseaux sociaux. Parfait pour le référencement naturel et l'engagement client.
							</p>
							<h4 class="mt-auto fw-bold text-blue title-transition">À partir de 300
								<i class="bi bi-currency-euro"></i>
							</h4>
						</div>
					</div>
				</div>
				<div class="col-xl-3 col-lg-6 col-md-6">
					<div class="card h-100 border-1 shadow-sm hover-lift card-hover-effect transition-all">
						<div class="card-body p-4 text-center d-flex flex-column">
							<div class="icon-box mb-3 text-warning icon-transition">
								<i class="bi bi-cart3 fs-1"></i>
							</div>
							<h3 class="card-title fw-bold text-blue title-transition">E-commerce</h3>
							<p class="card-text text-muted small text-transition">
								Lancez votre boutique en ligne. Catalogue produits illimité, panier sécurisé, paiements en ligne (Stripe, PayPal), gestion des stocks et tableau de bord complet pour suivre vos ventes.
							</p>
							<h4 class="mt-auto fw-bold text-blue title-transition">Sur devis</h4>
						</div>
					</div>
				</div>
				<div class="col-xl-3 col-lg-6 col-md-6">
					<div class="card h-100 border-1 shadow-sm hover-lift card-hover-effect transition-all">
						<div class="card-body p-4 text-center d-flex flex-column">
							<div class="icon-box mb-3 text-danger icon-transition">
								<i class="bi bi-puzzle fs-1"></i>
							</div>
							<h3 class="card-title fw-bold text-blue title-transition">Plugin WordPress</h3>
							<p class="card-text text-muted small text-transition">
								Fonctionnalités sur-mesure. Développement de plugins spécifiques pour étendre les capacités de votre site WordPress : calculateurs, types de contenus personnalisés, ou intégrations API.
							</p>
							<h4 class="mt-auto fw-bold text-blue title-transition">Sur devis</h4>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<section class="process py-5 mt-5">
		<div class="container">
			<div class="text-center mb-5">
				<h2 class="text-blue fw-bold display-6">Notre Processus de
					<span class="text-primary">Création</span>
				</h2>
				<div class="hr-blue mx-auto my-4" style="width: 100px;"></div>
				<p class="text-muted lead">Une méthodologie éprouvée pour donner vie à votre projet.</p>
			</div>

			<div class="row g-4 text-center">
				<div class="col-md-6 col-lg-3">
					<div class="position-relative">
						<div class="d-inline-flex align-items-center justify-content-center bg-primary text-white rounded-circle mb-4 shadow-sm" style="width: 80px; height: 80px; font-size: 2rem; font-weight: bold;">1</div>
						<h4 class="fw-bold text-blue">Découverte</h4>
						<p class="text-muted small">Analyse approfondie de vos besoins, de votre cible et de vos objectifs pour définir la meilleure stratégie.</p>
					</div>
				</div>
				<div class="col-md-6 col-lg-3">
					<div class="position-relative">
						<div class="d-inline-flex align-items-center justify-content-center bg-info text-white rounded-circle mb-4 shadow-sm" style="width: 80px; height: 80px; font-size: 2rem; font-weight: bold;">2</div>
						<h4 class="fw-bold text-blue">Design</h4>
						<p class="text-muted small">Création de maquettes sur-mesure. Nous affinons le visuel jusqu'à ce qu'il corresponde parfaitement à votre image.</p>
					</div>
				</div>
				<div class="col-md-6 col-lg-3">
					<div class="position-relative">
						<div class="d-inline-flex align-items-center justify-content-center bg-warning text-white rounded-circle mb-4 shadow-sm" style="width: 80px; height: 80px; font-size: 2rem; font-weight: bold;">3</div>
						<h4 class="fw-bold text-blue">Développement</h4>
						<p class="text-muted small">Intégration technique, configuration du CMS et développement des fonctionnalités spécifiques.</p>
					</div>
				</div>
				<div class="col-md-6 col-lg-3">
					<div class="position-relative">
						<div class="d-inline-flex align-items-center justify-content-center bg-success text-white rounded-circle mb-4 shadow-sm" style="width: 80px; height: 80px; font-size: 2rem; font-weight: bold;">4</div>
						<h4 class="fw-bold text-blue">Mise en ligne</h4>
						<p class="text-muted small">Tests finaux, optimisation SEO, formation à l'utilisation et déploiement officiel de votre site.</p>
					</div>
				</div>
			</div>
		</div>
	</section>

	<section class="inspiration py-5 bg-white">
		<div class="container">
			<div class="text-center mb-5">
				<h2 class="text-blue fw-bold display-6">Quelques Exemples de
					<span class="text-primary">Réalisations</span>
				</h2>
				<div class="hr-blue mx-auto my-4" style="width: 100px;"></div>
				<p class="text-muted lead">Inspirez-vous de ces modèles pour imaginer votre futur site.</p>
			</div>

			<div
				class="row g-4 justify-content-center">
				<!-- Landio -->
				<div class="col-md-6 col-lg-4">
					<div class="card h-100 border-1 shadow-sm hover-lift card-hover-effect transition-all">
						<div class="card-body p-4 text-center d-flex flex-column">
							<div class="mb-3 text-primary icon-transition">
								<i class="bi bi-layers fs-1"></i>
							</div>
							<h3 class="card-title fw-bold text-blue title-transition">Landio</h3>
							<p class="card-text text-muted small text-transition mb-4">
								Un design moderne et épuré, parfait pour les startups et les produits numériques. Mise en avant efficace de votre proposition de valeur.
							</p>
							<a href="https://bootstrapmade.com/demo/Landio/" target="_blank" class="btn btn-outline-primary rounded-pill mt-auto stretched-link">
								Voir la démo
								<i class="bi bi-arrow-right ms-2"></i>
							</a>
						</div>
					</div>
				</div>

				<!-- UpScale -->
				<div class="col-md-6 col-lg-4">
					<div class="card h-100 border-1 shadow-sm hover-lift card-hover-effect transition-all">
						<div class="card-body p-4 text-center d-flex flex-column">
							<div class="mb-3 text-success icon-transition">
								<i class="bi bi-graph-up-arrow fs-1"></i>
							</div>
							<h3 class="card-title fw-bold text-blue title-transition">UpScale</h3>
							<p class="card-text text-muted small text-transition mb-4">
								Idéal pour les entreprises et services professionnels. Une structure claire pour présenter vos offres et rassurer vos clients.
							</p>
							<a href="https://bootstrapmade.com/demo/UpScale/" target="_blank" class="btn btn-outline-success rounded-pill mt-auto stretched-link">
								Voir la démo
								<i class="bi bi-arrow-right ms-2"></i>
							</a>
						</div>
					</div>
				</div>

				<!-- Axis -->
				<div class="col-md-6 col-lg-4">
					<div class="card h-100 border-1 shadow-sm hover-lift card-hover-effect transition-all">
						<div class="card-body p-4 text-center d-flex flex-column">
							<div class="mb-3 text-warning icon-transition">
								<i class="bi bi-palette fs-1"></i>
							</div>
							<h3 class="card-title fw-bold text-blue title-transition">Axis</h3>
							<p class="card-text text-muted small text-transition mb-4">
								Un style créatif et audacieux. Parfait pour les portfolios, les agences et ceux qui veulent se démarquer visuellement.
							</p>
							<a href="https://bootstrapmade.com/demo/Axis/" target="_blank" class="btn btn-outline-warning rounded-pill mt-auto stretched-link">
								Voir la démo
								<i class="bi bi-arrow-right ms-2"></i>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<section class="ask bg-light py-5 mt-5">
		<div class="container">
			<div class="text-center mb-5">
				<h2 class="text-blue fw-bold display-6">Questions Fréquemment Posées</h2>
				<div class="hr-blue mx-auto my-4" style="width: 100px;"></div>
				<p class="text-muted lead">Vous avez des interrogations ? Découvrez les réponses aux questions les plus courantes.</p>
			</div>

			<div class="row justify-content-center">
				<div class="col-lg-8">
					<div class="accordion" id="faqAccordion">
						<div class="accordion-item border-1 shadow-sm rounded-3 mb-3">
							<h2 class="accordion-header" id="headingOne">
								<button class="accordion-button collapsed rounded-3 fw-bold text-blue" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
									Si je choisis un service, comment se déroulent les étapes à suivre ?
								</button>
							</h2>
							<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
								<div class="accordion-body text-muted">
									Après avoir pris contact, un premier rendez-vous de 30 minutes est fixé soit par téléphone, soit par visioconférence pour expliquer votre besoin. Une date butoir sera fixée pour réaliser le projet.
								</div>
							</div>
						</div>
						<div class="accordion-item border-1 shadow-sm rounded-3 mb-3">
							<h2 class="accordion-header" id="headingTwo">
								<button class="accordion-button collapsed rounded-3 fw-bold text-blue" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
									Le paiement se réalise-t-il avant ou après la réalisation du projet ?
								</button>
							</h2>
							<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
								<div class="accordion-body text-muted">
									Un acompte est demandé après avoir validé le thème et réalisé la maquette. Pour les blogs et e-commerce, des acomptes seront demandés au fur et à mesure de la construction de l'application.
								</div>
							</div>
						</div>
						<div class="accordion-item border-1 shadow-sm rounded-3 mb-3">
							<h2 class="accordion-header" id="headingThree">
								<button class="accordion-button collapsed rounded-3 fw-bold text-blue" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
									À la fin de la période annuelle, comment l'hébergement du site est-il géré ?
								</button>
							</h2>
							<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
								<div class="accordion-body text-muted">
									À la fin de la période annuelle, vous avez le choix de renouveler ou non l'hébergement à hauteur de 50 euros par an.
								</div>
							</div>
						</div>
						<div class="accordion-item border-1 shadow-sm rounded-3 mb-3">
							<h2 class="accordion-header" id="headingFour">
								<button class="accordion-button collapsed rounded-3 fw-bold text-blue" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
									Si je choisis un site vitrine pour ma société, combien de temps faudra-t-il pour le réaliser ?
								</button>
							</h2>
							<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#faqAccordion">
								<div class="accordion-body text-muted">
									Le délai sera déterminé au premier rendez-vous. La moyenne est de quinze jours pour les blogs, portfolios, et sites vitrines. Un mois pour les e-commerce et une semaine pour les plugins basiques.
								</div>
							</div>
						</div>
						<div class="accordion-item border-1 shadow-sm rounded-3 mb-3">
							<h2 class="accordion-header" id="headingFive">
								<button class="accordion-button collapsed rounded-3 fw-bold text-blue" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
									Puis-je apporter des modifications au projet en cours de réalisation ?
								</button>
							</h2>
							<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#faqAccordion">
								<div class="accordion-body text-muted">
									Oui, vous pouvez apporter des modifications en cours de réalisation. Toutefois, selon l'ampleur des modifications, cela pourrait affecter le délai de livraison et le coût total du projet.
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="mt-5 text-center pb-4" data-controller="anti-spam">
				<p class="mb-3 text-muted">Encore des questions ?</p>
				<a class="btn pt-2 rounded-pill d-none d-sm-inline-block btn-custom shadow-sm">
					<i class="bi bi-telephone me-2"></i>
					<span data-anti-spam-target="phoneText"></span>
				</a>
				<a class="btn pt-2 rounded-pill d-inline-block d-sm-none  btn-custom shadow-sm" data-anti-spam-target="phoneLink">
					<i class="bi bi-telephone me-2"></i>
					APPELEZ-NOUS</a>
			</div>
		</div>
	</section>

	<!-- Contact -->
	<section class="contact-section py-5 mb-5">
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-lg-10">
					<div class="card border-1 shadow-lg overflow-hidden rounded-4">
						<div class="row g-0">
							<div class="col-lg-5 d-none d-lg-block position-relative">
								<img src="{{ asset('images/contact-formation.jpg') }}" class="h-100 w-100 object-fit-cover" alt="Création site web">
								<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark bg-opacity-25"></div>
								<div class="position-absolute bottom-0 start-0 p-4 text-white">
									<h3 class="fw-bold">Contactez-nous</h3>
									<p class="small mb-0">Une réponse sous 24h garantie.</p>
								</div>
							</div>
							<div class="col-lg-7 p-4 p-md-5">
								<div class="text-center text-lg-start mb-4">
									<h2 class="text-blue fw-bold">Parlons de votre projet Web</h2>
									<p class="text-muted">Remplissez le formulaire ci-dessous pour obtenir un devis gratuit.</p>
								</div>

								{{ form_start(form) }}
								<div class="row g-3">
									<div class="col-md-6">
										<div class="form-floating">
											{{ form_widget(form.name, {'attr': {'class': 'form-control', 'placeholder': 'Votre nom'}}) }}
											{{ form_label(form.name) }}
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-floating">
											{{ form_widget(form.email, {'attr': {'class': 'form-control', 'placeholder': 'name@example.com'}}) }}
											{{ form_label(form.email) }}
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-floating">
											{{ form_widget(form.phone, {'attr': {'class': 'form-control', 'placeholder': 'Téléphone'}}) }}
											{{ form_label(form.phone) }}
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-floating">
											{{ form_widget(form.option, {'attr': {'class': 'form-select'}}) }}
											{{ form_label(form.option) }}
										</div>
									</div>
									<div class="col-12">
										<div class="form-floating">
											{{ form_widget(form.message, {'attr': {'class': 'form-control', 'placeholder': 'Votre message', 'style': 'height: 150px'}}) }}
											{{ form_label(form.message) }}
										</div>
									</div>
									<div class="col-12">
										<div class="form-check">
											{{ form_widget(form.dataConsent, {'attr': {'class': 'form-check-input'}}) }}
											<label class="form-check-label small text-muted" for="{{ form.dataConsent.vars.id }}">
												J'accepte que mes données soient utilisées pour traiter ma demande.
											</label>
										</div>
									</div>
									<div class="col-12 text-center mt-4">
										<button type="submit" class="btn btn-custom rounded-pill px-5 py-3 fw-bold shadow-sm">
											Envoyer ma demande
											<i class="bi bi-send-fill ms-2"></i>
										</button>
									</div>
								</div>
								{{ form_end(form) }}
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="text-center mt-5" data-controller="anti-spam">
				<a class="btn pt-2 rounded-pill d-none d-sm-inline-block btn-custom shadow-sm">
					<i class="bi bi-telephone me-2"></i>
					<span data-anti-spam-target="phoneText"></span>
				</a>
				<a class="btn pt-2 rounded-pill d-inline-block d-sm-none  btn-custom shadow-sm" data-anti-spam-target="phoneLink">
					<i class="bi bi-telephone me-2"></i>
					APPELEZ-NOUS</a>
			</div>
		</div>
	</section>
{% endblock %}