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

New light theme

Browse Source
This commit is contained in:
kbe
2025-08-23 21:28:35 +02:00
parent 71b5d43e89
commit 5454e23220
14 changed files with 612 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
app/assets/stylesheets/theme.css Normal file
View File

@@ -0,0 +1,161 @@
/* Theme Rules from docs/theme-rules.md - Light Theme Only */
/* Custom properties for the design system */
:root {
/* Primary - Purple gradient system */
--color-primary-50: #faf5ff;
--color-primary-100: #f3e8ff;
--color-primary-200: #e9d5ff;
--color-primary-300: #d8b4fe;
--color-primary-400: #c084fc;
--color-primary-500: #a855f7;
--color-primary-600: #9333ea;
--color-primary-700: #7e22ce;
--color-primary-800: #6b21a8;
--color-primary-900: #581c87;
/* Accent - Pink gradient */
--color-accent-400: #f472b6;
--color-accent-500: #ec4899;
--color-accent-600: #db2777;
/* Neutral - Slate system */
--color-neutral-50: #f8fafc;
--color-neutral-100: #f1f5f9;
--color-neutral-200: #e2e8f0;
--color-neutral-300: #cbd5e1;
--color-neutral-400: #94a3b8;
--color-neutral-500: #64748b;
--color-neutral-600: #475569;
--color-neutral-700: #334155;
--color-neutral-800: #1e293b;
--color-neutral-900: #0f172a;
/* Font families */
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* Spacing scale */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
}
/* Button components */
.btn-primary {
@apply bg-gradient-to-r from-purple-600 to-pink-600 text-white font-medium py-2 px-4 rounded-lg shadow-sm hover:shadow-md transition-all duration-200;
}
.btn-secondary {
@apply bg-white text-purple-600 border border-purple-200 font-medium py-2 px-4 rounded-lg hover:bg-purple-50 transition-colors duration-200;
}
.btn-destructive {
@apply bg-red-600 text-white font-medium py-2 px-4 rounded-lg shadow-sm hover:bg-red-700 transition-colors duration-200;
}
/* Card components */
.card {
@apply bg-white rounded-lg shadow-sm border border-neutral-200 p-6 hover:shadow-md transition-shadow duration-200;
}
.card-header {
@apply pb-4 border-b border-neutral-200 mb-4;
}
.card-body {
@apply space-y-4;
}
/* Form components */
.form-input {
@apply block w-full rounded-md border-neutral-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm;
}
.form-label {
@apply block text-sm font-medium text-neutral-700 mb-1;
}
.form-error {
@apply text-sm text-red-600 mt-1;
}
/* Navigation */
.nav-link {
@apply text-neutral-600 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
}
.nav-link-active {
@apply text-purple-600 bg-purple-50;
}
/* Layout utilities */
.container {
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}
.grid-responsive {
@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}
.grid-cards {
@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
}
/* Animation utilities */
.hover-lift {
@apply transition-transform duration-200 hover:-translate-y-1;
}
.hover-glow {
@apply transition-all duration-200 hover:shadow-lg hover:shadow-purple-500/25;
}
.focus-ring {
@apply focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2;
}
.transition-fast {
@apply transition-all duration-150 ease-in-out;
}
.transition-normal {
@apply transition-all duration-200 ease-in-out;
}
.transition-slow {
@apply transition-all duration-300 ease-in-out;
}
/* State utilities */
.disabled {
@apply opacity-50 cursor-not-allowed;
}
.animate-pulse-subtle {
@apply animate-pulse;
animation-duration: 3s;
}
.fade-in {
@apply animate-in fade-in-0 duration-500;
}
/* Accessibility utilities */
.focus-visible {
@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2;
}
.text-primary {
@apply text-neutral-900;
}
.text-secondary {
@apply text-neutral-600;
}

58
app/views/components/_footer.html.erb
View File

