front/src/app/components/home-page/home-page.component.html

<div class="relative w-full">
  <img
    src="/home.jpg"
    alt="image carte du monde"
    class="w-full h-[150px] object-cover"
  />
</div>

<div
  class="flex flex-col lg:flex-row gap-10 p-10 justify-center items-stretch bg-gray-900 dark:bg-white"
  id="about"
>
  <section
    class="bg-white dark:bg-gray-900 rounded-lg flex flex-col justify-between p-6 flex-1"
  >
    <div
      class="flex flex-col sm:flex-row gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl lg:px-6 h-full"
    >
      <div
        class="flex justify-center items-center w-full sm:w-[50%] lg:w-[35%]"
      >
        <div
          class="w-full aspect-square max-w-[150px] sm:max-w-[200px] md:max-w-[250px] lg:max-w-[350px] rounded overflow-hidden"
        >
          <img
            src="/map.png"
            alt="Carte interactive Memory"
            class="w-full h-full object-cover"
          />
        </div>
      </div>
      <div class="mt-4 sm:mt-0 w-full sm:w-[50%] lg:w-[65%]">
        <h2
          class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
        >
          Bienvenue sur Memory Map
        </h2>
        <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
          Plongez dans un voyage interactif à travers vos souvenirs avec
          <strong>Memory Map</strong>, l'application qui transforme vos
          aventures en une carte unique et personnalisée.
        </p>
        <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
          Enrichissez vos pins avec des photos, des légendes, des notes
          personnelles, et même des amis identifiés pour revivre chaque moment
          important.
        </p>
        <button
          routerLink="/map"
          class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-800"
        >
          Commencez votre aventure
          <svg
            class="ml-2 -mr-1 w-5 h-5"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </button>
      </div>
    </div>
  </section>

  <section
    class="bg-white dark:bg-gray-900 rounded-lg flex flex-col justify-between p-6 flex-1"
  >
    <div
      class="flex flex-col sm:flex-row gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl lg:px-6 h-full"
    >
      <div class="mt-4 sm:mt-0 w-full sm:w-[50%] lg:w-[65%]">
        <h2
          class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
        >
          L'équipe Memory
        </h2>
        <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
          Toute l'équipe de <strong>Memory</strong> est fière de vous présenter
          <strong>Memory Map</strong>, une application conçue avec passion et
          créativité pour vous permettre de revivre vos meilleurs souvenirs et
          d'en découvrir de nouveaux.
        </p>
        <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
          Nous vous remercions de nous accompagner dans cette belle aventure, et
          nous avons hâte de voir les magnifiques cartes que vous allez créer !
        </p>
      </div>
      <div
        class="flex justify-center items-center w-full sm:w-[50%] lg:w-[35%]"
      >
        <div
          class="w-full aspect-square max-w-[150px] sm:max-w-[200px] md:max-w-[250px] lg:max-w-[350px] rounded overflow-hidden"
        >
          <img
            src="/team.png"
            alt="Équipe Memory"
            class="w-full h-full object-cover"
          />
        </div>
      </div>
    </div>
  </section>
</div>

