Yash
/
shopify-html
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

product catalog screens added

This commit is contained in:
Ranjan 2024-03-11 13:28:44 +05:30
parent 713600b862
commit 1f15718f9d
11 changed files with 1165 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/images/arrow-left-icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.8751 10.4996C24.8751 10.7731 24.7664 11.0354 24.573 11.2288C24.3796 11.4222 24.1173 11.5308 23.8438 11.5308H3.64551L11.1672 19.0512C11.263 19.1471 11.339 19.2608 11.3909 19.386C11.4427 19.5112 11.4694 19.6453 11.4694 19.7808C11.4694 19.9163 11.4427 20.0505 11.3909 20.1757C11.339 20.3009 11.263 20.4146 11.1672 20.5105C11.0714 20.6063 10.9576 20.6823 10.8324 20.7341C10.7073 20.786 10.5731 20.8127 10.4376 20.8127C10.3021 20.8127 10.1679 20.786 10.0427 20.7341C9.91753 20.6823 9.80378 20.6063 9.70797 20.5105L0.426719 11.2292C0.330837 11.1334 0.254774 11.0197 0.202877 10.8945C0.15098 10.7693 0.124268 10.6351 0.124268 10.4996C0.124268 10.3641 0.15098 10.2299 0.202877 10.1047C0.254774 9.9795 0.330837 9.86576 0.426719 9.76999L9.70797 0.488737C9.90147 0.295233 10.1639 0.186523 10.4376 0.186523C10.7112 0.186523 10.9737 0.295233 11.1672 0.488737C11.3607 0.682242 11.4694 0.94469 11.4694 1.21835C11.4694 1.492 11.3607 1.75445 11.1672 1.94796L3.64551 9.46835H23.8438C24.1173 9.46835 24.3796 9.577 24.573 9.77039C24.7664 9.96379 24.8751 10.2261 24.8751 10.4996Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

9
assets/images/company-logo9.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

3
assets/images/cross-grey-icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.1008 17.7738C19.1879 17.8609 19.257 17.9643 19.3042 18.0781C19.3513 18.1919 19.3756 18.3139 19.3756 18.437C19.3756 18.5602 19.3513 18.6822 19.3042 18.796C19.257 18.9098 19.1879 19.0132 19.1008 19.1003C19.0137 19.1874 18.9103 19.2565 18.7965 19.3037C18.6827 19.3508 18.5607 19.3751 18.4375 19.3751C18.3144 19.3751 18.1924 19.3508 18.0786 19.3037C17.9648 19.2565 17.8614 19.1874 17.7743 19.1003L10 11.3249L2.22581 19.1003C2.0499 19.2762 1.81131 19.3751 1.56253 19.3751C1.31375 19.3751 1.07516 19.2762 0.899252 19.1003C0.723339 18.9244 0.624512 18.6858 0.624512 18.437C0.624512 18.1883 0.723339 17.9497 0.899252 17.7738L8.67464 9.99955L0.899252 2.22533C0.723339 2.04941 0.624512 1.81082 0.624512 1.56204C0.624512 1.31327 0.723339 1.07468 0.899252 0.898763C1.07516 0.72285 1.31375 0.624023 1.56253 0.624023C1.81131 0.624023 2.0499 0.72285 2.22581 0.898763L10 8.67416L17.7743 0.898763C17.9502 0.72285 18.1888 0.624023 18.4375 0.624023C18.6863 0.624023 18.9249 0.72285 19.1008 0.898763C19.2767 1.07468 19.3756 1.31327 19.3756 1.56204C19.3756 1.81082 19.2767 2.04941 19.1008 2.22533L11.3254 9.99955L19.1008 17.7738Z" fill="#B5B5B5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

3
assets/images/search-grey-icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.9133 23.5863L19.0457 17.7198C20.7464 15.6781 21.5944 13.0593 21.4134 10.4082C21.2324 7.75713 20.0363 5.27788 18.0739 3.48622C16.1116 1.69456 13.534 0.728426 10.8774 0.788801C8.22085 0.849176 5.68982 1.93141 3.81086 3.81037C1.9319 5.68933 0.849664 8.22036 0.789289 10.8769C0.728915 13.5335 1.69505 16.1111 3.48671 18.0735C5.27837 20.0358 7.75762 21.2319 10.4087 21.4129C13.0598 21.5939 15.6786 20.7459 17.7203 19.0452L23.5867 24.9128C23.6738 24.9999 23.7773 25.069 23.8911 25.1162C24.0049 25.1633 24.1268 25.1876 24.25 25.1876C24.3732 25.1876 24.4952 25.1633 24.609 25.1162C24.7228 25.069 24.8262 24.9999 24.9133 24.9128C25.0004 24.8257 25.0695 24.7223 25.1166 24.6085C25.1638 24.4947 25.188 24.3727 25.188 24.2495C25.188 24.1264 25.1638 24.0044 25.1166 23.8906C25.0695 23.7768 25.0004 23.6734 24.9133 23.5863ZM2.68752 11.1245C2.68752 9.45576 3.18237 7.82445 4.1095 6.43691C5.03662 5.04937 6.35438 3.96792 7.89613 3.3293C9.43788 2.69069 11.1344 2.5236 12.7711 2.84916C14.4078 3.17472 15.9112 3.97832 17.0912 5.15832C18.2712 6.33833 19.0748 7.84175 19.4004 9.47846C19.726 11.1152 19.5589 12.8117 18.9203 14.3534C18.2816 15.8952 17.2002 17.2129 15.8126 18.1401C14.4251 19.0672 12.7938 19.562 11.125 19.562C8.88802 19.5596 6.74335 18.6698 5.16155 17.088C3.57975 15.5062 2.69 13.3615 2.68752 11.1245Z" fill="#B5B5B5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

