feat: add open-source section

src/components/source/index.ts

@@ -0,0 +1 @@
+export { Source } from './source';

src/components/source/source.module.css

@@ -0,0 +1,140 @@
+.source {
+  margin-top: 80px;
+
+  & .wrapper {
+    position: relative;
+    padding: 0 20px 40px;
+    background: linear-gradient(transparent, var(--color-neutral-100));
+    border-radius: 0 0 20px 20px;
+
+    &::after {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 70%;
+      height: 1px;
+      content: '';
+      background: linear-gradient(
+        90deg,
+        transparent,
+        var(--color-neutral-300),
+        transparent
+      );
+      transform: translateX(-50%);
+    }
+  }
+
+  & .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;
+      align-items: center;
+      justify-content: center;
+      width: 45px;
+      height: 45px;
+      font-size: var(--font-md);
+      background-color: var(--color-neutral-100);
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 50%;
+    }
+  }
+
+  & .title {
+    font-family: var(--font-display);
+    font-size: var(--font-lg);
+    font-weight: 600;
+    text-align: center;
+  }
+
+  & .desc {
+    margin-top: 8px;
+    color: var(--color-foreground-subtle);
+    text-align: center;
+  }
+
+  .button {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: max-content;
+    height: 40px;
+    padding: 0 20px;
+    margin: 16px auto 0;
+    overflow: hidden;
+    font-size: var(--font-xsm);
+    font-weight: 500;
+    color: var(--color-neutral-subtle);
+    text-decoration: none;
+    cursor: pointer;
+    background-color: var(--color-neutral-200);
+    border: none;
+    border-radius: 50px;
+    transition: 0.2s;
+
+    &::after {
+      position: absolute;
+      top: 1px;
+      left: 1px;
+      z-index: -1;
+      width: calc(100% - 2px);
+      height: calc(100% - 2px);
+      content: '';
+      background-color: var(--color-neutral-50);
+      border-radius: 100px;
+      transition: inherit;
+    }
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: -2;
+      width: 150%;
+      aspect-ratio: 1 / 1;
+      content: '';
+      background-image: conic-gradient(
+        transparent,
+        transparent,
+        var(--color-neutral-400),
+        transparent,
+        transparent,
+        transparent,
+        transparent,
+        var(--color-neutral-400),
+        transparent,
+        transparent
+      );
+      transform: translate(-50%, -50%);
+      animation-name: shine;
+      animation-duration: 6s;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+    }
+
+    &:hover::after {
+      background-color: var(--color-neutral-100);
+    }
+  }
+}
+
+@keyframes shine {
+  0% {
+    transform: translate(-50%, -50%) rotate(90deg);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) rotate(450deg);
+  }
+}

src/components/source/source.tsx

@@ -0,0 +1,32 @@
+import { FaGithub } from 'react-icons/fa/index';
+
+import styles from './source.module.css';
+import { Container } from '../container';
+
+export function Source() {
+  return (
+    <div className={styles.source}>
+      <Container>
+        <div className={styles.wrapper}>
+          <div className={styles.iconContainer}>
+            <div className={styles.tail} />
+            <div className={styles.icon}>
+              <FaGithub />
+            </div>
+          </div>
+
+          <h2 className={styles.title}>Open Source</h2>
+          <p className={styles.desc}>Moodist is free and open-source!</p>
+          <a
+            className={styles.button}
+            href="https://github.com/remvze/moodist"
+            rel="noreferrer"
+            target="_blank"
+          >
+            Source Code
+          </a>
+        </div>
+      </Container>
+    </div>
+  );
+}

src/pages/index.astro

@@ -2,20 +2,16 @@
 import Layout from '@/layouts/layout.astro';
 import Donate from '@/components/donate.astro';
 import Footer from '@/components/footer.astro';
-import AboutSection from '@/components/sections/about.astro';
-import WhySection from '@/components/sections/why.astro';
-import ReadySection from '@/components/sections/ready.astro';
 
 import { Hero } from '@/components/hero';
 import { App } from '@/components/app';
+import { Source } from '@/components/source';
 ---
 
 <Layout title="Moodist: Ambient Sounds for Focus and Calm">
   <Donate />
   <Hero />
   <App client:load />
-  <AboutSection />
-  <WhySection />
-  <ReadySection />
+  <Source />
   <Footer />
 </Layout>