diff --git a/apps/gacha/public/landing-arrow-1.svg b/apps/gacha/public/landing-arrow-1.svg new file mode 100644 index 0000000..0430de6 --- /dev/null +++ b/apps/gacha/public/landing-arrow-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/gacha/public/landing-arrow-2.svg b/apps/gacha/public/landing-arrow-2.svg new file mode 100644 index 0000000..c2bc297 --- /dev/null +++ b/apps/gacha/public/landing-arrow-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/gacha/public/logos/logo.svg b/apps/gacha/public/logos/logo.svg new file mode 100644 index 0000000..ca0f36e --- /dev/null +++ b/apps/gacha/public/logos/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/apps/gacha/public/merch/1.png b/apps/gacha/public/merch/1.png new file mode 100644 index 0000000..84fa81b Binary files /dev/null and b/apps/gacha/public/merch/1.png differ diff --git a/apps/gacha/public/merch/2.png b/apps/gacha/public/merch/2.png new file mode 100644 index 0000000..e65518f Binary files /dev/null and b/apps/gacha/public/merch/2.png differ diff --git a/apps/gacha/public/merch/Vector-1.svg b/apps/gacha/public/merch/Vector-1.svg new file mode 100644 index 0000000..efecf04 --- /dev/null +++ b/apps/gacha/public/merch/Vector-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/gacha/public/merch/Vector-2.svg b/apps/gacha/public/merch/Vector-2.svg new file mode 100644 index 0000000..f66d3e0 --- /dev/null +++ b/apps/gacha/public/merch/Vector-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/gacha/src/app/layout.tsx b/apps/gacha/src/app/layout.tsx index dd57ce5..846ecea 100644 --- a/apps/gacha/src/app/layout.tsx +++ b/apps/gacha/src/app/layout.tsx @@ -4,7 +4,7 @@ import { Navbar } from '@imphnen-frontend-service/ui/organisms'; export const AppLayout: FC = (): ReactElement => { return ( -
+
diff --git a/apps/gacha/src/app/page.tsx b/apps/gacha/src/app/page.tsx index f135208..bae1c49 100644 --- a/apps/gacha/src/app/page.tsx +++ b/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 ( + <> + +
+ + ); }; export default Components; diff --git a/apps/gacha/src/index.css b/apps/gacha/src/index.css index ab312f2..e9bf12a 100644 --- a/apps/gacha/src/index.css +++ b/apps/gacha/src/index.css @@ -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; } } diff --git a/libs/ui/src/organisms/index.ts b/libs/ui/src/organisms/index.ts index f5899d0..e75a225 100644 --- a/libs/ui/src/organisms/index.ts +++ b/libs/ui/src/organisms/index.ts @@ -1 +1,2 @@ export * from './navbar'; +export * from './landing-page'; diff --git a/libs/ui/src/organisms/landing-page/index.ts b/libs/ui/src/organisms/landing-page/index.ts new file mode 100644 index 0000000..d78baa5 --- /dev/null +++ b/libs/ui/src/organisms/landing-page/index.ts @@ -0,0 +1 @@ +export * from './landing-page'; diff --git a/libs/ui/src/organisms/landing-page/landing-page.tsx b/libs/ui/src/organisms/landing-page/landing-page.tsx new file mode 100644 index 0000000..711445d --- /dev/null +++ b/libs/ui/src/organisms/landing-page/landing-page.tsx @@ -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 ( +
+
+ IMPHNEN Logo + +
+
+

New Merchandise

+

Coming UP

+
+
+ Periode Gacha: 1 - 31 Maret 2025 +
+
+ +
+

Let's Go Checkout Our Merch &

+

Gacha Your Prize Here

+
+ +
+ +
+
+ Merch 1 + +
+
+ Official Merch IMPHNEN +
+
+ ~ 175k ~ +
+ +
+
+
+ Merch 2 + +
+
+ IMPHNEN Mini Merch +
+
+ ~ 90k ~ +
+ +
+
+ ); +}; diff --git a/libs/ui/src/organisms/navbar/navbar.tsx b/libs/ui/src/organisms/navbar/navbar.tsx index 35616a0..13cd94f 100644 --- a/libs/ui/src/organisms/navbar/navbar.tsx +++ b/libs/ui/src/organisms/navbar/navbar.tsx @@ -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 (
-
+
IMPHNEN Logo