320 lines
10 KiB
Plaintext
320 lines
10 KiB
Plaintext
<% content_for :title, "Aperonight - Discover Premium Afterwork Events" %>
|
|
|
|
<!-- Hero 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>
|
|
|
|
<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>
|
|
|
|
<%= 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="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>
|
|
<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>
|
|
</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 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>
|
|
|
|
<style>
|
|
/* Updated Featured Events Grid - 3 Cards Side by Side */
|
|
.featured-events-grid {
|
|
display: grid;
|
|
gap: var(--space-8);
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.featured-events-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.featured-events-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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> |