feat: add page about in-app search

content/components/accordion-groups.mdx

@@ -0,0 +1,66 @@
+---
+title: "Accordion Groups"
+description: "Group multiple accordions into a single display."
+icon: "table-rows"
+---
+
+Simply add `<AccordionGroup>` around your existing `<Accordion>` components.
+
+<AccordionGroup>
+  <Accordion title="FAQ without Icon">
+    You can put other components inside Accordions.
+
+    ```java HelloWorld.java
+    class HelloWorld {
+        public static void main(String[] args) {
+            System.out.println("Hello, World!");
+        }
+    }
+    ```
+
+    Check out the [Accordion](/content/components/accordions) docs for all the supported props.
+
+  </Accordion>
+
+  <Accordion title="FAQ with Icon" icon="alien-8bit">
+    Check out the [Accordion](/content/components/accordions) docs for all the supported props.
+  </Accordion>
+
+  <Accordion title="FAQ without Icon">
+    Check out the [Accordion](/content/components/accordions) docs for all the supported props.
+  </Accordion>
+</AccordionGroup>
+
+<RequestExample>
+
+````jsx Accordion Group Example
+<AccordionGroup>
+  <Accordion title="FAQ without Icon">
+    You can put other components inside Accordions.
+
+    ```java HelloWorld.java
+    class HelloWorld {
+        public static void main(String[] args) {
+            System.out.println("Hello, World!");
+        }
+    }
+    ```
+
+    Check out the [Accordion](/content/components/accordions) docs for all the supported props.
+  </Accordion>
+
+  <Accordion title="FAQ with Icon" icon="alien-8bit">
+    Check out the [Accordion](/content/components/accordions) docs for all the supported props.
+  </Accordion>
+
+  <Accordion title="FAQ without Icon">
+    Check out the [Accordion](/content/components/accordions) docs for all the supported props.
+  </Accordion>
+</AccordionGroup>
+````
+
+</RequestExample>
+
+## Props
+
+`<AccordionGroup>` does not have any props.

content/components/accordions.mdx

