aperonight/app/views/pages/home.html.erb

<!-- Hero Section -->
<section class="relative bg-neutral-50 min-h-[70vh] flex items-center">
  <div class="absolute inset-0 bg-white bg-opacity-60"></div>
  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
    <h1 class="text-5xl md:text-7xl font-bold text-neutral-900 mb-6 leading-tight">
      Découvrez les afterworks et soirée
      <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600">
        à Paris
      </span>
    </h1>
    <p class="text-xl md:text-2xl text-neutral-700 mb-8 max-w-3xl mx-auto leading-relaxed">
      Les meilleures soirées, concerts et afterworks de Paris en un clic. Réservez vos places et vivez des expériences uniques.
    </p>
    <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
      <%= link_to "Explorer les soirées", parties_path, class: "bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-4 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg" %>
      <%= link_to "Voir les concerts", "#", class: "bg-white border border-neutral-300 hover:border-purple-300 text-neutral-700 font-semibold py-4 px-8 rounded-full transition-all duration-300" %>
    </div>
  </div>
</section>

<!-- Metrics -->
<section class="bg-neutral-50 py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <h2 class="text-4xl md:text-5xl font-bold text-neutral-900 mb-4">
        Des chiffres qui parlent
      </h2>
      <p class="text-xl text-neutral-600 max-w-2xl mx-auto">
        La plateforme préférée des Parisiens pour vivre la nuit
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
      <!-- Total Events -->
      <div class="group relative">
        <div class="relative overflow-hidden rounded-2xl bg-white border border-neutral-200 hover:border-purple-300 transition-all duration-300 p-8">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="relative">
            <div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
              <span class="counter" data-controller="counter" data-counter-target-value="127">0</span>
            </div>
            <p class="text-neutral-700 font-mono uppercase tracking-widest text-sm font-medium">
              Événements organisés
            </p>
            <div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
          </div>
        </div>
      </div>

      <!-- Total Users -->
      <div class="group relative">
        <div class="relative overflow-hidden rounded-2xl bg-white border border-neutral-200 hover:border-purple-300 transition-all duration-300 p-8">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="relative">
            <div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
              <span class="counter" data-controller="counter" data-counter-target-value="1433">0</span>+
            </div>
            <p class="text-neutral-700 font-mono uppercase tracking-widest text-sm font-medium">
              Membres actifs
            </p>
            <div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
          </div>
        </div>
      </div>

      <!-- Average Rating -->
      <div class="group relative">
        <div class="relative overflow-hidden rounded-2xl bg-white border border-neutral-200 hover:border-purple-300 transition-all duration-300 p-8">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="relative">
            <div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
              <span class="counter" data-controller="counter" data-counter-target-value="4.4" data-counter-decimal-value="true">0</span>/5
            </div>
            <p class="text-neutral-700 font-mono uppercase tracking-widest text-sm font-medium">
              Note moyenne des soirées
            </p>
            <div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Additional Stats Row -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12">
      <div class="text-center">
        <div class="text-3xl font-bold text-purple-600">
          <span class="counter" data-controller="counter" data-counter-target-value="79">0</span>%
        </div>
        <p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Taux de remplissage</p>
      </div>

      <div class="text-center">
        <div class="text-3xl font-bold text-purple-600">
          <span class="counter" data-controller="counter" data-counter-target-value="12">0</span>
        </div>
        <p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Arrondissements</p>
      </div>

      <div class="text-center">
        <div class="text-3xl font-bold text-purple-600">
          <span class="counter" data-controller="counter" data-counter-target-value="156">0</span>
        </div>
        <p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Établissements partenaires</p>
      </div>

      <div class="text-center">
        <div class="text-3xl font-bold text-purple-600">
          <span class="counter" data-controller="counter" data-counter-target-value="98">0</span>%
        </div>
        <p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Satisfaction client</p>
      </div>
    </div>
  </div>
</section>

