docs(website): add features section

packages/website/docs/contributing.md

@@ -5,7 +5,7 @@ description: Learn how to contribute to next-safe-action via GitHub.
 
 # Contributing
 
-You can contribute to this project by forking the repository and opening a [Pull Request on GitHub](https://github.com/TheEdoRan/next-safe-action/pulls).
+You can contribute to this project by forking the repository and opening a [pull request on GitHub](https://github.com/TheEdoRan/next-safe-action/pulls).
 
 Have you found bugs or just want to ask a question? Please open a [GitHub issue](https://github.com/TheEdoRan/next-safe-action/issues).
 

packages/website/docs/getting-started.md

@@ -26,7 +26,7 @@ npm i next-safe-action zod
 ## Usage
 
 :::note
-Turning on any `experimental` features in Next.js will switch the used React version to experimental.
+Turning on Server Actions in Next.js configuration file will switch the used React version to experimental.
 :::
 
 ### 1. Enable server actions in Next.js

packages/website/docs/introduction.md

@@ -15,10 +15,10 @@ Like magic. 🪄
 
 ## Features
 - ✅ Pretty simple
-- ✅ End to end type safety
+- ✅ End-to-end type safety
 - ✅ Context based clients (with middlewares)
 - ✅ Input validation using Zod
-- ✅ Direct or hook usage from client
+- ✅ Advanced server error handling
 - ✅ Optimistic updates
 
 :::note

packages/website/docusaurus.config.js

@@ -7,7 +7,7 @@ const darkCodeTheme = require("prism-react-renderer/themes/vsDark");
 /** @type {import('@docusaurus/types').Config} */
 const config = {
 	title: "next-safe-action",
-	tagline: "Typesafe Server Actions for Next.js 13 using Zod",
+	tagline: "Typesafe Server Actions in your Next.js 13 app",
 	favicon: "img/favicon.ico",
 
 	// Set the production url of your site here
@@ -55,20 +55,6 @@ const config = {
 		],
 	],
 
-	plugins: [
-		async function tailwindCSS(context, options) {
-			return {
-				name: "docusaurus-tailwindcss",
-				configurePostCss(postcssOptions) {
-					postcssOptions.plugins.push(require("tailwindcss"));
-					postcssOptions.plugins.push(require("postcss-nested"));
-					postcssOptions.plugins.push(require("autoprefixer"));
-					return postcssOptions;
-				},
-			};
-		},
-	],
-
 	themeConfig:
 		/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
 		({

packages/website/package.json

@@ -21,9 +21,11 @@
 		"@mdx-js/react": "^1.6.22",
 		"clsx": "^1.2.1",
 		"docusaurus-preset-shiki-twoslash": "^1.1.41",
+		"lucide-react": "^0.284.0",
 		"prism-react-renderer": "^1.3.5",
 		"react": "18.2.0",
-		"react-dom": "18.2.0"
+		"react-dom": "18.2.0",
+		"react-tweet": "^3.1.1"
 	},
 	"devDependencies": {
 		"@docusaurus/module-type-aliases": "2.4.3",

packages/website/postcss.config.js

@@ -0,0 +1,9 @@
+// postcss.config.js
+module.exports = {
+	plugins: {
+		"postcss-import": {},
+		"tailwindcss/nesting": "postcss-nested",
+		"tailwindcss": {},
+		"autoprefixer": {},
+	},
+};

packages/website/src/components/hero.tsx

@@ -1,42 +1,47 @@
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import React from "react";
-import StarButton from "./landing/star-button";
+import StarButton from "./landing/stars-button";
 
 export default function Hero() {
+	const { siteConfig } = useDocusaurusContext();
+
 	return (
 		<header className="block bg-gradient-to-b from-[#f79f2d] to-[#ff8e0a] bg-center bg-cover overflow-hidden relative">
 			<div className="absolute inset-0 pattern-dots pattern-stone-600 pattern-bg-transparent pattern-size-6 pattern-opacity-10" />
 			<div className="px-5 md:px-10">
 				<div className="mx-auto w-full max-w-7xl">
-					<div className="py-12 md:py-16 lg:py-20">
+					<div className="pt-12 pb-4 md:pt-16 md:pb-8 lg:pt-20">
 						<div className="mx-auto flex max-w-3xl flex-col items-center text-center mb-8 md:mb-12 lg:mb-16">
 							<div className="text-center z-20">
-								<div className="mx-auto max-w-[528px] mb-5 md:mb-6 lg:mb-8">
-									<h1 className="text-white text-4xl font-bold tracking-tighter">
-										End-to-end typesafe Server Actions for Next.js 13
+								<div className="mx-auto max-w-3xl mb-5 md:mb-6 lg:mb-8 flex flex-col items-center">
+									<h1 className="text-white text-2xl sm:text-3xl md:text-5xl font-bold tracking-tight">
+										{siteConfig.tagline}
 									</h1>
-									<h2 className="text-stone-50 mt-4">
-										next-safe action handles type safety, input validation,
-										server errors and more for your Next.js app.
+									<h2 className="text-stone-50 font-medium text-base sm:text-lg md:text-xl max-w-xl">
+										next-safe-action handles your Next.js app mutations type
+										safety, input validation, server errors and even more!
 									</h2>
 								</div>
 								<div className="flex justify-center items-center">
 									<a
 										href="/docs/getting-started"
-										className="cursor-pointer rounded-lg mr-4 bg-stone-800 px-3 py-2 font-bold inline-flex items-center justify-center">
-										Getting started
+										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" />
 								</div>
 							</div>
 						</div>
 					</div>
-					<div className="relative z-20">
+					<a
+						href="/docs/getting-started"
+						className="cursor-pointer relative z-20 flex items-center justify-center mb-8">
 						<img
-							className="inline-block max-h-[416px] w-full max-w-full rounded-tl-[50px] rounded-tr-[50px] border-[12px] border-[#ffffff1f] object-fill z-20"
-							src="https://assets.website-files.com/647e296b89c00bcfafccf696/647f0755ed7ed2b1be74354e_image_processing20220429-712-h76k3c%202.png"
+							className="inline-block rounded-lg"
+							src="/img/demo-hd.gif"
 							alt="Hero image showing dashboard"
 						/>
-					</div>
+					</a>
 				</div>
 			</div>
 		</header>

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

@@ -0,0 +1,72 @@
+import { Check } from "lucide-react";
+import React, { Fragment } from "react";
+
+const features: { title: string; description: string }[] = [
+	{
+		title: "Pretty simple",
+		description:
+			"No need to overcomplicate things. next-safe-action API is pretty simple, targeted for fast development.",
+	},
+	{
+		title: "End-to-end type safety",
+		description:
+			"With next-safe-action you get full type safety between server and client code.",
+	},
+	{
+		title: "Context-based clients (with middlewares)",
+		description:
+			"Powerful context-based clients with custom logic execution, thanks to middlewares.",
+	},
+	{
+		title: "Input validation using Zod",
+		description:
+			"Input passed from the client to the server is validated using Zod schemas.",
+	},
+	{
+		title: "Advanced server error handling",
+		description:
+			"Decide how to return execution errors to the client and how to log them on the server.",
+	},
+	{
+		title: "Optimistic updates",
+		description:
+			"Need to update UI immediately without waiting for server response? You can do it with the powerful <code>useOptimisticAction</code> hook.",
+	},
+];
+
+export default function Features() {
+	return (
+		<div className="px-5 md:px-10">
+			<div className="mx-auto w-full max-w-4xl">
+				<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">
+							Why choose next-safe-action?
+						</div>
+						<div className="min-w-full bg-white dark:bg-stone-800 max-[479px]:px-5 max-[479px]:py-6 rounded-xl p-8 md:p-10 flex flex-col space-y-6">
+							{features.map(({ title, description }, idx) => (
+								<Fragment key={idx}>
+									{idx > 0 ? (
+										<div className="h-px min-h-[1px] min-w-full bg-stone-200 dark:bg-stone-700"></div>
+									) : null}
+									<div className="flex space-x-2 sm:space-x-4 md:space-x-6">
+										<Check className="w-8 h-8 shrink-0" />
+										<div className="flex-col flex items-start gap-y-2 max-[479px]:pr-10">
+											<div className="font-bold text-xl sm:text-xl">
+												{title}
+											</div>
+											<div
+												className="text-[#8a8880] text-base sm:text-base"
+												dangerouslySetInnerHTML={{ __html: description }}
+											/>
+										</div>
+									</div>
+								</Fragment>
+							))}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -1,11 +1,12 @@
 import React from "react";
-import "../../css/tailwind.css";
 import Hero from "../hero";
+import Features from "./features";
 
 export default function Landing() {
 	return (
-		<main className="tailwind">
+		<main>
 			<Hero />
+			<Features />
 		</main>
 	);
 }

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

@@ -0,0 +1,42 @@
+import { Star } from "lucide-react";
+import React, { useEffect, useState } from "react";
+
+function useFetchStarsCount() {
+	const [starsCount, setStarsCount] = useState<number | null>(undefined);
+
+	useEffect(() => {
+		fetch("https://api.github.com/repos/TheEdoRan/next-safe-action")
+			.then((res) =>
+				res.json().then((data) => {
+					if (typeof data.stargazers_count === "number") {
+						setStarsCount(data.stargazers_count);
+					}
+				})
+			)
+			.catch(console.error);
+	}, []);
+
+	return { starsCount };
+}
+
+export default function StarsButton({
+	width,
+	height,
+}: {
+	width: string;
+	height: string;
+}) {
+	// const { starsCount } = useFetchStarsCount();
+	const starsCount = 269;
+
+	return (
+		<a
+			href="https://github.com/TheEdoRan/next-safe-action"
+			target="_blank"
+			rel="noopener noreferrer"
+			className="!no-underline hover:!bg-sky-100 transition !text-stone-900 cursor-pointer rounded-lg mr-4 bg-stone-50 px-3 py-2 font-bold inline-flex items-center justify-center space-x-1 text-sm sm:text-lg md:text-xl">
+			<Star className="w-4 h-4 sm:w-6 sm:h-6" />
+			<span>{starsCount ? starsCount : ". . ."} GitHub stars</span>
+		</a>
+	);
+}

packages/website/src/css/custom.css

@@ -3,6 +3,9 @@
  * bundles Infima by default. Infima is a CSS framework designed to
  * work well for content-centric websites.
  */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 /* You can override the default Infima variables here. */
 body {

packages/website/src/pages/index.tsx

@@ -1,10 +1,14 @@
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import React from "react";
 import Landing from "../components/landing";
 
 export default function Home(): JSX.Element {
+	const { siteConfig } = useDocusaurusContext();
 	return (
-		<Layout description="next-safe-action is a library for defining typesafe Server Actions for Next.js 13 using Zod.">
+		<Layout
+			title={siteConfig.tagline}
+			description="next-safe-action is a library for defining end-to-end typesafe Server Actions for Next.js 13 using Zod.">
 			<Landing />
 		</Layout>
 	);

packages/website/tailwind.config.js

@@ -2,6 +2,9 @@
 module.exports = {
 	content: ["./src/**/*.{js,jsx,ts,tsx}"],
 	darkMode: ["class", '[data-theme="dark"]'],
+	corePlugins: {
+		preflight: false,
+	},
 	theme: {
 		extend: {},
 	},