From eccba9597bb185f74963cfe30f2f3f79292bf946 Mon Sep 17 00:00:00 2001
From: Edoardo Ranghieri <edoardo@ranghieri.com>
Date: Wed, 4 Oct 2023 16:49:55 +0200
Subject: [PATCH] docs(website): landing page progress

---
 package-lock.json                             | 437 ++++++++++++++++++
 packages/website/docusaurus.config.js         |  14 +
 packages/website/package.json                 |   5 +
 packages/website/src/components/hero.tsx      |  44 ++
 .../website/src/components/landing/index.tsx  |  11 +
 .../src/components/landing/star-button.tsx    |  17 +
 packages/website/src/css/custom.css           |  49 +-
 packages/website/src/css/tailwind.css         |   5 +
 packages/website/src/pages/index.module.css   |  23 -
 packages/website/src/pages/index.tsx          |  32 +-
 packages/website/tailwind.config.js           |   9 +
 11 files changed, 580 insertions(+), 66 deletions(-)
 create mode 100644 packages/website/src/components/hero.tsx
 create mode 100644 packages/website/src/components/landing/index.tsx
 create mode 100644 packages/website/src/components/landing/star-button.tsx
 create mode 100644 packages/website/src/css/tailwind.css
 delete mode 100644 packages/website/src/pages/index.module.css
 create mode 100644 packages/website/tailwind.config.js

diff --git a/package-lock.json b/package-lock.json
index afd09737..a9fc5e0b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3632,6 +3632,15 @@
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			}
 		},
+		"node_modules/@fullhuman/postcss-purgecss": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
+			"integrity": "sha512-kwOXw8fZ0Lt1QmeOOrd+o4Ibvp4UTEBFQbzvWldjlKv5n+G9sXfIPn1hh63IQIL8K8vbvv1oYMJiIUbuy9bGaA==",
+			"dev": true,
+			"dependencies": {
+				"purgecss": "^3.1.3"
+			}
+		},
 		"node_modules/@hapi/hoek": {
 			"version": "9.3.0",
 			"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -6477,6 +6486,38 @@
 				"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
 			}
 		},
+		"node_modules/acorn-node": {
+			"version": "1.8.2",
+			"resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+			"integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+			"dev": true,
+			"dependencies": {
+				"acorn": "^7.0.0",
+				"acorn-walk": "^7.0.0",
+				"xtend": "^4.0.2"
+			}
+		},
+		"node_modules/acorn-node/node_modules/acorn": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+			"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+			"dev": true,
+			"bin": {
+				"acorn": "bin/acorn"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/acorn-node/node_modules/acorn-walk": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+			"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
 		"node_modules/acorn-walk": {
 			"version": "8.2.0",
 			"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
@@ -7925,6 +7966,16 @@
 				"url": "https://github.com/sponsors/wooorm"
 			}
 		},
+		"node_modules/color": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+			"integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+			"dev": true,
+			"dependencies": {
+				"color-convert": "^1.9.3",
+				"color-string": "^1.6.0"
+			}
+		},
 		"node_modules/color-convert": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -7941,6 +7992,31 @@
 			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
 			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
 		},
+		"node_modules/color-string": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+			"integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+			"dev": true,
+			"dependencies": {
+				"color-name": "^1.0.0",
+				"simple-swizzle": "^0.2.2"
+			}
+		},
+		"node_modules/color/node_modules/color-convert": {
+			"version": "1.9.3",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+			"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+			"dev": true,
+			"dependencies": {
+				"color-name": "1.1.3"
+			}
+		},
+		"node_modules/color/node_modules/color-name": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+			"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+			"dev": true
+		},
 		"node_modules/colord": {
 			"version": "2.9.3",
 			"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -8635,6 +8711,12 @@
 				"node": ">=8.0.0"
 			}
 		},
+		"node_modules/css-unit-converter": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+			"integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
+			"dev": true
+		},
 		"node_modules/css-what": {
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -9017,6 +9099,15 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/defined": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
+			"integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
+			"dev": true,
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/del": {
 			"version": "6.1.1",
 			"resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz",
@@ -9177,6 +9268,23 @@
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
 			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
 		},
+		"node_modules/detective": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
+			"integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
+			"dev": true,
+			"dependencies": {
+				"acorn-node": "^1.8.2",
+				"defined": "^1.0.0",
+				"minimist": "^1.2.6"
+			},
+			"bin": {
+				"detective": "bin/detective.js"
+			},
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
 		"node_modules/didyoumean": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -13888,6 +13996,18 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/modern-normalize": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
+			"integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/mrmime": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -18216,6 +18336,109 @@
 				"postcss": "^8.2.15"
 			}
 		},
