update top page's demo images

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

@@ -0,0 +1,32 @@
+'use client';
+import { Image } from '@nextui-org/react';
+import { useState, useEffect } from 'react';
+import { useTheme } from 'next-themes';
+
+type Props = {
+  imageName: string;
+  altText: string;
+};
+
+export default function DemoImage({ imageName, altText }: Props) {
+  const { theme, setTheme } = useTheme();
+  const [currentTheme, setCurrentTheme] = useState('light');
+
+  useEffect(() => {
+    if (theme) {
+      setCurrentTheme(theme);
+    }
+  }, [theme]);
+
+  return (
+    <>
+      <Image
+        src={`/top/${currentTheme}/${imageName}.png`}
+        alt={altText}
+        height={500}
+        shadow="md"
+        className="max-w-full"
+      />
+    </>
+  );
+}

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

@@ -1,76 +0,0 @@
-'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">
-          <Image src={currentImage.src} alt={currentImage.alt} shadow="md" height={500} className="max-w-full" />
-        </div>
-      </div>
-    </>
-  );
-}

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

@@ -1,18 +1,35 @@
 import { useTranslations } from 'next-intl';
-import { Divider } from '@nextui-org/react';
+import { Image, Divider } from '@nextui-org/react';
+import { title, subtitle } from '@/components/primitives';
 import PaneMainTitle from './PaneMainTitle';
 import PaneMainFeatures from './PaneMainFeatures';
-import PaneDemoImages from './PaneDemoImages';
+import DemoImage from './DemoImage';
 
 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'),
-  };
+  const demoImages = [
+    {
+      uid: 'project',
+      title: t('project_title'),
+      subTitle: t('project_subtitle'),
+    },
+    {
+      uid: 'case',
+      title: t('case_management_title'),
+      subTitle: t('case_management_subtitle'),
+    },
+    {
+      uid: 'run',
+      title: t('run_management_title'),
+      subTitle: t('run_management_subtitle'),
+    },
+    {
+      uid: 'member',
+      title: t('member_management_title'),
+      subTitle: t('member_management_subtitle'),
+    },
+  ];
 
   return (
     <section className="mx-auto max-w-screen-xl my-12">
@@ -63,7 +80,20 @@ export default function Home(params: { locale: string }) {
       </div>
 
       <Divider className="my-12" />
-      <PaneDemoImages messages={messages} />
+      <div className="flex flex-wrap lg:text-left text-center">
+        {demoImages.map((demoImage) => (
+          <div key={demoImage.uid} className="flex flex-wrap">
+            <div className="w-full lg:w-5/12 p-4">
+              <h2 className={title({ size: 'sm', color: 'pink' })}>{demoImage.title}</h2>
+              <h4 className={subtitle({ class: 'mt-4' })}>{demoImage.subTitle}</h4>
+            </div>
+
+            <div className="flex justify-center w-full lg:w-7/12 p-4">
+              <DemoImage imageName={demoImage.uid} altText={demoImage.title} />
+            </div>
+          </div>
+        ))}
+      </div>
 
       <Divider className="my-12" />
       <div className="w-full text-center py-2">