develop #3
@@ -3,8 +3,8 @@
|
||||
<div class="container">
|
||||
<div class="event-finder">
|
||||
<div class="finder-header">
|
||||
<h2 class="finder-title">Find Your Perfect Event</h2>
|
||||
<p class="finder-subtitle">Discover afterwork events tailored to your preferences</p>
|
||||
<h2 class="finder-title">Trouvez votre événement parfait</h2>
|
||||
<p class="finder-subtitle">Découvrez des événements afterwork adaptés à vos préférences</p>
|
||||
</div>
|
||||
|
||||
<form class="finder-form">
|
||||
@@ -19,10 +19,10 @@
|
||||
<div class="finder-field">
|
||||
<label class="finder-label">
|
||||
<i data-lucide="map-pin"></i>
|
||||
City
|
||||
Ville
|
||||
</label>
|
||||
<select class="finder-select focus-ring" id="event-city">
|
||||
<option value="">Choose a city</option>
|
||||
<option value="">Choisissez une ville</option>
|
||||
<option value="paris">Paris</option>
|
||||
<option value="london">London</option>
|
||||
<option value="berlin">Berlin</option>
|
||||
@@ -37,18 +37,18 @@
|
||||
<div class="finder-field">
|
||||
<label class="finder-label">
|
||||
<i data-lucide="users"></i>
|
||||
Event Type
|
||||
Type d'événement
|
||||
</label>
|
||||
<select class="finder-select focus-ring" id="event-type">
|
||||
<option value="">All types</option>
|
||||
<option value="networking">Networking</option>
|
||||
<option value="">Tous les types</option>
|
||||
<option value="networking">Réseautage</option>
|
||||
<option value="tech">Tech & Innovation</option>
|
||||
<option value="creative">Creative & Design</option>
|
||||
<option value="business">Business</option>
|
||||
<option value="creative">Créatif & Design</option>
|
||||
<option value="business">Affaires</option>
|
||||
<option value="startup">Startup</option>
|
||||
<option value="wine">Wine & Tasting</option>
|
||||
<option value="wine">Vin & Dégustation</option>
|
||||
<option value="art">Art & Culture</option>
|
||||
<option value="music">Music & Entertainment</option>
|
||||
<option value="music">Musique & Divertissement</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -58,14 +58,14 @@
|
||||
<div class="price-range-label">
|
||||
<span>
|
||||
<i data-lucide="euro"></i>
|
||||
Price Range
|
||||
Fourchette de prix
|
||||
</span>
|
||||
<span class="price-value" id="price-display">€0 - €100</span>
|
||||
</div>
|
||||
</label>
|
||||
<div style="display: flex; gap: var(--space-3); align-items: center;">
|
||||
<input type="range" class="price-slider" id="price-min" min="0" max="100" value="0" style="flex: 1;">
|
||||
<span style="color: var(--color-neutral-500); font-weight: 600;">to</span>
|
||||
<span style="color: var(--color-neutral-500); font-weight: 600;">à</span>
|
||||
<input type="range" class="price-slider" id="price-max" min="0" max="100" value="100" style="flex: 1;">
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,7 +73,7 @@
|
||||
|
||||
<button type="submit" class="finder-search-btn">
|
||||
<i data-lucide="search"></i>
|
||||
Find Events
|
||||
Trouver des événements
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -81,7 +81,7 @@
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// Event Finder Functionality
|
||||
// Fonctionnalité de recherche d'événements
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const priceMin = document.getElementById('price-min');
|
||||
const priceMax = document.getElementById('price-max');
|
||||
@@ -134,18 +134,18 @@
|
||||
priceMax: priceMax ? priceMax.value : ''
|
||||
};
|
||||
|
||||
console.log('Search filters:', formData);
|
||||
console.log('Filtres de recherche :', formData);
|
||||
|
||||
// Add loading state to button
|
||||
const searchBtn = document.querySelector('.finder-search-btn');
|
||||
if (searchBtn) {
|
||||
const originalText = searchBtn.innerHTML;
|
||||
searchBtn.innerHTML = '<div style="width: 20px; height: 20px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite;"></div> Searching...';
|
||||
searchBtn.innerHTML = '<div style="width: 20px; height: 20px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite;"></div> Recherche...';
|
||||
|
||||
// Simulate search
|
||||
setTimeout(() => {
|
||||
searchBtn.innerHTML = originalText;
|
||||
alert('Search completed! Results would be displayed here.');
|
||||
alert('Recherche terminée ! Les résultats seraient affichés ici.');
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div class="container min-h-screen mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div class="flex justify-between items-center my-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900">Événements à venir</h1>
|
||||
<div class="text-sm text-gray-500">
|
||||
|
||||
@@ -76,37 +76,37 @@
|
||||
<section class="section features-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Why Choose Aperonight?</h2>
|
||||
<p class="section-description">We curate premium experiences that connect professionals and create lasting relationships.</p>
|
||||
<h2 class="section-title">Pourquoi choisir Aperonight ?</h2>
|
||||
<p class="section-description">Nous sélectionnons des expériences premium qui connectent les professionnels et créent des relations durables.</p>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="crown"></i>
|
||||
</div>
|
||||
<h3 class="feature-title">Premium Curation</h3>
|
||||
<p class="feature-description">Every event is carefully selected and designed to provide exceptional value and networking opportunities.</p>
|
||||
<h3 class="feature-title">Sélection Premium</h3>
|
||||
<p class="feature-description">Chaque événement est soigneusement sélectionné et conçu pour offrir une valeur exceptionnelle et des opportunités de réseautage.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="shield-check"></i>
|
||||
</div>
|
||||
<h3 class="feature-title">Secure & Trusted</h3>
|
||||
<p class="feature-description">Safe payments, verified venues, and trusted community with comprehensive insurance coverage.</p>
|
||||
<h3 class="feature-title">Sécurisé et Fiable</h3>
|
||||
<p class="feature-description">Paiements sécurisés, lieux vérifiés et communauté de confiance avec couverture d'assurance complète.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="users-2"></i>
|
||||
</div>
|
||||
<h3 class="feature-title">Quality Networking</h3>
|
||||
<p class="feature-description">Connect with verified professionals, entrepreneurs, and industry leaders in intimate settings.</p>
|
||||
<h3 class="feature-title">Réseautage de Qualité</h3>
|
||||
<p class="feature-description">Connectez-vous avec des professionnels vérifiés, des entrepreneurs et des leaders de l'industrie dans des environnements intimes.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<i data-lucide="zap"></i>
|
||||
</div>
|
||||
<h3 class="feature-title">Instant Booking</h3>
|
||||
<p class="feature-description">Seamless reservation process with instant confirmation and easy event management.</p>
|
||||
<h3 class="feature-title">Réservation Instantanée</h3>
|
||||
<p class="feature-description">Processus de réservation fluide avec confirmation instantanée et gestion d'événement facile.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -118,19 +118,19 @@
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item" data-controller="counter" data-action="counter:scroll->counter#animate">
|
||||
<span class="stat-number" data-target-value="150">0</span>
|
||||
<div class="stat-label">Monthly Events</div>
|
||||
<div class="stat-label">Événements Mensuels</div>
|
||||
</div>
|
||||
<div class="stat-item" data-controller="counter" data-action="counter:scroll->counter#animate">
|
||||
<span class="stat-number" data-target-value="5200">0</span>
|
||||
<div class="stat-label">Active Members</div>
|
||||
<div class="stat-label">Membres Actifs</div>
|
||||
</div>
|
||||
<div class="stat-item" data-controller="counter" data-action="counter:scroll->counter#animate">
|
||||
<span class="stat-number" data-target-value="200">0</span>
|
||||
<div class="stat-label">Partner Venues</div>
|
||||
<div class="stat-label">Lieux Partenaires</div>
|
||||
</div>
|
||||
<div class="stat-item" data-controller="counter" data-action="counter:scroll->counter#animate">
|
||||
<span class="stat-number" data-target-value="98">0</span>
|
||||
<div class="stat-label">Satisfaction Rate</div>
|
||||
<div class="stat-label">Taux de Satisfaction</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,17 +140,13 @@
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2>Ready to Join the Community?</h2>
|
||||
<p>Start discovering amazing events and connect with like-minded professionals in your city.</p>
|
||||
<h2>Prêt à rejoindre la communauté ?</h2>
|
||||
<p>Commencez à découvrir des événements incroyables et connectez-vous avec des professionnels partageant les mêmes idées dans votre ville.</p>
|
||||
<div style="display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap;">
|
||||
<button class="btn btn-lg" style="background: white; color: var(--color-primary-600); border: 2px solid white;">
|
||||
<%= link_to new_user_registration_path, class: "btn btn-lg bg-white border-2 border-white text-blue-600 hover:bg-blue-400 hover:text-white" do %>
|
||||
<i data-lucide="user-plus"></i>
|
||||
Join Now - Free
|
||||
</button>
|
||||
<button class="btn btn-lg btn-ghost" style="border: 2px solid rgba(255,255,255,0.5); color: white;">
|
||||
<i data-lucide="calendar"></i>
|
||||
Browse Events
|
||||
</button>
|
||||
Rejoindre gratuitement
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user