@@ -1,23 +1,23 @@
<footer class="py-10 bg-gray-900 text-white border-t-1 border-solid border-color-gray"> <footer class="py-10 bg-neutral-100 text-neutral-600 border-t border-neutral-200">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Column 1: About --> <!-- Column 1: About -->
<div class="space-y-4"> <div class="space-y-4">
<h3 class="text-lg font-semibold text-indigo-400">À propos</h3> <h3 class="text-lg font-semibold text-purple-500">À propos</h3>
<p class="text-sm text-gray-300 leading-relaxed"> <p class="text-sm text-neutral-600 leading-relaxed">
Aperonight est la plateforme qui connecte les amateurs de soirées aux meilleurs événements de leur ville. Aperonight est la plateforme qui connecte les amateurs de soirées aux meilleurs événements de leur ville.
</p> </p>
<div class="flex space-x-4"> <div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors"> <a href="#" class="text-neutral-500 hover:text-purple-500 transition-colors">
<span class="sr-only">Facebook</span> <span class="sr-only">Facebook</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"/> <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 20.128 22 15.991 22 12z" clip-rule="evenodd"/>
</svg> </svg>
</a> </a>
<a href="#" class="text-gray-400 hover:text-white transition-colors"> <a href="#" class="text-neutral-500 hover:text-purple-500 transition-colors">
<span class="sr-only">Instagram</span> <span class="sr-only">Instagram</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.024.06 1.378.06 3.808s-.012 2.784-.06 3.808c-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.024.048-1.378.06-3.808.06s-2.784-.012-3.808-.06c-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.048-1.024-.06-1.378-.06-3.808s.012-2.784.06-3.808c.049-1.064.218-1.791.465-2.427A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802c-.468 0-.514.043-.514.043v2.378h2.575c0-2.378 0-2.378-.514-2.378zm-2.189 2.378v-2.378c0-.468.043-.514.043-.514h-2.378v2.892h2.335zm1.097 1.097c-.468 0-.514.043-.514.043v2.335h2.892v-2.892h-2.378c-.468 0-.514.043-.514.043v.514zm-1.097 1.097v-2.335c0-.468.043-.514.043-.514h-2.378v2.892h2.335z" clip-rule="evenodd"/> <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.024.06 1.378.06 3.808s-.012 2.784-.06 3.808c-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.024.048-1.378.06-3.808.06s-2.784-.012-3.808-.06c-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.048-1.024-.06-1.378-.06-3.808s.012-2.784.06-3.808c.049-1.064.218-1.791.465-2.427A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63z" clip-rule="evenodd"/>
</svg> </svg>
</a> </a>
</div> </div>
@@ -25,56 +25,56 @@
<!-- Column 2: Quick Links --> <!-- Column 2: Quick Links -->
<div class="space-y-4"> <div class="space-y-4">
<h3 class="text-lg font-semibold text-indigo-400">Liens rapides</h3> <h3 class="text-lg font-semibold text-purple-500">Liens rapides</h3>
<ul class="space-y-2 text-sm"> <ul class="space-y-2 text-sm">
<li><%= link_to "Accueil", "/", class: "text-gray-300 hover:text-white transition-colors" %></li> <li><%= link_to "Accueil", "/", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
<li><%= link_to "Événements", "/events", class: "text-gray-300 hover:text-white transition-colors" %></li> <li><%= link_to "Événements", "/events", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
<li><%= link_to "Organisateurs", "/organizers", class: "text-gray-300 hover:text-white transition-colors" %></li> <li><%= link_to "Organisateurs", "/organizers", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
<li><%= link_to "Support", "/support", class: "text-gray-300 hover:text-white transition-colors" %></li> <li><%= link_to "Support", "/support", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
</ul> </ul>
</div> </div>
<!-- Column 3: Legal --> <!-- Column 3: Legal -->
<div class="space-y-4"> <div class="space-y-4">
<h3 class="text-lg font-semibold text-indigo-400">Légal</h3> <h3 class="text-lg font-semibold text-purple-500">Légal</h3>
<ul class="space-y-2 text-sm"> <ul class="space-y-2 text-sm">
<li><%= link_to "Conditions d'utilisation", "/terms", class: "text-gray-300 hover:text-white transition-colors" %></li> <li><%= link_to "Conditions d'utilisation", "/terms", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
<li><%= link_to "Politique de confidentialité", "/privacy", class: "text-gray-300 hover:text-white transition-colors" %></li> <li><%= link_to "Politique de confidentialité", "/privacy", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
<li><%= link_to "CGV", "/cgv", class: "text-gray-300 hover:text-white transition-colors" %></li> <li><%= link_to "CGV", "/cgv", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
<li><%= link_to "Mentions légales", "/legal", class: "text-gray-300 hover:text-white transition-colors" %></li> <li><%= link_to "Mentions légales", "/legal", class: "text-neutral-600 hover:text-purple-500 transition-colors" %></li>
</ul> </ul>
</div> </div>
<!-- Column 4: Contact --> <!-- Column 4: Contact -->
<div class="space-y-4"> <div class="space-y-4">
<h3 class="text-lg font-semibold text-indigo-400">Contact</h3> <h3 class="text-lg font-semibold text-purple-500">Contact</h3>
<address class="not-italic text-sm text-gray-300 space-y-2"> <address class="not-italic text-sm text-neutral-600 space-y-2">
<p> <p>
<span class="block font-medium">Email:</span> <span class="block font-medium">Email:</span>
<a href="mailto:hello@aperonight.com" class="text-indigo-400 hover:text-indigo-300 transition-colors"> <a href="mailto:hello@aperonight.com" class="text-purple-500 hover:text-purple-400 transition-colors">
hello@aperonight.com hello@aperonight.com
</a> </a>
</p> </p>
<p> <p>
<span class="block font-medium">Support:</span> <span class="block font-medium">Support:</span>
<a href="mailto:support@aperonight.com" class="text-indigo-400 hover:text-indigo-300 transition-colors"> <a href="mailto:support@aperonight.com" class="text-purple-500 hover:text-purple-400 transition-colors">
support@aperonight.com support@aperonight.com
</a> </a>
</p> </p>
</address> </address>
<p class="text-xs text-gray-400"> <p class="text-xs text-neutral-500">
Réponse sous 24h en semaine Réponse sous 24h en semaine
</p> </p>
</div> </div>
</div> </div>
<!-- Bottom Bar --> <!-- Bottom Bar -->
<div class="mt-12 pt-8 border-t border-gray-800"> <div class="mt-12 pt-8 border-t border-neutral-200">
<div class="flex flex-col md:flex-row justify-between items-center"> <div class="flex flex-col md:flex-row justify-between items-center">
<p class="text-sm text-gray-400"> <p class="text-sm text-neutral-500">
© <%= Time.current.year %> Aperonight. Tous droits réservés. © <%= Time.current.year %> Aperonight. Tous droits réservés.
</p> </p>
<p class="text-xs text-gray-500 mt-2 md:mt-0"> <p class="text-xs text-neutral-400 mt-2 md:mt-0">
Fait avec 💜 pour la communauté Fait avec 💜 pour la communauté
</p> </p>
</div> </div>

71
app/views/components/_header.html.erb
View File