3
assets/images/share-icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6142 15.0118C15.0799 15.0117 14.551 15.1187 14.0588 15.3267C13.5666 15.5346 13.1212 15.8392 12.7488 16.2224L8.13325 13.2555C8.49631 12.3244 8.49631 11.2909 8.13325 10.3598L12.7488 7.39291C13.4421 8.10316 14.3744 8.53065 15.3649 8.5925C16.3555 8.65436 17.3337 8.34617 18.1099 7.72769C18.8862 7.10922 19.4051 6.22451 19.5662 5.2451C19.7273 4.26569 19.519 3.26136 18.9817 2.42681C18.4444 1.59227 17.6164 0.986971 16.6583 0.728276C15.7001 0.469581 14.68 0.575918 13.7958 1.02667C12.9116 1.47742 12.2262 2.24048 11.8725 3.1679C11.5189 4.09531 11.5222 5.12102 11.8818 6.04616L7.26621 9.01302C6.71041 8.44235 5.99707 8.05041 5.21738 7.8873C4.4377 7.72418 3.62709 7.79731 2.88917 8.09733C2.15126 8.39735 1.51956 8.91062 1.07484 9.57155C0.630121 10.2325 0.392578 11.011 0.392578 11.8077C0.392578 12.6043 0.630121 13.3828 1.07484 14.0438C1.51956 14.7047 2.15126 15.218 2.88917 15.518C3.62709 15.818 4.4377 15.8911 5.21738 15.728C5.99707 15.5649 6.71041 15.173 7.26621 14.6023L11.8818 17.5692C11.5726 18.3667 11.5268 19.2424 11.7512 20.0678C11.9756 20.8933 12.4583 21.6252 13.1288 22.1564C13.7992 22.6876 14.622 22.9902 15.4769 23.0199C16.3317 23.0495 17.1735 22.8047 17.8792 22.3212C18.5848 21.8378 19.1171 21.1411 19.3982 20.3332C19.6792 19.5253 19.6943 18.6486 19.4411 17.8315C19.1879 17.0144 18.6798 16.2999 17.9912 15.7925C17.3025 15.2851 16.4696 15.0115 15.6142 15.0118ZM15.6142 2.19514C16.0895 2.19514 16.5541 2.33608 16.9492 2.60014C17.3444 2.8642 17.6524 3.23952 17.8342 3.67863C18.0161 4.11775 18.0637 4.60093 17.971 5.0671C17.8782 5.53326 17.6494 5.96146 17.3133 6.29754C16.9773 6.63362 16.5491 6.8625 16.083 6.95522C15.6169 7.04795 15.1338 7.00036 14.6947 6.81847C14.2556 6.63659 13.8803 6.32857 13.6163 5.93338C13.3523 5.53818 13.2114 5.07356 13.2114 4.59827C13.2114 3.96092 13.4645 3.34967 13.9151 2.899C14.3658 2.44832 14.977 2.19514 15.6142 2.19514ZM4.40076 14.2108C3.92552 14.2108 3.46094 14.0699 3.06579 13.8058C2.67064 13.5417 2.36265 13.1664 2.18078 12.7273C1.99891 12.2882 1.95133 11.805 2.04404 11.3388C2.13676 10.8727 2.36561 10.4445 2.70166 10.1084C3.03771 9.77231 3.46587 9.54343 3.93198 9.45071C4.3981 9.35798 4.88124 9.40557 5.32031 9.58746C5.75938 9.76935 6.13466 10.0774 6.39869 10.4726C6.66272 10.8677 6.80365 11.3324 6.80365 11.8077C6.80365 12.445 6.55049 13.0563 6.09986 13.5069C5.64923 13.9576 5.03805 14.2108 4.40076 14.2108ZM15.6142 21.4202C15.139 21.4202 14.6744 21.2792 14.2793 21.0152C13.8841 20.7511 13.5761 20.3758 13.3943 19.9367C13.2124 19.4976 13.1648 19.0144 13.2575 18.5482C13.3502 18.0821 13.5791 17.6539 13.9151 17.3178C14.2512 16.9817 14.6793 16.7528 15.1455 16.6601C15.6116 16.5674 16.0947 16.615 16.5338 16.7969C16.9729 16.9787 17.3481 17.2868 17.6122 17.6819C17.8762 18.0771 18.0171 18.5418 18.0171 19.0171C18.0171 19.6544 17.764 20.2656 17.3133 20.7163C16.8627 21.167 16.2515 21.4202 15.6142 21.4202Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

