fix: conflict
This commit is contained in:
boboiazumi
@@ -0,0 +1,12 @@
|
||||
import nx from '@nx/eslint-plugin';
|
||||
import baseConfig from '../../eslint.config.mjs';
|
||||
|
||||
export default [
|
||||
...baseConfig,
|
||||
...nx.configs['flat/react'],
|
||||
{
|
||||
files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
|
||||
// Override or add rules here
|
||||
rules: {},
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Backoffice</title>
|
||||
<base href="/" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<link rel="stylesheet" href="/src/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,9 @@
|
||||
import { join } from 'path';
|
||||
|
||||
export default {
|
||||
plugins: {
|
||||
'@tailwindcss/postcss': {
|
||||
base: join(import.meta.dirname, '../../'),
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "backoffice",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"sourceRoot": "apps/backoffice/src",
|
||||
"projectType": "application",
|
||||
"tags": [],
|
||||
"// targets": "to see all targets run: nx show project backoffice --web",
|
||||
"targets": {}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,14 @@
|
||||
import { FC, ReactElement } from 'react';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import { Navbar } from '@imphnen-frontend-service/ui/organisms';
|
||||
|
||||
export const AppLayout: FC = (): ReactElement => {
|
||||
return (
|
||||
<main className="bg-primary-50 min-h-screen">
|
||||
<Navbar />
|
||||
<Outlet />
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppLayout;
|
||||
@@ -0,0 +1,7 @@
|
||||
import { FC, ReactElement } from 'react';
|
||||
|
||||
export const Components: FC = (): ReactElement => {
|
||||
return <>Hallo</>;
|
||||
};
|
||||
|
||||
export default Components;
|
||||
@@ -0,0 +1,140 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
|
||||
@import 'tailwindcss';
|
||||
@source "../../../libs/ui/**/*.{ts,tsx}";
|
||||
|
||||
@theme {
|
||||
--color-primary-50: #f0f8ff;
|
||||
--color-primary-100: #e1f0fd;
|
||||
--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: #f6f6f6;
|
||||
--color-neutral-100: #e7e7e7;
|
||||
--color-neutral-200: #d0d0d0;
|
||||
--color-neutral-300: #b7b7b7;
|
||||
--color-neutral-400: #9f9f9f;
|
||||
--color-neutral-500: #7e7e7e;
|
||||
--color-neutral-600: #5d5d5d;
|
||||
--color-neutral-700: #4a4a4a;
|
||||
--color-neutral-800: #3a3a3a;
|
||||
--color-neutral-900: #2f2f2f;
|
||||
--color-neutral-950: #2b2b2b;
|
||||
|
||||
--color-success-50: #e7f2ee;
|
||||
--color-success-100: #cde6dd;
|
||||
--color-success-200: #9bccbc;
|
||||
--color-success-300: #78bdab;
|
||||
--color-success-400: #4ca88f;
|
||||
--color-success-500: #349078;
|
||||
--color-success-600: #2f7c66;
|
||||
--color-success-700: #26624f;
|
||||
--color-success-800: #1e4a3b;
|
||||
--color-success-900: #1b513b;
|
||||
|
||||
--color-info-50: #e7f4f5;
|
||||
--color-info-100: #cce9ea;
|
||||
--color-info-200: #99d3d5;
|
||||
--color-info-300: #78c4c7;
|
||||
--color-info-400: #3aa9ad;
|
||||
--color-info-500: #279599;
|
||||
--color-info-600: #207d82;
|
||||
--color-info-700: #1a666b;
|
||||
--color-info-800: #124c52;
|
||||
--color-info-900: #093d43;
|
||||
|
||||
--color-warning-50: #fffce6;
|
||||
--color-warning-100: #fff8cc;
|
||||
--color-warning-200: #fef39b;
|
||||
--color-warning-300: #fde967;
|
||||
--color-warning-400: #fbd93d;
|
||||
--color-warning-500: #f3c215;
|
||||
--color-warning-600: #d7a20f;
|
||||
--color-warning-700: #aa7e0c;
|
||||
--color-warning-800: #805c07;
|
||||
--color-warning-900: #665c00;
|
||||
|
||||
--color-danger-50: #ffe7e7;
|
||||
--color-danger-100: #ffcece;
|
||||
--color-danger-200: #ff9f9f;
|
||||
--color-danger-300: #ff6e6e;
|
||||
--color-danger-400: #fa4646;
|
||||
--color-danger-500: #ef1f1f;
|
||||
--color-danger-600: #d11515;
|
||||
--color-danger-700: #a51111;
|
||||
--color-danger-800: #7f0c0c;
|
||||
--color-danger-900: #5d2d2d;
|
||||
|
||||
--radius-none: 0px;
|
||||
--radius-sm: 2px;
|
||||
--radius-md: 4px;
|
||||
--radius-lg: 8px;
|
||||
--radius-xl: 12px;
|
||||
--radius-2xl: 16px;
|
||||
--radius-3xl: 24px;
|
||||
--radius-full: 50%;
|
||||
|
||||
--font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
|
||||
|
||||
--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,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-neutral-200, currentColor);
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
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);
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'Bai Jamjuree', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { middleware } from './middleware';
|
||||
import { StrictMode } from 'react';
|
||||
import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router';
|
||||
import {
|
||||
add404PageToRoutesChildren,
|
||||
addErrorElementToRoutes,
|
||||
convertPagesToRoute,
|
||||
QueryProvider,
|
||||
} from '@imphnen-frontend-service/utils';
|
||||
import './index.css';
|
||||
|
||||
const files = import.meta.glob('./app/**/*(page|layout).tsx');
|
||||
const errorFiles = import.meta.glob('./app/**/*error.tsx');
|
||||
const notFoundFiles = import.meta.glob('./app/**/*404.tsx');
|
||||
const loadingFiles = import.meta.glob('./app/**/*loading.tsx');
|
||||
|
||||
const routes = convertPagesToRoute(files, loadingFiles) as RouteObject;
|
||||
addErrorElementToRoutes(errorFiles, routes);
|
||||
add404PageToRoutesChildren(notFoundFiles, routes);
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
...routes,
|
||||
loader: middleware,
|
||||
shouldRevalidate: () => true,
|
||||
},
|
||||
]);
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
|
||||
if (!rootElement) throw new Error('Failed to find the root element');
|
||||
|
||||
createRoot(rootElement).render(
|
||||
<StrictMode>
|
||||
<QueryProvider>
|
||||
<RouterProvider router={router} />
|
||||
</QueryProvider>
|
||||
</StrictMode>
|
||||
);
|
||||
@@ -0,0 +1,11 @@
|
||||
import { LoaderFunctionArgs } from 'react-router-dom';
|
||||
|
||||
export const middleware = async ({ request }: LoaderFunctionArgs) => {
|
||||
const url = new URL(request.url);
|
||||
|
||||
const pathname = url.pathname;
|
||||
|
||||
if (pathname) return null;
|
||||
|
||||
return null;
|
||||
};
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../dist/out-tsc",
|
||||
"types": [
|
||||
"node",
|
||||
"@nx/react/typings/cssmodule.d.ts",
|
||||
"@nx/react/typings/image.d.ts",
|
||||
"vite/client"
|
||||
]
|
||||
},
|
||||
"exclude": [
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.test.ts",
|
||||
"src/**/*.spec.tsx",
|
||||
"src/**/*.test.tsx",
|
||||
"src/**/*.spec.js",
|
||||
"src/**/*.test.js",
|
||||
"src/**/*.spec.jsx",
|
||||
"src/**/*.test.jsx",
|
||||
"vite.config.ts",
|
||||
"vite.config.mts",
|
||||
"vitest.config.ts",
|
||||
"vitest.config.mts"
|
||||
],
|
||||
"include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"allowJs": false,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"types": ["vite/client", "vitest"]
|
||||
},
|
||||
"files": [],
|
||||
"include": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.spec.json"
|
||||
}
|
||||
],
|
||||
"extends": "../../tsconfig.base.json"
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../dist/out-tsc",
|
||||
"types": [
|
||||
"vitest/globals",
|
||||
"vitest/importMeta",
|
||||
"vite/client",
|
||||
"node",
|
||||
"vitest",
|
||||
"@nx/react/typings/cssmodule.d.ts",
|
||||
"@nx/react/typings/image.d.ts"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"vite.config.ts",
|
||||
"vite.config.mts",
|
||||
"vitest.config.ts",
|
||||
"vitest.config.mts",
|
||||
"src/**/*.test.ts",
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.test.tsx",
|
||||
"src/**/*.spec.tsx",
|
||||
"src/**/*.test.js",
|
||||
"src/**/*.spec.js",
|
||||
"src/**/*.test.jsx",
|
||||
"src/**/*.spec.jsx",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/// <reference types='vitest' />
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
|
||||
import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
|
||||
|
||||
export default defineConfig(() => ({
|
||||
root: __dirname,
|
||||
cacheDir: '../../node_modules/.vite/apps/backoffice',
|
||||
server: {
|
||||
port: 4200,
|
||||
host: 'localhost',
|
||||
},
|
||||
preview: {
|
||||
port: 4300,
|
||||
host: 'localhost',
|
||||
},
|
||||
plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
|
||||
// Uncomment this if you are using workers.
|
||||
// worker: {
|
||||
// plugins: [ nxViteTsPaths() ],
|
||||
// },
|
||||
build: {
|
||||
outDir: '../../dist/apps/backoffice',
|
||||
emptyOutDir: true,
|
||||
reportCompressedSize: true,
|
||||
commonjsOptions: {
|
||||
transformMixedEsModules: true,
|
||||
},
|
||||
},
|
||||
test: {
|
||||
watch: false,
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
|
||||
reporters: ['default'],
|
||||
coverage: {
|
||||
reportsDirectory: '../../coverage/apps/backoffice',
|
||||
provider: 'v8' as const,
|
||||
},
|
||||
},
|
||||
}));
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
@@ -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>
|
||||
|
||||
+217
-8
@@ -1,16 +1,225 @@
|
||||
import { ArrowDownOutlined } from '@ant-design/icons';
|
||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
||||
import { LandingPage } from '@imphnen-frontend-service/ui/organisms';
|
||||
import { FC, ReactElement, useState } from 'react';
|
||||
|
||||
import { ModalsGacha } from '@imphnen-frontend-service/ui/organisms';
|
||||
import { cn } from '@imphnen-frontend-service/utils';
|
||||
import { FC, Fragment, ReactElement, useEffect, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { ModalsGacha } from "@imphnen-frontend-service/ui/organisms"
|
||||
|
||||
interface GachaItemProps {
|
||||
src: string;
|
||||
label: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const Components: FC = (): ReactElement => {
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
// Pinjem
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
//
|
||||
|
||||
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 />
|
||||
<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>
|
||||
|
||||
{/**Izin pake untuk debug modals gacha */}
|
||||
<div>
|
||||
@@ -24,7 +233,7 @@ export const Components: FC = (): ReactElement => {
|
||||
document.body
|
||||
)}
|
||||
{/**Izin pake untuk debug modals gacha */}
|
||||
</>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,3 +1,2 @@
|
||||
export * from './navbar';
|
||||
export * from './landing-page';
|
||||
export * from "./modals-gacha";
|
||||
export * from "./modals-gacha";
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -6,6 +6,9 @@
|
||||
"gacha:dev": "nx serve gacha",
|
||||
"gacha:build": "nx build gacha",
|
||||
"gacha:prod": "serve ./dist/apps/gacha",
|
||||
"backoffice:dev": "nx serve backoffice",
|
||||
"backoffice:build": "nx build backoffice",
|
||||
"backoffice:prod": "serve ./dist/apps/gacha",
|
||||
"dimentorin:dev": "nx serve dimentorin",
|
||||
"dimentorin:build": "nx build dimentorin",
|
||||
"dimentorin:prod": "serve ./dist/apps/dimentorin",
|
||||
|
||||
Reference in New Issue
Block a user