@@ -1,34 +1,17 @@
<nav x-data="{ open: false }" class="bg-black border-b border-gray-100"> <nav x-data="{ open: false }" class="border-b border-purple-700">
<!-- Primary Navigation Menu --> <!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16"> <div class="flex justify-between h-16">
<div class="flex"> <div class="flex">
<!-- Logo --> <!-- Logo -->
<div class="shrink-0 flex items-center"> <div class="shrink-0 flex items-center">
<%= link_to Rails.application.config.app_name, "/", class: "text-white text-xl font-bold" %> <%= link_to Rails.application.config.app_name, "/", class: "text-xl font-bold text-white" %>
</div> </div>
<!-- Navigation Links --> <!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex"> <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex items-center">
<!-- Parties --> <%= link_to "Soirées et afterworks", "#", class: "text-white hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
<%= link_to "Soirées et afterworks", "#", <%= link_to "Concerts", "#", class: "text-white hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
class: "inline-flex
items-center px-1 pt-1 border-b-2 border-transparent
text-sm font-medium leading-5 text-gray-300
hover:text-white hover:border-white focus:outline-none
focus:text-white focus:border-white transition
duration-150 ease-in-out" %>
<!-- /Parties -->
<!-- Concerts -->
<%= link_to "Concerts", "#",
class: "inline-flex
items-center px-1 pt-1 border-b-2 border-transparent
text-sm font-medium leading-5 text-gray-300
hover:text-white hover:border-white focus:outline-none
focus:text-white focus:border-white transition
duration-150 ease-in-out" %>
<!-- /Parties -->
</div> </div>
</div> </div>
@@ -38,7 +21,7 @@
<div class="hidden sm:flex sm:items-center sm:ms-6"> <div class="hidden sm:flex sm:items-center sm:ms-6">
<div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false"> <div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
<div @click="open = ! open"> <div @click="open = ! open">
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150"> <button class="bg-purple-700 text-white border border-purple-800 font-medium py-2 px-4 rounded-lg hover:bg-purple-800 transition-colors duration-200 focus-ring">
<div><%= current_user.email %></div> <div><%= current_user.email %></div>
<div class="ms-1"> <div class="ms-1">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
@@ -58,11 +41,10 @@
class="absolute z-50 mt-2 w-48 rounded-md shadow-lg origin-top-right right-0" class="absolute z-50 mt-2 w-48 rounded-md shadow-lg origin-top-right right-0"
style="display: none;" style="display: none;"
@click="open = false"> @click="open = false">
<div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white"> <div class="rounded-md ring-1 ring-purple-700 py-1 bg-purple-600">
<%= link_to "Mon profil", edit_user_registration_path, class: "block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" %> <%= link_to "Mon profil", edit_user_registration_path, class: "block w-full px-4 py-2 text-start text-sm leading-5 text-white hover:bg-purple-700" %>
<%= link_to "Mes réservations", "#", class: "block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" %> <%= link_to "Mes réservations", "#", class: "block w-full px-4 py-2 text-start text-sm leading-5 text-white hover:bg-purple-700" %>
<!-- Logout -->
<%= link_to "Déconnexion", destroy_user_session_path, <%= link_to "Déconnexion", destroy_user_session_path,
data: { data: {
controller: "logout", controller: "logout",
@@ -71,22 +53,22 @@
login_url_value: new_user_session_path, login_url_value: new_user_session_path,
turbo: false turbo: false
}, },
class: "inline-block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" %> class: "block w-full px-4 py-2 text-start text-sm leading-5 text-white hover:bg-purple-700" %>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<% else %> <% else %>
<!-- Login/Register Links --> <!-- Login/Register Links -->
<div class="hidden sm:flex sm:items-center sm:ms-6 space-x-4"> <div class="hidden sm:flex sm:items-center sm:ms-6 space-x-4 items-center">
<%= link_to "S'inscrire", new_user_registration_path, class: "inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-300 hover:text-white focus:outline-none transition ease-in-out duration-150" %> <%= link_to "S'inscrire", new_user_registration_path, class: "text-white hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
<%= link_to "Se connecter", new_user_session_path, class: "inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-300 hover:text-white focus:outline-none transition ease-in-out duration-150" %> <%= link_to "Se connecter", new_user_session_path, class: "bg-white text-purple-600 font-medium py-2 px-4 rounded-lg shadow-sm hover:bg-purple-100 transition-all duration-200" %>
</div> </div>
<% end %> <% end %>
<!-- Hamburger --> <!-- Hamburger -->
<div class="-me-2 flex items-center sm:hidden"> <div class="-me-2 flex items-center sm:hidden">
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"> <button @click="open = ! open" class="p-2 rounded-md text-purple-200 hover:text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24"> <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{ 'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> <path :class="{ 'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{ 'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> <path :class="{ 'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@@ -98,24 +80,23 @@
<!-- Responsive Navigation Menu --> <!-- Responsive Navigation Menu -->
<div :class="{ 'block': open, 'hidden': !open }" class="hidden sm:hidden"> <div :class="{ 'block': open, 'hidden': !open }" class="hidden sm:hidden">
<div class="pt-2 pb-3 space-y-1"> <div class="pt-2 pb-3 space-y-1 bg-purple-600">
<%= link_to "Soirées et afterworks", "#", class: "block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800 hover:border-white focus:outline-none focus:text-white focus:bg-gray-800 focus:border-white transition duration-150 ease-in-out" %> <%= link_to "Soirées et afterworks", "#", class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
<%= link_to "Concerts", "#", class: "block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800 hover:border-white focus:outline-none focus:text-white focus:bg-gray-800 focus:border-white transition duration-150 ease-in-out" %> <%= link_to "Concerts", "#", class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
</div> </div>
<!-- Responsive Settings Options --> <!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200"> <div class="pt-4 pb-1 border-t border-purple-700 bg-purple-600">
<% if user_signed_in? %> <% if user_signed_in? %>
<div class="px-4"> <div class="px-4">
<div class="font-medium text-base text-gray-800"><%= current_user.email %></div> <div class="font-medium text-base text-white"><%= current_user.email %></div>
<div class="font-medium text-sm text-gray-500"><%= current_user.email %></div> <div class="font-medium text-sm text-purple-200"><%= current_user.email %></div>
</div> </div>
<div class="mt-3 space-y-1"> <div class="mt-3 space-y-1">
<%= link_to "Mon profil", edit_user_registration_path, class: "block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800 hover:border-white focus:outline-none focus:text-white focus:bg-gray-800 focus:border-white transition duration-150 ease-in-out" %> <%= link_to "Mon profil", edit_user_registration_path, class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
<%= link_to "Mes réservations", "#", class: "block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800 hover:border-white focus:outline-none focus:text-white focus:bg-gray-800 focus:border-white transition duration-150 ease-in-out" %> <%= link_to "Mes réservations", "#", class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
<!-- Logout -->
<%= link_to "Déconnexion", destroy_user_session_path, <%= link_to "Déconnexion", destroy_user_session_path,
data: { data: {
controller: "logout", controller: "logout",
@@ -124,12 +105,12 @@
login_url_value: new_user_session_path, login_url_value: new_user_session_path,
turbo: false turbo: false
}, },
class: "block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800 hover:border-white focus:outline-none focus:text-white focus:bg-gray-800 focus:border-white transition duration-150 ease-in-out" %> class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
</div> </div>
<% else %> <% else %>
<div class="mt-3 space-y-1"> <div class="mt-3 space-y-1">
<%= link_to "S'inscrire", new_user_registration_path, class: "block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800 hover:border-white focus:outline-none focus:text-white focus:bg-gray-800 focus:border-white transition duration-150 ease-in-out" %> <%= link_to "S'inscrire", new_user_registration_path, class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
<%= link_to "Se connecter", new_user_session_path, class: "block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-400 hover:text-white hover:bg-gray-800 hover:border-white focus:outline-none focus:text-white focus:bg-gray-800 focus:border-white transition duration-150 ease-in-out" %> <%= link_to "Se connecter", new_user_session_path, class: "block px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
</div> </div>
<% end %> <% end %>
</div> </div>

43
app/views/devise/passwords/edit.html.erb
View File

@@ -1,25 +1,44 @@
<h2>Change your password</h2> <div class="min-h-screen flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8">
<div>
<%= link_to "/" do %>
<img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" />
<% end %>
<h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">
Changer votre mot de passe
</h2>
<p class="mt-2 text-center text-sm text-neutral-600">
Veuillez entrer votre nouveau mot de passe ci-dessous
</p>
</div>
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %> <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put, class: "mt-8 space-y-6" }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %> <%= render "devise/shared/error_messages", resource: resource %>
<%= f.hidden_field :reset_password_token %> <%= f.hidden_field :reset_password_token %>
<div class="field"> <div class="space-y-4">
<%= f.label :password, "New password" %><br /> <div>
<%= f.label :password, "Nouveau mot de passe", class: "block text-sm font-medium text-neutral-700" %>
<% if @minimum_password_length %> <% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em><br /> <em class="text-sm text-neutral-500">(<%= @minimum_password_length %> caractères minimum)</em>
<% end %> <% end %>
<%= f.password_field :password, autofocus: true, autocomplete: "new-password" %> <%= f.password_field :password, autofocus: true, autocomplete: "new-password",
class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
</div> </div>
<div class="field"> <div>
<%= f.label :password_confirmation, "Confirm new password" %><br /> <%= f.label :password_confirmation, "Confirmer le nouveau mot de passe", class: "block text-sm font-medium text-neutral-700" %>
<%= f.password_field :password_confirmation, autocomplete: "new-password" %> <%= f.password_field :password_confirmation, autocomplete: "new-password",
class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
</div>
</div> </div>
<div class="actions"> <div class="actions">
<%= f.submit "Change my password" %> <%= f.submit "Changer mon mot de passe",
class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
</div> </div>
<% end %> <% end %>
<%= render "devise/shared/links" %> <%= render "devise/shared/links" %>
</div>
</div>

37
app/views/devise/passwords/new.html.erb
View File

@@ -1,16 +1,35 @@
<h2>Forgot your password?</h2> <div class="min-h-screen flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8">
<div>
<%= link_to "/" do %>
<img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" />
<% end %>
<h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">
Mot de passe oublié ?
</h2>
<p class="mt-2 text-center text-sm text-neutral-600">
Entrez votre adresse email et nous vous enverrons un lien pour réinitialiser votre mot de passe
</p>
</div>
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %> <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, class: "mt-8 space-y-6" }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %> <%= render "devise/shared/error_messages", resource: resource %>
<div class="field"> <div>
<%= f.label :email %><br /> <%= f.label :email, class: "block text-sm font-medium text-neutral-700" %>
<%= f.email_field :email, autofocus: true, autocomplete: "email" %> <div class="mt-1">
<%= f.email_field :email, autofocus: true, autocomplete: "email",
class: "appearance-none block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm",
placeholder: "Adresse email" %>
</div>
</div> </div>
<div class="actions"> <div>
<%= f.submit "Send me reset password instructions" %> <%= f.submit "Envoyer le lien de réinitialisation",
class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
</div> </div>
<% end %> <% end %>
<%= render "devise/shared/links" %> <%= render "devise/shared/links" %>
</div>
</div>