266
brand.html Normal file
View File

@ -0,0 +1,266 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<script src="./tailwind-config.js"></script>
<title>MVP 1</title>
</head>
<body>
<!-- header -->
<header class="bg-black">
<div class="container mx-auto">
<nav class="flex items-center py-5.5">
<div class="w-27.5">
<img class="w-full" src="./assets/images/logo.svg" alt="logo">
</div>
<div class="flex justify-center gap-x-9 w-full lg:-ml-27.5">
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">Product Catalog</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">For Resellers</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">For Suppliers</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">Blog</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">Need Help?</a>
</div>
</nav>
</div>
</header>
<!-- end header -->
<!-- section-1 product catalog section-1 -->
<section class="pt-10 pb-12" style="background: linear-gradient(180deg, #F2E8FF 0%, #F8F3FF 0.01%, #F8F2FF 0.02%, #F5E8FF 44%, #F1DBFF 100%);">
<div class="container mx-auto">
<!-- search bar section-1 -->
<div class="flex items-center gap-2.5">
<button class="flex shrink-0 justify-center items-center bg-white w-10 h-10 rounded-full">
<img class="max-w-[1.563rem]" src="./assets/images/arrow-left-icon.svg" alt="arrow">
</button>
<div class="relative w-full">
<input class="px-[3.75rem] py-4 w-full border-[0.7px] outline-none border-grey5 rounded-lg text-black text-xl leading-6 font-ms font-normal placeholder:text-grey5" placeholder="Search for beauty products, brands, and more..." type="text">
<div class="absolute left-4 top-1/2 -translate-y-1/2">
<img src="./assets/images/search-grey-icon.svg" alt="search">
</div>
<button class="absolute right-4 top-1/2 -translate-y-1/2">
<img src="./assets/images/cross-grey-icon.svg" alt="cross">
</button>
</div>
<button class="bg-purple2 px-6 py-2 rounded-[1.25rem]">
<span class="text-white text-xl leading-6 font-ms font-normal">Search</span>
</button>
<button class="flex shrink-0 justify-center items-center bg-white w-10 h-10 rounded-full">
<img class="max-w-[1.563rem]" src="./assets/images/share-icon.svg" alt="arrow">
</button>
</div>
<!-- end search bar section-1 -->
<!-- tabs section-1 -->
<div class="flex justify-center items-center mt-10">
<button class="text-center pt-1 pb-6 w-1/4">
<p class="text-grey6 text-lg leading-5.5 font-ms font-normal">Explore by Category</p>
</button>
<button class="text-center pt-1 pb-6 w-1/4 border-b-[0.188rem] border-purple2">
<p class="text-black text-lg leading-5.5 font-ms font-medium">Discover Top Brands</p>
</button>
<button class="text-center pt-1 pb-6 w-1/4">
<p class="text-grey6 text-lg leading-5.5 font-ms font-normal">Solutions for Your Concerns</p>
</button>
<button class="text-center pt-1 pb-6 w-1/4">
<p class="text-grey6 text-lg leading-5.5 font-ms font-normal">Raena Exclusives</p>
</button>
</div>
<!-- end tabs section-1 -->
<!-- brand section-1 -->
<div class="flex">
<div class="pt-9">
<!-- brands section-1 -->
<div class="flex flex-wrap justify-center gap-x-3 gap-y-6">
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo1.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo2.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo3.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo4.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo9.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo5.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo6.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo7.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo8.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo9.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo1.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo2.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo3.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo4.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo9.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo5.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo6.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo7.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo8.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo9.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo1.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo2.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo3.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo4.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo9.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo5.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo6.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo7.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo8.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo9.svg" alt="logo">
</div>
</div>
<!-- brands section-1 -->
<!-- pagination section-1 -->
<div class="flex justify-center gap-x-[0.313rem] mt-7.5">
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8/30 text-[0.938rem] leading-5 font-ms font-medium">Prev</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-medium">First</span>
</button>
<button class="min-w-[2.375rem] bg-purple2 px-3.5 py-1.5 rounded-lg text-center">
<span class="text-white text-[0.938rem] leading-5 font-ms font-semibold">1</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">2</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">2</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">3</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">...</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">10</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-medium">Next</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-medium">Last</span>
</button>
</div>
<!-- end pagination section-1 -->
</div>
</div>
<!-- end brand section-1 -->
</div>
</section>
<!-- end section-1 product catalog -->
<!-- footer -->
<footer class="bg-black py-[3.25rem]">
<div class="container mx-auto">
<div class="flex">
<div class="w-[30%]">
<div class="w-27.5">
<img class="w-full" src="./assets/images/logo.svg" alt="logo">
</div>
<p class="text-white text-lg leading-[1.625rem] font-ms font-normal mt-7">Start and grow your Beauty Business with Raena!</p>
<div class="flex gap-3 mt-7.5">
<div class="max-w-8">
<img src="./assets/images/facebook-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/youtube-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/linkedin-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/telegram-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/instagram-icon.svg" alt="social">
</div>
</div>
</div>
<div class="w-[70%] flex justify-between ml-24">
<div class="flex flex-col gap-3">
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">About Us</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">How to Become a Reseller</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">FAQ</a>
</div>
<div class="flex flex-col gap-3">
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">Start an Online Business</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">Buying and Selling Distributors</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">Dropship Reseller Community</a>
</div>
<div class="flex flex-col gap-3">
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">What is Dropship</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">What is a Dropshipper</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">What is a Reseller</a>
</div>
</div>
</div>
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-7">© Copyright 2012 - 2024 | All rights reserved</p>
</div>
</footer>
<!-- end footer -->
</body>
</html>

