<template>
  <div class="bg-gray-100 min-h-screen">

    <!-- Header Section -->
    <div class="px-6 py-12">
      <div class="max-w-4xl mx-auto flex items-center justify-center">
        <img src="/images/hutopymedia/banners/hutopy.png" alt="Hutopy Logo" class="h-24">
      </div>
    </div>

    <!-- Banner Section -->
    <div class="relative">
      <img src="/images/hutopymedia/homepage/bannierehomepage.png" alt="Hutopy Banner" class="w-full rounded-xl shadow-lg">
    </div>

    <!-- Call-to-Action Section -->
    <div class="flex justify-center py-8 space-x-4 overflow-auto">
      <img src="/images/hutopymedia/homepage/creer.png" alt="Create CallToAction" class="rounded-xl shadow-lg w-1/4 sm:w-1/6 md:w-1/8 lg:w-1/12">
      <img src="/images/hutopymedia/homepage/partager.png" alt="Share CallToAction" class="rounded-xl shadow-lg w-1/4 sm:w-1/6 md:w-1/8 lg:w-1/12">
      <img src="/images/hutopymedia/homepage/inspirer.png" alt="Inspire CallToAction" class="rounded-xl shadow-lg w-1/4 sm:w-1/6 md:w-1/8 lg:w-1/12">
    </div>

    <!-- Main Content Section -->
    <div class="max-w-4xl mx-auto px-6 py-8 space-y-6">
      <img src="/images/hutopymedia/homepage/votrehutopy.png" alt="YourHutopy" class="mx-auto mb-8">

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div class="space-y-4">
          <p class="text-lg leading-relaxed text-gray-800">
            Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
            cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
            écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer,
            mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
            communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
            la créativité.
          </p>

          <p class="text-lg leading-relaxed text-gray-800">
            Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
            conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
            réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
            autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
            prendre vie.
          </p>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-2 gap-4">
          <img src="/images/hutopymedia/homepage/grinding.png" alt="Grinding" class="rounded-lg shadow-lg">
          <img src="/images/hutopymedia/homepage/microphone.png" alt="Microphone" class="rounded-lg shadow-lg">
          <img src="/images/hutopymedia/homepage/girlarmy.png" alt="Girl Army" class="rounded-lg shadow-lg">
          <img src="/images/hutopymedia/homepage/girlvr.png" alt="Girl VR" class="rounded-lg shadow-lg">
        </div>
      </div>
    </div>

    <!-- Profile Section -->
    <div class="bg-white py-12">
      <div class="max-w-4xl mx-auto px-6 space-y-8">
        <h1 class="text-4xl font-bold text-center text-purple-900">Ils sont sur Hutopy.</h1>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div class="flex justify-center items-center">
            <RouterLink to="/">
              <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png" alt="Profile Image" class="rounded-2xl shadow-lg">
            </RouterLink>
          </div>
          <div class="flex justify-center items-center">
            <RouterLink to="/@guillaumeaime">
              <img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg" alt="Profile Image" class="rounded-2xl shadow-lg">
            </RouterLink>
          </div>
          <div class="flex justify-center items-center">
            <RouterLink to="/@chloebeaugrand">
              <img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png" alt="Profile Image" class="rounded-2xl shadow-lg">
            </RouterLink>
          </div>
        </div>

        <div class="flex justify-center">
          <RouterLink to="/browse">
            <button class="px-6 py-3 bg-purple-700 text-white rounded-lg hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out">Découvre les autres créateurs</button>
          </RouterLink>
      
        </div>
        <selected-footer></selected-footer>
      </div>
    </div>
 
  </div>
  
  
</template>

<script setup>
import SelectedFooter from "@/views/main/SelectedFooter.vue";
</script>

<style scoped>
.overlay p {
  color: white;
  font-size: 1.5rem;
  text-align: center;
}

body {
  background-color: #F4F4F4;
}

</style>
