adjustments

index.html

@@ -56,25 +56,25 @@
                   <div class="h-[2px] w-full bg-bgMain"></div>
                 </div>
               </a>
-              <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+              <a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
                 <p class="px-[10px]">Sake</p>
                 <div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
                   <div class="h-[2px] w-full bg-bgMain"></div>
                 </div>
               </a>
-              <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+              <a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
                 <p class="px-[10px]">Coffe</p>
                 <div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
                   <div class="h-[2px] w-full bg-bgMain"></div>
                 </div>
               </a>
-              <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+              <a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
                 <p class=px-[10px]"">Spirits & Liqueurs</p>
                 <div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
                   <div class="h-[2px] w-full bg-bgMain"></div>
                 </div>
               </a>
-              <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+              <a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
                 <p class="px-[10px]">Wine</p>
                 <div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
                   <div class="h-[2px] w-full bg-bgMain"></div>
@@ -116,7 +116,7 @@
               </div>
             </div>
             <div class="w-full h-[50vh] flex flex-row gap-[10px] mb-[10px] overflow-hidden max-lg:overflow-x-auto hide-scrollbar">
-              <a href="#" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="2500" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
+              <a href="search.html" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="2500" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
                 <div class="w-full h-full max-h-[75%] flex flex-col relative overflow-hidden bg-bgMain2 transition-all ease duration-[0.75s] group-hover:max-h-[90%]">
                   <img src="./assets/images/bg bb.png" class="w-full h-full absolute inset-[0] object-cover grayscale-[0.75] opacity-[0.05] transition-all ease duration-[1s] group-hover:grayscale-[0] group-hover:opacity-[0.10]"></img>
                 </div>
@@ -125,7 +125,7 @@
                   <p class="font-bold text-xl px-[10px] overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[1.2s] group-hover:text-bgMain">Wine</p>
                 </div>
               </a>
-              <a href="#" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="3000" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
+              <a href="search.html" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="3000" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
                 <div class="w-full h-full max-h-[75%] flex flex-col relative overflow-hidden bg-bgMain2 transition-all ease duration-[0.75s] group-hover:max-h-[90%]">
                   <img src="./assets/images/bg bb.png" class="w-full h-full absolute inset-[0] object-cover grayscale-[0.75] opacity-[0.05] transition-all ease duration-[1s] group-hover:grayscale-[0] group-hover:opacity-[0.10]"></img>
                 </div>
@@ -134,7 +134,7 @@
                   <p class="font-bold text-xl px-[10px] overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[1.2s] group-hover:text-bgMain">Sake</p>
                 </div>
               </a>
-              <a href="#" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="3500" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
+              <a href="search.html" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="3500" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
                 <div class="w-full h-full max-h-[75%] flex flex-col relative overflow-hidden bg-bgMain2 transition-all ease duration-[0.75s] group-hover:max-h-[90%]">
                   <img src="./assets/images/bg bb.png" class="w-full h-full absolute inset-[0] object-cover grayscale-[0.75] opacity-[0.05] transition-all ease duration-[1s] group-hover:grayscale-[0] group-hover:opacity-[0.10]"></img>
                 </div>
@@ -143,7 +143,7 @@
                   <p class="font-bold text-xl px-[10px] overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[1.2s] group-hover:text-bgMain">Spirit</p>
                 </div>
               </a>
-              <a href="#" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="4000" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
+              <a href="search.html" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="4000" class="min-w-[300px] grow-[1] h-full flex flex-col justify-end items-center relative overflow-hidden group">
                 <div class="w-full h-full max-h-[75%] flex flex-col relative overflow-hidden bg-bgMain2 transition-all ease duration-[0.75s] group-hover:max-h-[90%]">
                   <img src="./assets/images/bg bb.png" class="w-full h-full absolute inset-[0] object-cover grayscale-[0.75] opacity-[0.05] transition-all ease duration-[1s] group-hover:grayscale-[0] group-hover:opacity-[0.10]"></img>
                 </div>
@@ -281,7 +281,7 @@
             </div>
             <!-- listings list start -->
             <div class="w-full flex flex-row justify-center items-center">
-              <a href="#" class="w-full max-w-[200px] px-[20px] py-[8px] font-bold bg-bgMain2 text-bgMain text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
+              <a href="search.html" class="w-full max-w-[200px] px-[20px] py-[8px] font-bold bg-bgMain2 text-bgMain text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
                 View More
                 <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
               </a>
