249 lines
12 KiB
Plaintext
Executable File
249 lines
12 KiB
Plaintext
Executable File
<% content_for :title, "Aperonight - Découvrez les meilleurs événements après-travail" %>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative bg-gradient-primary min-h-screen flex items-center overflow-hidden">
|
|
<!-- Background overlay -->
|
|
<div class="absolute inset-0 bg-black bg-opacity-30 z-10"></div>
|
|
|
|
<div class="relative z-20 container mx-auto px-4 py-16 lg:py-24">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<!-- Hero Content -->
|
|
<div class="text-center lg:text-left text-white">
|
|
<h1 class="text-4xl lg:text-6xl font-bold mb-6 leading-tight">
|
|
Découvrez les
|
|
<span class="text-yellow-400">meilleurs événements</span>
|
|
afterworks
|
|
</h1>
|
|
<p class="text-xl text-gray-200 mb-8 max-w-lg">
|
|
Connectez-vous avec des professionnels et découvrez des événements exclusifs dans les plus beaux lieux de Paris.
|
|
</p>
|
|
|
|
<!-- CTA Buttons -->
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start max-w-lg">
|
|
<%= link_to events_path,
|
|
class: "w-full sm:flex-1 bg-white text-gray-900 px-6 py-3 rounded-full font-semibold text-base hover:bg-gray-100 transition-all duration-200 inline-flex items-center justify-center shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" do %>
|
|
<i data-lucide="calendar" class="w-4 h-4 mr-2"></i>
|
|
Voir tous les événements
|
|
<% end %>
|
|
|
|
<% unless user_signed_in? %>
|
|
<%= link_to new_user_registration_path,
|
|
class: "w-full sm:flex-1 border-2 border-white text-white px-6 py-3 rounded-full font-semibold text-base hover:bg-white hover:text-gray-900 transition-all duration-200 inline-flex items-center justify-center" do %>
|
|
<i data-lucide="user-plus" class="w-4 h-4 mr-2"></i>
|
|
Rejoindre gratuitement
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero Visual -->
|
|
<div class="relative">
|
|
<div class="bg-gray-800 rounded-3xl p-8 shadow-2xl backdrop-blur-sm bg-opacity-90">
|
|
<div class="text-center text-white">
|
|
<div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i data-lucide="calendar" class="w-8 h-8 text-gray-900"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-2">Aperonight</h3>
|
|
<p class="text-gray-300 mb-6">Événements premium après-travail</p>
|
|
<div class="grid grid-cols-3 gap-4 text-center">
|
|
<div>
|
|
<div class="text-2xl font-bold text-yellow-400"><%= @total_events %>+</div>
|
|
<div class="text-sm text-gray-400">Événements</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-2xl font-bold text-yellow-400"><%= (@total_users / 100.0).round(1) %>k</div>
|
|
<div class="text-sm text-gray-400">Membres</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-2xl font-bold text-yellow-400">5★</div>
|
|
<div class="text-sm text-gray-400">Satisfaction</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Events Section -->
|
|
<section class="py-16 bg-white">
|
|
<div class="container mx-auto px-4">
|
|
<!-- Section Header -->
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
|
|
ÉVÉNEMENTS POPULAIRES À PARIS
|
|
</h2>
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Découvrez une sélection d'événements après-travail soigneusement choisis dans les plus beaux lieux de la capitale.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Events Grid -->
|
|
<% if @featured_events.any? %>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
|
<% @featured_events.each do |event| %>
|
|
<div class="group cursor-pointer transform transition-all duration-300 hover:-translate-y-2">
|
|
<%= link_to event_path(event.slug, event), class: "block" do %>
|
|
<!-- Event Card -->
|
|
<div class="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden">
|
|
<!-- Event Image -->
|
|
<div class="relative overflow-hidden aspect-[4/3]">
|
|
<% if event.image.present? %>
|
|
<img src="<%= event.image %>"
|
|
alt="<%= event.name %>"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
<% else %>
|
|
<div class="w-full h-full bg-gradient-to-br from-purple-600 to-blue-600 flex items-center justify-center">
|
|
<i data-lucide="calendar" class="w-16 h-16 text-white"></i>
|
|
</div>
|
|
<% end %>
|
|
|
|
<!-- Event Badge -->
|
|
<% if event.featured? %>
|
|
<div class="absolute top-4 left-4">
|
|
<span class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-sm font-medium shadow-lg">
|
|
★ En vedette
|
|
</span>
|
|
</div>
|
|
<% end %>
|
|
|
|
<!-- Price Badge -->
|
|
<% if event.ticket_types.any? %>
|
|
<div class="absolute bottom-4 right-4">
|
|
<span class="bg-white/90 backdrop-blur-sm text-gray-900 px-3 py-1 rounded-full text-sm font-bold shadow-lg">
|
|
À partir de €<%= event.ticket_types.minimum(:price_cents).to_f / 100 %>
|
|
</span>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<!-- Event Info -->
|
|
<div class="p-6 text-center">
|
|
<h3 class="text-2xl lg:text-3xl font-bold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">
|
|
<%= event.name.upcase %>
|
|
</h3>
|
|
|
|
<div class="text-gray-600 space-y-1 mb-4">
|
|
<div class="flex items-center justify-center text-sm">
|
|
<i data-lucide="calendar" class="w-4 h-4 mr-2"></i>
|
|
<%= l(event.start_time, format: '%A %d %B • %H:%M') %>
|
|
</div>
|
|
<div class="flex items-center justify-center text-sm">
|
|
<i data-lucide="map-pin" class="w-4 h-4 mr-2"></i>
|
|
<%= event.venue_name %>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Event Description -->
|
|
<p class="text-gray-500 text-sm leading-relaxed max-w-sm mx-auto">
|
|
<%= truncate(event.description, length: 100) %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<!-- More Events CTA -->
|
|
<div class="text-center">
|
|
<%= link_to events_path,
|
|
class: "inline-flex items-center bg-gray-900 text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-800 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" do %>
|
|
Plus d'événements à Paris
|
|
<i data-lucide="arrow-right" class="w-5 h-5 ml-2"></i>
|
|
<% end %>
|
|
</div>
|
|
<% else %>
|
|
<!-- Empty State -->
|
|
<div class="text-center py-16">
|
|
<div class="w-24 h-24 bg-gradient-to-br from-purple-100 to-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<i data-lucide="calendar-x" class="w-12 h-12 text-purple-600"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-4">Aucun événement disponible</h3>
|
|
<p class="text-gray-600 mb-8 max-w-md mx-auto">Les événements arrivent bientôt. Inscrivez-vous pour être notifié des prochaines sorties!</p>
|
|
<%= link_to new_user_registration_path, class: "bg-purple-600 text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-purple-700 transition-all duration-200 inline-flex items-center justify-center shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" do %>
|
|
<i data-lucide="bell" class="w-5 h-5 mr-2"></i>
|
|
Être notifié
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Site Metrics Section -->
|
|
<section class="py-16 bg-gray-50">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">
|
|
LA PLATEFORME DE RÉFÉRENCE
|
|
</h2>
|
|
<p class="text-xl text-gray-600">
|
|
Rejoignez des milliers de professionnels qui font confiance à Aperonight
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center">
|
|
<div class="group transform transition-all duration-300 hover:scale-105">
|
|
<div class="text-4xl lg:text-5xl font-bold text-purple-600 mb-2 transition-colors group-hover:text-purple-700">
|
|
<%= @total_events %>+
|
|
</div>
|
|
<div class="text-gray-600 font-medium">Événements organisés</div>
|
|
</div>
|
|
|
|
<div class="group transform transition-all duration-300 hover:scale-105">
|
|
<div class="text-4xl lg:text-5xl font-bold text-purple-600 mb-2 transition-colors group-hover:text-purple-700">
|
|
<%= (@total_users / 100.0).round(1) %>k+
|
|
</div>
|
|
<div class="text-gray-600 font-medium">Membres actifs</div>
|
|
</div>
|
|
|
|
<div class="group transform transition-all duration-300 hover:scale-105">
|
|
<div class="text-4xl lg:text-5xl font-bold text-purple-600 mb-2 transition-colors group-hover:text-purple-700">
|
|
<%= @events_this_month %>
|
|
</div>
|
|
<div class="text-gray-600 font-medium">Ce mois-ci</div>
|
|
</div>
|
|
|
|
<div class="group transform transition-all duration-300 hover:scale-105">
|
|
<div class="text-4xl lg:text-5xl font-bold text-purple-600 mb-2 transition-colors group-hover:text-purple-700">
|
|
98%
|
|
</div>
|
|
<div class="text-gray-600 font-medium">Satisfaction</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="py-16 bg-gray-900 relative overflow-hidden">
|
|
<!-- Background decoration -->
|
|
<div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900"></div>
|
|
|
|
<div class="relative container mx-auto px-4 text-center">
|
|
<h2 class="text-3xl lg:text-4xl font-bold text-white mb-6">
|
|
Prêt à découvrir votre prochain événement ?
|
|
</h2>
|
|
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
|
Rejoignez la communauté Aperonight et accédez aux meilleurs événements après-travail de Paris.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center max-w-lg mx-auto">
|
|
<%= link_to events_path,
|
|
class: "w-full sm:flex-1 bg-white text-gray-900 px-6 py-3 rounded-full font-semibold text-base hover:bg-gray-100 transition-all duration-200 inline-flex items-center justify-center shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" do %>
|
|
<i data-lucide="search" class="w-4 h-4 mr-2"></i>
|
|
Découvrir les événements
|
|
<% end %>
|
|
|
|
<% unless user_signed_in? %>
|
|
<%= link_to new_user_registration_path,
|
|
class: "w-full sm:flex-1 border-2 border-white text-white px-6 py-3 rounded-full font-semibold text-base hover:bg-white hover:text-gray-900 transition-all duration-200 inline-flex items-center justify-center transform hover:-translate-y-0.5" do %>
|
|
<i data-lucide="user-plus" class="w-4 h-4 mr-2"></i>
|
|
Créer mon compte
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|