Update all views to use new design system components and styling
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
kbe
@@ -1,28 +1,28 @@
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
|
||||
<!-- Simplified header -->
|
||||
<div class="my-6 sm:my-8">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Page Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-slate-100">Mon tableau de bord</h1>
|
||||
<p class="text-sm sm:text-base text-slate-600 dark:text-slate-400 mt-1">Gérez vos commandes et accédez à vos billets</p>
|
||||
<h1 class="text-3xl font-bold text-gray-900">Mon tableau de bord</h1>
|
||||
<p class="text-gray-600 mt-1">Gérez vos commandes et accédez à vos billets</p>
|
||||
</div>
|
||||
|
||||
<!-- Promoter Actions -->
|
||||
<% if current_user.promoter? %>
|
||||
<div class="flex flex-col xs:flex-row items-stretch xs:items-center gap-2">
|
||||
<%= link_to promoter_events_path, class: "inline-flex items-center justify-center px-3 py-2 sm:px-4 sm:py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors duration-200 text-sm" do %>
|
||||
<i data-lucide="calendar-plus" class="w-4 h-4 mr-1 sm:mr-2"></i>
|
||||
<span class="whitespace-nowrap">Mes Événements</span>
|
||||
<%= link_to promoter_events_path, class: "inline-flex items-center justify-center px-4 py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors duration-200" do %>
|
||||
<i data-lucide="calendar-plus" class="w-4 h-4 mr-2"></i>
|
||||
Mes Événements
|
||||
<% end %>
|
||||
<%= link_to new_promoter_event_path, class: "inline-flex items-center justify-center px-3 py-2 sm:px-4 sm:py-2 bg-black text-white font-medium rounded-lg hover:bg-gray-800 transition-colors duration-200 text-sm" do %>
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-1 sm:mr-2"></i>
|
||||
<span class="whitespace-nowrap">Créer un Événement</span>
|
||||
<%= link_to new_promoter_event_path, class: "inline-flex items-center justify-center px-4 py-2 bg-gray-900 text-white font-medium rounded-lg hover:bg-gray-800 transition-colors duration-200" do %>
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i>
|
||||
Créer un Événement
|
||||
<% end %>
|
||||
</div>
|
||||
<% else %>
|
||||
<%= link_to events_path, class: "inline-flex items-center justify-center px-3 py-2 sm:px-4 sm:py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors duration-200 text-sm" do %>
|
||||
<i data-lucide="search" class="w-4 h-4 mr-1 sm:mr-2"></i>
|
||||
<span class="whitespace-nowrap">Découvrir des Événements</span>
|
||||
<%= link_to events_path, class: "inline-flex items-center justify-center px-4 py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition-colors duration-200" do %>
|
||||
<i data-lucide="search" class="w-4 h-4 mr-2"></i>
|
||||
Découvrir des Événements
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
@@ -30,40 +30,34 @@
|
||||
|
||||
<!-- Draft orders needing payment -->
|
||||
<% if @draft_orders.any? %>
|
||||
<div class="card mb-6 sm:mb-8 border-orange-200 bg-orange-50">
|
||||
<div class="card-header bg-orange-100 rounded-lg">
|
||||
<div class="mx-4 py-3 sm:py-4">
|
||||
<h2 class="text-lg sm:text-2xl font-bold text-orange-900 flex items-center">
|
||||
<svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
Commandes en Attente de Paiement
|
||||
</h2>
|
||||
<p class="text-sm sm:text-base text-orange-700 mt-1">Vous avez des commandes qui nécessitent un paiement</p>
|
||||
</div>
|
||||
<div class="bg-orange-50 border border-orange-200 rounded-2xl shadow-lg mb-8">
|
||||
<div class="bg-orange-100 rounded-t-2xl p-4 sm:p-6">
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-orange-900 flex items-center">
|
||||
<i data-lucide="alert-triangle" class="w-5 h-5 sm:w-6 sm:h-6 mr-2 text-orange-600"></i>
|
||||
Commandes en Attente de Paiement
|
||||
</h2>
|
||||
<p class="text-gray-700 mt-1">Vous avez des commandes qui nécessitent un paiement</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="p-4 sm:p-6">
|
||||
<div class="space-y-4">
|
||||
<% @draft_orders.each do |order| %>
|
||||
<div class="bg-white rounded-lg p-3 sm:p-4 border border-orange-200">
|
||||
<div class="bg-white rounded-xl p-4 border border-orange-200">
|
||||
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-3">
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 text-sm sm:text-base"><%= order.event.name %></h3>
|
||||
<p class="text-xs sm:text-sm text-gray-600 mt-1">
|
||||
<svg class="w-3 h-3 sm:w-4 sm:h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<h3 class="font-semibold text-gray-900 text-base sm:text-lg"><%= order.event.name %></h3>
|
||||
<p class="text-sm text-gray-600 mt-1 flex items-center">
|
||||
<i data-lucide="calendar" class="w-4 h-4 mr-2"></i>
|
||||
<%= order.event.start_time.strftime("%d %B %Y à %H:%M") %>
|
||||
</p>
|
||||
</div>
|
||||
<span class="text-xs sm:text-sm font-medium text-orange-600 bg-orange-100 px-2 py-1 rounded-full whitespace-nowrap">
|
||||
<span class="text-sm font-medium text-orange-600 bg-orange-100 px-3 py-1 rounded-full whitespace-nowrap">
|
||||
Order #<%= order.id %>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2 mb-4">
|
||||
<% order.tickets.each do |ticket| %>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between text-xs sm:text-sm bg-gray-50 rounded p-2 gap-2">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between text-sm bg-gray-50 rounded-lg p-3 gap-2">
|
||||
<div>
|
||||
<span class="font-medium"><%= ticket.ticket_type.name %></span>
|
||||
<span class="text-gray-600">- <%= ticket.first_name %> <%= ticket.last_name %></span>
|
||||
@@ -76,7 +70,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
|
||||
<div class="text-xs sm:text-sm text-gray-600">
|
||||
<div class="text-sm text-gray-600">
|
||||
<div class="mb-1 sm:mb-0">
|
||||
Tentatives: <%= order.payment_attempts %>/3
|
||||
</div>
|
||||
@@ -88,7 +82,8 @@
|
||||
</div>
|
||||
|
||||
<%= link_to retry_payment_order_path(order), method: :post,
|
||||
class: "inline-flex items-center px-3 py-2 sm:px-4 sm:py-2 bg-orange-600 text-white text-xs sm:text-sm font-medium rounded-lg hover:bg-orange-700 transition-colors duration-200 whitespace-nowrap" do %>
|
||||
class: "inline-flex items-center px-4 py-2 bg-orange-600 text-white text-sm font-medium rounded-lg hover:bg-orange-700 transition-colors duration-200 whitespace-nowrap" do %>
|
||||
<i data-lucide="credit-card" class="w-4 h-4 mr-2"></i>
|
||||
Reprendre le Paiement (€<%= order.total_amount_euros %>)
|
||||
<% end %>
|
||||
</div>
|
||||
@@ -100,78 +95,78 @@
|
||||
<% end %>
|
||||
|
||||
<!-- User's Orders Section -->
|
||||
<div class="card mb-6 sm:mb-8">
|
||||
<div class="card-header">
|
||||
<div class="bg-white rounded-2xl shadow-lg mb-8">
|
||||
<div class="border-b border-gray-100 p-4 sm:p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-slate-900 dark:text-slate-100">Mes Commandes</h2>
|
||||
<span class="text-xs sm:text-sm text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-700 px-2 py-1 sm:px-3 sm:py-1 rounded-full">
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-gray-900">Mes Commandes</h2>
|
||||
<span class="text-sm text-gray-600 bg-gray-100 px-3 py-1 rounded-full">
|
||||
<%= pluralize(@user_orders.count, 'commande') %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="p-4 sm:p-6">
|
||||
<% if @user_orders.any? %>
|
||||
<div class="space-y-4">
|
||||
<% @user_orders.each do |order| %>
|
||||
<div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-3 sm:p-4 hover:shadow-md transition-shadow">
|
||||
<div class="bg-gray-50 rounded-xl p-4 hover:shadow-md transition-shadow">
|
||||
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-3">
|
||||
<div class="flex-1">
|
||||
<div class="flex flex-wrap items-center gap-2 mb-2">
|
||||
<h3 class="font-semibold text-slate-900 dark:text-slate-100 text-sm sm:text-base"><%= order.event.name %></h3>
|
||||
<span class="text-xs px-2 py-1 rounded-full <%= order.status == 'paid' ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100' : order.status == 'completed' ? 'bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100' : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100' %>">
|
||||
<h3 class="font-semibold text-gray-900 text-base sm:text-lg"><%= order.event.name %></h3>
|
||||
<span class="text-xs px-2 py-1 rounded-full <%= order.status == 'paid' ? 'bg-green-100 text-green-800' : order.status == 'completed' ? 'bg-blue-100 text-blue-800' : 'bg-yellow-100 text-yellow-800' %>">
|
||||
<%= order.status.humanize %>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs sm:text-sm text-slate-600 dark:text-slate-400 mb-2">
|
||||
<div class="flex flex-wrap items-center gap-3 text-sm text-gray-600 mb-2">
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="calendar" class="w-3 h-3 sm:w-4 sm:h-4 mr-1"></i>
|
||||
<i data-lucide="calendar" class="w-4 h-4 mr-2"></i>
|
||||
<%= order.event.start_time.strftime("%d %B %Y à %H:%M") %>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="map-pin" class="w-3 h-3 sm:w-4 sm:h-4 mr-1"></i>
|
||||
<i data-lucide="map-pin" class="w-4 h-4 mr-2"></i>
|
||||
<%= order.event.venue_name %>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="shopping-bag" class="w-3 h-3 sm:w-4 sm:h-4 mr-1"></i>
|
||||
<i data-lucide="shopping-bag" class="w-4 h-4 mr-2"></i>
|
||||
<%= pluralize(order.tickets.count, 'billet') %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-xs sm:text-sm text-slate-500 dark:text-slate-400 mt-2">
|
||||
<div class="text-sm text-gray-500 mt-2">
|
||||
Order #<%= order.id %> • <%= order.created_at.strftime("%m/%d/%Y") %> • €<%= order.total_amount_euros %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<%= link_to order_path(order),
|
||||
class: "inline-flex items-center px-3 py-2 bg-purple-600 hover:bg-purple-700 text-white text-xs sm:text-sm font-medium rounded-lg transition-colors duration-200 whitespace-nowrap" do %>
|
||||
<i data-lucide="eye" class="w-3 h-3 sm:w-4 sm:h-4 mr-1"></i>
|
||||
class: "inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors duration-200 whitespace-nowrap" do %>
|
||||
<i data-lucide="eye" class="w-4 h-4 mr-2"></i>
|
||||
Voir les Détails
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick tickets preview -->
|
||||
<div class="border-t border-slate-200 dark:border-slate-600 pt-3">
|
||||
<div class="border-t border-gray-200 pt-3">
|
||||
<div class="grid gap-2">
|
||||
<% order.tickets.limit(3).each do |ticket| %>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between text-xs sm:text-sm bg-slate-50 dark:bg-slate-700 rounded p-2 gap-2">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between text-sm bg-white rounded-lg p-3 gap-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
|
||||
<span class="font-medium"><%= ticket.ticket_type.name %></span>
|
||||
<span class="text-slate-500 text-xs">- <%= ticket.first_name %> <%= ticket.last_name %></span>
|
||||
<span class="text-gray-500 text-sm">- <%= ticket.first_name %> <%= ticket.last_name %></span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<%= link_to ticket_download_path(ticket.qr_code),
|
||||
class: "text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-200" do %>
|
||||
<i data-lucide="download" class="w-3 h-3"></i>
|
||||
class: "text-purple-600 hover:text-purple-800" do %>
|
||||
<i data-lucide="download" class="w-4 h-4"></i>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if order.tickets.count > 3 %>
|
||||
<div class="text-xs text-slate-500 text-center">
|
||||
<div class="text-xs text-gray-500 text-center">
|
||||
et <%= pluralize(order.tickets.count - 3, 'autre billet') %>
|
||||
</div>
|
||||
<% end %>
|
||||
@@ -182,19 +177,19 @@
|
||||
</div>
|
||||
|
||||
<% if @user_orders.count >= 10 %>
|
||||
<div class="mt-4 sm:mt-6 text-center">
|
||||
<%= link_to "Voir Toutes Mes Commandes", orders_path, class: "text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium transition-colors duration-200 text-sm" %>
|
||||
<div class="mt-6 text-center">
|
||||
<%= link_to "Voir Toutes Mes Commandes", orders_path, class: "text-purple-600 hover:text-purple-800 font-medium transition-colors duration-200" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="text-center py-8 sm:py-12">
|
||||
<div class="w-12 h-12 sm:w-16 sm:h-16 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
|
||||
<i data-lucide="shopping-bag" class="w-6 h-6 sm:w-8 sm:h-8 text-slate-400"></i>
|
||||
<div class="text-center py-12">
|
||||
<div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<i data-lucide="shopping-bag" class="w-8 h-8 text-gray-400"></i>
|
||||
</div>
|
||||
<h3 class="text-base sm:text-lg font-medium text-slate-900 dark:text-slate-100 mb-1 sm:mb-2">Aucune Commande</h3>
|
||||
<p class="text-sm sm:text-base text-slate-600 dark:text-slate-400 mb-4 sm:mb-6">Vous n'avez pas encore passé de commandes.</p>
|
||||
<%= link_to events_path, class: "inline-flex items-center px-3 py-2 sm:px-4 sm:py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors duration-200 text-sm" do %>
|
||||
<i data-lucide="search" class="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2"></i>
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">Aucune Commande</h3>
|
||||
<p class="text-gray-600 mb-6">Vous n'avez pas encore passé de commandes.</p>
|
||||
<%= link_to events_path, class: "inline-flex items-center px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors duration-200" do %>
|
||||
<i data-lucide="search" class="w-4 h-4 mr-2"></i>
|
||||
Découvrir des Événements
|
||||
<% end %>
|
||||
</div>
|
||||
@@ -202,35 +197,35 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Events Preview - Simplified -->
|
||||
<!-- Quick Events Preview -->
|
||||
<% if @user_orders.any? %>
|
||||
<div class="my-6 sm:my-8 card">
|
||||
<div class="card-header">
|
||||
<div class="bg-white rounded-2xl shadow-lg">
|
||||
<div class="border-b border-gray-100 p-4 sm:p-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||
<h2 class="text-lg sm:text-xl font-bold text-slate-900 dark:text-slate-100">Découvrir d'autres événements</h2>
|
||||
<%= link_to events_path, class: "text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 font-medium text-sm transition-colors duration-200 whitespace-nowrap" do %>
|
||||
<h2 class="text-lg sm:text-xl font-bold text-gray-900">Découvrir d'autres événements</h2>
|
||||
<%= link_to events_path, class: "text-purple-600 hover:text-purple-800 font-medium transition-colors duration-200 whitespace-nowrap" do %>
|
||||
Voir tout →
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="p-4 sm:p-6">
|
||||
<% if @upcoming_preview_events.any? %>
|
||||
<div class="grid gap-3 sm:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<% @upcoming_preview_events.each do |event| %>
|
||||
<div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-3 sm:p-4 hover:shadow-md transition-shadow">
|
||||
<h4 class="font-medium text-slate-900 dark:text-slate-100 mb-2 text-sm sm:text-base"><%= event.name %></h4>
|
||||
<div class="text-xs sm:text-sm text-slate-600 dark:text-slate-400 space-y-1">
|
||||
<div class="bg-gray-50 rounded-xl p-4 hover:shadow-md transition-shadow">
|
||||
<h4 class="font-medium text-gray-900 mb-2 text-base"><%= event.name %></h4>
|
||||
<div class="text-sm text-gray-600 space-y-1">
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="calendar" class="w-3 h-3 mr-1"></i>
|
||||
<i data-lucide="calendar" class="w-4 h-4 mr-2"></i>
|
||||
<%= event.start_time.strftime("%d %B") %>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="map-pin" class="w-3 h-3 mr-1"></i>
|
||||
<i data-lucide="map-pin" class="w-4 h-4 mr-2"></i>
|
||||
<%= event.venue_name %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 sm:mt-3">
|
||||
<%= link_to event_path(event.slug, event), class: "text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 text-xs sm:text-sm font-medium" do %>
|
||||
<div class="mt-3">
|
||||
<%= link_to event_path(event.slug, event), class: "text-purple-600 hover:text-purple-800 text-sm font-medium" do %>
|
||||
Voir l'Événement →
|
||||
<% end %>
|
||||
</div>
|
||||
@@ -238,9 +233,9 @@
|
||||
<% end %>
|
||||
</div>
|
||||
<% else %>
|
||||
<p class="text-slate-600 dark:text-slate-400 text-sm">Aucun événement à venir pour le moment.</p>
|
||||
<p class="text-gray-600">Aucun événement à venir pour le moment.</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,61 +1,62 @@
|
||||
<% content_for :title, "Aperonight - Découvrez les meilleurs événements après-travail" %>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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" do %>
|
||||
<i data-lucide="calendar" class="w-4 h-4 mr-2"></i>
|
||||
Voir tous les événements
|
||||
<% end %>
|
||||
<!-- 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 %>
|
||||
<% 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 %>
|
||||
</div>
|
||||
<% 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>
|
||||
<!-- 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>
|
||||
<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="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>
|
||||
@@ -82,60 +83,63 @@
|
||||
<% 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">
|
||||
<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 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 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">
|
||||
★ En vedette
|
||||
</span>
|
||||
</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">
|
||||
À 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>
|
||||
<!-- 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 Description -->
|
||||
<p class="text-gray-500 text-sm leading-relaxed max-w-sm mx-auto">
|
||||
<%= truncate(event.description, length: 100) %>
|
||||
</p>
|
||||
<!-- 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>
|
||||
@@ -145,19 +149,20 @@
|
||||
<!-- 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 %>
|
||||
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 %>
|
||||
<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>
|
||||
<!-- 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-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 %>
|
||||
<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 %>
|
||||
@@ -179,29 +184,29 @@
|
||||
</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">
|
||||
<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">
|
||||
<div class="text-4xl lg:text-5xl font-bold text-purple-600 mb-2">
|
||||
<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">
|
||||
<div class="text-4xl lg:text-5xl font-bold text-purple-600 mb-2">
|
||||
<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">
|
||||
<div class="text-4xl lg:text-5xl font-bold text-purple-600 mb-2">
|
||||
<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>
|
||||
@@ -211,8 +216,11 @@
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-16 bg-gray-900">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<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>
|
||||
@@ -222,14 +230,14 @@
|
||||
|
||||
<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 %>
|
||||
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" do %>
|
||||
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 %>
|
||||
@@ -238,26 +246,3 @@
|
||||
</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