{{ template "headersMenu.html" . }}

<div class="container py-36">

	<section id="download">
		<div class="container px-6 mx-auto">
			<h2 class="mb-16 text-4xl font-bold text-center">{{ "Choisissez votre plateforme" | t }}</h2>
			<div class="grid grid-cols-1 gap-12 mx-auto max-w-4xl md:grid-cols-3">
				<div class="p-8 m-6 text-center bg-white rounded-lg shadow-md dark:bg-gray-800">
					<i class="fab fa-windows fa-6x"></i>
					<h3 class="my-4 text-2xl font-semibold">Windows</h3>
					<a href="#" class="inline-block px-6 py-2 underline opacity-50 transition hover:opacity-100">{{ "Télécharger pour Windows" | t }}</a>
				</div>
				<div class="p-8 m-6 text-center bg-white rounded-lg shadow-md dark:bg-gray-800">
					<i class="fab fa-apple fa-6x"></i>
					<h3 class="my-4 text-2xl font-semibold">OSX</h3>
					<a href="#" class="inline-block px-6 py-2 underline opacity-50 transition hover:opacity-100">{{ "Télécharger pour MacOS X" | t }}</a>
				</div>
				<div class="p-8 m-6 text-center bg-white rounded-lg shadow-md dark:bg-gray-800">
					<i class="fab fa-linux fa-6x"></i>
					<h3 class="my-4 text-2xl font-semibold">Linux</h3>
					<a href="#" class="inline-block px-6 py-2 underline opacity-50 transition hover:opacity-100">{{ "Télécharger pour GNU/Linux" | t }}</a>
				</div>
			</div>
		</div>
	</section>

	<section class="py-20">
		<div class="container px-6 mx-auto">
			<h2 class="mb-16 text-4xl font-bold text-center">{{ "Installation rapide" | t }}</h2>
			<div class="mx-auto max-w-3xl">
				<ol class="space-y-8">
					<li class="flex items-start space-x-4">
						<div class="flex flex-shrink-0 justify-center items-center mt-1 w-20 h-8 text-4xl font-bold rounded-full">1</div>
						<div class="p-8 mx-2 w-full text-left bg-white rounded-lg shadow-md dark:bg-gray-800">
							<h3 class="mb-2 text-xl font-semibold">{{ "Téléchargez le fichier d'installation" | t }}</h3>
							<p class="text-gray-600">{{ "Choisissez la version correspondant à votre système d'exploitation et cliquez sur le bouton de téléchargement." | t }}</p>
						</div>
					</li>
					<li class="flex items-start space-x-4">
						<div class="flex flex-shrink-0 justify-center items-center mt-1 w-20 h-8 text-4xl font-bold rounded-full">2</div>
						<div class="p-8 mx-2 w-full text-left bg-white rounded-lg shadow-md dark:bg-gray-800">
							<h3 class="mb-2 text-xl font-semibold">{{ "Lancez l'installation" | t }}</h3>
							<p class="text-gray-600">{{ "Double-cliquez sur le fichier téléchargé pour démarrer l'assistant d'installation. Suivez les instructions à l'écran." | t }}</p>
						</div>
					</li>
					<li class="flex items-start space-x-4">
						<div class="flex flex-shrink-0 justify-center items-center mt-1 w-20 h-8 text-4xl font-bold rounded-full">3</div>
						<div class="p-8 mx-2 w-full text-left bg-white rounded-lg shadow-md dark:bg-gray-800">
							<h3 class="mb-2 text-xl font-semibold">{{ "Configurez CLIP.PM" | t }}</h3>
							<p class="text-gray-600">{{ "Lancez l'application et connectez-vous avec votre compte CLIP.PM. Si vous n'en avez pas, vous pouvez en créer un gratuitement." | t }}</p>
						</div>
					</li>
					<li class="flex items-start space-x-4">
						<div class="flex flex-shrink-0 justify-center items-center mt-1 w-20 h-8 text-4xl font-bold rounded-full">4</div>
						<div class="p-8 mx-2 w-full text-left bg-white rounded-lg shadow-md dark:bg-gray-800">
							<h3 class="mb-2 text-xl font-semibold">{{ "Commencez à partager" | t }}</h3>
							<p class="text-gray-600">{{ "C'est tout ! Vous pouvez maintenant commencer à copier et coller entre vos appareils en toute simplicité." | t }}</p>
						</div>
					</li>
				</ol>
			</div>
		</div>
	</section>

	<section class="mt-20">
		<div class="container px-6 mx-auto text-center">
			<h2 class="mb-8 text-4xl font-bold">{{ "Vous souhaitez participer ?" | t }}</h2>
			<p class="mx-auto mb-12 max-w-3xl text-xl">{{ "Notre équipe de développement partage la totalité de ce processus, car nous devons être tous vigilants collectivement, étant donné la nature potentiellement confidentielle des données synchronisées." | t }}</p>
			<div class="flex justify-center space-x-4">
				<a href="/about/opensource" up-follow class="px-5 py-4 text-lg font-bold text-white bg-gray-800 rounded-full transition duration-300 dark:text-black dark:bg-white">{{ "Section OPENSOURCE" | t }}</a>
			</div>
		</div>
	</section>
</div>

{{ template "footerMenu.html" . }}