89
app/views/devise/registrations/edit.html.erb
View File

@@ -1,43 +1,70 @@
<h2>Edit <%= resource_name.to_s.humanize %></h2> <div class="min-h-screen flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-2xl w-full space-y-8">
<div>
<%= link_to "/" do %>
<img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" />
<% end %>
<h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">
Modifier votre compte
</h2>
<p class="mt-2 text-center text-sm text-neutral-600">
Gérez vos informations et préférences
</p>
</div>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %> <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, class: "mt-8 space-y-6" }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %> <%= render "devise/shared/error_messages", resource: resource %>
<div class="field"> <div class="space-y-6">
<%= f.label :email %><br /> <div>
<%= f.email_field :email, autofocus: true, autocomplete: "email" %> <%= f.label :email, class: "block text-sm font-medium text-neutral-700" %>
<%= f.email_field :email, autofocus: true, autocomplete: "email",
class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
</div> </div>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div> <div class="text-sm text-neutral-600">
En attente de confirmation pour : <%= resource.unconfirmed_email %>
</div>
<% end %> <% end %>
<div class="field"> <div>
<%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br /> <%= f.label :password, "Nouveau mot de passe", class: "block text-sm font-medium text-neutral-700" %>
<%= f.password_field :password, autocomplete: "new-password" %> <i class="text-sm text-neutral-500">(laissez vide si vous ne souhaitez pas le changer)</i>
<% if @minimum_password_length %> <%= f.password_field :password, autocomplete: "new-password",
<br /> class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
<em><%= @minimum_password_length %> characters minimum</em> </div>
<div>
<%= f.label :password_confirmation, "Confirmer le nouveau mot de passe", class: "block text-sm font-medium text-neutral-700" %>
<%= f.password_field :password_confirmation, autocomplete: "new-password",
class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
</div>
<div>
<%= f.label :current_password, "Mot de passe actuel", class: "block text-sm font-medium text-neutral-700" %>
<i class="text-sm text-neutral-500">(requis pour confirmer vos changements)</i>
<%= f.password_field :current_password, autocomplete: "current-password",
class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
</div>
</div>
<div class="flex items-center justify-between">
<%= f.submit "Mettre à jour",
class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
</div>
<% end %> <% end %>
<h3 class="text-center text-lg font-medium text-neutral-900">Supprimer mon compte</h3>
<div class="text-center">
<p class="text-sm text-neutral-600">
Mécontent ? <%= button_to "Supprimer mon compte", registration_path(resource_name),
data: { confirm: "Êtes-vous sûr ?", turbo_confirm: "Êtes-vous sûr ?" },
method: :delete,
class: "font-medium text-red-600 hover:text-red-500" %>
</p>
</div> </div>
<div class="field"> <%= link_to "Retour", :back, class: "text-center block text-purple-600 hover:text-purple-500" %>
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
</div> </div>
</div>
<div class="field">
<%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
<%= f.password_field :current_password, autocomplete: "current-password" %>
</div>
<div class="actions">
<%= f.submit "Update" %>
</div>
<% end %>
<h3>Cancel my account</h3>
<div>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?", turbo_confirm: "Are you sure?" }, method: :delete %></div>
<%= link_to "Back", :back %>

65
app/views/devise/registrations/new.html.erb
View File

@@ -1,29 +1,62 @@
<h2>Sign up</h2> <div class="min-h-screen flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8">
<div>
<%= link_to "/" do %>
<img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" />
<% end %>
<h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">
Créer votre compte
</h2>
<p class="mt-2 text-center text-sm text-neutral-600">
Ou
<a href="<%= new_user_session_path %>" class="font-medium text-purple-600 hover:text-purple-500">
connectez-vous à votre compte
</a>
</p>
</div>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: "mt-8 space-y-6" }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %> <%= render "devise/shared/error_messages", resource: resource %>
<div class="field"> <div class="space-y-4">
<%= f.label :email %><br /> <div>
<%= f.email_field :email, autofocus: true, autocomplete: "email" %> <%= f.label :email, class: "block text-sm font-medium text-neutral-700" %>
<%= f.email_field :email, autofocus: true, autocomplete: "email",
class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
</div> </div>
<div class="field"> <div>
<%= f.label :password %> <%= f.label :password, class: "block text-sm font-medium text-neutral-700" %>
<% if @minimum_password_length %> <% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em> <em class="text-sm text-neutral-500">(<%= @minimum_password_length %> caractères minimum)</em>
<% end %><br /> <% end %>
<%= f.password_field :password, autocomplete: "new-password" %> <%= f.password_field :password, autocomplete: "new-password",
class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
</div> </div>
<div class="field"> <div>
<%= f.label :password_confirmation %><br /> <%= f.label :password_confirmation, class: "block text-sm font-medium text-neutral-700" %>
<%= f.password_field :password_confirmation, autocomplete: "new-password" %> <%= f.password_field :password_confirmation, autocomplete: "new-password",
class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
</div>
</div> </div>
<div class="actions"> <div class="actions">
<%= f.submit "Sign up" %> <%= f.submit "S'inscrire", class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
</div> </div>
<% end %> <% end %>
<%= render "devise/shared/links" %> <div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-neutral-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-neutral-50 text-neutral-600"> Ou continuer avec </span>
</div>
</div>
<%= render "devise/shared/links" %>
</div>
</div>
</div>

24
app/views/devise/sessions/new.html.erb
View File

