Search form

This commit is contained in:
Brad Traversy
2024-07-12 16:01:14 -04:00
parent 58aba3d48b
commit 6d758a1f31
2 changed files with 75 additions and 39 deletions
+3 -39
View File
@@ -1,3 +1,5 @@
import PropertySearchForm from './PropertySearchForm';
const Hero = () => {
return (
<section className='bg-blue-700 py-20 mb-4'>
@@ -10,45 +12,7 @@ const Hero = () => {
Discover the perfect property that suits your needs.
</p>
</div>
{/* <!-- Form Component --> */}
<form className='mt-3 mx-auto max-w-2xl w-full flex flex-col md:flex-row items-center'>
<div className='w-full md:w-3/5 md:pr-2 mb-4 md:mb-0'>
<label htmlFor='location' className='sr-only'>
Location
</label>
<input
type='text'
id='location'
placeholder='Enter Location or Keyword'
className='w-full px-4 py-3 rounded-lg bg-white text-gray-800 focus:outline-none focus:ring focus:ring-blue-500'
/>
</div>
<div className='w-full md:w-2/5 md:pl-2'>
<label htmlFor='property-type' className='sr-only'>
Property Type
</label>
<select
id='property-type'
className='w-full px-4 py-3 rounded-lg bg-white text-gray-800 focus:outline-none focus:ring focus:ring-blue-500'
>
<option value='All'>All</option>
<option value='Apartment'>Apartment</option>
<option value='Studio'>Studio</option>
<option value='Condo'>Condo</option>
<option value='House'>House</option>
<option value='Cabin Or Cottage'>Cabin or Cottage</option>
<option value='Loft'>Loft</option>
<option value='Room'>Room</option>
<option value='Other'>Other</option>
</select>
</div>
<button
type='submit'
className='md:ml-4 mt-4 md:mt-0 w-full md:w-auto px-6 py-3 rounded-lg bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-500'
>
Search
</button>
</form>
<PropertySearchForm />
</div>
</section>
);