diff --git a/assets/images/satoshi-icon.svg b/assets/images/satoshi-icon.svg
new file mode 100644
index 0000000..90ad49b
--- /dev/null
+++ b/assets/images/satoshi-icon.svg
@@ -0,0 +1 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><style></style><path fill-rule="evenodd" d="m13 20.7v3.3h-2v-3.3z"/><path fill-rule="evenodd" d="m18.7 16.3v2h-13.4v-2z"/><path fill-rule="evenodd" d="m18.7 11v2h-13.4v-2z"/><path fill-rule="evenodd" d="m18.7 5.7v2h-13.4v-2z"/><path fill-rule="evenodd" d="m13 0v3.3h-2v-3.3z"/></svg>
\ No newline at end of file
diff --git a/assets/js/tabSys.js b/assets/js/tabSys.js
new file mode 100644
index 0000000..86d3098
--- /dev/null
+++ b/assets/js/tabSys.js
@@ -0,0 +1,27 @@
+document.addEventListener("DOMContentLoaded", function() {
+ const tabComponents = document.querySelectorAll('[tabSys]');
+
+ tabComponents.forEach(tabComponent => {
+ const tabSelectors = tabComponent.querySelectorAll('[tabSys-Selector] > button')
+ const tabContents = tabComponent.querySelectorAll('[tabSys-Content] > div');
+
+ tabSelectors.forEach((selector, index) => {
+ selector.addEventListener('click', () => {
+ // Remove active classes from all selectors and hide all contents
+ tabSelectors.forEach((s) => {
+ s.classList.remove("bg-bgMain2","text-bgMain","hover:bg-bgMain2/25");
+ s.classList.add("hover:bg-bgMain2/25");
+ });
+
+ tabContents.forEach((content) => {
+ content.classList.add("hidden");
+ });
+
+ // Add active classes to the clicked selector and show the corresponding content
+ selector.classList.add("bg-bgMain2","text-bgMain");
+ selector.classList.remove("hover:bg-bgMain2/25");
+ tabContents[index].classList.remove("hidden");
+ });
+ });
+ });
+});
diff --git a/index.html b/index.html
index 001e86d..cc3366f 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.css" />
</head>
- <body class="bg-transparent flex flex-col items-center flex-grow min-h-screen relative tracking-wide text-lg leading-[1.5] break-words text-textMain">
+ <body class="bg-transparent flex flex-col items-center flex-grow min-h-screen relative tracking-wide text-lg leading-[1.5] break-words text-bgMain2">
<!-- main navbar start -->
<div class="w-full flex flex-col justify-start items-center bg-bgMain2 text-textMain2 absolute top-[0] z-[5]">
<div class="w-full flex flex-col justify-center items-center relative">
@@ -31,7 +31,7 @@
<div class="grow-[1] flex flex-row gap-[50px] justify-end">
<div class="flex flex-row grow-[1] gap-[10px] text-base font-bold justify-end items-center max-lg:hidden">
<div class="flex flex-row h-full justify-center items-center gap-[10px] cursor-pointer relative">
- <a href="search.html" class="px-[6px] py-[6px] flex flex-row h-full justify-center items-center transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">
+ <a href="search.html" class="px-[12px] py-[6px] flex flex-row h-full justify-center items-center transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">
<i class="bx bx-search"></i>
</a>
</div>
@@ -108,16 +108,30 @@
<div class="w-full flex flex-col gap-[35px] grow-[1] justify-center items-center pt-[10vh]">
<h1 data-aos="fade-down" data-aos-duration="1500" class="text-6xl font-[900] text-center">Everyone's a Critic</h1>
<p data-aos="fade-down" data-aos-duration="2000" data-aos-delay="1000" class="text-2xl text-center px-[100px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- <div data-aos="fade-down" data-aos-duration="2000" data-aos-delay="2000" class="w-full flex flex-row justify-center items-center">
- <div class="w-full max-w-[500px] flex flex-row">
+ <div data-aos="fade-down" data-aos-duration="2000" data-aos-delay="2000" class="w-full flex flex-col gap-[10px] justify-center items-center max-w-[500px]">
<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">
+ <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">
+ </div>
+ <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>
+ <div class="w-full flex flex-row gap-[10px] flex-wrap">
+ <button popupAction="openFilterSearch" class="bg-bgMain2 text-bgMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative grow-[1]">
+ <p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Product: <span class="bg-bgMain/15 h-full w-full px-[8px] flex flex-row items-center">Wine</span></p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <button class="bg-bgMain2 text-bgMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative grow-[1]">
+ <p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Type: <span class="bg-bgMain/15 h-full w-full px-[8px] flex flex-row items-center">White</span></p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <button class="bg-bgMain2 text-bgMain text-sm h-[30px] pl-[10px] flex flex-row items-center relative grow-[1]">
+ <p class="h-full w-full flex flex-row items-center gap-[5px] whitespace-nowrap">Style: <span class="bg-bgMain/15 h-full w-full px-[8px] flex flex-row items-center">Table</span></p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
</div>
- <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>
</div>
</div>
<div class="w-full h-[50vh] flex flex-row gap-[10px] mb-[10px] overflow-hidden max-lg:overflow-x-auto hide-scrollbar">
@@ -196,7 +210,6 @@
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="grow-[1] flex flex-col gap-[25px]">
- <p class="text-xl font-bold">Product Title</p>
<div class="line-clamp-3">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
@@ -207,7 +220,7 @@
</div>
</div>
</div>
- <a href="#" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
+ <a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
Product Title
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</a>
@@ -219,7 +232,6 @@
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="grow-[1] flex flex-col gap-[25px]">
- <p class="text-xl font-bold">Product Title</p>
<div class="line-clamp-3">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
@@ -230,7 +242,7 @@
</div>
</div>
</div>
- <a href="#" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
+ <a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
Product Title
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</a>
@@ -242,7 +254,6 @@
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="grow-[1] flex flex-col gap-[25px]">
- <p class="text-xl font-bold">Product Title</p>
<div class="line-clamp-3">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
@@ -253,7 +264,7 @@
</div>
</div>
</div>
- <a href="#" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
+ <a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
Product Title
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</a>
@@ -265,7 +276,6 @@
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="grow-[1] flex flex-col gap-[25px]">
- <p class="text-xl font-bold">Product Title</p>
<div class="line-clamp-3">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
@@ -276,7 +286,7 @@
</div>
</div>
</div>
- <a href="#" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
+ <a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
Product Title
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</a>
@@ -533,15 +543,74 @@
<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>
+ <p class="text-sm">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>
<!-- 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">
+ <div class="max-w-[1400px] w-full flex flex-col justify-start items-center px-[10px] relative">
+ <div class="w-full flex flex-col justify-start items-center">
+ <div class="w-full max-w-[500px] justify-start items-center">
+ <div class="w-full bg-bgMain p-[15px] shadow-lg gap-[5px]">
+ <div class="flex flex-row justify-between items-center gap-[10px] pb-[5px] border-b-[1px] border-b-bgMain2/25">
+ <p class="font-bold text-lg">Product Filter</p>
+ <button popupAction="closeFilterSearch" class="transition-all ease duration-[0.3s] py-[3px] px-[8px] hover:bg-bgMain2 hover:text-bgMain">
+ <i class="bx bx-x text-xl"></i>
+ </button>
+ </div>
+ <div class="w-full flex flex-col pt-[10px]">
+ <!-- popup x start -->
+ <div class="w-full flex flex-col gap-[15px]">
+ <div class="w-full max-w-[500px] flex flex-row">
+ <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">
+ </div>
+ </div>
+ <div class="w-full flex flex-row gap-[10px] flex-wrap overflow-auto max-h-[500px]">
+ <div class="relative bg-black/5 group">
+ <input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
+ <div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Wine</label></div>
+ </div>
+ <div class="relative bg-black/5 group">
+ <input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
+ <div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Sake</label></div>
+ </div>
+ <div class="relative bg-black/5 group">
+ <input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
+ <div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Spirit</label></div>
+ </div>
+ <div class="relative bg-black/5 group">
+ <input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
+ <div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Coffee</label></div>
+ </div>
+ <div class="relative bg-black/5 group">
+ <input type="checkbox" name="product" class="opacity-[0] absolute inset-[0] peer cursor-pointer">
+ <div class="transition-all ease duration-[0.4s] peer-checked:bg-bgMain2 peer-checked:text-bgMain py-[5px] px-[10px] border-[1px] border-bgMain2/25 group-hover:bg-black/10"><label class="">Misc</label></div>
+ </div>
+ </div>
+ <div class="w-full flex flex-row pt-[10px] border-t-[1px] border-bgMain2/25">
+ <buttons class="w-full flex flex-col justify-center items-center bg-bgMain2 text-bgMain text-base font-bold whitespace-nowrap px-[10px] py-[10px] cursor-pointer relative group">
+ Set Filter
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </buttons>
+ </div>
+ </div>
+ <!-- popup x end -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- popups end -->
+
<!-- SCRIPTS START-->
<script src="./assets/js/dropdown.js"></script>
+ <script src="./assets/js/popups.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.js"></script>
<script>AOS.init();</script>
<!-- SCRIPTS END-->
diff --git a/product.html b/product.html
new file mode 100644
index 0000000..3d918f8
--- /dev/null
+++ b/product.html
@@ -0,0 +1,1145 @@
+<html class="bg-bgMain min-h-screen flex flex-col scroll-smooth font-merriweather">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <title>Cellar Social</title>
+ <link rel="icon" sizes="52x52" href="./assets/images/icon.png">
+ <link rel="icon" sizes="52x52" href="./assets/images/icon.png">
+ <link rel="icon" sizes="52x52" href="./assets/images/icon.png">
+ <link rel="icon" sizes="52x52" href="./assets/images/icon.png">
+ <link rel="icon" sizes="52x52" href="./assets/images/icon.png">
+ <link rel="preconnect" href="https://fonts.bunny.net">
+ <link href="https://fonts.bunny.net/css?family=libre-baskerville:400,400i,700,700i|merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet" />
+ <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+ <script src="tailwind-config.js" defer></script>
+ <link rel="stylesheet" href="./assets/css/custom.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.css" />
+ </head>
+
+ <body class="bg-transparent flex flex-col items-center flex-grow min-h-screen relative tracking-wide text-lg leading-[1.5] break-words text-bgMain2">
+ <!-- main navbar start -->
+ <div class="w-full flex flex-col justify-start items-center bg-bgMain2 text-textMain2 absolute top-[0] z-[5]">
+ <div class="w-full flex flex-col justify-center items-center relative">
+ <div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative">
+ <div class="w-full flex flex-row gap-[25px] justify-between p-[10px] flex-wrap">
+ <div class="max-w-[200px] min-w-[200px]">
+ <!-- <img src="./assets/images/logo.png" class=""></img> -->
+ <a href="index.html" class="font-bold text-2xl transition-all ease duration-[0.3s] hover:text-linkMain">Cellar Social</a>
+ </div>
+ <div class="grow-[1] flex flex-row gap-[50px] justify-end">
+ <div class="flex flex-row grow-[1] gap-[10px] text-base font-bold justify-end items-center max-lg:hidden">
+ <div class="flex flex-row h-full justify-center items-center gap-[10px] cursor-pointer relative">
+ <a href="search.html" class="px-[12px] py-[6px] flex flex-row h-full justify-center items-center transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">
+ <i class="bx bx-search"></i>
+ </a>
+ </div>
+ <div class="relative inline-block">
+ <div class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[200px] relative group">
+ <img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-[30px] h-[30px] object-cover bg-black/50"></img>
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis px-[15] py-[3px] transition-all ease duration-[0.3s] group-hover:bg-bgMain group-hover:text-bgMain2">Username</p>
+ </div>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain p-[5px] flex flex-col gap-[5px] w-full text-bgMain2 text-sm z-[1] shadow-lg hidden">
+ <a href="profile.html" class="flex flex-row px-[10px] py-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain">Profile</a>
+ <a href="#" class="flex flex-row px-[10px] py-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain">Settings</a>
+ <a href="#" class="flex flex-row px-[10px] py-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain">Logout</a>
+ </div>
+ </div>
+ </div>
+ <div class="lg:hidden">
+ <button class="flex flex-col justify-center items-center">
+ <i class="bx bx-menu text-3xl"></i>
+ </button>
+ </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="flex flex-row grow-[1] gap-[50px] justify-end items-center py-[10px] max-lg:hidden">
+ <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <p class="px-[10px]">Events</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="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="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <p class="px-[10px]">Coffee</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="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="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>
+ </div>
+ </a>
+ <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <p class="px-[10px]">Promotions</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>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- main navbar end -->
+
+ <!-- main middle start -->
+ <div class="w-full flex flex-col grow-[1] pt-[100px]">
+
+ <!-- product start -->
+ <div class="w-full flex flex-col justify-center items-center">
+ <div class="max-w-[1400px] w-full grow-[1] flex flex-col justify-center items-center px-[10px] relative">
+ <div class="w-full flex flex-col gap-[100px] py-[100px] items-center">
+
+ <div class="w-full grid grid-cols-5 gap-[50px] items-start max-lg:grid-cols-1">
+ <div class="col-span-2 w-full flex flex-col gap-[15px] items-center max-lg:col-span-1">
+ <div class="w-full flex flex-col items-center relative overflow-hidden cursor-pointer group">
+ <img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="object-cover w-full h-full aspect-square transition-all ease duration-[0.6s] group-hover:scale-[1.05]"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </div>
+ <div class="w-full flex flex-row gap-[15px] items-center">
+ <div class="w-full flex flex-col items-center relative overflow-hidden cursor-pointer group">
+ <img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="object-cover w-full h-full aspect-square transition-all ease duration-[0.4s] group-hover:scale-[1.1]"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </div>
+ <div class="w-full flex flex-col items-center relative overflow-hidden cursor-pointer group">
+ <img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="object-cover w-full h-full aspect-square transition-all ease duration-[0.4s] group-hover:scale-[1.1]"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </div>
+ <div class="w-full flex flex-col items-center relative overflow-hidden cursor-pointer group">
+ <img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="object-cover w-full h-full aspect-square transition-all ease duration-[0.4s] group-hover:scale-[1.1]"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </div>
+ <div class="w-full flex flex-col items-center relative overflow-hidden cursor-pointer group">
+ <img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="object-cover w-full h-full aspect-square transition-all ease duration-[0.4s] group-hover:scale-[1.1]"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </div>
+ </div>
+ </div>
+ <div class="col-span-3 w-full flex flex-col gap-[25px] items-center max-lg:col-span-1">
+ <div class="w-full flex flex-col gap-[25px]">
+ <h2 class="text-3xl font-bold">Product Title</h2>
+ <div class="w-full flex flex-col gap-[10px] items-end">
+ <p class="text-lg line-clamp-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ <div class="flex flex-row justify-end">
+ <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-base relative">Read full<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10 cursor-pointer"></span></button>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[15px]">
+ <p class="flex flex-row gap-[10px] font-bold text-2xl items-center">
+ <img class="" src="./assets/images/satoshi-icon.svg"></img>4,000,000<span class="font-normal text-sm">$100.00</span>
+ </p>
+ <div class="w-full flex flex-row">
+ <button class="w-full bg-btnMain2 text-textMain2 px-[15px] py-[10px] relative">Visit Store Product Page<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></button>
+ </div>
+ </div>
+ <div class="w-full flex flex-row gap-[10px] flex-wrap">
+ <div class="flex flex-row bg-bgMain2/75 text-bgMain text-sm">
+ <p class="px-[10px] py-[5px]">Product</p>
+ <p class="px-[10px] py-[5px] bg-white/25">Wine</p>
+ </div>
+ <div class="flex flex-row bg-bgMain2/75 text-bgMain text-sm">
+ <p class="px-[10px] py-[5px]">Type</p>
+ <p class="px-[10px] py-[5px] bg-white/25">White</p>
+ </div>
+ <div class="flex flex-row bg-bgMain2/75 text-bgMain text-sm">
+ <p class="px-[10px] py-[5px]">Style</p>
+ <p class="px-[10px] py-[5px] bg-white/25">Table</p>
+ </div>
+ </div>
+ <div class="w-full flex flex-row gap-[25px] bg-bgMain2/15 p-[20px]">
+ <a href="profile.html" class="w-[200px] relative">
+ <img src="https://images.scalebranding.com/simple-wine-logo-aee1e515-8eed-4af3-9930-4e0f94ef1209.jpg" class="object-cover aspect-square"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ <div class="w-full flex flex-col gap-[15px]">
+ <a href="profile.html" class="text-xl font-bold transition-all ease duration-[0.3s] hover:text-linkMain">nPub Holder Name</a>
+ <p class="text-base line-clamp-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ <!-- <div class="flex flex-row">
+ <input class="overflow-hidden whitespace-nowrap text-ellipsis" value="npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv" disabled></input>
+ <button class="">
+ <i class='bx bxs-copy'></i>
+ </button>
+ </div> -->
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="flex flex-col gap-[35px]">
+ <div class="w-full flex flex-row gap-[15px]">
+ <h3 class="flex flex row text-2xl font-bold"><span class="overflow-hidden whitespace-nowrap text-ellipsis">Seller Name</span>'s Latest Products</h3>
+ </div>
+ <!-- listings list start -->
+ <div class="w-full grid grid-cols-5 gap-[5px] max-lg:grid-cols-3 max-md:grid-cols-2 max-xs:grid-cols-1">
+ <!-- listing item start -->
+ <div class="w-full flex flex-col gap-[5px]">
+ <div class="w-full flex flex-col gap-[5px]">
+ <div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
+ <img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
+ <div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
+ <div class="grow-[1] flex flex-col gap-[25px]">
+ <div class="line-clamp-3">
+ <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ </div>
+ </div>
+ <div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
+ <p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
+ <p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
+ </div>
+ </div>
+ </div>
+ <a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
+ Product Title
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[5px]">
+ <div class="w-full flex flex-col gap-[5px]">
+ <div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
+ <img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
+ <div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
+ <div class="grow-[1] flex flex-col gap-[25px]">
+ <div class="line-clamp-3">
+ <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ </div>
+ </div>
+ <div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
+ <p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
+ <p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
+ </div>
+ </div>
+ </div>
+ <a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
+ Product Title
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[5px]">
+ <div class="w-full flex flex-col gap-[5px]">
+ <div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
+ <img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
+ <div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
+ <div class="grow-[1] flex flex-col gap-[25px]">
+ <div class="line-clamp-3">
+ <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ </div>
+ </div>
+ <div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
+ <p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
+ <p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
+ </div>
+ </div>
+ </div>
+ <a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
+ Product Title
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[5px]">
+ <div class="w-full flex flex-col gap-[5px]">
+ <div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
+ <img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
+ <div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
+ <div class="grow-[1] flex flex-col gap-[25px]">
+ <div class="line-clamp-3">
+ <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ </div>
+ </div>
+ <div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
+ <p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
+ <p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
+ </div>
+ </div>
+ </div>
+ <a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
+ Product Title
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[5px]">
+ <div class="w-full flex flex-col gap-[5px]">
+ <div class="flex flex-col grow-[1] relative overflow-hidden aspect-square bg-bgMain2 group">
+ <img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
+ <div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
+ <div class="grow-[1] flex flex-col gap-[25px]">
+ <div class="line-clamp-3">
+ <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ </div>
+ </div>
+ <div class="w-full border-t-[2px] border-bgMain pt-[15px] text-base font-bold flex flex-row gap-[10px] flex-wrap">
+ <p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Type: Wine</p>
+ <p class="px-[10px] py-[5px] grow-[1] bg-bgMain text-bgMain2">Style: Amber</p>
+ </div>
+ </div>
+ </div>
+ <a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
+ Product Title
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ </div>
+ </div>
+ <!-- listing item end -->
+ </div>
+ <!-- listings list end -->
+ <div class="w-full flex flex-row justify-center items-center">
+ <a href="profile.html" class="bg-bgMain2 text-textMain2 px-[15px] py-[10px] text-base w-full max-w-[300px] text-center relative">View More<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10 cursor-pointer"></span></a>
+ </div>
+ </div>
+
+ <div tabSys class="w-full grid grid-cols-8 gap-[50px]">
+ <!-- tabs selectors start-->
+ <div class="w-full col-span-2 relative">
+ <div tabSys-Selector class="w-full flex flex-col gap-[10px] sticky top-[10px]">
+ <button class="w-full px-[15px] py-[5px] bg-bgMain2 text-bgMain transition-all ease duration-[0.4s]">Reviews</button>
+ <button class="w-full px-[15px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/25">Comments</button>
+ </div>
+ </div>
+ <!-- tabs selectors end-->
+ <!-- tabs content start-->
+ <div tabSys-Content class="w-full flex flex-col gap-[10px] col-span-6">
+ <div class="w-full flex flex-col gap-[10px]">
+ <div class="w-full flex flex-col gap-[25px]">
+ <div class="w-full flex flex-col gap-[15px]">
+ <div class="w-full grid grid-cols-8 gap-[25px]">
+ <div href="profile.html" class="w-full col-span-1 relative">
+ <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </div>
+ <textarea type="text" placeholder="What's your review of this drink?" class="col-span-7 w-full min-h-[125px] px-[15px] py-[10px] bg-black/10 placeholder:text-black/50 transition-colors ease duration-[0.4s] focus:outline-[0] focus:bg-black/15"></textarea>
+ </div>
+ <div class="w-full flex flex-row gap-[25px] justify-between">
+ <div class="flex flex-row gap-[10px] items-center justify-center bg-bgMain2/85 text-bgMain">
+ <p class="text-base pl-[10px] py-[5px]">Your rating</p>
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 pr-[5px]">
+ <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
+ <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
+ <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
+ <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
+ <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
+ </div>
+ </div>
+ <div class="flex flex-row justify-center items-center">
+ <a href="profile.html" class="bg-bgMain2 text-textMain2 px-[15px] py-[10px] text-base text-center flex flex-row gap-[5px] relative">Publish Review <span class="flex flex-rol justify-center items-center"><i class="bx bxs-bolt"></i>(500)</span><span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10 cursor-pointer"></span></a>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[10px]">
+ <div class="w-full flex flex-col gap-[15px] py-[25px] border-y-[2px] border-bgMain2">
+ <div class="w-full grid grid-cols-8 gap-[25px]">
+ <a href="profile.html" class="w-full col-span-1 relative">
+ <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ <div class="w-full flex flex-col gap-[15px] col-span-7">
+ <div class="w-full flex flex-row gap-[25px] justify-between">
+ <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
+ <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
+ <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
+ </div>
+ <div class="flex flex-col gap-[5px] items-end">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
+ <i class="bx bx-dots-vertical"></i>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
+ </div>
+ </div>
+ <div class="flex flex-row gap-[15px] flex-wrap text-base">
+ <p class=>4/07/2025</p>
+ <p class=>4:20 PM</p>
+ </div>
+ </div>
+ </div>
+ <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
+ </div>
+ </div>
+ <div class="w-full flex flex-row gap-[10px] justify-end">
+ <div class="flex flex-row gap-[10px]">
+ <div class="flex flex-row gap-[10px] items-center justify-center bg-bgMain2/85 text-bgMain">
+ <p class="text-base pl-[10px] py-[5px]">Rating</p>
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 pr-[5px]">
+ <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
+ <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
+ <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
+ <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
+ <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
+ </div>
+ </div>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">500,000</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">25</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">5</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">32</p>
+ </button>
+ </div>
+ <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-sm text-center flex flex-row gap-[5px] relative">Reply<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></button>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-row gap-[10px] pb-[25px] border-b-[1px] border-bgMain2/25">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-bgMain2 text-bgMain relative group">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Moderation Level: Site & User</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Site & User</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Site</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">None</p>
+ </div>
+ </div>
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-bgMain2 text-bgMain relative group">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Show: Latest</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Latest</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Oldest</p>
+ </div>
+ </div>
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-bgMain2 text-bgMain relative group">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Score: Highest</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Highest</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Lowest</p>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[35px]">
+ <!-- user comments start -->
+ <div class="w-full flex flex-col gap-[35px]">
+ <div class="w-full flex flex-col gap-[15px] py-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <div class="w-full grid grid-cols-8 gap-[25px]">
+ <a href="profile.html" class="w-full col-span-1 relative">
+ <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ <div class="w-full flex flex-col gap-[15px] col-span-7">
+ <div class="w-full flex flex-row gap-[25px] justify-between">
+ <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
+ <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
+ <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
+ </div>
+ <div class="flex flex-col gap-[5px] items-end">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
+ <i class="bx bx-dots-vertical"></i>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
+ </div>
+ </div>
+ <div class="flex flex-row gap-[15px] flex-wrap text-base">
+ <p class=>4/07/2025</p>
+ <p class=>4:20 PM</p>
+ </div>
+ </div>
+ </div>
+ <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
+ </div>
+ </div>
+ <div class="w-full flex flex-row gap-[10px] justify-end">
+ <div class="flex flex-row gap-[10px]">
+ <div class="flex flex-row gap-[10px] items-center justify-center bg-bgMain2/85 text-bgMain">
+ <p class="text-base pl-[10px] py-[5px]">Rating</p>
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 pr-[5px]">
+ <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
+ <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
+ <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
+ <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
+ <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
+ </div>
+ </div>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">500,000</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">25</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">5</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">32</p>
+ </button>
+ </div>
+ <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-sm text-center flex flex-row gap-[5px] relative">Reply<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></button>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[15px] py-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <div class="w-full grid grid-cols-8 gap-[25px]">
+ <a href="profile.html" class="w-full col-span-1 relative">
+ <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ <div class="w-full flex flex-col gap-[15px] col-span-7">
+ <div class="w-full flex flex-row gap-[25px] justify-between">
+ <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
+ <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
+ <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
+ </div>
+ <div class="flex flex-col gap-[5px] items-end">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
+ <i class="bx bx-dots-vertical"></i>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
+ </div>
+ </div>
+ <div class="flex flex-row gap-[15px] flex-wrap text-base">
+ <p class=>4/07/2025</p>
+ <p class=>4:20 PM</p>
+ </div>
+ </div>
+ </div>
+ <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
+ </div>
+ </div>
+ <div class="w-full flex flex-row gap-[10px] justify-end">
+ <div class="flex flex-row gap-[10px]">
+ <div class="flex flex-row gap-[10px] items-center justify-center bg-bgMain2/85 text-bgMain">
+ <p class="text-base pl-[10px] py-[5px]">Rating</p>
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 pr-[5px]">
+ <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
+ <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
+ <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
+ <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
+ <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
+ </div>
+ </div>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">500,000</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">25</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">5</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">32</p>
+ </button>
+ </div>
+ <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-sm text-center flex flex-row gap-[5px] relative">Reply<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></button>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[15px] py-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <div class="w-full grid grid-cols-8 gap-[25px]">
+ <a href="profile.html" class="w-full col-span-1 relative">
+ <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ <div class="w-full flex flex-col gap-[15px] col-span-7">
+ <div class="w-full flex flex-row gap-[25px] justify-between">
+ <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
+ <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
+ <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
+ </div>
+ <div class="flex flex-col gap-[5px] items-end">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
+ <i class="bx bx-dots-vertical"></i>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
+ </div>
+ </div>
+ <div class="flex flex-row gap-[15px] flex-wrap text-base">
+ <p class=>4/07/2025</p>
+ <p class=>4:20 PM</p>
+ </div>
+ </div>
+ </div>
+ <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
+ </div>
+ </div>
+ <div class="w-full flex flex-row gap-[10px] justify-end">
+ <div class="flex flex-row gap-[10px]">
+ <div class="flex flex-row gap-[10px] items-center justify-center bg-bgMain2/85 text-bgMain">
+ <p class="text-base pl-[10px] py-[5px]">Rating</p>
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 pr-[5px]">
+ <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
+ <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
+ <button class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-wine"></i></button>
+ <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
+ <button class="p-[5px] text-bgMain/25 transition-all ease duration-[0.4s] hover:text-bgMain"><i class="bx bx-wine"></i></button>
+ </div>
+ </div>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">500,000</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">25</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">5</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">32</p>
+ </button>
+ </div>
+ <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-sm text-center flex flex-row gap-[5px] relative">Reply<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></button>
+ </div>
+ </div>
+ </div>
+ <!-- user comments end -->
+ <!-- Pagination start -->
+ <div class="w-full flex flex-col justify-center items-center">
+ <div class="max-w-[300px] flex flex-row gap-[15px] justify-center items-center">
+ <button class="h-full flex flex-col justify-center items-center px-[8px] transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:text-bgMain">
+ <i class="bx bxs-chevron-left text-3xl"></i>
+ </button>
+ <div class="grow-[1] flex flex-row gap-[10px] overflow-auto hide-scrollbar">
+ <button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center bg-bgMain2 text-bgMain relative">
+ <p class="text-base">1</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center relative transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:text-bgMain">
+ <p class="text-base">2</p>
+ </button>
+ <button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center relative transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:text-bgMain">
+ <p class="text-base">3</p>
+ </button>
+ </div>
+ <button class="h-full flex flex-col justify-center items-center px-[8px] transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:text-bgMain">
+ <i class="bx bxs-chevron-right text-3xl"></i>
+ </button>
+ </div>
+ </div>
+ <!-- Pagination end -->
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[10px] hidden">
+ <div class="w-full flex flex-col gap-[25px]">
+ <div class="w-full flex flex-col gap-[25px]">
+ <div class="w-full flex flex-col gap-[15px]">
+ <div class="w-full grid grid-cols-8 gap-[25px]">
+ <div href="profile.html" class="w-full col-span-1 relative">
+ <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </div>
+ <textarea type="text" placeholder="What's your review of this drink?" class="col-span-7 w-full min-h-[125px] px-[15px] py-[10px] bg-black/10 placeholder:text-black/50 transition-colors ease duration-[0.4s] focus:outline-[0] focus:bg-black/15"></textarea>
+ </div>
+ <div class="w-full flex flex-row gap-[25px] justify-end">
+ <div class="flex flex-row justify-center items-center">
+ <a href="profile.html" class="bg-bgMain2 text-textMain2 px-[15px] py-[10px] text-base text-center flex flex-row gap-[5px] relative">Publish Comment</a>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[15px] py-[25px] border-y-[2px] border-bgMain2">
+ <div class="w-full grid grid-cols-8 gap-[25px]">
+ <a href="profile.html" class="w-full col-span-1 relative">
+ <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ <div class="w-full flex flex-col gap-[15px] col-span-7">
+ <div class="w-full flex flex-row gap-[25px] justify-between">
+ <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
+ <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
+ <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
+ </div>
+ <div class="flex flex-col gap-[5px] items-end">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
+ <i class="bx bx-dots-vertical"></i>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
+ </div>
+ </div>
+ <div class="flex flex-row gap-[15px] flex-wrap text-base">
+ <p class=>4/07/2025</p>
+ <p class=>4:20 PM</p>
+ </div>
+ </div>
+ </div>
+ <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
+ </div>
+ </div>
+ <div class="w-full flex flex-row gap-[10px] justify-end">
+ <div class="flex flex-row gap-[10px]">
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">500,000</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">25</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">5</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">32</p>
+ </button>
+ </div>
+ <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-sm text-center flex flex-row gap-[5px] relative">Reply<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></button>
+ </div>
+ </div>
+ <div class="w-full flex flex-row gap-[10px] pb-[25px] border-b-[1px] border-bgMain2/25">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-bgMain2 text-bgMain relative group">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Moderation Level: Site & User</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Site & User</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Site</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">None</p>
+ </div>
+ </div>
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[250px] bg-bgMain2 text-bgMain relative group">
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis text-sm px-[15] py-[5px]">Show: Latest</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Latest</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Oldest</p>
+ </div>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[35px]">
+ <!-- user comments start -->
+ <div class="w-full flex flex-col gap-[35px]">
+ <div class="w-full flex flex-col gap-[15px] py-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <div class="w-full grid grid-cols-8 gap-[25px]">
+ <a href="profile.html" class="w-full col-span-1 relative">
+ <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ <div class="w-full flex flex-col gap-[15px] col-span-7">
+ <div class="w-full flex flex-row gap-[25px] justify-between">
+ <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
+ <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
+ <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
+ </div>
+ <div class="flex flex-col gap-[5px] items-end">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
+ <i class="bx bx-dots-vertical"></i>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
+ </div>
+ </div>
+ <div class="flex flex-row gap-[15px] flex-wrap text-base">
+ <p class=>4/07/2025</p>
+ <p class=>4:20 PM</p>
+ </div>
+ </div>
+ </div>
+ <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
+ </div>
+ </div>
+ <div class="w-full flex flex-row gap-[10px] justify-end">
+ <div class="flex flex-row gap-[10px]">
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">500,000</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">25</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">5</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">32</p>
+ </button>
+ </div>
+ <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-sm text-center flex flex-row gap-[5px] relative">Reply<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></button>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[15px] py-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <div class="w-full grid grid-cols-8 gap-[25px]">
+ <a href="profile.html" class="w-full col-span-1 relative">
+ <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ <div class="w-full flex flex-col gap-[15px] col-span-7">
+ <div class="w-full flex flex-row gap-[25px] justify-between">
+ <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
+ <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
+ <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
+ </div>
+ <div class="flex flex-col gap-[5px] items-end">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
+ <i class="bx bx-dots-vertical"></i>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
+ </div>
+ </div>
+ <div class="flex flex-row gap-[15px] flex-wrap text-base">
+ <p class=>4/07/2025</p>
+ <p class=>4:20 PM</p>
+ </div>
+ </div>
+ </div>
+ <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
+ </div>
+ </div>
+ <div class="w-full flex flex-row gap-[10px] justify-end">
+ <div class="flex flex-row gap-[10px]">
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">500,000</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">25</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">5</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">32</p>
+ </button>
+ </div>
+ <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-sm text-center flex flex-row gap-[5px] relative">Reply<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></button>
+ </div>
+ </div>
+ <div class="w-full flex flex-col gap-[15px] py-[25px] border-b-[1px] border-bgMain2/25 last:border-b-[0px] last:pb-[0px]">
+ <div class="w-full grid grid-cols-8 gap-[25px]">
+ <a href="profile.html" class="w-full col-span-1 relative">
+ <img class="object-cover aspect-square" src="https://i.pinimg.com/474x/f3/4a/85/f34a85a8f5e848414d0c760543e49166.jpg"></img>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </a>
+ <div class="w-full flex flex-col gap-[15px] col-span-7">
+ <div class="w-full flex flex-row gap-[25px] justify-between">
+ <div class="flex flex-col gap-[5px] flex-wrap font-bold text-base">
+ <a href="profile.html" class="overflow-hidden whitespace-nowrap text-ellipsis transition-all ease duration-[0.4s] hover:text-linkMain">User's Name</a>
+ <p class="bg-bgMain2/75 text-bgMain text-sm px-[10px] py-[5px] font-normal">npub1xsdg...xp4os02</p>
+ </div>
+ <div class="flex flex-col gap-[5px] items-end">
+ <div class="relative inline-block">
+ <button class="dropdown-button flex flex-row items-center cursor-pointer p-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain relative group">
+ <i class="bx bx-dots-vertical"></i>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain2 p-[5px] flex flex-col gap-[5px] w-full min-w-[100px] text-bgMain text-sm z-[1] shadow-lg hidden">
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Report</p>
+ <p class="flex flex-row px-[10px] py-[5px] cursor-pointer transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Block</p>
+ </div>
+ </div>
+ <div class="flex flex-row gap-[15px] flex-wrap text-base">
+ <p class=>4/07/2025</p>
+ <p class=>4:20 PM</p>
+ </div>
+ </div>
+ </div>
+ <p class="text-base line-clamp-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ <button class="text-sm bg-bgMain2/25 text-bgMain2/75 px-[10px] py-[5px] transition-all ease duration-[0.4s] hover:bg-bgMain2/20 hover:text-bgMain2">Expand</button>
+ </div>
+ </div>
+ <div class="w-full flex flex-row gap-[10px] justify-end">
+ <div class="flex flex-row gap-[10px]">
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-bolt"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">500,000</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-upvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">25</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-downvote"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">5</p>
+ </button>
+ <button class="flex flex-row items-center justify-center bg-bgMain2/85 text-bgMain">
+ <div class="h-full flex flex-row gap-[5px] items-center justify-center bg-bgMain/10 px-[10px]">
+ <div class="p-[5px] text-bgMain/100 transition-all ease duration-[0.4s]"><i class="bx bxs-message"></i></div>
+ </div>
+ <p class="text-base px-[10px] py-[5px]">32</p>
+ </button>
+ </div>
+ <button class="bg-bgMain2 text-textMain2 px-[15px] py-[5px] text-sm text-center flex flex-row gap-[5px] relative">Reply<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span></button>
+ </div>
+ </div>
+ </div>
+ <!-- user comments end -->
+ <!-- Pagination start -->
+ <div class="w-full flex flex-col justify-center items-center">
+ <div class="max-w-[300px] flex flex-row gap-[15px] justify-center items-center">
+ <button class="h-full flex flex-col justify-center items-center px-[8px] transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:text-bgMain">
+ <i class="bx bxs-chevron-left text-3xl"></i>
+ </button>
+ <div class="grow-[1] flex flex-row gap-[10px] overflow-auto hide-scrollbar">
+ <button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center bg-bgMain2 text-bgMain relative">
+ <p class="text-base">1</p>
+ <span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
+ </button>
+ <button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center relative transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:text-bgMain">
+ <p class="text-base">2</p>
+ </button>
+ <button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center relative transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:text-bgMain">
+ <p class="text-base">3</p>
+ </button>
+ </div>
+ <button class="h-full flex flex-col justify-center items-center px-[8px] transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:text-bgMain">
+ <i class="bx bxs-chevron-right text-3xl"></i>
+ </button>
+ </div>
+ </div>
+ <!-- Pagination end -->
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <!-- tabs content end-->
+ </div>
+
+ </div>
+ </div>
+ </div>
+ <!-- product end -->
+
+ </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="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 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 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 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="text-sm">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>
+ <!-- main footer end -->
+
+ <!-- popups start -->
+ <!-- popups end -->
+
+ <!-- SCRIPTS START-->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.js"></script>
+ <script src="./assets/js/dropdown.js"></script>
+ <script src="./assets/js/popups.js"></script>
+ <script src="./assets/js/tabSys.js"></script>
+ <script>AOS.init();</script>
+ <!-- SCRIPTS END-->
+
+ <!--
+ reusables: sec and container
+ <div class="w-full flex flex-col gap-[25px] py-[50px] items-center">
+ <div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative"></div>
+ </div>
+ -->
+ </body>
+</html>
diff --git a/profile.html b/profile.html
new file mode 100644
index 0000000..13dff63
--- /dev/null
+++ b/profile.html
@@ -0,0 +1,208 @@
+<html class="bg-bgMain min-h-screen flex flex-col scroll-smooth font-merriweather">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <title>Cellar Social</title>
+ <link rel="icon" sizes="52x52" href="./assets/images/icon.png">
+ <link rel="icon" sizes="52x52" href="./assets/images/icon.png">
+ <link rel="icon" sizes="52x52" href="./assets/images/icon.png">
+ <link rel="icon" sizes="52x52" href="./assets/images/icon.png">
+ <link rel="icon" sizes="52x52" href="./assets/images/icon.png">
+ <link rel="preconnect" href="https://fonts.bunny.net">
+ <link href="https://fonts.bunny.net/css?family=libre-baskerville:400,400i,700,700i|merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet" />
+ <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+ <script src="tailwind-config.js" defer></script>
+ <link rel="stylesheet" href="./assets/css/custom.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.css" />
+ </head>
+
+ <body class="bg-transparent flex flex-col items-center flex-grow min-h-screen relative tracking-wide text-lg leading-[1.5] break-words text-bgMain2">
+ <!-- main navbar start -->
+ <div class="w-full flex flex-col justify-start items-center bg-bgMain2 text-textMain2 absolute top-[0] z-[5]">
+ <div class="w-full flex flex-col justify-center items-center relative">
+ <div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative">
+ <div class="w-full flex flex-row gap-[25px] justify-between p-[10px] flex-wrap">
+ <div class="max-w-[200px] min-w-[200px]">
+ <!-- <img src="./assets/images/logo.png" class=""></img> -->
+ <a href="index.html" class="font-bold text-2xl transition-all ease duration-[0.3s] hover:text-linkMain">Cellar Social</a>
+ </div>
+ <div class="grow-[1] flex flex-row gap-[50px] justify-end">
+ <div class="flex flex-row grow-[1] gap-[10px] text-base font-bold justify-end items-center max-lg:hidden">
+ <div class="flex flex-row h-full justify-center items-center gap-[10px] cursor-pointer relative">
+ <a href="search.html" class="px-[12px] py-[6px] flex flex-row h-full justify-center items-center transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">
+ <i class="bx bx-search"></i>
+ </a>
+ </div>
+ <div class="relative inline-block">
+ <div class="dropdown-button flex flex-row items-center cursor-pointer min-w-[50px] max-w-[200px] relative group">
+ <img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-[30px] h-[30px] object-cover bg-black/50"></img>
+ <p class="overflow-hidden whitespace-nowrap text-ellipsis px-[15] py-[3px] transition-all ease duration-[0.3s] group-hover:bg-bgMain group-hover:text-bgMain2">Username</p>
+ </div>
+ <div class="dropdown-menu absolute right-0 mt-2 bg-bgMain p-[5px] flex flex-col gap-[5px] w-full text-bgMain2 text-sm z-[1] shadow-lg hidden">
+ <a href="profile.html" class="flex flex-row px-[10px] py-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain">Profile</a>
+ <a href="#" class="flex flex-row px-[10px] py-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain">Settings</a>
+ <a href="#" class="flex flex-row px-[10px] py-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain">Logout</a>
+ </div>
+ </div>
+ </div>
+ <div class="lg:hidden">
+ <button class="flex flex-col justify-center items-center">
+ <i class="bx bx-menu text-3xl"></i>
+ </button>
+ </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="flex flex-row grow-[1] gap-[50px] justify-end items-center py-[10px] max-lg:hidden">
+ <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <p class="px-[10px]">Events</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="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="search.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <p class="px-[10px]">Coffee</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="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="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>
+ </div>
+ </a>
+ <a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
+ <p class="px-[10px]">Promotions</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>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- main navbar end -->
+
+ <!-- main middle start -->
+ <div class="w-full flex flex-col grow-[1] pt-[100px]">
+
+ <!-- profile start -->
+ <div class="w-full flex flex-col justify-center items-center">
+ <div class="max-w-[1400px] w-full grow-[1] flex flex-col justify-center items-center px-[10px] relative">
+ <div class="w-full flex flex-col gap-[50px]">
+ <div class="">profile box rectangle here</div>
+ <div class="">products and filter here</div>
+ </div>
+ </div>
+ </div>
+ <!-- profile end -->
+
+ </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="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 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 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 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="text-sm">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>
+ <!-- main footer end -->
+
+ <!-- popups start -->
+ <!-- popups end -->
+
+ <!-- SCRIPTS START-->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.js"></script>
+ <script src="./assets/js/dropdown.js"></script>
+ <script src="./assets/js/popups.js"></script>
+ <script src="./assets/js/tabSys.js"></script>
+ <script>AOS.init();</script>
+ <!-- SCRIPTS END-->
+
+ <!--
+ reusables: sec and container
+ <div class="w-full flex flex-col gap-[25px] py-[50px] items-center">
+ <div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative"></div>
+ </div>
+ -->
+ </body>
+</html>
diff --git a/search.html b/search.html
index fea61c0..94425a5 100644
--- a/search.html
+++ b/search.html
@@ -18,7 +18,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.css" />
</head>
- <body class="bg-transparent flex flex-col items-center flex-grow min-h-screen relative tracking-wide text-lg leading-[1.5] break-words text-textMain">
+ <body class="bg-transparent flex flex-col items-center flex-grow min-h-screen relative tracking-wide text-lg leading-[1.5] break-words text-bgMain2">
<!-- main navbar start -->
<div class="w-full flex flex-col justify-start items-center bg-bgMain2 text-textMain2 absolute top-[0] z-[5]">
<div class="w-full flex flex-col justify-center items-center relative">
@@ -31,7 +31,7 @@
<div class="grow-[1] flex flex-row gap-[50px] justify-end">
<div class="flex flex-row grow-[1] gap-[10px] text-base font-bold justify-end items-center max-lg:hidden">
<div class="flex flex-row h-full justify-center items-center gap-[10px] cursor-pointer relative">
- <a href="search.html" class="px-[6px] py-[6px] flex flex-row h-full justify-center items-center transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">
+ <a href="search.html" class="px-[12px] py-[6px] flex flex-row h-full justify-center items-center transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">
<i class="bx bx-search"></i>
</a>
</div>
@@ -41,7 +41,7 @@
<p class="overflow-hidden whitespace-nowrap text-ellipsis px-[15] py-[3px] transition-all ease duration-[0.3s] group-hover:bg-bgMain group-hover:text-bgMain2">Username</p>
</div>
<div class="dropdown-menu absolute right-0 mt-2 bg-bgMain p-[5px] flex flex-col gap-[5px] w-full text-bgMain2 text-sm z-[1] shadow-lg hidden">
- <a href="#" class="flex flex-row px-[10px] py-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain">Profile</a>
+ <a href="profile.html" class="flex flex-row px-[10px] py-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain">Profile</a>
<a href="#" class="flex flex-row px-[10px] py-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain">Settings</a>
<a href="#" class="flex flex-row px-[10px] py-[5px] transition-all ease duration-[0.3s] hover:bg-bgMain2 hover:text-bgMain">Logout</a>
</div>
@@ -177,7 +177,6 @@
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="grow-[1] flex flex-col gap-[25px]">
- <p class="text-xl font-bold">Product Title</p>
<div class="line-clamp-3">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
@@ -188,7 +187,7 @@
</div>
</div>
</div>
- <a href="#" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
+ <a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
Product Title
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</a>
@@ -200,7 +199,6 @@
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-full h-full object-cover transition-all ease duration-[1s] group-hover:scale-[1.1]"></img>
<div class="w-full h-[0] opacity-[0] overflow-hidden absolute bottom-[0] bg-bgMain2/95 p-[0px] gap-[25px] flex flex-col justify-center items-center text-textMain2 text-center transition-all ease duration-[0.6s] group-hover:opacity-[1] group-hover:h-full group-hover:p-[25px] group-hover:backdrop-blur-sm">
<div class="grow-[1] flex flex-col gap-[25px]">
- <p class="text-xl font-bold">Product Title</p>
<div class="line-clamp-3">
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
@@ -211,7 +209,7 @@
</div>
</div>
</div>
- <a href="#" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
+ <a href="product.html" class="w-full px-[10px] py-[5px] bg-btnMain2 text-textMain2 text-center overflow-hidden whitespace-nowrap text-ellipsis relative transition-all ease duration-[0.6s] hover:tracking-widest">
Product Title
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</a>
@@ -219,7 +217,7 @@
</div>
<!-- listing item end -->
</div>
- <!-- listings list start -->
+ <!-- listings list end -->
<!-- Pagination start -->
<div class="w-full flex flex-col justify-center items-center">
@@ -229,14 +227,14 @@
</button>
<div class="grow-[1] flex flex-row gap-[10px] overflow-auto hide-scrollbar">
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center bg-bgMain2 text-bgMain relative">
- <p class="">1</p>
+ <p class="text-base">1</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center relative transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:text-bgMain">
- <p class="">2</p>
+ <p class="text-base">2</p>
</button>
<button class="font-bold text-xl px-[15px] pt-[5px] pb-[8px] flex flex-row justify-center items-center relative transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:text-bgMain">
- <p class="">3</p>
+ <p class="text-base">3</p>
</button>
</div>
<button class="h-full flex flex-col justify-center items-center px-[8px] transition-all ease duration-[0.4s] hover:bg-bgMain2 hover:text-bgMain">
@@ -316,7 +314,7 @@
<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>
+ <p class="text-sm">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>
diff --git a/tailwind-config.js b/tailwind-config.js
index 338000d..74ff9f7 100644
--- a/tailwind-config.js
+++ b/tailwind-config.js
@@ -3,13 +3,20 @@ tailwind.config = {
theme: {
extend: {
colors: {
- 'bgMain': '#F5F5DC', // Main background color
- 'bgMain2': '#4A2E1A', // Background color for product cards
- 'textMain': '#262626', // Main text color
- 'textMain2': '#F5F5DC', // Alt text color (could be used for lighter text on dark backgrounds)
- 'linkMain': '#D4A35F', // Color for links
- 'btnMain': '#800020', // Background color for buttons
- 'btnMain2': '#D4A35F', // Alt background color for buttons
+ 'bgMain': '#F5F5DC', // Main background color
+ 'bgMain2': '#4A2E1A', // Background color for product cards
+ 'textMain': '#262626', // Main text color
+ 'textMain2': '#F5F5DC', // Alt text color
+ 'linkMain': '#D4A35F', // Color for links
+ 'btnMain': '#800020', // Background color for buttons
+ 'btnMain2': '#D4A35F', // Alt background color for buttons
+ // 'bgMainHover': '#F9F9E6', // Lightened bgMain for hover
+ // 'bgMain2Hover': '#5C3B2A', // Lightened bgMain2 for hover
+ // 'textMainHover': '#3D3D3D', // Lightened textMain for hover
+ // 'textMain2Hover': '#F9F9E6', // Lightened textMain2 for hover
+ // 'linkMainHover': '#D8B76F', // Lightened linkMain for hover
+ // 'btnMainHover': '#A0002A', // Lightened btnMain for hover
+ // 'btnMain2Hover': '#D8B76F', // Lightened btnMain2 for hover
},
screens: {
'xs': '480px', // Add xs size