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

Trying to work on new theme

Browse Source
This commit is contained in:
kb6e
2025-08-28 00:53:35 +02:00
parent 81bd30a7af
commit e084839289
23 changed files with 2401 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

247
app/views/pages/components.html.erb Normal file
View File

@@ -0,0 +1,247 @@
<div class="py-12">
<div class="text-center mb-16">
<h1 class="mb-4">Aperonight Design System</h1>
<p class="text-xl text-neutral-600 max-w-3xl mx-auto">
A comprehensive collection of reusable components for premium event booking experiences.
</p>
</div>
<!-- Buttons Section -->
<section class="mb-16">
<h2 class="mb-8 text-2xl font-bold">Buttons</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="card">
<h3 class="demo-title mb-4">Primary Buttons</h3>
<div class="flex flex-wrap gap-3">
<button class="btn btn-sm btn-primary">Small</button>
<button class="btn btn-md btn-primary">Medium</button>
<button class="btn btn-lg btn-primary">Large</button>
</div>
</div>
<div class="card">
<h3 class="demo-title mb-4">Secondary Buttons</h3>
<div class="flex flex-wrap gap-3">
<button class="btn btn-sm btn-secondary">Small</button>
<button class="btn btn-md btn-secondary">Medium</button>
<button class="btn btn-lg btn-secondary">Large</button>
</div>
</div>
<div class="card">
<h3 class="demo-title mb-4">Outline Buttons</h3>
<div class="flex flex-wrap gap-3">
<button class="btn btn-sm btn-outline">Small</button>
<button class="btn btn-md btn-outline">Medium</button>
<button class="btn btn-lg btn-outline">Large</button>
</div>
</div>
<div class="card">
<h3 class="demo-title mb-4">Ghost Buttons</h3>
<div class="flex flex-wrap gap-3">
<button class="btn btn-sm btn-ghost">Small</button>
<button class="btn btn-md btn-ghost">Medium</button>
<button class="btn btn-lg btn-ghost">Large</button>
</div>
</div>
</div>
</section>
<!-- Form Elements -->
<section class="mb-16">
<h2 class="mb-8 text-2xl font-bold">Form Elements</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="card">
<h3 class="demo-title mb-4">Input Fields</h3>
<form>
<div class="form-group">
<label class="form-label">Event Name</label>
<input type="text" class="form-input focus-ring" placeholder="Enter event name">
</div>
<div class="form-group">
<label class="form-label">Description</label>
<textarea class="form-textarea focus-ring" rows="3" placeholder="Describe your event"></textarea>
</div>
<div class="form-group">
<label class="form-label">Category</label>
<select class="form-select focus-ring">
<option>Select category</option>
<option>Networking</option>
<option>Tech</option>
<option>Creative</option>
</select>
</div>
<div class="form-group">
<div class="search-box">
<input type="search" class="form-input search-input focus-ring" placeholder="Search events...">
<i class="search-icon">
<!-- Search icon would be inserted by Lucide JS -->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</i>
</div>
</div>
<div class="flex gap-3 mt-6">
<button type="submit" class="btn btn-md btn-primary">Submit</button>
<button type="reset" class="btn btn-md btn-outline">Reset</button>
</div>
</form>
</div>
<div class="card">
<h3 class="demo-title mb-4">Validation States</h3>
<div class="form-group">
<label class="form-label">Email (Valid)</label>
<input type="email" class="form-input" value="user@example.com" style="border-color: var(--color-success); background: var(--color-success-light);">
<div class="form-error mt-1" style="color: var(--color-success); display: flex; align-items: center; gap: 0.25rem;">
<!-- Check icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
Email is valid
</div>
</div>
<div class="form-group">
<label class="form-label">Password (Error)</label>
<input type="password" class="form-input" value="123" style="border-color: var(--color-danger); background: var(--color-danger-light);">
<div class="form-error">
<!-- Alert icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
Password must be at least 8 characters
</div>
</div>
<div class="form-group">
<label class="form-label">Phone (Warning)</label>
<input type="tel" class="form-input" value="+33 1 23 45" style="border-color: var(--color-warning); background: var(--color-warning-light);">
<div class="form-error mt-1" style="color: var(--color-warning-dark); display: flex; align-items: center; gap: 0.25rem;">
<!-- Warning icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
<line x1="12" y1="9" x2="12" y2="13"></line>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
Please complete phone number
</div>
</div>
</div>
</div>
</section>
<!-- Badges and Tags -->
<section class="mb-16">
<h2 class="mb-8 text-2xl font-bold">Badges & Tags</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="card">
<h3 class="demo-title mb-4">Event Status Badges</h3>
<div class="flex flex-wrap gap-3">
<span class="badge badge-available">Available</span>
<span class="badge badge-limited">Limited</span>
<span class="badge badge-sold-out">Sold Out</span>
<span class="badge badge-featured">★ Featured</span>
<span class="badge badge-vip">VIP</span>
</div>
</div>
<div class="card">
<h3 class="demo-title mb-4">Price Tags</h3>
<div class="flex flex-wrap items-center gap-4">
<div class="price-tag price-tag-sm" style="color: var(--color-neutral-600);">€15</div>
<div class="price-tag price-tag-md" style="color: var(--color-primary-600);">€35</div>
<div class="price-tag price-tag-lg" style="color: var(--color-accent-600);">€55</div>
<div class="price-tag price-tag-md" style="color: var(--color-neutral-600);">
<span style="text-decoration: line-through; opacity: 0.7;">€60</span>
<span style="color: var(--color-success); margin-left: 0.5rem;">€45</span>
</div>
</div>
</div>
</div>
</section>
<!-- Cards -->
<section class="mb-16">
<h2 class="mb-8 text-2xl font-bold">Cards</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="card hover-lift">
<div class="card-header">
<h3 class="font-bold mb-2">Basic Card</h3>
<p class="text-neutral-600 m-0">Simple card with header and content</p>
</div>
<div class="card-body">
<p>This is a basic card component that can be used for various content types. It includes proper spacing and hover effects.</p>
<button class="btn btn-md btn-primary mt-4">Learn More</button>
</div>
</div>
<div class="event-card hover-glow">
<div style="height: 200px; background: linear-gradient(135deg, var(--color-primary-500), var(--color-accent-500)); display: flex; align-items: center; justify-content: center; color: white; font-size: var(--text-xl); font-weight: bold;">
Event Image
</div>
<div style="padding: var(--space-6);">
<div class="flex gap-2 mb-4">
<span class="badge badge-featured">★ Featured</span>
<span class="badge badge-available">Available</span>
</div>
<h3 class="font-bold mb-2 text-neutral-900">Networking Event</h3>
<p class="text-neutral-600 mb-6 text-sm">Join professionals for an evening of networking and insights.</p>
<div class="flex justify-between items-center">
<span class="price-tag price-tag-md" style="color: var(--color-primary-600);">€35</span>
<button class="btn btn-sm btn-primary">Book Now</button>
</div>
</div>
</div>
<div class="card">
<h3 class="demo-title mb-4">User Profile</h3>
<div class="flex items-center gap-4 mb-4">
<div class="avatar avatar-lg">
<div class="avatar-image" style="background: linear-gradient(135deg, var(--color-primary-200), var(--color-accent-200));"></div>
<div class="avatar-status status-online"></div>
</div>
<div>
<h4 class="font-bold mb-1">Alex Johnson</h4>
<p class="text-neutral-600 text-sm m-0">Senior Developer</p>
<div class="rating mt-1">
<!-- Stars would be inserted by Lucide JS -->
<div class="flex">
<svg class="rating-star filled" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
<svg class="rating-star filled" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
<svg class="rating-star filled" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
<svg class="rating-star filled" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
<svg class="rating-star empty" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
</div>
<span class="text-sm text-neutral-600 ml-2">4.2</span>
</div>
</div>
</div>
<div class="flex gap-2">
<button class="btn btn-sm btn-primary flex-1">Connect</button>
<button class="btn btn-sm btn-outline">Message</button>
</div>
</div>
</div>
</section>
</div>

