278 lines
20 KiB
HTML
278 lines
20 KiB
HTML
|
<!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>
|