From ab436d8c5cd3f0dca83a649c9706650330f9d50e Mon Sep 17 00:00:00 2001 From: kbe Date: Mon, 8 Sep 2025 15:40:25 +0200 Subject: [PATCH] Improve design system --- .../aperonight_design_system.css | 309 +++++++ .../aperonight_design_system_1.html | 15 +- app/assets/stylesheets/design_system.css | 816 ++++++++++++++++++ app/views/events/index.html.erb | 145 ++-- 4 files changed, 1197 insertions(+), 88 deletions(-) create mode 100644 app/assets/stylesheets/design_system.css diff --git a/.superdesign/design_iterations/aperonight_design_system.css b/.superdesign/design_iterations/aperonight_design_system.css index 4fcab6e..6f30266 100644 --- a/.superdesign/design_iterations/aperonight_design_system.css +++ b/.superdesign/design_iterations/aperonight_design_system.css @@ -478,10 +478,319 @@ body { .max-w-2xl { max-width: 42rem; } .max-w-4xl { max-width: 56rem; } +/* === BREADCRUMB SYSTEM === */ +.breadcrumb { + display: inline-flex; + align-items: center; + gap: var(--space-2); + background-color: var(--color-white); + padding: var(--space-3) var(--space-4); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + margin-bottom: var(--space-6); +} + +.breadcrumb-item { + display: inline-flex; + align-items: center; + font-size: var(--text-sm); + font-weight: var(--font-medium); +} + +.breadcrumb-item a { + color: var(--color-gray-700); + text-decoration: none; + transition: var(--transition-fast); +} + +.breadcrumb-item a:hover { + color: var(--color-purple-600); +} + +.breadcrumb-item:not(:last-child)::after { + content: ''; + width: 1rem; + height: 1rem; + margin-left: var(--space-2); + background: url("data:image/svg+xml,%3csvg fill='%234b5563' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath 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'/%3e%3c/svg%3e") center no-repeat; + background-size: 1rem; +} + +.breadcrumb-current { + color: var(--color-purple-600); +} + +/* === PAGE HEADER SYSTEM === */ +.page-header { + display: flex; + justify-content: space-between; + align-items: center; + margin: var(--space-8) 0; +} + +.page-title { + font-size: var(--text-3xl); + font-weight: var(--font-bold); + color: var(--color-gray-900); +} + +.page-meta { + font-size: var(--text-sm); + color: var(--color-gray-500); +} + +/* === EVENTS GRID SYSTEM === */ +.events-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-6); +} + +@media (min-width: 768px) { + .events-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1024px) { + .events-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +.event-card { + background-color: var(--color-white); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-md); + overflow: hidden; + transition: var(--transition-medium); + position: relative; +} + +.event-card:hover { + box-shadow: var(--shadow-xl); + transform: translateY(-1px); +} + +.event-card-image { + height: 12rem; + overflow: hidden; + position: relative; +} + +.event-card-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: var(--transition-medium); +} + +.event-card:hover .event-card-image img { + transform: scale(1.05); +} + +.event-card-placeholder { + height: 12rem; + background: var(--gradient-primary); + display: flex; + align-items: center; + justify-content: center; +} + +.event-card-placeholder svg { + width: 4rem; + height: 4rem; + color: rgba(255, 255, 255, 0.8); +} + +.event-card-content { + padding: var(--space-6); +} + +.event-card-header { + display: flex; + justify-content: space-between; + align-items: start; + margin-bottom: var(--space-3); +} + +.event-card-title { + font-size: var(--text-xl); + font-weight: var(--font-bold); + color: var(--color-gray-900); + margin-bottom: var(--space-1); + line-height: 1.25; +} + +.event-card-venue { + font-size: var(--text-xs); + color: var(--color-gray-500); + display: flex; + align-items: center; + gap: var(--space-1); +} + +.event-card-date { + display: inline-flex; + align-items: center; + padding: var(--space-2) calc(var(--space-2) + var(--space-1)); + border-radius: var(--radius-full); + font-size: var(--text-xs); + font-weight: var(--font-medium); + background-color: rgba(147, 51, 234, 0.1); + color: var(--color-purple-800); + white-space: nowrap; + margin-top: var(--space-2); +} + +.event-card-description { + color: var(--color-gray-600); + font-size: var(--text-sm); + line-height: 1.4; + margin-bottom: var(--space-4); + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; +} + +.event-card-footer { + display: flex; + justify-content: space-between; + align-items: center; +} + +.event-card-price { + font-size: var(--text-sm); + font-weight: var(--font-medium); + color: var(--color-gray-900); +} + +.event-card-price-unavailable { + font-size: var(--text-sm); + color: var(--color-gray-500); +} + +.event-card-link { + display: inline-flex; + align-items: center; + padding: var(--space-2) var(--space-4); + border: 1px solid transparent; + font-size: var(--text-sm); + font-weight: var(--font-medium); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + color: var(--color-white); + background: var(--gradient-primary); + text-decoration: none; + transition: var(--transition-fast); + gap: var(--space-2); +} + +.event-card-link:hover { + box-shadow: var(--shadow-md); + transform: translateY(-1px); +} + +/* === EMPTY STATE SYSTEM === */ +.empty-state { + text-align: center; + padding: var(--space-16) var(--space-4); +} + +.empty-state-icon { + width: 6rem; + height: 6rem; + margin: 0 auto var(--space-6); + background: linear-gradient(135deg, rgba(147, 51, 234, 0.1) 0%, rgba(79, 70, 229, 0.1) 100%); + border-radius: var(--radius-full); + display: flex; + align-items: center; + justify-content: center; +} + +.empty-state-icon svg { + width: 3rem; + height: 3rem; + color: var(--color-purple-600); +} + +.empty-state-title { + font-size: var(--text-lg); + font-weight: var(--font-medium); + color: var(--color-gray-900); + margin-bottom: var(--space-2); +} + +.empty-state-description { + color: var(--color-gray-500); + margin-bottom: var(--space-6); + max-width: 24rem; + margin-left: auto; + margin-right: auto; +} + +/* === PAGINATION SYSTEM === */ +.pagination { + display: flex; + justify-content: center; + margin-top: var(--space-8); +} + +.pagination .page-item { + margin: 0 var(--space-1); +} + +.pagination .page-link { + display: inline-flex; + align-items: center; + justify-content: center; + padding: var(--space-2) var(--space-3); + font-size: var(--text-sm); + font-weight: var(--font-medium); + color: var(--color-gray-600); + background-color: var(--color-white); + border: 1px solid var(--color-gray-200); + border-radius: var(--radius-md); + text-decoration: none; + transition: var(--transition-fast); + min-width: 2.5rem; + height: 2.5rem; +} + +.pagination .page-link:hover { + background-color: var(--color-gray-50); + border-color: var(--color-purple-300); + color: var(--color-purple-600); +} + +.pagination .page-item.active .page-link { + background-color: var(--color-purple-600); + border-color: var(--color-purple-600); + color: var(--color-white); +} + +.pagination .page-item.disabled .page-link { + color: var(--color-gray-300); + background-color: var(--color-white); + border-color: var(--color-gray-200); + cursor: not-allowed; +} + /* === RESPONSIVE UTILITIES === */ @media (max-width: 640px) { .sm\:flex-col { flex-direction: column; } .sm\:text-center { text-align: center; } + + .page-header { + flex-direction: column; + align-items: flex-start; + gap: var(--space-4); + } + + .page-title { + font-size: var(--text-2xl); + } } @media (min-width: 640px) { diff --git a/.superdesign/design_iterations/aperonight_design_system_1.html b/.superdesign/design_iterations/aperonight_design_system_1.html index cf35f48..62c8f56 100644 --- a/.superdesign/design_iterations/aperonight_design_system_1.html +++ b/.superdesign/design_iterations/aperonight_design_system_1.html @@ -79,6 +79,19 @@ font-weight: var(--font-bold); color: var(--color-gray-900); } + + /* Fixed secondary button for light backgrounds */ + .btn-secondary-alt { + background-color: transparent; + color: var(--color-gray-700); + border: 2px solid var(--color-gray-300); + } + + .btn-secondary-alt:hover { + background-color: var(--color-gray-100); + color: var(--color-gray-900); + border-color: var(--color-gray-400); + } @@ -238,7 +251,7 @@ Bouton Principal - diff --git a/app/assets/stylesheets/design_system.css b/app/assets/stylesheets/design_system.css new file mode 100644 index 0000000..19a3c34 --- /dev/null +++ b/app/assets/stylesheets/design_system.css @@ -0,0 +1,816 @@ +/** + * 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) !important; + line-height: 1.6; + color: var(--color-gray-900) !important; + background-color: var(--color-white) !important; +} + +/* === 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 !important; + 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) !important; + color: var(--color-gray-900) !important; + box-shadow: var(--shadow-lg); +} + +.btn-primary:hover { + background-color: var(--color-gray-100) !important; + box-shadow: var(--shadow-xl); + transform: translateY(-1px); +} + +.btn-secondary { + background-color: transparent !important; + color: var(--color-white) !important; + border: 2px solid var(--color-white) !important; +} + +.btn-secondary:hover { + background-color: var(--color-white) !important; + color: var(--color-gray-900) !important; +} + +.btn-secondary-alt { + background-color: transparent !important; + color: var(--color-gray-700) !important; + border: 2px solid var(--color-gray-300) !important; +} + +.btn-secondary-alt:hover { + background-color: var(--color-gray-100) !important; + color: var(--color-gray-900) !important; + border-color: var(--color-gray-400) !important; +} + +.btn-accent { + background-color: var(--color-purple-600) !important; + color: var(--color-white) !important; +} + +.btn-accent:hover { + background-color: var(--color-purple-700) !important; +} + +.btn-dark { + background-color: var(--color-gray-900) !important; + color: var(--color-white) !important; +} + +.btn-dark:hover { + background-color: var(--color-gray-800) !important; +} + +/* 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) !important; + border-radius: var(--radius-2xl) !important; + 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) !important; + color: var(--color-gray-900) !important; + 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) !important; + backdrop-filter: blur(4px); + color: var(--color-gray-900) !important; + 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) !important; + font-weight: var(--font-bold) !important; + color: var(--color-gray-900) !important; + margin-bottom: var(--space-2); + transition: var(--transition-fast); +} + +.card-event:hover .card-event-title { + color: var(--color-purple-600) !important; +} + +.card-event-meta { + color: var(--color-gray-600) !important; + margin-bottom: var(--space-4); +} + +.card-event-description { + color: var(--color-gray-500) !important; + font-size: var(--text-sm); + line-height: var(--leading-relaxed); + max-width: 20rem; + margin: 0 auto; +} + +/* === HERO SYSTEM === */ +.hero { + background: var(--gradient-primary) !important; + 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) !important; +} + +.hero-title { + font-size: var(--text-4xl) !important; + font-weight: var(--font-bold) !important; + line-height: var(--leading-tight); + margin-bottom: var(--space-6); +} + +.hero-subtitle { + font-size: var(--text-xl) !important; + color: rgba(255, 255, 255, 0.8) !important; + margin-bottom: var(--space-8); + max-width: 32rem; +} + +.hero-accent { + color: var(--brand-accent) !important; +} + +/* Responsive Hero */ +@media (min-width: 1024px) { + .hero-title { + font-size: var(--text-6xl) !important; + } +} + +/* === 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) !important; + font-weight: var(--font-bold) !important; + color: var(--color-purple-600) !important; + margin-bottom: var(--space-2); +} + +@media (min-width: 1024px) { + .metric-number { + font-size: var(--text-5xl) !important; + } +} + +.metric-label { + color: var(--color-gray-600) !important; + font-weight: var(--font-medium) !important; +} + +/* === 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) !important; + font-weight: var(--font-bold) !important; + color: var(--color-gray-900) !important; + margin-bottom: var(--space-4); +} + +@media (min-width: 1024px) { + .section-title { + font-size: var(--text-4xl) !important; + } +} + +.section-description { + font-size: var(--text-xl) !important; + color: var(--color-gray-600) !important; + 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) !important; } +.bg-gray-50 { background-color: var(--color-gray-50) !important; } +.bg-gray-900 { background-color: var(--color-gray-900) !important; } + +.text-white { color: var(--color-white) !important; } +.text-gray-600 { color: var(--color-gray-600) !important; } +.text-gray-900 { color: var(--color-gray-900) !important; } + +.rounded-full { border-radius: var(--radius-full) !important; } +.rounded-2xl { border-radius: var(--radius-2xl) !important; } + +.shadow-lg { box-shadow: var(--shadow-lg) !important; } +.shadow-xl { box-shadow: var(--shadow-xl) !important; } + +.mb-2 { margin-bottom: var(--space-2) !important; } +.mb-4 { margin-bottom: var(--space-4) !important; } +.mb-6 { margin-bottom: var(--space-6) !important; } +.mb-8 { margin-bottom: var(--space-8) !important; } +.mb-12 { margin-bottom: var(--space-12) !important; } + +.p-4 { padding: var(--space-4) !important; } +.p-6 { padding: var(--space-6) !important; } +.p-8 { padding: var(--space-8) !important; } + +.flex { display: flex !important; } +.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; } + +/* === BREADCRUMB SYSTEM === */ +.breadcrumb { + display: inline-flex; + align-items: center; + gap: var(--space-2); + background-color: var(--color-white) !important; + padding: var(--space-3) var(--space-4); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + margin-bottom: var(--space-6); +} + +.breadcrumb-item { + display: inline-flex; + align-items: center; + font-size: var(--text-sm); + font-weight: var(--font-medium); +} + +.breadcrumb-item a { + color: var(--color-gray-700) !important; + text-decoration: none; + transition: var(--transition-fast); +} + +.breadcrumb-item a:hover { + color: var(--color-purple-600) !important; +} + +.breadcrumb-item:not(:last-child)::after { + content: ''; + width: 1rem; + height: 1rem; + margin-left: var(--space-2); + background: url("data:image/svg+xml,%3csvg fill='%234b5563' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath 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'/%3e%3c/svg%3e") center no-repeat; + background-size: 1rem; +} + +.breadcrumb-current { + color: var(--color-purple-600) !important; +} + +/* === PAGE HEADER SYSTEM === */ +.page-header { + display: flex; + justify-content: space-between; + align-items: center; + margin: var(--space-8) 0; +} + +.page-title { + font-size: var(--text-3xl) !important; + font-weight: var(--font-bold) !important; + color: var(--color-gray-900) !important; +} + +.page-meta { + font-size: var(--text-sm) !important; + color: var(--color-gray-500) !important; +} + +/* === EVENTS GRID SYSTEM === */ +.events-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-6); +} + +@media (min-width: 768px) { + .events-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1024px) { + .events-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +.event-card { + background-color: var(--color-white) !important; + border-radius: var(--radius-xl) !important; + box-shadow: var(--shadow-md); + overflow: hidden; + transition: var(--transition-medium); + position: relative; +} + +.event-card:hover { + box-shadow: var(--shadow-xl); + transform: translateY(-1px); +} + +.event-card-image { + height: 12rem; + overflow: hidden; + position: relative; +} + +.event-card-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: var(--transition-medium); +} + +.event-card:hover .event-card-image img { + transform: scale(1.05); +} + +.event-card-placeholder { + height: 12rem; + background: var(--gradient-primary) !important; + display: flex; + align-items: center; + justify-content: center; +} + +.event-card-placeholder svg { + width: 4rem; + height: 4rem; + color: rgba(255, 255, 255, 0.8) !important; +} + +.event-card-content { + padding: var(--space-6); +} + +.event-card-header { + display: flex; + justify-content: space-between; + align-items: start; + margin-bottom: var(--space-3); +} + +.event-card-title { + font-size: var(--text-xl) !important; + font-weight: var(--font-bold) !important; + color: var(--color-gray-900) !important; + margin-bottom: var(--space-1); + line-height: 1.25; +} + +.event-card-venue { + font-size: var(--text-xs) !important; + color: var(--color-gray-500) !important; + display: flex; + align-items: center; + gap: var(--space-1); +} + +.event-card-date { + display: inline-flex; + align-items: center; + padding: var(--space-2) calc(var(--space-2) + var(--space-1)); + border-radius: var(--radius-full); + font-size: var(--text-xs) !important; + font-weight: var(--font-medium) !important; + background-color: rgba(147, 51, 234, 0.1) !important; + color: var(--color-purple-800) !important; + white-space: nowrap; + margin-top: var(--space-2); +} + +.event-card-description { + color: var(--color-gray-600) !important; + font-size: var(--text-sm) !important; + line-height: 1.4; + margin-bottom: var(--space-4); + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; +} + +.event-card-footer { + display: flex; + justify-content: space-between; + align-items: center; +} + +.event-card-price { + font-size: var(--text-sm) !important; + font-weight: var(--font-medium) !important; + color: var(--color-gray-900) !important; +} + +.event-card-price-unavailable { + font-size: var(--text-sm) !important; + color: var(--color-gray-500) !important; +} + +.event-card-link { + display: inline-flex !important; + align-items: center; + padding: var(--space-2) var(--space-4); + border: 1px solid transparent; + font-size: var(--text-sm) !important; + font-weight: var(--font-medium) !important; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + color: var(--color-white) !important; + background: var(--gradient-primary) !important; + text-decoration: none !important; + transition: var(--transition-fast); + gap: var(--space-2); +} + +.event-card-link:hover { + box-shadow: var(--shadow-md); + transform: translateY(-1px); +} + +/* === EMPTY STATE SYSTEM === */ +.empty-state { + text-align: center; + padding: var(--space-16) var(--space-4); +} + +.empty-state-icon { + width: 6rem; + height: 6rem; + margin: 0 auto var(--space-6); + background: linear-gradient(135deg, rgba(147, 51, 234, 0.1) 0%, rgba(79, 70, 229, 0.1) 100%) !important; + border-radius: var(--radius-full); + display: flex; + align-items: center; + justify-content: center; +} + +.empty-state-icon svg { + width: 3rem; + height: 3rem; + color: var(--color-purple-600) !important; +} + +.empty-state-title { + font-size: var(--text-lg) !important; + font-weight: var(--font-medium) !important; + color: var(--color-gray-900) !important; + margin-bottom: var(--space-2); +} + +.empty-state-description { + color: var(--color-gray-500) !important; + margin-bottom: var(--space-6); + max-width: 24rem; + margin-left: auto; + margin-right: auto; +} + +/* === PAGINATION SYSTEM === */ +.pagination { + display: flex; + justify-content: center; + margin-top: var(--space-8); +} + +.pagination .page-item { + margin: 0 var(--space-1); +} + +.pagination .page-link { + display: inline-flex; + align-items: center; + justify-content: center; + padding: var(--space-2) var(--space-3); + font-size: var(--text-sm) !important; + font-weight: var(--font-medium) !important; + color: var(--color-gray-600) !important; + background-color: var(--color-white) !important; + border: 1px solid var(--color-gray-200) !important; + border-radius: var(--radius-md); + text-decoration: none !important; + transition: var(--transition-fast); + min-width: 2.5rem; + height: 2.5rem; +} + +.pagination .page-link:hover { + background-color: var(--color-gray-50) !important; + border-color: var(--color-purple-300) !important; + color: var(--color-purple-600) !important; +} + +.pagination .page-item.active .page-link { + background-color: var(--color-purple-600) !important; + border-color: var(--color-purple-600) !important; + color: var(--color-white) !important; +} + +.pagination .page-item.disabled .page-link { + color: var(--color-gray-300) !important; + background-color: var(--color-white) !important; + border-color: var(--color-gray-200) !important; + cursor: not-allowed; +} + +/* === RESPONSIVE UTILITIES === */ +@media (max-width: 640px) { + .sm\:flex-col { flex-direction: column; } + .sm\:text-center { text-align: center; } + + .page-header { + flex-direction: column; + align-items: flex-start; + gap: var(--space-4); + } + + .page-title { + font-size: var(--text-2xl) !important; + } +} + +@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; } +} \ No newline at end of file diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb index a74e1c5..803c94e 100755 --- a/app/views/events/index.html.erb +++ b/app/views/events/index.html.erb @@ -1,40 +1,32 @@ -
-
-

