feat: moved content for eusable snippets

Author: Kapil Gowru

fern/products/docs/pages/component-library/custom-components/custom-react-components.mdx

@@ -1,8 +1,78 @@
 ---
 title: Custom React Components
-description: How to create and use custom React components.
+subtitle: Add your own React components to enhance your docs
 ---
 
-Learn how to integrate custom React components into your documentation.
+You can extend Fern's built-in component library by adding your own custom React components. 
+This allows you to create unique, interactive elements that match your documentation needs.
 
-<Warning>This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/docs/getting-started/overview).</Warning>
+<Note>Setting up custom react components is part of the pro plan.</Note>
+
+## How does it work
+
+<Steps>
+  ### Create a React component
+
+  Let's start by creating a `components` folder where you can define your react components. Note 
+  that the react components can be defined in `.ts`, `.tsx`, `.js` or `.mdx` files. 
+
+  ```ts components/CustomCard.tsx 
+    export const CustomCard = ({ title, text, link, sparkle = false }) => {
+        return (
+            <a href={link} className="block p-6 rounded-lg border border-gray-200 hover:shadow-lg transition-shadow">
+            <h2 className="text-xl font-semibold mb-2">
+                {title} {sparkle && "✨"}
+            </h2>
+            <p className="text-gray-600">{text}</p>
+            </a>
+        );
+    };
+  ```
+
+  ### Use the component in your docs
+
+  Once you've written the component, you can start leveraging it in your Markdown guides. 
+
+  ```jsx guide.mdx
+import { CustomCard } from "../components/CustomCard"
+
+<CustomCard 
+    title="MyTitle" 
+    text="Hello" 
+    href="https://github.com/fern-api/fern/tree/main/generators/python"
+/>
+  ```
+
+  ### Specify your components directory in `docs.yml`
+
+  Add your components directory to `docs.yml` so that the Fern CLI can scan your components directory 
+  and upload them to the server. 
+
+  ```yml docs.yml
+  experimental:
+    mdx-components:
+      - ./components
+  ```
+</Steps>
+
+## Why not just use custom CSS and JS instead? 
+
+While you can bundle React components as custom JavaScript, using Fern's built-in React component support provides several key advantages:
+
+<AccordionGroup>
+  <Accordion title="No layout shifts or flashes">
+    When adding React components via custom JavaScript, you can't control when components are rendered relative to the rest of the page content. This often leads to glitchy behavior where components flash or 
+    jump as they load asynchronously after the main content.
+  </Accordion>
+
+  <Accordion title="Faster page load">
+    Custom JavaScript bundles typically include their own copy of the React library, which:
+    - Increases page load time by duplicating React code that's already included
+    - Reduces performance as multiple React instances run on the same page
+    - Creates larger bundle sizes that users have to download
+  </Accordion>
+
+  <Accordion title="Improved SEO">
+    Components added via custom JavaScript aren't server-side rendered, which means search engines can't index content.
+  </Accordion>
+</AccordionGroup>

fern/products/docs/pages/component-library/custom-components/nav-link.png

@@ -1,8 +1,48 @@
 ---
 title: Reusable Snippets
-description: Creating and managing reusable content snippets.
+description: Reusable, custom snippets to keep content in sync. Edit once, update everywhere.
 ---
 
-Learn how to create and manage reusable content snippets for your documentation.
+Keep your documentation DRY (Don't Repeat Yourself) by defining a reusable snippet once, and then referencing it in multiple places. This way, you only need to update the snippet in one place to keep all references in sync.
 
-<Warning>This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/docs/getting-started/overview).</Warning>
+## Create a reusable snippet
+
+To use reusable snippets, start by creating a new folder in your `fern` project called `snippets`. Inside the `snippets` folder, create a new file for each snippet you want to define.
+
+For example: 
+    
+```bash
+fern
+└─ pages
+    └─ my-tutorial.mdx
+└─ assets
+└─ snippets
+    ├─ herbs.mdx  
+    ├─ peace-lily.mdx    
+    └─ trees.mdx
+```
+
+In each snippet file, define the content you want to reuse. For example, `peace-lily.mdx` might contain:
+
+```mdx title="snippets/peace-lily.mdx"
+<Warning> Remember to water your plant at least twice a week. </Warning>
+```
+
+## Use a reusable snippet
+
+To use a snippet in your documentation, reference it by its file path (including the `.mdx` extension) in your content. For example, to include the `peace-lily` snippet in your content, use:
+
+<Tabs>
+    <Tab title="Markdown">
+        ```mdx
+        Peace lilies are easy to grow and relatively trouble-free.
+
+        <Markdown src="/snippets/peace-lily.mdx" />
+        ```
+    </Tab>
+    <Tab title="Preview">
+        Peace lilies are easy to grow and relatively trouble-free.
+
+        <Markdown src="/snippets/peace-lily.mdx" />
+    </Tab>
+</Tabs>