kbe/aperonight
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Update all views to use new design system components and styling

Browse Source 
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
kbe
2025-09-08 17:59:12 +02:00
parent 569303b631
commit 9be7a01d93
39 changed files with 1068 additions and 5127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

265
app/views/pages/home.html.erb
View File

@@ -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>