+		"node_modules/postcss-functions": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
+			"integrity": "sha512-N5yWXWKA+uhpLQ9ZhBRl2bIAdM6oVJYpDojuI1nF2SzXBimJcdjFwiAouBVbO5VuOF3qA6BSFWFc3wXbbj72XQ==",
+			"dev": true,
+			"dependencies": {
+				"glob": "^7.1.2",
+				"object-assign": "^4.1.1",
+				"postcss": "^6.0.9",
+				"postcss-value-parser": "^3.3.0"
+			}
+		},
+		"node_modules/postcss-functions/node_modules/ansi-styles": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+			"dev": true,
+			"dependencies": {
+				"color-convert": "^1.9.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/postcss-functions/node_modules/chalk": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^3.2.1",
+				"escape-string-regexp": "^1.0.5",
+				"supports-color": "^5.3.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/postcss-functions/node_modules/color-convert": {
+			"version": "1.9.3",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+			"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+			"dev": true,
+			"dependencies": {
+				"color-name": "1.1.3"
+			}
+		},
+		"node_modules/postcss-functions/node_modules/color-name": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+			"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+			"dev": true
+		},
+		"node_modules/postcss-functions/node_modules/escape-string-regexp": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+			"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/postcss-functions/node_modules/has-flag": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+			"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/postcss-functions/node_modules/postcss": {
+			"version": "6.0.23",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+			"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+			"dev": true,
+			"dependencies": {
+				"chalk": "^2.4.1",
+				"source-map": "^0.6.1",
+				"supports-color": "^5.4.0"
+			},
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
+		"node_modules/postcss-functions/node_modules/postcss-value-parser": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+			"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+			"dev": true
+		},
+		"node_modules/postcss-functions/node_modules/supports-color": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+			"dev": true,
+			"dependencies": {
+				"has-flag": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/postcss-import": {
 			"version": "15.1.0",
 			"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
@@ -18784,6 +19007,15 @@
 				"renderkid": "^3.0.0"
 			}
 		},
+		"node_modules/pretty-hrtime": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+			"integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/pretty-time": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/pretty-time/-/pretty-time-1.1.0.tgz",
@@ -18918,6 +19150,30 @@
 			"resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz",
 			"integrity": "sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA=="
 		},
+		"node_modules/purgecss": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/purgecss/-/purgecss-3.1.3.tgz",
+			"integrity": "sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ==",
+			"dev": true,
+			"dependencies": {
+				"commander": "^6.0.0",
+				"glob": "^7.0.0",
+				"postcss": "^8.2.1",
+				"postcss-selector-parser": "^6.0.2"
+			},
+			"bin": {
+				"purgecss": "bin/purgecss.js"
+			}
+		},
+		"node_modules/purgecss/node_modules/commander": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+			"integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+			"dev": true,
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/qs": {
 			"version": "6.11.0",
 			"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
@@ -19514,6 +19770,22 @@
 				"esprima": "~4.0.0"
 			}
 		},
+		"node_modules/reduce-css-calc": {
+			"version": "2.1.8",
+			"resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
+			"integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
+			"dev": true,
+			"dependencies": {
+				"css-unit-converter": "^1.1.1",
+				"postcss-value-parser": "^3.3.0"
+			}
+		},
+		"node_modules/reduce-css-calc/node_modules/postcss-value-parser": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+			"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+			"dev": true
+		},
 		"node_modules/reflect.getprototypeof": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz",
@@ -21140,6 +21412,21 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/simple-swizzle": {
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+			"integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+			"dev": true,
+			"dependencies": {
+				"is-arrayish": "^0.3.1"
+			}
+		},
+		"node_modules/simple-swizzle/node_modules/is-arrayish": {
+			"version": "0.3.2",
+			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+			"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+			"dev": true
+		},
 		"node_modules/sirv": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz",
@@ -21882,6 +22169,123 @@
 				"node": ">=14.0.0"
 			}
 		},
