From 77fed0308ad55ca32f07b4f30e7a7936063d842a Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Wed, 1 Nov 2023 15:27:08 +0330
Subject: [PATCH] style: add gradient background

---
 .../sections/ready/ready.module.css           | 23 +++++++++++++++++++
 src/components/sections/ready/ready.tsx       | 22 ++++++++++--------
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/components/sections/ready/ready.module.css b/src/components/sections/ready/ready.module.css
index 67ef312..97afa25 100644
--- a/src/components/sections/ready/ready.module.css
+++ b/src/components/sections/ready/ready.module.css
@@ -1,4 +1,27 @@
 .ready {
+  & .wrapper {
+    position: relative;
+    padding: 0 20px 40px;
+    border-radius: 0 0 20px 20px;
+    background: linear-gradient(transparent, var(--color-neutral-100));
+
+    &::after {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 70%;
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        var(--color-neutral-300),
+        transparent
+      );
+      content: '';
+      transform: translateX(-50%);
+    }
+  }
+
   & .iconContainer {
     display: flex;
     flex-direction: column;
diff --git a/src/components/sections/ready/ready.tsx b/src/components/sections/ready/ready.tsx
index b34f1b0..991f375 100644
--- a/src/components/sections/ready/ready.tsx
+++ b/src/components/sections/ready/ready.tsx
@@ -8,18 +8,20 @@ export function Ready() {
   return (
     <div className={styles.ready}>
       <Container>
-        <div className={styles.iconContainer}>
-          <div className={styles.tail} />
-          <div className={styles.icon}>
-            <RiSparkling2Line />
+        <div className={styles.wrapper}>
+          <div className={styles.iconContainer}>
+            <div className={styles.tail} />
+            <div className={styles.icon}>
+              <RiSparkling2Line />
+            </div>
           </div>
-        </div>
 
-        <h2 className={styles.title}>Are you ready?</h2>
-        <p className={styles.desc}>Create your calm oasis in seconds!</p>
-        <a className={styles.button} href="#app">
-          Use Moodist
-        </a>
+          <h2 className={styles.title}>Are you ready?</h2>
+          <p className={styles.desc}>Create your calm oasis in seconds!</p>
+          <a className={styles.button} href="#app">
+            Use Moodist
+          </a>
+        </div>
       </Container>
     </div>
   );