@extends('layouts.app')

@section('title', 'Spécialiste en développement applicatif à Bordeaux')

@section('content')
<!-- =======================
Main Banner START -->
<section class="position-relative overflow-hidden pb-3 pt-xl-9">

	<div class="container pt-4 pt-sm-5">
		<div class="row g-xl-5">

			<!-- Hero content START -->
			<div class="col-xl-7 mb-5 mb-xl-0 mt-0">
				<div class="pe-xxl-4">

					<!-- Title -->
					<h1 class="mt-0 lh-base">Des <span class="cd-headline clip big-clip is-full-width text-primary mb-0 d-block d-xxl-inline-block">
							<span class="typed"></span>
						</span>sur mesure pour toutes les tailles d'entreprises.

					</h1>
					<p class="my-4">Chez Systemin, nous allions l'art du design à la science de la programmation pour créer des sites web et applications qui sont aussi beaux que performants. Simplifiez votre activité avec des solutions sur mesure, conçues pour améliorer chaque aspect de votre entreprise. </p>


					@include('layouts.formulaire')

				</div>
			</div>
			<!-- Hero content END -->

			<!-- Hero Image START -->
			<!-- <div class="col-md-10 col-xl-5 position-relative mx-auto mt-7 mt-xl-0 "> -->
			<div class="col-md-12 col-xl-5 mx-auto mt-7 mt-xl-0 ">

				<!-- Conception site internet -->
				<a href="{{route('services.show', ['slug' => 'creation-site-internet'])}}">
					<div class="card card-body p-4 shadow-sm mb-5 card-hover-shadow custom-border">
						<h6 class="card-title mb-3">Création site internet</h6>
						<ul class="list-group list-group-borderless border-0">
							<li class="d-flex mb-3">Conquérir le web commence par un site internet remarquablement conçu.<i class="bi bi-arrow-right text-primary mx-2"></i></li>
						</ul>
					</div>
				</a>
				<a href="{{route('services.show', ['slug' => 'developpement-application-mobile'])}}">
					<div class="card card-body p-4 shadow-sm mb-5 card-hover-shadow custom-border">
						<h6 class="card-title mb-3">Conception Applications Web & Mobile</h6>
						<ul class="list-group list-group-borderless border-0">
							<li class="d-flex mb-3">Un accès instantané à vos services : une application web & mobile intuitive et performante. <i class="bi bi-arrow-right text-primary mx-2"></i></li>
						</ul>
					</div>
				</a>
				<a href="{{route('services.show', ['slug' => 'developpement-et-integration-dapi'])}}">

					<div class="card card-body p-4 shadow-sm mb-5 card-hover-shadow custom-border">
						<h6 class="card-title mb-3">Développement & Intégration API</h6>
						<ul class="list-group list-group-borderless border-0">
							<li class="d-flex mb-3">Optimisez votre efficacité opérationnelle grâce à nos solutions d'intégration API.<i class="bi bi-arrow-right text-primary mx-2"></i></li>
						</ul>
					</div>
				</a>
			</div>



		</div>
		<!-- Hero Image END -->

	</div>
	</div>
</section>
<!-- =======================
Main Banner END -->


<!-- =======================
Client START -->
<section class="pb-0">
	<div class="container">
		<div class="row align-items-center">
			<div class="col-md-3 mb-2 mb-md-0">
				<h5 class="text-center text-md-start">Nos références</h5>
			</div>
			<div class="col-md-9 container text-center text-md-start">
				@include('layouts.client')
			</div>

		</div> <!-- Row END -->
	</div>
</section>
<!-- =======================
Client END -->






