217 lines
12 KiB
Plaintext
Executable File
217 lines
12 KiB
Plaintext
Executable File
<% 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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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> |