Create Top page

frontend/src/app/[locale]/PaneDemoImages.tsx

@@ -0,0 +1,81 @@
+"use client";
+import { title } from "@/components/primitives";
+import { useState, useEffect } from "react";
+import { Tabs, Tab, Image } from "@nextui-org/react";
+
+type PaneDemoImagesMessages = {
+  title: string;
+  caseEdit: string;
+  caseHome: string;
+  caseRun: string;
+};
+type Props = {
+  messages: PaneDemoImagesMessages;
+};
+
+export default function DemoImages({ messages }: Props) {
+  const [currentTab, setcurrentTab] = useState("edit");
+  const [currentImage, setcurrentImage] = useState({
+    src: "/top/caseEdit.png",
+    alt: messages.caseEdit,
+  });
+  const tabs = [
+    {
+      key: "edit",
+      title: messages.caseEdit,
+      src: "/top/caseEdit.png",
+      alt: messages.caseEdit,
+    },
+    {
+      key: "home",
+      title: messages.caseHome,
+      src: "/top/caseHome.png",
+      alt: messages.caseHome,
+    },
+    {
+      key: "run",
+      title: messages.caseRun,
+      src: "/top/caseRun.png",
+      alt: messages.caseRun,
+    },
+  ];
+
+  useEffect(() => {
+    const found = tabs.find((tab) => tab.key === currentTab);
+    const newImage = { src: found.src, alt: found.title };
+    setcurrentImage(newImage);
+  }, [currentTab]);
+
+  return (
+    <>
+      <div className="flex flex-wrap lg:text-left text-center">
+        <div className="w-full lg:w-5/12 p-4">
+          <h2 className={title({ size: "sm" })}>{messages.title}</h2>
+          <br />
+          <Tabs
+            aria-label="Options"
+            color={"primary"}
+            radius="full"
+            size="md"
+            className="mt-8"
+            selectedKey={currentTab}
+            onSelectionChange={setcurrentTab}
+          >
+            {tabs.map((tab) => (
+              <Tab key={tab.key} title={tab.title} />
+            ))}
+          </Tabs>
+        </div>
+
+        <div className="flex justify-center w-full lg:w-7/12 p-4 min-h-96">
+          <Image
+            isBlurred
+            src={currentImage.src}
+            alt={currentImage.alt}
+            className="max-w-full px-5"
+          />
+        </div>
+      </div>
+    </>
+  );
+}

frontend/src/app/[locale]/PaneMainFeatures.tsx

@@ -31,31 +31,28 @@ export default function MainTitle() {
 
   return (
     <>
-      {features.map((feature, index) => (
-        <Card
-          key={feature.title}
-          className={`max-w-[300px] min-h-[180px] ${
-            index !== 0 ? "mt-4 sm:mt-0 sm:ml-4" : ""
-          }`}
-        >
-          <CardHeader className="flex gap-3">
-            <div>
-              <Avatar
-                className="bg-green-100"
-                showFallback
-                src=""
-                fallback={feature.icon}
-              />
-            </div>
-            <div className="flex flex-col">
-              <h4 className="font-bold text-large">{feature.title}</h4>
-            </div>
-          </CardHeader>
-          <CardBody className="pt-0">
-            <p className="text-default-500">{feature.detail}</p>
-          </CardBody>
-        </Card>
-      ))}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {features.map((feature) => (
+          <Card key={feature.title} className="max-w-[300px] min-h-[180px]">
+            <CardHeader className="flex gap-3">
+              <div>
+                <Avatar
+                  className="bg-green-100"
+                  showFallback
+                  src=""
+                  fallback={feature.icon}
+                />
+              </div>
+              <div className="flex flex-col">
+                <h4 className="font-bold text-large">{feature.title}</h4>
+              </div>
+            </CardHeader>
+            <CardBody className="pt-0">
+              <p className="text-default-500">{feature.detail}</p>
+            </CardBody>
+          </Card>
+        ))}
+      </div>
     </>
   );
 }

frontend/src/app/[locale]/PaneMainTitle.tsx

@@ -29,6 +29,8 @@ export default function MainTitle({ locale }: Props) {
         })}
       >
         {t("oss_tcmt")}
+        <br />
+        {t("web_application")}
       </h1>
       <h4 className={subtitle({ class: "mt-4" })}>
         {t("integrate_and_manage")}

frontend/src/app/[locale]/page.tsx

@@ -1,20 +1,26 @@
 import { useTranslations } from "next-intl";
 import { title, subtitle } from "@/components/primitives";
 import { Divider } from "@nextui-org/react";
-import Image from "next/image";
-import heroImage from "./hero.png";
-import MainTitle from "./MainTitle";
-import MainFeatures from "./MainFeatures";
-import SelfHostProcedure from "./SelfHostProcedure";
+import PaneMainTitle from "./PaneMainTitle";
+import PaneMainFeatures from "./PaneMainFeatures";
+import PaneDemoImages from "./PaneDemoImages";
+import PaneSelfHostProcedure from "./PaneSelfHostProcedure";
 
 export default function Home(params: { locale: string }) {
   const t = useTranslations("Index");
 
+  const messages = {
+    title: t("organize_test_cases"),
+    caseEdit: t("case_edit"),
+    caseHome: t("case_home"),
+    caseRun: t("case_run"),
+  };
+
   return (
     <section className="mx-auto max-w-screen-xl my-12">
       <div className="flex flex-wrap">
         <div className="w-full md:w-7/12 order-last md:order-first p-4">
-          <MainTitle locale={params.locale} />
+          <PaneMainTitle locale={params.locale} />
         </div>
 
         <div className="w-full md:w-5/12 p-4">
@@ -51,36 +57,35 @@ export default function Home(params: { locale: string }) {
       </div>
 
       <div
-        className="flex flex-wrap flex-col items-center sm:flex-row sm:items-start"
+        className="flex flex-wrap flex-col items-center"
         style={{
           marginTop: "6rem",
         }}
       >
-        <MainFeatures />
+        <PaneMainFeatures />
       </div>
 
       <Divider className="my-12" />
-
-      <div className="flex flex-wrap mt-12">
-        <div className="w-full md:w-4/12 order-last md:order-first p-4">
-          <h2 className={title({ size: "sm" })}>{t("organize_test_cases")}</h2>
-        </div>
-        <div className="w-full md:w-8/12 p-4">
-          <Image src={heroImage} alt="Hero" className="max-w-2xl" />
-        </div>
-      </div>
+      <PaneDemoImages messages={messages} />
 
       <Divider className="my-12" />
-
       <div className="flex flex-wrap mt-12">
         <div className="w-full md:w-4/12 order-last md:order-first p-4">
           <h2 className={title({ size: "sm" })}>{t("self_host")}</h2>
         </div>
 
         <div className="w-full md:w-8/12 p-4">
-          <SelfHostProcedure />
+          <PaneSelfHostProcedure />
         </div>
       </div>
+
+      <Divider className="my-12" />
+      <div className="flex flex-wrap mt-12">
+        <div className="w-full md:w-4/12 order-last md:order-first p-4">
+          <h2 className={title({ size: "sm" })}>{t("roadmap")}</h2>
+        </div>
+        <div className="w-full md:w-8/12 p-4"></div>
+      </div>
     </section>
   );
 }