Trying to work on new theme

app/views/components/_party_finder.html.erb

@@ -0,0 +1,157 @@
+<!-- Party Finder Section -->
+<section style="padding: 0;">
+  <div class="container">
+    <div class="party-finder animate-fadeInUp">
+      <div class="finder-header">
+        <h2 class="finder-title">Find Your Perfect Event</h2>
+        <p class="finder-subtitle">Discover afterwork parties tailored to your preferences</p>
+      </div>
+
+      <form class="finder-form">
+        <div class="finder-field">
+          <label class="finder-label">
+            <i data-lucide="calendar"></i>
+            Date
+          </label>
+          <input type="date" class="finder-input focus-ring" id="event-date">
+        </div>
+
+        <div class="finder-field">
+          <label class="finder-label">
+            <i data-lucide="map-pin"></i>
+            City
+          </label>
+          <select class="finder-select focus-ring" id="event-city">
+            <option value="">Choose a city</option>
+            <option value="paris">Paris</option>
+            <option value="london">London</option>
+            <option value="berlin">Berlin</option>
+            <option value="madrid">Madrid</option>
+            <option value="barcelona">Barcelona</option>
+            <option value="amsterdam">Amsterdam</option>
+            <option value="rome">Rome</option>
+            <option value="zurich">Zurich</option>
+          </select>
+        </div>
+
+        <div class="finder-field">
+          <label class="finder-label">
+            <i data-lucide="users"></i>
+            Event Type
+          </label>
+          <select class="finder-select focus-ring" id="event-type">
+            <option value="">All types</option>
+            <option value="networking">Networking</option>
+            <option value="tech">Tech & Innovation</option>
+            <option value="creative">Creative & Design</option>
+            <option value="business">Business</option>
+            <option value="startup">Startup</option>
+            <option value="wine">Wine & Tasting</option>
+            <option value="art">Art & Culture</option>
+            <option value="music">Music & Entertainment</option>
+          </select>
+        </div>
+
+        <!--
+        <div class="finder-field price-range">
+          <label class="finder-label">
+            <div class="price-range-label">
+              <span>
+                <i data-lucide="euro"></i>
+                Price Range
+              </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>
+            <input type="range" class="price-slider" id="price-max" min="0" max="100" value="100" style="flex: 1;">
+          </div>
+        </div>
+        -->
+
+        <button type="submit" class="finder-search-btn">
+          <i data-lucide="search"></i>
+          Find Events
+        </button>
+      </form>
+    </div>
+  </div>
+</section>
+
+<script>
+  // Party Finder Functionality
+  document.addEventListener("DOMContentLoaded", function() {
+    const priceMin = document.getElementById('price-min');
+    const priceMax = document.getElementById('price-max');
+    const priceDisplay = document.getElementById('price-display');
+
+    if (priceMin && priceMax && priceDisplay) {
+      function updatePriceDisplay() {
+        const minVal = parseInt(priceMin.value);
+        const maxVal = parseInt(priceMax.value);
+
+        // Ensure min doesn't exceed max
+        if (minVal > maxVal) {
+          priceMin.value = maxVal;
+        }
+
+        // Ensure max doesn't go below min
+        if (maxVal < minVal) {
+          priceMax.value = minVal;
+        }
+
+        const finalMin = Math.min(parseInt(priceMin.value), parseInt(priceMax.value));
+        const finalMax = Math.max(parseInt(priceMin.value), parseInt(priceMax.value));
+
+        priceDisplay.textContent = `€${finalMin} - €${finalMax}`;
+      }
+
+      priceMin.addEventListener('input', updatePriceDisplay);
+      priceMax.addEventListener('input', updatePriceDisplay);
+
+      // Set default date to tomorrow
+      const tomorrow = new Date();
+      tomorrow.setDate(tomorrow.getDate() + 1);
+      const dateInput = document.getElementById('event-date');
+      if (dateInput) {
+        dateInput.value = tomorrow.toISOString().split('T')[0];
+      }
+    }
+
+    // Form submission
+    const finderForm = document.querySelector('.finder-form');
+    if (finderForm) {
+      finderForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+
+        const formData = {
+          date: document.getElementById('event-date').value,
+          city: document.getElementById('event-city').value,
+          type: document.getElementById('event-type').value,
+          priceMin: priceMin ? priceMin.value : '',
+          priceMax: priceMax ? priceMax.value : ''
+        };
+
+        console.log('Search filters:', 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...';
+
+          // Simulate search
+          setTimeout(() => {
+            searchBtn.innerHTML = originalText;
+            alert('Search completed! Results would be displayed here.');
+          }, 2000);
+        }
+      });
+    }
+  });
+</script>
+
+<style>
+</style>