feat: add ready section

src/components/app/app.tsx

@@ -53,6 +53,7 @@ export function App() {
     <SnackbarProvider>
       <StoreConsumer>
         <Container>
+          <div id="app" />
           <Buttons />
           <Categories categories={allCategories} />
         </Container>

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';

src/components/sections/ready/index.ts

@@ -0,0 +1 @@
+export { Ready } from './ready';

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;
+  }
+}

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>
+  );
+}

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>
 

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);