MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add landing page for mobile viewport

Browse Source
This commit is contained in:
Hafid Nur
2025-03-16 06:38:14 +07:00
parent a31166e3ff
commit 02863ebc8b
10 changed files with 93 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/gacha/public/logos/logo.svg
+9
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 351 KiB

apps/gacha/public/merch/1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

apps/gacha/public/merch/2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

apps/gacha/public/merch/Vector-1.svg
+3
View File
@@ -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 90.1601 248.6 85.9431C249.805 77.9608 252.215 61.5445 252.215 59.7372V41.2124L248.6 18.1693L243.63 6.87372L225.105 1L205.225 3.25912L192.574 10.4883C188.809 14.4041 181.278 22.6876 181.278 24.4949C181.278 26.3022 174.049 36.3929 170.434 41.2124L160.042 36.6942L127.511 24.4949L99.046 18.1693H53.8635L26.3022 27.6577V43.4715L30.3686 67.4183L41.2124 71.9365Z" fill="white" stroke="#E7E7E7" stroke-width="0.90365"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1017 B

apps/gacha/public/merch/Vector-2.svg
+3
View File
@@ -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.6345L265.047 21.7907H244.263L231.612 2.36227C226.943 1.1574 216.792 -0.529408 213.539 2.36227C209.472 5.97687 187.785 2.36227 177.845 2.36227C167.904 2.36227 147.572 8.23599 142.602 11.8506C138.626 14.7423 120.764 19.6822 112.33 21.7907L76.184 8.23599L34.1643 2.36227L21.5132 38.0564Z" fill="white" stroke="#E7E7E7" stroke-width="0.90365"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 941 B

apps/gacha/src/app/layout.tsx
+1 -1
View File
@@ -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
+7 -1
View File
@@ -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
View File
@@ -1 +1,2 @@
export * from './navbar';
export * from './landing-page';
libs/ui/src/organisms/landing-page/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './landing-page';
libs/ui/src/organisms/landing-page/landing-page.tsx
+68
View File
@@ -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>
);
};