267 lines
20 KiB
HTML
267 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">
|
|
<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>
|