2024-03-07 14:35:32 +00:00
<!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 >
2024-03-08 09:06:59 +00:00
< script src = "./tailwind.config.js" > < / script >
2024-03-07 14:35:32 +00:00
< title > MVP 1< / title >
< / head >
< body >
2024-03-08 09:05:29 +00:00
<!-- header -->
2024-03-07 14:35:32 +00:00
< 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 >
2024-03-08 09:05:29 +00:00
<!-- end header -->
<!-- section - 1 homepage banner -->
2024-03-07 14:35:32 +00:00
< 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 >
2024-03-08 09:05:29 +00:00
<!-- end section - 1 homepage banner -->
<!-- section - 2 discover the latest -->
2024-03-07 14:35:32 +00:00
< section class = "pt-40 pb-64" style = "background: linear-gradient(180deg, #F2E8FF 0%, #F8F3FF 0.01%, #F1DBFF 100%);" >
2024-03-08 09:05:29 +00:00
<!-- sub - section - 1 section - 2 -->
2024-03-07 14:35:32 +00:00
< 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 >
2024-03-08 09:05:29 +00:00
<!-- end sub - section - 1 section - 2 -->
<!-- sub - section - 2 section - 2 -->
2024-03-07 14:35:32 +00:00
< 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" >
2024-03-08 09:05:29 +00:00
< button class = "opacity-20" >
2024-03-07 14:35:32 +00:00
< 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 >
2024-03-08 09:05:29 +00:00
<!-- 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 >
2024-03-07 14:35:32 +00:00
< / section >
2024-03-08 09:05:29 +00:00
<!-- end section - 3 star beauty business -->
2024-03-07 14:35:32 +00:00
< / body >
< / html >
