Beauty Business section ui with comments
This commit is contained in:
Ranjan
parent
a6da3dad71
commit
2b91820b3e
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 295 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 324 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 306 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 323 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 301 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 313 KiB |
|
|
@ -1,3 +1,3 @@
|
||||||
<svg width="17" height="32" viewBox="0 0 17 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="17" height="32" viewBox="0 0 17 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M16.4728 28.777C16.6005 28.9047 16.7019 29.0564 16.771 29.2233C16.8402 29.3902 16.8757 29.5691 16.8757 29.7498C16.8757 29.9305 16.8402 30.1094 16.771 30.2763C16.7019 30.4432 16.6005 30.5949 16.4728 30.7226C16.345 30.8504 16.1934 30.9517 16.0265 31.0208C15.8596 31.09 15.6807 31.1256 15.5 31.1256C15.3193 31.1256 15.1404 31.09 14.9735 31.0208C14.8066 30.9517 14.6549 30.8504 14.5272 30.7226L0.77717 16.9726C0.649327 16.8449 0.54791 16.6933 0.478714 16.5263C0.409518 16.3594 0.373901 16.1805 0.373901 15.9998C0.373901 15.8191 0.409518 15.6402 0.478714 15.4732C0.54791 15.3063 0.649327 15.1547 0.77717 15.027L14.5272 1.27698C14.7852 1.01897 15.1351 0.874023 15.5 0.874023C15.8649 0.874023 16.2148 1.01897 16.4728 1.27698C16.7308 1.53498 16.8757 1.88491 16.8757 2.24979C16.8757 2.61466 16.7308 2.96459 16.4728 3.2226L3.69389 15.9998L16.4728 28.777Z" fill="white" fill-opacity="0.2"/>
|
<path d="M16.4728 28.778C16.6005 28.9057 16.7019 29.0574 16.771 29.2243C16.8402 29.3912 16.8757 29.5701 16.8757 29.7508C16.8757 29.9314 16.8402 30.1103 16.771 30.2772C16.7019 30.4442 16.6005 30.5958 16.4728 30.7236C16.345 30.8513 16.1934 30.9527 16.0265 31.0218C15.8596 31.0909 15.6807 31.1265 15.5 31.1265C15.3193 31.1265 15.1404 31.0909 14.9735 31.0218C14.8066 30.9527 14.6549 30.8513 14.5272 30.7236L0.77717 16.9736C0.649327 16.8459 0.54791 16.6942 0.478714 16.5273C0.409518 16.3604 0.373901 16.1815 0.373901 16.0008C0.373901 15.8201 0.409518 15.6411 0.478714 15.4742C0.54791 15.3073 0.649327 15.1557 0.77717 15.028L14.5272 1.27795C14.7852 1.01995 15.1351 0.875 15.5 0.875C15.8649 0.875 16.2148 1.01995 16.4728 1.27795C16.7308 1.53596 16.8757 1.88589 16.8757 2.25076C16.8757 2.61564 16.7308 2.96557 16.4728 3.22358L3.69389 16.0008L16.4728 28.778Z" fill="white"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 992 B After Width: | Height: | Size: 969 B |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="114" height="114" viewBox="0 0 114 114" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M57 0C59.9843 52.2251 55.2094 53.4188 114 57C55.5079 60.5812 59.9843 61.4764 57 114C54.0157 61.7749 58.7906 60.5812 0 57C58.4921 53.4188 54.0157 52.5236 57 0Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 291 B |
139
index.html
139
index.html
|
|
@ -7,10 +7,11 @@
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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">
|
<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="https://cdn.tailwindcss.com/3.4.1"></script>
|
||||||
<script src="./tailwind.config.js"></script>
|
<script src="./tailwind-config.js"></script>
|
||||||
<title>MVP 1</title>
|
<title>MVP 1</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- header -->
|
||||||
<header class="bg-black">
|
<header class="bg-black">
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<nav class="flex items-center py-5.5">
|
<nav class="flex items-center py-5.5">
|
||||||
|
|
@ -27,6 +28,9 @@
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
<!-- end header -->
|
||||||
|
|
||||||
|
<!-- section-1 homepage banner -->
|
||||||
<section class="relative bg-black h-full">
|
<section class="relative bg-black h-full">
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<div class="flex w-[62%]">
|
<div class="flex w-[62%]">
|
||||||
|
|
@ -48,7 +52,6 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute top-0 right-0 w-[38%] h-full">
|
<div class="absolute top-0 right-0 w-[38%] h-full">
|
||||||
|
|
@ -67,7 +70,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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%);">
|
<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">
|
<div class="container mx-auto">
|
||||||
<h2 class="text-black text-20 leading-25 font-dm font-normal text-center">
|
<h2 class="text-black text-20 leading-25 font-dm font-normal text-center">
|
||||||
Discover the
|
Discover the
|
||||||
|
|
@ -116,6 +123,9 @@
|
||||||
<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>
|
</div>
|
||||||
|
<!-- end sub-section-1 section-2 -->
|
||||||
|
|
||||||
|
<!-- sub-section-2 section-2 -->
|
||||||
<div class="container mx-auto mt-56">
|
<div class="container mx-auto mt-56">
|
||||||
<h2 class="text-black text-20 leading-25 font-dm font-normal text-center">
|
<h2 class="text-black text-20 leading-25 font-dm font-normal text-center">
|
||||||
Shop by the
|
Shop by the
|
||||||
|
|
@ -129,7 +139,7 @@
|
||||||
<img src="./assets/images/most-fav.svg" alt="most fav">
|
<img src="./assets/images/most-fav.svg" alt="most fav">
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute bottom-5 left-0 flex justify-between items-center w-full px-4">
|
<div class="absolute bottom-5 left-0 flex justify-between items-center w-full px-4">
|
||||||
<button>
|
<button class="opacity-20">
|
||||||
<img src="./assets/images/slide-left-white-icon.svg" alt="slide">
|
<img src="./assets/images/slide-left-white-icon.svg" alt="slide">
|
||||||
</button>
|
</button>
|
||||||
<div class="flex justify-center gap-x-5">
|
<div class="flex justify-center gap-x-5">
|
||||||
|
|
@ -176,6 +186,129 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- end sub-section-2 section-2 -->
|
||||||
</section>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -22,27 +22,31 @@ tailwind.config = {
|
||||||
},
|
},
|
||||||
fontSize: {
|
fontSize: {
|
||||||
'5.5': '1.375rem', // 22px
|
'5.5': '1.375rem', // 22px
|
||||||
'10': '2.5rem',
|
'10': '2.5rem', // 40px
|
||||||
'20': '5rem'
|
'16.25': '4.063rem', // 65px
|
||||||
|
'20': '5rem' // 80px
|
||||||
|
},
|
||||||
|
lineHeight: {
|
||||||
|
'3.5': '0.875rem', // 14px
|
||||||
|
'4.5': '1.125rem', // 18px
|
||||||
|
'5.5': '1.375rem', // 22px
|
||||||
|
'12': '3rem', // 48px
|
||||||
|
'20': '5rem', // 80px
|
||||||
|
'25': '6.25rem' // 100px
|
||||||
},
|
},
|
||||||
spacing: {
|
spacing: {
|
||||||
'2.25': '0.563rem',
|
'2.25': '0.563rem', // 9px
|
||||||
'3.25': '0.813rem',
|
'3.25': '0.813rem', // 13px
|
||||||
'4.5': '1.125rem', // 18px
|
'4.5': '1.125rem', // 18px
|
||||||
'5.5': '1.375rem', // 22px
|
'5.5': '1.375rem', // 22px
|
||||||
'6.5': '1.625rem', // 26px
|
'6.5': '1.625rem', // 26px
|
||||||
|
'7.5': '1.875rem', // 30px
|
||||||
'24': '6rem', // 96px
|
'24': '6rem', // 96px
|
||||||
'27.5': '6.875rem',
|
'27.5': '6.875rem', // 110px
|
||||||
'30': '7.5rem',
|
'30': '7.5rem', // 120px
|
||||||
'71.5': '17.875rem', // 296px
|
'71.5': '17.875rem', // 286px
|
||||||
'76': '19rem'
|
'76': '19rem'
|
||||||
},
|
},
|
||||||
lineHeight: {
|
|
||||||
'5.5': '1.375rem', // 22px
|
|
||||||
'12': '3rem',
|
|
||||||
'20': '5rem',
|
|
||||||
'25': '6.25rem'
|
|
||||||
},
|
|
||||||
borderRadius: {
|
borderRadius: {
|
||||||
'4.5': '1.125rem' // 18px
|
'4.5': '1.125rem' // 18px
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue