docs(website): landing page progress

packages/website/docusaurus.config.js

@@ -55,6 +55,20 @@ 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

@@ -28,6 +28,11 @@
 	"devDependencies": {
 		"@docusaurus/module-type-aliases": "2.4.3",
 		"@tsconfig/docusaurus": "^1.0.5",
+		"autoprefixer": "^10.4.16",
+		"postcss": "^8.4.31",
+		"postcss-nested": "^6.0.1",
+		"tailwindcss": "^3.3.3",
+		"tailwindcss-bg-patterns": "^0.2.0",
 		"typescript": "^5.2.2"
 	},
 	"browserslist": {

packages/website/src/components/hero.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import StarButton from "./landing/star-button";
+
+export default function Hero() {
+	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="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
+									</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>
+								</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
+									</a>
+									<StarButton width="170" height="50" />
+								</div>
+							</div>
+						</div>
+					</div>
+					<div className="relative z-20">
+						<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"
+							alt="Hero image showing dashboard"
+						/>
+					</div>
+				</div>
+			</div>
+		</header>
+	);
+}

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

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

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

@@ -0,0 +1,17 @@
+import React from "react";
+
+export default function StarButton({
+	width,
+	height,
+}: {
+	width: string;
+	height: string;
+}) {
+	return (
+		<iframe
+			src="https://ghbtns.com/github-btn.html?user=TheEdoRan&repo=next-safe-action&type=star&count=true&size=large"
+			width={width}
+			height={height}
+			title="GitHub"></iframe>
+	);
+}

packages/website/src/css/custom.css

@@ -9,30 +9,51 @@ body {
 	font-size: 18px;
 }
 
+.footer {
+	border-top: 1px solid #e7e5e4;
+	background-color: transparent;
+	padding: 1rem;
+}
+
+.navbar {
+	background-color: #fafaf9 !important;
+	box-shadow: 0px 1px #e7e5e4 !important;
+}
+
 :root {
 	--ifm-color-primary: #da6f0c;
-	--ifm-color-primary-dark: #c56408;
-	--ifm-color-primary-darker: #aa5404;
-	--ifm-color-primary-darkest: #a15004;
-	--ifm-color-primary-light: #e48125;
-	--ifm-color-primary-lighter: #ec9747;
+	--ifm-color-primary-dark: #c4640b;
+	--ifm-color-primary-darker: #b95e0a;
+	--ifm-color-primary-darkest: #994e08;
+	--ifm-color-primary-light: #f07a0d;
+	--ifm-color-primary-lighter: #f28016;
+	--ifm-color-primary-lightest: #f49237;
 	--ifm-color-primary-lightest: #eea35d;
 	--ifm-code-font-size: 95%;
 	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+	--ifm-background-color: #fafaf9 !important;
+	--ifm-color-emphasis-200: #e7e5e4 !important;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
 	--ifm-color-primary: #f79f2d;
-	--ifm-color-primary-dark: #df8818;
-	--ifm-color-primary-darker: #c57710;
-	--ifm-color-primary-darkest: #a16210;
-	--ifm-color-primary-light: #f7ad4c;
-	--ifm-color-primary-lighter: #f8b660;
-	--ifm-color-primary-lightest: #fdc06f;
+	--ifm-color-primary-dark: #f69211;
+	--ifm-color-primary-darker: #ef8b09;
+	--ifm-color-primary-darkest: #c57208;
+	--ifm-color-primary-light: #f8ac49;
+	--ifm-color-primary-lighter: #f9b257;
+	--ifm-color-primary-lightest: #fac681;
 	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-}
+	--ifm-background-color: #1c1917 !important;
+	--ifm-color-emphasis-200: #44403c !important;
 
-.footer {
-	padding: 1rem;
+	.footer {
+		border-top: 1px solid #44403c !important;
+	}
+
+	.navbar {
+		background-color: #1c1917 !important;
+		box-shadow: 0px 1px #44403c !important;
+	}
 }

packages/website/src/css/tailwind.css

@@ -0,0 +1,5 @@
+.tailwind {
+	@tailwind base;
+	@tailwind components;
+	@tailwind utilities;
+}

packages/website/src/pages/index.tsx

@@ -1,37 +1,11 @@
-import Link from "@docusaurus/Link";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
-import clsx from "clsx";
 import React from "react";
-
-import styles from "./index.module.css";
-
-function HomepageHeader() {
-	const { siteConfig } = useDocusaurusContext();
-	return (
-		<header className={clsx("hero hero--primary", styles.heroBanner)}>
-			<div className="container">
-				<h1 className="hero__title">{siteConfig.title}</h1>
-				<p className="hero__subtitle">{siteConfig.tagline}</p>
-				<div className={styles.buttons}>
-					<Link
-						className="button button--secondary button--lg"
-						to="/docs/getting-started">
-						️Getting started 🎉
-					</Link>
-				</div>
-			</div>
-		</header>
-	);
-}
+import Landing from "../components/landing";
 
 export default function Home(): JSX.Element {
-	const { siteConfig } = useDocusaurusContext();
 	return (
-		<Layout
-			// title={`${siteConfig.title}`}
-			description="next-safe-action is a library for defining typesafe Server Actions for Next.js 13 using Zod.">
-			<HomepageHeader />
+		<Layout description="next-safe-action is a library for defining typesafe Server Actions for Next.js 13 using Zod.">
+			<Landing />
 		</Layout>
 	);
 }

packages/website/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ["./src/**/*.{js,jsx,ts,tsx}"],
+	darkMode: ["class", '[data-theme="dark"]'],
+	theme: {
+		extend: {},
+	},
+	plugins: [require("tailwindcss-bg-patterns")],
+};