@@ -1,15 +1,15 @@
<div class="min-h-screen flex items-center justify-center bg-gray-900 py-12 px-4 sm:px-6 lg:px-8"> <div class="min-h-screen flex items-center justify-center bg-neutral-50 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8"> <div class="max-w-md w-full space-y-8">
<div> <div>
<%= link_to "/" do %> <%= link_to "/" do %>
<img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" /> <img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" />
<% end %> <% end %>
<h2 class="mt-6 text-center text-3xl font-extrabold text-white"> <h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">
Connexion à votre compte Connexion à votre compte
</h2> </h2>
<p class="mt-2 text-center text-sm text-gray-400"> <p class="mt-2 text-center text-sm text-neutral-600">
Ou Ou
<a href="<%= new_user_registration_path %>" class="font-medium text-indigo-400 hover:text-indigo-300"> <a href="<%= new_user_registration_path %>" class="font-medium text-purple-600 hover:text-purple-500">
créez un nouveau compte créez un nouveau compte
</a> </a>
</p> </p>
@@ -22,14 +22,14 @@
<div class="field"> <div class="field">
<%= f.label :email, class: "sr-only" %> <%= f.label :email, class: "sr-only" %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", <%= f.email_field :email, autofocus: true, autocomplete: "email",
class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-700 placeholder-gray-500 text-gray-100 bg-gray-800 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-neutral-300 placeholder-neutral-500 text-neutral-900 bg-white rounded-t-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm",
placeholder: "Adresse email" %> placeholder: "Adresse email" %>
</div> </div>
<div class="field"> <div class="field">
<%= f.label :password, class: "sr-only" %> <%= f.label :password, class: "sr-only" %>
<%= f.password_field :password, autocomplete: "current-password", <%= f.password_field :password, autocomplete: "current-password",
class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-700 placeholder-gray-500 text-gray-100 bg-gray-800 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm", class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-neutral-300 placeholder-neutral-500 text-neutral-900 bg-white rounded-b-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm",
placeholder: "Mot de passe" %> placeholder: "Mot de passe" %>
</div> </div>
</div> </div>
@@ -37,28 +37,28 @@
<% if devise_mapping.rememberable? %> <% if devise_mapping.rememberable? %>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<%= f.check_box :remember_me, class: "h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-700 rounded bg-gray-800" %> <%= f.check_box :remember_me, class: "h-4 w-4 text-purple-600 focus:ring-purple-500 border-neutral-300 rounded bg-white" %>
<label for="user_remember_me" class="ml-2 block text-sm text-gray-400"> Se souvenir de moi </label> <label for="user_remember_me" class="ml-2 block text-sm text-neutral-700"> Se souvenir de moi </label>
</div> </div>
<div class="text-sm"> <div class="text-sm">
<%= link_to "Mot de passe oublié?", new_password_path(resource_name), class: "font-medium text-indigo-400 hover:text-indigo-300" %> <%= link_to "Mot de passe oublié?", new_password_path(resource_name), class: "font-medium text-purple-600 hover:text-purple-500" %>
</div> </div>
</div> </div>
<% end %> <% end %>
<div class="actions"> <div class="actions">
<%= f.submit "Se connecter", class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500" %> <%= f.submit "Se connecter", class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
</div> </div>
<% end %> <% end %>
<div class="mt-6"> <div class="mt-6">
<div class="relative"> <div class="relative">
<div class="absolute inset-0 flex items-center"> <div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-700"></div> <div class="w-full border-t border-neutral-300"></div>
</div> </div>
<div class="relative flex justify-center text-sm"> <div class="relative flex justify-center text-sm">
<span class="px-2 bg-gray-900 text-gray-400"> Ou continuer avec </span> <span class="px-2 bg-neutral-50 text-neutral-600"> Ou continuer avec </span>
</div> </div>
</div> </div>

11
app/views/devise/shared/_error_messages.html.erb
View File

@@ -1,14 +1,13 @@
<% if resource.errors.any? %> <% if resource.errors.any? %>
<div id="error_explanation" data-turbo-cache="false"> <div id="error_explanation" data-turbo-cache="false" class="bg-red-50 border border-red-200 rounded-md p-4 mb-4">
<h2> <h2 class="text-lg font-medium text-red-800 mb-3">
<%= I18n.t("errors.messages.not_saved", <%= I18n.t("errors.messages.not_saved",
count: resource.errors.count, count: resource.errors.count,
resource: resource.class.model_name.human.downcase) resource: resource.class.model_name.human.downcase) %>
%>
</h2> </h2>
<ul> <ul class="list-disc list-inside space-y-1">
<% resource.errors.full_messages.each do |message| %> <% resource.errors.full_messages.each do |message| %>
<li><%= message %></li> <li class="text-sm text-red-700"><%= message %></li>
<% end %> <% end %>
</ul> </ul>
</div> </div>

24
app/views/devise/shared/_links.html.erb
View File

@@ -1,38 +1,38 @@
<div class=""> <div class="space-y-4">
<%- if controller_name != "sessions" %> <%- if controller_name != "sessions" %>
<div class="w-full flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500"> <div class="w-full flex justify-center py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
<%= link_to "Se connecter", new_session_path(resource_name), class: "block" %> <%= link_to "Se connecter", new_session_path(resource_name), class: "block" %>
</div> </div>
<% end %> <% end %>
<%- if devise_mapping.registerable? && controller_name != "registrations" %> <%- if devise_mapping.registerable? && controller_name != "registrations" %>
<div class="w-full flex justify-center mt-4 py-2 px-4 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500"> <div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
<%= link_to "S'inscrire", new_registration_path(resource_name), class: "" %> <%= link_to "S'inscrire", new_registration_path(resource_name), class: "block" %>
</div> </div>
<% end %> <% end %>
<%- if devise_mapping.recoverable? && controller_name != "passwords" && controller_name != "registrations" %> <%- if devise_mapping.recoverable? && controller_name != "passwords" && controller_name != "registrations" %>
<div class="w-full flex justify-center mt-4 py-2 px-4 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500"> <div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
<%= link_to "Mot de passe oublié ?", new_password_path(resource_name), class: "" %> <%= link_to "Mot de passe oublié ?", new_password_path(resource_name), class: "block" %>
</div> </div>
<% end %> <% end %>
<%- if devise_mapping.confirmable? && controller_name != "confirmations" %> <%- if devise_mapping.confirmable? && controller_name != "confirmations" %>
<div class="w-full flex justify-center mt-4 py-2 px-4 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500"> <div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
<%= link_to "Vous n'avez pas reçu les instructions de confirmation ?", new_confirmation_path(resource_name), class: "" %> <%= link_to "Vous n'avez pas reçu les instructions de confirmation ?", new_confirmation_path(resource_name), class: "block" %>
</div> </div>
<% end %> <% end %>
<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != "unlocks" %> <%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != "unlocks" %>
<div class="w-full flex justify-center mt-4 py-2 px-4 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500"> <div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
<%= link_to "Vous n'avez pas reçu les instructions de déverrouillage?", new_unlock_path(resource_name), class: "" %> <%= link_to "Vous n'avez pas reçu les instructions de déverrouillage?", new_unlock_path(resource_name), class: "block" %>
</div> </div>
<% end %> <% end %>
<%- if devise_mapping.omniauthable? %> <%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %> <%- resource_class.omniauth_providers.each do |provider| %>
<div class="w-full flex justify-center mt-4 py-2 px-4 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-500"> <div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
<%= button_to "Se connecter avec #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false }, class: "" %> <%= button_to "Se connecter avec #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false }, class: "block" %>
</div> </div>
<% end %> <% end %>
<% end %> <% end %>

20
app/views/layouts/application.html.erb
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html class="h-full bg-neutral-50">
<head> <head>
<title><%= content_for(:title) || "Aperonight" %></title> <title><%= content_for(:title) || "Aperonight" %></title>
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
@@ -19,21 +19,27 @@
<%# Includes all stylesheet files in app/assets/stylesheets %> <%# Includes all stylesheet files in app/assets/stylesheets %>
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %> <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "theme", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %> <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
</head> </head>
<body> <body class="h-full font-sans text-neutral-900 antialiased">
<div class="min-h-full">
<div id="header"> <header class="bg-purple shadow-sm border-b border-neutral-200">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<%= render "components/header" %> <%= render "components/header" %>
</div><!-- /#header --> </div>
</header>
<main> <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
<%= yield %> <%= yield %>
</main> </main>
<div id="footer"> <footer class="bg-neutral-100 text-neutral-600">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
<%= render "components/footer" %> <%= render "components/footer" %>
</div> </div>
</footer>
</div>
</body> </body>
</html> </html>

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

