feat: add landing page for mobile viewport

apps/gacha/public/logos/logo.svg

@@ -0,0 +1,9 @@
+<svg width="317" height="170" viewBox="0 0 317 170" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="317" height="169.613" fill="url(#pattern0_164_317)"/>
+<defs>
+<pattern id="pattern0_164_317" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_164_317" transform="scale(0.00184502 0.00344828)"/>
+</pattern>
+<image id="image0_164_317" width="542" height="290" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh4AAAEiCAYAAAC2k9sBAAAABGdBTUEAALGPC/xhBQAACklpQ0NQc1JHQiBJRUM2MTk2Ni0yLjEAAEiJnVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKLine truncated
+</defs>
+</svg>

apps/gacha/public/merch/Vector-1.svg

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

apps/gacha/public/merch/Vector-2.svg

@@ -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.6345L2Line truncated
+</svg>

apps/gacha/src/app/layout.tsx

@@ -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>

apps/gacha/src/app/page.tsx

@@ -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;

libs/ui/src/organisms/index.ts

@@ -1 +1,2 @@
 export * from './navbar';
+export * from './landing-page';

libs/ui/src/organisms/landing-page/index.ts

@@ -0,0 +1 @@
+export * from './landing-page';

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

@@ -0,0 +1,68 @@
+import { ArrowDownOutlined } from '@ant-design/icons';
+import { FC, ReactElement } from 'react';
+
+export const LandingPage: FC = (): ReactElement => {
+  return (
+    <section className="my-12">
+      <div className="order-1 lg:order-2 flex flex-col items-center gap-7 text-primary-500">
+        <img src="/logos/logo.svg" alt="IMPHNEN Logo" width={170} />
+
+        <div className="font-semibold text-center">
+          <div className="text-p1 md:text-h2 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">
+          <p>Let's Go Checkout Our Merch &</p>
+          <p>Gacha Your Prize Here</p>
+        </div>
+        <div className="flex gap-3 px-3 py-2 bg-primary-100 border border-primary-500 border-dashed rounded animate-bounce">
+          <ArrowDownOutlined />
+          <span className="font-label2">Scroll For Gacha</span>
+          <ArrowDownOutlined />
+        </div>
+      </div>
+      <div className="flex flex-col justify-center items-center my-10">
+        <div className="relative h-[150px]">
+          <img
+            src="/merch/1.png"
+            alt="Merch 1"
+            className="relative top-[3px] left-[4px] z-10 w-[165px]"
+          />
+          <img
+            className="absolute top-0 left-0 min-w-[174px] z-0"
+            src="/merch/Vector-1.svg"
+            alt=""
+          />
+        </div>
+        <div className="px-3 py-1 text-primary-500 font-semibold text-base bg-white shadow-md rounded">
+          Official Merch IMPHNEN
+        </div>
+        <div className="mt-2 text-primary-500 font-bold text-p2">~ 175k ~</div>
+      </div>
+      <div className="flex flex-col justify-center items-center my-10">
+        <div className="relative h-[130px]">
+          <img
+            src="/merch/2.png"
+            alt="Merch 2"
+            className="relative top-[5px] left-[5px] z-10 w-[165px]"
+          />
+          <img
+            className="absolute top-0 left-0 z-0 min-w-[174px]"
+            src="/merch/Vector-2.svg"
+            alt=""
+          />
+        </div>
+        <div className="px-3 py-1 text-primary-500 font-semibold text-base bg-white shadow-md rounded">
+          IMPHNEN Mini Merch
+        </div>
+        <div className="mt-2 text-primary-500 font-bold text-p2">~ 90k ~</div>
+      </div>
+    </section>
+  );
+};