FAQs pages for /docs and /v5

app/docs/[[...slug]]/page.tsx

@@ -8,13 +8,13 @@ import {
 } from 'fumadocs-ui/page';
 
 import { notFound } from 'next/navigation';
-import { ComponentProps, FC } from 'react';
+import type { ComponentProps, FC } from 'react';
 import defaultMdxComponents from 'fumadocs-ui/mdx';
 
 import { Callout } from '@/components/callout';
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 import { createRelativeLink } from 'fumadocs-ui/mdx';
-import FooterSection from '@/app/(home)/FooterSection';
+// import FooterSection from '@/app/(home)/FooterSection';
 import { EditButton } from '@/components/edit-button';
 import { CopyMarkdownButton } from '@/components/copy-markdown-button';
 
@@ -47,7 +47,7 @@ export default async function Page(props: {
         <div className="fixed top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-fd-primary/5 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
         <div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 h-[64rem] w-[64rem] bg-grid-lines-xl dark:opacity-80 -translate-y-1/2 max-md:hidden [--mask:radial-gradient(circle_at_center_top,red,transparent)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] -skew-20 pointer-events-none" />
       </div>
-      
+
       <DocsPage toc={page.data.toc} full={page.data.full}
         tableOfContent={{
           style: 'clerk',

app/docs/faq/faq-items.tsx

@@ -0,0 +1,21 @@
+import Link from "fumadocs-core/link";
+import type { FaqItem } from "@/components/faq-accordion"
+
+export const items: FaqItem[] = [
+  {
+    title:
+      "Does Nativewind Nativewind",
+    content:
+      'Yes, Nativewind Nativewinds',
+  },
+  {
+    title:
+      "Is Nativewind v5 out yet",
+    content:
+      (
+        <>
+          not yet, check out <Link href="/v5/faq" className="underline text-amber-500 hover:text-amber-600 dark:hover:text-amber-400">the v5 FAQ</Link> for more info.
+        </>
+      ),
+  },
+];

app/docs/faq/page.tsx

@@ -0,0 +1,34 @@
+import {
+  DocsPage,
+  DocsTitle,
+  DocsDescription,
+} from "fumadocs-ui/page";
+import type { Metadata } from "next";
+
+import { items } from "./faq-items";
+import { V5FAQLink } from "./v5-faq-link";
+import { FaqAccordion } from "@/components/faq-accordion";
+
+export const metadata: Metadata = {
+  title: "FAQ",
+  description: "Frequently answered questions about NativeWind",
+};
+
+export default async function FAQPage() {
+  return (
+    <DocsPage footer={{ enabled: false }}>
+      <div className="flex justify-between mb-4 md:max-xl:px-12">
+        <div className="flex-1">
+          <DocsTitle>FAQ</DocsTitle>
+          <DocsDescription className="!mb-0 text-balance">Frequently answered questions</DocsDescription>
+        </div>
+        <div className="flex items-start md:items-center gap-2">
+          <V5FAQLink />
+        </div>
+      </div>
+      <div className="md:max-xl:px-12">
+        <FaqAccordion items={items} />
+      </div>
+    </DocsPage>
+  );
+}

app/docs/faq/v5-faq-link.tsx

@@ -0,0 +1,11 @@
+import Link from "fumadocs-core/link";
+import { FileQuestionMark } from "lucide-react";
+
+export function V5FAQLink() {
+  return (
+    <Link href="/v5/faq" className="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-fd-muted-foreground hover:text-amber-500 bg-fd-card border border-fd-border hover:border-amber-500/30 rounded-md hover:bg-amber-500/10 transition-colors">
+      <FileQuestionMark className="size-4" />
+      v5
+    </Link>
+  );
+}

app/docs/layout.tsx

@@ -80,6 +80,12 @@ export default function Layout({ children }: { children: ReactNode }) {
         ),
       }}
     >
+      {/* background decoration */}
+      <div className="absolute inset-0 -z-10 w-full h-full pointer-events-none overflow-x-clip">
+        <div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-fd-primary/10 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
+        <div className="fixed top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-fd-primary/5 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
+        <div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 h-[64rem] w-[64rem] bg-grid-lines-xl dark:opacity-80 -translate-y-1/2 max-md:hidden [--mask:radial-gradient(circle_at_center_top,red,transparent)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] -skew-20 pointer-events-none" />
+      </div>
       {children}
     </DocsLayout>
   );

app/global.css

@@ -1,6 +1,7 @@
 @import 'tailwindcss';
 @import 'fumadocs-ui/css/neutral.css';
 @import 'fumadocs-ui/css/preset.css';
+@import "tw-animate-css";
 
 @source '../node_modules/fumadocs-ui/dist/**/*.js';
 
@@ -125,7 +126,6 @@
     linear-gradient(to bottom, #8884 1px, transparent 1px);
 }
 
-
 .bg-grid-lines-y-lg {
   background-position: -20px -20px;
   background-size: 40px 40px;
@@ -148,16 +148,16 @@
 .cut-corners {
   background:var(transparent, rgb(214, 233, 255));
   mask:linear-gradient(
-                -45deg, 
-                transparent 10.313708498984761px, 
-                white 11.313708498984761px, 
-                white calc(100% - 10.313708498984761px), 
+                -45deg,
+                transparent 10.313708498984761px,
+                white 11.313708498984761px,
+                white calc(100% - 10.313708498984761px),
                 transparent calc(100% - 11.313708498984761px)
             ),
             linear-gradient(
-                45deg, 
-                transparent -1px, 
-                white 0px, 
+                45deg,
+                transparent -1px,
+                white 0px,
                 white calc(100% - -1px),
                 transparent calc(100% - 0px)
             );-webkit-mask-composite:destination-in;mask-composite:intersect
@@ -183,6 +183,7 @@
 
 /* smooth scroll */
 html {
+  scrollbar-gutter: stable;
   scroll-behavior: smooth;
   scroll-padding-top: 3rem;
 }
@@ -217,3 +218,7 @@ html {
 .cursed {
   mask-image:radial-gradient(transparent 1px, rgb(15, 17, 21), #ffffff 1px);mask-size:4px 4px;
 }
+
+.bevel {
+    corner-shape: bevel
+}

app/v5/[[...slug]]/page.tsx

@@ -8,13 +8,13 @@ import {
 } from 'fumadocs-ui/page';
 
 import { notFound } from 'next/navigation';
-import { ComponentProps, FC } from 'react';
+import type { ComponentProps, FC } from 'react';
 import defaultMdxComponents from 'fumadocs-ui/mdx';
 
 import { Callout } from '@/components/callout';
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 import { createRelativeLink } from 'fumadocs-ui/mdx';
-import FooterSection from '@/app/(home)/FooterSection';
+// import FooterSection from '@/app/(home)/FooterSection';
 import { EditButton } from '@/components/edit-button';
 import { CopyMarkdownButton } from '@/components/copy-markdown-button';
 export default async function Page(props: {
@@ -46,7 +46,7 @@ export default async function Page(props: {
         <div className="fixed top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-amber-500/5 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
         <div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 h-[64rem] w-[64rem] bg-grid-lines-xl dark:opacity-80 -translate-y-1/2 max-md:hidden [--mask:radial-gradient(circle_at_center_top,red,transparent)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] -skew-20 pointer-events-none" />
       </div>
-      
+
       <DocsPage toc={page.data.toc} full={page.data.full}
         tableOfContent={{
           style: 'clerk',

app/v5/faq/page.tsx

@@ -0,0 +1,34 @@
+import {
+  DocsPage,
+  DocsTitle,
+  DocsDescription,
+} from "fumadocs-ui/page";
+import type { Metadata } from "next";
+
+import { items } from "./v5-faq-items";
+import { V4FAQLink } from "./v4-faq-link";
+import { FaqAccordion } from "@/components/faq-accordion";
+
+export const metadata: Metadata = {
+  title: "v5 FAQ",
+  description: "Frequently answered questions about NativeWind v5",
+};
+
+export default async function FAQPage() {
+  return (
+    <DocsPage footer={{ enabled: false }}>
+      <div className="flex justify-between mb-4 md:max-xl:px-12">
+        <div className="flex-1">
+          <DocsTitle>V5 FAQ</DocsTitle>
+          <DocsDescription className="!mb-0 text-balance">Frequently answered questions for v5</DocsDescription>
+        </div>
+        <div className="flex items-start md:items-center gap-2">
+          <V4FAQLink />
+        </div>
+      </div>
+      <div className="md:max-xl:px-12">
+        <FaqAccordion items={items} />
+      </div>
+    </DocsPage>
+  );
+}

app/v5/faq/v4-faq-link.tsx

@@ -0,0 +1,11 @@
+import Link from "fumadocs-core/link";
+import { FileQuestionMark } from "lucide-react";
+
+export function V4FAQLink() {
+  return (
+    <Link href="/docs/faq" className="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-fd-muted-foreground hover:text-fd-primary bg-fd-card border border-fd-border hover:border-fd-primary/30 rounded-md hover:bg-fd-primary/10 transition-colors">
+      <FileQuestionMark className="size-4" />
+      v4
+    </Link>
+  );
+}

app/v5/faq/v5-faq-items.tsx

@@ -0,0 +1,16 @@
+import type { FaqItem } from "@/components/faq-accordion";
+
+export const items: FaqItem[] = [
+  {
+    title:
+      "Is v5 out yet?",
+    content:
+      'maybe',
+  },
+  {
+    title:
+      "Is v5 stable?",
+    content:
+      "almost",
+  },
+];

app/v5/layout.tsx

@@ -80,6 +80,12 @@ export default function Layout({ children }: { children: ReactNode }) {
         ),
       }}
     >
+      {/* background decoration */}
+      <div className="absolute inset-0 -z-10 w-full h-full pointer-events-none overflow-x-clip">
+        <div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-amber-500/10 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
+        <div className="fixed top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-amber-500/5 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
+        <div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 h-[64rem] w-[64rem] bg-grid-lines-xl dark:opacity-80 -translate-y-1/2 max-md:hidden [--mask:radial-gradient(circle_at_center_top,red,transparent)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] -skew-20 pointer-events-none" />
+      </div>
       {children}
     </DocsLayout>
   );

components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}