@@ -0,0 +1,60 @@
+---
+title: "Accordions"
+description: "A dropdown component to toggle content visibility"
+icon: "square-caret-down"
+---
+
+<Accordion title="I am an Accordion.">
+  You can put any content in here, including other components, like code:
+   ```java HelloWorld.java
+    class HelloWorld {
+        public static void main(String[] args) {
+            System.out.println("Hello, World!");
+        }
+    }
+    ```
+</Accordion>
+
+<RequestExample>
+
+````jsx Accordion Example
+<Accordion title="I am an Accordion.">
+  You can put any content in here, including other components, like code:
+
+   ```java HelloWorld.java
+    class HelloWorld {
+        public static void main(String[] args) {
+            System.out.println("Hello, World!");
+        }
+    }
+  ```
+</Accordion>
+````
+
+</RequestExample>
+
+## Props
+
+<ResponseField name="title" type="string" required>
+  Title in the Accordion preview.
+</ResponseField>
+
+<ResponseField name="description" type="string">
+  Detail below the title in the Accordion preview.
+</ResponseField>
+
+<ResponseField name="defaultOpen" type="boolean" default="false">
+  Whether the Accordion is open by default.
+</ResponseField>
+
+<ResponseField name="icon" type="string or svg">
+  A [Font Awesome icon](https://fontawesome.com/icons), [Lucide
+  icon](https://lucide.dev/icons), or SVG code
+</ResponseField>
+
+<ResponseField name="iconType" type="string">
+  One of "regular", "solid", "light", "thin", "sharp-solid", "duotone", or
+  "brands"
+</ResponseField>
+
+Use [AccordionGroup](/content/components/accordion-groups) to create a group of Accordions.

content/components/callouts.mdx

@@ -0,0 +1,47 @@
+---
+title: 'Callout Boxes'
+description: 'Use callouts to add eye-catching context to your content'
+icon: 'circle-exclamation'
+---
+
+Callouts can be styled as a Note, Warning, Info, Tip, or Check:
+
+### Note Callouts
+
+<Note>This adds a note in the content</Note>
+
+```jsx
+<Note>This adds a note in the content</Note>
+```
+
+### Warning Callouts
+
+<Warning>This raises a warning to watch out for</Warning>
+
+```jsx
+<Warning>This raises a warning to watch out for</Warning>
+```
+
+### Info Callouts
+
+<Info>This draws attention to important information</Info>
+
+```jsx
+<Info>This draws attention to important information</Info>
+```
+
+### Tip Callouts
+
+<Tip>This suggests a helpful tip</Tip>
+
+```jsx
+<Tip>This suggests a helpful tip</Tip>
+```
+
+### Check Callouts
+
+<Check>This brings us a checked status</Check>
+
+```jsx
+<Check>This brings us a checked status</Check>
+```

content/components/card-groups.mdx

@@ -0,0 +1,49 @@
+---
+title: 'Card Groups'
+description: 'Show cards side by side in a grid format'
+icon: 'rectangles-mixed'
+---
+
+The `CardGroup` component lets you group multiple `Card` components together. It's most often used to put multiple cards in a grid, by specifying the number of grid columns.
+
+<CardGroup cols={2}>
+  <Card title="First Card" icon="square-1">
+    Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
+  </Card>
+  <Card title="Second Card" icon="square-2">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </Card>
+  <Card title="Third Card" icon="square-3">
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco
+  </Card>
+  <Card title="Fourth Card" icon="square-4">
+    Excepteur sint occaecat cupidatat non proident
+  </Card>
+</CardGroup>
+
+<RequestExample>
+
+```jsx Card Group Example
+<CardGroup cols={2}>
+  <Card title="First Card" icon="square-1">
+    Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
+  </Card>
+  <Card title="Second Card" icon="square-2">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  </Card>
+  <Card title="Third Card" icon="square-3">
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco
+  </Card>
+  <Card title="Fourth Card" icon="square-4">
+    Excepteur sint occaecat cupidatat non proident
+  </Card>
+</CardGroup>
+```
+
+</RequestExample>
+
+## Props
+
+<ResponseField name="cols" default={2}>
+  The number of columns per row
+</ResponseField>

content/components/cards.mdx

@@ -0,0 +1,111 @@
+---
+title: "Cards"
+description: "Highlight main points or links with customizable icons"
+icon: "rectangle"
+---
+
+<Card title="Card Title" icon="link" href="/content/components/card-groups">
+  This is how you use a card with an icon and a link. Clicking on this card
+  brings you to the Card Group page.
+</Card>
+
+<RequestExample>
+  ```jsx Card Example
+  <Card title="Click on me" icon="link" href="/content/components/card-group">
+    This is how you use a card with an icon and a link. Clicking on this card
+    brings you to the Card Group page.
+  </Card>
+  ```
+
+```jsx Image Card Example
+<Card title="Image Card" img="/images/card-with-image.png">
+  Here is an example of a card with an image
+</Card>
+```
+
+</RequestExample>
+
+### Horizontal Card
+
+Add a `horizontal` property to make it horizontally displayed.
+
+<Card title="Horizontal Card" icon="text-size" horizontal>
+  Here is an example of a horizontal card
+</Card>
+
+### Image Card
+
+Add an `img` property to display an image on the top of the card.
+
+<Card title="Image Card" img="https://mintlify-assets.b-cdn.net/yosemite.jpg">
+  Here is an example of a card with an image
+</Card>
+
+### Link Card
+
+You can customize the CTA and whether or not to display the arrow on the card. By default, the arrow will only show for external links.
+
+<Card
+  title="Link card"
+  icon="link"
+  href="/content/components/card-groups"
+  arrow="true"
+  cta="Click here"
+>
+  This is how you use a card with an icon and a link. Clicking on this card
+  brings you to the Card Group page.
+</Card>
+
+<RequestExample>
+  ```jsx Card Example
+  <Card
+    title="Link card"
+    icon="link"
+    href="/content/components/card-groups"
+    arrow="true"
+    cta="Click here"
+  >
+    This is how you use a card with an icon and a link. Clicking on this card
+    brings you to the Card Group page.
+  </Card>
+  ```
+</RequestExample>
+
+## Props
+
+<ResponseField name="title" type="string" required>
+  The title of the card
+</ResponseField>
+
+<ResponseField name="icon" type="string or svg">
+  A [Font Awesome icon](https://fontawesome.com/icons), [Lucide
+  icon](https://lucide.dev/icons), or SVG code in `icon={}`
+</ResponseField>
+
+<ResponseField name="iconType" type="string">
+  One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`
+</ResponseField>
+
+<ResponseField name="color" type="string">
+  The color of the icon as a hex code
+</ResponseField>
+
+<ResponseField name="href" type="string">
+  The url that clicking on the card would navigate the user to
+</ResponseField>
+
+<ResponseField name="horizontal" type="boolean">
+  Makes the card more compact and horizontal
+</ResponseField>
+
+<ResponseField name="img" type="string">
+  The url or local path to an image to display on the top of the card
+</ResponseField>
+
+<ResponseField name="cta" type="string">
+  Label for the action button
+</ResponseField>
+
+<ResponseField name="arrow" type="boolean">
+  Enable or disable the link arrow icon
+</ResponseField>

content/components/icons.mdx

@@ -0,0 +1,42 @@
+---
+title: "Icons"
+description: "Use [Font Awesome](https://fontawesome.com/icons) or [Lucide](https://lucide.dev/icons) icons anywhere in the doc"
+icon: "icons"
+---
+
+<Icon icon="check" size={32} />
+
+<RequestExample>
+
+```jsx Icon Example
+<Icon icon="check" size={32} />
+```
+</RequestExample>
+
+## Inline Icons
+
+The icon will be placed inline when used in a paragraph.
+
+```markdown Inline Icon Example
+<Icon icon="check" iconType="solid" /> The documentation you want, effortlessly 
+```
+
+<Icon icon="check" iconType="solid" /> The documentation you want, effortlessly
+
+## Props
+
+<ResponseField name="icon" type="string" required>
+  A [Font Awesome](https://fontawesome.com/icons) or [Lucide](https://lucide.dev/icons) icon
+</ResponseField>
+
+<ResponseField name="iconType" type="string">
+  One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands` (only for [Font Awesome](https://fontawesome.com/icons) icons).
+</ResponseField>
+
+<ResponseField name="color" type="string">
+  The color of the icon as a hex code (e.g., `#FF5733`)
+</ResponseField>
+
+<ResponseField name="size" type="number">
+  The size of the icon in pixels
+</ResponseField>