255
app/views/pages/events.html.erb
View File

@@ -1,46 +1,217 @@
<div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold mb-8">Upcoming Events</h1>
<% if @parties.any? %>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<% @parties.each do |party| %>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<% if party.image.present? %>
<img src="<%= party.image %>" alt="<%= party.name %>" class="w-full h-48 object-cover">
<% else %>
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-48 flex items-center justify-center">
<span class="text-gray-500">No Image</span>
</div>
<% end %>
<div class="p-6">
<h2 class="text-xl font-semibold mb-2"><%= party.name %></h2>
<p class="text-gray-600 mb-4"><%= party.description.truncate(100) %></p>
<div class="flex justify-between items-center">
<div>
<p class="text-sm text-gray-500"><%= party.venue_name %></p>
<p class="text-sm text-gray-500"><%= party.venue_address %></p>
</div>
<div>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
<%= party.state.humanize %>
</span>
</div>
</div>
</div>
</div>
<% end %>
<% content_for :title, "All Events - Aperonight" %>
<div class="section">
<div class="container">
<div class="section-header">
<h1 class="section-title">All Events</h1>
<p class="section-description">Discover all our upcoming afterwork events tailored to your interests.</p>
</div>
<!-- Pagination -->
<div class="mt-8 flex justify-center">
<%= paginate @parties %>
<div class="events-filter-bar" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-8); flex-wrap: wrap; gap: var(--space-4);">
<div class="search-box" style="flex: 1; max-width: 400px;">
<input type="text" class="form-input search-input" placeholder="Search events...">
<i data-lucide="search" class="search-icon"></i>
</div>
<div style="display: flex; gap: var(--space-3);">
<select class="form-select" style="min-width: 150px;">
<option>All Categories</option>
<option>Networking</option>
<option>Tech & Innovation</option>
<option>Creative & Design</option>
<option>Business</option>
<option>Wine & Tasting</option>
</select>
<select class="form-select" style="min-width: 120px;">
<option>Any Price</option>
<option>Free</option>
<option>Under €30</option>
<option>€30 - €60</option>
<option>Over €60</option>
</select>
</div>
</div>
<% else %>
<div class="text-center py-12">
<h2 class="text-xl font-medium text-gray-900 mb-4">No events found</h2>
<p class="text-gray-500">Check back later for upcoming events.</p>
<div class="events-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6);">
<!-- Event 1 -->
<div class="event-card hover-glow">
<img src="https://images.unsplash.com/photo-1540039155733-5bb30b53aa14?w=400&h=200&fit=crop" alt="Tech Networking Night" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: var(--space-5);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3);">
<h3 style="font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin: 0;">Tech & Innovation Networking Night</h3>
<span class="badge badge-featured">★ Featured</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
<span>Thu, Mar 15 • 18:30</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="map-pin" style="width: 16px; height: 16px;"></i>
<span>Le Perchoir Marais, Paris</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span class="price-tag price-tag-md">€35</span>
<button class="btn btn-sm btn-primary">Reserve Spot</button>
</div>
</div>
</div>
<!-- Event 2 -->
<div class="event-card hover-glow">
<img src="https://images.unsplash.com/photo-1574391884720-bbc3740c59d1?w=400&h=200&fit=crop" alt="Creative Afterwork" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: var(--space-5);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3);">
<h3 style="font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin: 0;">Creative Directors Exclusive Meetup</h3>
<span class="badge badge-vip">VIP</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
<span>Fri, Mar 16 • 19:00</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="map-pin" style="width: 16px; height: 16px;"></i>
<span>Atelier Des Lumières, Paris</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span class="price-tag price-tag-md">€65</span>
<button class="btn btn-sm btn-primary">Join VIP</button>
</div>
</div>
</div>
<!-- Event 3 -->
<div class="event-card hover-glow">
<img src="https://images.unsplash.com/photo-1569949381669-ecf31ae8e613?w=400&h=200&fit=crop" alt="Wine Tasting" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: var(--space-5);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3);">
<h3 style="font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin: 0;">Wine & Business Premium Tasting</h3>
<span class="badge badge-available">Available</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
<span>Sat, Mar 18 • 17:00</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="map-pin" style="width: 16px; height: 16px;"></i>
<span>Cave Legrand, Paris</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span class="price-tag price-tag-md">€55</span>
<button class="btn btn-sm btn-secondary">Book Now</button>
</div>
</div>
</div>
<!-- Event 4 -->
<div class="event-card hover-glow">
<img src="https://images.unsplash.com/photo-1511795409834-ef04bbd61622?w=400&h=200&fit=crop" alt="Startup Pitch Night" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: var(--space-5);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3);">
<h3 style="font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin: 0;">Startup Pitch Night</h3>
<span class="badge badge-limited">Limited</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
<span>Mon, Mar 20 • 18:00</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="map-pin" style="width: 16px; height: 16px;"></i>
<span>Station F, Paris</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span class="price-tag price-tag-md">€25</span>
<button class="btn btn-sm btn-primary">Reserve Spot</button>
</div>
</div>
</div>
<!-- Event 5 -->
<div class="event-card hover-glow">
<img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&h=200&fit=crop" alt="Jazz & Cocktails" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: var(--space-5);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3);">
<h3 style="font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin: 0;">Jazz & Cocktails Evening</h3>
<span class="badge badge-available">Available</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
<span>Wed, Mar 22 • 20:00</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="map-pin" style="width: 16px; height: 16px;"></i>
<span>Blue Note, Paris</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span class="price-tag price-tag-md">€40</span>
<button class="btn btn-sm btn-secondary">Book Now</button>
</div>
</div>
</div>
<!-- Event 6 -->
<div class="event-card hover-glow">
<img src="https://images.unsplash.com/photo-1511795409834-ef04bbd61622?w=400&h=200&fit=crop" alt="Art & Wine" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: var(--space-5);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3);">
<h3 style="font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin: 0;">Art & Wine Gallery Night</h3>
<span class="badge badge-featured">★ Featured</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
<span>Fri, Mar 24 • 19:30</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="map-pin" style="width: 16px; height: 16px;"></i>
<span>Gallery Lafayette, Paris</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span class="price-tag price-tag-md">€30</span>
<button class="btn btn-sm btn-primary">Reserve Spot</button>
</div>
</div>
</div>
</div>
<% end %>
</div>
<div style="display: flex; justify-content: center; margin-top: var(--space-8);">
<nav style="display: flex; gap: var(--space-2);">
<a href="#" class="btn btn-outline" style="padding: var(--space-2) var(--space-4);">Previous</a>
<a href="#" class="btn btn-primary" style="padding: var(--space-2) var(--space-4);">1</a>
<a href="#" class="btn btn-outline" style="padding: var(--space-2) var(--space-4);">2</a>
<a href="#" class="btn btn-outline" style="padding: var(--space-2) var(--space-4);">3</a>
<a href="#" class="btn btn-outline" style="padding: var(--space-2) var(--space-4);">Next</a>
</nav>
</div>
</div>
</div>
<style>
.events-filter-bar .search-input {
padding-left: var(--space-12);
}
.events-filter-bar .search-icon {
position: absolute;
left: var(--space-4);
top: 50%;
transform: translateY(-50%);
color: var(--color-neutral-400);
}
.events-filter-bar {
position: relative;
}
@media (max-width: 768px) {
.events-filter-bar {
flex-direction: column;
align-items: stretch;
}
.events-filter-bar .search-box {
max-width: none;
}
.events-filter-bar > div {
width: 100%;
}
}
</style>

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

