From e372d2f398dbdcfad1069b50911ba840f0c9a1fe Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Wed, 1 Nov 2023 15:16:07 +0330
Subject: [PATCH] feat: add ready section

---
 src/components/app/app.tsx                    |  1 +
 src/components/sections/index.ts              |  1 +
 src/components/sections/ready/index.ts        |  1 +
 .../sections/ready/ready.module.css           | 61 +++++++++++++++++++
 src/components/sections/ready/ready.tsx       | 26 ++++++++
 src/pages/index.astro                         |  3 +-
 src/styles/base/base.css                      |  4 ++
 7 files changed, 96 insertions(+), 1 deletion(-)
 create mode 100644 src/components/sections/ready/index.ts
 create mode 100644 src/components/sections/ready/ready.module.css
 create mode 100644 src/components/sections/ready/ready.tsx

diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx
index dd9f0bc..122045c 100644
--- a/src/components/app/app.tsx
+++ b/src/components/app/app.tsx
@@ -53,6 +53,7 @@ export function App() {
     <SnackbarProvider>
       <StoreConsumer>
         <Container>
+          <div id="app" />
           <Buttons />
           <Categories categories={allCategories} />
         </Container>
diff --git a/src/components/sections/index.ts b/src/components/sections/index.ts
index 405ecc1..da878a0 100644
--- a/src/components/sections/index.ts
+++ b/src/components/sections/index.ts
@@ -1,2 +1,3 @@
 export { About as AboutSection } from './about';
 export { Why as WhySection } from './why';
+export { Ready as ReadySection } from './ready';
diff --git a/src/components/sections/ready/index.ts b/src/components/sections/ready/index.ts
new file mode 100644
index 0000000..ffb272e
--- /dev/null
+++ b/src/components/sections/ready/index.ts
@@ -0,0 +1 @@
+export { Ready } from './ready';
diff --git a/src/components/sections/ready/ready.module.css b/src/components/sections/ready/ready.module.css
new file mode 100644
index 0000000..67ef312
--- /dev/null
+++ b/src/components/sections/ready/ready.module.css
@@ -0,0 +1,61 @@
+.ready {
+  & .iconContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 15px;
+
+    & .tail {
+      width: 1px;
+      height: 75px;
+      background: linear-gradient(transparent, var(--color-neutral-300));
+    }
+
+    & .icon {
+      display: flex;
+      width: 45px;
+      height: 45px;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 50%;
+      background-color: var(--color-neutral-100);
+      color: #fbbf24;
+      font-size: var(--font-md);
+    }
+  }
+
+  & .title {
+    margin-bottom: 12px;
+    font-family: var(--font-display);
+    font-size: var(--font-lg);
+    font-weight: 600;
+    text-align: center;
+  }
+
+  & .desc {
+    color: var(--color-foreground-subtle);
+    text-align: center;
+  }
+
+  & .button {
+    display: flex;
+    width: 120px;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 100px;
+    border-top: 2px solid var(--color-neutral-950);
+    border-bottom: 3px solid var(--color-neutral-600);
+    margin: 24px auto 0;
+    background-color: var(--color-neutral-700);
+    color: var(--color-neutral-200);
+    cursor: pointer;
+    font-family: var(--font-heading);
+    font-size: var(--font-sm);
+    line-height: 0;
+    outline: none;
+    text-decoration: none;
+  }
+}
diff --git a/src/components/sections/ready/ready.tsx b/src/components/sections/ready/ready.tsx
new file mode 100644
index 0000000..d6b6291
--- /dev/null
+++ b/src/components/sections/ready/ready.tsx
@@ -0,0 +1,26 @@
+import { RiSparkling2Line } from 'react-icons/ri';
+
+import { Container } from '@/components/container';
+
+import styles from './ready.module.css';
+
+export function Ready() {
+  return (
+    <div className={styles.ready}>
+      <Container>
+        <div className={styles.iconContainer}>
+          <div className={styles.tail} />
+          <div className={styles.icon}>
+            <RiSparkling2Line />
+          </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>
+      </Container>
+    </div>
+  );
+}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d5f69bb..4130e39 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,7 +3,7 @@ import Layout from '@/layouts/layout.astro';
 
 import { Hero } from '@/components/hero';
 import { App } from '@/components/app';
-import { AboutSection, WhySection } from '@/components/sections';
+import { AboutSection, WhySection, ReadySection } from '@/components/sections';
 ---
 
 <Layout title="Welcome to Astro.">
@@ -12,6 +12,7 @@ import { AboutSection, WhySection } from '@/components/sections';
     <App client:load />
     <AboutSection />
     <WhySection />
+    <ReadySection />
   </main>
 </Layout>
 
diff --git a/src/styles/base/base.css b/src/styles/base/base.css
index 174ad6b..0bfb8db 100644
--- a/src/styles/base/base.css
+++ b/src/styles/base/base.css
@@ -7,6 +7,10 @@
   font: inherit;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   background-color: var(--color-neutral-50);
   color: var(--color-foreground);