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">
      <!-- Featured Event 1 -->
      <div class="featured-event-card" data-featured-event-target="card">
        <img src="https://images.unsplash.com/photo-1540039155733-5bb30b53aa14?w=600&h=300&fit=crop" alt="Soirée de réseautage Tech & Innovation" class="featured-event-image" data-featured-event-target="animated">
        <div class="featured-event-content">
          <div class="featured-event-badges">
            <span class="badge badge-featured">★ En vedette</span>
            <span class="badge badge-available">Disponible</span>
          </div>
          <h3 class="featured-event-title">Soirée de réseautage Tech & Innovation</h3>
          <div class="featured-event-meta">
            <div class="featured-event-meta-item">
              <i data-lucide="calendar"></i>
              Jeu, Mar 15 • 18:30 - 22:00
            </div>
            <div class="featured-event-meta-item">
              <i data-lucide="map-pin"></i>
              Le Perchoir Marais, Paris
            </div>
            <div class="featured-event-meta-item">
              <i data-lucide="users"></i>
              85 participants • 15 places disponibles
            </div>
          </div>
          <p class="featured-event-description">Rejoignez plus de 100 professionnels de la technologie pour une soirée exclusive de réseautage, de boissons et de découvertes des dernières tendances innovantes. Connectez-vous avec des startups, des investisseurs et des leaders de l'industrie.</p>
          <div class="featured-event-footer">
            <span class="featured-event-price">€35</span>
            <button class="btn btn-sm btn-primary">Réserver une place</button>
          </div>
        </div>
      </div>
 
      <!-- Featured Event 2 -->
      <div class="featured-event-card" data-featured-event-target="card">
        <img src="https://images.unsplash.com/photo-1574391884720-bbc3740c59d1?w=400&h=240&fit=crop" alt="Rencontre exclusive des directeurs créatifs" class="featured-event-image" data-featured-event-target="animated">
        <div class="featured-event-content">
          <div class="featured-event-badges">
            <span class="badge badge-vip">VIP</span>
            <span class="badge badge-limited">Limité</span>
          </div>
          <h3 class="featured-event-title">Rencontre exclusive des directeurs créatifs</h3>
          <div class="featured-event-meta">
            <div class="featured-event-meta-item">
              <i data-lucide="calendar"></i>
              Ven, Mar 16 • 19:00 - 23:00
            </div>
            <div class="featured-event-meta-item">
              <i data-lucide="map-pin"></i>
              Atelier Des Lumières, Paris
            </div>
            <div class="featured-event-meta-item">
              <i data-lucide="users"></i>
              30 créatifs • 8 places disponibles
            </div>
          </div>
          <p class="featured-event-description">Un rassemblement intime de directeurs créatifs, de designers et d'artistes visuels. Découvrez des installations d'art immersives tout en vous connectant avec des pionniers de l'industrie.</p>
          <div class="featured-event-footer">
            <span class="featured-event-price">€65</span>
            <button class="btn btn-sm btn-primary">Rejoindre le VIP</button>
          </div>
        </div>
      </div>
 
      <!-- Featured Event 3 -->
      <div class="featured-event-card" data-featured-event-target="card">
        <img src="https://images.unsplash.com/photo-1569949381669-ecf31ae8e613?w=400&h=240&fit=crop" alt="Dégustation de vin et d'affaires de luxe" class="featured-event-image" data-featured-event-target="animated">
        <div class="featured-event-content">
          <div class="featured-event-badges">
            <span class="badge badge-available">Disponible</span>
          </div>
          <h3 class="featured-event-title">Dégustation de vin et d'affaires de luxe</h3>
          <div class="featured-event-meta">
            <div class="featured-event-meta-item">
              <i data-lucide="calendar"></i>
              Sam, Mar 18 • 17:00 - 21:00
            </div>
            <div class="featured-event-meta-item">
              <i data-lucide="map-pin"></i>
              Cave Legrand, Paris
            </div>
            <div class="featured-event-meta-item">
              <i data-lucide="users"></i>
              45 professionnels • 12 places disponibles
            </div>
          </div>
          <p class="featured-event-description">Découvrez des vins français exceptionnels tout en vous connectant avec des professionnels d'affaires. Guidance d'un sommelier expert et dégustations de luxe dans une cave à vin historique.</p>
          <div class="featured-event-footer">
            <span class="featured-event-price">€55</span>
            <button class="btn btn-sm btn-secondary">Réserver maintenant</button>
          </div>
        </div>
      </div>
    </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>