homepage overhault, aiService 1. try

bizmatch/src/app/pages/home/home.component.html

@@ -36,7 +36,7 @@
         <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-blue-900 mb-4 text-center">Find businesses for sale.</h1>
         <p class="text-base md:text-lg lg:text-xl text-blue-600 mb-8 text-center">Unlocking Exclusive Opportunities - Empowering Entrepreneurial Dreams</p>
         <div class="bg-white bg-opacity-80 p-2 rounded-lg shadow-lg w-full">
-          <div class="text-sm lg:text-base text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700 flex justify-center">
+          <div class="text-sm lg:text-base mb-1 text-center text-gray-500 border-gray-200 dark:text-gray-400 dark:border-gray-700 flex justify-center">
             <ul class="flex flex-wrap -mb-px">
               <li class="me-2">
                 <a
@@ -76,15 +76,78 @@
               </li>
             </ul>
           </div>
-          <div class="flex items-center border border-gray-300 rounded-full p-2">
-            <input type="text" [(ngModel)]="prompt" placeholder="AI Search" class="flex-grow px-4 py-2 outline-none rounded-full text-sm md:text-base" />
-            <button class="bg-blue-600 text-white p-2 rounded-full" (click)="search()">
-              <svg class="h-5 w-5 md:h-6 md:w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M10.5 18.5A7.5 7.5 0 1018 10.5 7.5 7.5 0 0010.5 18.5z"></path>
-              </svg>
-            </button>
+          @if(criteria){
+          <div class="w-full max-w-3xl mx-auto bg-white rounded-lg flex flex-col md:flex-row border border-gray-300">
+            <div class="md:flex-none md:w-40 flex-1 border-r border-gray-300 overflow-hidden">
+              <div class="relative">
+                <select
+                  class="appearance-none bg-transparent w-full py-3 px-4 pr-8 focus:outline-none"
+                  [ngModel]="criteria.types"
+                  (ngModelChange)="onTypesChange($event)"
+                  [ngClass]="{ 'placeholder-selected': criteria.types.length === 0 }"
+                >
+                  <option [value]="[]">Business Type</option>
+                  @for(tob of selectOptions.typesOfBusiness; track tob){
+                  <option [value]="tob.value">{{ tob.name }}</option>
+                  }
+                </select>
+                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                  <i class="fas fa-chevron-down text-xs"></i>
+                </div>
+              </div>
+            </div>
+            <div class="md:flex-auto md:w-36 lex-grow border-b md:border-b-0 md:border-r border-gray-300">
+              <ng-select
+                class="custom"
+                [multiple]="false"
+                [hideSelected]="true"
+                [trackByFn]="trackByFn"
+                [minTermLength]="2"
+                [loading]="cityLoading"
+                typeToSearchText="Please enter 2 or more characters"
+                [typeahead]="cityInput$"
+                [ngModel]="cityOrState"
+                (ngModelChange)="setCity($event)"
+                placeholder="Enter City or State ..."
+              >
+                @for (city of cities$ | async; track city.id) {
+                <ng-option [value]="city">{{ city.city }} - {{ selectOptions.getStateInitials(city.state) }}</ng-option>
+                }
+              </ng-select>
+            </div>
+            <div class="md:flex-none md:w-36 flex-1 border-b md:border-b-0 md:border-r border-gray-300">
+              <div class="relative">
+                <select
+                  class="appearance-none bg-transparent w-full py-3 px-4 pr-8 focus:outline-none"
+                  (ngModelChange)="onRadiusChange($event)"
+                  [ngModel]="criteria.radius"
+                  [ngClass]="{ 'placeholder-selected': !criteria.radius }"
+                >
+                  <option [value]="null">City Radius</option>
+                  @for(dist of selectOptions.distances; track dist){
+                  <option [value]="dist.value">{{ dist.name }}</option>
+                  }
+                </select>
+                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                  <i class="fas fa-chevron-down text-xs"></i>
+                </div>
+              </div>
+            </div>
+
+            <div class="bg-blue-600 hover:bg-blue-500 transition-colors duration-200">
+              <button class="w-full h-full text-white font-semibold py-3 px-6 focus:outline-none" (click)="search()">Suchen</button>
+            </div>
+          </div>
+          }
+          <div class="mt-4 flex items-center justify-center text-gray-700">
+            <span class="mr-2">AI-Search</span>
+            <span class="bg-teal-100 text-teal-800 text-xs font-semibold px-2 py-1 rounded">BETA</span>
+            <span class="ml-2">- Try now</span>
+            <div class="ml-4 relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
+              <input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 border-gray-300 appearance-none cursor-pointer" />
+              <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
+            </div>
           </div>
-          <div class="mt-4 text-gray-600 text-sm md:text-base text-center hover:cursor-pointer" (click)="openModal()">Or search using filters ▼</div>
         </div>
       </div>
     </div>