277
category.html Normal file
View File

@ -0,0 +1,277 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<script src="./tailwind-config.js"></script>
<title>MVP 1</title>
</head>
<body>
<!-- header -->
<header class="bg-black">
<div class="container mx-auto">
<nav class="flex items-center py-5.5">
<div class="w-27.5">
<img class="w-full" src="./assets/images/logo.svg" alt="logo">
</div>
<div class="flex justify-center gap-x-9 w-full lg:-ml-27.5">
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">Product Catalog</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">For Resellers</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">For Suppliers</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">Blog</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">Need Help?</a>
</div>
</nav>
</div>
</header>
<!-- end header -->
<!-- section-1 product catalog section-1 -->
<section class="pt-10 pb-12" style="background: linear-gradient(180deg, #F2E8FF 0%, #F8F3FF 0.01%, #F8F2FF 0.02%, #F5E8FF 44%, #F1DBFF 100%);">
<div class="container mx-auto">
<!-- search bar section-1 -->
<div class="flex items-center gap-2.5">
<button class="flex shrink-0 justify-center items-center bg-white w-10 h-10 rounded-full">
<img class="max-w-[1.563rem]" src="./assets/images/arrow-left-icon.svg" alt="arrow">
</button>
<div class="relative w-full">
<input class="px-[3.75rem] py-4 w-full border-[0.7px] outline-none border-grey5 rounded-lg text-black text-xl leading-6 font-ms font-normal placeholder:text-grey5" placeholder="Search for beauty products, brands, and more..." type="text">
<div class="absolute left-4 top-1/2 -translate-y-1/2">
<img src="./assets/images/search-grey-icon.svg" alt="search">
</div>
<button class="absolute right-4 top-1/2 -translate-y-1/2">
<img src="./assets/images/cross-grey-icon.svg" alt="cross">
</button>
</div>
<button class="bg-purple2 px-6 py-2 rounded-[1.25rem]">
<span class="text-white text-xl leading-6 font-ms font-normal">Search</span>
</button>
<button class="flex shrink-0 justify-center items-center bg-white w-10 h-10 rounded-full">
<img class="max-w-[1.563rem]" src="./assets/images/share-icon.svg" alt="arrow">
</button>
</div>
<!-- end search bar section-1 -->
<!-- tabs section-1 -->
<div class="flex justify-center items-center mt-10">
<button class="text-center pt-1 pb-6 w-1/4 border-b-[0.188rem] border-purple2">
<p class="text-black text-lg leading-5.5 font-ms font-medium">Explore by Category</p>
</button>
<button class="text-center pt-1 pb-6 w-1/4">
<p class="text-grey6 text-lg leading-5.5 font-ms font-normal">Discover Top Brands</p>
</button>
<button class="text-center pt-1 pb-6 w-1/4">
<p class="text-grey6 text-lg leading-5.5 font-ms font-normal">Solutions for Your Concerns</p>
</button>
<button class="text-center pt-1 pb-6 w-1/4">
<p class="text-grey6 text-lg leading-5.5 font-ms font-normal">Raena Exclusives</p>
</button>
</div>
<!-- end tabs section-1 -->
<!-- CATEGORY section-1 -->
<div class="flex">
<!-- left menu section-1 -->
<div class="w-1/4 pt-4">
<p class="text-black text-lg leading-5.5 font-ms font-medium">List of Categories</p>
<div>
<button class="bg-purple2 px-[1.063rem] py-2 mt-2.5 w-full">
<p class="text-white text-base leading-5 font-ms font-medium text-left">Bags</p>
</button>
<button class="px-[0.938rem] py-2 mt-2.5 w-full">
<p class="text-grey7 text-base leading-5 font-ms font-normal text-left">Bodycare</p>
</button>
<button class="px-[0.938rem] py-2 mt-2.5 w-full">
<p class="text-grey7 text-base leading-5 font-ms font-normal text-left">Fragrance</p>
</button>
<button class="px-[0.938rem] py-2 mt-2.5 w-full">
<p class="text-grey7 text-base leading-5 font-ms font-normal text-left">Haircare</p>
</button>
<button class="px-[0.938rem] py-2 mt-2.5 w-full">
<p class="text-grey7 text-base leading-5 font-ms font-normal text-left">Make-up</p>
</button>
<button class="px-[0.938rem] py-2 mt-2.5 w-full">
<p class="text-grey7 text-base leading-5 font-ms font-normal text-left">Mother & Baby</p>
</button>
<button class="px-[0.938rem] py-2 mt-2.5 w-full">
<p class="text-grey7 text-base leading-5 font-ms font-normal text-left">Skincare</p>
</button>
<button class="px-[0.938rem] py-2 mt-2.5 w-full">
<p class="text-grey7 text-base leading-5 font-ms font-normal text-left">Suplemen</p>
</button>
</div>
</div>
<!-- left menu section-1 -->
<div class="w-9/12 pt-4 pl-5 border-l-[0.75px] border-grey5">
<div class="flex gap-4 flex-wrap">
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
</div>
<!-- pagination section-1 -->
<div class="flex justify-center gap-x-[0.313rem] mt-7.5">
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8/30 text-[0.938rem] leading-5 font-ms font-medium">Prev</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-medium">First</span>
</button>
<button class="min-w-[2.375rem] bg-purple2 px-3.5 py-1.5 rounded-lg text-center">
<span class="text-white text-[0.938rem] leading-5 font-ms font-semibold">1</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">2</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">2</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">3</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">...</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">10</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-medium">Next</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-medium">Last</span>
</button>
</div>
<!-- end pagination section-1 -->
</div>
</div>
<!-- end CATEGORY section-1 -->
</div>
</section>
<!-- end section-1 product catalog -->
<!-- footer -->
<footer class="bg-black py-[3.25rem]">
<div class="container mx-auto">
<div class="flex">
<div class="w-[30%]">
<div class="w-27.5">
<img class="w-full" src="./assets/images/logo.svg" alt="logo">
</div>
<p class="text-white text-lg leading-[1.625rem] font-ms font-normal mt-7">Start and grow your Beauty Business with Raena!</p>
<div class="flex gap-3 mt-7.5">
<div class="max-w-8">
<img src="./assets/images/facebook-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/youtube-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/linkedin-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/telegram-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/instagram-icon.svg" alt="social">
</div>
</div>
</div>
<div class="w-[70%] flex justify-between ml-24">
<div class="flex flex-col gap-3">
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">About Us</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">How to Become a Reseller</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">FAQ</a>
</div>
<div class="flex flex-col gap-3">
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">Start an Online Business</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">Buying and Selling Distributors</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">Dropship Reseller Community</a>
</div>
<div class="flex flex-col gap-3">
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">What is Dropship</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">What is a Dropshipper</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">What is a Reseller</a>
</div>
</div>
</div>
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-7">© Copyright 2012 - 2024 | All rights reserved</p>
</div>
</footer>
<!-- end footer -->
</body>
</html>