Événements à venir

-
+
+ + + + +
+
+

Événements à venir

+
+
<%= @events.total_count %> événements trouvés
-
- - - + + <% if @events.any? %> -
+
<% @events.each do |event| %> -
+
<% if event.image.present? %> -
+
<%= link_to event_path(event.slug, event) do %>
<% else %> -
+
<% end %> -
-
+
+
-

<%= event.name %>

-

- +

<%= event.name %>

+

+

- + <%= event.start_time.strftime("%d/%m") %>
-
-

<%= event.description.truncate(100) %>

-
+

+ <%= event.description.truncate(100) %> +

-
+
<% if event.ticket_types.any? %> -

- À partir de - <%= format_price(event.ticket_types.minimum(:price_cents)) %>€ +

+ À partir de <%= format_price(event.ticket_types.minimum(:price_cents)) %>€

<% else %> -

Pas de billets disponibles

+

Pas de billets disponibles

<% end %>
- <%= link_to event_path(event.slug, event), class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-all duration-200" do %> + <%= link_to event_path(event.slug, event), class: "event-card-link" do %> Détails - +
-
+
<% end %>
-
+ + <% else %> -
-
-
+
+
+ - - - -
-

Aucun événement disponible

-

Il n'y a aucun événement à venir pour le moment.

- <%= link_to "Retour à l'accueil", - root_path, - class: - "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" %> + +
+

Aucun événement disponible

+

Il n'y a aucun événement à venir pour le moment.

+ <%= link_to "Retour à l'accueil", root_path, class: "btn btn-primary" %>
<% end %>