From 5916e86d3c6de9912b2c9bd490fa04cd9a0958dd Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Wed, 7 Feb 2024 21:38:28 +0330
Subject: [PATCH] style: revert pattern

---
 src/components/hero/hero.module.css | 33 ++++++++++++++++++++++++++---
 src/components/hero/hero.tsx        |  2 ++
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/components/hero/hero.module.css b/src/components/hero/hero.module.css
index cfc6447..11a2de3 100644
--- a/src/components/hero/hero.module.css
+++ b/src/components/hero/hero.module.css
@@ -3,7 +3,7 @@
 
   .container {
     position: relative;
-    padding: 100px 0 60px;
+    padding: 120px 0 60px;
 
     & .pattern {
       position: absolute;
@@ -21,8 +21,8 @@
         0 0,
         30px 30px;
       background-size: 30px 30px;
-      opacity: 0.7;
-      mask-image: linear-gradient(transparent, #fff, transparent);
+      opacity: 0.8;
+      mask-image: linear-gradient(#fff, transparent, transparent);
     }
   }
 
@@ -33,8 +33,35 @@
   }
 
   & .title {
+    display: flex;
+    column-gap: 15px;
     align-items: center;
 
+    & div {
+      flex-grow: 1;
+      height: 1px;
+
+      &.left {
+        background: linear-gradient(
+          90deg,
+          transparent,
+          transparent,
+          var(--color-neutral-200),
+          var(--color-neutral-300)
+        );
+      }
+
+      &.right {
+        background: linear-gradient(
+          90deg,
+          var(--color-neutral-300),
+          var(--color-neutral-200),
+          transparent,
+          transparent
+        );
+      }
+    }
+
     & h1 {
       font-family: var(--font-display);
       font-size: var(--font-2xlg);
diff --git a/src/components/hero/hero.tsx b/src/components/hero/hero.tsx
index 61a355f..61b46b9 100644
--- a/src/components/hero/hero.tsx
+++ b/src/components/hero/hero.tsx
@@ -24,7 +24,9 @@ export function Hero() {
         />
 
         <div className={styles.title}>
+          <div className={styles.left}></div>
           <h1>Moodist</h1>
+          <div className={styles.right}></div>
         </div>
 
         <p className={styles.desc}>