315 lines
23 KiB
HTML
315 lines
23 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 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>
|
|
<!-- end header -->
|
|
|
|
<!-- section-1 homepage banner -->
|
|
<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>
|
|
</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>
|
|
<!-- end section-1 homepage banner -->
|
|
|
|
<!-- section-2 discover the latest -->
|
|
<section class="pt-40 pb-64" style="background: linear-gradient(180deg, #F2E8FF 0%, #F8F3FF 0.01%, #F1DBFF 100%);">
|
|
<!-- sub-section-1 section-2 -->
|
|
<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>
|
|
<!-- end sub-section-1 section-2 -->
|
|
|
|
<!-- sub-section-2 section-2 -->
|
|
<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 class="opacity-20">
|
|
<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>
|
|
<!-- end sub-section-2 section-2 -->
|
|
</section>
|
|
<!--end section-2 discover the latest -->
|
|
|
|
<!-- section-3 star beauty business -->
|
|
<section class="bg-black relative pt-[8.5rem] pb-[7.75rem]">
|
|
<div class="container mx-auto">
|
|
<!-- sub-section-1 section-3 -->
|
|
<div>
|
|
<div class="flex items-center gap-x-1">
|
|
<h2 class="text-white text-20 leading-25 font-dm font-normal">
|
|
Want to Start Your
|
|
<br>
|
|
<span class="text-purple2">Beauty Business?</span>
|
|
</h2>
|
|
<img src="./assets/images/star-icon.svg" alt="star">
|
|
</div>
|
|
<h3 class="text-white text-16.25 leading-20 font-dm font-normal mt-10 text-center">
|
|
Why Become a
|
|
<span class="text-purple2">Reseller?</span>
|
|
</h3>
|
|
<div class="flex justify-center flex-wrap gap-5.5 mt-7.5">
|
|
<div class="w-[23.75rem] py-7 px-4.5 text-center bg-white/15 border-[0.7px] border-white">
|
|
<img class="mx-auto" src="./assets/images/reseller1.svg" alt="reseller">
|
|
<p class="text-purple2 text-xl leading-6 font-ms font-semibold mt-4">Low Initial Investment</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-2">Jumpstart your dream business with just a small start-up cost; reselling makes entrepreneurship exciting and accessible to everyone!</p>
|
|
</div>
|
|
<div class="w-[23.75rem] py-7 px-4.5 text-center bg-white/15 border-[0.7px] border-white">
|
|
<img class="mx-auto" src="./assets/images/reseller2.svg" alt="reseller">
|
|
<p class="text-purple2 text-xl leading-6 font-ms font-semibold mt-4">Low Initial Investment</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-2">Jumpstart your dream business with just a small start-up cost; reselling makes entrepreneurship exciting and accessible to everyone!</p>
|
|
</div>
|
|
<div class="w-[23.75rem] py-7 px-4.5 text-center bg-white/15 border-[0.7px] border-white">
|
|
<img class="mx-auto" src="./assets/images/reseller3.svg" alt="reseller">
|
|
<p class="text-purple2 text-xl leading-6 font-ms font-semibold mt-4">Low Initial Investment</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-2">Jumpstart your dream business with just a small start-up cost; reselling makes entrepreneurship exciting and accessible to everyone!</p>
|
|
</div>
|
|
<div class="w-[23.75rem] py-7 px-4.5 text-center bg-white/15 border-[0.7px] border-white">
|
|
<img class="mx-auto" src="./assets/images/reseller4.svg" alt="reseller">
|
|
<p class="text-purple2 text-xl leading-6 font-ms font-semibold mt-4">Low Initial Investment</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-2">Jumpstart your dream business with just a small start-up cost; reselling makes entrepreneurship exciting and accessible to everyone!</p>
|
|
</div>
|
|
<div class="w-[23.75rem] py-7 px-4.5 text-center bg-white/15 border-[0.7px] border-white">
|
|
<img class="mx-auto" src="./assets/images/reseller5.svg" alt="reseller">
|
|
<p class="text-purple2 text-xl leading-6 font-ms font-semibold mt-4">Low Initial Investment</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-2">Jumpstart your dream business with just a small start-up cost; reselling makes entrepreneurship exciting and accessible to everyone!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end sub-section-1 section-3 -->
|
|
|
|
<!-- sub-section-2 section-3 -->
|
|
<div class="mt-20">
|
|
<div class="px-24 relative">
|
|
<h3 class="text-white text-16.25 leading-20 font-dm font-normal text-center">
|
|
How to get started with
|
|
<span class="text-purple2">RAENA</span> to become
|
|
<span class="text-purple2">a Reseller or a Dropshipper</span>
|
|
</h3>
|
|
<img class="absolute -right-4 top-6 w-32 h-28" src="./assets/images/stars-pair-icon.png" alt="star">
|
|
<p class="text-white text-5.5 leading-9 font-ms font-medium text-center mt-2.5">Kickstart your beauty empire easily with RAENA! Choose to buy a starter pack for first-time sellers or download the app to dive in. Your journey to business success and high margins starts now.</p>
|
|
</div>
|
|
|
|
<div class="flex justify-center mt-6">
|
|
<div class="w-[48%] relative">
|
|
<p class="text-white text-4xl font-dm font-normal">
|
|
Your Beauty Business
|
|
<span class="text-purple2">Starter Pack!</span>
|
|
</p>
|
|
<div class="mt-5">
|
|
<div class="flex items-center justify-center gap-4.5 rounded-t-[3.625rem] p-5" style="background: linear-gradient(146.71deg, #E34FA5 6.58%, #9874FF 127.56%);">
|
|
<p class="text-white text-[0.938rem] leading-4.5 font-ms font-medium">SPECIAL PRICE</p>
|
|
<p class="text-white text-4xl leading-12 font-dm font-normal">Rp 45,000,000</p>
|
|
<p class="text-white text-[0.938rem] leading-4.5 font-ms font-normal line-through">Rp 59,000,000</p>
|
|
</div>
|
|
<div class="pt-10 pb-7.5 px-20 bg-white/15">
|
|
<div class="flex gap-5 relative">
|
|
<div class="w-1/2 bg-white px-2.5 pt-3 pb-4">
|
|
<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>
|
|
<div class="w-1/2 bg-white px-2.5 pt-3 pb-4">
|
|
<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="absolute -left-10 top-1/2 -translate-y-1/2">
|
|
<img src="./assets/images/slide-left-white-icon.svg" alt="slide">
|
|
</button>
|
|
<button class="absolute -right-10 top-1/2 -translate-y-1/2">
|
|
<img src="./assets/images/slide-right-white-icon.svg" alt="slide">
|
|
</button>
|
|
</div>
|
|
<div class="flex justify-center gap-x-4 mt-7.5">
|
|
<div class="bg-purple2 w-3 h-3 rounded-full"></div>
|
|
<div class="bg-grey2 w-3 h-3 rounded-full"></div>
|
|
<div class="bg-grey2 w-3 h-3 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
<button class="bg-purple2 w-full p-4 ">
|
|
<span class="text-white text-2xl leading-8 font-ms font-medium">Buy Now</span>
|
|
</button>
|
|
</div>
|
|
<div class="absolute left-0 -translate-x-1/2 -bottom-7.5">
|
|
<img src="./assets/images/best-price.svg" alt="best price">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end sub-section-2 section-3 -->
|
|
|
|
|
|
</div>
|
|
</section>
|
|
<!-- end section-3 star beauty business -->
|
|
</body>
|
|
</html>
|