Docs: improve landing page

Author: fuma-nama

.changeset/rotten-chefs-remember.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Fix React 18 compatibility

apps/docs/app/(home)/page.client.tsx

@@ -158,11 +158,8 @@ export function WhyInteractive(props: {
   }, [active, autoActive, duration, items.length]);
 
   return (
-    <div
-      id="why-interactive"
-      className="mt-8 flex flex-col gap-4 rounded-lg border border-fd-foreground/10 bg-fd-muted/50 p-4 shadow-lg lg:flex-row lg:gap-6 lg:p-6 max-lg:-mx-8"
-    >
-      <div className="-mt-1.5 flex flex-row overflow-x-auto max-lg:-mx-4 max-lg:items-center max-lg:px-2 lg:-ml-4 lg:flex-col">
+    <div id="why-interactive" className="flex flex-col gap-6 md:flex-row">
+      <div className="flex flex-col mt-1.5 border h-fit">
         {items.map((item, i) => (
           <button
             key={item}
@@ -176,11 +173,10 @@ export function WhyInteractive(props: {
             }}
             type="button"
             className={cn(
-              'inline-flex flex-col-reverse text-nowrap rounded-lg py-1.5 text-start text-sm font-medium text-fd-muted-foreground transition-colors max-lg:px-2 lg:flex-row',
+              'inline-flex flex-col text-nowrap py-1.5 text-start text-sm text-fd-muted-foreground font-medium px-2',
               i === active
-                ? 'text-primary max-lg:bg-fd-primary/10'
+                ? 'text-fd-primary-foreground bg-fd-primary'
                 : 'hover:text-fd-accent-foreground/80',
-              i === active && autoActive ? '' : 'max-lg:pb-2.5 lg:pl-3',
             )}
             onClick={() => {
               if (active === i) setAutoActive((prev) => !prev);
@@ -190,16 +186,17 @@ export function WhyInteractive(props: {
               }
             }}
           >
+            {item}
             {i === active && autoActive ? (
               <div
-                className="animate-[why-interactive-x] rounded-lg bg-fd-primary max-lg:h-1 lg:mr-2 lg:w-1 lg:animate-[why-interactive-y]"
+                className="animate-[why-interactive-x] bg-fd-primary-foreground h-1"
                 style={{
                   animationDuration: `${duration.toString()}ms`,
+                  animationTimingFunction: 'linear',
                   animationFillMode: 'forwards',
                 }}
               />
             ) : null}
-            {item}
           </button>
         ))}
       </div>
@@ -213,23 +210,13 @@ export function WhyInteractive(props: {
           to {
             width: 100%;
           }
-        }
-        
-        @keyframes why-interactive-y {
-          from {
-            height: 0px;
-          }
-          
-          to {
-            height: 100%;
-          }
         }`}
       </style>
 
       <div className="flex-1">
         {active === 0 ? (
           <WhyPanel>
-            <h3 className="mb-2 text-lg font-medium">
+            <h3 className="mb-4 text-lg font-semibold">
               Implementing search is difficult, we made it simple.
             </h3>
             <p>
@@ -260,7 +247,7 @@ export function WhyInteractive(props: {
 
         {active === 1 ? (
           <WhyPanel>
-            <h3 className="mb-2 text-lg font-medium">Tailwind CSS Plugin</h3>
+            <h3 className="mb-4 text-lg font-semibold">Tailwind CSS Plugin</h3>
             <p>
               Share the same design system cross the docs and your app with
               Tailwind CSS. Works great with <b>Shadcn UI</b>.
@@ -277,7 +264,7 @@ export function WhyInteractive(props: {
 
         {active === 2 ? (
           <WhyPanel>
-            <h3 className="mb-2 text-lg font-medium">
+            <h3 className="mb-4 text-lg font-semibold">
               From the source of truth, never repeat yourself again.
             </h3>
             <p>
@@ -308,7 +295,7 @@ export function WhyInteractive(props: {
         ) : null}
         {active === 3 ? (
           <WhyPanel>
-            <h3 className="mb-2 text-lg font-medium">
+            <h3 className="mb-4 text-lg font-semibold">
               Interactive docs with React.
             </h3>
             <p>
@@ -326,7 +313,7 @@ export function WhyInteractive(props: {
         ) : null}
         {active === 4 ? (
           <WhyPanel>
-            <h3 className="mb-2 text-lg font-medium">
+            <h3 className="mb-4 text-lg font-semibold">
               Connect your content and server.
             </h3>
 
@@ -341,7 +328,7 @@ export function WhyInteractive(props: {
         ) : null}
         {active === 5 ? (
           <WhyPanel>
-            <h3 className="mb-2 text-lg font-medium">
+            <h3 className="mb-4 text-lg font-semibold">
               Your own content source, search solution, everything.
             </h3>
             <p>

apps/docs/app/(home)/page.tsx

@@ -89,22 +89,22 @@ export default function Page() {
 
 function Architecture() {
   return (
-    <div className="flex flex-col gap-4 border-x border-t px-8 py-16 md:py-24 lg:flex-row md:px-16">
-      <div className="shrink-0 flex-1 font-mono text-start">
-        <p className="px-2 py-1 text-sm bg-fd-primary text-fd-primary-foreground font-medium w-fit mb-4">
+    <div className="flex flex-col gap-4 border-x border-t px-8 py-16 md:py-24 lg:flex-row md:px-12">
+      <div className="shrink-0 flex-1 text-start">
+        <p className="px-2 py-1 text-sm font-mono bg-fd-primary text-fd-primary-foreground font-bold w-fit mb-4">
           Designed with Love
         </p>
-        <h2 className="text-xl font-medium mb-4 sm:text-2xl">
+        <h2 className="text-xl font-semibold mb-4 sm:text-2xl">
           One framework to solve three problems.
         </h2>
-        <p className="text-sm text-fd-muted-foreground mb-6">
-          Fumadocs makes it easy to build beautiful docs, and bring the power to
-          transform content into data, on Next.js.
+        <p className="text-fd-muted-foreground mb-6">
+          Fumadocs makes it easy to build beautiful docs, write content, and
+          transform content into data on Next.js.
           <br />
-          Every part is handled with love - incredibly flexible and
-          customisable.
+          <br />
+          Every part is handled with love, incredibly flexible and customisable.
         </p>
-        <div className="flex flex-row items-center -mx-4">
+        <div className="flex flex-row items-center font-mono -mx-4">
           <a
             href="https://github.com/fuma-nama/fumadocs-basehub"
             rel="noreferrer noopener"
@@ -134,10 +134,7 @@ function Architecture() {
 
 async function Why() {
   return (
-    <div className="relative overflow-hidden border-x border-t px-8 py-12 md:p-16 md:min-h-[700px]">
-      <p className="text-center font-medium text-fd-muted-foreground">
-        Fumadocs offers a complete toolchain to build and maintain your docs.
-      </p>
+    <div className="relative overflow-hidden border-x border-t px-8 py-12 md:py-16 md:min-h-[500px]">
       <WhyInteractive
         typeTable={
           <TypeTable
@@ -459,6 +456,8 @@ function Hero() {
         </Link>
         <a
           href="https://githubbox.com/fuma-nama/fumadocs-ui-template"
+          target="_blank"
+          rel="noreferrer noopener"
           className={cn(
             buttonVariants({
               size: 'lg',
@@ -534,15 +533,15 @@ function Introduction(): React.ReactElement {
     <div className="grid grid-cols-1 border-r md:grid-cols-2">
       <div className="flex flex-col gap-2 border-l border-t px-6 py-12 md:py-16">
         <div className={cn(badgeVariants())}>1</div>
-        <h3 className="text-xl font-bold">Create it.</h3>
+        <h3 className="text-xl font-semibold">Create it.</h3>
         <p className="mb-8 text-fd-muted-foreground">
           Initialize a new docs with a command.
         </p>
         <CreateAppAnimation />
       </div>
       <div className="flex flex-col gap-2 border-l border-t px-6 py-12 md:py-16">
         <div className={cn(badgeVariants())}>2</div>
-        <h3 className="text-xl font-bold">Write.</h3>
+        <h3 className="text-xl font-semibold">Write.</h3>
         <p className="text-fd-muted-foreground">
           Write content, with automation tools & type-safe data validation.
         </p>
@@ -567,9 +566,9 @@ Hello World
           </Files>
         </div>
       </div>
-      <div className="col-span-full flex flex-col items-center gap-2 border-l border-t px-6 py-12 text-center">
+      <div className="col-span-full flex flex-col items-center gap-2 border-l border-t px-6 py-16 text-center">
         <div className={cn(badgeVariants())}>3</div>
-        <h3 className="text-2xl font-bold">Ship.</h3>
+        <h3 className="text-2xl font-semibold">Ship.</h3>
         <p className="text-fd-muted-foreground">
           Deploy your docs easily with Next.js compatible hosting platforms.
         </p>

apps/docs/content/docs/ui/index.mdx

@@ -255,14 +255,12 @@ will replace the `/docs` page with your `page.tsx`.
 Fumadocs is designed with flexibility in mind.
 
 You can use `fumadocs-core` as a headless UI library and bring your own styles.
-Fumadocs MDX is also a useful library to handle MDX content in Next.js similar to Content Collections.
-
-It also includes:
+Fumadocs MDX is also a useful library to handle MDX content in Next.js. It also includes:
 
 - Many built-in components.
 - Typescript Twoslash, OpenAPI, and Math (KaTeX) integrations.
-- Fast and optimized by default, 100% built on App Router.
-- Use it in an existing Next.js project, without refactoring anything.
+- Fast and optimized by default, natively built on App Router.
+- Tight integration with Next.js, you can add it to an existing Next.js project easily.
 
 Feel free to open the demo in CodeSandbox, or read [Comparisons](/docs/ui/comparisons) if you're interested.
 

packages/ui/src/layouts/notebook.tsx

@@ -111,9 +111,7 @@ export function DocsLayout({
             {...sidebar}
             className={cn(
               'md:ps-(--fd-layout-offset)',
-              navMode === 'top'
-                ? 'bg-transparent *:!pt-0'
-                : 'md:[--fd-nav-height:0px]',
+              navMode === 'top' ? 'bg-transparent' : 'md:[--fd-nav-height:0px]',
               sidebar.className,
             )}
           >