Merge pull request #48 from dorimu0/feat/component-intro

紹介ページ、ログインモーダルcomponentレイアウトの作成

Author: Lainari

public/images/login/index.tsx

@@ -0,0 +1 @@
+export const logo = '/images/login/logo.png';

public/images/login/logo.png

@@ -0,0 +1 @@
+export const introImg = '/svgs/intro/MainImg.svg';

public/svgs/intro/MainImg.svg

@@ -0,0 +1,8 @@
+const svgs = {
+  login: '/svgs/login/login.svg',
+  google: '/svgs/login/google.svg',
+  yahoo: '/svgs/login/yahoo.svg',
+  line: '/svgs/login/line.svg',
+};
+
+export default svgs;

public/svgs/intro/index.tsx

@@ -0,0 +1,73 @@
+import Image from 'next/image';
+import {ModalProps} from '@/src/interfaces/intro';
+import svgs from '@/public/svgs/login';
+import {logo} from '@/public/images/login';
+
+export default function Login({onClose}: ModalProps) {
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+      <div className=" bg-white rounded-lg w-1/2 h-3/5 py-10 box-border">
+        <div className="w-full h-full flex items-center box-border">
+          {/* LEFT */}
+          <div className="w-3/5 text-center">
+            <div className="text-3xl font-semibold">Welcome to Minori</div>
+            <div className="text-sm text-neutral-400 my-2">
+              Get started - it free. No credit card needed.
+            </div>
+            <Image
+              src={svgs.login}
+              alt="logo"
+              width={450}
+              height={450}
+              className="m-auto mb-0"
+            />
+          </div>
+          {/* RIGHT */}
+          <div className="w-2/5">
+            <div className="w-4/5 text-sm">
+              <Image
+                src={logo}
+                alt="logo"
+                width={250}
+                height={250}
+                className="m-auto w-4/5 "
+              />
+              <div className="my-5">
+                <button className="block m-auto border-2 w-full flex items-center justify-between px-10 py-2 m-auto my-3">
+                  <Image
+                    src={svgs.google}
+                    alt="google"
+                    width={15}
+                    height={15}
+                  />
+                  <div className="ml-2 text-center w-full">
+                    Continue with Google
+                  </div>
+                </button>
+                <button className="block m-auto border-2 w-full flex items-center justify-between px-10 py-2 m-auto my-3">
+                  <Image src={svgs.yahoo} alt="google" width={15} height={15} />
+                  <div className="ml-2 text-center w-full">
+                    Continue with Yahoo
+                  </div>
+                </button>
+                <button className="block m-auto border-2 w-full flex items-center justify-between px-10 py-2 m-auto my-3">
+                  <Image src={svgs.line} alt="google" width={15} height={15} />
+                  <div className="ml-2 text-center w-full">
+                    Continue with Line
+                  </div>
+                </button>
+              </div>
+              <div className="w-1/5"></div>
+            </div>
+          </div>
+        </div>
+        <button
+          onClick={onClose}
+          className="px-4 py-2 bg-blue-500 text-white rounded"
+        >
+          닫기
+        </button>
+      </div>
+    </div>
+  );
+}

public/svgs/login/google.svg

@@ -0,0 +1,37 @@
+'use client';
+import {introImg} from '@/public/svgs/intro';
+import {useState} from 'react';
+import Image from 'next/image';
+import Login from './component/login';
+
+export default function Page() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openModal = () => {
+    setIsOpen(true);
+  };
+
+  const onClose = () => {
+    setIsOpen(false);
+  };
+  return (
+    <main className="flex min-h-screen flex-col items-center p-24">
+      <div className="text-5xl font-semibold text-center">
+        Make your collateral more efficient, <br /> more accessible.
+      </div>
+      <div className="m-4 font-semibold text-gray-500">
+        Minori makes it easier and more efficient to analyze data with LLM.
+      </div>
+      <div>
+        <Image src={introImg} width={500} height={500} alt="mainImg" />
+      </div>
+      <button
+        onClick={openModal}
+        className="bg-indigo-600 text-white py-2 px-7 rounded-3xl"
+      >
+        Get Start
+      </button>
+      {isOpen && <Login onClose={onClose} />}
+    </main>
+  );
+}

public/svgs/login/index.tsx

@@ -0,0 +1,3 @@
+export interface ModalProps {
+  onClose: () => void;
+}