feat(landing): 랜딩페이지 구현 및 디자인 시스템 구축

src/app/(landing)/_components/intro.tsx

@@ -0,0 +1,39 @@
+import LottiePlayer from "@/components/lottie-player/lottie-player";
+import React from "react";
+
+const Intro = () => {
+  return (
+    <div
+      style={{
+        backgroundImage: "linear-gradient(180deg, var(--color-purple-100) 0%, var(--color-white) 61.58%)",
+      }}
+      className="flex h-[478px] w-full flex-col items-center gap-[60px] pt-11"
+    >
+      <header className="flex w-full max-w-[375px] flex-col items-center justify-center gap-4 px-5 pt-5">
+        <div className="flex w-full items-center justify-center gap-2">
+          <Tag title="Free" />
+          <Tag title="1 Min" />
+        </div>
+        <div className="flex flex-col items-center justify-center gap-2 text-center">
+          <h1 className="whitespace-pre-wrap text-h1 text-grey-900">{`Self-Check Your\nDividend Portfolio`}</h1>
+          <h5 className="text-h5 font-normal text-grey-700">
+            <span className="text-h5 text-main-700">No Bank Integration</span> Required
+          </h5>
+        </div>
+      </header>
+      <div className="flex w-full items-center justify-center">
+        <LottiePlayer className="h-[158px] w-[165px] bg-grey-100" />
+      </div>
+    </div>
+  );
+};
+
+const Tag = ({ title }: { title: string }) => {
+  return (
+    <div className="flex items-center justify-center rounded bg-main-100 px-2 py-1 text-body3 text-main-700">
+      {title}
+    </div>
+  );
+};
+
+export default Intro;

src/app/(landing)/_components/monthly-dividend.tsx

@@ -0,0 +1,21 @@
+import LottiePlayer from "@/components/lottie-player/lottie-player";
+import React from "react";
+
+const MonthlyDividend = () => {
+  return (
+    <div className="flex w-full max-w-[375px] flex-col items-center gap-10 px-5">
+      <div className="flex w-full flex-col items-start justify-center gap-2">
+        <p className="whitespace-pre-wrap text-h3-semibold">{`Is My Monthly\nDividend Balanced?`}</p>
+        <p className=" whitespace-pre-wrap text-h5 font-normal text-grey-600">
+          {`Check expected `}
+          <span className=" text-h5 text-main-700">{`average dividend\n`}</span>
+          {`and `}
+          <span className=" text-h5 text-main-700">{`dividend schedule`}</span>
+        </p>
+      </div>
+      <LottiePlayer className="h-[180px] w-full rounded-lg bg-[#F2F4F6]" />
+    </div>
+  );
+};
+
+export default MonthlyDividend;

src/app/(landing)/_components/sector-balanced.tsx

@@ -0,0 +1,16 @@
+import LottiePlayer from "@/components/lottie-player/lottie-player";
+import React from "react";
+
+const SectorBalanced = () => {
+  return (
+    <div className="flex w-full max-w-[375px] flex-col items-center gap-10">
+      <div className="flex w-full flex-col items-start justify-center gap-2 px-5">
+        <p className="whitespace-pre-wrap text-h3-semibold">{`Is Your Portfolio\nSector-Balanced?`}</p>
+        <p className=" whitespace-pre-wrap text-h5 font-normal text-grey-600">{`Discover your favorite sector among the 11.`}</p>
+      </div>
+      <LottiePlayer className="h-[140px] w-full bg-[#F2F4F6]" />
+    </div>
+  );
+};
+
+export default SectorBalanced;

src/app/(landing)/_components/target-user.tsx

@@ -0,0 +1,19 @@
+import LottiePlayer from "@/components/lottie-player/lottie-player";
+import React from "react";
+
+const TargetUser = () => {
+  return (
+    <div className="flex w-full max-w-[375px] flex-col items-center gap-10 px-5">
+      <div className="flex w-full flex-col items-start justify-center gap-2">
+        <p className=" text-h3-semibold">Who is Payout for?</p>
+        <p className=" whitespace-pre-wrap text-h5 font-normal text-grey-600">
+          {`Anyone in need of a dividend portfolio check\n`}
+          <span className=" text-h5 text-main-700">{`without exposing any sensitive info.`}</span>
+        </p>
+      </div>
+      <LottiePlayer className="h-[180px] w-full rounded-lg bg-[#F2F4F6]" />
+    </div>
+  );
+};
+
+export default TargetUser;

