Restyle of the homepage
This commit is contained in:
kbe
@@ -1,153 +1,263 @@
|
||||
<% content_for :title, "Aperonight - Découvrez des événements après-travail de luxe" %>
|
||||
<% content_for :title, "Aperonight - Découvrez les meilleurs événements après-travail" %>
|
||||
|
||||
<!-- 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>
|
||||
<!-- Hero Section inspired by Shotgun -->
|
||||
<section class="hero-landing">
|
||||
<div class="hero-gradient my-8">
|
||||
<div class="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">
|
||||
<h1 class="text-4xl lg:text-6xl font-bold text-white 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>
|
||||
|
||||
<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>
|
||||
<!-- 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" do %>
|
||||
<i data-lucide="calendar" class="w-4 h-4 mr-2"></i>
|
||||
Voir tous les événements
|
||||
<% end %>
|
||||
|
||||
<%= 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_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>
|
||||
<% 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 %>
|
||||
<% 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 -->
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero Visual -->
|
||||
<div class="relative">
|
||||
<div class="bg-gray-800 rounded-3xl p-8 shadow-2xl">
|
||||
<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>
|
||||
<div class="featured-event-meta-item">
|
||||
<i data-lucide="map-pin"></i>
|
||||
<%= event.venue_name %>, <%= event.venue_address %>
|
||||
<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 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">Pourquoi choisir Aperonight ?</h2>
|
||||
<p class="section-description">Nous sélectionnons des expériences premium qui connectent les professionnels et créent des relations durables.</p>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="crown"></i>
|
||||
</div>
|
||||
<h3 class="feature-title">Sélection Premium</h3>
|
||||
<p class="feature-description">Chaque événement est soigneusement sélectionné et conçu pour offrir une valeur exceptionnelle et des opportunités de réseautage.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="shield-check"></i>
|
||||
</div>
|
||||
<h3 class="feature-title">Sécurisé et Fiable</h3>
|
||||
<p class="feature-description">Paiements sécurisés, lieux vérifiés et communauté de confiance avec couverture d'assurance complète.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="users-2"></i>
|
||||
</div>
|
||||
<h3 class="feature-title">Réseautage de Qualité</h3>
|
||||
<p class="feature-description">Connectez-vous avec des professionnels vérifiés, des entrepreneurs et des leaders de l'industrie dans des environnements intimes.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="zap"></i>
|
||||
</div>
|
||||
<h3 class="feature-title">Réservation Instantanée</h3>
|
||||
<p class="feature-description">Processus de réservation fluide avec confirmation instantanée et gestion d'événement facile.</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">Événements Mensuels</div>
|
||||
<!-- 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">
|
||||
<%= link_to event_path(event.slug, event), class: "block" do %>
|
||||
<!-- Event Image -->
|
||||
<div class="relative overflow-hidden rounded-2xl mb-6 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">
|
||||
★ 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">
|
||||
À partir de €<%= event.ticket_types.minimum(:price_cents).to_f / 100 %>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<!-- Event Info -->
|
||||
<div class="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>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</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">Membres Actifs</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-colors" do %>
|
||||
Plus d'événements à Paris
|
||||
<i data-lucide="arrow-right" class="w-5 h-5 ml-2"></i>
|
||||
<% end %>
|
||||
</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">Lieux Partenaires</div>
|
||||
<% else %>
|
||||
<div class="text-center py-12">
|
||||
<div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<i data-lucide="calendar-x" class="w-12 h-12 text-gray-400"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-4">Aucun événement disponible</h3>
|
||||
<p class="text-gray-600 mb-6">Les événements arrivent bientôt. Inscrivez-vous pour être notifié!</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-colors inline-flex items-center justify-center" do %>
|
||||
<i data-lucide="bell" class="w-5 h-5 mr-2"></i>
|
||||
Être notifié
|
||||
<% end %>
|
||||
</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">Taux de Satisfaction</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">
|
||||
<div class="text-4xl lg:text-5xl font-bold text-purple-600 mb-2">
|
||||
<%= @total_events %>+
|
||||
</div>
|
||||
<div class="text-gray-600 font-medium">Événements organisés</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div class="text-4xl lg:text-5xl font-bold text-purple-600 mb-2">
|
||||
<%= (@total_users / 100.0).round(1) %>k+
|
||||
</div>
|
||||
<div class="text-gray-600 font-medium">Membres actifs</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div class="text-4xl lg:text-5xl font-bold text-purple-600 mb-2">
|
||||
<%= @events_this_month %>
|
||||
</div>
|
||||
<div class="text-gray-600 font-medium">Ce mois-ci</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div class="text-4xl lg:text-5xl font-bold text-purple-600 mb-2">
|
||||
98%
|
||||
</div>
|
||||
<div class="text-gray-600 font-medium">Satisfaction</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2>Prêt à rejoindre la communauté ?</h2>
|
||||
<p>Commencez à découvrir des événements incroyables et connectez-vous avec des professionnels partageant les mêmes idées dans votre ville.</p>
|
||||
<div style="display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap;">
|
||||
<%= link_to new_user_registration_path, class: "btn btn-lg bg-white border-2 border-white text-blue-600 hover:bg-blue-400 hover:text-white" do %>
|
||||
<i data-lucide="user-plus"></i>
|
||||
Rejoindre gratuitement
|
||||
<section class="py-16 bg-gray-900">
|
||||
<div class="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" 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" do %>
|
||||
<i data-lucide="user-plus" class="w-4 h-4 mr-2"></i>
|
||||
Créer mon compte
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.hero-landing {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-landing::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-gradient {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user