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

<% content_for :title, "Aperonight - Découvrez des événements après-travail de luxe" %>

<!-- Hero Section -->
<section class="hero">
  <div class="container">
    <div class="hero-content">
      <h1>Découvrez les afterworks à Paris</h1>
      <p class="subtitle">Connectez-vous avec des professionnels, explorez des lieux uniques et créez des expériences mémorables lors d'événements après-travail soigneusement sélectionnés dans votre ville.</p>

      <div class="cta-group">
        <%= link_to "Explorer les événements", events_path, class: "btn btn-lg btn-primary" %>
        <%= link_to "Organiser un événement", "#", class: "btn btn-lg btn-secondary" %>
      </div>
    </div>
  </div>
</section>

<%= render "components/event_finder" %>

<!-- Featured Events Section -->
<section class="section featured-events" id="events">
  <div class="container">
    <div class="section-header">
      <h2 class="section-title">En vedette cette semaine</h2>
      <p class="section-description">Événements de luxe sélectionnés avec soin qui réunissent les meilleurs professionnels et créateurs de la ville.</p>
    </div>

    <div class="featured-events-grid" data-controller="featured-event">
      <% @events.each do |event| %>
        <div class="featured-event-card" data-featured-event-target="card">
          <%= link_to event_path(event.slug, event) do %>
            <img src="<%= event.image %>" alt="<%= event.name %>" class="featured-event-image" data-featured-event-target="animated">
          <% end %>
          <div class="featured-event-content">
            <div class="featured-event-badges">
              <% if event.featured? %>
                <span class="badge badge-featured">★ En vedette</span>
              <% end %>
              <% if event.ticket_types.any? { |ticket_type| ticket_type.available_quantity > 0 } %>
                <span class="badge badge-available">Disponible</span>
              <% end %>
            </div>
            <h3 class="featured-event-title"><%= event.name %></h3>
            <div class="featured-event-meta">
              <div class="featured-event-meta-item">
                <i data-lucide="calendar"></i>
                <%= l(event.start_time, format: '%a, %b %d • %H:%M - %H:%M') %> <!-- Format: Wed, Jan 1 • 18:30 - 22:00 -->
              </div>
              <div class="featured-event-meta-item">
                <i data-lucide="map-pin"></i>
                <%= event.venue_name %>, <%= event.venue_address %>
              </div>
              <div class="featured-event-meta-item">
                <i data-lucide="users"></i>
                <%= event.tickets.sum(:quantity) %> participants • <%= event.tickets.joins(:ticket_type).where('ticket_types.quantity > ?', 0).count %> places disponibles
              </div>
            </div>
            <p class="featured-event-description"><%= event.description %></p>
            <div class="featured-event-footer">
              <span class="featured-event-price">€<%= event.ticket_types.minimum(:price_cents).to_f / 100 %></span>
              <%= link_to "Réserver une place", event_path(event.slug, event), class: "btn btn-sm btn-primary" %>
            </div>
          </div>
        </div>
      <% end %>
    </div>

    <div style="text-align: center; margin-top: var(--space-12);">
      <%= link_to "Voir tous les événements", events_path, class: "btn btn-lg btn-outline" %>
    </div>
  </div>

</section>

<!-- Features Section -->
<section class="section features-section">
  <div class="container">
    <div class="section-header">
      <h2 class="section-title">Why Choose Aperonight?</h2>
      <p class="section-description">We curate premium experiences that connect professionals and create lasting relationships.</p>
    </div>
    <div class="features-grid">
      <div class="feature-card">
        <div class="feature-icon">
          <i data-lucide="crown"></i>
        </div>
        <h3 class="feature-title">Premium Curation</h3>
        <p class="feature-description">Every event is carefully selected and designed to provide exceptional value and networking opportunities.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <i data-lucide="shield-check"></i>
        </div>
        <h3 class="feature-title">Secure & Trusted</h3>
        <p class="feature-description">Safe payments, verified venues, and trusted community with comprehensive insurance coverage.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <i data-lucide="users-2"></i>
        </div>
        <h3 class="feature-title">Quality Networking</h3>
        <p class="feature-description">Connect with verified professionals, entrepreneurs, and industry leaders in intimate settings.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <i data-lucide="zap"></i>
        </div>
        <h3 class="feature-title">Instant Booking</h3>
        <p class="feature-description">Seamless reservation process with instant confirmation and easy event management.</p>
      </div>
    </div>
  </div>
</section>

<!-- Stats Section -->
<section class="section stats-section">
  <div class="container">
    <div class="stats-grid">
      <div class="stat-item" data-controller="counter" data-action="counter:scroll->counter#animate">
        <span class="stat-number" data-target-value="150">0</span>
        <div class="stat-label">Monthly Events</div>
      </div>
      <div class="stat-item" data-controller="counter" data-action="counter:scroll->counter#animate">
        <span class="stat-number" data-target-value="5200">0</span>
        <div class="stat-label">Active Members</div>
      </div>
      <div class="stat-item" data-controller="counter" data-action="counter:scroll->counter#animate">
        <span class="stat-number" data-target-value="200">0</span>
        <div class="stat-label">Partner Venues</div>
      </div>
      <div class="stat-item" data-controller="counter" data-action="counter:scroll->counter#animate">
        <span class="stat-number" data-target-value="98">0</span>
        <div class="stat-label">Satisfaction Rate</div>
      </div>
    </div>
  </div>
</section>

<!-- CTA Section -->
<section class="cta-section">
  <div class="container">
    <div class="cta-content">
      <h2>Ready to Join the Community?</h2>
      <p>Start discovering amazing events and connect with like-minded professionals in your city.</p>
      <div style="display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap;">
        <button class="btn btn-lg" style="background: white; color: var(--color-primary-600); border: 2px solid white;">
          <i data-lucide="user-plus"></i>
          Join Now - Free
        </button>
        <button class="btn btn-lg btn-ghost" style="border: 2px solid rgba(255,255,255,0.5); color: white;">
          <i data-lucide="calendar"></i>
          Browse Events
        </button>
      </div>
    </div>
  </div>
</section>