@@ -302,7 +302,10 @@
                 <div class="w-full flex flex-row">
                   <input type="text" placeholder="Search..." class="w-full bg-black/10 py-[5px] px-[10px] border-b-[1px] border-bgMain2/25 placeholder:text-black/50 transition-all ease duration-[0.4s] focus:outline-[0] focus:bg-black/15"></input>
                 </div>
-                <buttons class="flex flex-col justify-center items-center bg-bgMain2 text-bgMain p-[10px] cursor-pointer relative group"><i class="bx bx-search "></i><span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></buttons>
+                <a href="search.html" class="flex flex-col justify-center items-center bg-bgMain2 text-bgMain p-[10px] cursor-pointer relative group">
+                  <i class="bx bx-search "></i>
+                  <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+                </a>
               </div>
               <!-- Idea here is if the user selects a product, then the box of selections for type appears, and once a type is select then style box of selections appear, and so on -->
               <div class="w-full flex flex-row gap-[25px] flex-wrap">
@@ -471,23 +474,23 @@
             <div class="flex flex-col gap-[15px] justify-start items-start">
               <p class="">Drinks</p>
               <div class="flex flex-row gap-[15px] justify-start items-start flex-wrap">
-                <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+                <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
                   <div class="py-[5px]"><p class="px-[15px]">Wine</p></div>
                   <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Wine</p></div>
                 </a>
-                <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+                <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
                   <div class="py-[5px]"><p class="px-[15px]">Sake</p></div>
                   <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Sake</p></div>
                 </a>
-                <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+                <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
                   <div class="py-[5px]"><p class="px-[15px]">Spirits</p></div>
                   <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Spirits</p></div>
                 </a>
-                <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+                <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
                   <div class="py-[5px]"><p class="px-[15px]">Coffee</p></div>
                   <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Coffee</p></div>
                 </a>
-                <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+                <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
                   <div class="py-[5px]"><p class="px-[15px]">Misc</p></div>
                   <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Misc</p></div>
                 </a>

search.html

@@ -64,25 +64,25 @@
                   <div class="h-[2px] w-full bg-bgMain"></div>
                 </div>
               </a>
-              <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+              <a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
                 <p class="px-[10px]">Sake</p>
                 <div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
                   <div class="h-[2px] w-full bg-bgMain"></div>
                 </div>
               </a>
-              <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+              <a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
                 <p class="px-[10px]">Coffe</p>
                 <div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
                   <div class="h-[2px] w-full bg-bgMain"></div>
                 </div>
               </a>
-              <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+              <a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
                 <p class=px-[10px]"">Spirits & Liqueurs</p>
                 <div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
                   <div class="h-[2px] w-full bg-bgMain"></div>
                 </div>
               </a>
-              <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+              <a href="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
                 <p class="px-[10px]">Wine</p>
                 <div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
                   <div class="h-[2px] w-full bg-bgMain"></div>
@@ -254,74 +254,74 @@
     </div>
       <!-- main middle end -->
 
-    <!-- main footer start -->
-    <div class="w-full flex flex-col justify-center items-center bg-bgMain2 text-textMain2">
-      <div class="w-full flex flex-col justify-center items-center">
-        <div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative">
-          <div class="w-full py-[50px] flex flex-row gap-[50px] flex-wrap">
-            <div class="flex flex-col gap-[15px] justify-start items-start">
-              <p class="">Drinks</p>
-              <div class="flex flex-row gap-[15px] justify-start items-start flex-wrap">
-                <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
-                  <div class="py-[5px]"><p class="px-[15px]">Wine</p></div>
-                  <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Wine</p></div>
-                </a>
-                <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
-                  <div class="py-[5px]"><p class="px-[15px]">Sake</p></div>
-                  <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Sake</p></div>
-                </a>
-                <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
-                  <div class="py-[5px]"><p class="px-[15px]">Spirits</p></div>
-                  <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Spirits</p></div>
-                </a>
-                <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
-                  <div class="py-[5px]"><p class="px-[15px]">Coffee</p></div>
-                  <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Coffee</p></div>
-                </a>
-                <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
-                  <div class="py-[5px]"><p class="px-[15px]">Misc</p></div>
-                  <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Misc</p></div>
-                </a>
+      <!-- main footer start -->
+      <div class="w-full flex flex-col justify-center items-center bg-bgMain2 text-textMain2">
+        <div class="w-full flex flex-col justify-center items-center">
+          <div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative">
+            <div class="w-full py-[50px] flex flex-row gap-[50px] flex-wrap">
+              <div class="flex flex-col gap-[15px] justify-start items-start">
+                <p class="">Drinks</p>
+                <div class="flex flex-row gap-[15px] justify-start items-start flex-wrap">
+                  <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+                    <div class="py-[5px]"><p class="px-[15px]">Wine</p></div>
+                    <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Wine</p></div>
+                  </a>
+                  <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+                    <div class="py-[5px]"><p class="px-[15px]">Sake</p></div>
+                    <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Sake</p></div>
+                  </a>
+                  <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+                    <div class="py-[5px]"><p class="px-[15px]">Spirits</p></div>
+                    <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Spirits</p></div>
+                  </a>
+                  <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+                    <div class="py-[5px]"><p class="px-[15px]">Coffee</p></div>
+                    <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Coffee</p></div>
+                  </a>
+                  <a href="search.html" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+                    <div class="py-[5px]"><p class="px-[15px]">Misc</p></div>
+                    <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Misc</p></div>
+                  </a>
+                </div>
               </div>