<!-- =======================
Services START -->
<section class="pt-0 mt-7">
	<div class="container">
		<!-- Title -->
		<div class="inner-container text-center mb-4 mb-sm-6">
			<h2 class="mb-0"><span class="text-primary">Solutions</span> Innovantes pour Votre Entreprise</h2>
		</div>

		<!-- Service list START -->
		<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
			<!-- Service item -->
			<div class="col">
				<div class="card card-hover-shadow border h-100 p-4">
					<!-- Card body -->
					<div class="card-body p-0">

						<i class="bi bi-diagram-3 fs-3 text-primary"></i>
						<!-- Content -->
						<h5 class="mb-3"><a href="{{route('services.show', ['slug' => 'creation-site-internet'])}}">Conception de site internet</a></h5>
						<p>Du design à la fonctionnalité, nous prenons en charge chaque aspect de la création de votre site web pour vous offrir une solution complète et efficace.</p>
					</div>

					<!-- Card footer -->
					<div class="card-footer mt-auto p-0 pt-2">
						<a class="icon-link icon-link-hover stretched-link z-index-2" href="{{route('services.show', ['slug' => 'creation-site-internet'])}}">En savoir plus<i class="bi bi-arrow-right"></i> </a>
					</div>
				</div>
			</div>

			<!-- Service item -->
			<div class="col">
				<div class="card card-hover-shadow border h-100 p-4">
					<!-- Card body -->
					<div class="card-body p-0">
						<!-- Icon -->
						<i class="bi bi-terminal fs-3 text-primary"></i> <!-- Pour application web -->

						<!-- Content -->
						<h5 class="mb-3"><a href="{{route('services.show', ['slug' => 'developpement-application-web'])}}">Développement d'applications Web</a></h5>
						<p>Modernisez vos processus métier avec notre service de développement d'applications web sur mesure.</p>
					</div>

					<!-- Card footer -->
					<div class="card-footer mt-auto p-0 pt-2">
						<a class="icon-link icon-link-hover stretched-link z-index-2" href="{{route('services.show', ['slug' => 'developpement-application-web'])}}">En savoir plus<i class="bi bi-arrow-right"></i> </a>
					</div>
				</div>
			</div>



			<!-- Service item -->
			<div class="col">
				<div class="card card-hover-shadow border h-100 p-4">
					<!-- Card body -->
					<div class="card-body p-0">
						<!-- Icon -->
						<i class="bi bi-cpu fs-3 text-primary"></i>
						<!-- Content -->
						<h5 class="mb-3"><a href="{{route('services.show', ['slug' => 'developpement-et-integration-dapi'])}}">Conception et intégration d'API</a></h5>
						<p>Optimisez vos flux de données et maximisez votre productivité grâce à notre service d'intégration API sur mesure.</p>
					</div>

					<!-- Card footer -->
					<div class="card-footer mt-auto p-0 pt-2">
						<a class="icon-link icon-link-hover stretched-link z-index-2" href="{{route('services.show', ['slug' => 'developpement-et-integration-dapi'])}}">En savoir plus<i class="bi bi-arrow-right"></i> </a>
					</div>
				</div>
			</div>

			<!-- Service item -->
			<div class="col">
				<div class="card card-hover-shadow border h-100 p-4">
					<!-- Card body -->
					<div class="card-body p-0">
						<!-- Icon -->
						<i class="bi bi-laptop fs-3 text-primary"></i>

						<!-- Content -->
						<h5 class="mb-3"><a href="{{route('services.show', ['slug' => 'refonte-site-internet'])}}">Refonte de site internet</a></h5>
						<p>Redonnez vie à votre site web avec notre service de refonte, pour une expérience utilisateur optimisée et une performance accrue.</p>
					</div>

					<!-- Card footer -->
					<div class="card-footer mt-auto p-0 pt-2">
						<a class="icon-link icon-link-hover stretched-link z-index-2" href="{{route('services.show', ['slug' => 'refonte-site-internet'])}}">En savoir plus<i class="bi bi-arrow-right"></i> </a>
					</div>
				</div>
			</div>

			<!-- Service item -->
			<div class="col">
				<div class="card card-hover-shadow border h-100 p-4">
					<!-- Card body -->
					<div class="card-body p-0">
						<!-- Icon -->
						<i class="bi bi-phone fs-3 text-primary"></i>

						<!-- Content -->
						<h5 class="mb-3"><a href="{{route('services.show', ['slug' => 'developpement-application-mobile'])}}">Développement d'applications mobiles</a></h5>
						<p>Répondez aux besoins de vos utilisateurs en déployant des applications mobiles innovantes, adaptées à votre marque et à vos objectifs.</p>
					</div>

					<!-- Card footer -->
					<div class="card-footer mt-auto p-0 pt-2">
						<a class="icon-link icon-link-hover stretched-link z-index-2" href="{{route('services.show', ['slug' => 'developpement-application-mobile'])}}">En savoir plus<i class="bi bi-arrow-right"></i> </a>
					</div>
				</div>
			</div>

			<!-- Service item -->
			<div class="col">
				<div class="card card-hover-shadow border h-100 p-4">
					<!-- Card body -->
					<div class="card-body p-0">
						<!-- Icon -->
						<i class="bi bi-database-check fs-3 text-primary"></i>

						<!-- Content -->
						<h5 class="mb-3"><a href="{{route('maintenance')}}">Hébergement, maintenance, support</a></h5>
						<p>Restez concentré sur votre activité principale en laissant notre service d'hébergement et de support technique gérer l'aspect technique de votre site web.</p>
					</div>

					<!-- Card footer -->
					<div class="card-footer mt-auto p-0 pt-2">
						<a class="icon-link icon-link-hover stretched-link z-index-2" href="{{route('maintenance')}}">En savoir plus<i class="bi bi-arrow-right"></i> </a>
					</div>
				</div>
			</div>
		</div>
		<!-- Service list END -->
	</div>
