docs(website): add testimonials

packages/website/package.json

@@ -24,8 +24,7 @@
 		"lucide-react": "^0.284.0",
 		"prism-react-renderer": "^1.3.5",
 		"react": "18.2.0",
-		"react-dom": "18.2.0",
-		"react-tweet": "^3.1.1"
+		"react-dom": "18.2.0"
 	},
 	"devDependencies": {
 		"@docusaurus/module-type-aliases": "2.4.3",

packages/website/src/components/hero.tsx

@@ -1,8 +1,8 @@
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import React from "react";
-import StarButton from "./landing/stars-button";
+import { StarsButton } from "./landing/stars-button";
 
-export default function Hero() {
+export function Hero() {
 	const { siteConfig } = useDocusaurusContext();
 
 	return (
@@ -28,7 +28,7 @@ export default function Hero() {
 										className="!no-underline hover:brightness-90 transition !text-stone-100 cursor-pointer rounded-lg mr-4 bg-stone-800 px-3 py-2 font-bold inline-flex items-center justify-center text-sm sm:text-lg md:text-xl">
 										Getting started 🎉
 									</a>
-									<StarButton width="170" height="50" />
+									<StarsButton />
 								</div>
 							</div>
 						</div>

packages/website/src/components/landing/features.tsx

@@ -34,7 +34,7 @@ const features: { title: string; description: string }[] = [
 	},
 ];
 
-export default function Features() {
+export function Features() {
 	return (
 		<div className="px-5 md:px-10">
 			<div className="mx-auto w-full max-w-4xl">

packages/website/src/components/landing/index.tsx

@@ -1,12 +1,15 @@
 import React from "react";
-import Hero from "../hero";
-import Features from "./features";
+import { Hero } from "../hero";
+import { Features } from "./features";
+import { Testimonials } from "./testimonials";
 
-export default function Landing() {
+export function Landing() {
 	return (
 		<main>
 			<Hero />
 			<Features />
+			<div className="h-px min-h-[1px] min-w-full bg-stone-200 dark:bg-stone-700"></div>
+			<Testimonials />
 		</main>
 	);
 }

packages/website/src/components/landing/stars-button.tsx

@@ -19,13 +19,7 @@ function useFetchStarsCount() {
 	return { starsCount };
 }
 
-export default function StarsButton({
-	width,
-	height,
-}: {
-	width: string;
-	height: string;
-}) {
+export function StarsButton() {
 	// const { starsCount } = useFetchStarsCount();
 	const starsCount = 269;
 

packages/website/src/components/landing/testimonials.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { Tweet, TweetProps } from "./tweet";
+
+const libURLSpan = `<span class="text-blue-500 dark:text-blue-400">https://github.com/TheEdoRan/next-safe-action</span>`;
+
+const tweets: TweetProps[] = [
+	{
+		tweetURL: "https://twitter.com/zaphodias/status/1654158096048979973",
+		authorName: "zaphodias",
+		authorHandle: "zaphodias",
+		authorImage:
+			"https://pbs.twimg.com/profile_images/1478681149824245762/OPY0MMZX_400x400.jpg",
+		date: "May, 4, 2023",
+		textHTML: `step 1: upgrade to next 13.4;<br>
+step 2: understand actions;<br>
+step 3: use <b>@TheEdoRan</b>'s lib 🎉`,
+	},
+	{
+		tweetURL: "https://twitter.com/rclmenezes/status/1654111420047409153",
+		authorName: "rigo",
+		authorHandle: "rclmenezes",
+		authorImage:
+			"https://pbs.twimg.com/profile_images/1298993375442382850/bMU83i0i_400x400.jpg",
+		date: "May 4, 2023",
+		textHTML: `I predict that ${libURLSpan} is going to get a loooooot of stars in a few hours :)<br><br>
+Props <b>@TheEdoRan</b>`,
+	},
+	{
+		tweetURL: "https://twitter.com/ErfanEbrahimnia/status/1699816975009013935",
+		authorName: "Erfan Ebrahimnia",
+		authorHandle: "ErfanEbrahimnia",
+		authorImage:
+			"https://pbs.twimg.com/profile_images/1590423813443002371/Cos1mBo0_400x400.jpg",
+		date: "Sep 7, 2023",
+		textHTML: `Using next-safe-action by <b>@TheEdoRan</b> in a project right now and really like it<br><br>
+It handles input-validation and errors when using Server Actions<br><br>
+${libURLSpan}`,
+	},
+	{
+		tweetURL: "https://twitter.com/Xexr/status/1674154036788879360",
+		authorName: "Xexr",
+		authorHandle: "Xexr",
+		authorImage:
+			"https://pbs.twimg.com/profile_images/1301926733747236864/wkYpwNY1_400x400.jpg",
+		date: "Jun 28, 2023",
+		textHTML: `<b>@t3dotgg</b> I saw you mention next-safe-action on your live stream. I wanted to throw my hat in the ring and give it a shout out.<br><br>
+It's honestly great, <b>@TheEdoRan</b> has done a fantastic job and it deserves way more attention, I suspect it will get it after the stream mention. 👇`,
+	},
+];
+
+export function Testimonials() {
+	return (
+		<div className="px-5 md:px-10">
+			<div className="mx-auto w-full max-w-6xl">
+				<div className="flex-col flex gap-y-20 max-[479px]:gap-[60px] items-center lg:items-center py-20 lg:py-24">
+					<div className="flex-col flex items-center justify-center gap-y-[60px] max-[479px]:gap-[60px]">
+						<div className="text-center font-bold text-3xl sm:text-4xl lg:text-5xl">
+							Coolest web devs say:
+						</div>
+						<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16">
+							{tweets.map((tweet, idx) => (
+								<Tweet key={idx} {...tweet} />
+							))}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

packages/website/src/components/landing/tweet.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+export type TweetProps = {
+	tweetURL: string;
+	authorName: string;
+	authorHandle: string;
+	authorImage: string;
+	date: string;
+	textHTML: string;
+};
+
+export function Tweet({
+	tweetURL,
+	authorName,
+	authorHandle,
+	authorImage,
+	date,
+	textHTML,
+}: TweetProps) {
+	return (
+		<a
+			href={tweetURL}
+			target="_blank"
+			rel="noopener noreferrer"
+			className="p-4 bg-white dark:bg-stone-800 rounded-xl flex flex-col space-y-4 max-w-lg !no-underline transition hover:brightness-90">
+			<div className="flex space-x-4 items-center">
+				<img src={authorImage} className="rounded-full w-10 h-10" />
+				<div className="flex flex-col">
+					<span className="text-sm font-semibold text-stone-950 dark:text-stone-50">
+						{authorName}
+					</span>
+					<span className="text-sm text-stone-600 dark:text-stone-400">
+						@{authorHandle}
+					</span>
+				</div>
+			</div>
+			<div
+				className="text-stone-950 dark:text-stone-50 flex-1"
+				dangerouslySetInnerHTML={{ __html: textHTML }}
+			/>
+			<div className="text-sm text-stone-600 dark:text-stone-400 ">{date}</div>
+		</a>
+	);
+}

packages/website/src/css/custom.css

@@ -23,6 +23,10 @@ body {
 	box-shadow: 0px 1px #e7e5e4 !important;
 }
 
+.root_------node_modules-react-tweet-dist-twitter-theme-quoted-tweet-quoted-tweet-container-module {
+	display: none !important;
+}
+
 :root {
 	--ifm-color-primary: #da6f0c;
 	--ifm-color-primary-dark: #c4640b;

packages/website/src/pages/index.tsx

@@ -1,7 +1,7 @@
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import React from "react";
-import Landing from "../components/landing";
+import { Landing } from "../components/landing";
 
 export default function Home(): JSX.Element {
 	const { siteConfig } = useDocusaurusContext();