src/app/(landing)/_components/yearly-dividend.tsx

@@ -0,0 +1,16 @@
+import LottiePlayer from "@/components/lottie-player/lottie-player";
+import React from "react";
+
+const YearlyDividend = () => {
+  return (
+    <div className="flex w-full max-w-[375px] flex-col items-center gap-10 px-5">
+      <div className="flex w-full flex-col items-start justify-center gap-2">
+        <p className="whitespace-pre-wrap text-h3-semibold">{`How Much is Your\nDividend Payout This Year?`}</p>
+        <p className=" whitespace-pre-wrap text-h5 font-normal text-grey-600">{`Calculate Your Annual Dividend Payout\nalong with the Ranking of your Dividend.`}</p>
+      </div>
+      <LottiePlayer className="h-[180px] w-full rounded-lg bg-[#F2F4F6]" />
+    </div>
+  );
+};
+
+export default YearlyDividend;

src/app/(landing)/layout.tsx

@@ -0,0 +1,12 @@
+import { Viewport } from "next";
+import React from "react";
+
+export const viewport: Viewport = {
+  themeColor: "#DDE0F8",
+};
+
+const LandingLayout = ({ children }: { children: React.ReactNode }) => {
+  return <div className="flex w-full flex-col items-center justify-center">{children}</div>;
+};
+
+export default LandingLayout;

src/app/(landing)/page.tsx

@@ -0,0 +1,19 @@
+import Intro from "./_components/intro";
+import MonthlyDividend from "./_components/monthly-dividend";
+import SectorBalanced from "./_components/sector-balanced";
+import TargetUser from "./_components/target-user";
+import YearlyDividend from "./_components/yearly-dividend";
+
+export default function Home() {
+  return (
+    <>
+      <Intro />
+      <div className="flex w-full flex-col items-center justify-center gap-20 pb-20 pt-10">
+        <TargetUser />
+        <SectorBalanced />
+        <MonthlyDividend />
+        <YearlyDividend />
+      </div>
+    </>
+  );
+}

src/app/(main)/layout.tsx

@@ -0,0 +1,12 @@
+import { Viewport } from "next";
+import React from "react";
+
+export const viewport: Viewport = {
+  themeColor: "var(--color-white)",
+};
+
+const MainLayout = ({ children }: { children: React.ReactNode }) => {
+  return children;
+};
+
+export default MainLayout;

src/app/globals.css