</section>
<!-- =======================
Services END -->


<!-- =======================
Pricing START -->
<section class="pt-0 pb-0">
	<div class="container">
		<!-- Title -->
		<div class="inner-container text-center mb-4 mb-sm-6">

			<h2 class="mb-0 mt-4">Sécurité et performance sans souci : confiez la maintenance de votre site à votre spécialiste dédié.</h2>
		</div>

		<!-- Pricing options START -->
		<div class="row">
			<!-- Single Pricing -->
			<div class="col-lg-8">
				<div class="card card-body bg-transparent h-100 px-0">
					<div class="row text-center text-sm-start">
						<!-- Price -->
						<div class="col-sm-6">
							<div class="d-flex justify-content-between mb-4 mb-sm-0">
								<div>
									<!-- Image -->
									<!-- <span class="bi bi-wrench" style="font-size: 120px; color: #000;"></span> -->
									<img src="{{asset('images/bg/maintenance.png')}}" class="w-50 mr-5">
									<!-- Price & content -->
									<div class="badge bg-dark text-white mb-3 w-50">À partir de</div>
									<h6 class="mb-3"> <span class="display-2">50€</span> HT/mois</h6>
									<p class="mb-0">Confiez-nous la maintenance de votre site pour une tranquillité totale. En cas de bug ou d'indisponibilité, notre équipe technique est là pour vous accompagner et régler le problème rapidement.</p>
								</div>
								<!-- Divider line -->
								<div class="vr opacity-1 ms-2 ms-md-5 d-none d-sm-block"></div>
							</div>
						</div>

						<!-- Feature -->
						<div class="col-sm-6 ps-md-5">
							<div class="badge bg-dark text-white">Essentiel</div>
							<h6 class="mb-sm-4 mt-3">Infogérance basique</h6>
							<!-- List -->
							<ul class="list-group list-group-borderless mb-3 mb-sm-4">
								<li class="list-group-item heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Gestion de l'hébergement et du domaine (x1)</li>
								<li class="list-group-item heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Sauvegarde intégrale quotidienne</li>
								<li class="list-group-item heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Maintenance corrective</li>
								<li class="list-group-item heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Protection anti-bot</li>
								<li class="list-group-item heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Support technique email</li>
								<li class="list-group-item heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>Délais d'intervention d'une semaine (SLA 7 jours)</li>
								<li class="list-group-item heading-color mb-0"><i class="bi bi-check-lg text-primary me-1"></i>1 heure d'assistance technique incluse par mois</li>
							</ul>
							<!-- Button -->
							<a href="{{route('maintenance')}}" class="btn btn-dark">Voir toutes les offres</a>
							<p class="mb-0">Des forfaits adaptés à toutes les tailles d'entreprises.</p>
						</div>
					</div>
				</div>
			</div>

			<!-- Custom plan -->
			<div class="col-lg-4 ms-auto mt-4 mt-lg-0">
				<div class="card bg-primary rounded h-100 overflow-hidden p-4">
					<!-- SVG decoration -->
					<div class="position-absolute top-0 end-0 mt-n3 me-n4">
						<img src="{{ asset('images/elements/decoration-pattern-2.svg')}}" class="opacity-2 h-200px" alt="">
					</div>

					<!-- Card body -->
					<div class="card-body bg-transparent position-relative p-0">
						<div class="badge bg-dark text-white">Forfait sur-mesure</div>
						<h4 class="text-white mb-0 mt-3">Des besoins spécifiques en maintenance ?</h4>
					</div>

					<!-- Card footer -->
					<div class="card-footer bg-transparent d-grid text-center p-0 mt-8">
						<a href="{{route('contact')}}" class="btn btn-white">Obtenir un devis personnalisé</a>
						<p class="mb-0 text-white">Contacter l'équipe commerciale</p>
					</div>
				</div>
			</div>
		</div>
		<!-- Pricing options END -->
	</div>
</section>
<!-- =======================
Pricing END -->



