develop #3
495
.superdesign/design_iterations/aperonight_design_system.css
Normal file
495
.superdesign/design_iterations/aperonight_design_system.css
Normal file
@@ -0,0 +1,495 @@
|
|||||||
|
/**
|
||||||
|
* Aperonight Design System
|
||||||
|
* Generated from homepage analysis
|
||||||
|
* A modern, professional design system for event platforms
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* === ROOT VARIABLES === */
|
||||||
|
:root {
|
||||||
|
/* Brand Colors */
|
||||||
|
--brand-primary: #667eea;
|
||||||
|
--brand-secondary: #764ba2;
|
||||||
|
--brand-accent: #facc15; /* yellow-400 */
|
||||||
|
--brand-accent-dark: #eab308; /* yellow-500 */
|
||||||
|
|
||||||
|
/* Neutral Colors */
|
||||||
|
--color-white: #ffffff;
|
||||||
|
--color-black: #000000;
|
||||||
|
--color-gray-50: #f9fafb;
|
||||||
|
--color-gray-100: #f3f4f6;
|
||||||
|
--color-gray-200: #e5e7eb;
|
||||||
|
--color-gray-300: #d1d5db;
|
||||||
|
--color-gray-400: #9ca3af;
|
||||||
|
--color-gray-500: #6b7280;
|
||||||
|
--color-gray-600: #4b5563;
|
||||||
|
--color-gray-700: #374151;
|
||||||
|
--color-gray-800: #1f2937;
|
||||||
|
--color-gray-900: #111827;
|
||||||
|
|
||||||
|
/* Purple Shades */
|
||||||
|
--color-purple-600: #9333ea;
|
||||||
|
--color-purple-700: #7c3aed;
|
||||||
|
--color-purple-800: #6b21a8;
|
||||||
|
|
||||||
|
/* Blue Shades */
|
||||||
|
--color-blue-600: #2563eb;
|
||||||
|
--color-blue-700: #1d4ed8;
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
--font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
||||||
|
--font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||||
|
|
||||||
|
/* Font Sizes */
|
||||||
|
--text-xs: 0.75rem; /* 12px */
|
||||||
|
--text-sm: 0.875rem; /* 14px */
|
||||||
|
--text-base: 1rem; /* 16px */
|
||||||
|
--text-lg: 1.125rem; /* 18px */
|
||||||
|
--text-xl: 1.25rem; /* 20px */
|
||||||
|
--text-2xl: 1.5rem; /* 24px */
|
||||||
|
--text-3xl: 1.875rem; /* 30px */
|
||||||
|
--text-4xl: 2.25rem; /* 36px */
|
||||||
|
--text-5xl: 3rem; /* 48px */
|
||||||
|
--text-6xl: 3.75rem; /* 60px */
|
||||||
|
|
||||||
|
/* Font Weights */
|
||||||
|
--font-medium: 500;
|
||||||
|
--font-semibold: 600;
|
||||||
|
--font-bold: 700;
|
||||||
|
|
||||||
|
/* Spacing Scale */
|
||||||
|
--space-1: 0.25rem; /* 4px */
|
||||||
|
--space-2: 0.5rem; /* 8px */
|
||||||
|
--space-3: 0.75rem; /* 12px */
|
||||||
|
--space-4: 1rem; /* 16px */
|
||||||
|
--space-6: 1.5rem; /* 24px */
|
||||||
|
--space-8: 2rem; /* 32px */
|
||||||
|
--space-12: 3rem; /* 48px */
|
||||||
|
--space-16: 4rem; /* 64px */
|
||||||
|
--space-24: 6rem; /* 96px */
|
||||||
|
|
||||||
|
/* Border Radius */
|
||||||
|
--radius-sm: 0.375rem; /* 6px */
|
||||||
|
--radius-md: 0.5rem; /* 8px */
|
||||||
|
--radius-lg: 0.75rem; /* 12px */
|
||||||
|
--radius-xl: 1rem; /* 16px */
|
||||||
|
--radius-2xl: 1.25rem; /* 20px */
|
||||||
|
--radius-3xl: 1.5rem; /* 24px */
|
||||||
|
--radius-full: 9999px;
|
||||||
|
|
||||||
|
/* Shadows */
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||||
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||||
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||||
|
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||||
|
|
||||||
|
/* Gradients */
|
||||||
|
--gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
|
||||||
|
--gradient-overlay: rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
/* Transitions */
|
||||||
|
--transition-fast: all 0.2s ease;
|
||||||
|
--transition-medium: all 0.3s ease;
|
||||||
|
--transition-slow: all 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === BASE STYLES === */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
line-height: 1.5;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
font-family: var(--font-family-sans);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-family-sans);
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--color-gray-900);
|
||||||
|
background-color: var(--color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === TYPOGRAPHY SYSTEM === */
|
||||||
|
.text-xs { font-size: var(--text-xs); }
|
||||||
|
.text-sm { font-size: var(--text-sm); }
|
||||||
|
.text-base { font-size: var(--text-base); }
|
||||||
|
.text-lg { font-size: var(--text-lg); }
|
||||||
|
.text-xl { font-size: var(--text-xl); }
|
||||||
|
.text-2xl { font-size: var(--text-2xl); }
|
||||||
|
.text-3xl { font-size: var(--text-3xl); }
|
||||||
|
.text-4xl { font-size: var(--text-4xl); }
|
||||||
|
.text-5xl { font-size: var(--text-5xl); }
|
||||||
|
.text-6xl { font-size: var(--text-6xl); }
|
||||||
|
|
||||||
|
.font-medium { font-weight: var(--font-medium); }
|
||||||
|
.font-semibold { font-weight: var(--font-semibold); }
|
||||||
|
.font-bold { font-weight: var(--font-bold); }
|
||||||
|
|
||||||
|
.leading-tight { line-height: 1.25; }
|
||||||
|
.leading-normal { line-height: 1.5; }
|
||||||
|
.leading-relaxed { line-height: 1.625; }
|
||||||
|
|
||||||
|
/* === BUTTON SYSTEM === */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: var(--space-3) var(--space-6);
|
||||||
|
font-size: var(--text-base);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--color-white);
|
||||||
|
color: var(--color-gray-900);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: var(--color-gray-100);
|
||||||
|
box-shadow: var(--shadow-xl);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--color-white);
|
||||||
|
border: 2px solid var(--color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background-color: var(--color-white);
|
||||||
|
color: var(--color-gray-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-accent {
|
||||||
|
background-color: var(--color-purple-600);
|
||||||
|
color: var(--color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-accent:hover {
|
||||||
|
background-color: var(--color-purple-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dark {
|
||||||
|
background-color: var(--color-gray-900);
|
||||||
|
color: var(--color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dark:hover {
|
||||||
|
background-color: var(--color-gray-800);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button Sizes */
|
||||||
|
.btn-sm {
|
||||||
|
padding: var(--space-2) var(--space-4);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-lg {
|
||||||
|
padding: var(--space-4) var(--space-8);
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === CARD SYSTEM === */
|
||||||
|
.card {
|
||||||
|
background-color: var(--color-white);
|
||||||
|
border-radius: var(--radius-2xl);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
overflow: hidden;
|
||||||
|
transition: var(--transition-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-event {
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-event-image {
|
||||||
|
aspect-ratio: 4/3;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: var(--radius-2xl);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-event-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: var(--transition-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-event:hover .card-event-image img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-event-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: var(--space-4);
|
||||||
|
left: var(--space-4);
|
||||||
|
background-color: var(--brand-accent);
|
||||||
|
color: var(--color-gray-900);
|
||||||
|
padding: var(--space-1) var(--space-3);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-event-price {
|
||||||
|
position: absolute;
|
||||||
|
bottom: var(--space-4);
|
||||||
|
right: var(--space-4);
|
||||||
|
background-color: rgba(255, 255, 255, 0.9);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
color: var(--color-gray-900);
|
||||||
|
padding: var(--space-1) var(--space-3);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-event-content {
|
||||||
|
padding: var(--space-6);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-event-title {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
color: var(--color-gray-900);
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-event:hover .card-event-title {
|
||||||
|
color: var(--color-purple-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-event-meta {
|
||||||
|
color: var(--color-gray-600);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-event-description {
|
||||||
|
color: var(--color-gray-500);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
line-height: var(--leading-relaxed);
|
||||||
|
max-width: 20rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === HERO SYSTEM === */
|
||||||
|
.hero {
|
||||||
|
background: var(--gradient-primary);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: var(--gradient-overlay);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
color: var(--color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: var(--text-4xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
line-height: var(--leading-tight);
|
||||||
|
margin-bottom: var(--space-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
margin-bottom: var(--space-8);
|
||||||
|
max-width: 32rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-accent {
|
||||||
|
color: var(--brand-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Hero */
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.hero-title {
|
||||||
|
font-size: var(--text-6xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === METRICS SYSTEM === */
|
||||||
|
.metrics-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: var(--space-8);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.metrics-grid {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-item {
|
||||||
|
transition: var(--transition-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-number {
|
||||||
|
font-size: var(--text-4xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
color: var(--color-purple-600);
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.metric-number {
|
||||||
|
font-size: var(--text-5xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-label {
|
||||||
|
color: var(--color-gray-600);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === SECTION SYSTEM === */
|
||||||
|
.section {
|
||||||
|
padding: var(--space-16) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--space-12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: var(--text-3xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
color: var(--color-gray-900);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.section-title {
|
||||||
|
font-size: var(--text-4xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-description {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
color: var(--color-gray-600);
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === GRID SYSTEM === */
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-1 { grid-template-columns: 1fr; }
|
||||||
|
.grid-2 { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.grid-3 { grid-template-columns: repeat(3, 1fr); }
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.grid-md-2 { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.grid-md-3 { grid-template-columns: repeat(3, 1fr); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.grid-lg-3 { grid-template-columns: repeat(3, 1fr); }
|
||||||
|
.grid-lg-4 { grid-template-columns: repeat(4, 1fr); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === UTILITY CLASSES === */
|
||||||
|
.container {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-left: var(--space-4);
|
||||||
|
padding-right: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-center { text-align: center; }
|
||||||
|
.text-left { text-align: left; }
|
||||||
|
.text-right { text-align: right; }
|
||||||
|
|
||||||
|
.bg-white { background-color: var(--color-white); }
|
||||||
|
.bg-gray-50 { background-color: var(--color-gray-50); }
|
||||||
|
.bg-gray-900 { background-color: var(--color-gray-900); }
|
||||||
|
|
||||||
|
.text-white { color: var(--color-white); }
|
||||||
|
.text-gray-600 { color: var(--color-gray-600); }
|
||||||
|
.text-gray-900 { color: var(--color-gray-900); }
|
||||||
|
|
||||||
|
.rounded-full { border-radius: var(--radius-full); }
|
||||||
|
.rounded-2xl { border-radius: var(--radius-2xl); }
|
||||||
|
|
||||||
|
.shadow-lg { box-shadow: var(--shadow-lg); }
|
||||||
|
.shadow-xl { box-shadow: var(--shadow-xl); }
|
||||||
|
|
||||||
|
.mb-2 { margin-bottom: var(--space-2); }
|
||||||
|
.mb-4 { margin-bottom: var(--space-4); }
|
||||||
|
.mb-6 { margin-bottom: var(--space-6); }
|
||||||
|
.mb-8 { margin-bottom: var(--space-8); }
|
||||||
|
.mb-12 { margin-bottom: var(--space-12); }
|
||||||
|
|
||||||
|
.p-4 { padding: var(--space-4); }
|
||||||
|
.p-6 { padding: var(--space-6); }
|
||||||
|
.p-8 { padding: var(--space-8); }
|
||||||
|
|
||||||
|
.flex { display: flex; }
|
||||||
|
.items-center { align-items: center; }
|
||||||
|
.justify-center { justify-content: center; }
|
||||||
|
.gap-4 { gap: var(--space-4); }
|
||||||
|
|
||||||
|
.transition { transition: var(--transition-fast); }
|
||||||
|
|
||||||
|
.max-w-lg { max-width: 32rem; }
|
||||||
|
.max-w-2xl { max-width: 42rem; }
|
||||||
|
.max-w-4xl { max-width: 56rem; }
|
||||||
|
|
||||||
|
/* === RESPONSIVE UTILITIES === */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.sm\:flex-col { flex-direction: column; }
|
||||||
|
.sm\:text-center { text-align: center; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.sm\:flex-row { flex-direction: row; }
|
||||||
|
.sm\:flex-1 { flex: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.lg\:justify-start { justify-content: flex-start; }
|
||||||
|
.lg\:text-left { text-align: left; }
|
||||||
|
}
|
||||||
470
.superdesign/design_iterations/aperonight_design_system_1.html
Normal file
470
.superdesign/design_iterations/aperonight_design_system_1.html
Normal file
@@ -0,0 +1,470 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Aperonight Design System</title>
|
||||||
|
<link rel="stylesheet" href="aperonight_design_system.css">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
<style>
|
||||||
|
/* Additional showcase styles */
|
||||||
|
.showcase-section {
|
||||||
|
padding: 3rem 0;
|
||||||
|
border-bottom: 1px solid var(--color-gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.showcase-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-swatch {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
border: 1px solid var(--color-gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-circle {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid var(--color-gray-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
.component-demo {
|
||||||
|
padding: 2rem;
|
||||||
|
background: var(--color-gray-50);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
background: var(--color-white);
|
||||||
|
padding: 1rem 0;
|
||||||
|
border-bottom: 1px solid var(--color-gray-200);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
color: var(--color-gray-600);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
transition: var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover {
|
||||||
|
color: var(--color-purple-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
color: var(--color-gray-900);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="container navbar-content">
|
||||||
|
<div class="logo">Aperonight Design System</div>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#colors" class="nav-link">Couleurs</a></li>
|
||||||
|
<li><a href="#typography" class="nav-link">Typographie</a></li>
|
||||||
|
<li><a href="#buttons" class="nav-link">Boutons</a></li>
|
||||||
|
<li><a href="#cards" class="nav-link">Cartes</a></li>
|
||||||
|
<li><a href="#components" class="nav-link">Composants</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="container">
|
||||||
|
<div class="text-center">
|
||||||
|
<h1 class="hero-title">
|
||||||
|
Système de Design
|
||||||
|
<span class="hero-accent">Aperonight</span>
|
||||||
|
</h1>
|
||||||
|
<p class="hero-subtitle">
|
||||||
|
Un système de design moderne et cohérent pour créer des expériences exceptionnelles dans le domaine des événements après-travail.
|
||||||
|
</p>
|
||||||
|
<div class="flex gap-4 justify-center">
|
||||||
|
<a href="#colors" class="btn btn-primary btn-lg">
|
||||||
|
<i data-lucide="palette" class="w-5 h-5"></i>
|
||||||
|
Explorer les Composants
|
||||||
|
</a>
|
||||||
|
<a href="#" class="btn btn-secondary btn-lg">
|
||||||
|
<i data-lucide="download" class="w-5 h-5"></i>
|
||||||
|
Télécharger
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Color Palette -->
|
||||||
|
<section id="colors" class="showcase-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Palette de Couleurs</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Les couleurs de base du système Aperonight, conçues pour transmettre professionnalisme et modernité.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="showcase-grid">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">Couleurs de Marque</h3>
|
||||||
|
<div class="grid grid-1 gap-4">
|
||||||
|
<div class="color-swatch">
|
||||||
|
<div class="color-circle" style="background: #667eea;"></div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold">Primary Blue</div>
|
||||||
|
<div class="text-sm text-gray-600">#667eea</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="color-swatch">
|
||||||
|
<div class="color-circle" style="background: #764ba2;"></div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold">Secondary Purple</div>
|
||||||
|
<div class="text-sm text-gray-600">#764ba2</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="color-swatch">
|
||||||
|
<div class="color-circle" style="background: #facc15;"></div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold">Accent Yellow</div>
|
||||||
|
<div class="text-sm text-gray-600">#facc15</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">Couleurs Neutres</h3>
|
||||||
|
<div class="grid grid-1 gap-4">
|
||||||
|
<div class="color-swatch">
|
||||||
|
<div class="color-circle" style="background: #ffffff; border: 2px solid #e5e7eb;"></div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold">White</div>
|
||||||
|
<div class="text-sm text-gray-600">#ffffff</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="color-swatch">
|
||||||
|
<div class="color-circle" style="background: #f3f4f6;"></div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold">Gray 100</div>
|
||||||
|
<div class="text-sm text-gray-600">#f3f4f6</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="color-swatch">
|
||||||
|
<div class="color-circle" style="background: #4b5563;"></div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold">Gray 600</div>
|
||||||
|
<div class="text-sm text-gray-600">#4b5563</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="color-swatch">
|
||||||
|
<div class="color-circle" style="background: #111827;"></div>
|
||||||
|
<div>
|
||||||
|
<div class="font-semibold">Gray 900</div>
|
||||||
|
<div class="text-sm text-gray-600">#111827</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Typography -->
|
||||||
|
<section id="typography" class="showcase-section bg-gray-50">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Typographie</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Une hiérarchie typographique claire et lisible pour tous les contenus.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="component-demo bg-white">
|
||||||
|
<h1 class="text-6xl font-bold mb-4">Hero Title - 60px Bold</h1>
|
||||||
|
<h2 class="text-4xl font-bold mb-4">Section Title - 36px Bold</h2>
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">Card Title - 24px Semibold</h3>
|
||||||
|
<p class="text-xl mb-4">Large Text - 20px Regular</p>
|
||||||
|
<p class="text-base mb-4">Body Text - 16px Regular</p>
|
||||||
|
<p class="text-sm text-gray-600">Small Text - 14px Regular</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Buttons -->
|
||||||
|
<section id="buttons" class="showcase-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Système de Boutons</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Différents styles de boutons pour diverses actions et hiérarchies.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="component-demo">
|
||||||
|
<div class="grid grid-md-2 gap-8">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4">Styles Principaux</h3>
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<button class="btn btn-primary">
|
||||||
|
<i data-lucide="calendar"></i>
|
||||||
|
Bouton Principal
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-secondary">
|
||||||
|
<i data-lucide="user-plus"></i>
|
||||||
|
Bouton Secondaire
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-accent">
|
||||||
|
<i data-lucide="star"></i>
|
||||||
|
Bouton Accent
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-dark">
|
||||||
|
<i data-lucide="arrow-right"></i>
|
||||||
|
Bouton Sombre
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4">Tailles</h3>
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<button class="btn btn-primary btn-sm">
|
||||||
|
<i data-lucide="eye"></i>
|
||||||
|
Petit Bouton
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-primary">
|
||||||
|
<i data-lucide="calendar"></i>
|
||||||
|
Bouton Normal
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-primary btn-lg">
|
||||||
|
<i data-lucide="search"></i>
|
||||||
|
Grand Bouton
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Cards -->
|
||||||
|
<section id="cards" class="showcase-section bg-gray-50">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Système de Cartes</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Cartes événements et composants modulaires.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-md-2 lg:grid-lg-3 gap-8">
|
||||||
|
<!-- Event Card Example -->
|
||||||
|
<div class="card card-event">
|
||||||
|
<div class="card-event-image">
|
||||||
|
<img src="https://images.unsplash.com/photo-1511578314322-379afb476865?w=600&h=400&fit=crop" alt="Événement exemple">
|
||||||
|
<div class="card-event-badge">★ En vedette</div>
|
||||||
|
<div class="card-event-price">À partir de €25</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-event-content">
|
||||||
|
<h3 class="card-event-title">AFTERWORK ROOFTOP</h3>
|
||||||
|
<div class="card-event-meta mb-4">
|
||||||
|
<div class="flex items-center justify-center gap-2 text-sm mb-2">
|
||||||
|
<i data-lucide="calendar" class="w-4 h-4"></i>
|
||||||
|
Vendredi 15 Décembre • 18:30
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-center gap-2 text-sm">
|
||||||
|
<i data-lucide="map-pin" class="w-4 h-4"></i>
|
||||||
|
Rooftop Bar Paris
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="card-event-description">
|
||||||
|
Rejoignez-nous pour un afterwork exclusif avec vue panoramique sur Paris.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Simple Card -->
|
||||||
|
<div class="card p-6">
|
||||||
|
<h3 class="text-xl font-semibold mb-2">Carte Simple</h3>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
Une carte basique pour du contenu général avec hover effects.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Metric Card -->
|
||||||
|
<div class="card p-6 text-center">
|
||||||
|
<div class="metric-number">2.5k+</div>
|
||||||
|
<div class="metric-label">Membres Actifs</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Components -->
|
||||||
|
<section id="components" class="showcase-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Composants UI</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Éléments d'interface réutilisables pour construire des expériences cohérentes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="showcase-grid">
|
||||||
|
<!-- Hero Component -->
|
||||||
|
<div class="component-demo">
|
||||||
|
<h3 class="text-xl font-semibold mb-4">Section Hero</h3>
|
||||||
|
<div class="hero" style="min-height: 300px; border-radius: var(--radius-2xl);">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h2 class="hero-title" style="font-size: var(--text-3xl);">
|
||||||
|
Titre <span class="hero-accent">Héro</span>
|
||||||
|
</h2>
|
||||||
|
<p class="hero-subtitle" style="font-size: var(--text-base); max-width: 24rem; margin: 0 auto var(--space-6);">
|
||||||
|
Description du héro avec gradient de fond
|
||||||
|
</p>
|
||||||
|
<button class="btn btn-primary">Action Principale</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Metrics Grid -->
|
||||||
|
<div class="component-demo">
|
||||||
|
<h3 class="text-xl font-semibold mb-4">Grille de Métriques</h3>
|
||||||
|
<div class="metrics-grid">
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="metric-number">50+</div>
|
||||||
|
<div class="metric-label">Événements</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="metric-number">2.5k</div>
|
||||||
|
<div class="metric-label">Membres</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="metric-number">12</div>
|
||||||
|
<div class="metric-label">Ce mois-ci</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="metric-number">98%</div>
|
||||||
|
<div class="metric-label">Satisfaction</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Usage Guidelines -->
|
||||||
|
<section class="showcase-section bg-gray-50">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Guide d'Utilisation</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Principes et bonnes pratiques pour utiliser ce système de design.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-md-2 gap-8">
|
||||||
|
<div class="card p-6">
|
||||||
|
<h3 class="text-xl font-semibold mb-4">✨ Principes de Design</h3>
|
||||||
|
<ul class="space-y-3 text-gray-600">
|
||||||
|
<li><strong>Cohérence</strong> - Utilisez les composants de manière uniforme</li>
|
||||||
|
<li><strong>Accessibilité</strong> - Respectez les contrastes et la lisibilité</li>
|
||||||
|
<li><strong>Responsive</strong> - Adaptez à tous les écrans</li>
|
||||||
|
<li><strong>Performance</strong> - Optimisez les animations et interactions</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card p-6">
|
||||||
|
<h3 class="text-xl font-semibold mb-4">🎨 Utilisation des Couleurs</h3>
|
||||||
|
<ul class="space-y-3 text-gray-600">
|
||||||
|
<li><strong>Primary</strong> - Actions principales et navigation</li>
|
||||||
|
<li><strong>Accent</strong> - Éléments mis en évidence (badges, etc.)</li>
|
||||||
|
<li><strong>Gray</strong> - Textes, bordures et arrière-plans</li>
|
||||||
|
<li><strong>Purple</strong> - Métriques et éléments spéciaux</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-gray-900 text-white py-16">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h3 class="text-2xl font-bold mb-4">Système de Design Aperonight</h3>
|
||||||
|
<p class="text-gray-400 mb-8 max-w-2xl mx-auto">
|
||||||
|
Créé pour maintenir une expérience utilisateur cohérente et professionnelle à travers tous les points de contact Aperonight.
|
||||||
|
</p>
|
||||||
|
<div class="flex gap-4 justify-center">
|
||||||
|
<button class="btn btn-primary">
|
||||||
|
<i data-lucide="download"></i>
|
||||||
|
Télécharger le CSS
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-secondary">
|
||||||
|
<i data-lucide="github"></i>
|
||||||
|
Voir sur GitHub
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Initialize Lucide icons
|
||||||
|
lucide.createIcons();
|
||||||
|
|
||||||
|
// Smooth scrolling for navigation links
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add interaction effects
|
||||||
|
document.querySelectorAll('.card').forEach(card => {
|
||||||
|
card.addEventListener('mouseenter', function() {
|
||||||
|
this.style.transform = 'translateY(-4px)';
|
||||||
|
});
|
||||||
|
|
||||||
|
card.addEventListener('mouseleave', function() {
|
||||||
|
this.style.transform = 'translateY(0)';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -3,15 +3,26 @@
|
|||||||
class PagesController < ApplicationController
|
class PagesController < ApplicationController
|
||||||
before_action :authenticate_user!, only: [ :dashboard ]
|
before_action :authenticate_user!, only: [ :dashboard ]
|
||||||
|
|
||||||
# Homepage showing featured events
|
# Homepage showing featured events as landing page
|
||||||
#
|
#
|
||||||
# Display homepage with featured events and incoming ones
|
# Display homepage with featured events and site metrics for all users
|
||||||
def home
|
def home
|
||||||
@featured_events = Event.published.featured.limit(3)
|
# Featured events for the main grid (6-9 events like Shotgun)
|
||||||
|
@featured_events = Event.published.featured.includes(:ticket_types).limit(9)
|
||||||
if user_signed_in?
|
|
||||||
redirect_to(dashboard_path)
|
# If no featured events, show latest published events
|
||||||
|
if @featured_events.empty?
|
||||||
|
@featured_events = Event.published.includes(:ticket_types).order(created_at: :desc).limit(9)
|
||||||
end
|
end
|
||||||
|
|
||||||
|
# Upcoming events for additional content
|
||||||
|
@upcoming_events = Event.published.upcoming.limit(6)
|
||||||
|
|
||||||
|
# Site metrics for landing page (with realistic fake data for demo)
|
||||||
|
@total_events = [Event.published.count, 50].max # At least 50 events for demo
|
||||||
|
@total_users = [User.count, 2500].max # At least 2500 users for demo
|
||||||
|
@events_this_month = [Event.published.where(created_at: 1.month.ago..Time.current).count, 12].max # At least 12 this month
|
||||||
|
@active_cities = 5 # Fixed number for demo
|
||||||
end
|
end
|
||||||
|
|
||||||
# User dashboard showing personalized content
|
# User dashboard showing personalized content
|
||||||
|
|||||||
@@ -1,45 +1,26 @@
|
|||||||
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
|
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
<!-- Breadcrumb -->
|
<!-- Breadcrumb -->
|
||||||
<nav class="mb-6" aria-label="Breadcrumb">
|
<nav class="flex mb-6" aria-label="Breadcrumb">
|
||||||
<ol class="flex items-center space-x-2 text-sm">
|
<ol class="inline-flex items-center space-x-1 md:space-x-2 rounded-lg bg-white px-4 py-2 shadow-sm">
|
||||||
<%= link_to root_path, class: "text-gray-500 hover:text-purple-600 transition-colors" do %>
|
<li class="inline-flex items-center">
|
||||||
<svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<%= link_to "Accueil", root_path, class: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-purple-600" %>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
</li>
|
||||||
</svg>
|
<li>
|
||||||
Accueil
|
<div class="flex items-center">
|
||||||
<% end %>
|
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||||
<svg
|
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
|
||||||
class="w-4 h-4 text-gray-400"
|
</svg>
|
||||||
fill="none"
|
<%= link_to "Événements", events_path, class: "ml-1 text-sm font-medium text-gray-700 hover:text-purple-600 md:ml-2" %>
|
||||||
stroke="currentColor"
|
</div>
|
||||||
viewBox="0 0 24 24"
|
</li>
|
||||||
>
|
<li>
|
||||||
<path
|
<div class="flex items-center">
|
||||||
stroke-linecap="round"
|
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||||
stroke-linejoin="round"
|
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
|
||||||
stroke-width="2"
|
</svg>
|
||||||
d="M9 5l7 7-7 7"
|
<span class="ml-1 text-sm font-medium text-purple-600 md:ml-2 truncate max-w-xs"><%= @event.name %></span>
|
||||||
/>
|
</div>
|
||||||
</svg>
|
|
||||||
<%= link_to events_path, class: "text-gray-500 hover:text-purple-600 transition-colors" do %>
|
|
||||||
Événements
|
|
||||||
<% end %>
|
|
||||||
<svg
|
|
||||||
class="w-4 h-4 text-gray-400"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M9 5l7 7-7 7"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<li class="font-medium text-gray-900 truncate max-w-xs" aria-current="page">
|
|
||||||
<%= @event.name %>
|
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@@ -1,153 +1,263 @@
|
|||||||
<% content_for :title, "Aperonight - Découvrez des événements après-travail de luxe" %>
|
<% content_for :title, "Aperonight - Découvrez les meilleurs événements après-travail" %>
|
||||||
|
|
||||||
<!-- Hero Section -->
|
<!-- Hero Section inspired by Shotgun -->
|
||||||
<section class="hero">
|
<section class="hero-landing">
|
||||||
<div class="container">
|
<div class="hero-gradient my-8">
|
||||||
<div class="hero-content">
|
<div class="container mx-auto px-4 py-16 lg:py-24">
|
||||||
<h1>Découvrez les afterworks à Paris</h1>
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||||
<p class="subtitle">Connectez-vous avec des professionnels, explorez des lieux uniques et créez des expériences mémorables lors d'événements après-travail soigneusement sélectionnés dans votre ville.</p>
|
<!-- Hero Content -->
|
||||||
|
<div class="text-center lg:text-left">
|
||||||
|
<h1 class="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
||||||
|
Découvrez les
|
||||||
|
<span class="text-yellow-400">meilleurs événements</span>
|
||||||
|
afterworks
|
||||||
|
</h1>
|
||||||
|
<p class="text-xl text-gray-200 mb-8 max-w-lg">
|
||||||
|
Connectez-vous avec des professionnels et découvrez des événements exclusifs dans les plus beaux lieux de Paris.
|
||||||
|
</p>
|
||||||
|
|
||||||
<div class="cta-group">
|
<!-- CTA Buttons -->
|
||||||
<%= link_to "Explorer les événements", events_path, class: "btn btn-lg btn-primary" %>
|
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start max-w-lg">
|
||||||
<%= link_to "Organiser un événement", "#", class: "btn btn-lg btn-secondary" %>
|
<%= link_to events_path,
|
||||||
</div>
|
class: "w-full sm:flex-1 bg-white text-gray-900 px-6 py-3 rounded-full font-semibold text-base hover:bg-gray-100 transition-all duration-200 inline-flex items-center justify-center shadow-lg hover:shadow-xl" do %>
|
||||||
</div>
|
<i data-lucide="calendar" class="w-4 h-4 mr-2"></i>
|
||||||
</div>
|
Voir tous les événements
|
||||||
</section>
|
<% end %>
|
||||||
|
|
||||||
<%= render "components/event_finder" %>
|
<% unless user_signed_in? %>
|
||||||
|
<%= link_to new_user_registration_path,
|
||||||
<!-- Featured Events Section -->
|
class: "w-full sm:flex-1 border-2 border-white text-white px-6 py-3 rounded-full font-semibold text-base hover:bg-white hover:text-gray-900 transition-all duration-200 inline-flex items-center justify-center" do %>
|
||||||
<section class="section featured-events" id="events">
|
<i data-lucide="user-plus" class="w-4 h-4 mr-2"></i>
|
||||||
<div class="container">
|
Rejoindre gratuitement
|
||||||
<div class="section-header">
|
|
||||||
<h2 class="section-title">En vedette cette semaine</h2>
|
|
||||||
<p class="section-description">Événements de luxe sélectionnés avec soin qui réunissent les meilleurs professionnels et créateurs de la ville.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="featured-events-grid" data-controller="featured-event">
|
|
||||||
<% @featured_events.each do |event| %>
|
|
||||||
<div class="featured-event-card" data-featured-event-target="card">
|
|
||||||
<%= link_to event_path(event.slug, event) do %>
|
|
||||||
<img src="<%= event.image %>" alt="<%= event.name %>" class="featured-event-image" data-featured-event-target="animated">
|
|
||||||
<% end %>
|
|
||||||
<div class="featured-event-content">
|
|
||||||
<div class="featured-event-badges">
|
|
||||||
<% if event.featured? %>
|
|
||||||
<span class="badge badge-featured">★ En vedette</span>
|
|
||||||
<% end %>
|
<% end %>
|
||||||
<% if event.ticket_types.any? { |ticket_type| ticket_type.available_quantity > 0 } %>
|
<% end %>
|
||||||
<!--<span class="badge badge-available">Disponible</span>-->
|
</div>
|
||||||
<% end %>
|
</div>
|
||||||
</div>
|
|
||||||
<h3 class="featured-event-title"><%= event.name %></h3>
|
<!-- Hero Visual -->
|
||||||
<div class="featured-event-meta">
|
<div class="relative">
|
||||||
<div class="featured-event-meta-item">
|
<div class="bg-gray-800 rounded-3xl p-8 shadow-2xl">
|
||||||
<i data-lucide="calendar"></i>
|
<div class="text-center text-white">
|
||||||
<%= l(event.start_time, format: '%a, %b %d • %H:%M - %H:%M') %> <!-- Format: Wed, Jan 1 • 18:30 - 22:00 -->
|
<div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i data-lucide="calendar" class="w-8 h-8 text-gray-900"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="featured-event-meta-item">
|
<h3 class="text-2xl font-bold mb-2">Aperonight</h3>
|
||||||
<i data-lucide="map-pin"></i>
|
<p class="text-gray-300 mb-6">Événements premium après-travail</p>
|
||||||
<%= event.venue_name %>, <%= event.venue_address %>
|
<div class="grid grid-cols-3 gap-4 text-center">
|
||||||
|
<div>
|
||||||
|
<div class="text-2xl font-bold text-yellow-400"><%= @total_events %>+</div>
|
||||||
|
<div class="text-sm text-gray-400">Événements</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-2xl font-bold text-yellow-400"><%= (@total_users / 100.0).round(1) %>k</div>
|
||||||
|
<div class="text-sm text-gray-400">Membres</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-2xl font-bold text-yellow-400">5★</div>
|
||||||
|
<div class="text-sm text-gray-400">Satisfaction</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="featured-event-meta-item">
|
|
||||||
<i data-lucide="users"></i>
|
|
||||||
<%= event.tickets.sum(:quantity) %> participants • <%= event.tickets.joins(:ticket_type).where('ticket_types.quantity > ?', 0).count %> places disponibles
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="featured-event-description"><%= event.description %></p>
|
|
||||||
<div class="featured-event-footer">
|
|
||||||
<span class="featured-event-price">€<%= event.ticket_types.minimum(:price_cents).to_f / 100 %></span>
|
|
||||||
<%= link_to "Réserver une place", event_path(event.slug, event), class: "btn btn-sm btn-primary" %>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="text-align: center; margin-top: var(--space-12);">
|
|
||||||
<%= link_to "Voir tous les événements", events_path, class: "btn btn-lg btn-outline" %>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features Section -->
|
|
||||||
<section class="section features-section">
|
|
||||||
<div class="container">
|
|
||||||
<div class="section-header">
|
|
||||||
<h2 class="section-title">Pourquoi choisir Aperonight ?</h2>
|
|
||||||
<p class="section-description">Nous sélectionnons des expériences premium qui connectent les professionnels et créent des relations durables.</p>
|
|
||||||
</div>
|
|
||||||
<div class="features-grid">
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">
|
|
||||||
<i data-lucide="crown"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="feature-title">Sélection Premium</h3>
|
|
||||||
<p class="feature-description">Chaque événement est soigneusement sélectionné et conçu pour offrir une valeur exceptionnelle et des opportunités de réseautage.</p>
|
|
||||||
</div>
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">
|
|
||||||
<i data-lucide="shield-check"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="feature-title">Sécurisé et Fiable</h3>
|
|
||||||
<p class="feature-description">Paiements sécurisés, lieux vérifiés et communauté de confiance avec couverture d'assurance complète.</p>
|
|
||||||
</div>
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">
|
|
||||||
<i data-lucide="users-2"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="feature-title">Réseautage de Qualité</h3>
|
|
||||||
<p class="feature-description">Connectez-vous avec des professionnels vérifiés, des entrepreneurs et des leaders de l'industrie dans des environnements intimes.</p>
|
|
||||||
</div>
|
|
||||||
<div class="feature-card">
|
|
||||||
<div class="feature-icon">
|
|
||||||
<i data-lucide="zap"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="feature-title">Réservation Instantanée</h3>
|
|
||||||
<p class="feature-description">Processus de réservation fluide avec confirmation instantanée et gestion d'événement facile.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Stats Section -->
|
<!-- Featured Events Section -->
|
||||||
<section class="section stats-section">
|
<section class="py-16 bg-white">
|
||||||
<div class="container">
|
<div class="container mx-auto px-4">
|
||||||
<div class="stats-grid">
|
<!-- Section Header -->
|
||||||
<div class="stat-item" data-controller="counter" data-action="counter:scroll->counter#animate">
|
<div class="text-center mb-12">
|
||||||
<span class="stat-number" data-target-value="150">0</span>
|
<h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
|
||||||
<div class="stat-label">Événements Mensuels</div>
|
ÉVÉNEMENTS POPULAIRES À PARIS
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
|
||||||
|
Découvrez une sélection d'événements après-travail soigneusement choisis dans les plus beaux lieux de la capitale.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Events Grid -->
|
||||||
|
<% if @featured_events.any? %>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
||||||
|
<% @featured_events.each do |event| %>
|
||||||
|
<div class="group cursor-pointer">
|
||||||
|
<%= link_to event_path(event.slug, event), class: "block" do %>
|
||||||
|
<!-- Event Image -->
|
||||||
|
<div class="relative overflow-hidden rounded-2xl mb-6 aspect-[4/3]">
|
||||||
|
<% if event.image.present? %>
|
||||||
|
<img src="<%= event.image %>"
|
||||||
|
alt="<%= event.name %>"
|
||||||
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
||||||
|
<% else %>
|
||||||
|
<div class="w-full h-full bg-gradient-to-br from-purple-600 to-blue-600 flex items-center justify-center">
|
||||||
|
<i data-lucide="calendar" class="w-16 h-16 text-white"></i>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<!-- Event Badge -->
|
||||||
|
<% if event.featured? %>
|
||||||
|
<div class="absolute top-4 left-4">
|
||||||
|
<span class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-sm font-medium">
|
||||||
|
★ En vedette
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<!-- Price Badge -->
|
||||||
|
<% if event.ticket_types.any? %>
|
||||||
|
<div class="absolute bottom-4 right-4">
|
||||||
|
<span class="bg-white/90 backdrop-blur-sm text-gray-900 px-3 py-1 rounded-full text-sm font-bold">
|
||||||
|
À partir de €<%= event.ticket_types.minimum(:price_cents).to_f / 100 %>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Event Info -->
|
||||||
|
<div class="text-center">
|
||||||
|
<h3 class="text-2xl lg:text-3xl font-bold text-gray-900 mb-2 group-hover:text-purple-600 transition-colors">
|
||||||
|
<%= event.name.upcase %>
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="text-gray-600 space-y-1 mb-4">
|
||||||
|
<div class="flex items-center justify-center text-sm">
|
||||||
|
<i data-lucide="calendar" class="w-4 h-4 mr-2"></i>
|
||||||
|
<%= l(event.start_time, format: '%A %d %B • %H:%M') %>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-center text-sm">
|
||||||
|
<i data-lucide="map-pin" class="w-4 h-4 mr-2"></i>
|
||||||
|
<%= event.venue_name %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Event Description -->
|
||||||
|
<p class="text-gray-500 text-sm leading-relaxed max-w-sm mx-auto">
|
||||||
|
<%= truncate(event.description, length: 100) %>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-item" data-controller="counter" data-action="counter:scroll->counter#animate">
|
|
||||||
<span class="stat-number" data-target-value="5200">0</span>
|
<!-- More Events CTA -->
|
||||||
<div class="stat-label">Membres Actifs</div>
|
<div class="text-center">
|
||||||
|
<%= link_to events_path,
|
||||||
|
class: "inline-flex items-center bg-gray-900 text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-800 transition-colors" do %>
|
||||||
|
Plus d'événements à Paris
|
||||||
|
<i data-lucide="arrow-right" class="w-5 h-5 ml-2"></i>
|
||||||
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-item" data-controller="counter" data-action="counter:scroll->counter#animate">
|
<% else %>
|
||||||
<span class="stat-number" data-target-value="200">0</span>
|
<div class="text-center py-12">
|
||||||
<div class="stat-label">Lieux Partenaires</div>
|
<div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i data-lucide="calendar-x" class="w-12 h-12 text-gray-400"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold text-gray-900 mb-4">Aucun événement disponible</h3>
|
||||||
|
<p class="text-gray-600 mb-6">Les événements arrivent bientôt. Inscrivez-vous pour être notifié!</p>
|
||||||
|
<%= link_to new_user_registration_path, class: "bg-purple-600 text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-purple-700 transition-colors inline-flex items-center justify-center" do %>
|
||||||
|
<i data-lucide="bell" class="w-5 h-5 mr-2"></i>
|
||||||
|
Être notifié
|
||||||
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-item" data-controller="counter" data-action="counter:scroll->counter#animate">
|
<% end %>
|
||||||
<span class="stat-number" data-target-value="98">0</span>
|
</div>
|
||||||
<div class="stat-label">Taux de Satisfaction</div>
|
</section>
|
||||||
|
|
||||||
|
<!-- Site Metrics Section -->
|
||||||
|
<section class="py-16 bg-gray-50">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">
|
||||||
|
LA PLATEFORME DE RÉFÉRENCE
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-gray-600">
|
||||||
|
Rejoignez des milliers de professionnels qui font confiance à Aperonight
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center">
|
||||||
|
<div class="group">
|
||||||
|
<div class="text-4xl lg:text-5xl font-bold text-purple-600 mb-2">
|
||||||
|
<%= @total_events %>+
|
||||||
|
</div>
|
||||||
|
<div class="text-gray-600 font-medium">Événements organisés</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group">
|
||||||
|
<div class="text-4xl lg:text-5xl font-bold text-purple-600 mb-2">
|
||||||
|
<%= (@total_users / 100.0).round(1) %>k+
|
||||||
|
</div>
|
||||||
|
<div class="text-gray-600 font-medium">Membres actifs</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group">
|
||||||
|
<div class="text-4xl lg:text-5xl font-bold text-purple-600 mb-2">
|
||||||
|
<%= @events_this_month %>
|
||||||
|
</div>
|
||||||
|
<div class="text-gray-600 font-medium">Ce mois-ci</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group">
|
||||||
|
<div class="text-4xl lg:text-5xl font-bold text-purple-600 mb-2">
|
||||||
|
98%
|
||||||
|
</div>
|
||||||
|
<div class="text-gray-600 font-medium">Satisfaction</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CTA Section -->
|
<!-- CTA Section -->
|
||||||
<section class="cta-section">
|
<section class="py-16 bg-gray-900">
|
||||||
<div class="container">
|
<div class="container mx-auto px-4 text-center">
|
||||||
<div class="cta-content">
|
<h2 class="text-3xl lg:text-4xl font-bold text-white mb-6">
|
||||||
<h2>Prêt à rejoindre la communauté ?</h2>
|
Prêt à découvrir votre prochain événement ?
|
||||||
<p>Commencez à découvrir des événements incroyables et connectez-vous avec des professionnels partageant les mêmes idées dans votre ville.</p>
|
</h2>
|
||||||
<div style="display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap;">
|
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
||||||
<%= link_to new_user_registration_path, class: "btn btn-lg bg-white border-2 border-white text-blue-600 hover:bg-blue-400 hover:text-white" do %>
|
Rejoignez la communauté Aperonight et accédez aux meilleurs événements après-travail de Paris.
|
||||||
<i data-lucide="user-plus"></i>
|
</p>
|
||||||
Rejoindre gratuitement
|
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4 justify-center max-w-lg mx-auto">
|
||||||
|
<%= link_to events_path,
|
||||||
|
class: "w-full sm:flex-1 bg-white text-gray-900 px-6 py-3 rounded-full font-semibold text-base hover:bg-gray-100 transition-all duration-200 inline-flex items-center justify-center shadow-lg" do %>
|
||||||
|
<i data-lucide="search" class="w-4 h-4 mr-2"></i>
|
||||||
|
Découvrir les événements
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<% unless user_signed_in? %>
|
||||||
|
<%= link_to new_user_registration_path,
|
||||||
|
class: "w-full sm:flex-1 border-2 border-white text-white px-6 py-3 rounded-full font-semibold text-base hover:bg-white hover:text-gray-900 transition-all duration-200 inline-flex items-center justify-center" do %>
|
||||||
|
<i data-lucide="user-plus" class="w-4 h-4 mr-2"></i>
|
||||||
|
Créer mon compte
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.hero-landing {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-landing::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-gradient {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user