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

feat: Add metrics on homepage

Browse Source
This commit is contained in:
kbe
2025-08-17 23:39:24 +02:00
parent 17e6711299
commit ba3f36a5e8
5 changed files with 200 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,9 +3,9 @@
<div class="absolute inset-0 bg-black bg-opacity-40"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
Découvrez la nuit parisienne
<span class="block text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">
comme jamais
Découvrez les afterworks et soirée
<span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">
à Paris
</span>
</h1>
<p class="text-xl md:text-2xl text-gray-200 mb-8 max-w-3xl mx-auto leading-relaxed">
@@ -18,6 +18,101 @@
</div>
</section>
<!-- Metrics -->
<section class="bg-gradient-to-br from-gray-900 via-gray-800 to-black py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold text-white mb-4">
Des chiffres qui parlent
</h2>
<p class="text-xl text-gray-300 max-w-2xl mx-auto">
La plateforme préférée des Parisiens pour vivre la nuit
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
<!-- Total Events -->
<div class="group relative">
<div class="relative overflow-hidden rounded-2xl bg-gray-800/60 backdrop-blur-sm border border-gray-700/50 hover:border-purple-500/50 transition-all duration-300 p-8">
<div class="absolute inset-0 bg-gradient-to-br from-purple-600/20 to-indigo-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative">
<div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-400 via-indigo-400 to-pink-400 bg-clip-text text-transparent mb-3">
<span class="counter" data-target="2473">0</span>
</div>
<p class="text-gray-200 font-mono uppercase tracking-widest text-sm font-medium">
Événements organisés
</p>
<div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
</div>
</div>
</div>
<!-- Total Users -->
<div class="group relative">
<div class="relative overflow-hidden rounded-2xl bg-gray-800/60 backdrop-blur-sm border border-gray-700/50 hover:border-purple-500/50 transition-all duration-300 p-8">
<div class="absolute inset-0 bg-gradient-to-br from-purple-600/20 to-indigo-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative">
<div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-400 via-indigo-400 to-pink-400 bg-clip-text text-transparent mb-3">
<span class="counter" data-target="15420">0</span>+
</div>
<p class="text-gray-200 font-mono uppercase tracking-widest text-sm font-medium">
Membres actifs
</p>
<div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
</div>
</div>
</div>
<!-- Average Rating -->
<div class="group relative">
<div class="relative overflow-hidden rounded-2xl bg-gray-800/60 backdrop-blur-sm border border-gray-700/50 hover:border-purple-500/50 transition-all duration-300 p-8">
<div class="absolute inset-0 bg-gradient-to-br from-purple-600/20 to-indigo-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative">
<div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-400 via-indigo-400 to-pink-400 bg-clip-text text-transparent mb-3">
<span class="counter" data-target="4.8" data-decimal="true">0</span>/5
</div>
<p class="text-gray-200 font-mono uppercase tracking-widest text-sm font-medium">
Note moyenne des soirées
</p>
<div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
</div>
</div>
</div>
</div>
<!-- Additional Stats Row -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12">
<div class="text-center">
<div class="text-3xl font-bold text-purple-300">
<span class="counter" data-target="89">0</span>%
</div>
<p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Taux de remplissage</p>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-purple-300">
<span class="counter" data-target="12">0</span>
</div>
<p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Arrondissements</p>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-purple-300">
<span class="counter" data-target="156">0</span>
</div>
<p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Établissements partenaires</p>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-purple-300">
<span class="counter" data-target="98">0</span>%
</div>
<p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Satisfaction client</p>
</div>
</div>
</div>
</section>
<!-- Quick Search Section -->
<section id="search" class="bg-gray-900 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">