@@ -2,10 +2,95 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body,
+:root {
+  height: 100%;
+}
+
+:root {
+  --color-white: #fff;
+
+  /* Main Color */
+  --color-main-50: #eff1fc;
+  --color-main-100: #d6dcfc;
+  --color-main-200: #bdc7fc;
+  --color-main-300: #a4b2fc;
+  --color-main-400: #8b9cfc;
+  --color-main-500: #768bfc;
+  --color-main-600: #627afc;
+  --color-main-700: #4f6afc;
+  --color-main-800: #3f5cfc;
+  --color-main-900: #3751e1;
+
+  /* Navy Color */
+  --color-navy-50: #e8ebf7;
+  --color-navy-100: #d9def2;
+  --color-navy-200: #b3bde5;
+  --color-navy-300: #8d9cd8;
+  --color-navy-400: #687bca;
+  --color-navy-500: #425abd;
+  --color-navy-600: #354897;
+  --color-navy-700: #283773;
+  --color-navy-800: #1a244c;
+  --color-navy-900: #0d1226;
+
+  /* Purple Color */
+  --color-purple-50: #f2f3fc;
+  --color-purple-100: #dde0f8;
+  --color-purple-200: #c3c8f3;
+  --color-purple-300: #a1a9ec;
+  --color-purple-400: #7f89e6;
+  --color-purple-500: #5d6adf;
+  --color-purple-600: #3b4bd8;
+  --color-purple-700: #2736c4;
+  --color-purple-800: #202da2;
+  --color-purple-900: #192380;
+
+  /* Blue Color */
+  --color-blue-50: #ebf5ff;
+  --color-blue-100: #d6ebff;
+  --color-blue-200: #b8dcff;
+  --color-blue-300: #94caff;
+  --color-blue-400: #70b8ff;
+  --color-blue-500: #4da7ff;
+  --color-blue-600: #389dff;
+  --color-blue-700: #0f88ff;
+  --color-blue-800: #0074e5;
+  --color-blue-900: #005fbd;
+
+  /* Green Color */
+  --color-green-50: #e6f9fa;
+  --color-green-100: #d8f3f6;
+  --color-green-200: #a0ecf2;
+  --color-green-300: #5fe4ed;
+  --color-green-400: #31dde8;
+  --color-green-500: #17c2cd;
+  --color-green-600: #14a9b3;
+  --color-green-700: #118f97;
+  --color-green-800: #0e757c;
+  --color-green-900: #0b5b60;
+
+  /* Grey Color */
+  --color-grey-50: #f9fafb;
+  --color-grey-100: #f2f4f6;
+  --color-grey-200: #e5e8eb;
+  --color-grey-300: #d1d6db;
+  --color-grey-400: #b0b8c1;
+  --color-grey-500: #8b95a1;
+  --color-grey-600: #6b7684;
+  --color-grey-700: #4e5968;
+  --color-grey-800: #333d4b;
+  --color-grey-900: #191f28;
+
+  /* Error Color */
+  --color-error: #ff2f54;
+}
+
 @layer base {
-	body {
-		width: 100%;
-        max-width: 768px;
-        margin: 0 auto;
-	}
-}
+  body {
+    width: 100%;
+    max-width: 768px;
+    margin: 0 auto;
+  }
+}

src/app/layout.tsx

@@ -1,21 +1,27 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import "./globals.css";
+import { DM_Sans } from "next/font/google";
 import React from "react";
 import { GlobalProvider } from "./global-provider";
+import NavigationBar from "@/components/navigation-bar/navigation-bar";
 
-const inter = Inter({ subsets: ["latin"] });
+const dm_sans = DM_Sans({ subsets: ["latin"], weight: ["400", "500", "600", "700"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Payout",
+  description: "Calculate your dividend payout with ease.",
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
-        <GlobalProvider>{children}</GlobalProvider>
+      <body className={dm_sans.className}>
+        <GlobalProvider>
+          <div className="relative flex h-full w-full flex-col items-center justify-center">
+            <NavigationBar />
+            <div className="h-full w-full flex-1">{children}</div>
+          </div>
+        </GlobalProvider>
       </body>
     </html>
   );

src/components/Button/index.ts

@@ -1 +1 @@
-export * from "./Button";
+export * from "./button";

src/components/logo/index.ts

@@ -0,0 +1 @@
+export * from "./logo";

src/components/logo/logo.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Logo = () => {
+  return <p className="text-[19px] font-bold text-grey-900">Payout</p>;
+};
+
+export default Logo;

src/components/lottie-player/index.ts

@@ -0,0 +1 @@
+export * from "./lottie-player";

src/components/lottie-player/lottie-player.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export interface LottiePlayerProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const LottiePlayer = ({ ...props }: LottiePlayerProps) => {
+  return <div {...props}></div>;
+};
+
+export default LottiePlayer;

src/components/navigation-bar/index.ts

@@ -0,0 +1 @@
+export * from "./navigation-bar";

src/components/navigation-bar/navigation-bar.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import Logo from "../logo/logo";
+
+const NavigationBar = () => {
+  return (
+    <div className="absolute left-0 top-0 flex w-full items-center justify-start bg-transparent px-4 py-2.5">
+      <Logo />
+    </div>
+  );
+};
+
+export default NavigationBar;