Merge pull request #2 from IMPHNEN/feat/simple-landing-page
Slicing simple landing page
This commit is contained in:
Maulana Sodiqin
@@ -0,0 +1,3 @@
|
||||
<svg width="47" height="62" viewBox="0 0 47 62" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.5 38.4999L9.19156 38.4166L8.5 38.4999ZM23.5 42.4999L24.0479 42.9301L23.5 42.4999ZM1.45141 0.804946C1.06764 0.831723 0.778242 1.16453 0.805019 1.5483L1.24135 7.80212C1.26813 8.18588 1.60094 8.47528 1.9847 8.4485C2.36847 8.42173 2.65787 8.08892 2.63109 7.70515L2.24324 2.1462L7.80219 1.75835C8.18595 1.73157 8.47535 1.39876 8.44858 1.015C8.4218 0.631233 8.08899 0.341836 7.70523 0.368611L1.45141 0.804946ZM44.8219 58.1179C44.6435 57.777 44.2226 57.6453 43.8818 57.8237C43.5409 58.002 43.4092 58.4229 43.5876 58.7638L44.8219 58.1179ZM39.979 53.323C40.2168 53.6254 40.6547 53.6778 40.9571 53.44C41.2596 53.2023 41.3119 52.7643 41.0742 52.4619L39.979 53.323ZM36.6126 47.4065C36.3439 47.1312 35.9029 47.126 35.6276 47.3947C35.3524 47.6635 35.3471 48.1045 35.6159 48.3797L36.6126 47.4065ZM30.8012 43.8589C31.0925 44.1102 31.5323 44.0779 31.7837 43.7866C32.035 43.4954 32.0026 43.0555 31.7114 42.8042L30.8012 43.8589ZM26.435 38.6311C26.1228 38.4063 25.6875 38.4771 25.4627 38.7893C25.2379 39.1015 25.3087 39.5368 25.6209 39.7616L26.435 38.6311ZM20.0706 36.2159C20.4077 36.4012 20.8312 36.2782 21.0166 35.9411C21.2019 35.604 21.0789 35.1804 20.7418 34.9951L20.0706 36.2159ZM14.4146 32.3979C14.0394 32.313 13.6664 32.5483 13.5814 32.9235C13.4965 33.2987 13.7318 33.6717 14.107 33.7566L14.4146 32.3979ZM9.34382 35.388C9.46205 35.0219 9.26113 34.6293 8.89505 34.5111C8.52897 34.3928 8.13636 34.5938 8.01813 34.9598L9.34382 35.388ZM8.36062 41.3331C8.46936 41.7021 8.85665 41.9131 9.22566 41.8044C9.59467 41.6957 9.80567 41.3084 9.69693 40.9394L8.36062 41.3331ZM12.2528 45.0931C11.9511 44.8544 11.513 44.9055 11.2743 45.2072C11.0357 45.5089 11.0867 45.9469 11.3884 46.1856L12.2528 45.0931ZM17.0187 47.5227C17.3975 47.4557 17.6503 47.0943 17.5833 46.7155C17.5163 46.3367 17.1549 46.0839 16.776 46.1509L17.0187 47.5227ZM21.1929 43.9203C20.9014 44.1714 20.8687 44.6112 21.1197 44.9027C21.3707 45.1942 21.8106 45.227 22.1021 44.9759L21.1929 43.9203ZM25.5435 39.9375C25.6453 39.5665 25.4271 39.1833 25.0561 39.0815C24.6851 38.9797 24.3019 39.1979 24.2001 39.5688L25.5435 39.9375ZM24.0968 33.7918C24.1836 34.1665 24.5578 34.4 24.9326 34.3132C25.3074 34.2264 25.5408 33.8522 25.454 33.4774L24.0968 33.7918ZM23.2992 27.5399C23.134 27.1924 22.7185 27.0447 22.371 27.2098C22.0236 27.375 21.8758 27.7905 22.041 28.138L23.2992 27.5399ZM19.0765 22.8124C19.2817 23.1378 19.7118 23.2353 20.0372 23.0302C20.3627 22.825 20.4602 22.3949 20.255 22.0695L19.0765 22.8124ZM16.713 16.9396C16.4827 16.6315 16.0462 16.5684 15.738 16.7988C15.4299 17.0291 15.3669 17.4656 15.5972 17.7738L16.713 16.9396ZM11.7675 12.9776C12.0165 13.2708 12.4561 13.3068 12.7493 13.0579C13.0426 12.8089 13.0786 12.3694 12.8297 12.0761L11.7675 12.9776ZM8.67476 7.44825C8.40998 7.16917 7.96909 7.15758 7.69002 7.42236C7.41094 7.68714 7.39935 8.12803 7.66413 8.4071L8.67476 7.44825ZM3.3149 4.07865C3.59572 4.34158 4.03652 4.32709 4.29945 4.04628C4.56239 3.76546 4.5479 3.32466 4.26708 3.06173L3.3149 4.07865ZM46.1653 61.2935C45.8476 60.2699 45.391 59.2055 44.8219 58.1179L43.5876 58.7638C44.1267 59.7941 44.5472 60.78 44.8347 61.7065L46.1653 61.2935ZM41.0742 52.4619C39.7433 50.7694 38.2336 49.0665 36.6126 47.4065L35.6159 48.3797C37.2071 50.0093 38.6831 51.6749 39.979 53.323L41.0742 52.4619ZM31.7114 42.8042C29.9811 41.3111 28.202 39.9036 26.435 38.6311L25.6209 39.7616C27.353 41.0089 29.1002 42.391 30.8012 43.8589L31.7114 42.8042ZM20.7418 34.9951C18.4611 33.7412 16.2968 32.824 14.4146 32.3979L14.107 33.7566C15.8134 34.143 17.8499 34.995 20.0706 36.2159L20.7418 34.9951ZM8.01813 34.9598C7.70205 35.9385 7.63559 37.1473 7.80843 38.5831L9.19156 38.4166C9.0331 37.1002 9.11052 36.1103 9.34382 35.388L8.01813 34.9598ZM7.80843 38.5831C7.92897 39.5845 8.1153 40.5006 8.36062 41.3331L9.69693 40.9394C9.47576 40.1888 9.30385 39.3495 9.19156 38.4166L7.80843 38.5831ZM11.3884 46.1856C13.025 47.4803 15.0176 47.8768 17.0187 47.5227L16.776 46.1509C15.1188 46.4441 13.5408 46.1121 12.2528 45.0931L11.3884 46.1856ZM22.1021 44.9759C22.7906 44.3829 23.4445 43.6986 24.0479 42.9301L22.9521 42.0698C22.4024 42.7699 21.8106 43.3884 21.1929 43.9203L22.1021 44.9759ZM24.0479 42.9301C24.7553 42.029 25.2456 41.0232 25.5435 39.9375L24.2001 39.5688C23.9482 40.4864 23.5385 41.3229 22.9521 42.0698L24.0479 42.9301ZM25.454 33.4774C25.0137 31.5767 24.2681 29.5782 23.2992 27.5399L22.041 28.138C22.9794 30.1121 23.685 32.0139 24.0968 33.7918L25.454 33.4774ZM20.255 22.0695C19.1723 20.352 17.978 18.6317 16.713 16.9396L15.5972 17.7738C16.8433 19.4405 18.0161 21.1303 19.0765 22.8124L20.255 22.0695ZM12.8297 12.0761C11.464 10.467 10.0656 8.91422 8.67476 7.44825L7.66413 8.4071C9.038 9.85515 10.4191 11.3889 11.7675 12.9776L12.8297 12.0761ZM4.26708 3.06173C3.47703 2.32198 2.70419 1.62396 1.95695 0.974187L1.04282 2.02544C1.77631 2.66325 2.53646 3.34977 3.3149 4.07865L4.26708 3.06173Z" fill="#81CBF8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="79" height="88" viewBox="0 0 79 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.00004 87.8788C0.5147 87.8788 0.121257 87.4853 0.121261 87C0.121265 86.5147 0.514715 86.1212 1.00006 86.1212L1.00004 87.8788ZM43.4999 69.5L44.1213 70.1214L43.4999 69.5ZM74.1915 0.677276C74.6459 0.506859 75.1525 0.737104 75.3229 1.19154L78.1 8.59705C78.2704 9.05149 78.0401 9.55803 77.5857 9.72845C77.1313 9.89887 76.6247 9.66862 76.4543 9.21418L73.9858 2.6315L67.4031 5.10001C66.9487 5.27042 66.4421 5.04018 66.2717 4.58574C66.1013 4.1313 66.3316 3.62475 66.786 3.45434L74.1915 0.677276ZM4.9001 86.026C5.38484 86.0017 5.79745 86.375 5.8217 86.8598C5.84595 87.3445 5.47266 87.7571 4.98792 87.7814L4.9001 86.026ZM12.9278 86.921C12.4495 87.0033 11.9951 86.6822 11.9128 86.2039C11.8306 85.7255 12.1517 85.2711 12.63 85.1889L12.9278 86.921ZM20.1617 83.3426C20.6234 83.1929 21.119 83.4458 21.2687 83.9075C21.4184 84.3691 21.1655 84.8648 20.7038 85.0145L20.1617 83.3426ZM28.1156 81.9688C27.682 82.187 27.1537 82.0124 26.9355 81.5789C26.7174 81.1453 26.8919 80.617 27.3255 80.3988L28.1156 81.9688ZM33.976 76.4152C34.3737 76.1371 34.9216 76.234 35.1998 76.6318C35.4779 77.0295 35.381 77.5774 34.9832 77.8556L33.976 76.4152ZM41.227 72.8711C40.8664 73.1959 40.3107 73.1668 39.9859 72.8061C39.6611 72.4455 39.6902 71.8898 40.0508 71.5651L41.227 72.8711ZM45.7562 65.3879C46.0375 64.9923 46.5861 64.8997 46.9816 65.181C47.3771 65.4623 47.4697 66.011 47.1885 66.4065L45.7562 65.3879ZM52.0891 58.2652C51.8619 58.6941 51.3301 58.8576 50.9012 58.6304C50.4723 58.4033 50.3087 57.8715 50.5359 57.4426L52.0891 58.2652ZM54.6326 49.0687C54.8345 48.6273 55.3559 48.4332 55.7973 48.6351C56.2386 48.837 56.4328 49.3584 56.2309 49.7998L54.6326 49.0687ZM59.9926 41.1685C59.8055 41.6163 59.2908 41.8277 58.843 41.6407C58.3952 41.4536 58.1837 40.9389 58.3708 40.4911L59.9926 41.1685ZM61.8824 31.8101C62.06 31.3584 62.5702 31.1363 63.0218 31.3139C63.4735 31.4915 63.6956 32.0017 63.518 32.4533L61.8824 31.8101ZM66.8965 23.6846C66.7245 24.1385 66.2172 24.367 65.7634 24.1951C65.3095 24.0232 65.0809 23.5159 65.2529 23.062L66.8965 23.6846ZM68.5503 14.2814C68.7204 13.8269 69.2268 13.5963 69.6814 13.7664C70.1359 13.9366 70.3665 14.443 70.1964 14.8975L68.5503 14.2814ZM73.5253 6.13925C73.3477 6.59092 72.8375 6.81308 72.3859 6.63546C71.9342 6.45784 71.712 5.94769 71.8897 5.49603L73.5253 6.13925ZM1.00006 86.1212C2.32119 86.1212 3.62073 86.09 4.9001 86.026L4.98792 87.7814C3.67776 87.8469 2.34888 87.8788 1.00004 87.8788L1.00006 86.1212ZM12.63 85.1889C15.2148 84.7445 17.7207 84.1341 20.1617 83.3426L20.7038 85.0145C18.1788 85.8332 15.591 86.4632 12.9278 86.921L12.63 85.1889ZM27.3255 80.3988C29.583 79.2627 31.7958 77.9399 33.976 76.4152L34.9832 77.8556C32.7362 79.427 30.451 80.7935 28.1156 81.9688L27.3255 80.3988ZM40.0508 71.5651C40.9971 70.7129 41.9393 69.8178 42.8785 68.8786L44.1213 70.1214C43.1613 71.0814 42.1969 71.9976 41.227 72.8711L40.0508 71.5651ZM42.8785 68.8786C43.8057 67.9514 44.7678 66.7776 45.7562 65.3879L47.1885 66.4065C46.1625 67.8491 45.1379 69.1048 44.1213 70.1214L42.8785 68.8786ZM50.5359 57.4426C51.9015 54.864 53.273 52.0408 54.6326 49.0687L56.2309 49.7998C54.861 52.7943 53.4745 55.6493 52.0891 58.2652L50.5359 57.4426ZM58.3708 40.4911C59.5708 37.6181 60.7458 34.7001 61.8824 31.8101L63.518 32.4533C62.378 35.3521 61.1983 38.2818 59.9926 41.1685L58.3708 40.4911ZM65.2529 23.062C66.4246 19.9686 67.5297 17.0081 68.5503 14.2814L70.1964 14.8975C69.1765 17.6222 68.0698 20.5871 66.8965 23.6846L65.2529 23.062ZM71.8897 5.49603C72.5771 3.74785 73.1856 2.26834 73.7 1.13646L75.3001 1.86375C74.8047 2.95358 74.2095 4.39945 73.5253 6.13925L71.8897 5.49603Z" fill="#81CBF8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 351 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="283" height="222" viewBox="0 0 283 222" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M41.2124 71.9365L30.3686 94.0759L1 115.312L8.2292 133.385L15.0066 149.65L26.3022 157.783L30.3686 179.471L35.7905 221.491L73.7438 218.328L104.92 214.713L124.8 221.491L181.278 218.328L192.574 210.195L205.225 214.713C213.207 214.864 229.894 215.075 232.786 214.713C235.678 214.352 241.22 219.081 243.63 221.491H263.962L276.613 196.64L281.583 166.368L272.999 154.169L263.962 143.325L254.926 133.385L235.949 127.963V121.185C236.702 116.065 238.298 105.1 238.66 102.209C239.021 99.3171 245.437 90.1601 248.6 85.9431C249.805 77.9608 252.215 61.5445 252.215 59.7372V41.2124L248.6 18.1693L243.63 6.87372L225.105 1L205.225 3.25912L192.574 10.4883C188.809 14.4041 181.278 22.6876 181.278 24.4949C181.278 26.3022 174.049 36.3929 170.434 41.2124L160.042 36.6942L127.511 24.4949L99.046 18.1693H53.8635L26.3022 27.6577V43.4715L30.3686 67.4183L41.2124 71.9365Z" fill="white" stroke="#E7E7E7" stroke-width="0.90365"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1017 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="304" height="200" viewBox="0 0 304 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.5132 38.0564L0.729248 148.302V175.411C13.531 178.725 40.038 185.351 43.6526 185.351C47.2672 185.351 66.8463 187.761 76.184 188.966L92.9015 167.278H112.33H134.469C137.632 167.278 151.639 173.152 160.675 175.411C169.712 177.67 181.911 183.544 188.688 188.966C195.466 194.388 199.984 193.032 205.858 197.551C210.557 201.165 224.985 199.057 231.612 197.551H258.721L284.023 188.966C288.542 183.243 297.578 170.893 297.578 167.278V139.717V105.378L303 64.7141L291.704 38.0564L278.602 32.6345L265.047 21.7907H244.263L231.612 2.36227C226.943 1.1574 216.792 -0.529408 213.539 2.36227C209.472 5.97687 187.785 2.36227 177.845 2.36227C167.904 2.36227 147.572 8.23599 142.602 11.8506C138.626 14.7423 120.764 19.6822 112.33 21.7907L76.184 8.23599L34.1643 2.36227L21.5132 38.0564Z" fill="white" stroke="#E7E7E7" stroke-width="0.90365"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 941 B |
@@ -4,7 +4,7 @@ import { Navbar } from '@imphnen-frontend-service/ui/organisms';
|
||||
|
||||
export const AppLayout: FC = (): ReactElement => {
|
||||
return (
|
||||
<main className="bg-primary-50 min-h-screen px-20 py-[60px]">
|
||||
<main className="bg-primary-50 min-h-screen px-8 py-[60px]">
|
||||
<Navbar />
|
||||
<Outlet />
|
||||
</main>
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
import { LandingPage } from '@imphnen-frontend-service/ui/organisms';
|
||||
import { FC, ReactElement } from 'react';
|
||||
|
||||
export const Components: FC = (): ReactElement => {
|
||||
return <>Hallo</>;
|
||||
return (
|
||||
<>
|
||||
<LandingPage />
|
||||
<div></div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Components;
|
||||
|
||||
+35
-16
@@ -5,16 +5,17 @@
|
||||
@theme {
|
||||
--color-primary-50: #f0f8ff;
|
||||
--color-primary-100: #e1f0fd;
|
||||
--color-primary-200: #b8e1f8;
|
||||
--color-primary-300: #a1d4f0;
|
||||
--color-primary-400: #4aa4da;
|
||||
--color-primary-500: #1a8ce6;
|
||||
--color-primary-600: #1673c7;
|
||||
--color-primary-700: #0f5ca5;
|
||||
--color-primary-800: #0a4780;
|
||||
--color-primary-900: #04305d;
|
||||
--color-primary-200: #bce1fb;
|
||||
--color-primary-300: #81cbf8;
|
||||
--color-primary-400: #3eb0f2;
|
||||
--color-primary-500: #23a1eb;
|
||||
--color-primary-600: #0877c1;
|
||||
--color-primary-700: #085f9c;
|
||||
--color-primary-800: #0b5181;
|
||||
--color-primary-900: #0f446b;
|
||||
--color-primary-950: #0a2b47;
|
||||
|
||||
--color-neutral-50: #f7f7f7;
|
||||
--color-neutral-50: #f6f6f6;
|
||||
--color-neutral-100: #e7e7e7;
|
||||
--color-neutral-200: #d0d0d0;
|
||||
--color-neutral-300: #b7b7b7;
|
||||
@@ -24,6 +25,7 @@
|
||||
--color-neutral-700: #4a4a4a;
|
||||
--color-neutral-800: #3a3a3a;
|
||||
--color-neutral-900: #2f2f2f;
|
||||
--color-neutral-950: #2b2b2b;
|
||||
|
||||
--color-success-50: #e7f2ee;
|
||||
--color-success-100: #cde6dd;
|
||||
@@ -80,16 +82,28 @@
|
||||
|
||||
--font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
|
||||
|
||||
--text-h1: 3rem; /* ~48px */
|
||||
--text-h2: 2.4rem; /* ~38.4px */
|
||||
--text-h3: 1.92rem; /* ~30.72px */
|
||||
--text-p1: 1.54rem; /* ~24.58px */
|
||||
--text-p2: 1.23rem; /* ~19.68px */
|
||||
--text-label1: 0.98rem; /* ~15.74px */
|
||||
--text-label2: 0.78rem; /* ~12.59px */
|
||||
--text-h1: 3.833rem;
|
||||
/* ~46px */
|
||||
--text-h2: 3.083rem;
|
||||
/* ~37px */
|
||||
--text-h3: 2.417rem;
|
||||
/* ~29px */
|
||||
--text-p1: 1.917rem;
|
||||
/* ~23px */
|
||||
--text-p2: 1.583rem;
|
||||
/* ~19px */
|
||||
--text-p3: 1.25rem;
|
||||
/* 15px */
|
||||
--text-label1: 1rem;
|
||||
/* 12px */
|
||||
--text-label2: 0.833rem;
|
||||
/* ~10px */
|
||||
--text-label3: 0.677rem;
|
||||
/* ~8px */
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
@@ -103,13 +117,16 @@
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-neutral-50);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #cccccc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-neutral-300);
|
||||
}
|
||||
@@ -117,5 +134,7 @@
|
||||
html {
|
||||
font-family: 'Bai Jamjuree', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
export * from './navbar';
|
||||
export * from './landing-page';
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export * from './landing-page';
|
||||
@@ -0,0 +1,103 @@
|
||||
import { ArrowDownOutlined } from '@ant-design/icons';
|
||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
||||
import { FC, ReactElement } from 'react';
|
||||
|
||||
export const LandingPage: FC = (): ReactElement => {
|
||||
const scrollToRoulette = () => {
|
||||
const rouletteSection = document.getElementById('roulette');
|
||||
if (rouletteSection) {
|
||||
rouletteSection.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
id="landing-page"
|
||||
className="my-12 md:my-24 flex flex-col md:flex-row flex-wrap max-w-[1280px] items-center justify-center lg:mx-auto"
|
||||
>
|
||||
<div className="order-none lg:order-1 flex flex-col xl:flex-2 md:w-full lg:w-fit items-center gap-7 md:gap-13 text-primary-500 mb-10 md:mb-20">
|
||||
<img
|
||||
src="/logos/logo.svg"
|
||||
alt="IMPHNEN Logo"
|
||||
className="w-[170px] md:w-[317px]"
|
||||
/>
|
||||
|
||||
<div className="font-semibold text-center">
|
||||
<div className="text-p1 md:text-h2 lg:font-bold text-center">
|
||||
<p>New Merchandise</p>
|
||||
<p>Coming UP</p>
|
||||
</div>
|
||||
<div className="text-base md:text-p2 mt-3">
|
||||
Periode Gacha: 1 - 31 Maret 2025
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center font-semibold text-p3 md:text-p1">
|
||||
<p>Let's Go Checkout Our Merch &</p>
|
||||
<p>Gacha Your Prize Here</p>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="bordered"
|
||||
className="flex gap-3 px-3 md:px-5 py-2 md:py-4 bg-primary-100 border border-primary-500 border-dashed rounded md:rounded-md animate-bounce text-label2 md:text-p2"
|
||||
onClick={scrollToRoulette}
|
||||
>
|
||||
<ArrowDownOutlined />
|
||||
<span>Scroll For Gacha</span>
|
||||
<ArrowDownOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="order-1 lg:order-none flex flex-col flex-1 justify-center items-center mb-8 relative">
|
||||
<div className="relative h-[150px] md:h-[230px]">
|
||||
<img
|
||||
src="/merch/1.png"
|
||||
alt="Merch 1"
|
||||
className="relative top-[3px] md:top-[6px] left-[4px] md:left-[7px] z-10 w-[165px] md:w-[266px]"
|
||||
/>
|
||||
<img
|
||||
className="absolute top-0 left-0 min-w-[174px] md:min-w-[280px] z-0"
|
||||
src="/merch/Vector-1.svg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="px-3 py-1 text-primary-500 font-semibold text-base md:text-p2 bg-white shadow-md rounded">
|
||||
Official Merch IMPHNEN
|
||||
</div>
|
||||
<div className="mt-2 text-primary-500 font-bold text-p2 md:text-h3">
|
||||
~ 175k ~
|
||||
</div>
|
||||
<img
|
||||
className="absolute bottom-12 -right-10"
|
||||
src="/landing-arrow-1.svg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="order-2 flex flex-col flex-1 justify-center items-center mb-8 relative">
|
||||
<div className="relative h-[130px] md:h-[230px]">
|
||||
<img
|
||||
src="/merch/2.png"
|
||||
alt="Merch 2"
|
||||
className="relative top-[5px] md:top-[8px] left-0 md:left-[5px] z-10 w-[165px] md:w-[277px]"
|
||||
/>
|
||||
<img
|
||||
className="absolute top-0 -left-[5px] md:-left-[8px] z-0 min-w-[174px] md:min-w-[302px]"
|
||||
src="/merch/Vector-2.svg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="px-3 py-1 text-primary-500 font-semibold text-base md:text-p2 bg-white shadow-md rounded">
|
||||
IMPHNEN Mini Merch
|
||||
</div>
|
||||
<div className="mt-2 text-primary-500 font-bold text-p2 md:text-h3">
|
||||
~ 90k ~
|
||||
</div>
|
||||
<img
|
||||
className="absolute -bottom-10 -left-12"
|
||||
src="/landing-arrow-2.svg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -1,4 +1,5 @@
|
||||
import { MenuOutlined } from '@ant-design/icons';
|
||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
||||
import { FC, ReactElement, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
@@ -7,32 +8,37 @@ export const Navbar: FC = (): ReactElement => {
|
||||
|
||||
return (
|
||||
<header
|
||||
className="bg-white shadow-sm rounded-lg min-h-[47px] max-h-[47px] md:min-h-[60px] md:max-h-[60px] lg:min-h-[71px] lg:max-h-[71px] flex justify-between w-full max-w-[1280px] xl:mx-auto sticky"
|
||||
className="bg-white shadow-lg rounded-lg min-h-[47px] max-h-[47px] md:min-h-[60px] md:max-h-[60px] lg:min-h-[71px] lg:max-h-[71px] flex justify-between w-full max-w-[1280px] xl:mx-auto sticky"
|
||||
role="navigation"
|
||||
>
|
||||
<div className="flex w-full items-center justify-between px-6 py-3">
|
||||
<div className="flex w-full items-center justify-between p-4 md:px-[32px] md:py-[10px]">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src="/logos/simple.svg"
|
||||
alt="IMPHNEN Logo"
|
||||
className="h-8 w-auto"
|
||||
className="h-8 md:h-[40px] lg:h-[52px] w-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<nav className="w-full flex justify-end">
|
||||
<ul className="items-center gap-x-8 font-semibold hidden md:flex">
|
||||
<li>
|
||||
<Link
|
||||
to="#"
|
||||
className="text-primary-500 hover:text-primary-600 transition-colors"
|
||||
<Button
|
||||
size="md"
|
||||
variant="text"
|
||||
className="lg:text-[19px] lg:max-h-[44px] text-primary-500 hover:text-primary-600 transition-colors"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link to="#">Home</Link>
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#" className="text-gray-600 transition-colors">
|
||||
Merch Gacha
|
||||
</Link>
|
||||
<Button
|
||||
size="md"
|
||||
variant="text"
|
||||
className="lg:text-[19px] lg:max-h-[44px] text-gray-600 hover:text-gray-700 transition-colors"
|
||||
>
|
||||
<Link to="#">Merch Gacha</Link>
|
||||
</Button>
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user