New light theme
This commit is contained in:
kbe
161
app/assets/stylesheets/theme.css
Normal file
161
app/assets/stylesheets/theme.css
Normal 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;
|
||||
}
|
||||
@@ -1,23 +1,23 @@
|
||||
<footer class="py-10 bg-gray-900 text-white border-t-1 border-solid border-color-gray">
|
||||
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<footer class="py-10 bg-neutral-100 text-neutral-600 border-t border-neutral-200">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- Column 1: About -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-lg font-semibold text-indigo-400">À propos</h3>
|
||||
<p class="text-sm text-gray-300 leading-relaxed">
|
||||
<h3 class="text-lg font-semibold text-purple-500">À propos</h3>
|
||||
<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.
|
||||
</p>
|
||||
<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>
|
||||
<svg class="h-6 w-6" 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"/>
|
||||
<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 20.128 22 15.991 22 12z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</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>
|
||||
<svg class="h-6 w-6" 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"/>
|
||||
<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.63z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
@@ -25,56 +25,56 @@
|
||||
|
||||
<!-- Column 2: Quick Links -->
|
||||
<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">
|
||||
<li><%= link_to "Accueil", "/", class: "text-gray-300 hover:text-white transition-colors" %></li>
|
||||
<li><%= link_to "Événements", "/events", class: "text-gray-300 hover:text-white transition-colors" %></li>
|
||||
<li><%= link_to "Organisateurs", "/organizers", class: "text-gray-300 hover:text-white transition-colors" %></li>
|
||||
<li><%= link_to "Support", "/support", 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-neutral-600 hover:text-purple-500 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-neutral-600 hover:text-purple-500 transition-colors" %></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 3: Legal -->
|
||||
<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">
|
||||
<li><%= link_to "Conditions d'utilisation", "/terms", class: "text-gray-300 hover:text-white transition-colors" %></li>
|
||||
<li><%= link_to "Politique de confidentialité", "/privacy", class: "text-gray-300 hover:text-white transition-colors" %></li>
|
||||
<li><%= link_to "CGV", "/cgv", class: "text-gray-300 hover:text-white transition-colors" %></li>
|
||||
<li><%= link_to "Mentions légales", "/legal", 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-neutral-600 hover:text-purple-500 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-neutral-600 hover:text-purple-500 transition-colors" %></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 4: Contact -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-lg font-semibold text-indigo-400">Contact</h3>
|
||||
<address class="not-italic text-sm text-gray-300 space-y-2">
|
||||
<h3 class="text-lg font-semibold text-purple-500">Contact</h3>
|
||||
<address class="not-italic text-sm text-neutral-600 space-y-2">
|
||||
<p>
|
||||
<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
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<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
|
||||
</a>
|
||||
</p>
|
||||
</address>
|
||||
<p class="text-xs text-gray-400">
|
||||
<p class="text-xs text-neutral-500">
|
||||
Réponse sous 24h en semaine
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<p class="text-sm text-gray-400">
|
||||
<p class="text-sm text-neutral-500">
|
||||
© <%= Time.current.year %> Aperonight. Tous droits réservés.
|
||||
</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é
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -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 -->
|
||||
<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">
|
||||
<!-- Logo -->
|
||||
<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>
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
|
||||
<!-- Parties -->
|
||||
<%= link_to "Soirées et afterworks", "#",
|
||||
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 class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex items-center">
|
||||
<%= 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 "Concerts", "#", class: "text-white hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -38,7 +21,7 @@
|
||||
<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 @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 class="ms-1">
|
||||
<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"
|
||||
style="display: none;"
|
||||
@click="open = false">
|
||||
<div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white">
|
||||
<%= 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 "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" %>
|
||||
<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-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-white hover:bg-purple-700" %>
|
||||
|
||||
<!-- Logout -->
|
||||
<%= link_to "Déconnexion", destroy_user_session_path,
|
||||
data: {
|
||||
controller: "logout",
|
||||
@@ -71,22 +53,22 @@
|
||||
login_url_value: new_user_session_path,
|
||||
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>
|
||||
<% else %>
|
||||
<!-- Login/Register Links -->
|
||||
<div class="hidden sm:flex sm:items-center sm:ms-6 space-x-4">
|
||||
<%= 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 "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" %>
|
||||
<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: "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: "bg-white text-purple-600 font-medium py-2 px-4 rounded-lg shadow-sm hover:bg-purple-100 transition-all duration-200" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<!-- Hamburger -->
|
||||
<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">
|
||||
<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" />
|
||||
@@ -98,24 +80,23 @@
|
||||
|
||||
<!-- Responsive Navigation Menu -->
|
||||
<div :class="{ 'block': open, 'hidden': !open }" class="hidden sm:hidden">
|
||||
<div class="pt-2 pb-3 space-y-1">
|
||||
<%= 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 "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" %>
|
||||
<div class="pt-2 pb-3 space-y-1 bg-purple-600">
|
||||
<%= 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 px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
|
||||
</div>
|
||||
|
||||
<!-- 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? %>
|
||||
<div class="px-4">
|
||||
<div class="font-medium text-base text-gray-800"><%= current_user.email %></div>
|
||||
<div class="font-medium text-sm text-gray-500"><%= current_user.email %></div>
|
||||
<div class="font-medium text-base text-white"><%= current_user.email %></div>
|
||||
<div class="font-medium text-sm text-purple-200"><%= current_user.email %></div>
|
||||
</div>
|
||||
|
||||
<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 "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 "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 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,
|
||||
data: {
|
||||
controller: "logout",
|
||||
@@ -124,12 +105,12 @@
|
||||
login_url_value: new_user_session_path,
|
||||
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>
|
||||
<% else %>
|
||||
<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 "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 "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 px-3 py-2 rounded-md text-base font-medium text-white hover:text-purple-200 hover:bg-purple-700" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
@@ -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 %>
|
||||
<%= f.hidden_field :reset_password_token %>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :password, "New password" %><br />
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<%= f.label :password, "Nouveau mot de passe", class: "block text-sm font-medium text-neutral-700" %>
|
||||
<% 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 %>
|
||||
<%= 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 class="field">
|
||||
<%= f.label :password_confirmation, "Confirm new password" %><br />
|
||||
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<% end %>
|
||||
|
||||
<%= render "devise/shared/links" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,16 +1,35 @@
|
||||
<h2>Forgot your password?</h2>
|
||||
|
||||
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
|
||||
<%= render "devise/shared/error_messages", resource: resource %>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :email %><br />
|
||||
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
|
||||
<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>
|
||||
|
||||
<div class="actions">
|
||||
<%= f.submit "Send me reset password instructions" %>
|
||||
<%= 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 %>
|
||||
|
||||
<div>
|
||||
<%= f.label :email, class: "block text-sm font-medium text-neutral-700" %>
|
||||
<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>
|
||||
<%= 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>
|
||||
<% end %>
|
||||
|
||||
<%= render "devise/shared/links" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :email %><br />
|
||||
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<%= 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>
|
||||
|
||||
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
|
||||
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
|
||||
<% end %>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
|
||||
<%= f.password_field :password, autocomplete: "new-password" %>
|
||||
<% if @minimum_password_length %>
|
||||
<br />
|
||||
<em><%= @minimum_password_length %> characters minimum</em>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :password_confirmation %><br />
|
||||
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
|
||||
</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 class="text-sm text-neutral-600">
|
||||
En attente de confirmation pour : <%= resource.unconfirmed_email %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<h3>Cancel my account</h3>
|
||||
<div>
|
||||
<%= f.label :password, "Nouveau mot de passe", class: "block text-sm font-medium text-neutral-700" %>
|
||||
<i class="text-sm text-neutral-500">(laissez vide si vous ne souhaitez pas le changer)</i>
|
||||
<%= 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-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
|
||||
</div>
|
||||
|
||||
<div>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?", turbo_confirm: "Are you sure?" }, method: :delete %></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>
|
||||
|
||||
<%= link_to "Back", :back %>
|
||||
<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 %>
|
||||
|
||||
<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>
|
||||
|
||||
<%= link_to "Retour", :back, class: "text-center block text-purple-600 hover:text-purple-500" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :email %><br />
|
||||
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<%= 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 class="field">
|
||||
<%= f.label :password %>
|
||||
<div>
|
||||
<%= f.label :password, class: "block text-sm font-medium text-neutral-700" %>
|
||||
<% if @minimum_password_length %>
|
||||
<em>(<%= @minimum_password_length %> characters minimum)</em>
|
||||
<% end %><br />
|
||||
<%= f.password_field :password, autocomplete: "new-password" %>
|
||||
<em class="text-sm text-neutral-500">(<%= @minimum_password_length %> caractères minimum)</em>
|
||||
<% end %>
|
||||
<%= 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 class="field">
|
||||
<%= f.label :password_confirmation %><br />
|
||||
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
|
||||
<div>
|
||||
<%= f.label :password_confirmation, 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-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<% end %>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -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>
|
||||
<%= 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-white">
|
||||
<h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">
|
||||
Connexion à votre compte
|
||||
</h2>
|
||||
<p class="mt-2 text-center text-sm text-gray-400">
|
||||
<p class="mt-2 text-center text-sm text-neutral-600">
|
||||
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
|
||||
</a>
|
||||
</p>
|
||||
@@ -22,14 +22,14 @@
|
||||
<div class="field">
|
||||
<%= f.label :email, class: "sr-only" %>
|
||||
<%= 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" %>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :password, class: "sr-only" %>
|
||||
<%= 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" %>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,28 +37,28 @@
|
||||
<% if devise_mapping.rememberable? %>
|
||||
<div class="flex items-center justify-between">
|
||||
<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" %>
|
||||
<label for="user_remember_me" class="ml-2 block text-sm text-gray-400"> Se souvenir de moi </label>
|
||||
<%= 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-neutral-700"> Se souvenir de moi </label>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<% end %>
|
||||
|
||||
<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>
|
||||
<% end %>
|
||||
|
||||
<div class="mt-6">
|
||||
<div class="relative">
|
||||
<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 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>
|
||||
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
<% if resource.errors.any? %>
|
||||
<div id="error_explanation" data-turbo-cache="false">
|
||||
<h2>
|
||||
<div id="error_explanation" data-turbo-cache="false" class="bg-red-50 border border-red-200 rounded-md p-4 mb-4">
|
||||
<h2 class="text-lg font-medium text-red-800 mb-3">
|
||||
<%= I18n.t("errors.messages.not_saved",
|
||||
count: resource.errors.count,
|
||||
resource: resource.class.model_name.human.downcase)
|
||||
%>
|
||||
resource: resource.class.model_name.human.downcase) %>
|
||||
</h2>
|
||||
<ul>
|
||||
<ul class="list-disc list-inside space-y-1">
|
||||
<% resource.errors.full_messages.each do |message| %>
|
||||
<li><%= message %></li>
|
||||
<li class="text-sm text-red-700"><%= message %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -1,38 +1,38 @@
|
||||
<div class="">
|
||||
<div class="space-y-4">
|
||||
<%- 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" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%- 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">
|
||||
<%= link_to "S'inscrire", new_registration_path(resource_name), class: "" %>
|
||||
<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: "block" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%- 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">
|
||||
<%= link_to "Mot de passe oublié ?", new_password_path(resource_name), class: "" %>
|
||||
<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: "block" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%- 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">
|
||||
<%= link_to "Vous n'avez pas reçu les instructions de confirmation ?", new_confirmation_path(resource_name), class: "" %>
|
||||
<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: "block" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%- 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">
|
||||
<%= link_to "Vous n'avez pas reçu les instructions de déverrouillage?", new_unlock_path(resource_name), class: "" %>
|
||||
<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: "block" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%- if devise_mapping.omniauthable? %>
|
||||
<%- 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">
|
||||
<%= button_to "Se connecter avec #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false }, class: "" %>
|
||||
<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: "block" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html class="h-full bg-neutral-50">
|
||||
<head>
|
||||
<title><%= content_for(:title) || "Aperonight" %></title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
@@ -19,21 +19,27 @@
|
||||
|
||||
<%# Includes all stylesheet files in app/assets/stylesheets %>
|
||||
<%= 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" %>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="header">
|
||||
<body class="h-full font-sans text-neutral-900 antialiased">
|
||||
<div class="min-h-full">
|
||||
<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" %>
|
||||
</div><!-- /#header -->
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<%= yield %>
|
||||
</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" %>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
<!-- Hero Section -->
|
||||
<section class="relative bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-700 min-h-[70vh] flex items-center">
|
||||
<div class="absolute inset-0 bg-black bg-opacity-40"></div>
|
||||
<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-white bg-opacity-60"></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">
|
||||
<h1 class="text-5xl md:text-7xl font-bold text-neutral-900 mb-6 leading-tight">
|
||||
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
|
||||
</span>
|
||||
</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.
|
||||
</p>
|
||||
<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 "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>
|
||||
</section>
|
||||
|
||||
<!-- 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="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
|
||||
</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
|
||||
</p>
|
||||
</div>
|
||||
@@ -33,13 +33,13 @@
|
||||
<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 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-100 to-indigo-100 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">
|
||||
<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>
|
||||
</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
|
||||
</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>
|
||||
@@ -49,13 +49,13 @@
|
||||
|
||||
<!-- 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 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-100 to-indigo-100 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">
|
||||
<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>+
|
||||
</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
|
||||
</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>
|
||||
@@ -65,13 +65,13 @@
|
||||
|
||||
<!-- 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 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-100 to-indigo-100 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">
|
||||
<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
|
||||
</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
|
||||
</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>
|
||||
@@ -83,51 +83,51 @@
|
||||
<!-- 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">
|
||||
<div class="text-3xl font-bold text-purple-600">
|
||||
<span class="counter" data-controller="counter" data-counter-target-value="79">0</span>%
|
||||
</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 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>
|
||||
</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 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>
|
||||
</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 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>%
|
||||
</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>
|
||||
</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="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 shadow-2xl">
|
||||
<h2 class="text-3xl font-bold text-white text-center mb-8">Trouvez votre prochaine soirée</h2>
|
||||
<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-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>
|
||||
<label class="block text-sm font-medium text-gray-300 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">
|
||||
<label class="block text-sm font-medium text-neutral-700 mb-2">Quand ?</label>
|
||||
<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>
|
||||
<label class="block text-sm font-medium text-gray-300 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">
|
||||
<label class="block text-sm font-medium text-neutral-700 mb-2">Type d'événement</label>
|
||||
<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="club">Soirées club</option>
|
||||
<option value="afterwork">Afterworks</option>
|
||||
@@ -137,8 +137,8 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 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">
|
||||
<label class="block text-sm font-medium text-neutral-700 mb-2">Genre musical</label>
|
||||
<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="house">House/Techno</option>
|
||||
<option value="hiphop">Hip-Hop</option>
|
||||
@@ -157,28 +157,28 @@
|
||||
</section>
|
||||
|
||||
<!-- 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="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold text-white 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>
|
||||
<h2 class="text-4xl font-bold text-neutral-900 mb-4">Événements du moment</h2>
|
||||
<p class="text-xl text-neutral-600">Les soirées et concerts les plus populaires cette semaine</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<!-- 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="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
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<h3 class="text-2xl font-bold text-white">TECHNO NIGHT</h3>
|
||||
<span class="text-purple-400 font-semibold">25€</span>
|
||||
<h3 class="text-2xl font-bold text-neutral-900">TECHNO NIGHT</h3>
|
||||
<span class="text-purple-600 font-semibold">25€</span>
|
||||
</div>
|
||||
<p class="text-gray-400 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-600 mb-2">Rex Club, Paris 2ème</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">
|
||||
Réserver ma place
|
||||
</button>
|
||||
@@ -186,19 +186,19 @@
|
||||
</div>
|
||||
|
||||
<!-- 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="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
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<h3 class="text-2xl font-bold text-white">SUNSET APÉRO</h3>
|
||||
<span class="text-blue-400 font-semibold">15€</span>
|
||||
<h3 class="text-2xl font-bold text-neutral-900">SUNSET APÉRO</h3>
|
||||
<span class="text-blue-600 font-semibold">15€</span>
|
||||
</div>
|
||||
<p class="text-gray-400 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-600 mb-2">Nuba, Paris 13ème</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">
|
||||
Réserver ma place
|
||||
</button>
|
||||
@@ -206,19 +206,19 @@
|
||||
</div>
|
||||
|
||||
<!-- 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="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
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<h3 class="text-2xl font-bold text-white">LIVE SESSION</h3>
|
||||
<span class="text-green-400 font-semibold">20€</span>
|
||||
<h3 class="text-2xl font-bold text-neutral-900">LIVE SESSION</h3>
|
||||
<span class="text-green-600 font-semibold">20€</span>
|
||||
</div>
|
||||
<p class="text-gray-400 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-600 mb-2">La Bellevilloise, Paris 20ème</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">
|
||||
Réserver ma place
|
||||
</button>
|
||||
@@ -227,7 +227,7 @@
|
||||
</div>
|
||||
|
||||
<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 →
|
||||
</button>
|
||||
</div>
|
||||
@@ -235,11 +235,11 @@
|
||||
</section>
|
||||
|
||||
<!-- 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="text-center mb-16">
|
||||
<h2 class="text-4xl font-bold text-white 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>
|
||||
<h2 class="text-4xl font-bold text-neutral-900 mb-4">Pourquoi choisir <%= Rails.application.config.app_name %> ?</h2>
|
||||
<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 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>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-white 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>
|
||||
<h3 class="text-2xl font-bold text-neutral-900 mb-3">Découverte facile</h3>
|
||||
<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 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>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-white 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>
|
||||
<h3 class="text-2xl font-bold text-neutral-900 mb-3">Réservation sécurisée</h3>
|
||||
<p class="text-neutral-600 leading-relaxed">Paiement 100% sécurisé et billets électroniques avec QR code sur votre mobile</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-white 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>
|
||||
<h3 class="text-2xl font-bold text-neutral-900 mb-3">Accès rapide</h3>
|
||||
<p class="text-neutral-600 leading-relaxed">Entrée express avec validation mobile de vos billets. Plus besoin d'imprimer !</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<h2 class="text-4xl font-bold text-white 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>
|
||||
<h2 class="text-4xl font-bold text-neutral-900 mb-6">Prêt à vivre la nuit parisienne ?</h2>
|
||||
<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">
|
||||
S'inscrire gratuitement
|
||||
</button>
|
||||
|
||||
@@ -1,2 +1,47 @@
|
||||
<h1>Pages#legals</h1>
|
||||
<p>Find me in app/views/pages/legals.html.erb</p>
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<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>
|
||||
|
||||
@@ -19,6 +19,37 @@ module.exports = {
|
||||
},
|
||||
extend: {
|
||||
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))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
|
||||
Reference in New Issue
Block a user