...

DotNetTitan · Sep 5, 2024 · e1d3d50 · e1d3d50
1 parent 370bff3
commit e1d3d50
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 26 deletions.
diff --git a/src/components/GlobalSearch.vue b/src/components/GlobalSearch.vue
@@ -9,22 +9,24 @@
         @blur="clearSuggestions"
         type="text"
         placeholder="Search products..."
-        class="w-full bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md pl-10 pr-4 py-1.5 text-base focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200"
+        class="w-full bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-md pl-10 pr-4 py-2 text-base focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 shadow-sm"
       >
       <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
         <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
           <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
         </svg>
       </div>
-      <ul v-if="showSuggestions && suggestions.length > 0" class="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-lg max-h-60 overflow-auto">
-        <li v-for="(suggestion, index) in suggestions" 
-            :key="suggestion" 
-            @click="selectSuggestion(suggestion)"
-            :class="{'bg-indigo-100 dark:bg-indigo-700': index === selectedSuggestionIndex}"
-            class="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
-          {{ suggestion }}
-        </li>
-      </ul>
+      <transition name="fade">
+        <ul v-if="showSuggestions && suggestions.length > 0" class="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-lg max-h-60 overflow-auto">
+          <li v-for="(suggestion, index) in suggestions" 
+              :key="suggestion" 
+              @click="selectSuggestion(suggestion)"
+              :class="{'bg-indigo-100 dark:bg-indigo-700': index === selectedSuggestionIndex}"
+              class="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
+            {{ suggestion }}
+          </li>
+        </ul>
+      </transition>
     </div>
   </template>
 
@@ -85,4 +87,13 @@
     selectedSuggestionIndex.value = -1
     showSuggestions.value = false
   }
-  </script>
+  </script>
+
+  <style scoped>
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity 0.2s ease;
+  }
+  .fade-enter-from, .fade-leave-to {
+    opacity: 0;
+  }
+  </style>
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="min-h-screen bg-gray-900 text-white">
-    <nav class="bg-gray-800 shadow">
+    <nav class="bg-gray-800 shadow sticky top-0 z-50">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex items-center justify-between h-16 sm:h-20">
           <div class="flex items-center">
@@ -12,7 +12,10 @@
             <GlobalSearch />
           </div>
           <div class="hidden md:flex items-center space-x-4">
-            <RouterLink to="/login" class="text-gray-300 hover:text-indigo-400 px-3 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">
+            <RouterLink to="/login" class="flex items-center text-gray-300 hover:text-indigo-400 px-3 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
+              </svg>
               Sign in
             </RouterLink>
             <RouterLink to="/cart" class="text-gray-300 hover:text-indigo-400 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 relative">

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
@@ -9,23 +9,25 @@
           @keydown.enter.prevent="selectSuggestionByKeyboard"
           type="text"
           placeholder="Search products..."
-          class="w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md pl-10 pr-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200"
+          class="w-full bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-md pl-10 pr-4 py-2 text-base focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 shadow-sm"
         >
         <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
           <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
           </svg>
         </div>
       </div>
-      <ul v-if="suggestions.length > 0" class="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-lg max-h-60 overflow-auto">
-        <li v-for="(suggestion, index) in suggestions" 
-            :key="suggestion" 
-            @click="selectSuggestion(suggestion)"
-            :class="{'bg-indigo-100 dark:bg-indigo-700': index === selectedSuggestionIndex}"
-            class="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
-          {{ suggestion }}
-        </li>
-      </ul>
+      <transition name="fade">
+        <ul v-if="suggestions.length > 0" class="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-lg max-h-60 overflow-auto">
+          <li v-for="(suggestion, index) in suggestions" 
+              :key="suggestion" 
+              @click="selectSuggestion(suggestion)"
+              :class="{'bg-indigo-100 dark:bg-indigo-700': index === selectedSuggestionIndex}"
+              class="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
+            {{ suggestion }}
+          </li>
+        </ul>
+      </transition>
     </div>
   </template>
 
@@ -79,4 +81,13 @@
   watch(() => props.suggestions, () => {
     selectedSuggestionIndex.value = -1
   })
-  </script>
+  </script>
+
+  <style scoped>
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity 0.2s ease;
+  }
+  .fade-enter-from, .fade-leave-to {
+    opacity: 0;
+  }
+  </style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -28,15 +28,15 @@
       <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6 text-center">Featured Categories</h2>
       <div class="space-y-12">
         <div v-for="(category, index) in featuredCategories" :key="category" 
-             class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg transform transition-all duration-500 ease-in-out"
+             class="backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 rounded-xl p-6 shadow-lg transform transition-all duration-500 ease-in-out"
              :class="{'opacity-0 translate-y-10': !isVisible(index), 'opacity-100 translate-y-0': isVisible(index)}">
           <h3 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">
             {{ category }}
           </h3>
           <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
             <div v-for="product in getCategoryProducts(category)" :key="product.id" 
                  @click="navigateToProduct(product.id)"
-                 class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 text-center transform transition duration-300 hover:scale-105 cursor-pointer">
+                 class="bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4 text-center transform transition duration-300 hover:scale-105 cursor-pointer backdrop-filter backdrop-blur-sm">
               <img :src="product.thumbnail" :alt="product.title" class="w-full h-40 object-cover mb-3 rounded">
               <h4 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">{{ product.title }}</h4>
               <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">{{ truncateDescription(product.description) }}</p>