From 7a2bac2a7b491c37b46632041748c44136661074 Mon Sep 17 00:00:00 2001
From: AramJonghu <aramjonghu@tutamail.com>
Date: Tue, 30 Jun 2026 21:22:36 +0200
Subject: [PATCH] add(About+Systems): separated into components

---
 frontend/src/components/About.tsx   | 10 ++++++++++
 frontend/src/components/Systems.tsx | 10 ++++++++++
 frontend/src/pages/Home.tsx         | 14 ++++++++++++--
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/About.tsx
 create mode 100644 frontend/src/components/Systems.tsx

diff --git a/frontend/src/components/About.tsx b/frontend/src/components/About.tsx
new file mode 100644
index 0000000..4aeddf1
--- /dev/null
+++ b/frontend/src/components/About.tsx
@@ -0,0 +1,10 @@
+export default function About() {
+    return(
+        <>
+            <h1 className="text-center m-6 text-3xl font-bold text-ctp-mauve">
+            About
+            </h1>
+            <div></div>
+        </>
+    );
+}
diff --git a/frontend/src/components/Systems.tsx b/frontend/src/components/Systems.tsx
new file mode 100644
index 0000000..668879c
--- /dev/null
+++ b/frontend/src/components/Systems.tsx
@@ -0,0 +1,10 @@
+export default function Systems() {
+    return (
+        <>
+            <h1 className="text-center m-6 text-3xl font-bold text-ctp-mauve">
+                Systems
+            </h1>
+            <div></div>
+        </>
+    );
+}
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 5798fae..ada68db 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,5 +1,7 @@
 import { useState, type ReactElement } from "react";
 import ProjectsReadme from "../components/ProjectsReadme";
+import Systems from "../components/Systems";
+import About from "../components/About";
 
 interface ProjectInfo {
     id: string;
@@ -73,12 +75,20 @@ export default function Home(): ReactElement {
         {
             id: "systems",
             title: "Systems",
-            content: <p>Systems content goes here.</p>,
+            content: (
+                <>
+                    <Systems />
+                </>
+            ),
         },
         {
             id: "about",
             title: "About",
-            content: <p>About content goes here.</p>,
+            content: (
+                <>
+                <About />
+                </>
+            ),
         },
     ];