@@ -1,250 +1,320 @@
<% content_for :title, "Aperonight - Discover Premium Afterwork Events" %>
<!-- Hero Section -->
<section class="relative bg-neutral-50 min-h-[70vh] flex items-center">
<div class="absolute inset-0 bg-white bg-opacity-60"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-5xl md:text-7xl font-bold text-neutral-900 mb-6 leading-tight">
Découvrez les afterworks et soirée
<span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600">
à Paris
</span>
</h1>
<p class="text-xl md:text-2xl text-neutral-700 mb-8 max-w-3xl mx-auto leading-relaxed">
Les meilleures soirées, concerts et afterworks de Paris en un clic. Réservez vos places et vivez des expériences uniques.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
<%= link_to "Explorer les soirées", parties_path, class: "bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-4 px-8 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg" %>
<%= link_to "Voir les concerts", "#", class: "bg-white border border-neutral-300 hover:border-purple-300 text-neutral-700 font-semibold py-4 px-8 rounded-full transition-all duration-300" %>
</div>
</div>
</section>
<section class="hero">
<div class="container">
<div class="hero-content">
<h1>Discover Premium Afterwork Events</h1>
<p class="subtitle">Connect with professionals, explore unique venues, and create memorable experiences at carefully curated afterwork events in your city.</p>
<!-- Metrics -->
<section class="bg-neutral-50 py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold text-neutral-900 mb-4">
Des chiffres qui parlent
</h2>
<p class="text-xl text-neutral-600 max-w-2xl mx-auto">
La plateforme préférée des Parisiens pour vivre la nuit
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
<!-- Total Events -->
<div class="group relative">
<div class="relative overflow-hidden rounded-2xl bg-white border border-neutral-200 hover:border-purple-300 transition-all duration-300 p-8">
<div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative">
<div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
<span class="counter" data-controller="counter" data-counter-target-value="127">0</span>
</div>
<p class="text-neutral-700 font-mono uppercase tracking-widest text-sm font-medium">
Événements organisés
</p>
<div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
</div>
</div>
</div>
<!-- Total Users -->
<div class="group relative">
<div class="relative overflow-hidden rounded-2xl bg-white border border-neutral-200 hover:border-purple-300 transition-all duration-300 p-8">
<div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative">
<div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
<span class="counter" data-controller="counter" data-counter-target-value="1433">0</span>+
</div>
<p class="text-neutral-700 font-mono uppercase tracking-widest text-sm font-medium">
Membres actifs
</p>
<div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
</div>
</div>
</div>
<!-- Average Rating -->
<div class="group relative">
<div class="relative overflow-hidden rounded-2xl bg-white border border-neutral-200 hover:border-purple-300 transition-all duration-300 p-8">
<div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-indigo-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative">
<div class="text-5xl md:text-6xl font-light bg-gradient-to-r from-purple-600 via-indigo-600 to-pink-600 bg-clip-text text-transparent mb-3">
<span class="counter" data-controller="counter" data-counter-target-value="4.4" data-counter-decimal-value="true">0</span>/5
</div>
<p class="text-neutral-700 font-mono uppercase tracking-widest text-sm font-medium">
Note moyenne des soirées
</p>
<div class="mt-4 h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 rounded-full w-0 group-hover:w-full transition-all duration-500"></div>
</div>
</div>
</div>
</div>
<!-- Additional Stats Row -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12">
<div class="text-center">
<div class="text-3xl font-bold text-purple-600">
<span class="counter" data-controller="counter" data-counter-target-value="79">0</span>%
</div>
<p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Taux de remplissage</p>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-purple-600">
<span class="counter" data-controller="counter" data-counter-target-value="12">0</span>
</div>
<p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Arrondissements</p>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-purple-600">
<span class="counter" data-controller="counter" data-counter-target-value="156">0</span>
</div>
<p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Établissements partenaires</p>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-purple-600">
<span class="counter" data-controller="counter" data-counter-target-value="98">0</span>%
</div>
<p class="text-neutral-600 text-sm font-mono uppercase tracking-wide font-medium">Satisfaction client</p>
</div>
</div>
</div>
</section>
<!-- Quick Search Section -->
<section id="search" class="bg-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-gradient-to-br from-neutral-50 to-white border border-neutral-200 rounded-2xl p-8 shadow-lg">
<h2 class="text-3xl font-bold text-neutral-900 text-center mb-8">Trouvez votre prochaine soirée</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
<div>
<label class="block text-sm font-medium text-neutral-700 mb-2">Quand ?</label>
<input type="date" class="w-full bg-white border border-neutral-300 text-neutral-900 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all" placeholder="Choisir une date">
</div>
<div>
<label class="block text-sm font-medium text-neutral-700 mb-2">Type d'événement</label>
<select class="w-full bg-white border border-neutral-300 text-neutral-900 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
<option value="">Tous les types</option>
<option value="club">Soirées club</option>
<option value="afterwork">Afterworks</option>
<option value="concert">Concerts</option>
<option value="vip">Événements VIP</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-neutral-700 mb-2">Genre musical</label>
<select class="w-full bg-white border border-neutral-300 text-neutral-900 rounded-lg p-3 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all">
<option value="">Tous les genres</option>
<option value="house">House/Techno</option>
<option value="hiphop">Hip-Hop</option>
<option value="pop">Pop</option>
<option value="rock">Rock</option>
<option value="electro">Électro</option>
</select>
</div>
<button class="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105">
Rechercher
<div class="cta-group">
<button class="btn btn-lg btn-primary">
<i data-lucide="search"></i>
Explore Events
</button>
<button class="btn btn-lg btn-secondary">
<i data-lucide="plus"></i>
Host an Event
</button>
</div>
<div class="hero-stats">
<div class="hero-stat">
<span class="hero-stat-number">150+</span>
<span class="hero-stat-label">Events Monthly</span>
</div>
<div class="hero-stat">
<span class="hero-stat-number">5.2K</span>
<span class="hero-stat-label">Active Members</span>
</div>
<div class="hero-stat">
<span class="hero-stat-number">200+</span>
<span class="hero-stat-label">Partner Venues</span>
</div>
<div class="hero-stat">
<span class="hero-stat-number">98%</span>
<span class="hero-stat-label">Satisfaction</span>
</div>
</div>
</div>
</div>
</section>
<!-- Featured Events -->
<section id="events" class="bg-neutral-50 py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-neutral-900 mb-4">Événements du moment</h2>
<p class="text-xl text-neutral-600">Les soirées et concerts les plus populaires cette semaine</p>
<%= render "components/party_finder" %>
<!-- Featured Events Section -->
<section class="section featured-events" id="events">
<div class="container">
<div class="section-header">
<h2 class="section-title">Featured This Week</h2>
<p class="section-description">Handpicked premium events that bring together the best professionals and creators in the city.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<% @parties.each do |party| %>
<div class="bg-white border border-neutral-200 rounded-2xl overflow-hidden hover:transform hover:scale-105 transition-all duration-300 shadow-lg">
<div class="h-56 bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 relative"
style="background-image: url('<%= party.image || "https://images.unsplash.com/photo-1506157786151-b84b9d3d78d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" %>');
background-size: cover;
background-position: center;">
<div class="absolute top-4 right-4 bg-white bg-opacity-90 text-neutral-900 px-3 py-1 rounded-full text-sm font-medium">
<%= party.venue_name.split(' ').first %>
<div class="featured-events-grid animate-fadeInUp">
<!-- Featured Event 1 -->
<div class="featured-event-card animate-slideInLeft">
<img src="https://images.unsplash.com/photo-1540039155733-5bb30b53aa14?w=600&h=300&fit=crop" alt="Tech Networking Night" class="featured-event-image">
<div class="featured-event-content">
<div class="featured-event-badges">
<span class="badge badge-featured">★ Featured</span>
<span class="badge badge-available">Available</span>
</div>
<h3 class="featured-event-title">Tech & Innovation Networking Night</h3>
<div class="featured-event-meta">
<div class="featured-event-meta-item">
<i data-lucide="calendar"></i>
Thu, Mar 15 • 18:30 - 22:00
</div>
<div class="featured-event-meta-item">
<i data-lucide="map-pin"></i>
Le Perchoir Marais, Paris
</div>
<div class="featured-event-meta-item">
<i data-lucide="users"></i>
85 attendees • 15 spots left
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-3">
<h3 class="text-2xl font-bold text-neutral-900"><%= party.name.upcase %></h3>
<% if party.ticket_types.any? %>
<span class="text-purple-600 font-semibold"><%= number_to_currency(party.ticket_types.first.price_cents / 100.0, unit: "€", separator: ",", delimiter: " ") %></span>
<% end %>
</div>
<p class="text-neutral-600 mb-2"><%= party.venue_name %>, <%= party.venue_address.split(',').first %></p>
<p class="text-neutral-700 mb-4"><%= I18n.l(party.start_time, format: "%A %Hh") if party.start_time %> • <%= party.description.split('.').first %></p>
<%= link_to "Voir les détails", party_path(party.slug, party), class: "w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-3 rounded-lg transition-all duration-300 text-center block" %>
<p class="featured-event-description">Join 100+ tech professionals for an exclusive evening of networking, drinks, and insights into the latest innovation trends. Connect with startups, investors, and industry leaders.</p>
<div class="featured-event-footer">
<span class="featured-event-price">€35</span>
<button class="btn btn-sm btn-primary">Reserve Spot</button>
</div>
</div>
<% end %>
</div>
<!-- Featured Event 2 -->
<div class="featured-event-card animate-fadeInUp">
<img src="https://images.unsplash.com/photo-1574391884720-bbc3740c59d1?w=400&h=240&fit=crop" alt="Creative Afterwork" class="featured-event-image">
<div class="featured-event-content">
<div class="featured-event-badges">
<span class="badge badge-vip">VIP</span>
<span class="badge badge-limited">Limited</span>
</div>
<h3 class="featured-event-title">Creative Directors Exclusive Meetup</h3>
<div class="featured-event-meta">
<div class="featured-event-meta-item">
<i data-lucide="calendar"></i>
Fri, Mar 16 • 19:00 - 23:00
</div>
<div class="featured-event-meta-item">
<i data-lucide="map-pin"></i>
Atelier Des Lumières, Paris
</div>
<div class="featured-event-meta-item">
<i data-lucide="users"></i>
30 creatives • 8 spots left
</div>
</div>
<p class="featured-event-description">An intimate gathering of creative directors, designers, and visual artists. Experience immersive art installations while networking with industry pioneers.</p>
<div class="featured-event-footer">
<span class="featured-event-price">€65</span>
<button class="btn btn-sm btn-primary">Join VIP</button>
</div>
</div>
</div>
<!-- Featured Event 3 -->
<div class="featured-event-card animate-slideInRight">
<img src="https://images.unsplash.com/photo-1569949381669-ecf31ae8e613?w=400&h=240&fit=crop" alt="Wine Tasting" class="featured-event-image">
<div class="featured-event-content">
<div class="featured-event-badges">
<span class="badge badge-available">Available</span>
</div>
<h3 class="featured-event-title">Wine & Business Premium Tasting</h3>
<div class="featured-event-meta">
<div class="featured-event-meta-item">
<i data-lucide="calendar"></i>
Sat, Mar 18 • 17:00 - 21:00
</div>
<div class="featured-event-meta-item">
<i data-lucide="map-pin"></i>
Cave Legrand, Paris
</div>
<div class="featured-event-meta-item">
<i data-lucide="users"></i>
45 professionals • 12 spots left
</div>
</div>
<p class="featured-event-description">Discover exceptional French wines while connecting with business professionals. Expert sommelier guidance and premium tastings in a historic wine cellar.</p>
<div class="featured-event-footer">
<span class="featured-event-price">€55</span>
<button class="btn btn-sm btn-secondary">Book Now</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<%= link_to "Voir tous les événements →", parties_path, class: "text-purple-600 hover:text-purple-700 text-lg font-medium transition-all duration-300 border-b-2 border-purple-600 hover:border-purple-700" %>
<div style="text-align: center; margin-top: var(--space-12);">
<%= link_to "View All Events", parties_path, class: "btn btn-lg btn-outline" %>
</div>
</div>
</section>
<!-- Features -->
<section class="bg-white py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-neutral-900 mb-4">Pourquoi choisir <%= Rails.application.config.app_name %> ?</h2>
<p class="text-xl text-neutral-600 max-w-2xl mx-auto">La plateforme préférée des Parisiens pour sortir</p>
</div>
<style>
/* Updated Featured Events Grid - 3 Cards Side by Side */
.featured-events-grid {
display: grid;
gap: var(--space-8);
grid-template-columns: 1fr;
}
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center p-8">
<div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-neutral-900 mb-3">Découverte facile</h3>
<p class="text-neutral-600 leading-relaxed">Trouvez les meilleures soirées et concerts de Paris en quelques clics grâce à notre algorithme personnalisé</p>
</div>
@media (min-width: 768px) {
.featured-events-grid {
grid-template-columns: repeat(2, 1fr);
}
}
<div class="text-center p-8">
<div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-neutral-900 mb-3">Réservation sécurisée</h3>
<p class="text-neutral-600 leading-relaxed">Paiement 100% sécurisé et billets électroniques avec QR code sur votre mobile</p>
</div>
@media (min-width: 1024px) {
.featured-events-grid {
grid-template-columns: repeat(3, 1fr);
}
}
<div class="text-center p-8">
<div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-neutral-900 mb-3">Accès rapide</h3>
<p class="text-neutral-600 leading-relaxed">Entrée express avec validation mobile de vos billets. Plus besoin d'imprimer !</p>
</div>
</div>
</div>
</section>
.featured-event-card {
background: white;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all var(--duration-slow) var(--ease-out);
border: 1px solid var(--color-neutral-200);
position: relative;
}
<!-- CTA Section -->
<section class="bg-gradient-to-r from-purple-100 via-pink-50 to-indigo-100 py-20">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-4xl font-bold text-neutral-900 mb-6">Prêt à vivre la nuit parisienne ?</h2>
<p class="text-xl text-neutral-700 mb-8">Rejoignez des milliers de party-goers qui utilisent Aperonight chaque semaine</p>
<%= link_to new_user_registration_path, class: "bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold py-4 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-xl" do %>
S'inscrire gratuitement
<% end %>
</div>
</section>
.featured-event-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: var(--shadow-2xl);
border-color: var(--color-primary-200);
}
.featured-event-image {
width: 100%;
height: 240px;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out);
}
.featured-event-card:hover .featured-event-image {
transform: scale(1.05);
}
.featured-event-content {
padding: var(--space-6);
}
.featured-event-badges {
display: flex;
gap: var(--space-2);
margin-bottom: var(--space-4);
flex-wrap: wrap;
}
.featured-event-title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
margin-bottom: var(--space-3);
color: var(--color-neutral-900);
line-height: 1.3;
}
.featured-event-meta {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.featured-event-meta-item {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--color-neutral-600);
font-size: var(--text-sm);
font-weight: 500;
}
.featured-event-description {
color: var(--color-neutral-700);
margin-bottom: var(--space-6);
line-height: 1.6;
font-size: var(--text-sm);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.featured-event-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.featured-event-price {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 800;
color: var(--color-primary-600);
}
@media (max-width: 768px) {
.featured-event-image {
height: 200px;
}
.featured-event-content {
padding: var(--space-4);
}
}
/* Enhanced animations */
.animate-slideInLeft {
opacity: 0;
transform: translateX(-30px);
transition: all 0.5s var(--ease-out);
}
.animate-slideInLeft.visible {
opacity: 1;
transform: translateX(0);
}
.animate-slideInRight {
opacity: 0;
transform: translateX(30px);
transition: all 0.5s var(--ease-out);
}
.animate-slideInRight.visible {
opacity: 1;
transform: translateX(0);
}
</style>
<script>
// Add animation classes when elements are in view
document.addEventListener("DOMContentLoaded", function() {
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
// Observe animated elements
document.querySelectorAll('.animate-fadeInUp, .animate-slideInLeft, .animate-slideInRight').forEach(el => {
observer.observe(el);
});
// Add staggered animation delays
document.querySelectorAll('.featured-event-card').forEach((card, index) => {
card.style.transitionDelay = `${index * 0.2}s`;
});
});
</script>