docs: add why unittcms (#88)

README.md

@@ -1,4 +1,18 @@
-# UnitTCMS
+<p align="center">
+  <a href="https://www.unittcms.org/en">
+    <img width="20%" src="https://raw.githubusercontent.com/kimatata/unittcms/refs/heads/main/frontend/public/favicon/icon-192.png" alt="UnitTCMS" />
+    <h1 align="center">UnitTCMS</h1>
+  </a>
+</p>
+</br>
+<p align="center">
+  <a href="https://github.com/kimatata/unittcms/blob/main/LICENSE">
+    <img src="https://img.shields.io/github/license/kimatata/unittcms" alt="License">
+  </a>
+  <a href="https://github.com/kimatata/unittcms/releases">
+    <img src="https://img.shields.io/github/v/release/kimatata/unittcms" alt="Release">
+  </a>
+</p>
 
 UnitTCMS is an open source test case management system. The application is free and designed for self-hosted use. It can be used in environments with strict security requirements. For more information, please visit the demo site and docs.
 
@@ -23,6 +37,16 @@ You can access the app at `http://localhost:8000`
 
 [Looking for a non-Docker way?](https://kimatata.github.io/unittcms/docs/getstarted/manual)
 
+## Why UnitTCMS
+
+There are many test case management tools available in the market, which can be categorized into proprietary and open-source solutions.
+
+Proprietary tools often come with modern, user-friendly interfaces but tend to be cloud-based, which may raise security concerns for some organizations. While some of them do offer on-premises options, these tend to be significantly more expensive.
+
+There are also open-source tools, but many feature older user interfaces that involve frequent page reloads, which can hinder usability.
+
+With these challenges in mind, I set out to develop a modern, user-friendly, open-source test case management tool that anyone can use for free in a secure, self-hosted environment.
+
 ## Features
 
 ### Project-Based

docs/docs/dev/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Development",
-  "position": 4
+  "position": 5
 }

docs/docs/getstarted/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Get started",
-  "position": 2
+  "position": 3
 }

docs/docs/roadmap/index.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 6
 ---
 
 # Roadmap

docs/docs/usage/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Usage",
-  "position": 3
+  "position": 4
 }

docs/docs/why.md

@@ -0,0 +1,28 @@
+---
+sidebar_position: 2
+---
+
+# Why UnitTCMS
+
+No matter the product, it is difficult to manage all testing with automated tests alone. Depending on the environment, Some portion of testing often involves manual test cases. In my team, we have been managing test cases using Excel. While Excel is a highly versatile tool, it is not specifically designed for test case management, which can make it inconvenient in certain scenarios.
+
+For example,
+
+- writing long test procedures can lead to oversized cells
+- forced horizontal scrolling
+- difficult to attach image files.
+- the Excel file may become heavy
+- Need to aggregate test cases and visualization
+- Not ideal for simultaneous editing by multiple people.
+
+Due to these challenges, it becomes clear that a dedicated tool is necessary when managing a substantial number of manual tests.
+
+## Other tools
+
+There are many test case management tools available in the market, which can be categorized into proprietary and open-source solutions.
+
+Proprietary tools often come with modern, user-friendly interfaces but tend to be cloud-based, which may raise security concerns for some organizations. While some of them do offer on-premises options, these tend to be significantly more expensive.
+
+There are also open-source tools, but many feature older user interfaces that involve frequent page reloads, which can hinder usability.
+
+With these challenges in mind, I set out to develop a modern, user-friendly, open-source test case management tool that anyone can use for free in a secure, self-hosted environment.

docs/src/css/custom.css

@@ -6,25 +6,25 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #205d3b;
+  --ifm-color-primary: #28d06c;
-  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary-dark: #24b860;
-  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-darker: #20a256;
-  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-darkest: #1b8a48;
-  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-light: #3add80;
-  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-lighter: #5be593;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary-lightest: #7bedaa;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #4fddbf;
+  --ifm-color-primary: #28d06c;
-  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-dark: #24b860;
-  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darker: #20a256;
-  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-darkest: #1b8a48;
-  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-light: #3add80;
-  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lighter: #5be593;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary-lightest: #7bedaa;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.15);
 }

docs/src/pages/index.js

@@ -9,15 +9,18 @@ export default function Home() {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout title={`Hello from ${siteConfig.title}`} description="Description will go into a meta tag in <head />">
-      <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <header className={clsx('hero', styles.heroBanner)}>
         <div className="container">
           <Heading as="h1" className="hero__title">
             UnitTCMS Docs
           </Heading>
           <p className="hero__subtitle">Open Source Test Case Management System</p>
-          <div>
+          <div className={styles.buttons}>
-            <Link className="button button--secondary button--lg" to="/docs">
+            <Link className="button button--primary button--lg" to="/docs">
-              Move to Docs📰
+              Docs📰
+            </Link>
+            <Link className="button button--secondary button--lg" to="https://github.com/kimatata/unittcms">
+              GitHub
             </Link>
           </div>
         </div>

docs/src/pages/index.module.css

@@ -5,10 +5,15 @@
 
 .heroBanner {
   padding: 4rem 0;
+  text-align: center;
   position: relative;
   overflow: hidden;
 }
 
+.heroTitle {
+  color: blueviolet;
+}
+
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 2rem;
@@ -18,6 +23,7 @@
 
 .buttons {
   display: flex;
+  column-gap: 10px;
   align-items: center;
   justify-content: center;
 }