From 64739ff83759f7434a32c4fc48568f47ac6a5ad2 Mon Sep 17 00:00:00 2001
From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com>
Date: Sat, 11 May 2024 11:47:30 +0900
Subject: [PATCH] Create Top page

---
 frontend/messages/en.json                   |  4 +-
 frontend/messages/ja.json                   |  4 +-
 frontend/src/app/[locale]/MainTitle.tsx     | 74 +++++++++++----------
 frontend/src/app/[locale]/page.tsx          | 31 ++++++---
 frontend/src/app/[locale]/projects/page.tsx |  2 +-
 5 files changed, 69 insertions(+), 46 deletions(-)

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index f89421b..88a9a15 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -2,7 +2,9 @@
   "Index": {
     "get_started": "Get Started",
     "oss_tcmt": "Open Source Test Case Management Tool",
-    "integrate_and_manage": "Integrate and manage all your software testing."
+    "integrate_and_manage": "Integrate and manage all your software testing.",
+    "features": "Features",
+    "demo_screen": "Demo Screen"
   },
   "Header": {
     "title": "Open Source Test Case Management Tool",
diff --git a/frontend/messages/ja.json b/frontend/messages/ja.json
index 113cf77..76f9174 100644
--- a/frontend/messages/ja.json
+++ b/frontend/messages/ja.json
@@ -2,7 +2,9 @@
   "Index": {
     "get_started": "テスト管理を始める",
     "oss_tcmt": "オープンソーステストケース管理ツール",
-    "integrate_and_manage": "ソフトウェア開発にかかわるすべてのテストを統合管理"
+    "integrate_and_manage": "ソフトウェア開発にかかわるすべてのテストを統合管理",
+    "features": "機能",
+    "demo_screen": "デモ画面"
   },
   "Header": {
     "title": "オープンソーステストケース管理ツール",
diff --git a/frontend/src/app/[locale]/MainTitle.tsx b/frontend/src/app/[locale]/MainTitle.tsx
index 2fcb4b9..c1a7791 100644
--- a/frontend/src/app/[locale]/MainTitle.tsx
+++ b/frontend/src/app/[locale]/MainTitle.tsx
@@ -1,54 +1,58 @@
 import { title, subtitle } from "@/components/primitives";
+import { Button, Link as NextUiLink } from "@nextui-org/react";
+import { ExternalLink } from "lucide-react";
 import { Link } from "@/src/navigation";
-import { button as buttonStyles } from "@nextui-org/react";
 import { useTranslations } from "next-intl";
 
-export default function MainTitle() {
+type Props = {
+  locale: string;
+};
+
+export default function MainTitle({ locale }: Props) {
   const t = useTranslations("Index");
 
   return (
     <div className="md:text-left text-center">
-      <h1 className={title({ color: "green", class: "lg:text-7xl md:text-7xl sm:text-7xl text-7xl" })}>TestPlat</h1>
+      <h1
+        className={title({
+          color: "green",
+          class: "lg:text-7xl md:text-7xl sm:text-7xl text-7xl",
+        })}
+      >
+        TestPlat
+      </h1>
       <br />
       <br />
-      <h1 className={title({ class: "lg:text-5xl md:text-5xl sm:text-5xl text-5xl" })}>{t("oss_tcmt")} </h1>
+      <h1
+        className={title({
+          class: "lg:text-5xl md:text-5xl sm:text-5xl text-5xl",
+        })}
+      >
+        {t("oss_tcmt")}
+      </h1>
       <h4 className={subtitle({ class: "mt-4" })}>
         {t("integrate_and_manage")}
       </h4>
 
       <div className="mt-5">
-        <Link
-          href="/projects"
-          className={buttonStyles({
-            color: "primary",
-            radius: "full",
-            variant: "shadow",
-          })}
-        >
-          {t("get_started")}
-        </Link>
+        <Button color="primary" radius="full">
+          <Link href={`/projects/`} locale={locale}>
+            {t("get_started")}
+          </Link>
+        </Button>
 
-        <Link
-          href="/projects"
-          className={buttonStyles({
-            color: "primary",
-            radius: "full",
-            variant: "shadow",
-          })}
-        >
-          Features
-        </Link>
-
-        <Link
-          href="/projects"
-          className={buttonStyles({
-            color: "primary",
-            radius: "full",
-            variant: "shadow",
-          })}
-        >
-          View on GitHub
-        </Link>
+        <Button color="primary" radius="full" className="ms-3">
+          <Link href={`/projects/`} locale={locale}>
+            GitHub
+          </Link>
+          <NextUiLink
+            isExternal
+            href="https://github.com/kimatata/TestCaseManager"
+            aria-label="Github"
+            showAnchorIcon
+            anchorIcon={<ExternalLink size={16} color="#fff" />}
+          ></NextUiLink>
+        </Button>
       </div>
     </div>
   );
diff --git a/frontend/src/app/[locale]/page.tsx b/frontend/src/app/[locale]/page.tsx
index e3ddd7d..c93634b 100644
--- a/frontend/src/app/[locale]/page.tsx
+++ b/frontend/src/app/[locale]/page.tsx
@@ -1,19 +1,17 @@
 import { useTranslations } from "next-intl";
-import MainTitle from "./MainTitle";
+import { title } from "@/components/primitives";
 import Image from "next/image";
 import heroImage from "./hero.png";
+import MainTitle from "./MainTitle";
 
-export default function Home() {
+export default function Home(params: { locale: string }) {
   const t = useTranslations("Index");
 
   return (
-    // <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-    //   <MainTitle />
-    // </section>
     <section className="mx-auto max-w-screen-lg my-12">
       <div className="flex flex-wrap">
         <div className="w-full md:w-7/12 order-last md:order-first p-4">
-          <MainTitle />
+          <MainTitle locale={params.locale} />
         </div>
 
         <div className="w-full md:w-5/12 p-4">
@@ -49,8 +47,25 @@ export default function Home() {
         </div>
       </div>
 
-      <div className="mt-12">
-        <Image src={heroImage} alt="Hero" />
+      <div
+        className="flex flex-wrap"
+        style={{
+          marginTop: "10rem",
+        }}
+      >
+        <h2 className={title()}>{t("features")}</h2>
+      </div>
+
+      <div
+        className="flex flex-wrap"
+        style={{
+          marginTop: "10rem",
+        }}
+      >
+        <h2 className={title()}>{t("demo_screen")}</h2>
+        <div className="mt-12">
+          <Image src={heroImage} alt="Hero" />
+        </div>
       </div>
     </section>
   );
diff --git a/frontend/src/app/[locale]/projects/page.tsx b/frontend/src/app/[locale]/projects/page.tsx
index b74d325..d6c0da0 100644
--- a/frontend/src/app/[locale]/projects/page.tsx
+++ b/frontend/src/app/[locale]/projects/page.tsx
@@ -1,7 +1,7 @@
 import ProjectsPage from "./ProjectsPage";
 import { useTranslations } from "next-intl";
 
-export default function Page(params: { locale }) {
+export default function Page(params: { locale: string }) {
   const t = useTranslations("Projects");
   const messages = {
     projectList: t("projectList"),