182 lines
12 KiB
HTML
182 lines
12 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 class="bg-black">
|
||
|
|
<div class="container mx-auto">
|
||
|
|
<nav class="flex items-center py-5.5">
|
||
|
|
<div class="w-27.5 h-5.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>
|
||
|
|
<section class="relative bg-black h-full">
|
||
|
|
<div class="container mx-auto">
|
||
|
|
<div class="flex w-[62%]">
|
||
|
|
<div class="pt-30 pb-76">
|
||
|
|
<h1 class="text-white text-8xl leading-25 font-dm font-normal">
|
||
|
|
Unlock Your Potential With
|
||
|
|
<span class="text-purple1">RAENA</span>
|
||
|
|
<img class="inline-block" src="./assets/images/stars-pair-icon.png" alt="stars">
|
||
|
|
</h1>
|
||
|
|
<p class="text-white text-5.5 leading-8 font-ms font-medium mt-6">Whether you're shopping for the latest beauty trends or ready to launch your beauty empire, Raena is your gateway to success. Explore, Shop, Empower - Your journey starts here!</p>
|
||
|
|
<div class="flex mt-9 gap-x-2.5">
|
||
|
|
<a href="#" class="flex items-center bg-purple2 py-2.25 px-3.25 text-white text-xl leading-6 font-ms font-medium">
|
||
|
|
<img class="mr-0.5" src="./assets/images/search-icon.svg" alt="search">
|
||
|
|
Explore Product Catalog
|
||
|
|
</a>
|
||
|
|
<a href="#" class="flex items-center bg-white/15 py-2.25 px-3.25 text-white text-xl leading-6 font-ms font-medium border-[0.7px] border-white">
|
||
|
|
<img class="mr-0.5" src="./assets/images/store-icon.svg" alt="store">
|
||
|
|
Want to Start Your Beauty Business?
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="absolute top-0 right-0 w-[38%] h-full">
|
||
|
|
<div class="w-full h-full flex justify-center items-end px-6 bg-cover bg-center bg-no-repeat" style="background-image: url(./assets/images/skin-care-banner.png);">
|
||
|
|
<div class="text-center mb-27.5">
|
||
|
|
<h3 class="text-white text-10 leading-12 font-ms font-semibold">RAENA Skin Analysis</h3>
|
||
|
|
<p class="text-white text-lg leading-6 font-ms font-normal mt-3">Get your skin analysis report and recommendation product for your skin</p>
|
||
|
|
<a href="#" class="flex items-center bg-white/15 py-2.25 px-3.25 mt-5.5 mx-auto text-white text-lg leading-5.5 font-ms font-medium border-[0.7px] border-white w-fit">
|
||
|
|
<img class="mr-1.5" src="./assets/images/camera-icon.svg" alt="camera">
|
||
|
|
Take your Skin Analysis Now
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="absolute top-[152px] left-0 -translate-x-1/2">
|
||
|
|
<img src="./assets/images/whats-new.svg" alt="whats new">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section class="pt-40 pb-64" style="background: linear-gradient(180deg, #F2E8FF 0%, #F8F3FF 0.01%, #F1DBFF 100%);">
|
||
|
|
<div class="container mx-auto">
|
||
|
|
<h2 class="text-black text-20 leading-25 font-dm font-normal text-center">
|
||
|
|
Discover the
|
||
|
|
<span class="text-purple2">Latest!</span>
|
||
|
|
</h2>
|
||
|
|
<p class="text-black text-5.5 leading-9 font-ms font-medium text-center mt-2.5">Fresh Finds & New Arrivals Await!</p>
|
||
|
|
<div class="relative mt-10">
|
||
|
|
<div class="flex justify-center gap-x-3">
|
||
|
|
<div class="w-71.5 h-24 flex justify-center items-center rounded-4.5 bg-white border-[1.5px] border-grey1">
|
||
|
|
<img src="./assets/images/company-logo1.svg" alt="logo">
|
||
|
|
</div>
|
||
|
|
<div class="w-71.5 h-24 flex justify-center items-center rounded-4.5 bg-white border-[1.5px] border-grey1">
|
||
|
|
<img src="./assets/images/company-logo2.svg" alt="logo">
|
||
|
|
</div>
|
||
|
|
<div class="w-71.5 h-24 flex justify-center items-center rounded-4.5 bg-white border-[1.5px] border-grey1">
|
||
|
|
<img src="./assets/images/company-logo3.svg" alt="logo">
|
||
|
|
</div>
|
||
|
|
<div class="w-71.5 h-24 flex justify-center items-center rounded-4.5 bg-white border-[1.5px] border-grey1">
|
||
|
|
<img src="./assets/images/company-logo4.svg" alt="logo">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-center gap-x-3 mt-3.5">
|
||
|
|
<div class="w-71.5 h-24 flex justify-center items-center rounded-4.5 bg-white border-[1.5px] border-grey1">
|
||
|
|
<img src="./assets/images/company-logo5.svg" alt="logo">
|
||
|
|
</div>
|
||
|
|
<div class="w-71.5 h-24 flex justify-center items-center rounded-4.5 bg-white border-[1.5px] border-grey1">
|
||
|
|
<img src="./assets/images/company-logo6.svg" alt="logo">
|
||
|
|
</div>
|
||
|
|
<div class="w-71.5 h-24 flex justify-center items-center rounded-4.5 bg-white border-[1.5px] border-grey1">
|
||
|
|
<img src="./assets/images/company-logo7.svg" alt="logo">
|
||
|
|
</div>
|
||
|
|
<div class="w-71.5 h-24 flex justify-center items-center rounded-4.5 bg-white border-[1.5px] border-grey1">
|
||
|
|
<img src="./assets/images/company-logo8.svg" alt="logo">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="absolute -left-10 top-1/2 -translate-y-1/2">
|
||
|
|
<img src="./assets/images/slide-left-icon.svg" alt="slide">
|
||
|
|
</button>
|
||
|
|
<button class="absolute -right-10 top-1/2 -translate-y-1/2">
|
||
|
|
<img src="./assets/images/slide-right-icon.svg" alt="slide">
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-center gap-x-5 mt-[4.625rem]">
|
||
|
|
<div class="bg-purple2 w-3.5 h-3.5 rounded-full"></div>
|
||
|
|
<div class="bg-grey2 w-3.5 h-3.5 rounded-full"></div>
|
||
|
|
<div class="bg-grey2 w-3.5 h-3.5 rounded-full"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="container mx-auto mt-56">
|
||
|
|
<h2 class="text-black text-20 leading-25 font-dm font-normal text-center">
|
||
|
|
Shop by the
|
||
|
|
<span class="text-purple2">Favorites!</span>
|
||
|
|
</h2>
|
||
|
|
<p class="text-black text-5.5 leading-9 font-ms font-medium text-center mt-2.5">Best Sellers That Everyone Loves!</p>
|
||
|
|
<div class="flex mt-8 gap-10 px-10">
|
||
|
|
<div class="relative flex justify-center items-center w-[45%] rounded-t-[600px] shrink-0" style="background: linear-gradient(171.28deg, #BBBAFF 7.35%, #9874FF 94.06%);">
|
||
|
|
<img src="./assets/images/avoskin.svg" alt="avoskin">
|
||
|
|
<div class="absolute -top-1.5 -right-1">
|
||
|
|
<img src="./assets/images/most-fav.svg" alt="most fav">
|
||
|
|
</div>
|
||
|
|
<div class="absolute bottom-5 left-0 flex justify-between items-center w-full px-4">
|
||
|
|
<button>
|
||
|
|
<img src="./assets/images/slide-left-white-icon.svg" alt="slide">
|
||
|
|
</button>
|
||
|
|
<div class="flex justify-center gap-x-5">
|
||
|
|
<div class="bg-white w-3.5 h-3.5 rounded-full"></div>
|
||
|
|
<div class="bg-grey4/25 w-3.5 h-3.5 rounded-full"></div>
|
||
|
|
<div class="bg-grey4/25 w-3.5 h-3.5 rounded-full"></div>
|
||
|
|
<div class="bg-grey4/25 w-3.5 h-3.5 rounded-full"></div>
|
||
|
|
<div class="bg-grey4/25 w-3.5 h-3.5 rounded-full"></div>
|
||
|
|
</div>
|
||
|
|
<button>
|
||
|
|
<img src="./assets/images/slide-right-white-icon.svg" alt="slide">
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="text-black text-5xl font-dm font-normal italic">Perfect for Acne</p>
|
||
|
|
<p class="text-black text-5.5 leading-9 font-ms font-medium">Top Picks for Clear Skin!</p>
|
||
|
|
<div class="flex gap-4 mt-7">
|
||
|
|
<div class="flex flex-col justify-end w-[18.438rem] bg-white">
|
||
|
|
<div class="px-6 pt-4.5 pb-6.5">
|
||
|
|
<img class="mx-auto" src="./assets/images/product1.png" alt="product">
|
||
|
|
<p class="text-pink1 text-lg leading-5.5 font-ms font-semibold mt-11">AVOSKIN</p>
|
||
|
|
<p class="text-black text-base leading-5 font-ms font-normal mt-3">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
|
||
|
|
<div class="flex justify-between items-center mt-3">
|
||
|
|
<p class="text-black text-lg leading-5.5 font-ms font-semibold">Rp 199.000</p>
|
||
|
|
<p class="text-grey3 text-sm leading-4 font-ms font-normal line-through">Rp 259.000</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="bg-purple2 w-full p-3.5 text-white text-lg leading-5.5 font-ms font-semibold">Notify Me!</button>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col justify-end w-[18.438rem] bg-white">
|
||
|
|
<div class="px-6 pt-4.5 pb-6.5">
|
||
|
|
<img class="mx-auto" src="./assets/images/product2.png" alt="product">
|
||
|
|
<p class="text-pink1 text-lg leading-5.5 font-ms font-semibold mt-11">AVOSKIN</p>
|
||
|
|
<p class="text-black text-base leading-5 font-ms font-normal mt-3">Your Skin Bae Serum - Alpha Abutin 3% + Grapeseed | 30 ml</p>
|
||
|
|
<div class="flex justify-between items-center mt-3">
|
||
|
|
<p class="text-black text-lg leading-5.5 font-ms font-semibold">Rp 199.000</p>
|
||
|
|
<p class="text-grey3 text-sm leading-4 font-ms font-normal line-through">Rp 259.000</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="bg-purple2 w-full p-3.5 text-white text-lg leading-5.5 font-ms font-semibold">Notify Me!</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</body>
|
||
|
|
</html>
|