<!-- Testimonials START -->
<section>
	<div class="container">
		<div class="row">
			<!-- Testimonials content -->
			<div class="col-lg-6 mb-5 mb-lg-0">

				<!-- Title -->
				<h2 class="my-4">Votre <span class="text-primary">passion</span>, notre technologie.</h2>
				<h6 class="mb-0">Votre métier, nos applications : des solutions en développement sur mesure pour chaque secteur.</h6>

				<!-- Slider START -->
				<div class="slider-testimonials mt-2 mt-md-4">

					<div class="slider-item pe-4">
						@include('layouts.reviews.1')
					</div>

					<div class="slider-item pe-4">
						@include('layouts.reviews.2')
					</div>

					<div class="slider-item pe-4">
						@include('layouts.reviews.3')
					</div>

				</div>
				<!-- Slider END -->
			</div>

			<!-- Testimonials image -->
			<div class="col-sm-10 col-lg-6 col-xl-5 position-relative ms-xl-auto">
				<!-- Image -->
				<img src="{{asset('images/home/justine_piluso.jpg')}}" class="rounded" alt="testimonial-img">

				<!-- Message decoration -->
				<div class="bg-white rounded shadow d-flex align-items-center position-absolute bottom-0 start-0 mb-sm-5 ms-sm-n5 px-3 py-2">
					<!-- Avatar -->
					<div class="avatar avatar-sm flex-shrink-0 me-2">
						<img class="avatar-img rounded-circle" src="{{asset('images/home/justine_piluso_profile.png')}}" alt="avatar">
					</div>
					<a href="https://justinepiluso.com" target="_blank">
						<p class="text-dark small mb-0"><b>Développement d'un site Web</b> <br>justinepiluso.com</p>
					</a>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- =======================
Testimonials END -->


<section>
	<div class="container">
		<!-- Title -->
		<div class="row align-items-center g-4 mb-5">
			<div class="col-md-6">
				<h2 class="mb-0">Découvrez nos dernières actualités technologiques</h2>
			</div>
			<div class="col-md-5 ms-auto text-sm-end">
				<!-- Button -->
				<a href="{{route('post.index')}}" class="btn btn-light btn-lg mb-0">Voir tous les articles</a>
			</div>
		</div>

		<div class="row g-4 g-xl-5">
			<!-- Blog item -->
			<div class="col-md-4">
				@include('posts.card', ['post' => $posts[0] ?? null])
			</div>

			<!-- Blog item -->
			<div class="col-md-4">
				@include('posts.card', ['post' => $posts[1] ?? null])
			</div>

			<!-- Blog item -->
			<div class="col-md-4">
				@include('posts.card', ['post' => $posts[2] ?? null])
			</div>
		</div> <!-- Row END -->
	</div>
</section>


<!-- =======================
CTA START -->
<section class="position-relative z-index-2 py-0 mb-n7 ">
	<div class="container position-relative">
		<div class="bg-primary rounded position-relative overflow-hidden p-4 p-sm-5">



			<div class="row g-4 position-relative">
				<!-- Title and inputs -->
				<div class="col-md-6">
					<!-- Title -->
					<h3 class="text-white">Prêt à démarrer? Laissez-nous vous rappeler!</h3>

					<!-- Form -->
					<!-- <form class="col-md-10 bg-body rounded-2 p-2 mt-4"> -->
					<form action="{{route('contact.welcome')}}" class="row" method="POST" id="form-welcome">
						@csrf
						<input type="hidden" name="g-recaptcha-response">
						<div class="col-6">
							<input class="form-control focus-shadow-none border-0 mb-2" name="email" type="email" placeholder="E-mail" required>
						</div>
						<div class="col-6">
							<input class="form-control focus-shadow-none border-0 mb-2" name="phone" type="tel" placeholder="Téléphone" required>
						</div>

						<div class="col-12">
							<textarea class=" form-control focus-shadow-none border-0 mb-2" name="message" rows="3" placeholder="Parlez-nous de votre projet" required></textarea>
						</div>
						<div class="col-md-6">
							<button type="button" class="btn btn-dark rounded-2" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}" data-callback='onSubmit' data-action='send_mail'>
								Envoyer
							</button>
							<script>
								function onSubmit(token) {
									document.getElementById("form-welcome").submit();
								}
							</script>
						</div>
					</form>
				</div>

				<!-- Content -->
				<div class="col-lg-5 col-xl-4 ms-auto text-lg-end">
					<ul class="list-group list-group-borderless mb-0">
						<li class="list-group-item mb-0">
							<a href="tel:+33652329139" class="text-white fw-normal">
								<i class="bi bi-headset me-1"></i> Appelez au : 06 52 32 91 39
							</a>
						</li>
						<li class="list-group-item text-white fw-normal mb-0">
							<i class="bi bi-clock me-1"></i> Horaires : 8h-18h lundi - vendredi
						</li>
						<li class="list-group-item mb-0">
							<a href="mailto:contact@systemin.fr" class="text-white fw-normal">
								<i class="bi bi-envelope me-1"></i> Email : contact@systemin.fr
							</a>
						</li>
					</ul>
				</div>

			</div> <!-- Row END -->
		</div>
	</div>
</section>


@endsection