Create Top page

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

@@ -0,0 +1,55 @@
+import { title, subtitle } from "@/components/primitives";
+import { Link } from "@/src/navigation";
+import { button as buttonStyles } from "@nextui-org/react";
+import { useTranslations } from "next-intl";
+
+export default function MainTitle() {
+  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>
+      <br />
+      <br />
+      <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>
+
+        <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>
+      </div>
+    </div>
+  );
+}

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

@@ -1,33 +1,44 @@
-import { button as buttonStyles } from "@nextui-org/react";
-import { title, subtitle } from "@/components/primitives";
 import { useTranslations } from "next-intl";
-import { Link } from "@/src/navigation";
+import MainTitle from "./MainTitle";
+import Image from "next/image";
+import heroImage from "./hero.png";
 
 export default function Home() {
   const t = useTranslations("Index");
 
   return (
-    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-lg text-center justify-center">
-        <h1 className={title({ color: "pink" })}>Open Source&nbsp;</h1>
-        <h1 className={title()}>Test Case Management Tool&nbsp;</h1>
-        <br />
-        <h2 className={subtitle({ class: "text-inherit mt-4" })}>
-          {t("integrate_and_manage")}
-        </h2>
+    // <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 />
+        </div>
+
+        <div className="w-full md:w-5/12 p-4">
+          <div style={{ position: "relative", textAlign: "center", padding: "1rem" }}>
+            <span style={{ fontSize: "10rem", position: "relative", zIndex: 1 }}>
+              ⚗️
+            </span>
+            <div
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                filter: "blur(48px)",
+                zIndex: 0,
+                background: "linear-gradient(to bottom, #ffecd2, #fcb69f)",
+              }}
+            ></div>
+          </div>
+        </div>
       </div>
 
-      <div className="flex gap-3">
-        <Link
-          href="/projects"
-          className={buttonStyles({
-            color: "primary",
-            radius: "full",
-            variant: "shadow",
-          })}
-        >
-          {t("get_started")}
-        </Link>
+      <div className="mt-12">
+        <Image src={heroImage} alt="Hero" />
       </div>
     </section>
   );