From 6b47114015a0ea3ef683b0953b6f7547bc1b6774 Mon Sep 17 00:00:00 2001 From: kbe Date: Mon, 8 Sep 2025 15:19:57 +0200 Subject: [PATCH] Restyle of the homepage --- .../aperonight_design_system.css | 495 ++++++++++++++++++ .../aperonight_design_system_1.html | 470 +++++++++++++++++ app/controllers/pages_controller.rb | 23 +- app/views/events/show.html.erb | 59 +-- app/views/pages/home.html.erb | 362 ++++++++----- 5 files changed, 1238 insertions(+), 171 deletions(-) create mode 100644 .superdesign/design_iterations/aperonight_design_system.css create mode 100644 .superdesign/design_iterations/aperonight_design_system_1.html diff --git a/.superdesign/design_iterations/aperonight_design_system.css b/.superdesign/design_iterations/aperonight_design_system.css new file mode 100644 index 0000000..4fcab6e --- /dev/null +++ b/.superdesign/design_iterations/aperonight_design_system.css @@ -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; } +} \ No newline at end of file diff --git a/.superdesign/design_iterations/aperonight_design_system_1.html b/.superdesign/design_iterations/aperonight_design_system_1.html new file mode 100644 index 0000000..cf35f48 --- /dev/null +++ b/.superdesign/design_iterations/aperonight_design_system_1.html @@ -0,0 +1,470 @@ + + + + + + Aperonight Design System + + + + + + + + + +
+
+
+
+

+ Système de Design + Aperonight +

+

+ 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. +

+
+ + + Explorer les Composants + + + + Télécharger + +
+
+
+
+
+ + +
+
+
+

Palette de Couleurs

+

+ Les couleurs de base du système Aperonight, conçues pour transmettre professionnalisme et modernité. +

+
+ +
+
+

Couleurs de Marque

+
+
+
+
+
Primary Blue
+
#667eea
+
+
+
+
+
+
Secondary Purple
+
#764ba2
+
+
+
+
+
+
Accent Yellow
+
#facc15
+
+
+
+
+ +
+

Couleurs Neutres

+
+
+
+
+
White
+
#ffffff
+
+
+
+
+
+
Gray 100
+
#f3f4f6
+
+
+
+
+
+
Gray 600
+
#4b5563
+
+
+
+
+
+
Gray 900
+
#111827
+
+
+
+
+
+
+
+ + +
+
+
+

Typographie

+

+ Une hiérarchie typographique claire et lisible pour tous les contenus. +

+
+ +
+

Hero Title - 60px Bold

+

Section Title - 36px Bold

+

Card Title - 24px Semibold

+

Large Text - 20px Regular

+

Body Text - 16px Regular

+

Small Text - 14px Regular

+
+
+
+ + +
+
+
+

Système de Boutons

+

+ Différents styles de boutons pour diverses actions et hiérarchies. +

+
+ +
+
+
+

Styles Principaux

+
+ + + + +
+
+ +
+

Tailles

+
+ + + +
+
+
+
+
+
+ + +
+
+
+

Système de Cartes

+

+ Cartes événements et composants modulaires. +

+
+ +
+ +
+
+ Événement exemple +
★ En vedette
+
À partir de €25
+
+
+

AFTERWORK ROOFTOP

+
+
+ + Vendredi 15 Décembre • 18:30 +
+
+ + Rooftop Bar Paris +
+
+

+ Rejoignez-nous pour un afterwork exclusif avec vue panoramique sur Paris. +

+
+
+ + +
+

Carte Simple

+

+ Une carte basique pour du contenu général avec hover effects. +

+
+ + +
+
2.5k+
+
Membres Actifs
+
+
+
+
+ + +
+
+
+

Composants UI

+

+ Éléments d'interface réutilisables pour construire des expériences cohérentes. +

+
+ +
+ +
+

Section Hero

+
+
+
+

+ Titre Héro +

+

+ Description du héro avec gradient de fond +

+ +
+
+
+
+ + +
+

Grille de Métriques

+
+
+
50+
+
Événements
+
+
+
2.5k
+
Membres
+
+
+
12
+
Ce mois-ci
+
+
+
98%
+
Satisfaction
+
+
+
+
+
+
+ + +
+
+
+

Guide d'Utilisation

+

+ Principes et bonnes pratiques pour utiliser ce système de design. +

+
+ +
+
+

✨ Principes de Design

+
    +
  • Cohérence - Utilisez les composants de manière uniforme
    • +
  • Accessibilité - Respectez les contrastes et la lisibilité
    • +
  • Responsive - Adaptez à tous les écrans
    • +
  • Performance - Optimisez les animations et interactions
    • +
+
+ +
+

🎨 Utilisation des Couleurs

+
    +
  • Primary - Actions principales et navigation
    • +
  • Accent - Éléments mis en évidence (badges, etc.)
    • +
  • Gray - Textes, bordures et arrière-plans
    • +
  • Purple - Métriques et éléments spéciaux
    • +
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb index ad6b423..4a38d06 100755 --- a/app/controllers/pages_controller.rb +++ b/app/controllers/pages_controller.rb @@ -3,15 +3,26 @@ class PagesController < ApplicationController 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 - @featured_events = Event.published.featured.limit(3) - - if user_signed_in? - redirect_to(dashboard_path) + # Featured events for the main grid (6-9 events like Shotgun) + @featured_events = Event.published.featured.includes(:ticket_types).limit(9) + + # 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 + + # 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 # User dashboard showing personalized content diff --git a/app/views/events/show.html.erb b/app/views/events/show.html.erb index a1d83ac..e96af24 100755 --- a/app/views/events/show.html.erb +++ b/app/views/events/show.html.erb @@ -1,45 +1,26 @@
-