feat(website): add user testimonials

website/src/components/HomepageFeatures/styles.module.css

@@ -1,7 +1,7 @@
 .features {
   display: flex;
   align-items: center;
-  padding: 2rem 0;
+  padding-top: 2rem;
   width: 100%;
 }
 

website/src/components/Testimonials/index.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import styles from "./styles.module.css";
+
+const testimonials = [
+  {
+    name: "Boshen",
+    handle: "boshen",
+    date: "Sep 29, 2024",
+    content:
+      "git-cliff is amazing. I managed to use its published crates for my project's release management.",
+    url: "https://x.com/boshen_c/status/1840391571495420362",
+  },
+];
+
+const getRandomTestimonial = () => {
+  const randomIndex = Math.floor(Math.random() * testimonials.length);
+  return testimonials[randomIndex];
+};
+
+export default function Testimonials(): JSX.Element {
+  const review = getRandomTestimonial();
+
+  return (
+    <div className={styles.testimonialsList}>
+      <div className={styles.testimonial}>
+        <p className={styles.content}>
+          <em>"{review.content}"</em>
+        </p>
+        <div className={styles.details}>
+          <span className={styles.author}>
+            - {review.name} (
+            <a
+              href={`https://github.com/${review.handle}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >{`@${review.handle}`}</a>
+            )
+          </span>
+          <a
+            href={review.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.date}
+          >
+            {review.date}
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

website/src/components/Testimonials/styles.module.css

@@ -0,0 +1,28 @@
+.testimonialsList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin: 1rem auto;
+  max-width: 500px;
+  padding: 0 1rem;
+}
+
+.testimonial {
+  font-size: 0.9rem;
+  line-height: 1.4;
+  padding: 0.5rem 0;
+  text-align: center;
+}
+
+.content {
+  margin: 0;
+  font-style: italic;
+}
+
+.details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-size: 0.8rem;
+  margin-top: 0.3rem;
+}

website/src/pages/index.tsx

@@ -4,6 +4,7 @@ import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import HomepageFeatures from "@site/src/components/HomepageFeatures";
+import Testimonials from "@site/src/components/Testimonials";
 import Head from "@docusaurus/Head";
 import styles from "./index.module.css";
 
@@ -70,6 +71,7 @@ export default function Home(): JSX.Element {
       <HomepageHeader />
       <main>
         <HomepageFeatures />
+        <Testimonials />
       </main>
     </Layout>
   );