@@ -1,31 +1,31 @@
<!-- Hero Section --> <!-- Hero Section -->
<section class="relative bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-700 min-h-[70vh] flex items-center"> <section class="relative bg-gradient-to-br from-purple-100 via-pink-50 to-indigo-100 min-h-[70vh] flex items-center">
<div class="absolute inset-0 bg-black bg-opacity-40"></div> <div class="absolute inset-0 bg-white bg-opacity-60"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> <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"> <h1 class="text-5xl md:text-7xl font-bold text-neutral-900 mb-6 leading-tight">
Découvrez les afterworks et soirée Découvrez les afterworks et soirée
<span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400"> <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600">
à Paris à Paris
</span> </span>
</h1> </h1>
<p class="text-xl md:text-2xl text-gray-200 mb-8 max-w-3xl mx-auto leading-relaxed"> <p class="text-xl md:text-2xl text-neutral-700 mb-8 max-w-3xl mx-auto leading-relaxed">
Les meilleures soirées, concerts et afterworks de Paris en un clic. Réservez vos places et vivez des expériences uniques. Les meilleures soirées, concerts et afterworks de Paris en un clic. Réservez vos places et vivez des expériences uniques.
</p> </p>
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center"> <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
<%= link_to "Explorer les soirées", "#events", class: "bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-4 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg" %> <%= link_to "Explorer les soirées", "#events", class: "bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-4 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg" %>
<%= link_to "Voir les concerts", "#", class: "bg-white bg-opacity-10 backdrop-blur-sm border border-white border-opacity-30 hover:bg-opacity-20 text-black font-semibold py-4 px-8 rounded-full transition-all duration-300" %> <%= link_to "Voir les concerts", "#", class: "bg-white border border-neutral-300 hover:border-purple-300 text-neutral-700 font-semibold py-4 px-8 rounded-full transition-all duration-300" %>
</div> </div>
</div> </div>
</section> </section>
<!-- Metrics --> <!-- Metrics -->
<section class="bg-gradient-to-br from-gray-900 via-gray-800 to-black py-20"> <section class="bg-neutral-50 py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16"> <div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold text-white mb-4"> <h2 class="text-4xl md:text-5xl font-bold text-neutral-900 mb-4">
Des chiffres qui parlent Des chiffres qui parlent
</h2> </h2>
<p class="text-xl text-gray-300 max-w-2xl mx-auto"> <p class="text-xl text-neutral-600 max-w-2xl mx-auto">
La plateforme préférée des Parisiens pour vivre la nuit La plateforme préférée des Parisiens pour vivre la nuit
</p> </p>
</div> </div>
@@ -33,13 +33,13 @@
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
<!-- Total Events --> <!-- Total Events -->
<div class="group relative"> <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="relative overflow-hidden rounded-2xl bg-white border border-neutral-200 hover:border-purple-300 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="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative"> <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"> <div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
<span class="counter" data-controller="counter" data-counter-target-value="127">0</span> <span class="counter" data-controller="counter" data-counter-target-value="127">0</span>
</div> </div>
<p class="text-gray-200 font-mono uppercase tracking-widest text-sm font-medium"> <p class="text-neutral-700 font-mono uppercase tracking-widest text-sm font-medium">
Événements organisés Événements organisés
</p> </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 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>
@@ -49,13 +49,13 @@
<!-- Total Users --> <!-- Total Users -->
<div class="group relative"> <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="relative overflow-hidden rounded-2xl bg-white border border-neutral-200 hover:border-purple-300 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="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative"> <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"> <div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
<span class="counter" data-controller="counter" data-counter-target-value="1433">0</span>+ <span class="counter" data-controller="counter" data-counter-target-value="1433">0</span>+
</div> </div>
<p class="text-gray-200 font-mono uppercase tracking-widest text-sm font-medium"> <p class="text-neutral-700 font-mono uppercase tracking-widest text-sm font-medium">
Membres actifs Membres actifs
</p> </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 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>
@@ -65,13 +65,13 @@
<!-- Average Rating --> <!-- Average Rating -->
<div class="group relative"> <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="relative overflow-hidden rounded-2xl bg-white border border-neutral-200 hover:border-purple-300 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="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative"> <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"> <div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
<span class="counter" data-controller="counter" data-counter-target-value="4.4" data-counter-decimal-value="true">0</span>/5 <span class="counter" data-controller="counter" data-counter-target-value="4.4" data-counter-decimal-value="true">0</span>/5
</div> </div>
<p class="text-gray-200 font-mono uppercase tracking-widest text-sm font-medium"> <p class="text-neutral-700 font-mono uppercase tracking-widest text-sm font-medium">
Note moyenne des soirées Note moyenne des soirées
</p> </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 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>
@@ -83,51 +83,51 @@
<!-- Additional Stats Row --> <!-- Additional Stats Row -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12"> <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12">
<div class="text-center"> <div class="text-center">
<div class="text-3xl font-bold text-purple-300"> <div class="text-3xl font-bold text-purple-600">
<span class="counter" data-controller="counter" data-counter-target-value="79">0</span>% <span class="counter" data-controller="counter" data-counter-target-value="79">0</span>%
</div> </div>
<p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Taux de remplissage</p> <p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Taux de remplissage</p>
</div> </div>
<div class="text-center"> <div class="text-center">
<div class="text-3xl font-bold text-purple-300"> <div class="text-3xl font-bold text-purple-600">
<span class="counter" data-controller="counter" data-counter-target-value="12">0</span> <span class="counter" data-controller="counter" data-counter-target-value="12">0</span>
</div> </div>
<p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Arrondissements</p> <p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Arrondissements</p>
</div> </div>
<div class="text-center"> <div class="text-center">
<div class="text-3xl font-bold text-purple-300"> <div class="text-3xl font-bold text-purple-600">
<span class="counter" data-controller="counter" data-counter-target-value="156">0</span> <span class="counter" data-controller="counter" data-counter-target-value="156">0</span>
</div> </div>
<p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Établissements partenaires</p> <p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Établissements partenaires</p>
</div> </div>
<div class="text-center"> <div class="text-center">
<div class="text-3xl font-bold text-purple-300"> <div class="text-3xl font-bold text-purple-600">
<span class="counter" data-controller="counter" data-counter-target-value="98">0</span>% <span class="counter" data-controller="counter" data-counter-target-value="98">0</span>%
</div> </div>
<p class="text-gray-300 text-sm font-mono uppercase tracking-wide font-medium">Satisfaction client</p> <p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Satisfaction client</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Quick Search Section --> <!-- Quick Search Section -->
<section id="search" class="bg-gray-900 py-16"> <section id="search" class="bg-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 shadow-2xl"> <div class="bg-gradient-to-br from-neutral-50 to-white border border-neutral-200 rounded-2xl p-8 shadow-lg">
<h2 class="text-3xl font-bold text-white text-center mb-8">Trouvez votre prochaine soirée</h2> <h2 class="text-3xl font-bold text-neutral-900 text-center mb-8">Trouvez votre prochaine soirée</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end"> <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
<div> <div>
<label class="block text-sm font-medium text-gray-300 mb-2">Quand ?</label> <label class="block text-sm font-medium text-neutral-700 mb-2">Quand ?</label>
<input type="date" class="w-full bg-gray-800 border border-gray-700 text-white rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all" placeholder="Choisir une date"> <input type="date" class="w-full bg-white border border-neutral-300 text-neutral-900 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all" placeholder="Choisir une date">
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-300 mb-2">Type d'événement</label> <label class="block text-sm font-medium text-neutral-700 mb-2">Type d'événement</label>
<select class="w-full bg-gray-800 border border-gray-700 text-white rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all"> <select class="w-full bg-white border border-neutral-300 text-neutral-900 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
<option value="">Tous les types</option> <option value="">Tous les types</option>
<option value="club">Soirées club</option> <option value="club">Soirées club</option>
<option value="afterwork">Afterworks</option> <option value="afterwork">Afterworks</option>
@@ -137,8 +137,8 @@
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-300 mb-2">Genre musical</label> <label class="block text-sm font-medium text-neutral-700 mb-2">Genre musical</label>
<select class="w-full bg-gray-800 border border-gray-700 text-white rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all"> <select class="w-full bg-white border border-neutral-300 text-neutral-900 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
<option value="">Tous les genres</option> <option value="">Tous les genres</option>
<option value="house">House/Techno</option> <option value="house">House/Techno</option>
<option value="hiphop">Hip-Hop</option> <option value="hiphop">Hip-Hop</option>
@@ -157,28 +157,28 @@
</section> </section>
<!-- Featured Events --> <!-- Featured Events -->
<section id="events" class="bg-gradient-to-b from-gray-900 to-black py-20"> <section id="events" class="bg-neutral-50 py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12"> <div class="text-center mb-12">
<h2 class="text-4xl font-bold text-white mb-4">Événements du moment</h2> <h2 class="text-4xl font-bold text-neutral-900 mb-4">Événements du moment</h2>
<p class="text-xl text-gray-400">Les soirées et concerts les plus populaires cette semaine</p> <p class="text-xl text-neutral-600">Les soirées et concerts les plus populaires cette semaine</p>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Event Card 1 --> <!-- Event Card 1 -->
<div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-xl"> <div class="bg-white border border-neutral-200 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-lg">
<div class="h-56 bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 relative"> <div class="h-56 bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 relative">
<div class="absolute top-4 right-4 bg-black bg-opacity-60 text-white px-3 py-1 rounded-full text-sm font-medium"> <div class="absolute top-4 right-4 bg-white bg-opacity-90 text-neutral-900 px-3 py-1 rounded-full text-sm font-medium">
Club Club
</div> </div>
</div> </div>
<div class="p-6"> <div class="p-6">
<div class="flex justify-between items-start mb-3"> <div class="flex justify-between items-start mb-3">
<h3 class="text-2xl font-bold text-white">TECHNO NIGHT</h3> <h3 class="text-2xl font-bold text-neutral-900">TECHNO NIGHT</h3>
<span class="text-purple-400 font-semibold">25€</span> <span class="text-purple-600 font-semibold">25€</span>
</div> </div>
<p class="text-gray-400 mb-2">Rex Club, Paris 2ème</p> <p class="text-neutral-600 mb-2">Rex Club, Paris 2ème</p>
<p class="text-gray-300 mb-4">Vendredi 22h • Soirée techno underground</p> <p class="text-neutral-700 mb-4">Vendredi 22h • Soirée techno underground</p>
<button class="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-3 rounded-lg transition-all duration-300"> <button class="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-3 rounded-lg transition-all duration-300">
Réserver ma place Réserver ma place
</button> </button>
@@ -186,19 +186,19 @@
</div> </div>
<!-- Event Card 2 --> <!-- Event Card 2 -->
<div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-xl"> <div class="bg-white border border-neutral-200 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-lg">
<div class="h-56 bg-gradient-to-br from-blue-500 via-cyan-500 to-teal-500 relative"> <div class="h-56 bg-gradient-to-br from-blue-500 via-cyan-500 to-teal-500 relative">
<div class="absolute top-4 right-4 bg-black bg-opacity-60 text-white px-3 py-1 rounded-full text-sm font-medium"> <div class="absolute top-4 right-4 bg-white bg-opacity-90 text-neutral-900 px-3 py-1 rounded-full text-sm font-medium">
Afterwork Afterwork
</div> </div>
</div> </div>
<div class="p-6"> <div class="p-6">
<div class="flex justify-between items-start mb-3"> <div class="flex justify-between items-start mb-3">
<h3 class="text-2xl font-bold text-white">SUNSET APÉRO</h3> <h3 class="text-2xl font-bold text-neutral-900">SUNSET APÉRO</h3>
<span class="text-blue-400 font-semibold">15€</span> <span class="text-blue-600 font-semibold">15€</span>
</div> </div>
<p class="text-gray-400 mb-2">Nuba, Paris 13ème</p> <p class="text-neutral-600 mb-2">Nuba, Paris 13ème</p>
<p class="text-gray-300 mb-4">Jeudi 18h • Apéro sur les quais</p> <p class="text-neutral-700 mb-4">Jeudi 18h • Apéro sur les quais</p>
<button class="w-full bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white font-semibold py-3 rounded-lg transition-all duration-300"> <button class="w-full bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white font-semibold py-3 rounded-lg transition-all duration-300">
Réserver ma place Réserver ma place
</button> </button>
@@ -206,19 +206,19 @@
</div> </div>
<!-- Event Card 3 --> <!-- Event Card 3 -->
<div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-xl"> <div class="bg-white border border-neutral-200 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-lg">
<div class="h-56 bg-gradient-to-br from-green-500 via-emerald-500 to-teal-500 relative"> <div class="h-56 bg-gradient-to-br from-green-500 via-emerald-500 to-teal-500 relative">
<div class="absolute top-4 right-4 bg-black bg-opacity-60 text-white px-3 py-1 rounded-full text-sm font-medium"> <div class="absolute top-4 right-4 bg-white bg-opacity-90 text-neutral-900 px-3 py-1 rounded-full text-sm font-medium">
Concert Concert
</div> </div>
</div> </div>
<div class="p-6"> <div class="p-6">
<div class="flex justify-between items-start mb-3"> <div class="flex justify-between items-start mb-3">
<h3 class="text-2xl font-bold text-white">LIVE SESSION</h3> <h3 class="text-2xl font-bold text-neutral-900">LIVE SESSION</h3>
<span class="text-green-400 font-semibold">20€</span> <span class="text-green-600 font-semibold">20€</span>
</div> </div>
<p class="text-gray-400 mb-2">La Bellevilloise, Paris 20ème</p> <p class="text-neutral-600 mb-2">La Bellevilloise, Paris 20ème</p>
<p class="text-gray-300 mb-4">Samedi 20h • Concert live acoustique</p> <p class="text-neutral-700 mb-4">Samedi 20h • Concert live acoustique</p>
<button class="w-full bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white font-semibold py-3 rounded-lg transition-all duration-300"> <button class="w-full bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white font-semibold py-3 rounded-lg transition-all duration-300">
Réserver ma place Réserver ma place
</button> </button>
@@ -227,7 +227,7 @@
</div> </div>
<div class="text-center mt-12"> <div class="text-center mt-12">
<button class="text-purple-400 hover:text-purple-300 text-lg font-medium transition-all duration-300 border-b-2 border-purple-400 hover:border-purple-300"> <button class="text-purple-600 hover:text-purple-700 text-lg font-medium transition-all duration-300 border-b-2 border-purple-600 hover:border-purple-700">
Voir tous les événements → Voir tous les événements →
</button> </button>
</div> </div>
@@ -235,11 +235,11 @@
</section> </section>
<!-- Features --> <!-- Features -->
<section class="bg-gray-900 py-20"> <section class="bg-white py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16"> <div class="text-center mb-16">
<h2 class="text-4xl font-bold text-white mb-4">Pourquoi choisir <%= Rails.application.config.app_name %> ?</h2> <h2 class="text-4xl font-bold text-neutral-900 mb-4">Pourquoi choisir <%= Rails.application.config.app_name %> ?</h2>
<p class="text-xl text-gray-400 max-w-2xl mx-auto">La plateforme préférée des Parisiens pour sortir</p> <p class="text-xl text-neutral-600 max-w-2xl mx-auto">La plateforme préférée des Parisiens pour sortir</p>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
@@ -249,8 +249,8 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg> </svg>
</div> </div>
<h3 class="text-2xl font-bold text-white mb-3">Découverte facile</h3> <h3 class="text-2xl font-bold text-neutral-900 mb-3">Découverte facile</h3>
<p class="text-gray-400 leading-relaxed">Trouvez les meilleures soirées et concerts de Paris en quelques clics grâce à notre algorithme personnalisé</p> <p class="text-neutral-600 leading-relaxed">Trouvez les meilleures soirées et concerts de Paris en quelques clics grâce à notre algorithme personnalisé</p>
</div> </div>
<div class="text-center p-8"> <div class="text-center p-8">
@@ -259,8 +259,8 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
</div> </div>
<h3 class="text-2xl font-bold text-white mb-3">Réservation sécurisée</h3> <h3 class="text-2xl font-bold text-neutral-900 mb-3">Réservation sécurisée</h3>
<p class="text-gray-400 leading-relaxed">Paiement 100% sécurisé et billets électroniques avec QR code sur votre mobile</p> <p class="text-neutral-600 leading-relaxed">Paiement 100% sécurisé et billets électroniques avec QR code sur votre mobile</p>
</div> </div>
<div class="text-center p-8"> <div class="text-center p-8">
@@ -269,18 +269,18 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg> </svg>
</div> </div>
<h3 class="text-2xl font-bold text-white mb-3">Accès rapide</h3> <h3 class="text-2xl font-bold text-neutral-900 mb-3">Accès rapide</h3>
<p class="text-gray-400 leading-relaxed">Entrée express avec validation mobile de vos billets. Plus besoin d'imprimer !</p> <p class="text-neutral-600 leading-relaxed">Entrée express avec validation mobile de vos billets. Plus besoin d'imprimer !</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- CTA Section --> <!-- CTA Section -->
<section class="bg-gradient-to-r from-purple-900 via-indigo-900 to-pink-900 py-20"> <section class="bg-gradient-to-r from-purple-100 via-pink-50 to-indigo-100 py-20">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-4xl font-bold text-white mb-6">Prêt à vivre la nuit parisienne ?</h2> <h2 class="text-4xl font-bold text-neutral-900 mb-6">Prêt à vivre la nuit parisienne ?</h2>
<p class="text-xl text-gray-300 mb-8">Rejoignez des milliers de party-goers qui utilisent Aperonight chaque semaine</p> <p class="text-xl text-neutral-700 mb-8">Rejoignez des milliers de party-goers qui utilisent Aperonight chaque semaine</p>
<button class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-4 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-xl"> <button class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-4 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-xl">
S'inscrire gratuitement S'inscrire gratuitement
</button> </button>