<section class="bg-white dark:bg-gray-900 pt-12" id="features">
  <div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
    <div class="mb-8 lg:mb-16 relative">
      <h2
        class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white text-center -mx-4 sm:mx-0"
      >
        Fonctionnalités principales
      </h2>
    </div>
    <div
      class="space-y-8 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-12 md:space-y-0 p-10 pt-4"
    >
      <div>
        <div
          class="flex items-center w-20 h-20 rounded-full bg-primary-100 lg:h-24 lg:w-24 dark:bg-primary-900"
        >
          <svg
            class="w-10 h-10 text-gray-800 dark:text-white lg:w-12 lg:h-12"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              fill-rule="evenodd"
              d="M11.906 1.994a8.002 8.002 0 0 1 8.09 8.421 7.996 7.996 0 0 1-1.297 3.957.996.996 0 0 1-.133.204l-.108.129c-.178.243-.37.477-.573.699l-5.112 6.224a1 1 0 0 1-1.545 0L5.982 15.26l-.002-.002a18.146 18.146 0 0 1-.309-.38l-.133-.163a.999.999 0 0 1-.13-.202 7.995 7.995 0 0 1 6.498-12.518ZM15 9.997a3 3 0 1 1-5.999 0 3 3 0 0 1 5.999 0Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <h3 class="mb-2 text-xl font-bold dark:text-white">Placer vos pins</h3>
        <p class="text-gray-500 dark:text-gray-400">
          Marquez sans effort vos endroits préférés sur la carte. Qu'il s'agisse
          d'un joyau caché ou d'une vue à couper le souffle, épinglez les lieux
          pour créer une carte personnalisée de vos aventures. N'oubliez jamais
          les endroits qui ont rendu votre voyage spécial.
        </p>
      </div>
      <div>
        <div
          class="flex items-center w-20 h-20 rounded-full bg-primary-100 lg:h-24 lg:w-24 dark:bg-primary-900"
        >
          <svg
            class="w-10 h-10 text-gray-800 dark:text-white lg:w-12 lg:h-12"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              fill-rule="evenodd"
              d="M13 10a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2H14a1 1 0 0 1-1-1Z"
              clip-rule="evenodd"
            />
            <path
              fill-rule="evenodd"
              d="M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12c0 .556-.227 1.06-.593 1.422A.999.999 0 0 1 20.5 20H4a2.002 2.002 0 0 1-2-2V6Zm6.892 12 3.833-5.356-3.99-4.322a1 1 0 0 0-1.549.097L4 12.879V6h16v9.95l-3.257-3.619a1 1 0 0 0-1.557.088L11.2 18H8.892Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <h3 class="mb-2 text-xl font-bold dark:text-white">
          Ajouter vos Photos
        </h3>
        <p class="text-gray-500 dark:text-gray-400">
          Donnez vie à vos pins avec des images ! Capturez l'essence de vos
          souvenirs en joignant des photos aux lieux que vous avez épinglés.
          Qu'il s'agisse de couchers de soleil, de points de repère ou de
          moments spontanés, créez un journal visuel de vos expériences.
        </p>
      </div>
      <div>
        <div
          class="flex items-center w-20 h-20 rounded-full bg-primary-100 lg:h-24 lg:w-24 dark:bg-primary-900"
        >
          <svg
            class="w-10 h-10 text-gray-800 dark:text-white lg:w-12 lg:h-12"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              d="M17.5 3a3.5 3.5 0 0 0-3.456 4.06L8.143 9.704a3.5 3.5 0 1 0-.01 4.6l5.91 2.65a3.5 3.5 0 1 0 .863-1.805l-5.94-2.662a3.53 3.53 0 0 0 .002-.961l5.948-2.667A3.5 3.5 0 1 0 17.5 3Z"
            />
          </svg>
        </div>
        <h3 class="mb-2 text-xl font-bold dark:text-white">
          Partager vos histoires
        </h3>
        <p class="text-gray-500 dark:text-gray-400">
          Chaque souvenir a une histoire, et vous pouvez maintenant partager la
          vôtre. Racontez les moments qui ont rendu chaque lieu inoubliable.
          Partagez vos aventures et revivez vos expériences les plus chères à
          travers vos propres mots.
        </p>
      </div>
    </div>
  </div>
</section>