<!-- Quick Search Section -->
<section id="search" class="bg-white py-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="bg-gradient-to-br from-neutral-50 to-white border border-neutral-200 rounded-2xl p-8 shadow-lg">
      <h2 class="text-3xl font-bold text-neutral-900 text-center mb-8">Trouvez votre prochaine soirée</h2>

      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
        <div>
          <label class="block text-sm font-medium text-neutral-700 mb-2">Quand ?</label>
          <input type="date" class="w-full bg-white border border-neutral-300 text-neutral-900 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all" placeholder="Choisir une date">
        </div>

        <div>
          <label class="block text-sm font-medium text-neutral-700 mb-2">Type d'événement</label>
          <select class="w-full bg-white border border-neutral-300 text-neutral-900 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
            <option value="">Tous les types</option>
            <option value="club">Soirées club</option>
            <option value="afterwork">Afterworks</option>
            <option value="concert">Concerts</option>
            <option value="vip">Événements VIP</option>
          </select>
        </div>

        <div>
          <label class="block text-sm font-medium text-neutral-700 mb-2">Genre musical</label>
          <select class="w-full bg-white border border-neutral-300 text-neutral-900 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
            <option value="">Tous les genres</option>
            <option value="house">House/Techno</option>
            <option value="hiphop">Hip-Hop</option>
            <option value="pop">Pop</option>
            <option value="rock">Rock</option>
            <option value="electro">Électro</option>
          </select>
        </div>

        <button class="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105">
          Rechercher
        </button>
      </div>
    </div>
  </div>
</section>

<!-- Featured Events -->
<section id="events" class="bg-neutral-50 py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-bold text-neutral-900 mb-4">Événements du moment</h2>
      <p class="text-xl text-neutral-600">Les soirées et concerts les plus populaires cette semaine</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <% @parties.each do |party| %>
        <div class="bg-white border border-neutral-200 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-lg">
          <div class="h-56 bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 relative"
               style="background-image: url('<%= party.image || "https://images.unsplash.com/photo-1506157786151-b84b9d3d78d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" %>');
                      background-size: cover;
                      background-position: center;">
            <div class="absolute top-4 right-4 bg-white bg-opacity-90 text-neutral-900 px-3 py-1 rounded-full text-sm font-medium">
              <%= party.venue_name.split(' ').first %>
            </div>
          </div>
          <div class="p-6">
            <div class="flex justify-between items-start mb-3">
              <h3 class="text-2xl font-bold text-neutral-900"><%= party.name.upcase %></h3>
              <% if party.ticket_types.any? %>
                <span class="text-purple-600 font-semibold"><%= number_to_currency(party.ticket_types.first.price_cents / 100.0, unit: "€", separator: ",", delimiter: " ") %></span>
              <% end %>
            </div>
            <p class="text-neutral-600 mb-2"><%= party.venue_name %>, <%= party.venue_address.split(',').first %></p>
            <p class="text-neutral-700 mb-4"><%= I18n.l(party.start_time, format: "%A %Hh") if party.start_time %> • <%= party.description.split('.').first %></p>
            <%= link_to "Voir les détails", party_path(party.slug, party), class: "w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-3 rounded-lg transition-all duration-300 text-center block" %>
          </div>
        </div>
      <% end %>
    </div>

    <div class="text-center mt-12">
      <%= link_to "Voir tous les événements →", parties_path, class: "text-purple-600 hover:text-purple-700 text-lg font-medium transition-all duration-300 border-b-2 border-purple-600 hover:border-purple-700" %>
    </div>
  </div>
</section>

<!-- Features -->
<section class="bg-white py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <h2 class="text-4xl font-bold text-neutral-900 mb-4">Pourquoi choisir <%= Rails.application.config.app_name %> ?</h2>
      <p class="text-xl text-neutral-600 max-w-2xl mx-auto">La plateforme préférée des Parisiens pour sortir</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="text-center p-8">
        <div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
          <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-neutral-900 mb-3">Découverte facile</h3>
        <p class="text-neutral-600 leading-relaxed">Trouvez les meilleures soirées et concerts de Paris en quelques clics grâce à notre algorithme personnalisé</p>
      </div>

      <div class="text-center p-8">
        <div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
          <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <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>
        </div>
        <h3 class="text-2xl font-bold text-neutral-900 mb-3">Réservation sécurisée</h3>
        <p class="text-neutral-600 leading-relaxed">Paiement 100% sécurisé et billets électroniques avec QR code sur votre mobile</p>
      </div>

      <div class="text-center p-8">
        <div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
          <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-neutral-900 mb-3">Accès rapide</h3>
        <p class="text-neutral-600 leading-relaxed">Entrée express avec validation mobile de vos billets. Plus besoin d'imprimer !</p>
      </div>
    </div>
  </div>
</section>

<!-- CTA Section -->
<section class="bg-gradient-to-r from-purple-100 via-pink-50 to-indigo-100 py-20">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
    <h2 class="text-4xl font-bold text-neutral-900 mb-6">Prêt à vivre la nuit parisienne ?</h2>
    <p class="text-xl text-neutral-700 mb-8">Rejoignez des milliers de party-goers qui utilisent Aperonight chaque semaine</p>
    <button class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-4 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-xl">
      S'inscrire gratuitement
    </button>
  </div>
</section>