271
exclusive.html Normal file
View File

@ -0,0 +1,271 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<script src="./tailwind-config.js"></script>
<title>MVP 1</title>
</head>
<body>
<!-- header -->
<header class="bg-black">
<div class="container mx-auto">
<nav class="flex items-center py-5.5">
<div class="w-27.5">
<img class="w-full" src="./assets/images/logo.svg" alt="logo">
</div>
<div class="flex justify-center gap-x-9 w-full lg:-ml-27.5">
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">Product Catalog</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">For Resellers</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">For Suppliers</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">Blog</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">Need Help?</a>
</div>
</nav>
</div>
</header>
<!-- end header -->
<!-- section-1 product catalog section-1 -->
<section class="pt-10 pb-12" style="background: linear-gradient(180deg, #F2E8FF 0%, #F8F3FF 0.01%, #F8F2FF 0.02%, #F5E8FF 44%, #F1DBFF 100%);">
<div class="container mx-auto">
<!-- search bar section-1 -->
<div class="flex items-center gap-2.5">
<button class="flex shrink-0 justify-center items-center bg-white w-10 h-10 rounded-full">
<img class="max-w-[1.563rem]" src="./assets/images/arrow-left-icon.svg" alt="arrow">
</button>
<div class="relative w-full">
<input class="px-[3.75rem] py-4 w-full border-[0.7px] outline-none border-grey5 rounded-lg text-black text-xl leading-6 font-ms font-normal placeholder:text-grey5" placeholder="Search for beauty products, brands, and more..." type="text">
<div class="absolute left-4 top-1/2 -translate-y-1/2">
<img src="./assets/images/search-grey-icon.svg" alt="search">
</div>
<button class="absolute right-4 top-1/2 -translate-y-1/2">
<img src="./assets/images/cross-grey-icon.svg" alt="cross">
</button>
</div>
<button class="bg-purple2 px-6 py-2 rounded-[1.25rem]">
<span class="text-white text-xl leading-6 font-ms font-normal">Search</span>
</button>
<button class="flex shrink-0 justify-center items-center bg-white w-10 h-10 rounded-full">
<img class="max-w-[1.563rem]" src="./assets/images/share-icon.svg" alt="arrow">
</button>
</div>
<!-- end search bar section-1 -->
<!-- tabs section-1 -->
<div class="flex justify-center items-center mt-10">
<button class="text-center pt-1 pb-6 w-1/4">
<p class="text-grey6 text-lg leading-5.5 font-ms font-normal">Explore by Category</p>
</button>
<button class="text-center pt-1 pb-6 w-1/4">
<p class="text-grey6 text-lg leading-5.5 font-ms font-normal">Raena Exclusives</p>
</button>
<button class="text-center pt-1 pb-6 w-1/4">
<p class="text-grey6 text-lg leading-5.5 font-ms font-normal">Solutions for Your Concerns</p>
</button>
<button class="text-center pt-1 pb-6 w-1/4 border-b-[0.188rem] border-purple2">
<p class="text-black text-lg leading-5.5 font-ms font-medium">Raena Exclusives</p>
</button>
</div>
<!-- end tabs section-1 -->
<!-- brand section-1 -->
<div class="flex">
<div class="pt-4">
<div class="max-w-[61.25rem] mx-auto">
<h1 class="text-black text-[2.75rem] leading-[3.438rem] font-dm font-normal text-center">Discover the treasures only RAENA can offer!</h1>
<p class="text-black text-5.5 leading-[2.125rem] font-ms font-medium text-center mt-2.5">Dive into our exclusive selection and find unique beauty gems that you won't find anywhere else. Embrace the joy of exclusivity and make your beauty routine extraordinary with Raena Exclusive!</p>
</div>
<!-- brands section-1 -->
<div class="flex flex-wrap justify-center gap-x-3 gap-y-6 pt-7.5 mt-9 border-t-[0.7px] border-grey5">
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo1.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo2.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo3.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo4.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo9.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo5.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo6.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo7.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo8.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo9.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo1.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo2.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo3.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo4.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo9.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo5.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo6.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo7.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo8.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo9.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo1.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo2.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo3.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo4.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo9.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo5.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo6.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo7.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo8.svg" alt="logo">
</div>
<div class="w-[14.188rem] h-[4.813rem] flex justify-center items-center px-4 rounded-[0.625rem] bg-white border-[1.5px] border-grey1">
<img src="./assets/images/company-logo9.svg" alt="logo">
</div>
</div>
<!-- brands section-1 -->
<!-- pagination section-1 -->
<div class="flex justify-center gap-x-[0.313rem] mt-7.5">
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8/30 text-[0.938rem] leading-5 font-ms font-medium">Prev</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-medium">First</span>
</button>
<button class="min-w-[2.375rem] bg-purple2 px-3.5 py-1.5 rounded-lg text-center">
<span class="text-white text-[0.938rem] leading-5 font-ms font-semibold">1</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">2</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">2</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">3</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">...</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">10</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-medium">Next</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-medium">Last</span>
</button>
</div>
<!-- end pagination section-1 -->
</div>
</div>
<!-- end brand section-1 -->
</div>
</section>
<!-- end section-1 product catalog -->
<!-- footer -->
<footer class="bg-black py-[3.25rem]">
<div class="container mx-auto">
<div class="flex">
<div class="w-[30%]">
<div class="w-27.5">
<img class="w-full" src="./assets/images/logo.svg" alt="logo">
</div>
<p class="text-white text-lg leading-[1.625rem] font-ms font-normal mt-7">Start and grow your Beauty Business with Raena!</p>
<div class="flex gap-3 mt-7.5">
<div class="max-w-8">
<img src="./assets/images/facebook-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/youtube-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/linkedin-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/telegram-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/instagram-icon.svg" alt="social">
</div>
</div>
</div>
<div class="w-[70%] flex justify-between ml-24">
<div class="flex flex-col gap-3">
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">About Us</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">How to Become a Reseller</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">FAQ</a>
</div>
<div class="flex flex-col gap-3">
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">Start an Online Business</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">Buying and Selling Distributors</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">Dropship Reseller Community</a>
</div>
<div class="flex flex-col gap-3">
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">What is Dropship</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">What is a Dropshipper</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">What is a Reseller</a>
</div>
</div>
</div>
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-7">© Copyright 2012 - 2024 | All rights reserved</p>
</div>
</footer>
<!-- end footer -->
</body>
</html>