-            </div>
-            <div class="flex flex-col gap-[15px] justify-start items-start">
-              <p class="">Pages</p>
-              <div class="flex flex-row gap-[15px] justify-start items-start flex-wrap">
-                <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
-                  <div class="py-[5px]"><p class="px-[15px]">Events</p></div>
-                  <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Events</p></div>
-                </a>
-                <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
-                  <div class="py-[5px]"><p class="px-[15px]">About</p></div>
-                  <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">About</p></div>
-                </a>
+              <div class="flex flex-col gap-[15px] justify-start items-start">
+                <p class="">Pages</p>
+                <div class="flex flex-row gap-[15px] justify-start items-start flex-wrap">
+                  <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+                    <div class="py-[5px]"><p class="px-[15px]">Events</p></div>
+                    <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Events</p></div>
+                  </a>
+                  <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+                    <div class="py-[5px]"><p class="px-[15px]">About</p></div>
+                    <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">About</p></div>
+                  </a>
+                </div>
               </div>
-            </div>
-            <div class="flex flex-col gap-[15px] justify-start items-start">
-              <p class="">Legal</p>
-              <div class="flex flex-row gap-[15px] justify-start items-start flex-wrap">
-                <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
-                  <div class="py-[5px]"><p class="px-[15px]">Terms of Service</p></div>
-                  <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Terms of Service</p></div>
-                </a>
-                <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
-                  <div class="py-[5px]"><p class="px-[15px]">Privacy Policy</p></div>
-                  <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Privacy Policy</p></div>
-                </a>
+              <div class="flex flex-col gap-[15px] justify-start items-start">
+                <p class="">Legal</p>
+                <div class="flex flex-row gap-[15px] justify-start items-start flex-wrap">
+                  <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+                    <div class="py-[5px]"><p class="px-[15px]">Terms of Service</p></div>
+                    <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Terms of Service</p></div>
+                  </a>
+                  <a href="#" class="w-full max-w-[200px] text-base font-bold text-textMain2 relative group">
+                    <div class="py-[5px]"><p class="px-[15px]">Privacy Policy</p></div>
+                    <div class="py-[5px] text-bgMain2 absolute inset-[0] bg-bgMain z-[1] w-[0%] overflow-hidden transition-all ease duration-[0.4s] group-hover:w-full"><p class="px-[15px]">Privacy Policy</p></div>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="w-full flex flex-col justify-center items-center border-t-[1px] border-bgMain/10">
-        <div class="max-w-[1400px] w-full flex flex-col justify-center items-center px-[10px] relative">
-          <div class="w-full p-[15px] flex flex-col justify-center items-center">
-            <p class="">Copyright © <script>document.write(new Date().getFullYear())</script> <a href="#" target="_blank" class="font-bold transition-all ease duration-[0.4s] hover:text-linkMain">Cellar Social</a> All Rights Reserved.</p>
+        <div class="w-full flex flex-col justify-center items-center border-t-[1px] border-bgMain/10">
+          <div class="max-w-[1400px] w-full flex flex-col justify-center items-center px-[10px] relative">
+            <div class="w-full p-[15px] flex flex-col justify-center items-center">
+              <p class="">Copyright © <script>document.write(new Date().getFullYear())</script> <a href="#" target="_blank" class="font-bold transition-all ease duration-[0.4s] hover:text-linkMain">Cellar Social</a> All Rights Reserved.</p>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <!-- main footer end -->
+      <!-- main footer end -->
 
     <!-- popups start -->
     <div popupID="FilterSearch" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center py-[25px] overflow-auto">