{{ template "headersMenu.html" . }}

<style>
.fullscreen-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-section.bg-gray-900 {
  background: linear-gradient(to bottom,#00adef00, #9933ffbb) !important;
}

</style>

<main class="text-white">
  <section class="container transparent fullscreen-section">
    <div class="text-center">
      <h1 class="mb-6 text-5xl font-bold md:text-7xl">{{ "Le bon CV toujours sous la main" | t }}</h1>
      <p class="mb-8 text-xl md:text-3xl">{{ "Centralisez vos informations et générez un CV différent pour chaque candidature. Optimisé par notre IA pour une simplicité maximale." | t }}</p>
      <a href="#pricing" class="px-6 py-3 text-3xl text-white bg-black rounded-full transition duration-300 hover:bg-blue-600">{{ "Créer mon CV" | t }}</a>
    </div>
  </section>

  <section id="features" class="transparent fullscreen-section">
    <div class="container mx-auto">
      <h2 class="mb-12 text-5xl font-bold text-left">{{ "Bénéficiez d'une infrastructure 100% web, toujours à jour, respectueuse de votre vie privée et de l'environnement." | t }}</h2>
      <div class="grid grid-cols-1 gap-12 md:grid-cols-3">
        <div class="text-left">
          <svg xmlns="http://www.w3.org/2000/svg" class="mt-4 w-16 h-16 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
          </svg> 
          <h3 class="my-4 text-3xl font-semibold">{{ "Votre dernier CV" | t }}</h3>
          <p class="mb-4 text-lg font-bold">{{ "Votre CV en ligne, avec une URL faite pour durer, quelle que soit l'évolution de votre carrière." | t }}</p>
          <ul class="pl-4 space-y-2 text-left">
            <li>{{ "Analyse sémantique de vos expériences" | t }}</li>
            <li>{{ "Suggestion de compétences pertinentes" | t }}</li>
            <li>{{ "Adaptation du contenu selon le poste visé" | t }}</li>
            <li>{{ "Amélioration continue basée sur les tendances du marché" | t }}</li>
          </ul>
        </div>
        <div class="text-left">
          <svg xmlns="http://www.w3.org/2000/svg" class="mt-4 w-16 h-16 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
          </svg>
          <h3 class="my-4 text-3xl font-semibold">{{ "Modèles élégants" | t }}</h3>
          <p class="mb-4 text-lg font-bold">{{ "Choisissez parmi nos modèles personnalisables pour créer un CV qui vous ressemble." | t }}</p>
          <ul class="pl-4 space-y-2 text-left">
            <li>{{ "Designs modernes et épurés" | t }}</li>
            <li>{{ "Adaptation aux normes de votre secteur" | t }}</li>
            <li>{{ "Personnalisation des couleurs et des polices" | t }}</li>
            <li>{{ "Formats optimisés pour l'impression et le digital" | t }}</li>
          </ul>
        </div>
        <div class="text-left">
          <svg xmlns="http://www.w3.org/2000/svg" class="mt-4 w-16 h-16 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <h3 class="my-4 text-3xl font-semibold">{{ "CV uniques" | t }} <a href="#pricing" class="p-1 text-xs font-bold text-white bg-black">PREMIUM</a></h3>
          <p class="mb-4 text-lg font-bold">{{ "Notre IA vous permet d'optimiser votre CV en fonction de l'offre visée." | t }}</p>
          <ul class="pl-4 space-y-2 text-left">
            <li>{{ "Génération en fonction du secteur de l'entreprise" | t }}</li>
            <li>{{ "Optimisation pour les logiciels de recrutement" | t }}</li>
            <li>{{ "Chaque CV personnalisé à un lien unique" | t }}</li>
            <li>{{ "Mise à jour régulière selon les tendances du marché" | t }}</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section id="how-it-works" class="transparent fullscreen-section">
    <div class="container mx-auto">
      <h2 class="mb-12 text-4xl font-bold text-left">{{ "Comment ça marche" | t }}</h2>
      <div class="grid grid-cols-1 gap-12 mt-10 mb-10 md:grid-cols-2">
        <div class="flex justify-center items-center mx-auto mb-6 w-20 h-20 bg-black rounded-full">
          <span class="text-3xl font-bold">1</span>
        </div>
        <div class="text-left">
          <h3 class="mb-4 text-3xl font-semibold">{{ "Remplissez vos informations" | t }}</h3>
          <p class="mb-4 text-lg font-bold">{{ "Utilisez notre assistant intuitif pour entrer vos détails professionnels de manière structurée et complète." | t }}</p>
          <ul class="pl-4 space-y-2 text-left">
            <li>{{ "Interface conviviale et guidée" | t }}</li>
            <li>{{ "Personnalisable en fonction de votre parcours" | t }}</li>
            <li>{{ "Modifiez à tout moment chaque section" | t }}</li>
            <li>{{ "Sauvegarde automatique de votre progression" | t }}</li>
          </ul>
        </div>
      </div>
      <div class="grid grid-cols-1 gap-12 mt-10 mb-10 md:grid-cols-2">
        <div class="flex justify-center items-center mx-auto mb-6 w-20 h-20 bg-black rounded-full">
          <span class="text-3xl font-bold">2</span>
        </div>
        <div class="text-left">
          <h3 class="mb-4 text-3xl font-semibold">{{ "L'IA optimise votre CV" | t }} <a href="#pricing" class="p-1 text-xs font-bold text-white bg-black">PREMIUM</a></h3>
          <p class="mb-4 text-lg font-bold">{{ "Notre intelligence artificielle analyse et améliore chaque section de votre CV pour le rendre plus percutant et pertinent." | t }}</p>
          <ul class="pl-4 space-y-2 text-left">
            <li>{{ "Analyse sémantique de vos expériences" | t }}</li>
            <li>{{ "Reformulation pour un impact maximal" | t }}</li>
            <li>{{ "Suggestions de compétences manquantes" | t }}</li>
            <li>{{ "Personnalisation selon le poste visé" | t }}</li>
          </ul>
        </div>
      </div>
      <div class="grid grid-cols-1 gap-12 mt-10 mb-10 md:grid-cols-2">
        <div class="flex justify-center items-center mx-auto mb-6 w-20 h-20 bg-black rounded-full">
          <span class="text-3xl font-bold">3</span>
        </div>
        <div class="text-left">
          <h3 class="mb-4 text-3xl font-semibold">{{ "Partagez votre CV" | t }}</h3>
          <p class="mb-4 text-lg font-bold">{{ "Obtenez instantanément votre CV au format souhaité." | t }}</p>
          <ul class="pl-4 space-y-2 text-left">
            <li>{{ "Un lien unique, optimisé pour l'impression comme pour le digital" | t }}</li>
            <li>{{ "Téléchargement (PDF, Word, HTML)" | t }}</li>
            <li>{{ "Possibilité de créer plusieurs versions" | t }}</li>
            <li>{{ "Mises à jour illimitées" | t }}</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section id="pricing" class="bg-gray-900 fullscreen-section">
    <div class="container mx-auto">
      <h2 class="mb-12 text-4xl font-bold text-center">{{ "Gratuit à vie, seule l'IA et la gestion de domaine sont en option" | t }}</h2>
      <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
        <div class="p-8 text-center bg-gray-800 rounded-lg">
          <h3 class="mb-4 text-3xl font-semibold">{{ "CV Gratuit" | t }}</h3>
          <p class="mb-6 text-4xl font-bold">{{ "0 €" | t }}</p>
          <ul class="pl-4 mb-8 space-y-2">
            <li>{{ "CV gratuit à vie sur VITAE.PM" | t }}</li>
            <li>{{ "Pas de publicité" | t }}</li>
            <li>{{ "Pas de limite d'utilisation" | t }}</li>
          </ul>
          <a href="/demo" class="block px-6 py-3 w-full font-bold text-black bg-white rounded-full transition duration-300 hover:bg-gray-200">{{ "Commencer gratuitement" | t }}</a>
        </div>
        <div class="p-8 text-center bg-blue-600 rounded-lg">
          <h3 class="mb-4 text-3xl font-semibold">{{ "Option Premium" | t }}</h3>
          <p class="mb-6 text-4xl font-bold">{{ "10 € HT/an" | t }}</p>
          <ul class="pl-4 mb-8 space-y-2">
            <li>{{ "Toutes les fonctionnalités du CV gratuit" | t }}</li>
            <li>{{ "Accès à notre IA" | t }}</li>
            <li>{{ "Gestion de nom de domaine personnalisé" | t }}</li>
          </ul>
          <a href="/create" class="block px-6 py-3 w-full font-bold text-white bg-black rounded-full transition duration-300 hover:bg-gray-800">{{ "Choisir l'option Premium" | t }}</a>
        </div>
      </div>
      <p class="mt-8 text-center">{{ "Notez que les autres services .PM sont payants mais totalement indépendants." | t }}<br>{{ "Ils n'affectent en aucun cas l'utilisation gratuite de votre CV sur VITAE.PM." | t }}</p>
    </div>
  </section>
</main>


<div class="text-white">

    
</div>

<script>
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
        behavior: 'smooth'
    });
    });
});

</script>

<script>


window.addEventListener('resize', () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  uniforms.iResolution.value.set(window.innerWidth, window.innerHeight);
});
</script>

{{ template "footerMenu.html" . }}