docs: polished homepage

docs/content/next-pwa/configuring.mdx

@@ -22,9 +22,9 @@ const withPWA = require("@ducanh2912/next-pwa").default({
   //...
 });
 
-// your Next config is automatically typed!
+// Your Next config is automatically typed!
 module.exports = withPWA({
-  // Next.js config
+  // Your Next.js config
 });
 ```
 
@@ -41,9 +41,9 @@ const withPWA = withPWAInit({
   //...
 });
 
-// your Next config is automatically typed!
+// Your Next config is automatically typed!
 export default withPWA({
-  // Next.js config
+  // Your Next.js config
 });
 ```
 
@@ -91,25 +91,24 @@ export default withPWA({
 
 ## Other options
 
-`next-pwa` uses `workbox-webpack-plugin`, other options can be found in [workbox-webpack-plugin's documentation](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin)
-for [GenerateSW](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/#generatesw-plugin) and
+`next-pwa` uses `workbox-webpack-plugin` under the hood, other options can be found in the documentation for [GenerateSW](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/#generatesw-plugin) and
 [InjectManifest](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/#injectmanifest-plugin).
 
-To pass these options to `Workbox`, change your `next.config.js` like so:
+To pass these options to `workbox-webpack-plugin`, change your `next.config.js` like so:
 
 <Tabs>
 
 ```js
 // title next.config.js
 const withPWA = require("@ducanh2912/next-pwa").default({
-  // your other options,
+  // Your other options,
   workboxOptions: {
-    // workbox options go here
+    // Workbox options go here...
   },
 });
 
 module.exports = withPWA({
-  // your Next config
+  // Your Next.js config
 });
 ```
 
@@ -118,19 +117,24 @@ module.exports = withPWA({
 import withPWAInit from "@ducanh2912/next-pwa";
 
 const withPWA = withPWAInit({
-  // your other options,
+  // Your other options,
   workboxOptions: {
-    // workbox options go here
+    // Workbox options go here...
   },
 });
 
 export default withPWA({
-  // your Next config
+  // Your Next.js config
 });
 ```
 
 </Tabs>
 
+<Callout>
+  It is recommended to add `// @ts-check` to the top of your `next.config.js` so
+  as to ensure that you pass valid options to `workbox-webpack-plugin`.
+</Callout>
+
 ## Runtime caching
 
 `next-pwa` has a default runtime caching array, see: [cache.ts](https://github.com/DuCanhGH/next-pwa/tree/master/packages/next-pwa/src/cache.ts)
@@ -142,17 +146,17 @@ If you want to have your own runtime caching rules, change your `next.config.js`
 ```js
 // title next.config.js
 const withPWA = require("@ducanh2912/next-pwa").default({
-  // your other options,
+  // Your other options,
   extendDefaultRuntimeCaching: true,
   workboxOptions: {
     runtimeCaching: [
-      // your runtime caching array
+      // Your runtimeCaching array
     ],
   },
 });
 
 module.exports = withPWA({
-  // your Next config
+  // Your Next.js config
 });
 ```
 
@@ -161,21 +165,23 @@ module.exports = withPWA({
 import withPWAInit from "@ducanh2912/next-pwa";
 
 const withPWA = withPWAInit({
-  // your other options,
+  // Your other options,
   extendDefaultRuntimeCaching: true,
   workboxOptions: {
     runtimeCaching: [
-      // your runtime caching array
+      // Your runtimeCaching array
     ],
   },
 });
 
 export default withPWA({
-  // your Next config
+  // Your Next.js config
 });
 ```
 
 </Tabs>
 
-Here is [the documentation on how to write a runtime caching array](https://developer.chrome.com/docs/workbox/reference/workbox-build/#type-RuntimeCaching),
-including background sync, broadcast update, and more!
+<Callout>
+  Also check out [the documentation on how to write a runtime caching
+  array](https://developer.chrome.com/docs/workbox/reference/workbox-build/#type-RuntimeCaching)!
+</Callout>

docs/content/next-pwa/custom-worker.mdx

@@ -25,7 +25,7 @@ const withPWA = require("@ducanh2912/next-pwa").default({
 });
 
 module.exports = withPWA({
-  // your Next config
+  // Your Next.js config
 });
 ```
 
@@ -39,7 +39,7 @@ const withPWA = withPWAInit({
 });
 
 export default withPWA({
-  // your Next config
+  // Your Next.js config
 });
 ```
 

docs/content/next-pwa/getting-started.mdx

@@ -8,7 +8,7 @@ type: Docs
 ## Install
 
 <Callout>
-  If you are new to `React` or `Next.js`, you may want to checkout [learn
+  If you are new to React or Next.js, you may want to checkout [learn
   React](https://react.dev/learn), [learn
   Next.js](https://nextjs.org/learn/basics/create-nextjs-app) and [Next.js
   documentation](https://nextjs.org/docs) first, and then start from [a simple
@@ -49,7 +49,7 @@ const withPWA = require("@ducanh2912/next-pwa").default({
 });
 
 module.exports = withPWA({
-  // Next.js config
+  // Your Next.js config
 });
 ```
 
@@ -62,7 +62,7 @@ const withPWA = withPWAInit({
 });
 
 export default withPWA({
-  // Next.js config
+  // Your Next.js config
 });
 ```
 
@@ -125,7 +125,7 @@ export default nextConfigFunction;
 <Callout>
   **Note**: This plugin is written in Typescript and supports JSDoc. It is
   recommended to add `// @ts-check` to the top of your `next.config.js` file to
-  leverage type checking. This is especially useful when you use
+  leverage typechecking. This is especially useful when you use
   `PluginOptions.workboxOptions`, as you may unknowningly mix
   InjectManifest-specific and GenerateSW-specific options up.
 </Callout>

docs/content/next-pwa/offline-fallbacks.mdx

@@ -31,25 +31,25 @@ To also add a fallback for other resources, change your `next.config.js` like so
 ```js
 // title next.config.js
 const withPWA = require("@ducanh2912/next-pwa").default({
-  // your other options,
+  // Your other options,
   fallbacks: {
-    // failed page requests fallback to this.
+    // Failed page requests fallback to this.
     document: "/~offline",
-    // this is for /_next/.../.json files.
+    // This is for /_next/.../.json files.
     data: "/fallback.json",
-    // this is for images.
+    // This is for images.
     image: "/fallback.webp",
-    // this is for audio files.
+    // This is for audio files.
     audio: "/fallback.mp3",
-    // this is for video files.
+    // This is for video files.
     video: "/fallback.mp4",
-    // this is for fonts.
+    // This is for fonts.
     font: "/fallback-font.woff2",
   },
 });
 
 module.exports = withPWA({
-  // your Next config
+  // Your Next.js config
 });
 ```
 
@@ -58,25 +58,25 @@ module.exports = withPWA({
 import withPWAInit from "@ducanh2912/next-pwa";
 
 const withPWA = withPWAInit({
-  // your other options,
+  // Your other options,
   fallbacks: {
-    // failed page requests fallback to this.
+    // Failed page requests fallback to this.
     document: "/~offline",
-    // this is for /_next/.../.json files.
+    // This is for /_next/.../.json files.
     data: "/fallback.json",
-    // this is for images.
+    // This is for images.
     image: "/fallback.webp",
-    // this is for audio files.
+    // This is for audio files.
     audio: "/fallback.mp3",
-    // this is for video files.
+    // This is for video files.
     video: "/fallback.mp4",
-    // this is for fonts.
+    // This is for fonts.
     font: "/fallback-font.woff2",
   },
 });
 
 export default withPWA({
-  // your Next config
+  // Your Next.js config
 });
 ```
 

docs/src/app/(home)/code-showcase.mdx

@@ -0,0 +1,80 @@
+<CodeShowcase>
+
+```js
+// title next.config.js
+const withPWA = require("@ducanh2912/next-pwa").default({
+  dest: "public",
+});
+
+module.exports = withPWA({
+  // Your Next.js config
+});
+```
+
+## Easy to setup
+
+Just wrap your Next config with `withPWA` and you are ready to go! You do not need to configure much, but there are many options to customize `next-pwa` to your
+liking.
+
+</CodeShowcase>
+
+<CodeShowcase invert>
+
+```js
+// title next.config.js
+// @ts-check
+const withPWA = require("@ducanh2912/next-pwa").default({
+  // You will get hints as you type here. You can also hover over these options
+  // to get a detailed description about them!
+  dest: "public",
+});
+
+// Your Next config is automatically typed with NextConfig!
+module.exports = withPWA({
+  reactStrictMode: "true", // Type 'string' is not assignable to type 'boolean | null | undefined'.
+});
+```
+
+## Typescript support
+
+`next-pwa` is built with Typescript. As you configure `next-pwa`, you will get type hints and detailed description of its options. If you directly wrap your
+Next config with `withPWA`, it will automatically be typed with `NextConfig`!
+
+</CodeShowcase>
+
+<CodeShowcase>
+
+```js
+// title next.config.js
+const withPWA = require("@ducanh2912/next-pwa").default({
+  dest: "public",
+  // disable: process.env.NODE_ENV === "development",
+  // register: true,
+  // scope: "/app",
+  // sw: "service-worker.js",
+  // customWorkerDir: "service-worker",
+  // cacheStartURL: true,
+  // dynamicStartUrl: true,
+  // dynamicStartUrlRedirect: "/foo/bar",
+  // cacheOnFrontendNav: true,
+  // aggressiveFrontEndNavCaching: true,
+  // scope: "/beta",
+  // swcMinify: true,
+  // workboxOptions: {},
+  // ...
+});
+
+module.exports = withPWA({
+  // Your Next.js config
+});
+```
+
+## Configurable
+
+There are just [so many options](/docs/next-pwa/configuring) thanks to Workbox's extensive API 🤯 You can disable the plugin, change how it caches stuff
+at runtime, silent its logging, add your custom code to the service worker or even write the service worker yourself!
+
+We are working hard to add useful features to the plugin! You can help by [contributing to the repository](https://github.com/DuCanhGH/next-pwa/tree/master/contributing)
+or [creating feature requests](https://github.com/DuCanhGH/next-pwa/issues/new/choose)!
+
+</CodeShowcase>

docs/src/app/(home)/components.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+
+import { clsx } from "@/utils/clsx.js";
+
+export const CodeShowcase = ({
+  children,
+  invert,
+}: {
+  children: ReactNode[];
+  invert: boolean;
+}) => {
+  const [code, ...others] = children;
+  return (
+    <div className="flex w-full flex-col gap-4 py-4 md:flex-row md:gap-24 md:py-10">
+      <div
+        className={clsx(
+          invert && "md:order-last",
+          "overflow-hidden md:flex-[3_3_0] [&>span]:mt-0"
+        )}
+      >
+        {others}
+      </div>
+      <div className="overflow-hidden md:flex-[2_2_0]">{code}</div>
+    </div>
+  );
+};

docs/src/app/(home)/constants.ts

@@ -0,0 +1,35 @@
+interface Feature {
+  icon: string;
+  label: string;
+  description: string;
+}
+
+export const FEATURES_LIST: Feature[] = [
+  {
+    icon: "✊",
+    label: "Zero-config",
+    description: "No configuration needed to get started...",
+  },
+  {
+    icon: "⛏️",
+    label: "Configurable",
+    description:
+      "...yet there are many options available to extend the plugin.",
+  },
+  {
+    icon: "💯",
+    label: "Fast",
+    description: "Blow your user's mind with a website as fast as lightning ⚡",
+  },
+  {
+    icon: "🔌",
+    label: "Offline",
+    description: "Proper offline support. For both App and Pages Router.",
+  },
+  {
+    icon: "🚀",
+    label: "Developer experience",
+    description:
+      "Built-in Typescript definitions and JSDoc to enable the best DX.",
+  },
+];