<section class="dark:bg-white bg-gray-900">
  <div class="py-8 px-4 mx-auto max-w-screen-l lg:py-16 lg:px-6">
    <div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
      <h2
        class="mb-4 text-4xl tracking-tight font-extrabold dark:text-gray-800 text-white"
      >
        Conçu pour des aventuriers comme vous
      </h2>
      <p class="mb-5 font-light dark:text-gray-500 sm:text-xl text-gray-400">
        Chez Memory Map, nous nous concentrons sur la création d'outils qui
        transforment vos souvenirs en expériences interactives et mémorables.
      </p>
    </div>
    <div
      class="space-y-8 lg:grid lg:grid-cols-2 justify-center mx-auto sm:gap-3 xl:gap-6 gap-x-8 lg:space-y-0 max-w-6xl"
    >
      <!-- Pricing Card -->
      <div
        class="flex flex-col justify-center p-6 mx-auto max-w-md text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white h-full"
      >
        <h3 class="mb-4 text-2xl font-semibold">Gratuit</h3>
        <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
          Meilleure option pour un usage personnel et pour votre prochain
          projet.
        </p>
        <!-- List -->
        <ul role="list" class="mb-8 space-y-4 text-left pt-5">
          <li class="flex items-center space-x-3">
            <!-- Icon -->
            <svg
              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd"
              ></path>
            </svg>
            <span>Pins illimités sur votre carte personnelle.</span>
          </li>
          <li class="flex items-center space-x-3">
            <!-- Icon -->
            <svg
              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd"
              ></path>
            </svg>
            <span>Ajoutez des photos à vos souvenirs.</span>
          </li>
          <li class="flex items-center space-x-3">
            <!-- Icon -->
            <svg
              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd"
              ></path>
            </svg>
            <span>Partagez des souvenirs avec vos amis.</span>
          </li>
          <li class="flex items-center space-x-3">
            <!-- Icon -->
            <svg
              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd"
              ></path>
            </svg>
            <span>Accès au système de quêtes.</span>
          </li>
        </ul>
        <a
          href="/map"
          class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-800 dark:hover:bg-blue-900 dark:focus:ring-blue-900"
          >Commencez</a
        >
      </div>
      <!-- Pricing Card -->
      <div
        class="flex flex-col justify-center p-6 mx-auto max-w-md text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white h-full"
      >
        <h3 class="mb-4 text-2xl font-semibold">Premium</h3>
        <div class="flex justify-center items-baseline pb-2">
          <span class="mr-2 text-3xl font-extrabold">9€</span>
          <span class="text-gray-500 dark:text-gray-400">/mois</span>
        </div>
        <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
          Parfait pour les aventuriers avides de souvenirs et de fonctionnalités
          avancées.
        </p>
        <!-- List -->
        <ul role="list" class="mb-8 space-y-4 text-left pt-5">
          <li class="flex items-center space-x-3">
            <!-- Icon -->
            <svg
              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd"
              ></path>
            </svg>
            <span>Pins illimités sur votre carte personnelle.</span>
          </li>
          <li class="flex items-center space-x-3">
            <!-- Icon -->
            <svg
              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd"
              ></path>
            </svg>
            <span>Ajoutez des photos à vos souvenirs.</span>
          </li>
          <li class="flex items-center space-x-3">
            <!-- Icon -->
            <svg
              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd"
              ></path>
            </svg>
            <span>Partagez des souvenirs avec vos amis.</span>
          </li>
          <li class="flex items-center space-x-3">
            <!-- Icon -->
            <svg
              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd"
              ></path>
            </svg>
            <span>Système avancé de quêtes avec badges exclusifs.</span>
          </li>
          <li class="flex items-center space-x-3">
            <!-- Icon -->
            <svg
              class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                clip-rule="evenodd"
              ></path>
            </svg>
            <span>Support premium.</span>
          </li>
        </ul>
        <a
          class="text-gray-900 bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-primary-900"
          >Bientôt disponible</a
        >
      </div>
    </div>
  </div>
</section>
<footer class="bg-gray-100 dark:bg-gray-900 py-6">
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row justify-between items-center gap-4">
      <!-- Logo ou Nom -->
      <div class="flex items-center gap-2">
        <img src="/logo.png" alt="Logo Memory Map" class="w-8 h-8" />
        <span class="text-lg font-semibold text-gray-800 dark:text-gray-100">
          Memory Map
        </span>
      </div>

      <div class="flex flex-wrap justify-center gap-6">
        <a
          href="#about"
          class="text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
        >
          À propos
        </a>
        <a
          href="#features"
          class="text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
        >
          Fonctionnalités
        </a>
      </div>

      <p class="text-sm text-gray-500 dark:text-gray-400 text-center">
        © {{ currentYear }} Memory Map
      </p>
    </div>
  </div>
</footer>