From a3935765044cd884843921240158c601d450d482 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Orhun=20Parmaks=C4=B1z?= <orhunparmaksiz@gmail.com>
Date: Sun, 29 Sep 2024 20:54:10 +0300
Subject: [PATCH] feat(website): add user testimonials

---
 .../HomepageFeatures/styles.module.css        |  2 +-
 website/src/components/Testimonials/index.tsx | 51 +++++++++++++++++++
 .../components/Testimonials/styles.module.css | 28 ++++++++++
 website/src/pages/index.tsx                   |  2 +
 4 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 website/src/components/Testimonials/index.tsx
 create mode 100644 website/src/components/Testimonials/styles.module.css

diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css
index 914c8f2210..e9020fa398 100644
--- a/website/src/components/HomepageFeatures/styles.module.css
+++ b/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%;
 }
 
diff --git a/website/src/components/Testimonials/index.tsx b/website/src/components/Testimonials/index.tsx
new file mode 100644
index 0000000000..b5dc0efe68
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/website/src/components/Testimonials/styles.module.css b/website/src/components/Testimonials/styles.module.css
new file mode 100644
index 0000000000..9096618839
--- /dev/null
+++ b/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;
+}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 5cfd8357e6..06810108da 100644
--- a/website/src/pages/index.tsx
+++ b/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>
   );