FEATURE Introducing search bar and search module

resources/css/components/search-module.css

@@ -0,0 +1,105 @@
+.search-module {
+  @apply w-full absolute  
+	bg-carhop-green-700
+  /* bg-white */
+  text-white
+	left-0 
+	px-16
+	py-6
+  z-10
+  bottom-0
+  /* overflow-x-hidden */
+	transform translate-y-full;
+  @apply block;
+
+  animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
+    fade-in 600ms forwards ease-out;
+
+  @keyframes translate-in {
+    from {
+      transform: translateY(calc(100% - 100px));
+    }
+    to {
+      transform: translateY(100%);
+    }
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  &[closed] {
+    @apply hidden;
+  }
+
+  &[closing] {
+    animation: translate-out 800ms forwards ease-in, fade-out 600ms forwards ease-in;
+  }
+
+  &[opened] {
+    animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
+      fade-in 600ms forwards ease-out;
+  }
+
+  a {
+    @apply text-white;
+  }
+  input::placeholder {
+    @apply text-white;
+  }
+  &__wrapper-container {
+    @apply max-w-screen-xl mx-auto;
+  }
+  &__search-form {
+    @apply flex flex-wrap;
+
+    &__title {
+      @apply block font-bold text-lg w-full;
+    }
+    &__separator {
+      @apply mt-2 mb-8 bg-neutral-500 border-none opacity-50 w-full;
+      height: 1px;
+    }
+    &__input {
+      box-sizing: border-box;
+      @apply block max-w-full w-full flex-grow !py-4  !border-white px-4 focus-visible:ring-primary focus-visible:ring-2;
+      @apply border rounded-none;
+      outline: none !important;
+      /* border-right: none;
+      border-top-left-radius: 999px;
+      border-bottom-left-radius: 999px;
+      border: 1px solid; */
+
+      /* box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white; */
+    }
+    button[type='submit'] {
+      @apply bg-primary hidden  text-white  shrink-0 flex justify-center items-center gap-3 rounded-full md:rounded-l-none px-4 py-3 focus-visible:ring-primary focus-visible:ring-2;
+      max-width: 300px;
+      outline: none !important;
+      transform: translateX(-1px);
+      .search_icon {
+        @apply invert;
+      }
+    }
+  }
+  &__searchbar-group {
+    @apply w-full flex flex-col md:flex-row gap-y-4;
+  }
+  &__suggestions {
+    @apply pt-4;
+    .suggestion-item {
+      @apply underline underline-offset-4 block w-full mb-2 font-light text-base;
+      word-break: break-word;
+      text-decoration-thickness: 1px;
+    }
+  }
+}
+
+body:has(.search-module[opened]) main {
+  filter: blur(2px) brightness(0.9);
+}