+		"node_modules/tailwindcss-bg-patterns": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/tailwindcss-bg-patterns/-/tailwindcss-bg-patterns-0.2.0.tgz",
+			"integrity": "sha512-g5A+J/r0C5jcRkpAOoRetit60LmSpBId+WP2fyUdnp7iJnGonFggsFkvEhMfddzsosYisrnuYwfCb3IHjQ2NxQ==",
+			"dev": true,
+			"dependencies": {
+				"tailwindcss": "2.0.3"
+			}
+		},
+		"node_modules/tailwindcss-bg-patterns/node_modules/fs-extra": {
+			"version": "9.1.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+			"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+			"dev": true,
+			"dependencies": {
+				"at-least-node": "^1.0.0",
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/tailwindcss-bg-patterns/node_modules/node-emoji": {
+			"version": "1.11.0",
+			"resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
+			"integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
+			"dev": true,
+			"dependencies": {
+				"lodash": "^4.17.21"
+			}
+		},
+		"node_modules/tailwindcss-bg-patterns/node_modules/object-hash": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+			"integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/tailwindcss-bg-patterns/node_modules/postcss-js": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
+			"integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
+			"dev": true,
+			"dependencies": {
+				"camelcase-css": "^2.0.1",
+				"postcss": "^8.1.6"
+			},
+			"engines": {
+				"node": ">=10.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/postcss/"
+			}
+		},
+		"node_modules/tailwindcss-bg-patterns/node_modules/postcss-nested": {
+			"version": "5.0.6",
+			"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+			"integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+			"dev": true,
+			"dependencies": {
+				"postcss-selector-parser": "^6.0.6"
+			},
+			"engines": {
+				"node": ">=12.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/postcss/"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.14"
+			}
+		},
+		"node_modules/tailwindcss-bg-patterns/node_modules/tailwindcss": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.0.3.tgz",
+			"integrity": "sha512-s8NEqdLBiVbbdL0a5XwTb8jKmIonOuI4RMENEcKLR61jw6SdKvBss7NWZzwCaD+ZIjlgmesv8tmrjXEp7C0eAQ==",
+			"dev": true,
+			"dependencies": {
+				"@fullhuman/postcss-purgecss": "^3.1.3",
+				"bytes": "^3.0.0",
+				"chalk": "^4.1.0",
+				"color": "^3.1.3",
+				"detective": "^5.2.0",
+				"didyoumean": "^1.2.1",
+				"fs-extra": "^9.1.0",
+				"html-tags": "^3.1.0",
+				"lodash": "^4.17.20",
+				"modern-normalize": "^1.0.0",
+				"node-emoji": "^1.8.1",
+				"object-hash": "^2.1.1",
+				"postcss-functions": "^3",
+				"postcss-js": "^3.0.3",
+				"postcss-nested": "^5.0.1",
+				"postcss-selector-parser": "^6.0.4",
+				"postcss-value-parser": "^4.1.0",
+				"pretty-hrtime": "^1.0.3",
+				"reduce-css-calc": "^2.1.8",
+				"resolve": "^1.19.0"
+			},
+			"bin": {
+				"tailwind": "lib/cli.js",
+				"tailwindcss": "lib/cli.js"
+			},
+			"engines": {
+				"node": ">=12.13.0"
+			},
+			"peerDependencies": {
+				"autoprefixer": "^10.0.2",
+				"postcss": "^8.0.9"
+			}
+		},
 		"node_modules/tapable": {
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -24156,12 +24560,45 @@
 			"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"
 			},
 			"engines": {
 				"node": ">=16.14"
 			}
 		},
+		"packages/website/node_modules/postcss": {
+			"version": "8.4.31",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+			"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"dependencies": {
+				"nanoid": "^3.3.6",
+				"picocolors": "^1.0.0",
+				"source-map-js": "^1.0.2"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			}
+		},
 		"packages/website/node_modules/prism-react-renderer": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.1.0.tgz",
diff --git a/packages/website/docusaurus.config.js b/packages/website/docusaurus.config.js
index 64a98f8c..a3ca956f 100644
--- a/packages/website/docusaurus.config.js
+++ b/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} */
 		({
diff --git a/packages/website/package.json b/packages/website/package.json
index 9a21d61b..81e5aa4a 100644
--- a/packages/website/package.json
+++ b/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": {
diff --git a/packages/website/src/components/hero.tsx b/packages/website/src/components/hero.tsx
new file mode 100644
index 00000000..479aba3f
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/packages/website/src/components/landing/index.tsx b/packages/website/src/components/landing/index.tsx
new file mode 100644
index 00000000..3bd9e8cd
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/packages/website/src/components/landing/star-button.tsx b/packages/website/src/components/landing/star-button.tsx
new file mode 100644
index 00000000..41edfeca
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css
index 0b5713cb..b15561a8 100644
--- a/packages/website/src/css/custom.css
+++ b/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;
+	}
 }
diff --git a/packages/website/src/css/tailwind.css b/packages/website/src/css/tailwind.css
new file mode 100644
index 00000000..ede58975
--- /dev/null
+++ b/packages/website/src/css/tailwind.css
@@ -0,0 +1,5 @@
+.tailwind {
+	@tailwind base;
+	@tailwind components;
+	@tailwind utilities;
+}
diff --git a/packages/website/src/pages/index.module.css b/packages/website/src/pages/index.module.css
deleted file mode 100644
index 9f71a5da..00000000
--- a/packages/website/src/pages/index.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
diff --git a/packages/website/src/pages/index.tsx b/packages/website/src/pages/index.tsx
index 1e525ecd..f647b7a0 100644
--- a/packages/website/src/pages/index.tsx
+++ b/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>
 	);
 }
diff --git a/packages/website/tailwind.config.js b/packages/website/tailwind.config.js
new file mode 100644
index 00000000..cdd05eb7
--- /dev/null
+++ b/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")],
+};