style: add gradient background

remvze · Nov 1, 2023 · 77fed03 · 77fed03
1 parent 8cceb6e
commit 77fed03
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 10 deletions.
diff --git 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
@@ -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>
   );