601 lines
44 KiB
HTML
601 lines
44 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.5%] relative">
|
|
<p class="text-white text-4xl leading-[3.25rem] 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 border-x border-white">
|
|
<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 class="mx-9 w-[0.8px] bg-white/50 relative">
|
|
<span class="absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-5.5 leading-8 font-ms font-medium bg-black py-4">OR</span>
|
|
</div>
|
|
<div class="w-[43%] relative">
|
|
<p class="text-white text-4xl leading-[3.25rem] font-dm font-normal text-center">
|
|
Ready to Start Your
|
|
<span class="text-purple2">Beauty Reseller Business</span>
|
|
Journey?
|
|
</p>
|
|
<p class="text-white text-5.5 leading-8 font-ms font-medium text-center mt-2.5">Download the Raena App Now and explore our catalog and exciting promos!</p>
|
|
<div class="flex justify-end items-center mt-5">
|
|
<img class="w-[10.75rem]" src="./assets/images/phone.svg" alt="phone">
|
|
<img src="./assets/images/app-store.svg" alt="app store">
|
|
</div>
|
|
<button class="bg-purple2 w-full p-4 mt-[0.938rem]">
|
|
<span class="text-white text-2xl leading-8 font-ms font-medium">Download Now</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-8 justify-center items-center mt-14">
|
|
<img class="w-[56%]" src="./assets/images/start-app-thumb.svg" alt="video">
|
|
<div class="w-[40%]">
|
|
<p class="text-white text-4xl leading-[3.25rem] font-dm font-normal">
|
|
How to Start with
|
|
<br>
|
|
<span class="text-purple2">Raena App</span>
|
|
</p>
|
|
<p class="text-white text-5.5 leading-8 font-ms font-medium mt-2.5">Step into the world of beauty with ease! Watch our quick tutorial and learn how to launch your reseller or dropshipper journey with the RAENA app. Simplify your path to success and let your business bloom. Let's get started!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end sub-section-2 section-3 -->
|
|
|
|
<!-- sub-section-3 section-3 -->
|
|
<div class="mt-28">
|
|
<div class="w-[82%] mx-auto text-center">
|
|
<p class="text-white text-16.25 leading-20 font-dm font-normal">
|
|
Why Choose
|
|
<span class="text-purple2">Raena</span>
|
|
</p>
|
|
<p class="text-white text-5.5 leading-8 font-ms font-medium mt-2.5">Dive into the world of beauty with insights from top influencers. Join the Raena revolution today. More than a platform, we're a movement!</p>
|
|
</div>
|
|
<img class="w-[70%] mx-auto mt-10" src="./assets/images/insight-thumb.svg" alt="video">
|
|
</div>
|
|
<!-- end sub-section-3 section-3 -->
|
|
|
|
<!-- sub-section-4 section-3 -->
|
|
<div class="mt-32">
|
|
<h3 class="text-white text-[3.25rem] leading-[4.5rem] font-dm font-normal text-center">
|
|
Benefits of Using
|
|
<span class="text-purple2">Raena</span>
|
|
</h3>
|
|
<div class="flex justify-center flex-wrap gap-x-8 gap-y-9 mt-5">
|
|
<div class="w-[23.25rem] pt-[2.125rem] pb-6 px-6 text-center bg-white/15 border border-white">
|
|
<img class="mx-auto" src="./assets/images/benefit1.svg" alt="benefit">
|
|
<p class="text-white text-3xl leading-10 font-dm font-normal mt-[0.688rem]">Competitive & <br> Best Prices</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-1">Maximize your profits with unbeatable prices</p>
|
|
</div>
|
|
<div class="w-[23.25rem] pt-[2.125rem] pb-6 px-6 text-center bg-white/15 border border-white">
|
|
<img class="mx-auto" src="./assets/images/benefit2.svg" alt="benefit">
|
|
<p class="text-white text-3xl leading-10 font-dm font-normal mt-[0.688rem]">Authentic & <br> Premium Brands</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-1">We've got the brands that are making waves on TikTok & marketplace</p>
|
|
</div>
|
|
<div class="w-[23.25rem] pt-[2.125rem] pb-6 px-6 text-center bg-white/15 border border-white">
|
|
<img class="mx-auto" src="./assets/images/benefit3.svg" alt="benefit">
|
|
<p class="text-white text-3xl leading-10 font-dm font-normal mt-[0.688rem]">Comprehensive Platform</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-1">Seamless experience for all. From dropshipping to reselling</p>
|
|
</div>
|
|
<div class="w-[23.25rem] pt-[2.125rem] pb-6 px-6 text-center bg-white/15 border border-white">
|
|
<img class="mx-auto" src="./assets/images/benefit4.svg" alt="benefit">
|
|
<p class="text-white text-3xl leading-10 font-dm font-normal mt-[0.688rem]">Community Based & Personalized Support</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-1">Join a vibrant community and get support every step of the way</p>
|
|
</div>
|
|
<div class="w-[23.25rem] pt-[2.125rem] pb-6 px-6 text-center bg-white/15 border border-white">
|
|
<img class="mx-auto" src="./assets/images/benefit5.svg" alt="benefit">
|
|
<p class="text-white text-3xl leading-10 font-dm font-normal mt-[0.688rem]">Get Exclusive Gift for Purchasing in Raena</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-1">Exclusive point, gift, product, voucher, even Umrah</p>
|
|
</div>
|
|
<div class="w-[23.25rem] pt-[2.125rem] pb-6 px-6 text-center bg-white/15 border border-white">
|
|
<img class="mx-auto" src="./assets/images/benefit6.svg" alt="benefit">
|
|
<p class="text-white text-3xl leading-10 font-dm font-normal mt-[0.688rem]">Free Delivery <br> Services</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-1">Get free shipping for every products that you purchase</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end sub-section-4 section-3 -->
|
|
|
|
<!-- sub-section-5 section-3 -->
|
|
<div class="mt-28">
|
|
<div class="w-[75%] flex items-center gap-16 mx-auto">
|
|
<img class="w-[22.5rem]" src="./assets/images/phone.svg" alt="phone">
|
|
<div>
|
|
<h3 class="text-white text-[3.25rem] leading-[4.5rem] font-dm font-normal">
|
|
Raena
|
|
<span class="text-purple2">Highlights</span>
|
|
</h3>
|
|
<div class="flex items-center gap-4.5 mt-5">
|
|
<img src="./assets/images/highlight1.svg" alt="highlight">
|
|
<div>
|
|
<p class="text-purple2 text-3xl leading-10 font-dm font-normal">Easy Start</p>
|
|
<p class="text-white text-lg leading-8 font-ms font-medium">Begin your beauty business journey around the world!</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4.5 mt-5">
|
|
<img src="./assets/images/highlight2.svg" alt="highlight">
|
|
<div>
|
|
<p class="text-purple2 text-3xl leading-10 font-dm font-normal">Exclusive Discounts & Rewards</p>
|
|
<p class="text-white text-lg leading-8 font-ms font-medium">Enjoy discount, earn point, and win reward as you grow.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4.5 mt-5">
|
|
<img src="./assets/images/highlight3.svg" alt="highlight">
|
|
<div>
|
|
<p class="text-purple2 text-3xl leading-10 font-dm font-normal">Top-Notch Logistics</p>
|
|
<p class="text-white text-lg leading-8 font-ms font-medium">We ensure timely delivery with free delivery services.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4.5 mt-5">
|
|
<img src="./assets/images/highlight4.svg" alt="highlight">
|
|
<div>
|
|
<p class="text-purple2 text-3xl leading-10 font-dm font-normal">Learning & Growth</p>
|
|
<p class="text-white text-lg leading-8 font-ms font-medium">Video tutorials, reseller guide, and insights to boost your sales.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-[6.625rem]">
|
|
<p class="text-white text-5.5 leading-7 font-ms font-medium text-center">PROUDLY FEATURED ON :</p>
|
|
<div class="flex justify-center items-center gap-9 mt-6">
|
|
<img src="./assets/images/feature1.svg" alt="feature">
|
|
<img src="./assets/images/feature2.svg" alt="feature">
|
|
<img src="./assets/images/feature3.svg" alt="feature">
|
|
</div>
|
|
<p class="text-white text-3xl leading-10 font-dm font-normal text-center italic">
|
|
-Recognized
|
|
<span class="text-purple2">Globally</span>, Serving Spread Throughout
|
|
<span class="text-purple2">Indonesia-</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-[5.625rem]">
|
|
<h3 class="text-white text-[3.25rem] leading-[4.5rem] font-dm font-normal">
|
|
Raena by the
|
|
<span class="text-purple2">Numbers</span>
|
|
</h3>
|
|
<div class="mt-5 border-l border-t border-white">
|
|
<div class="flex">
|
|
<div class="w-1/3 text-center px-9 pt-14 pb-[4.75rem] border-b border-r border-white">
|
|
<p class="text-white text-[5.25rem] leading-[7.25rem] font-dm font-normal">300K+</p>
|
|
<p class="text-white text-10 leading-12 font-dm font-normal">Active Resellers</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-1">Join our Community today!</p>
|
|
</div>
|
|
<div class="w-1/3 text-center px-9 pt-14 pb-[4.75rem] border-b border-r border-white">
|
|
<p class="text-white text-[5.25rem] leading-[7.25rem] font-dm font-normal">2M+</p>
|
|
<p class="text-white text-10 leading-12 font-dm font-normal">Average Revenue</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-1">Resellers average revenue</p>
|
|
</div>
|
|
<div class="w-1/3 text-center px-9 pt-14 pb-[4.75rem] border-b border-r border-white">
|
|
<p class="text-white text-[5.25rem] leading-[7.25rem] font-dm font-normal">600+</p>
|
|
<p class="text-white text-10 leading-12 font-dm font-normal">Premium Brands</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-1">The best wholesale supplier</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="w-1/3 text-center px-9 pt-14 pb-[4.75rem] border-b border-r border-white">
|
|
<p class="text-white text-[5.25rem] leading-[7.25rem] font-dm font-normal">6K+</p>
|
|
<p class="text-white text-10 leading-12 font-dm font-normal">Beauty Products</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-1">At low price with exciting discount!</p>
|
|
</div>
|
|
<div class="w-1/3 text-center px-9 pt-14 pb-[4.75rem] border-b border-r border-white">
|
|
<p class="text-white text-[5.25rem] leading-[7.25rem] font-dm font-normal">100K+</p>
|
|
<p class="text-white text-10 leading-12 font-dm font-normal">App Downloads</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-1">Your platform for Reseller Business</p>
|
|
</div>
|
|
<div class="w-1/3 text-center px-9 pt-14 pb-[4.75rem] border-b border-r border-white">
|
|
<p class="text-white text-[5.25rem] leading-[7.25rem] font-dm font-normal">5⭐</p>
|
|
<p class="text-white text-10 leading-12 font-dm font-normal">App Store Rating</p>
|
|
<p class="text-white text-lg leading-5.5 font-ms font-normal mt-1">A perfect App with high rating</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end sub-section-5 section-3 -->
|
|
</div>
|
|
</section>
|
|
<!-- end section-3 star beauty business -->
|
|
|
|
<!-- section-4 star beauty business -->
|
|
<section class="pt-12 pb-[11.625rem]" style="background: linear-gradient(180deg, #F2E8FF 0%, #F8F3FF 0.01%, #F1DBFF 100%);">
|
|
<div class="container mx-auto">
|
|
<!-- sub-section-1 section-4 -->
|
|
<div>
|
|
<div class="w-3/5 ml-auto">
|
|
<h3 class="text-black text-20 leading-25 font-dm font-normal text-right">
|
|
Voices from Our
|
|
<br>
|
|
<span class="text-purple2">Community</span>
|
|
</h3>
|
|
<p class="text-black text-5.5 leading-8 font-ms font-medium mt-2.5 text-right">Hear it directly from our passionate customers, resellers and dropshippers! Their stories are a testament to Raena's dedication and commitment.</p>
|
|
</div>
|
|
<div class="flex gap-7.5 mt-[6.25rem]">
|
|
<div class="relative w-1/3 pt-[5.625rem] pb-[2.875rem] px-7 text-center bg-white">
|
|
<p class="text-black text-3xl leading-10 font-dm font-normal">Febby, 29th</p>
|
|
<p class="text-black text-lg leading-5.5 font-ms font-normal mt-1.5">Mother & Entrepreneur,
|
|
<br>Starting February 2020
|
|
<br>Income - IDR 8,000,000/month</p>
|
|
<div class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 max-w-[7.5rem]">
|
|
<img src="./assets/images/customer1.svg" alt="customer">
|
|
</div>
|
|
</div>
|
|
<div class="relative w-1/3 pt-[5.625rem] pb-[2.875rem] px-7 text-center bg-white">
|
|
<p class="text-black text-3xl leading-10 font-dm font-normal">Jessica, 27th</p>
|
|
<p class="text-black text-lg leading-5.5 font-ms font-normal mt-1.5">Business Owner,
|
|
<br>Starting December 2019
|
|
<br> Income - IDR 23,000,000/month</p>
|
|
<div class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 max-w-[7.5rem]">
|
|
<img src="./assets/images/customer2.svg" alt="customer">
|
|
</div>
|
|
</div>
|
|
<div class="relative w-1/3 pt-[5.625rem] pb-[2.875rem] px-7 text-center bg-white">
|
|
<p class="text-black text-3xl leading-10 font-dm font-normal">Diana, 28th</p>
|
|
<p class="text-black text-lg leading-5.5 font-ms font-normal mt-1.5">Marketing Executive,
|
|
<br> Starting January 2020
|
|
<br> Income - IDR 21,000,000/month</p>
|
|
<div class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 max-w-[7.5rem]">
|
|
<img src="./assets/images/customer3.svg" alt="customer">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4.5 mt-12">
|
|
<div class="bg-black/70 w-1/4 h-[11.25rem] p-4 flex justify-center items-center rounded-[0.875rem] bg-center bg-cover" style="background-image: url(./assets/images/user-bg1.svg);">
|
|
<p class="text-white text-[1.75rem] leading-9 font-dm font-normal">Diana, 28th</p>
|
|
</div>
|
|
<div class="bg-black/70 w-1/4 h-[11.25rem] p-4 flex justify-center items-center rounded-[0.875rem] bg-center bg-cover" style="background-image: url(./assets/images/user-bg2.svg);">
|
|
<p class="text-white text-[1.75rem] leading-9 font-dm font-normal">Explore Our Catalog</p>
|
|
</div>
|
|
<div class="bg-black/70 w-1/4 h-[11.25rem] p-4 flex justify-center items-center rounded-[0.875rem] bg-center bg-cover" style="background-image: url(./assets/images/user-bg1.svg);">
|
|
<p class="text-white text-[1.75rem] leading-9 font-dm font-normal">Buy Starter Pack</p>
|
|
</div>
|
|
<div class="bg-black/70 w-1/4 h-[11.25rem] p-4 flex justify-center items-center rounded-[0.875rem] bg-center bg-cover" style="background-image: url(./assets/images/user-bg2.svg);">
|
|
<p class="text-white text-[1.75rem] leading-9 font-dm font-normal">Download RAENA</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end sub-section-1 section-4 -->
|
|
|
|
<!-- sub-section-2 section-4 -->
|
|
<div class="mt-[7.188rem]">
|
|
<h3 class="text-black text-20 leading-25 font-dm font-normal text-center">
|
|
Stay
|
|
<span class="text-purple2">Connected!</span>
|
|
</h3>
|
|
<p class="text-black text-5.5 leading-8 font-ms font-medium mt-2.5 text-center">Follow us to get more insight!</p>
|
|
|
|
<div class="flex gap-x-8 mt-12">
|
|
<div class="w-1/2 flex justify-center items-center px-7.5 py-10 rounded-[1.25rem]" style="background: linear-gradient(180deg, #F2E8FF 0%, #F8F3FF 0.01%, #F1DBFF 100%); box-shadow: 0px 4px 20px 0px #9874FF4D;">
|
|
<div class="max-w-[10.813rem]">
|
|
<img src="./assets/images/insta-3d.svg" alt="social">
|
|
</div>
|
|
<div>
|
|
<p class="text-black text-5.5 leading-7 font-ms font-medium">INSTAGRAM :</p>
|
|
<a href="#" class="text-black text-[3.125rem] leading-[4.25rem] font-dm font-normal mt-3">@raena.official</a>
|
|
</div>
|
|
</div>
|
|
<div class="w-1/2 flex justify-center items-center px-7.5 py-10 rounded-[1.25rem]" style="background: linear-gradient(180deg, #F2E8FF 0%, #F8F3FF 0.01%, #F1DBFF 100%); box-shadow: 0px 4px 20px 0px #9874FF4D;">
|
|
<div class="max-w-[10.813rem]">
|
|
<img src="./assets/images/tiktok-3d.svg" alt="social">
|
|
</div>
|
|
<div>
|
|
<p class="text-black text-5.5 leading-7 font-ms font-medium">TIK TOK :</p>
|
|
<a href="#" class="text-black text-[3.125rem] leading-[4.25rem] font-dm font-normal mt-3">raenabeauty</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-center mt-8">
|
|
<div class="w-[40%] flex justify-center items-center px-7.5 py-10 rounded-[1.25rem]" style="background: linear-gradient(180deg, #F2E8FF 0%, #F8F3FF 0.01%, #F1DBFF 100%); box-shadow: 0px 4px 20px 0px #9874FF4D;">
|
|
<div class="max-w-[10.813rem]">
|
|
<img src="./assets/images/linkedin-3d.svg" alt="social">
|
|
</div>
|
|
<div>
|
|
<p class="text-black text-5.5 leading-7 font-ms font-medium">LINKED IN :</p>
|
|
<a href="#" class="text-black text-[3.125rem] leading-[4.25rem] font-dm font-normal mt-3">RAENA</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end sub-section-2 section-4 -->
|
|
</div>
|
|
</section>
|
|
<!-- end section-4 star beauty business -->
|
|
</body>
|
|
</html>
|