feat: landing page for desktop viewport

apps/gacha/public/landing-arrow-1.svg

@@ -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.40Line truncated
+</svg>

apps/gacha/public/landing-arrow-2.svg

@@ -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.677276ZMLine truncated
+</svg>

libs/ui/src/organisms/landing-page/landing-page.tsx

@@ -13,9 +13,9 @@ export const LandingPage: FC = (): ReactElement => {
   return (
     <section
       id="landing-page"
-      className="my-12 md:my-24 flex flex-col md:flex-row flex-wrap"
+      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 md:w-full items-center gap-7 md:gap-13 text-primary-500 mb-10 md:mb-20">
+      <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"
@@ -23,7 +23,7 @@ export const LandingPage: FC = (): ReactElement => {
         />
 
         <div className="font-semibold text-center">
-          <div className="text-p1 md:text-h2 text-center">
+          <div className="text-p1 md:text-h2 lg:font-bold text-center">
             <p>New Merchandise</p>
             <p>Coming UP</p>
           </div>
@@ -39,7 +39,7 @@ export const LandingPage: FC = (): ReactElement => {
         <Button
           size="sm"
           variant="bordered"
-          className="flex gap-3 px-3 py-2 bg-primary-100 border border-primary-500 border-dashed rounded animate-bounce text-label2 md:text-p2"
+          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 />
@@ -47,8 +47,9 @@ export const LandingPage: FC = (): ReactElement => {
           <ArrowDownOutlined />
         </Button>
       </div>
-      <div className="order-1 flex flex-col flex-1 justify-center items-center mb-8">
-        <div className="relative h-[150px] md:h-[250px]">
+
+      <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"
@@ -66,16 +67,21 @@ export const LandingPage: FC = (): ReactElement => {
         <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">
-        <div className="relative h-[130px] md:h-[250px]">
+      <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-[5px] md:left-[12px] z-10 w-[165px] md:w-[277px]"
+            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-0 z-0 min-w-[174px] md:min-w-[302px]"
+            className="absolute top-0 -left-[5px] md:-left-[8px] z-0 min-w-[174px] md:min-w-[302px]"
             src="/merch/Vector-2.svg"
             alt=""
           />
@@ -86,6 +92,11 @@ export const LandingPage: FC = (): ReactElement => {
         <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>
   );