From cb632adbb49ddec9e73746856d67d3186c067e5e Mon Sep 17 00:00:00 2001
From: Hafid Nur <hafidnurazis@gmail.com>
Date: Sun, 16 Mar 2025 19:54:42 +0700
Subject: [PATCH] feat: change the layout of the landing page from using CSS
 Flexbox to CSS Grid

- minor adjustment for navbar max width and padding
---
 apps/gacha/src/app/page.tsx             | 45 ++++++++++++++++---------
 libs/ui/src/organisms/navbar/navbar.tsx |  4 +--
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/apps/gacha/src/app/page.tsx b/apps/gacha/src/app/page.tsx
index 7ad58ef..fab9bfd 100644
--- a/apps/gacha/src/app/page.tsx
+++ b/apps/gacha/src/app/page.tsx
@@ -15,9 +15,9 @@ export const Components: FC = (): ReactElement => {
       {/* Landing Page */}
       <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"
+        className="my-12 md:my-24 grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 justify-items-center max-w-[1280px] items-center justify-center mx-[32px] md:mx-[60px] lg:mx-[80px] xl: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">
+        <div className="order-none lg:order-1 flex flex-col col-span-4 md:col-span-8 lg:col-span-4 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"
@@ -50,7 +50,7 @@ export const Components: FC = (): ReactElement => {
           </Button>
         </div>
 
-        <div className="order-1 lg:order-none flex flex-col flex-1 justify-center items-center mb-8 relative">
+        <div className="order-1 lg:order-none flex flex-col col-span-4 justify-center items-center mb-8 relative">
           <div className="relative h-[150px] md:h-[230px]">
             <img
               src="/merch/1.png"
@@ -62,6 +62,11 @@ export const Components: FC = (): ReactElement => {
               src="/merch/Vector-1.svg"
               alt=""
             />
+            <img
+              className="absolute hidden lg:block -bottom-[50px] -right-[50px]"
+              src="/landing-arrow-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
@@ -69,13 +74,8 @@ export const Components: 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 relative">
+        <div className="order-2 flex flex-col col-span-4 justify-center items-center mb-8 relative">
           <div className="relative h-[130px] md:h-[230px]">
             <img
               src="/merch/2.png"
@@ -87,6 +87,11 @@ export const Components: FC = (): ReactElement => {
               src="/merch/Vector-2.svg"
               alt=""
             />
+            <img
+              className="absolute hidden lg:block -bottom-[100px] -left-[55px]"
+              src="/landing-arrow-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
@@ -94,15 +99,25 @@ export const Components: 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>
       {/* Roulette Page */}
-      <section id="roulette" className="h-[100vh]"></section>
+      <section
+        id="roulette"
+        className="h-[100vh] mx-[32px] md:mx-[60px] lg:mx-[80px] xl:mx-auto lg:max-w-[1280px] grid grid-cols-12"
+      >
+        <div>Card</div>
+        <div id="roulette-spin">
+          <div>Here Take Your Prize</div>
+          <div>Rolling Merch</div>
+          <div>
+            <div>Sertifikat + Laminating</div>
+            <Button variant="secondary" size="md">
+              Spin Now
+            </Button>
+          </div>
+        </div>
+      </section>
     </Fragment>
   );
 };
diff --git a/libs/ui/src/organisms/navbar/navbar.tsx b/libs/ui/src/organisms/navbar/navbar.tsx
index 5d987d0..9720f8c 100644
--- a/libs/ui/src/organisms/navbar/navbar.tsx
+++ b/libs/ui/src/organisms/navbar/navbar.tsx
@@ -7,7 +7,7 @@ export const Navbar: FC = (): ReactElement => {
   const [isDropdownOpen, setDropdownOpen] = useState(false);
 
   return (
-    <header className="bg-primary-50 w-full px-[32px] md:px-[60px] pt-[60px] sticky top-0 z-50">
+    <div className="bg-primary-50 w-full px-[32px] md:px-[60px] lg:px-[80px] pt-[60px] sticky top-0 z-50">
       <header
         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"
         role="navigation"
@@ -76,6 +76,6 @@ export const Navbar: FC = (): ReactElement => {
           </nav>
         </div>
       </header>
-    </header>
+    </div>
   );
 };