#37766

<!-- Dropdown Search Section -->
<div class="dropdown-search-container">
  <div class="dropdown-wrapper">
    <select id="location-dropdown" class="location-select">
      <option value="" disabled selected>Select an option</option>
      <option value="windler">Windler</option>
      <option value="dillon-pointe">Dillon Pointe</option>
      <option value="montaine">Montaine</option>
      <option value="westerly-townhomes">Westerly - Townhomes</option>
      <option value="westerly">Westerly</option>
      <option value="bloom">Bloom</option>
      <option value="granary">Granary</option>
      <option value="timnath-lakes">Timnath Lakes</option>
      <option value="trailside-on-harmony">Trailside on Harmony</option>
      <option value="trevenna">Trevenna</option>
    </select>
  </div>
  <button id="search-button" class="search-button">SEARCH</button>
</div>

<style>
.dropdown-search-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  z-index: 100;
}

.dropdown-wrapper {
  margin-bottom: 20px;
  position: relative;
}

.location-select {
  width: 100%;
  padding: 15px 20px;
  font-size: 22px;
  color: white;
  background-color: #004080;
  border: 2px solid white;
  border-radius: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
}

.location-select:focus {
  border-color: #ffc107;
}

.location-select option {
  background-color: #004080;
  color: white;
  padding: 15px;
  font-size: 18px;
}

.search-button {
  background-color: #ffc107;
  color: white;
  border: none;
  padding: 15px 50px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-button:hover {
  background-color: #e6ac00;
}

/* Style for the dropdown arrow */
.dropdown-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid white;
  pointer-events: none;
}

/* Responsive styles */
@media (max-width: 768px) {
  .dropdown-search-container {
    padding: 15px;
  }
  
  .location-select {
    font-size: 18px;
    padding: 12px 15px;
  }
  
  .search-button {
    padding: 12px 30px;
    font-size: 16px;
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const searchButton = document.getElementById('search-button');
  const dropdown = document.getElementById('location-dropdown');
  
  // URLs for each option - you can replace these with your actual URLs
  const locationUrls = {
    'windler': 'https://example.com/windler',
    'dillon-pointe': 'https://example.com/dillon-pointe',
    'montaine': 'https://example.com/montaine',
    'westerly-townhomes': 'https://example.com/westerly-townhomes',
    'westerly': 'https://example.com/westerly',
    'bloom': 'https://example.com/bloom',
    'granary': 'https://example.com/granary',
    'timnath-lakes': 'https://example.com/timnath-lakes',
    'trailside-on-harmony': 'https://example.com/trailside-on-harmony',
    'trevenna': 'https://example.com/trevenna'
  };
  
  searchButton.addEventListener('click', function() {
    const selectedValue = dropdown.value;
    
    if (selectedValue) {
      // If a location is selected, navigate to its URL
      const targetUrl = locationUrls[selectedValue];
      window.location.href = targetUrl;
    } else {
      // If no location is selected, show an alert
      alert('Please select a location before searching.');
    }
  });
});
</script>