From 5b3972b3470f3c43903d9a20925ed49321f07440 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Fri, 30 Aug 2024 22:26:57 +0330
Subject: [PATCH] feat: add Moodist description to tools

---
 .../special-button/special-button.tsx         |  5 +++--
 src/components/tools/about.astro              | 20 +++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/special-button/special-button.tsx b/src/components/special-button/special-button.tsx
index 1c660ec..230738e 100644
--- a/src/components/special-button/special-button.tsx
+++ b/src/components/special-button/special-button.tsx
@@ -6,19 +6,20 @@ interface SpecialButtonProps {
   children: React.ReactNode;
   className?: string;
   href: string;
+  internal?: boolean;
 }
 
 export function SpecialButton({
   children,
   className,
   href,
+  internal,
 }: SpecialButtonProps) {
   return (
     <a
       className={cn(styles.button, className)}
       href={href}
-      rel="noreferrer"
-      target="_blank"
+      {...(!internal ? { rel: 'noreferrer', target: '_blank' } : {})}
     >
       {children}
     </a>
diff --git a/src/components/tools/about.astro b/src/components/tools/about.astro
index 1490962..68eaea3 100644
--- a/src/components/tools/about.astro
+++ b/src/components/tools/about.astro
@@ -1,5 +1,6 @@
 ---
 import { Container } from '../container';
+import { SpecialButton } from '../special-button';
 
 interface Props {
   text: string;
@@ -12,6 +13,17 @@ const { text } = Astro.props;
   <Container tight>
     <h3 class="title">About This Tool</h3>
     <p class="text">{text}</p>
+
+    <h3 class="title">About Moodist</h3>
+    <p class="text">
+      Immerse yourself in tranquility with Moodist, a simple ambient sound
+      generator. Create the perfect atmosphere for relaxation, focus, or sleep
+      by customizing soothing soundscapes to match your mood.
+    </p>
+
+    <div class="button">
+      <SpecialButton href="/" internal>Use Moodist</SpecialButton>
+    </div>
   </Container>
 </div>
 
@@ -25,10 +37,18 @@ const { text } = Astro.props;
     font-family: var(--font-heading);
     font-size: var(--font-md);
     font-weight: 600;
+
+    &:not(:first-of-type) {
+      margin-top: 40px;
+    }
   }
 
   .text {
     line-height: 1.6;
     color: var(--color-foreground-subtle);
   }
+
+  .button {
+    margin-top: 24px;
+  }
 </style>