2
index.html
View File

@ -7,7 +7,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<script src="./tailwind.config.js"></script>
<script src="./tailwind-config.js"></script>
<title>MVP 1</title>
</head>
<body>

325
search.html Normal file
View File

@ -0,0 +1,325 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<script src="./tailwind-config.js"></script>
<title>MVP 1</title>
</head>
<body>
<!-- header -->
<header class="bg-black">
<div class="container mx-auto">
<nav class="flex items-center py-5.5">
<div class="w-27.5">
<img class="w-full" src="./assets/images/logo.svg" alt="logo">
</div>
<div class="flex justify-center gap-x-9 w-full lg:-ml-27.5">
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">Product Catalog</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">For Resellers</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">For Suppliers</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">Blog</a>
<a href="#" class="text-white text-lg leading-5.5 font-ms font-light">Need Help?</a>
</div>
</nav>
</div>
</header>
<!-- end header -->
<!-- section-1 product catalog section-1 -->
<section class="pt-10 pb-12" style="background: linear-gradient(180deg, #F2E8FF 0%, #F8F3FF 0.01%, #F8F2FF 0.02%, #F5E8FF 44%, #F1DBFF 100%);">
<div class="container mx-auto">
<!-- search bar section-1 -->
<div class="flex items-center gap-2.5">
<button class="flex shrink-0 justify-center items-center bg-white w-10 h-10 rounded-full">
<img class="max-w-[1.563rem]" src="./assets/images/arrow-left-icon.svg" alt="arrow">
</button>
<div class="relative w-full">
<input class="px-[3.75rem] py-4 w-full border-[0.7px] outline-none border-grey5 rounded-lg text-black text-xl leading-6 font-ms font-normal placeholder:text-grey5" placeholder="Search for beauty products, brands, and more..." type="text">
<div class="absolute left-4 top-1/2 -translate-y-1/2">
<img src="./assets/images/search-grey-icon.svg" alt="search">
</div>
<button class="absolute right-4 top-1/2 -translate-y-1/2">
<img src="./assets/images/cross-grey-icon.svg" alt="cross">
</button>
<!-- uncomment below line to see search suggestion items, below the search bar -->
<!-- <div class="absolute top-[4.125rem] left-0 z-10 flex flex-col gap-y-3.5 w-full bg-white py-4.5 px-3.5 rounded-lg border-[0.7px] border-grey5">
<div class="flex items-center gap-3.5 cursor-pointer">
<div class="w-[4.688rem] h-[4.688rem] flex justify-center items-center border-[0.5px] border-grey5">
<img class="w-9" src="./assets/images/product1.png" alt="product">
</div>
<div>
<p class="text-pink1 text-lg leading-5.5 font-ms font-semibold">AVOSKIN</p>
<p class="text-black text-lg leading-5.5 font-ms font-normal mt-0.5">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
</div>
</div>
<div class="flex items-center gap-3.5 cursor-pointer">
<div class="w-[4.688rem] h-[4.688rem] flex justify-center items-center border-[0.5px] border-grey5">
<img class="w-9" src="./assets/images/product1.png" alt="product">
</div>
<div>
<p class="text-pink1 text-lg leading-5.5 font-ms font-semibold">AVOSKIN</p>
<p class="text-black text-lg leading-5.5 font-ms font-normal mt-0.5">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
</div>
</div>
<div class="flex items-center gap-3.5 cursor-pointer">
<div class="w-[4.688rem] h-[4.688rem] flex justify-center items-center border-[0.5px] border-grey5">
<img class="w-9" src="./assets/images/product1.png" alt="product">
</div>
<div>
<p class="text-pink1 text-lg leading-5.5 font-ms font-semibold">AVOSKIN</p>
<p class="text-black text-lg leading-5.5 font-ms font-normal mt-0.5">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
</div>
</div>
</div> -->
</div>
<button class="bg-purple2 px-6 py-2 rounded-[1.25rem]">
<span class="text-white text-xl leading-6 font-ms font-normal">Search</span>
</button>
<button class="flex shrink-0 justify-center items-center bg-white w-10 h-10 rounded-full">
<img class="max-w-[1.563rem]" src="./assets/images/share-icon.svg" alt="arrow">
</button>
</div>
<!-- end search bar section-1 -->
<!-- tabs section-1 -->
<div class="flex justify-center items-center mt-10">
<button class="text-center pt-1 pb-6 w-1/4">
<p class="text-grey6 text-lg leading-5.5 font-ms font-normal">Explore by Category</p>
</button>
<button class="text-center pt-1 pb-6 w-1/4 border-b-[0.188rem] border-purple2">
<p class="text-black text-lg leading-5.5 font-ms font-medium">Discover Top Brands</p>
</button>
<button class="text-center pt-1 pb-6 w-1/4">
<p class="text-grey6 text-lg leading-5.5 font-ms font-normal">Solutions for Your Concerns</p>
</button>
<button class="text-center pt-1 pb-6 w-1/4">
<p class="text-grey6 text-lg leading-5.5 font-ms font-normal">Raena Exclusives</p>
</button>
</div>
<!-- end tabs section-1 -->
<!-- CATEGORY section-1 -->
<div class="flex">
<div class="pt-5">
<p class="text-grey6 text-base leading-5 font-ms font-normal">Search results for <span class="text-black font-medium">“Avoskin”</span> - 5,200 items founds</p>
<div class="flex gap-x-10 gap-y-4 flex-wrap mt-5">
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
<div class="flex flex-col justify-end w-[12.813rem] bg-white">
<div class="px-2.5 pt-3 pb-3">
<img class="mx-auto w-[6.25rem]" src="./assets/images/product1.png" alt="product">
<p class="text-pink1 text-[0.688rem] leading-3.5 font-ms font-semibold mt-3">AVOSKIN</p>
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-normal mt-2">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
<div class="flex justify-between items-center mt-2">
<p class="text-black text-[0.688rem] leading-3.5 font-ms font-semibold">Rp 199.000</p>
<p class="text-grey3 text-[0.563rem] leading-3 font-ms font-normal line-through">Rp 259.000</p>
</div>
</div>
<button class="bg-purple2 w-full p-2 text-white text-xs leading-3.5 font-ms font-semibold">Notify Me!</button>
</div>
</div>
<!-- pagination section-1 -->
<div class="flex justify-center gap-x-[0.313rem] mt-7.5">
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8/30 text-[0.938rem] leading-5 font-ms font-medium">Prev</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-medium">First</span>
</button>
<button class="min-w-[2.375rem] bg-purple2 px-3.5 py-1.5 rounded-lg text-center">
<span class="text-white text-[0.938rem] leading-5 font-ms font-semibold">1</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">2</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">2</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">3</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">...</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-lg text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-semibold">10</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-medium">Next</span>
</button>
<button class="min-w-[2.375rem] bg-white px-3.5 py-1.5 border border-grey1 rounded-md text-center">
<span class="text-grey8 text-[0.938rem] leading-5 font-ms font-medium">Last</span>
</button>
</div>
<!-- end pagination section-1 -->
</div>
</div>
<!-- end CATEGORY section-1 -->
</div>
</section>
<!-- end section-1 product catalog -->
<!-- footer -->
<footer class="bg-black py-[3.25rem]">
<div class="container mx-auto">
<div class="flex">
<div class="w-[30%]">
<div class="w-27.5">
<img class="w-full" src="./assets/images/logo.svg" alt="logo">
</div>
<p class="text-white text-lg leading-[1.625rem] font-ms font-normal mt-7">Start and grow your Beauty Business with Raena!</p>
<div class="flex gap-3 mt-7.5">
<div class="max-w-8">
<img src="./assets/images/facebook-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/youtube-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/linkedin-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/telegram-icon.svg" alt="social">
</div>
<div class="max-w-8">
<img src="./assets/images/instagram-icon.svg" alt="social">
</div>
</div>
</div>
<div class="w-[70%] flex justify-between ml-24">
<div class="flex flex-col gap-3">
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">About Us</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">How to Become a Reseller</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">FAQ</a>
</div>
<div class="flex flex-col gap-3">
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">Start an Online Business</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">Buying and Selling Distributors</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">Dropship Reseller Community</a>
</div>
<div class="flex flex-col gap-3">
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">What is Dropship</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">What is a Dropshipper</a>
<a href="#" class="text-white text-lg leading-[1.625rem] font-ms font-normal">What is a Reseller</a>
</div>
</div>
</div>
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-7">© Copyright 2012 - 2024 | All rights reserved</p>
</div>
</footer>
<!-- end footer -->
</body>
</html>

4
tailwind.config.js
View File

@ -18,6 +18,10 @@ tailwind.config = {
grey2: '#D7D7D7',
grey3: '#828282',
grey4: '#E8E8E8',
grey5: '#B5B5B5',
grey6: '#545454',
grey7: '#2E2E2E',
grey8: '#333333',
pink1: '#E34FA5'
},
fontSize: {