49
app/views/pages/legals.html.erb
View File

@@ -1,2 +1,47 @@
<h1>Pages#legals</h1> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<p>Find me in app/views/pages/legals.html.erb</p> <h1 class="text-4xl font-bold text-neutral-900 mb-8">Mentions légales</h1>
<div class="prose prose-neutral max-w-none">
<h2 class="text-2xl font-semibold text-neutral-900 mb-4">Éditeur du site</h2>
<p class="text-neutral-700 mb-6">
Le présent site est édité par Aperonight, une société par actions simplifiée au capital de 1 000 €,
immatriculée au Registre du Commerce et des Sociétés de Paris sous le numéro 123 456 789 000 00,
dont le siège social est situé à 123 rue de Paris, 75000 Paris.
</p>
<h2 class="text-2xl font-semibold text-neutral-900 mb-4">Directeur de la publication</h2>
<p class="text-neutral-700 mb-6">
Le directeur de la publication est M. Jean Dupont, en tant que Président d'Aperonight.
</p>
<h2 class="text-2xl font-semibold text-neutral-900 mb-4">Hébergement</h2>
<p class="text-neutral-700 mb-6">
Le site est hébergé par Heroku Inc., 415 Mission Street, Suite 300, San Francisco, CA 94105, États-Unis.
</p>
<h2 class="text-2xl font-semibold text-neutral-900 mb-4">Propriété intellectuelle</h2>
<p class="text-neutral-700 mb-6">
L'ensemble du contenu du site (textes, images, logos, vidéos) est la propriété exclusive d'Aperonight
et est protégé par les lois françaises et internationales relatives à la propriété intellectuelle.
</p>
<h2 class="text-2xl font-semibold text-neutral-900 mb-4">Données personnelles</h2>
<p class="text-neutral-700 mb-6">
Conformément à la réglementation européenne sur la protection des données (RGPD), vous disposez d'un droit
d'accès, de rectification et de suppression des données vous concernant. Pour exercer ces droits, contactez-nous
à l'adresse email suivante : privacy@aperonight.com
</p>
<h2 class="text-2xl font-semibold text-neutral-900 mb-4">Cookies</h2>
<p class="text-neutral-700 mb-6">
Le site utilise des cookies pour améliorer l'expérience utilisateur. En continuant à utiliser le site,
vous acceptez l'utilisation de ces cookies conformément à notre politique de confidentialité.
</p>
<h2 class="text-2xl font-semibold text-neutral-900 mb-4">Contact</h2>
<p class="text-neutral-700 mb-6">
Pour toute question concernant le site ou ses mentions légales, vous pouvez nous contacter à l'adresse suivante :<br>
<a href="mailto:legal@aperonight.com" class="text-purple-600 hover:text-purple-500">legal@aperonight.com</a>
</p>
</div>
</div>

31
tailwind.config.js
View File

@@ -19,6 +19,37 @@ module.exports = {
}, },
extend: { extend: {
colors: { colors: {
// Custom theme colors from theme-rules.md
purple: {
50: '#faf5ff',
100: '#f3e8ff',
200: '#e9d5ff',
300: '#d8b4fe',
400: '#c084fc',
500: '#a855f7',
600: '#9333ea',
700: '#7e22ce',
800: '#6b21a8',
900: '#581c87',
},
pink: {
400: '#f472b6',
500: '#ec4899',
600: '#db2777',
},
slate: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a',
},
// Existing shadcn colors
border: "hsl(var(--border))", border: "hsl(var(--border))",
input: "hsl(var(--input))", input: "hsl(var(--input))",
ring: "hsl(var(--ring))", ring: "hsl(var(--ring))",