Merge pull request #2 from IMPHNEN/feat/simple-landing-page
Slicing simple landing page
This commit is contained in:
14 files changed
+186
-29
No files matched your search
@@ -0,0 +1,3 @@
|
||||
<svg width="47" height="62" viewBox="0 0 47 62" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.5 38.4999L9.19156 38.4166L8.5 38.4999ZM23.5 42.4999L24.0479 42.9301L23.5 42.4999ZM1.45141 0.804946C1.06764 0.831723 0.778242 1.16453 0.805019 1.5483L1.24135 7.80212C1.26813 8.18588 1.60094 8.47528 1.9847 8.4485C2.36847 8.42173 2.65787 8.08892 2.63109 7.70515L2.24324 2.1462L7.80219 1.75835C8.18595 1.73157 8.47535 1.39876 8.44858 1.015C8.4218 0.631233 8.08899 0.341836 7.70523 0.368611L1.45141 0.804946ZM44.8219 58.1179C44.6435 57.777 44.2226 57.6453 43.8818 57.8237C43.5409 58.002 43.40Line truncated
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="79" height="88" viewBox="0 0 79 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.00004 87.8788C0.5147 87.8788 0.121257 87.4853 0.121261 87C0.121265 86.5147 0.514715 86.1212 1.00006 86.1212L1.00004 87.8788ZM43.4999 69.5L44.1213 70.1214L43.4999 69.5ZM74.1915 0.677276C74.6459 0.506859 75.1525 0.737104 75.3229 1.19154L78.1 8.59705C78.2704 9.05149 78.0401 9.55803 77.5857 9.72845C77.1313 9.89887 76.6247 9.66862 76.4543 9.21418L73.9858 2.6315L67.4031 5.10001C66.9487 5.27042 66.4421 5.04018 66.2717 4.58574C66.1013 4.1313 66.3316 3.62475 66.786 3.45434L74.1915 0.677276ZMLine truncated
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
@@ -0,0 +1,9 @@
|
||||
<svg width="317" height="170" viewBox="0 0 317 170" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect width="317" height="169.613" fill="url(#pattern0_164_317)"/>
|
||||
<defs>
|
||||
<pattern id="pattern0_164_317" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image0_164_317" transform="scale(0.00184502 0.00344828)"/>
|
||||
</pattern>
|
||||
<image id="image0_164_317" width="542" height="290" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh4AAAEiCAYAAAC2k9sBAAAABGdBTUEAALGPC/xhBQAACklpQ0NQc1JHQiBJRUM2MTk2Ni0yLjEAAEiJnVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKLine truncated
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 351 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@@ -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 90Line truncated
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1017 B |
@@ -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.6345L2Line truncated
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 941 B |
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
+35
-16
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -1 +1,2 @@
|
||||
export * from './navbar';
|
||||
export * from './landing-page';
|
||||
@@ -0,0 +1 @@
|
||||
export * from './landing-page';
|
||||
@@ -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 (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
@@ -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 (
|
||||
<header
|
||||
className="bg-white shadow-sm 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"
|
||||
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 px-6 py-3">
|
||||
<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 w-auto"
|
||||
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>
|
||||
<Link
|
||||
to="#"
|
||||
className="text-primary-500 hover:text-primary-600 transition-colors"
|
||||
<Button
|
||||
size="md"
|
||||
variant="text"
|
||||
className="lg:text-[19px] lg:max-h-[44px] text-primary-500 hover:text-primary-600 transition-colors"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link to="#">Home</Link>
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#" className="text-gray-600 transition-colors">
|
||||
Merch Gacha
|
||||
</Link>
|
||||
<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
|
||||
|
||||
Reference in new issue
Block a user