Merge pull request #4 from IMPHNEN/feat/simple-landing-page

Roulette page
2025-03-17 09:29:43 +07:00
parent 254d4fe04a c8b12db1b3
commit 8a53575cd1
11 changed files with 284 additions and 180 deletions
@@ -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-8 py-[60px]">
+    <main className="bg-primary-50 min-h-screen">
      <Navbar />
      <Outlet />
    </main>
@@ -1,12 +1,220 @@
-import { LandingPage } from '@imphnen-frontend-service/ui/organisms';
-import { FC, ReactElement } from 'react';
+import { ArrowDownOutlined } from '@ant-design/icons';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { cn } from '@imphnen-frontend-service/utils';
+import { FC, Fragment, ReactElement, useEffect } from 'react';
+
+interface GachaItemProps {
+  src: string;
+  label: string;
+  className?: string;
+}

 export const Components: FC = (): ReactElement => {
+  const scrollToRoulette = () => {
+    const rouletteSection = document.getElementById('roulette');
+    if (rouletteSection) {
+      rouletteSection.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  useEffect(() => {
+    const gachaPlaySection = document.getElementById('gacha-play');
+    if (gachaPlaySection) {
+      let currentIndex = 0;
+      const items = gachaPlaySection.children;
+      const totalItems = items.length;
+
+      const scrollItems = () => {
+        if (currentIndex >= totalItems) {
+          currentIndex = 0;
+        }
+        items[currentIndex].scrollIntoView({
+          behavior: 'smooth',
+          inline: 'center',
+        });
+        currentIndex++;
+      };
+
+      const intervalId = setInterval(scrollItems, 2800);
+
+      return () => clearInterval(intervalId);
+    }
+  }, []);
+
+  const GachaItem: FC<GachaItemProps> = ({
+    src,
+    label,
+    className,
+  }): ReactElement => {
+    return (
+      <div className="snap-center flex-auto justify-center items-center flex flex-col min-w-full">
+        <div className="max-h-[180px] md:max-h-[270px] md:max-w-[500px] mb-2 md:mb-5 flex flex-1 justify-center items-center">
+          <img
+            src={src}
+            alt=""
+            className={cn('h-[150px] md:h-[255px] object-contain', className)}
+          />
+        </div>
+        <p className="font-semibold text-center md:text-p2">{label}</p>
+      </div>
+    );
+  };
+
  return (
-    <>
-      <LandingPage />
-      <div></div>
-    </>
+    <Fragment>
+      {/* Landing Page */}
+      <section
+        id="landing-page"
+        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 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"
+            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 col-span-4 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=""
+            />
+            <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
+          </div>
+          <div className="mt-2 text-primary-500 font-bold text-p2 md:text-h3">
+            ~ 175k ~
+          </div>
+        </div>
+        <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"
+              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=""
+            />
+            <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
+          </div>
+          <div className="mt-2 text-primary-500 font-bold text-p2 md:text-h3">
+            ~ 90k ~
+          </div>
+        </div>
+      </section>
+      {/* Roulette Page */}
+      <section
+        id="roulette"
+        className="mt-20 pb-50 lg:py-90 mx-[32px] md:mx-[60px] lg:mx-[80px] xl:mx-auto lg:max-w-[1280px] grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 justify-items-center gap-y-16 md:gap-y-28"
+      >
+        <div className="col-span-4 md:col-span-8 lg:col-span-6 text-primary-500 bg-white rounded-lg md:rounded-xl p-5 md:py-9 md:px-13 shadow md:max-w-[430px]">
+          <header className="mb-4">
+            <h3 className="font-semibold text-p3 md:text-h2">Gacha Roulette</h3>
+          </header>
+          <h4 className="font-semibold my-2 text-base md:text-p1">
+            How to participate
+          </h4>
+          <p className="text-base md:text-p2">
+            Kamu harus melakukan pembelian merch batch 2 di shopee IMPHNEN
+          </p>
+          <h4 className="font-semibold my-2 text-base md:text-p1">
+            How to gacha
+          </h4>
+          <ol className="text-base md:text-p2 list-decimal list-outside ml-4 md:ml-6">
+            <li>First, press the "Spin Now" button</li>
+            <li>
+              If the merch does not match you can reroll by paying IDR5,000
+            </li>
+            <li>If it is appropriate you can submit</li>
+            <li>Then fill in the data for your merch delivery process</li>
+          </ol>
+        </div>
+
+        <div
+          id="roulette-spin"
+          className="col-span-4 md:col-span-8 lg:col-span-6 flex flex-col items-center gap-4 md:gap-8 overflow-x-hidden"
+        >
+          <div className="bg-white text-primary-500 font-medium text-p3 md:text-h3 shadow py-2 px-4 md:py-4 md:px-8 max-w-fit rounded-md md:rounded-lg">
+            Here Take Your Prize
+          </div>
+          <section
+            id="gacha-play"
+            className="flex flex-nowrap overflow-auto w-full gap-x-8 snap-x snap-mandatory"
+          >
+            <GachaItem
+              src="/gacha/certificate.png"
+              label="Sertifikat + Laminating"
+            />
+            <GachaItem
+              src="/gacha/lanyard-id-card.png"
+              label="Lanyard + ID Card"
+            />
+            <GachaItem src="/gacha/pin.png" label="Pin" />
+            <GachaItem src="/gacha/sticker.png" label="Sticker Isi 3" />
+            <GachaItem src="/gacha/sticker.png" label="Sticker Isi 5" />
+            <GachaItem
+              src="/gacha/gelang-karet.png"
+              label="Gelang Karet"
+              className="h-[86px] md:h-[160px]"
+            />
+          </section>
+          <Button variant="secondary" size="md">
+            Spin Now
+          </Button>
+        </div>
+      </section>
+      {/* Diffuser & Cloud */}
+      <div className="sticky bottom-0 h-[86px] md:h-[200px] bg-gradient-to-b from-primary-500/0 to-primary-500/50 to-80%"></div>
+    </Fragment>
  );
 };

@@ -1,2 +1 @@
 export * from './navbar';
-export * from './landing-page';
@@ -1 +0,0 @@
-export * from './landing-page';
@@ -1,103 +0,0 @@
-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>
-  );
-};
@@ -7,74 +7,75 @@ export const Navbar: FC = (): ReactElement => {
  const [isDropdownOpen, setDropdownOpen] = useState(false);

  return (
-    <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 sticky"
-      role="navigation"
-    >
-      <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 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>
-              <Button
-                size="md"
-                variant="text"
-                className="lg:text-[19px] lg:max-h-[44px] text-primary-500 hover:text-primary-600 transition-colors"
-              >
-                <Link to="#">Home</Link>
-              </Button>
-            </li>
-            <li>
-              <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
-            className={`md:hidden duration-200 ${
-              isDropdownOpen ? 'transform rotate-90' : ''
-            }`}
-            onClick={() => setDropdownOpen(!isDropdownOpen)}
-          >
-            <MenuOutlined style={{ color: '#1a8ce6' }} />
-          </button>
-          <div className="relative">
-            {isDropdownOpen && (
-              <div className="absolute right-0 top-0 mt-5">
-                <ul className="mt-2 w-48 bg-white shadow-md border rounded-[16px] border-gray-200 px-5 py-3">
-                  <li>
-                    <Link
-                      to="#"
-                      className="block text-primary-500 hover:text-primary-600 transition-colors px-4 py-2 text-center font-semibold"
-                    >
-                      Home
-                    </Link>
-                  </li>
-                  <li>
-                    <Link
-                      to="#"
-                      className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
-                    >
-                      Merch Gacha
-                    </Link>
-                  </li>
-                </ul>
-              </div>
-            )}
+    <div className="bg-primary-50 w-full px-[32px] pt-[32px] md:px-[60px] md:pt-[60px] lg:px-[80px] 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"
+      >
+        <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 md:h-[40px] lg:h-[52px] w-auto"
+            />
          </div>
-        </nav>
-      </div>
-    </header>
+          <nav className="w-full flex justify-end">
+            <ul className="items-center gap-x-8 font-semibold hidden md:flex">
+              <li>
+                <Button
+                  size="md"
+                  variant="text"
+                  className="lg:text-[19px] lg:max-h-[44px] text-primary-500 hover:text-primary-600 transition-colors"
+                >
+                  <Link to="#">Home</Link>
+                </Button>
+              </li>
+              <li>
+                <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
+              className={`md:hidden duration-200 ${
+                isDropdownOpen ? 'transform rotate-90' : ''
+              }`}
+              onClick={() => setDropdownOpen(!isDropdownOpen)}
+            >
+              <MenuOutlined style={{ color: '#1a8ce6' }} />
+            </button>
+            <div className="relative">
+              {isDropdownOpen && (
+                <div className="absolute right-0 top-0 mt-5">
+                  <ul className="mt-2 w-48 bg-white shadow-md border rounded-[16px] border-gray-200 px-5 py-3">
+                    <li>
+                      <Link
+                        to="#"
+                        className="block text-primary-500 hover:text-primary-600 transition-colors px-4 py-2 text-center font-semibold"
+                      >
+                        Home
+                      </Link>
+                    </li>
+                    <li>
+                      <Link
+                        to="#"
+                        className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
+                      >
+                        Merch Gacha
+                      </Link>
+                    </li>
+                  </ul>
+                </div>
+              )}
+            </div>
+          </nav>
+        </div>
+      </header>
+    </div>
  );
 };