tailwind setup, header, home section discover section
This commit is contained in:
Ranjan
commit
a6da3dad71
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 642 KiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M15.875 2.8125H13.4928L12.3215 1.05594C12.2587 0.96188 12.1737 0.884753 12.0741 0.831388C11.9744 0.778023 11.8631 0.750068 11.75 0.75H6.25C6.13693 0.750068 6.02562 0.778023 5.92594 0.831388C5.82625 0.884753 5.74127 0.96188 5.67852 1.05594L4.50633 2.8125H2.125C1.57799 2.8125 1.05339 3.0298 0.666592 3.41659C0.279799 3.80339 0.0625 4.32799 0.0625 4.875V14.5C0.0625 15.047 0.279799 15.5716 0.666592 15.9584C1.05339 16.3452 1.57799 16.5625 2.125 16.5625H15.875C16.422 16.5625 16.9466 16.3452 17.3334 15.9584C17.7202 15.5716 17.9375 15.047 17.9375 14.5V4.875C17.9375 4.32799 17.7202 3.80339 17.3334 3.41659C16.9466 3.0298 16.422 2.8125 15.875 2.8125ZM16.5625 14.5C16.5625 14.6823 16.4901 14.8572 16.3611 14.9861C16.2322 15.1151 16.0573 15.1875 15.875 15.1875H2.125C1.94266 15.1875 1.7678 15.1151 1.63886 14.9861C1.50993 14.8572 1.4375 14.6823 1.4375 14.5V4.875C1.4375 4.69266 1.50993 4.5178 1.63886 4.38886C1.7678 4.25993 1.94266 4.1875 2.125 4.1875H4.875C4.98822 4.18757 5.0997 4.15969 5.19954 4.10632C5.29939 4.05294 5.38451 3.97574 5.44734 3.88156L6.61781 2.125H11.3813L12.5527 3.88156C12.6155 3.97574 12.7006 4.05294 12.8005 4.10632C12.9003 4.15969 13.0118 4.18757 13.125 4.1875H15.875C16.0573 4.1875 16.2322 4.25993 16.3611 4.38886C16.4901 4.5178 16.5625 4.69266 16.5625 4.875V14.5ZM9 5.5625C8.25214 5.5625 7.52107 5.78427 6.89925 6.19976C6.27743 6.61524 5.79277 7.20579 5.50658 7.89673C5.22039 8.58766 5.14551 9.34794 5.29141 10.0814C5.43731 10.8149 5.79743 11.4887 6.32625 12.0175C6.85507 12.5463 7.52882 12.9064 8.26231 13.0523C8.9958 13.1982 9.75609 13.1234 10.447 12.8372C11.138 12.551 11.7285 12.0663 12.144 11.4445C12.5595 10.8227 12.7812 10.0916 12.7812 9.34375C12.7801 8.34125 12.3814 7.38013 11.6725 6.67126C10.9636 5.96238 10.0025 5.56364 9 5.5625ZM9 11.75C8.52409 11.75 8.05886 11.6089 7.66316 11.3445C7.26745 11.0801 6.95904 10.7043 6.77691 10.2646C6.59479 9.8249 6.54714 9.34108 6.63999 8.87431C6.73283 8.40755 6.962 7.97879 7.29852 7.64227C7.63504 7.30575 8.0638 7.07658 8.53056 6.98374C8.99733 6.89089 9.48115 6.93854 9.92083 7.12066C10.3605 7.30279 10.7363 7.6112 11.0007 8.00691C11.2651 8.40261 11.4062 8.86784 11.4062 9.34375C11.4062 9.98193 11.1527 10.594 10.7015 11.0452C10.2502 11.4965 9.63818 11.75 9 11.75Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 106 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 51 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: 66 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 29 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 497 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 27 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 351 KiB |
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg width="110" height="23" viewBox="0 0 110 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12.6537 6.61774C12.1373 3.00303 9.03902 0.291992 5.42431 0.291992H0.64772C0.518623 0.291992 0.389526 0.421089 0.389526 0.550186V3.13212C0.389526 3.26122 0.518623 3.39032 0.64772 3.39032H5.42431C7.36076 3.39032 9.03902 4.55219 9.55541 6.35955C10.0718 8.03781 9.6845 9.84516 8.39353 11.007C7.48986 11.6525 6.32798 12.0398 5.29521 12.0398H0.64772C0.518623 12.0398 0.389526 12.1689 0.389526 12.298V14.8799C0.389526 15.009 0.518623 15.1381 0.64772 15.1381H4.26243C4.26243 15.1381 4.39153 15.1381 4.39153 15.2672L9.42631 21.8512L9.55541 21.9803H12.9119C13.041 21.9803 13.1701 21.8512 13.041 21.7221L8.00624 15.1381C7.87715 15.009 8.00624 14.8799 8.13534 14.8799C11.1046 13.3308 13.041 10.1034 12.6537 6.61774Z" fill="#FFEADE"/>
|
||||||
|
<path d="M2.96923 10.6193H3.22742V4.55176H2.96923C1.29097 4.55176 0 5.97182 0 7.65008C0 9.32834 1.29097 10.6193 2.96923 10.6193Z" fill="#FFEADE"/>
|
||||||
|
<path d="M80.2982 13.9763L68.5504 0.162923C68.4213 0.033826 68.2922 0.033826 68.2922 0.29202V21.593C68.2922 21.7221 68.4213 21.8512 68.5504 21.8512H71.1324C71.2615 21.8512 71.3906 21.7221 71.3906 21.593V8.29603C71.3906 8.16693 71.6488 8.03783 71.7778 8.16693L83.2675 21.9803C83.3966 22.1094 83.6548 21.9803 83.6548 21.8512V0.550213C83.6548 0.421117 83.5257 0.29202 83.3966 0.29202H80.8146C80.6855 0.29202 80.5564 0.421117 80.5564 0.550213V13.8472C80.6855 13.9763 80.4273 14.1054 80.2982 13.9763Z" fill="#FFEADE"/>
|
||||||
|
<path d="M49.7036 12.0402H57.1912C57.3203 12.0402 57.4494 11.9111 57.4494 11.782V9.07096C57.4494 8.94186 57.3203 8.81277 57.1912 8.81277H49.7036C49.5745 8.81277 49.4454 8.68367 49.4454 8.55457V3.3907C49.4454 3.2616 49.5745 3.13251 49.7036 3.13251H58.8695C58.9986 3.13251 59.1277 3.00341 59.1277 2.87431V0.292373C59.1277 0.163277 58.9986 0.0341797 58.8695 0.0341797H46.7344C46.6053 0.0341797 46.4762 0.163277 46.4762 0.292373V21.3352C46.4762 21.4643 46.6053 21.5934 46.7344 21.5934H59.3859C59.515 21.5934 59.6441 21.4643 59.6441 21.3352V18.7532C59.6441 18.6241 59.515 18.495 59.3859 18.495H49.7036C49.5745 18.495 49.4454 18.3659 49.4454 18.2368V11.782C49.4454 12.0402 49.5745 12.0402 49.7036 12.0402Z" fill="#FFEADE"/>
|
||||||
|
<path d="M20.5299 21.8525H23.241C23.3701 21.8525 23.3701 21.8525 23.3701 21.7234L25.3065 16.9468C25.3065 16.8177 25.4356 16.8177 25.4356 16.8177H32.5359C32.665 16.8177 32.665 16.8177 32.665 16.9468L34.6015 21.7234C34.6015 21.8525 34.7306 21.8525 34.7306 21.8525H37.4416C37.5707 21.8525 37.6998 21.7234 37.5707 21.5943L29.3085 0.164205C29.1794 0.0351086 29.0503 0.0351086 28.9212 0.164205L20.2717 21.5943C20.2717 21.5943 20.4008 21.8525 20.5299 21.8525ZM29.3085 8.03911L31.5032 13.4612C31.5032 13.5903 31.5032 13.7194 31.3741 13.7194H26.9848C26.8557 13.7194 26.7266 13.5903 26.8557 13.4612L29.0503 8.03911C29.0503 7.91002 29.3085 7.91002 29.3085 8.03911Z" fill="#FFEADE"/>
|
||||||
|
<path d="M100.826 0.164205L92.1768 21.5943C92.1768 21.7234 92.1768 21.8525 92.3059 21.8525H95.0169C95.146 21.8525 95.146 21.8525 95.146 21.7234L97.0824 16.9468C97.0824 16.8177 97.2115 16.8177 97.2115 16.8177H104.57C104.699 16.8177 104.699 16.8177 104.699 16.9468L106.636 21.7234C106.636 21.8525 106.765 21.8525 106.765 21.8525H109.476C109.605 21.8525 109.734 21.7234 109.605 21.5943L101.214 0.164205C101.214 0.0351086 100.955 0.0351086 100.826 0.164205ZM101.214 8.03911L103.408 13.4612C103.408 13.5903 103.408 13.7194 103.279 13.7194H98.8898C98.7607 13.7194 98.6316 13.5903 98.7607 13.4612L100.955 8.03911C100.955 7.91002 101.084 7.91002 101.214 8.03911Z" fill="#FFEADE"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 296 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19.5306 18.4696L14.8365 13.7765C16.1971 12.1431 16.8755 10.048 16.7307 7.92715C16.5859 5.80629 15.629 3.82289 14.0591 2.38956C12.4892 0.956234 10.4271 0.183327 8.30188 0.231627C6.17663 0.279927 4.15181 1.14571 2.64864 2.64888C1.14547 4.15205 0.279683 6.17687 0.231383 8.30213C0.183083 10.4274 0.955989 12.4894 2.38932 14.0593C3.82265 15.6293 5.80604 16.5861 7.92691 16.7309C10.0478 16.8757 12.1428 16.1973 13.7762 14.8368L18.4693 19.5308C18.539 19.6005 18.6218 19.6558 18.7128 19.6935C18.8038 19.7312 18.9014 19.7506 19 19.7506C19.0985 19.7506 19.1961 19.7312 19.2871 19.6935C19.3782 19.6558 19.4609 19.6005 19.5306 19.5308C19.6003 19.4612 19.6556 19.3784 19.6933 19.2874C19.731 19.1963 19.7504 19.0988 19.7504 19.0002C19.7504 18.9017 19.731 18.8041 19.6933 18.713C19.6556 18.622 19.6003 18.5393 19.5306 18.4696ZM1.74997 8.50021C1.74997 7.16519 2.14585 5.86015 2.88755 4.75011C3.62925 3.64008 4.68346 2.77492 5.91686 2.26403C7.15026 1.75314 8.50746 1.61946 9.81683 1.87991C11.1262 2.14036 12.3289 2.78324 13.2729 3.72724C14.2169 4.67125 14.8598 5.87398 15.1203 7.18335C15.3807 8.49273 15.2471 9.84993 14.7362 11.0833C14.2253 12.3167 13.3601 13.3709 12.2501 14.1126C11.14 14.8543 9.83499 15.2502 8.49997 15.2502C6.71037 15.2482 4.99463 14.5364 3.72919 13.271C2.46375 12.0056 1.75196 10.2898 1.74997 8.50021Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 255 KiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<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="#9874FF"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 975 B |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<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"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 992 B |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="17" height="32" viewBox="0 0 17 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M16.2228 16.9726L2.47281 30.7226C2.34506 30.8504 2.1934 30.9517 2.02648 31.0208C1.85957 31.09 1.68067 31.1256 1.5 31.1256C1.31933 31.1256 1.14043 31.09 0.973519 31.0208C0.806603 30.9517 0.65494 30.8504 0.527188 30.7226C0.399437 30.5949 0.298099 30.4432 0.22896 30.2763C0.159822 30.1094 0.124237 29.9305 0.124237 29.7498C0.124237 29.5691 0.159822 29.3902 0.22896 29.2233C0.298099 29.0564 0.399437 28.9047 0.527188 28.777L13.3061 15.9998L0.527188 3.2226C0.269183 2.96459 0.124237 2.61466 0.124237 2.24979C0.124237 1.88491 0.269183 1.53498 0.527188 1.27698C0.785194 1.01897 1.13513 0.874023 1.5 0.874023C1.86488 0.874023 2.21481 1.01897 2.47281 1.27698L16.2228 15.027C16.3507 15.1547 16.4521 15.3063 16.5213 15.4732C16.5905 15.6402 16.6261 15.8191 16.6261 15.9998C16.6261 16.1805 16.5905 16.3594 16.5213 16.5263C16.4521 16.6933 16.3507 16.8449 16.2228 16.9726Z" fill="#9874FF"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 988 B |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="17" height="32" viewBox="0 0 17 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M16.2228 16.9726L2.47281 30.7226C2.34506 30.8504 2.1934 30.9517 2.02648 31.0208C1.85957 31.09 1.68067 31.1256 1.5 31.1256C1.31933 31.1256 1.14043 31.09 0.973519 31.0208C0.806603 30.9517 0.65494 30.8504 0.527188 30.7226C0.399437 30.5949 0.298099 30.4432 0.22896 30.2763C0.159822 30.1094 0.124237 29.9305 0.124237 29.7498C0.124237 29.5691 0.159822 29.3902 0.22896 29.2233C0.298099 29.0564 0.399437 28.9047 0.527188 28.777L13.3061 15.9998L0.527188 3.2226C0.269183 2.96459 0.124237 2.61466 0.124237 2.24979C0.124237 1.88491 0.269183 1.53498 0.527188 1.27698C0.785194 1.01897 1.13513 0.874023 1.5 0.874023C1.86488 0.874023 2.21481 1.01897 2.47281 1.27698L16.2228 15.027C16.3507 15.1547 16.4521 15.3063 16.5213 15.4732C16.5905 15.6402 16.6261 15.8191 16.6261 15.9998C16.6261 16.1805 16.5905 16.3594 16.5213 16.5263C16.4521 16.6933 16.3507 16.8449 16.2228 16.9726Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 986 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M21.75 9C21.7504 8.93027 21.7409 8.86083 21.7219 8.79375L20.3766 4.0875C20.2861 3.77523 20.0971 3.50059 19.8378 3.30459C19.5784 3.10858 19.2626 3.00174 18.9375 3H5.0625C4.73741 3.00174 4.4216 3.10858 4.16223 3.30459C3.90287 3.50059 3.71386 3.77523 3.62344 4.0875L2.27906 8.79375C2.2597 8.86079 2.24991 8.93022 2.25 9V10.5C2.25 11.0822 2.38554 11.6563 2.6459 12.1771C2.90625 12.6978 3.28427 13.1507 3.75 13.5V19.5C3.75 19.8978 3.90804 20.2794 4.18934 20.5607C4.47064 20.842 4.85218 21 5.25 21H18.75C19.1478 21 19.5294 20.842 19.8107 20.5607C20.092 20.2794 20.25 19.8978 20.25 19.5V13.5C20.7157 13.1507 21.0937 12.6978 21.3541 12.1771C21.6145 11.6563 21.75 11.0822 21.75 10.5V9ZM5.0625 4.5H18.9375L20.0081 8.25H3.99469L5.0625 4.5ZM9.75 9.75H14.25V10.5C14.25 11.0967 14.0129 11.669 13.591 12.091C13.169 12.5129 12.5967 12.75 12 12.75C11.4033 12.75 10.831 12.5129 10.409 12.091C9.98705 11.669 9.75 11.0967 9.75 10.5V9.75ZM8.25 9.75V10.5C8.25 11.0967 8.01295 11.669 7.59099 12.091C7.16903 12.5129 6.59674 12.75 6 12.75C5.40326 12.75 4.83097 12.5129 4.40901 12.091C3.98705 11.669 3.75 11.0967 3.75 10.5V9.75H8.25ZM18.75 19.5H5.25V14.175C5.4969 14.2248 5.74813 14.2499 6 14.25C6.58217 14.25 7.15634 14.1145 7.67705 13.8541C8.19776 13.5937 8.6507 13.2157 9 12.75C9.3493 13.2157 9.80224 13.5937 10.323 13.8541C10.8437 14.1145 11.4178 14.25 12 14.25C12.5822 14.25 13.1563 14.1145 13.6771 13.8541C14.1978 13.5937 14.6507 13.2157 15 12.75C15.3493 13.2157 15.8022 13.5937 16.3229 13.8541C16.8437 14.1145 17.4178 14.25 18 14.25C18.2519 14.2499 18.5031 14.2248 18.75 14.175V19.5ZM18 12.75C17.4033 12.75 16.831 12.5129 16.409 12.091C15.9871 11.669 15.75 11.0967 15.75 10.5V9.75H20.25V10.5C20.25 11.0967 20.0129 11.669 19.591 12.091C19.169 12.5129 18.5967 12.75 18 12.75Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 296 KiB |
|
|
@ -0,0 +1,181 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
fontFamily: {
|
||||||
|
ms: ["Montserrat", "sans-serif"],
|
||||||
|
dm: ["DM Serif Display", "serif"]
|
||||||
|
},
|
||||||
|
screens: {
|
||||||
|
sm: '480px',
|
||||||
|
md: '768px',
|
||||||
|
lg: '976px',
|
||||||
|
xl: '1200px',
|
||||||
|
},
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
purple1: '#9773fa',
|
||||||
|
purple2: '#9874FF',
|
||||||
|
grey1: '#DADADA',
|
||||||
|
grey2: '#D7D7D7',
|
||||||
|
grey3: '#828282',
|
||||||
|
grey4: '#E8E8E8',
|
||||||
|
pink1: '#E34FA5'
|
||||||
|
},
|
||||||
|
fontSize: {
|
||||||
|
'5.5': '1.375rem', // 22px
|
||||||
|
'10': '2.5rem',
|
||||||
|
'20': '5rem'
|
||||||
|
},
|
||||||
|
spacing: {
|
||||||
|
'2.25': '0.563rem',
|
||||||
|
'3.25': '0.813rem',
|
||||||
|
'4.5': '1.125rem', // 18px
|
||||||
|
'5.5': '1.375rem', // 22px
|
||||||
|
'6.5': '1.625rem', // 26px
|
||||||
|
'24': '6rem', // 96px
|
||||||
|
'27.5': '6.875rem',
|
||||||
|
'30': '7.5rem',
|
||||||
|
'71.5': '17.875rem', // 296px
|
||||||
|
'76': '19rem'
|
||||||
|
},
|
||||||
|
lineHeight: {
|
||||||
|
'5.5': '1.375rem', // 22px
|
||||||
|
'12': '3rem',
|
||||||
|
'20': '5rem',
|
||||||
|
'25': '6.25rem'
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
'4.5': '1.125rem' // 18px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue