From b444c9644a9ba59c0a1f421fb80e396a5d0b6b9b Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Fri, 31 May 2024 10:38:59 +0300
Subject: [PATCH 01/12] chore: readme fix

---
 README.md                 | 6 +++---
 packages/cli/package.json | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 7e1ed00e..65961bf3 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,10 @@
 ## FarmUI  ![GitHub stars](https://img.shields.io/github/stars/Kinfe123/farm-ui)
 
 FarmUI is client first and animation rich ui component library built on top of radix and shadcn as well other primitive providers that we would like to cover.
-## FarmUI  ![GitHub stars](https://img.shields.io/github/stars/Kinfe123/farm-ui)
-
-FarmUI is client first and animation rich ui component library built on top of radix and shadcn as well other primitive providers that we would like to cover.
 
+<p align="center">
+  <img src="apps/www/public/opengraph-image.jpg" alt="landing-image" />
+</p>
 
 
 ## Why tho?
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 73b3ac59..23b0e6ee 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kinfe123/farm-ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Add farmui components and building blocks",
   "main": "index.js",
   "publishConfig": {

From 24f62287254bdd34ecc7b512915f2febef1e3374 Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Fri, 31 May 2024 12:18:11 +0300
Subject: [PATCH 02/12] featix: updating the reg and working with frontend

---
 .turbo/cookies/2.cookie                       |  0
 .turbo/cookies/3.cookie                       |  0
 .turbo/cookies/4.cookie                       |  0
 apps/api/constants/components.json            | 88 ++++++++++++-------
 apps/www/components/HeroAnimated.tsx          |  8 +-
 apps/www/components/farmui/FUIForm.tsx        |  3 +-
 .../{form-field-001.mdx => form-field-01.mdx} |  2 +-
 .../hero-section/here-section-101.mdx         |  2 +-
 .../hero-section/hero-section-100.mdx         |  2 +-
 apps/www/demo/hero-section-103.mdx            |  2 +-
 .../previewsComponents/FUIHeroWithGrid.tsx    |  4 -
 .../previewsComponents/FUIHeroWithSimple.tsx  |  3 -
 apps/www/sections/sections.json               |  2 +-
 apps/www/viewport/components/Viewport.tsx     |  2 +-
 .../viewport/components/reactComponents.tsx   | 22 +++--
 15 files changed, 79 insertions(+), 61 deletions(-)
 delete mode 100644 .turbo/cookies/2.cookie
 delete mode 100644 .turbo/cookies/3.cookie
 delete mode 100644 .turbo/cookies/4.cookie
 rename apps/www/componentsDB/form-field/{form-field-001.mdx => form-field-01.mdx} (99%)

diff --git a/.turbo/cookies/2.cookie b/.turbo/cookies/2.cookie
deleted file mode 100644
index e69de29b..00000000
diff --git a/.turbo/cookies/3.cookie b/.turbo/cookies/3.cookie
deleted file mode 100644
index e69de29b..00000000
diff --git a/.turbo/cookies/4.cookie b/.turbo/cookies/4.cookie
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/api/constants/components.json b/apps/api/constants/components.json
index ded90629..ec77f2fe 100644
--- a/apps/api/constants/components.json
+++ b/apps/api/constants/components.json
@@ -1,8 +1,8 @@
 [
   {
-    "id": "farmui-1001",
+    "id": "farmui-form-01                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         ",
     "name": "FUIForms",
-    "dependencies": ["dotenv"],
+    "dependencies": ["lucide-react"],
     "files": [
       {
         "root": {
@@ -10,57 +10,81 @@
           "contents": [
             {
               "code_for": "react",
-              "content": " \n\"use client\";\n\nimport {\n  CardTitle,\n  CardDescription,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Card,\n} from \"@/components/ui/card\";\nimport { Label } from \"@/components/ui/label\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport LinkItem from \"components/ui/LinkItem\";\nimport { ChevronRight, Loader2 } from \"lucide-react\";\nimport { useState, useTransition } from \"react\";\nimport { useToast } from \"@/components/ui/use-toast\";\nimport { saySomething } from \"actions/emailSubRelated\";\nimport {Button} from \"@/components/ui/button\";\ntype FormType = {\n  firstName: string;\n  lastName?: string;\n  email: string;\n  message: string;\n};\nexport default function FUIForm() {\n  const [pending, startTransition] = useTransition();\n  const { toast } = useToast()\n\n  const [forms, setForms] = useState({\n    firstName: \"\",\n    lastName: \"\",\n    email: \"\",\n    message: \"\",\n  });\n  \n  const handleChange = (e: any) => {\n    setForms({ ...forms, [e.target.name]: e.target.value });\n  };\n  const onSubmit = (e:any) => {\n    e.preventDefault();\n    startTransition(async () => {\n      saySomething({\n        firstName: forms.firstName,\n        lastName: forms.lastName,\n        email: forms.email,\n        message: forms.message,\n      })\n        .then((res) => {\n          toast({\n            position: \"bottom-left\",\n            title: \"Message submitted\",\n            description:\n              \"You have successfully submitted your message. we will keep in touch with you with the speed of light :)\",\n          });\n          setForms({\n            firstName:\"\",\n            lastName:\"\",\n            email: \"\",\n            message: \"\"\n          })\n        })\n        .catch((err) => {\n          toast({\n            position: \"bottom-left\",\n\n            title: \"Something went wrong\",\n            description:\n              \"There is an error while submitting the form, Please try again later :(\",\n            variant: \"destructive\",\n\n          });\n        });\n    });\n  };\n  return (\n    <section className=\"custom-screen-lg mx-auto z-20\">\n      <div className=\"relative backdrop-blur-3xl z-10 max-w-4xl mx-auto  space-y-4\">\n        <Card className=\"relative mt-20 py-10 z-20 backdrop-blur-3xl\">\n          <CardHeader>\n            <CardDescription>\n              Fill out the form below and we'll get back to you as soon as\n              possible.\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"\"></div>\n            <form className=\"space-y-4 z-20\" onSubmit={onSubmit}>\n              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 z-20\">\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"first-name\">First Name</Label>\n                  <Input\n\n                    value={forms.firstName}\n                    onChange={(e) => handleChange(e)}\n                    name=\"firstName\"\n                    placeholder=\"Enter your first name\"\n                    required\n                  />\n                </div>\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"last-name\">Last Name</Label>\n                  <Input\n                    value={forms.lastName}\n                    onChange={handleChange}\n                    name=\"lastName\"\n                    placeholder=\"Enter your last name\"\n                  />\n                </div>\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n\n                  value={forms.email}\n                  name=\"email\"\n                  onChange={handleChange}\n                  placeholder=\"Enter your email\"\n                  type=\"email\"\n                  required\n                />\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"message\">Message</Label>\n                <Textarea\n                  required\n                  value={forms.message}\n                  \n                   className=\"bg-transparent\"\n                   onChange={handleChange}\n                  name=\"message\"\n                  maxLength={200}\n                  \n                  placeholder=\"Enter your message\"\n                />\n              </div>\n                <Button\n                  disabled={pending}\n                  variant=\"default\"\n                  className=\"inline-flex rounded-3xl  text-center group items-center w-full justify-center bg-gradient-to-tr from-black/90 via-zinc-800 to-black  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-6 px-10\"\n                >\n                  Submit\n                  {pending ? (\n                    <Loader2 className=\"animate-spin ml-3 w-4 h-4 flex items-center\" />\n                  ) : (\n                    <ChevronRight className=\"w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n                  )}\n                </Button>\n            </form>\n          </CardContent>\n        </Card>\n      </div>\n    </section>\n  );\n}\n\n\n"
+              "content": "\n\"use client\";\n\nimport {\n  CardTitle,\n  CardDescription,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Card,\n} from \"@/components/ui/card\";\nimport { Label } from \"@/components/ui/label\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { ChevronRight, Loader2 } from \"lucide-react\";\nimport { useState, useTransition } from \"react\";\nimport { useToast } from \"@/components/ui/use-toast\";\n// raplace it with your actions.\nimport { saySomething } from \"actions/emailSubRelated\";\nimport {Button} from \"@/components/ui/button\";\ntype FormType = {\n  firstName: string;\n  lastName?: string;\n  email: string;\n  message: string;\n};\nexport default function FUIForm() {\n  const [pending, startTransition] = useTransition();\n  const { toast } = useToast()\n\n  const [forms, setForms] = useState({\n    firstName: \"\",\n    lastName: \"\",\n    email: \"\",\n    message: \"\",\n  });\n  \n  const handleChange = (e: any) => {\n    setForms({ ...forms, [e.target.name]: e.target.value });\n  };\n  const onSubmit = (e:any) => {\n    e.preventDefault();\n    startTransition(async () => {\n      saySomething({\n        firstName: forms.firstName,\n        lastName: forms.lastName,\n        email: forms.email,\n        message: forms.message,\n      })\n        .then((res) => {\n          toast({\n            position: \"bottom-left\",\n            title: \"Message submitted\",\n            description:\n              \"You have successfully submitted your message. we will keep in touch with you with the speed of light :)\",\n          });\n          setForms({\n            firstName:\"\",\n            lastName:\"\",\n            email: \"\",\n            message: \"\"\n          })\n        })\n        .catch((err) => {\n          toast({\n            position: \"bottom-left\",\n\n            title: \"Something went wrong\",\n            description:\n              \"There is an error while submitting the form, Please try again later :(\",\n            variant: \"destructive\",\n\n          });\n        });\n    });\n  };\n  return (\n    <section className=\"custom-screen-lg mx-auto z-20\">\n      <div className=\"relative backdrop-blur-3xl z-10 max-w-4xl mx-auto  space-y-4\">\n        <Card className=\"relative mt-20 py-10 z-20 backdrop-blur-3xl\">\n          <CardHeader>\n            <CardDescription>\n              Fill out the form below and we'll get back to you as soon as\n              possible.\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"\"></div>\n            <form className=\"space-y-4 z-20\" onSubmit={onSubmit}>\n              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 z-20\">\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"first-name\">First Name</Label>\n                  <Input\n\n                    value={forms.firstName}\n                    onChange={(e) => handleChange(e)}\n                    name=\"firstName\"\n                    placeholder=\"Enter your first name\"\n                    required\n                  />\n                </div>\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"last-name\">Last Name</Label>\n                  <Input\n                    value={forms.lastName}\n                    onChange={handleChange}\n                    name=\"lastName\"\n                    placeholder=\"Enter your last name\"\n                  />\n                </div>\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n\n                  value={forms.email}\n                  name=\"email\"\n                  onChange={handleChange}\n                  placeholder=\"Enter your email\"\n                  type=\"email\"\n                  required\n                />\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"message\">Message</Label>\n                <Textarea\n                  required\n                  value={forms.message}\n                  \n                   className=\"bg-transparent\"\n                   onChange={handleChange}\n                  name=\"message\"\n                  maxLength={200}\n                  \n                  placeholder=\"Enter your message\"\n                />\n              </div>\n                <Button\n                  disabled={pending}\n                  variant=\"default\"\n                  className=\"inline-flex rounded-3xl  text-center group items-center w-full justify-center bg-gradient-to-tr from-black/90 via-zinc-800 to-black  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-6 px-10\"\n                >\n                  Submit\n                  {pending ? (\n                    <Loader2 className=\"animate-spin ml-3 w-4 h-4 flex items-center\" />\n                  ) : (\n                    <ChevronRight className=\"w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n                  )}\n                </Button>\n            </form>\n          </CardContent>\n        </Card>\n      </div>\n    </section>\n  );\n}\n\n\n"
             }
           ]
         }
-      },
-      {
-        "child": [
-          {
-            "name": "FUISomething",
-            "contents": [
-              {
-                "code_for": "react",
-                "content": " \n\"use client\";\n\nimport {\n  CardTitle,\n  CardDescription,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Card,\n} from \"@/components/ui/card\";\nimport { Label } from \"@/components/ui/label\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport LinkItem from \"components/ui/LinkItem\";\nimport { ChevronRight, Loader2 } from \"lucide-react\";\nimport { useState, useTransition } from \"react\";\nimport { useToast } from \"@/components/ui/use-toast\";\nimport { saySomething } from \"actions/emailSubRelated\";\nimport {Button} from \"@/components/ui/button\";\ntype FormType = {\n  firstName: string;\n  lastName?: string;\n  email: string;\n  message: string;\n};\nexport default function FUIForm() {\n  const [pending, startTransition] = useTransition();\n  const { toast } = useToast()\n\n  const [forms, setForms] = useState({\n    firstName: \"\",\n    lastName: \"\",\n    email: \"\",\n    message: \"\",\n  });\n  \n  const handleChange = (e: any) => {\n    setForms({ ...forms, [e.target.name]: e.target.value });\n  };\n  const onSubmit = (e:any) => {\n    e.preventDefault();\n    startTransition(async () => {\n      saySomething({\n        firstName: forms.firstName,\n        lastName: forms.lastName,\n        email: forms.email,\n        message: forms.message,\n      })\n        .then((res) => {\n          toast({\n            position: \"bottom-left\",\n            title: \"Message submitted\",\n            description:\n              \"You have successfully submitted your message. we will keep in touch with you with the speed of light :)\",\n          });\n          setForms({\n            firstName:\"\",\n            lastName:\"\",\n            email: \"\",\n            message: \"\"\n          })\n        })\n        .catch((err) => {\n          toast({\n            position: \"bottom-left\",\n\n            title: \"Something went wrong\",\n            description:\n              \"There is an error while submitting the form, Please try again later :(\",\n            variant: \"destructive\",\n\n          });\n        });\n    });\n  };\n  return (\n    <section className=\"custom-screen-lg mx-auto z-20\">\n      <div className=\"relative backdrop-blur-3xl z-10 max-w-4xl mx-auto  space-y-4\">\n        <Card className=\"relative mt-20 py-10 z-20 backdrop-blur-3xl\">\n          <CardHeader>\n            <CardDescription>\n              Fill out the form below and we'll get back to you as soon as\n              possible.\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"\"></div>\n            <form className=\"space-y-4 z-20\" onSubmit={onSubmit}>\n              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 z-20\">\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"first-name\">First Name</Label>\n                  <Input\n\n                    value={forms.firstName}\n                    onChange={(e) => handleChange(e)}\n                    name=\"firstName\"\n                    placeholder=\"Enter your first name\"\n                    required\n                  />\n                </div>\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"last-name\">Last Name</Label>\n                  <Input\n                    value={forms.lastName}\n                    onChange={handleChange}\n                    name=\"lastName\"\n                    placeholder=\"Enter your last name\"\n                  />\n                </div>\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n\n                  value={forms.email}\n                  name=\"email\"\n                  onChange={handleChange}\n                  placeholder=\"Enter your email\"\n                  type=\"email\"\n                  required\n                />\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"message\">Message</Label>\n                <Textarea\n                  required\n                  value={forms.message}\n                  \n                   className=\"bg-transparent\"\n                   onChange={handleChange}\n                  name=\"message\"\n                  maxLength={200}\n                  \n                  placeholder=\"Enter your message\"\n                />\n              </div>\n                <Button\n                  disabled={pending}\n                  variant=\"default\"\n                  className=\"inline-flex rounded-3xl  text-center group items-center w-full justify-center bg-gradient-to-tr from-black/90 via-zinc-800 to-black  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-6 px-10\"\n                >\n                  Submit\n                  {pending ? (\n                    <Loader2 className=\"animate-spin ml-3 w-4 h-4 flex items-center\" />\n                  ) : (\n                    <ChevronRight className=\"w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n                  )}\n                </Button>\n            </form>\n          </CardContent>\n        </Card>\n      </div>\n    </section>\n  );\n}\n\n\n"
-              }
-            ]
-          }
-        ]
       }
     ],
     "depends_on": ["bb87ffac-1579-4670-80be-7c1180404b4e"],
     "type": "ui"
   },
   {
-    "id": "farmui-bb87ffac-1579-4670-80be-7c1180404b4e",
-    "name": "FUIFaqs",
-    "dependencies": ["@radix-ui/react-accordion", "@radix-ui/alert"],
+    "id": "farmui-hero-01",
+    "name": "FUIHeroLogoCompany",
+    "dependencies": ["@radix-ui/react-avatar", "@radix-ui/react-context-menu" , "@radix-ui/react-dialog" , "@radix-ui/react-select" , "@radix-ui/react-tabs" , "@radix-ui/react-dropdown-menu" , "lucide-react" ],
     "files": [
       {
         "root": {
-          "name": "FUIForm",
+          "name": "FUIHeroLogoCompany",
+          "contents": [
+            {
+              "code_for": "react",
+              "content": "\nimport React from \"react\";\nimport * as Avatar from \"@radix-ui/react-avatar\";\nimport * as ContextMenu from \"@radix-ui/react-context-menu\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport * as Select from \"@radix-ui/react-select\";\nimport * as Tabs from \"@radix-ui/react-tabs\";\nimport * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport { ChevronRight } from \"lucide-react\";\nexport default function FUIHeroSectionWithLogoClouds() {\n  const [state, setState] = React.useState(false);\n\n  javascript:void(0) path with your path\n  const navigation = [\n    { title: \"Partners\", path: \"javascript:void(0)\" },\n    { title: \"Customers\", path: \"javascript:void(0)\" },\n    { title: \"Team\", path: \"javascript:void(0)\" },\n  ];\n\n  return (\n    <div className=\"relative w-full flex flex-col\">\n      <img\n        className=\"absolute top-0 z-0 -translate-y-1/2\"\n        src={\"https://farmui.vercel.app/bg-back.png\"}\n        width={1000}\n        height={1000}\n        alt=\"back bg\"\n      />\n\n      <div className=\"absolute -z-1 inset-0  h-[600px] w-full bg-transparent opacity-10 bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div>\n      <nav className=\"relative items-center pt-5 px-4 mx-auto w-full sm:px-8 lg:flex md:space-x-6\">\n        <div className=\"flex justify-between\">\n          <a href=\"javascript:void(0)\">\n            <img\n              src=\"https://www.farmui.com/logo.svg\"\n              width={120}\n              height={50}\n              alt=\"FarmUI logo\"\n            />\n          </a>\n          <button\n            className=\"text-gray-500 outline-none md:hidden\"\n            onClick={() => setState(!state)}\n          >\n            {state ? (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"h-6 w-6\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M6 18L18 6M6 6l12 12\"\n                />\n              </svg>\n            ) : (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"h-6 w-6\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M4 6h16M4 12h16M4 18h16\"\n                />\n              </svg>\n            )}\n          </button>\n        </div>\n        <ul\n          className={`flex-1 justify-between mt-12 md:text-sm md:font-medium md:flex md:mt-0 ${\n            state\n              ? \"absolute inset-x-0 px-4 border-b bg-white md:border-none md:static\"\n              : \"hidden\"\n          }`}\n        >\n          <div className=\"items-center space-y-5 md:flex md:space-x-6 md:space-y-0 md:ml-12\">\n            {navigation.map((item, idx) => (\n              <li className=\"text-gray-500 hover:text-indigo-600\" key={idx}>\n                <a href={item.path}>{item.title}</a>\n              </li>\n            ))}\n          </div>\n          <li className=\"order-2 py-5 md:py-0\">\n            <button className=\"inline-flex h-12 items-center justify-center font-geist rounded-md border border-gray-800 bg-gradient-to-t from-[#8678f9] from-0% to-[#c7d2fe] px-6 font-medium text-gray-950 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50 \">\n              Get Started\n            </button>\n          </li>\n        </ul>\n      </nav>\n      <section className=\"py-28 z-10\">\n        <div className=\"max-w-screen-xl mx-auto text-gray-600 gap-x-12 items-center justify-between overflow-hidden md:flex md:px-8\">\n          <div className=\"flex-none space-y-5 px-4 sm:max-w-lg md:px-0 lg:max-w-xl\">\n            <h1 className=\"text-sm  text-gray-400 group font-geist mr-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit\">\n              Over 200+ deals finished\n              <ChevronRight className=\"inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n            </h1>\n            <h2 className=\"text-4xl md:text-5xl font-geist font-normal tracking-tighter lg:text-5xl text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]\">\n              We help startups to grow and make money\n            </h2>\n            <p className=\"font-geist\">\n              Sed ut perspiciatis unde omnis iste natus voluptatem accusantium\n              doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n            </p>\n            <div className=\"items-center gap-x-3 space-y-3 sm:flex sm:space-y-0\">\n              <button className=\"inline-flex h-12 items-center justify-center font-geist rounded-md border border-gray-800 bg-gradient-to-t from-[#8678f9] from-0% to-[#c7d2fe] px-6 font-medium text-gray-950 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50 \">\n                Get Started \n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                  className=\"w-5 h-5 ml-2\"\n                >\n                  <path\n                    fillRule=\"evenodd\"\n                    d=\"M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z\"\n                    clipRule=\"evenodd\"\n                  />\n                </svg>\n              </button>\n             \n            </div>\n          </div>\n          <div className=\"flex-none mt-14 md:mt-0 md:max-w-xl\">\n            <img\n              src=\"https://images.unsplash.com/photo-1573164713619-24c711fe7878?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1738&q=80\"\n              className=\" md:rounded-tl-[108px]\"\n              alt=\"\"\n            />\n          </div>\n        </div>\n        <div className=\"mt-14 px-4 md:px-8\">\n          <p className=\"text-center font-displayAlt text-sm text-gray-700 font-semibold\">\n            Trusted by the best companies\n          </p>\n          <div className=\"flex justify-center items-center flex-wrap gap-x-12 gap-y-6 mt-6\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"190\"\n              height=\"33\"\n              fill=\"none\"\n            >\n              <g fill=\"#4B5563\" clip-path=\"url(#a)\">\n                <path d=\"M16.416 32.17v-6.175c6.554 0 11.596-6.49 9.106-13.36-.945-2.552-2.961-4.6-5.514-5.514-6.869-2.49-13.36 2.552-13.36 9.106H.473c0-10.43 10.083-18.559 21.016-15.156 4.79 1.481 8.57 5.294 10.052 10.052 3.403 10.965-4.695 21.048-15.125 21.048Z\" />\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M16.416 25.995h-6.144v-6.144h6.144v6.144ZM10.272 30.721H5.546v-4.726h4.726v4.726ZM5.546 25.995h-3.97v-3.939h3.97v3.939Z\"\n                  clip-rule=\"evenodd\"\n                />\n                <path d=\"M57.19 9.516c-1.828-1.26-4.097-1.922-6.744-1.922H44.68V25.9h5.766c2.647 0 4.916-.661 6.743-2.016 1.008-.693 1.796-1.702 2.332-2.93.535-1.23.819-2.679.819-4.317 0-1.607-.284-3.057-.82-4.286-.535-1.197-1.323-2.174-2.33-2.835Zm-9.139 1.197h1.828c2.017 0 3.687.41 4.947 1.166 1.386.85 2.111 2.458 2.111 4.758 0 2.394-.725 4.064-2.111 4.978-1.197.788-2.867 1.198-4.916 1.198h-1.827l-.032-12.1ZM64.373 7.373c-.567 0-1.04.19-1.418.567-.378.378-.599.851-.599 1.387 0 .567.19 1.04.6 1.418.377.378.85.598 1.417.598.567 0 1.04-.189 1.418-.598.378-.378.599-.883.599-1.418 0-.567-.19-1.04-.6-1.387a1.975 1.975 0 0 0-1.417-.567ZM65.949 13.013h-3.246v12.919h3.246V13.013ZM77.764 14.085c-.976-.883-2.08-1.387-3.245-1.387-1.796 0-3.277.63-4.443 1.828-1.166 1.197-1.733 2.773-1.733 4.631 0 1.828.567 3.372 1.733 4.632 1.166 1.198 2.647 1.828 4.443 1.828 1.26 0 2.332-.347 3.214-1.04v.315c0 1.072-.284 1.89-.85 2.49-.568.566-1.356.85-2.332.85-1.513 0-2.427-.599-3.593-2.142l-2.205 2.11.063.095c.472.662 1.197 1.323 2.174 1.954.977.63 2.174.945 3.624.945 1.922 0 3.497-.599 4.631-1.764 1.166-1.166 1.733-2.742 1.733-4.695V13.013h-3.182l-.032 1.072Zm-.85 7.625c-.567.63-1.292.945-2.237.945-.946 0-1.67-.315-2.206-.945-.567-.63-.85-1.481-.85-2.521 0-1.04.283-1.922.85-2.552.567-.63 1.292-.977 2.206-.977.945 0 1.67.315 2.237.977.567.63.85 1.512.85 2.552s-.315 1.89-.85 2.52ZM86.965 13.013H83.72v12.919h3.245V13.013ZM85.39 7.373c-.567 0-1.04.19-1.418.567-.378.378-.599.851-.599 1.387 0 .567.19 1.04.599 1.418.378.378.85.598 1.418.598.567 0 1.04-.189 1.418-.598.378-.378.598-.883.598-1.418 0-.567-.189-1.04-.599-1.387a1.975 1.975 0 0 0-1.417-.567ZM94.086 9.547h-3.182v3.498h-1.86v2.962h1.86v5.356c0 1.67.346 2.867 1.008 3.56.662.694 1.828 1.04 3.497 1.04.536 0 1.072-.031 1.576-.063h.157V22.94l-1.102.063c-.788 0-1.292-.126-1.544-.41s-.378-.85-.378-1.701v-4.916h3.025v-2.962h-3.025V9.547h-.032ZM115.576 7.594h-3.246V25.9h3.246V7.594ZM148.376 21.3c-.567.662-1.166 1.229-1.638 1.512-.441.284-1.008.442-1.67.442-.945 0-1.733-.347-2.363-1.072-.631-.724-.946-1.638-.946-2.74 0-1.104.315-2.018.914-2.71.63-.725 1.387-1.072 2.332-1.072 1.04 0 2.142.662 3.088 1.764l2.142-2.048c-1.386-1.827-3.182-2.678-5.325-2.678-1.796 0-3.34.662-4.6 1.922-1.26 1.26-1.891 2.899-1.891 4.821 0 1.922.631 3.53 1.891 4.821 1.26 1.292 2.804 1.922 4.6 1.922 2.363 0 4.254-1.008 5.514-2.867l-2.048-2.017ZM161.705 14.81a5.263 5.263 0 0 0-1.859-1.545c-.788-.378-1.67-.567-2.679-.567-1.827 0-3.308.662-4.411 1.985-1.071 1.324-1.638 2.93-1.638 4.853 0 1.953.598 3.56 1.796 4.82 1.166 1.23 2.773 1.86 4.695 1.86 2.174 0 4.001-.883 5.325-2.647l.063-.095-2.111-2.048c-.19.252-.473.504-.725.756-.315.316-.63.536-.945.694-.473.252-1.04.346-1.639.346-.914 0-1.638-.252-2.206-.788-.535-.472-.85-1.134-.913-1.953h8.602l.031-1.198a8.48 8.48 0 0 0-.346-2.394 7.177 7.177 0 0 0-1.04-2.08Zm-7.09 3.056c.158-.63.441-1.135.851-1.544.441-.441 1.008-.662 1.701-.662.788 0 1.387.22 1.796.662.379.41.599.913.662 1.512h-5.01v.032ZM174.183 13.99c-.977-.85-2.332-1.26-4.034-1.26a6.85 6.85 0 0 0-2.993.693c-.851.44-1.67 1.134-2.206 2.08l.032.03 2.079 1.986c.851-1.355 1.796-1.827 3.057-1.827.693 0 1.229.188 1.67.535.441.347.63.82.63 1.386v.63a8.067 8.067 0 0 0-2.395-.377c-1.607 0-2.93.378-3.907 1.134-.977.756-1.481 1.859-1.481 3.214 0 1.197.41 2.206 1.261 2.93.85.693 1.89 1.072 3.119 1.072 1.229 0 2.395-.505 3.435-1.355v1.07h3.182v-8.318c.063-1.543-.441-2.772-1.449-3.623Zm-5.767 6.995c.378-.252.883-.378 1.544-.378.788 0 1.607.157 2.458.473v1.26c-.693.662-1.638.977-2.804.977-.567 0-1.009-.126-1.292-.378-.284-.253-.441-.536-.441-.946 0-.41.189-.756.535-1.008ZM188.173 14.242c-.914-1.008-2.175-1.512-3.782-1.512-1.291 0-2.331.378-3.119 1.102v-.787h-3.182v12.918h3.245v-7.152c0-.977.221-1.765.693-2.3.473-.567 1.072-.82 1.922-.82.725 0 1.292.252 1.702.725.409.504.63 1.166.63 2.017V25.9h3.245v-7.467c0-1.765-.441-3.183-1.354-4.19ZM108.265 13.99c-.976-.85-2.331-1.26-4.033-1.26a6.85 6.85 0 0 0-2.993.693c-.851.44-1.67 1.134-2.206 2.08l.032.03 2.079 1.986c.851-1.355 1.796-1.827 3.057-1.827.693 0 1.228.188 1.67.535.441.347.63.82.63 1.386v.63a8.067 8.067 0 0 0-2.395-.377c-1.607 0-2.93.378-3.907 1.134-.977.756-1.481 1.859-1.481 3.214 0 1.197.41 2.206 1.26 2.93.851.693 1.891 1.072 3.12 1.072s2.394-.505 3.434-1.355v1.07h3.183v-8.318c.031-1.543-.473-2.772-1.45-3.623Zm-5.766 6.995c.378-.252.882-.378 1.544-.378.788 0 1.607.157 2.458.473v1.26c-.693.662-1.639.977-2.805.977-.567 0-1.008-.126-1.291-.378-.284-.253-.442-.536-.442-.946 0-.41.158-.756.536-1.008ZM127.36 26.184c-5.199 0-9.453-4.222-9.453-9.453a9.44 9.44 0 0 1 9.453-9.452c5.199 0 9.453 4.222 9.453 9.452 0 5.23-4.254 9.453-9.453 9.453Zm0-15.534a6.118 6.118 0 0 0-6.113 6.113 6.118 6.118 0 0 0 6.113 6.113 6.12 6.12 0 0 0 6.113-6.113 6.12 6.12 0 0 0-6.113-6.113Z\" />\n              </g>\n              <defs>\n                <clipPath id=\"a\">\n                  <path fill=\"#fff\" d=\"M0 0h190v32.454H0z\" />\n                </clipPath>\n              </defs>\n            </svg>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"120\"\n              height=\"28\"\n              fill=\"none\"\n            >\n              <g clip-path=\"url(#a)\">\n                <path\n                  fill=\"#4B5563\"\n                  d=\"M60.128 7.467c-4.664 0-8.027 3.042-8.027 7.605 0 4.563 3.781 7.605 8.45 7.605 2.818 0 5.302-1.116 6.84-2.996l-3.232-1.867c-.854.934-2.15 1.479-3.608 1.479-2.024 0-3.743-1.056-4.381-2.746h11.838c.093-.474.148-.964.148-1.48 0-4.558-3.359-7.6-8.028-7.6Zm-3.992 6.126c.528-1.685 1.973-2.746 3.992-2.746 2.024 0 3.469 1.06 3.993 2.746h-7.985ZM55.18 2.82 43.474 23.1 31.763 2.82h4.39l7.317 12.675L50.787 2.82h4.394ZM15.611.708l15.61 27.039H0L15.61.707ZM85.14 15.072c0 2.535 1.656 4.225 4.225 4.225 1.74 0 3.046-.79 3.717-2.079l3.245 1.872c-1.343 2.24-3.861 3.587-6.962 3.587-4.669 0-8.028-3.042-8.028-7.605 0-4.563 3.363-7.605 8.028-7.605 3.1 0 5.615 1.348 6.962 3.587l-3.245 1.872c-.671-1.289-1.977-2.079-3.717-2.079-2.565 0-4.225 1.69-4.225 4.225ZM119.986 2.82v19.434h-3.802V2.82h3.802Zm-14.364 4.647c-4.664 0-8.027 3.042-8.027 7.605 0 4.563 3.785 7.605 8.449 7.605 2.818 0 5.303-1.116 6.84-2.996l-3.232-1.867c-.853.934-2.15 1.479-3.608 1.479-2.023 0-3.743-1.056-4.381-2.746h11.838c.093-.474.148-.964.148-1.48 0-4.558-3.359-7.6-8.027-7.6Zm-3.993 6.126c.529-1.685 1.969-2.746 3.993-2.746 2.023 0 3.468 1.06 3.992 2.746h-7.985ZM80.069 7.89v4.094a4.816 4.816 0 0 0-1.351-.207c-2.455 0-4.225 1.69-4.225 4.225v6.252h-3.802V7.89h3.802v3.887c0-2.147 2.497-3.887 5.577-3.887Z\"\n                />\n              </g>\n              <defs>\n                <clipPath id=\"a\">\n                  <path fill=\"#fff\" d=\"M0 .708h120v27.039H0z\" />\n                </clipPath>\n              </defs>\n            </svg>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"180\"\n              height=\"27\"\n              fill=\"none\"\n            >\n              <g fill=\"#4B5563\" clip-path=\"url(#a)\">\n                <path d=\"m39.535 25.951.296-1.025c.351-1.219.221-2.344-.37-3.173-.553-.762-1.454-1.21-2.557-1.263l-20.874-.265a.406.406 0 0 1-.373-.553.554.554 0 0 1 .483-.37l21.077-.276c2.487-.114 5.207-2.142 6.155-4.619l1.199-3.14a.74.74 0 0 0 .033-.425 13.727 13.727 0 0 0-26.39-1.42 6.177 6.177 0 0 0-9.674 6.472A8.77 8.77 0 0 0 .094 25.96a.406.406 0 0 0 .4.35h38.552a.506.506 0 0 0 .49-.358ZM46.492 11.505c-.184 0-.378.006-.58.017-.031 0-.061.007-.089.02a.323.323 0 0 0-.21.22l-.83 2.836c-.353 1.219-.223 2.344.371 3.173a3.22 3.22 0 0 0 2.554 1.263l4.452.276a.397.397 0 0 1 .385.355.414.414 0 0 1-.023.195.553.553 0 0 1-.483.37l-4.624.277c-2.512.116-5.218 2.142-6.166 4.615l-.334.874a.248.248 0 0 0 .218.337H57.06a.428.428 0 0 0 .426-.323 11.425 11.425 0 0 0-10.989-14.505h-.005ZM75.459 16.621h2.633v7.202H82.7v2.308h-7.242v-9.51ZM85.43 21.413v-.024c0-2.731 2.211-4.948 5.135-4.948s5.108 2.19 5.108 4.92v.027c0 2.731-2.211 4.945-5.135 4.945s-5.108-2.197-5.108-4.92Zm7.553 0v-.024c0-1.382-.992-2.568-2.445-2.568-1.454 0-2.405 1.166-2.405 2.54v.027c0 1.382.992 2.568 2.432 2.568s2.419-1.169 2.419-2.543M98.898 21.966v-5.345h2.678v5.284c0 1.382.691 2.026 1.752 2.026 1.062 0 1.752-.624 1.752-1.957v-5.353h2.676v5.27c0 3.071-1.752 4.423-4.455 4.423-2.703 0-4.403-1.382-4.403-4.348M111.791 16.621h3.667c3.397 0 5.367 1.957 5.367 4.699v.027c0 2.744-1.998 4.781-5.419 4.781h-3.615v-9.507Zm3.709 7.186c1.575 0 2.623-.87 2.623-2.407v-.025c0-1.523-1.048-2.407-2.623-2.407h-1.081v4.828l1.081.01ZM124.656 16.621h7.606v2.31h-4.969v1.617h4.496v2.187h-4.496v3.396h-2.637v-9.51ZM135.932 16.621h2.634v7.202h4.607v2.308h-7.241v-9.51ZM150.071 16.555h2.54l4.038 9.576h-2.824l-.694-1.697h-3.67l-.677 1.697h-2.764l4.051-9.576Zm2.308 5.826-1.058-2.703-1.084 2.703h2.142ZM160.043 16.621h4.497c1.456 0 2.459.382 3.098 1.034a2.937 2.937 0 0 1 .843 2.21v.028a3.013 3.013 0 0 1-1.957 2.922l2.269 3.316h-3.04l-1.918-2.88h-1.155v2.88h-2.637v-9.51Zm4.375 4.566c.898 0 1.415-.437 1.415-1.128v-.027c0-.75-.553-1.128-1.429-1.128h-1.724v2.283h1.738ZM172.284 16.621h7.65v2.242h-5.041v1.44h4.565v2.078h-4.565v1.509H180v2.241h-7.716v-9.51ZM69.688 22.519a2.333 2.333 0 0 1-2.178 1.426c-1.443 0-2.432-1.197-2.432-2.567v-.028c0-1.382.965-2.543 2.404-2.543a2.388 2.388 0 0 1 2.261 1.578h2.764c-.431-2.263-2.418-3.946-4.997-3.946-2.935 0-5.135 2.21-5.135 4.947v.027c0 2.731 2.172 4.92 5.107 4.92 2.51 0 4.472-1.625 4.989-3.803l-2.783-.011Z\" />\n              </g>\n              <defs>\n                <clipPath id=\"a\">\n                  <path fill=\"#fff\" d=\"M0 .133h180v26.189H0z\" />\n                </clipPath>\n              </defs>\n            </svg>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"123\"\n              height=\"27\"\n              fill=\"none\"\n            >\n              <path\n                fill=\"#4B5563\"\n                d=\"M46.72 6.111h-3.102v13.951h8.927v-2.053H46.72V6.111ZM63.495 12.03c-.396-.465-.957-.83-1.686-1.096a6.372 6.372 0 0 0-2.198-.398c-.953 0-1.825.13-2.616.388-.791.26-1.47.615-2.036 1.067a5 5 0 0 0-1.322 1.564 3.91 3.91 0 0 0-.472 1.863c0 .665.157 1.29.472 1.874a5.033 5.033 0 0 0 1.322 1.554c.566.452 1.244.808 2.036 1.067.79.259 1.663.388 2.616.388.737 0 1.47-.133 2.198-.398.729-.266 1.29-.631 1.686-1.096v1.255h2.94v-9.287h-2.94v1.255Zm-.27 4.524c-.18.36-.431.671-.755.937a3.79 3.79 0 0 1-1.173.638c-.459.16-.967.239-1.524.239-.558 0-1.061-.08-1.51-.24a3.818 3.818 0 0 1-1.16-.637 2.708 2.708 0 0 1-.742-.937 2.604 2.604 0 0 1-.256-1.136c0-.398.085-.777.256-1.136.17-.358.418-.67.742-.936a3.82 3.82 0 0 1 1.16-.638c.449-.16.952-.24 1.51-.24.557 0 1.065.08 1.524.24.458.16.85.372 1.173.638.324.266.575.578.755.936.18.36.27.738.27 1.136 0 .399-.09.778-.27 1.136ZM87.39 12.03c-.395-.465-.957-.83-1.685-1.096a6.372 6.372 0 0 0-2.198-.398c-.953 0-1.825.13-2.616.388-.791.26-1.47.615-2.036 1.067a5 5 0 0 0-1.322 1.564 3.91 3.91 0 0 0-.472 1.863c0 .665.157 1.29.472 1.874a5.033 5.033 0 0 0 1.322 1.554c.566.452 1.245.808 2.036 1.067.79.259 1.663.388 2.616.388.737 0 1.47-.133 2.198-.398.728-.266 1.29-.631 1.686-1.096v1.255h2.94v-9.287h-2.94v1.255Zm-.269 4.524c-.18.36-.431.671-.755.937a3.79 3.79 0 0 1-1.173.638c-.459.16-.967.239-1.524.239-.558 0-1.061-.08-1.51-.24a3.818 3.818 0 0 1-1.16-.637 2.708 2.708 0 0 1-.742-.937A2.604 2.604 0 0 1 80 15.418c0-.398.085-.777.256-1.136.17-.358.418-.67.742-.936a3.82 3.82 0 0 1 1.16-.638c.449-.16.952-.24 1.51-.24.557 0 1.065.08 1.524.24.458.16.85.372 1.173.638.324.266.575.578.755.936.18.36.27.738.27 1.136 0 .399-.09.778-.27 1.136ZM122.58 6.111h-2.939v13.951h2.939V6.112ZM68.754 20.062h2.94v-7.15h5.043v-2.137h-7.983v9.287ZM102.116 10.775l-3.695 7.112-3.694-7.112h-2.978l4.825 9.287h3.695l4.825-9.287h-2.978ZM111.506 10.536c-3.6 0-6.449 2.186-6.449 4.883 0 2.98 2.758 4.882 6.826 4.882 2.277 0 3.731-.643 5.507-2.044l-1.986-1.136c-.002.001-1.499 1.455-3.736 1.455-2.6 0-3.694-1.55-3.694-2.35h9.753c.512-3.068-2.218-5.69-6.221-5.69Zm-3.524 4.075c.022-.178.361-2.35 3.501-2.35 3.14 0 3.522 2.171 3.544 2.35h-7.045ZM34.671 6.002c-.004-.012-.014-.023-.02-.035-.01-.021-.02-.044-.035-.064-.01-.013-.026-.024-.039-.036-.016-.017-.03-.034-.05-.049-.016-.011-.036-.02-.054-.03-.02-.012-.039-.026-.062-.036l-6.715-2.857a.734.734 0 0 0-.559 0l-6.714 2.857c-.023.01-.042.023-.062.035-.018.01-.039.02-.055.031-.02.015-.034.032-.05.048-.012.013-.027.024-.038.037-.016.02-.025.042-.036.064-.006.012-.015.023-.02.035a.315.315 0 0 0-.02.108v5.425l-5.595 2.38V3.303a.317.317 0 0 0-.019-.108c-.004-.012-.014-.023-.02-.035-.01-.022-.02-.044-.035-.064-.011-.013-.026-.024-.039-.037-.016-.016-.03-.033-.05-.048-.016-.012-.036-.02-.054-.03-.02-.012-.04-.026-.062-.036L7.552.087a.734.734 0 0 0-.558 0L.28 2.944c-.023.01-.042.024-.062.035C.2 2.99.179 3 .163 3.01c-.02.015-.033.032-.05.048-.012.013-.027.024-.038.037-.016.02-.025.043-.036.064-.006.012-.015.023-.02.035A.315.315 0 0 0 0 3.302v16.993c0 .148.107.285.28.359l13.43 5.713c.029.012.06.02.092.028.014.004.028.01.043.013a.748.748 0 0 0 .287 0c.013-.003.025-.008.038-.012.033-.008.066-.016.097-.03l13.43-5.712c.173-.074.28-.21.28-.359V14.87l6.434-2.737c.173-.074.28-.21.28-.359V6.11a.326.326 0 0 0-.02-.108ZM13.987 19.82l-5.585-2.335 5.865-2.495 6.435-2.738 5.59 2.377-4.101 1.73-8.204 3.46Zm12.87-10.614v4.71l-2.35-1-3.245-1.38v-4.71l2.35.999 3.245 1.38Zm.56-5.475 5.593 2.38-5.593 2.379-5.593-2.38 5.593-2.38ZM10.183 15.773l-2.35 1V6.397l3.246-1.381 2.35-1v10.375l-3.246 1.38ZM7.273.923l5.593 2.38-5.593 2.379-5.593-2.38L7.273.922ZM1.118 4.017l2.35 1 3.246 1.38V17.49c0 .016.006.03.008.046.004.02.004.041.012.06v.002c.006.016.018.03.026.046.01.018.017.036.03.052v.001c.012.015.028.027.042.04.015.015.028.03.046.044l.002.001c.016.012.035.02.053.03.02.012.038.025.06.035h.003l.002.002 6.43 2.689v4.756l-12.31-5.236V4.017Zm25.74 16.04-12.31 5.236v-4.757l9.116-3.846 3.193-1.347v4.713Zm6.714-8.521-5.596 2.38v-4.71l3.246-1.381 2.35-1v4.71Z\"\n              />\n            </svg>\n          </div>\n        </div>\n      </section>\n    </div>\n  );\n}\n\n"
+            }
+          ]
+        }
+      }
+     
+    ]
+  },
+  {
+    "id": "farmui-hero-00",
+    "name": "FUIHeroWithGrid",
+    "dependencies": ["framer-motion" , "lucide-react" ],
+    "files": [
+      {
+        "root": {
+          "name": "FUIHeroWithGrid",
           "contents": [
             {
               "code_for": "react",
-              "content": "\"use client\";\n\nimport {\n  CardTitle,\n  CardDescription,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Card,\n} from \"@/components/ui/card\";\nimport { Label } from \"@/components/ui/label\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport LinkItem from \"components/ui/LinkItem\";\nimport { ChevronRight, Loader2 } from \"lucide-react\";\nimport { useState, useTransition } from \"react\";\nimport { useToast } from \"@/components/ui/use-toast\";\nimport { saySomething } from \"actions/emailSubRelated\";\nimport {Button} from \"@/components/ui/button\";\ntype FormType = {\n  firstName: string;\n  lastName?: string;\n  email: string;\n  message: string;\n};\nexport default function FUIForm() {\n  const [pending, startTransition] = useTransition();\n  const { toast } = useToast()\n\n  const [forms, setForms] = useState({\n    firstName: \"\",\n    lastName: \"\",\n    email: \"\",\n    message: \"\",\n  });\n  \n  const handleChange = (e: any) => {\n    setForms({ ...forms, [e.target.name]: e.target.value });\n  };\n  const onSubmit = (e:any) => {\n    e.preventDefault();\n    startTransition(async () => {\n      saySomething({\n        firstName: forms.firstName,\n        lastName: forms.lastName,\n        email: forms.email,\n        message: forms.message,\n      })\n        .then((res) => {\n          toast({\n            position: \"bottom-left\",\n            title: \"Message submitted\",\n            description:\n              \"You have successfully submitted your message. we will keep in touch with you with the speed of light :)\",\n          });\n          setForms({\n            firstName:\"\",\n            lastName:\"\",\n            email: \"\",\n            message: \"\"\n          })\n        })\n        .catch((err) => {\n          toast({\n            position: \"bottom-left\",\n\n            title: \"Something went wrong\",\n            description:\n              \"There is an error while submitting the form, Please try again later :(\",\n            variant: \"destructive\",\n\n          });\n        });\n    });\n  };\n  return (\n    <section className=\"custom-screen-lg mx-auto z-20\">\n      <div className=\"relative backdrop-blur-3xl z-10 max-w-4xl mx-auto  space-y-4\">\n        <Card className=\"relative mt-20 py-10 z-20 backdrop-blur-3xl\">\n          <CardHeader>\n            <CardDescription>\n              Fill out the form below and we'll get back to you as soon as\n              possible.\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"\"></div>\n            <form className=\"space-y-4 z-20\" onSubmit={onSubmit}>\n              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 z-20\">\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"first-name\">First Name</Label>\n                  <Input\n\n                    value={forms.firstName}\n                    onChange={(e) => handleChange(e)}\n                    name=\"firstName\"\n                    placeholder=\"Enter your first name\"\n                    required\n                  />\n                </div>\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"last-name\">Last Name</Label>\n                  <Input\n                    value={forms.lastName}\n                    onChange={handleChange}\n                    name=\"lastName\"\n                    placeholder=\"Enter your last name\"\n                  />\n                </div>\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n\n                  value={forms.email}\n                  name=\"email\"\n                  onChange={handleChange}\n                  placeholder=\"Enter your email\"\n                  type=\"email\"\n                  required\n                />\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"message\">Message</Label>\n                <Textarea\n                  required\n                  value={forms.message}\n                  \n                   className=\"bg-transparent\"\n                   onChange={handleChange}\n                  name=\"message\"\n                  maxLength={200}\n                  \n                  placeholder=\"Enter your message\"\n                />\n              </div>\n                <Button\n                  disabled={pending}\n                  variant=\"default\"\n                  className=\"inline-flex rounded-3xl  text-center group items-center w-full justify-center bg-gradient-to-tr from-black/90 via-zinc-800 to-black  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-6 px-10\"\n                >\n                  Submit\n                  {pending ? (\n                    <Loader2 className=\"animate-spin ml-3 w-4 h-4 flex items-center\" />\n                  ) : (\n                    <ChevronRight className=\"w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n                  )}\n                </Button>\n            </form>\n          </CardContent>\n        </Card>\n      </div>\n    </section>\n  );\n}\n\n\n"
+              "content": "\nimport LinkItem from \"components/ui/LinkItem\";\nimport { IconGithub } from \"components/icons\";\nimport { ChevronRight } from \"lucide-react\";\nimport HeroAnimated from \"components/HeroAnimated\";\nconst FUIHeroWithGrid = () => {\n  return (\n    <>\n      <section className=\"min-h-[800px] w-full  mt-0 relative\">\n        <div className=\"absolute -z-1 inset-0 opacity-15  h-[600px] w-full bg-transparent  bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div>\n        <img\n          className=\"absolute inset-x-0 -top-20 opacity-75 \"\n          src={\n            \"https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75\"\n          }\n          width={1000}\n          height={1000}\n          alt=\"back bg\"\n        />\n        <div className=\"relative z-10 max-w-4xl translate-y-[33%]  mx-auto space-y-4\">\n          <HeroAnimated\n            header=\"Take shadcn to the next level for modern web dev experience\"\n            headerClassName=\"text-center max-w-5xl text-5xl md:text-6xl tracking-tighter mx-auto lg:text-7xl font-bold font-geist  font-normal  text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] leading-0 md:leading-0 md:pb-0 mt-1\"\n            description=\"Move faster with beautiful, responsive UI components and website\n            templates with modern design, 100% free and open-source.\"\n            descriptionClassName=\"mx-auto text-zinc-400 text-center text-md lg:max-w-2xl md:py-5\"\n          >\n            <div className=\"flex flex-wrap items-center justify-center  gap-3\">\n              <LinkItem\n                href=\"/components\"\n                variant=\"default\"\n                className=\"inline-flex text-center group items-center w-full justify-center bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent bg-transparent  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-4 px-10\"\n              >\n                Browser Components\n                <ChevronRight className=\"w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n              </LinkItem>\n              <LinkItem\n                href=\"https://github.com/Kinfe123/farm-ui\"\n                variant=\"shiny\"\n                className=\"inline-flex w-full justify-center items-center gap-x-2 border border-zinc-800 hover:border-zinc-600 bg-zinc-950 hover:text-zinc-100 duration-200 sm:w-auto py-4 px-10\"\n                target=\"_blank\"\n              >\n                <IconGithub className=\"w-5 h-5\" />\n                Star on GitHub\n              </LinkItem>\n            </div>\n          </HeroAnimated>\n        </div>\n      </section>\n      {/* <div className=\"flex justify-center items-center bg-center overflow-x-hidden w-screen absolute top-0 md:-top-2 right-0 min-h-screen\">\n        <Image src={bghero} className=\"w-full bg-center \" alt=\"Hero Image\" />\n      </div> */}\n    </>\n  );\n};\nexport default FUIHeroWithGrid;\n\n"
             }
           ]
         }
       },
       {
-        "child": [
-          {
-            "name": "FUISomething",
-            "contents": [
-              {
-                "code_for": "react",
-                "content": " \n\"use client\";\n\nimport {\n  CardTitle,\n  CardDescription,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Card,\n} from \"@/components/ui/card\";\nimport { Label } from \"@/components/ui/label\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport LinkItem from \"components/ui/LinkItem\";\nimport { ChevronRight, Loader2 } from \"lucide-react\";\nimport { useState, useTransition } from \"react\";\nimport { useToast } from \"@/components/ui/use-toast\";\nimport { saySomething } from \"actions/emailSubRelated\";\nimport {Button} from \"@/components/ui/button\";\ntype FormType = {\n  firstName: string;\n  lastName?: string;\n  email: string;\n  message: string;\n};\nexport default function FUIForm() {\n  const [pending, startTransition] = useTransition();\n  const { toast } = useToast()\n\n  const [forms, setForms] = useState({\n    firstName: \"\",\n    lastName: \"\",\n    email: \"\",\n    message: \"\",\n  });\n  \n  const handleChange = (e: any) => {\n    setForms({ ...forms, [e.target.name]: e.target.value });\n  };\n  const onSubmit = (e:any) => {\n    e.preventDefault();\n    startTransition(async () => {\n      saySomething({\n        firstName: forms.firstName,\n        lastName: forms.lastName,\n        email: forms.email,\n        message: forms.message,\n      })\n        .then((res) => {\n          toast({\n            position: \"bottom-left\",\n            title: \"Message submitted\",\n            description:\n              \"You have successfully submitted your message. we will keep in touch with you with the speed of light :)\",\n          });\n          setForms({\n            firstName:\"\",\n            lastName:\"\",\n            email: \"\",\n            message: \"\"\n          })\n        })\n        .catch((err) => {\n          toast({\n            position: \"bottom-left\",\n\n            title: \"Something went wrong\",\n            description:\n              \"There is an error while submitting the form, Please try again later :(\",\n            variant: \"destructive\",\n\n          });\n        });\n    });\n  };\n  return (\n    <section className=\"custom-screen-lg mx-auto z-20\">\n      <div className=\"relative backdrop-blur-3xl z-10 max-w-4xl mx-auto  space-y-4\">\n        <Card className=\"relative mt-20 py-10 z-20 backdrop-blur-3xl\">\n          <CardHeader>\n            <CardDescription>\n              Fill out the form below and we'll get back to you as soon as\n              possible.\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"\"></div>\n            <form className=\"space-y-4 z-20\" onSubmit={onSubmit}>\n              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 z-20\">\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"first-name\">First Name</Label>\n                  <Input\n\n                    value={forms.firstName}\n                    onChange={(e) => handleChange(e)}\n                    name=\"firstName\"\n                    placeholder=\"Enter your first name\"\n                    required\n                  />\n                </div>\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"last-name\">Last Name</Label>\n                  <Input\n                    value={forms.lastName}\n                    onChange={handleChange}\n                    name=\"lastName\"\n                    placeholder=\"Enter your last name\"\n                  />\n                </div>\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n\n                  value={forms.email}\n                  name=\"email\"\n                  onChange={handleChange}\n                  placeholder=\"Enter your email\"\n                  type=\"email\"\n                  required\n                />\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"message\">Message</Label>\n                <Textarea\n                  required\n                  value={forms.message}\n                  \n                   className=\"bg-transparent\"\n                   onChange={handleChange}\n                  name=\"message\"\n                  maxLength={200}\n                  \n                  placeholder=\"Enter your message\"\n                />\n              </div>\n                <Button\n                  disabled={pending}\n                  variant=\"default\"\n                  className=\"inline-flex rounded-3xl  text-center group items-center w-full justify-center bg-gradient-to-tr from-black/90 via-zinc-800 to-black  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-6 px-10\"\n                >\n                  Submit\n                  {pending ? (\n                    <Loader2 className=\"animate-spin ml-3 w-4 h-4 flex items-center\" />\n                  ) : (\n                    <ChevronRight className=\"w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n                  )}\n                </Button>\n            </form>\n          </CardContent>\n        </Card>\n      </div>\n    </section>\n  );\n}\n\n\n"
-              }
-            ]
-          }
-        ]
+        "child": {
+          "name": "HeroAnimated",
+          "contents": [
+            {
+              "code_for": "react",
+              "content": "\n\"use client\";\nimport { motion } from \"framer-motion\";\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst FADE_UP_ANIMATION_VARIANTS = {\n  hidden: { opacity: 0, y: 10 },\n  show: { opacity: 1, y: 0, transition: { type: \"spring\" } },\n}\nconst HeroAnimated = ({\n  children,\n  header,\n  headerClassName = \"\",\n  descriptionClassName = \"\",\n  childrenClassName = \"\",\n  description,\n}: {\n  children?: React.ReactNode;\n  header: string;\n  headerClassName?: string;\n  description: string;\n  descriptionClassName?: string;\n  childrenClassName?: string;\n}) => {\n\n\n  return (\n    <motion.div\n      initial=\"hidden\"\n      animate=\"show\"\n      viewport={{ once: true }}\n      variants={{\n        hidden: {},\n        show: {\n          transition: {\n            staggerChildren: 0.15,\n          },\n        },\n      }}\n    >\n      <motion.h1\n        className={cn(\n          headerClassName,\n          \"drop-shadow-sm\"\n        )}\n        variants={FADE_UP_ANIMATION_VARIANTS}\n      >\n        {header}\n      </motion.h1>\n      <motion.p\n        className={cn(descriptionClassName, \"mt-6\")}\n        variants={FADE_UP_ANIMATION_VARIANTS}\n      >\n        {description}\n      </motion.p>\n      <motion.div\n        className={cn(\n          childrenClassName,\n          \"mx-auto mt-6 flex items-center justify-center space-x-5\"\n        )}\n        variants={FADE_UP_ANIMATION_VARIANTS}\n      >\n        {children}\n      </motion.div>\n    </motion.div>\n  );\n};\n\nexport default HeroAnimated;\n\n              "
+            }
+          ]
+        }
+      }
+     
+    ]
+  },
+  {
+    "id": "farmui-hero-03",
+    "name": "FUIHeroWithGridSimple",
+    "dependencies": ["@radix-ui/react-avatar", "@radix-ui/react-context-menu" , "@radix-ui/react-dialog" , "@radix-ui/react-select" , "@radix-ui/react-tabs" , "@radix-ui/react-dropdown-menu" , "lucide-react" ],
+    "files": [
+      {
+        "root": {
+          "name": "FUIHeroWithGridSimple",
+          "contents": [
+            {
+              "code_for": "react",
+              "content": "\nimport LinkItem from \"components/ui/LinkItem\";\nimport { IconGithub } from \"components/icons\";\nimport { ChevronRight } from \"lucide-react\";\nimport HeroAnimated from \"components/HeroAnimated\";\nimport BgGradient from \"components/ui/BgGradient\";\nconst FUIHeroWithGridSimple = () => {\n  return (\n    <>\n      <section className=\"min-h-[800px] w-full  mt-0 relative\">\n        <div className=\"absolute -top-0 inset-x-0 opacity-45\">\n          <BgGradient />\n        </div>\n\n        <svg\n          className=\"absolute inset-0 z-1 h-full w-full  stroke-white/5 [mask-image:radial-gradient(100%_100%_at_top_left  ,white,transparent)]\"\n          aria-hidden=\"true\"\n        >\n          <defs>\n            <pattern\n              id=\"983e3e4c-de6d-4c3f-8d64-b9761d1534cc\"\n              width={200}\n              height={200}\n              x=\"50%\"\n              y={-1}\n              patternUnits=\"userSpaceOnUse\"\n            >\n              <path d=\"M.5 200V.5H200\" fill=\"none\" />\n            </pattern>\n          </defs>\n          <svg x=\"50%\" y={-1} className=\"overflow-visible fill-gray-800/20\">\n            <path\n              d=\"M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z\"\n              strokeWidth={0}\n            />\n          </svg>\n          <rect\n            width=\"100%\"\n            height=\"100%\"\n            strokeWidth={0}\n            fill=\"url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)\"\n          />\n        </svg>\n        <div\n          className=\"absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]\"\n          aria-hidden=\"true\"\n        >\n          <div\n            className=\"aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-[#9c80ff] to-[#e546d5] opacity-20\"\n            style={{\n              clipPath:\n                \"polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)\",\n            }}\n          />\n        </div>\n        {/* <div className=\"absolute -z-1 inset-0 opacity-15  h-[600px] w-full bg-transparent  bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div> */}\n\n        <div className=\"relative z-10 max-w-4xl ml-5 md:ml-10  translate-y-[33%]  mr-auto  space-y-4\">\n          <h1 className=\"text-sm  text-gray-400 group font-geist mr-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit\">\n            <pre className=\"tracking-tight uppercase\">\n              Build products for everyone\n              <ChevronRight className=\"inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n            </pre>\n          </h1>\n          <HeroAnimated\n            header=\"Take shadcn to the next level for modern web dev experience.\"\n            headerClassName=\"ml-2 text-left tracking-tight max-w-md md:max-w-3xl text-3xl md:text-4xl tracking-tighter mr-auto lg:text-6xl font-bold font-geist  font-normal  text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] leading-0 md:leading-0 md:pb-0 mt-1\"\n            description=\"\"\n            descriptionClassName=\"  \"\n          >\n            <div className=\"mr-auto text-[0.84rem] ml-2 text-zinc-400 text-left md:text-lg lg:max-w-2xl md:py-5\">\n              <pre className=\"tracking-tight uppercase max-w-md md:max-w-3xl text-wrap\">\n                Move faster with beautiful responsive UI components and website\n                templates with modern design, 100% free and open-source.\n              </pre>\n            </div>\n          </HeroAnimated>\n            <div className=\"mr-auto ml-2  flex flex-wrap gap-y-4 items-start justify-start gap-x-3\">\n              <LinkItem\n                href=\"/components\"\n                className=\"inline-flex rounded-none uppercase font-mono  text-center group items-center w-full justify-center  bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent bg-zinc-900  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-4 px-10\"\n              >\n                Browser Components\n                <ChevronRight className=\"w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n              </LinkItem>\n              <LinkItem\n                href=\"https://github.com/Kinfe123/farm-ui\"\n                variant=\"shiny\"\n                className=\"inline-flex font-mono uppercase tracking-tight rounded-none w-full justify-center items-center gap-x-3 border border-zinc-800 hover:border-zinc-600 bg-zinc-950 hover:text-zinc-100 duration-200 sm:w-auto py-4 px-10\"\n                target=\"_blank\"\n              >\n                <IconGithub className=\"w-5 h-5 \" />\n                Star on GitHub\n              </LinkItem>\n            </div>\n        </div>\n      </section>\n    </>\n  );\n};\nexport default FUIHeroWithGridSimple;\n\n"
+            }
+          ]
+        }
       }
+     
     ]
   }
 ]
diff --git a/apps/www/components/HeroAnimated.tsx b/apps/www/components/HeroAnimated.tsx
index 55a244c6..dd84f017 100644
--- a/apps/www/components/HeroAnimated.tsx
+++ b/apps/www/components/HeroAnimated.tsx
@@ -1,10 +1,12 @@
 "use client";
-import { useEffect } from "react";
 import { motion } from "framer-motion";
 import React from "react";
-import { FADE_UP_ANIMATION_VARIANTS } from "utils/animationConfig";
 import { cn } from "@/lib/utils";
-type FadeUpAnimationProps = {};
+
+const FADE_UP_ANIMATION_VARIANTS = {
+  hidden: { opacity: 0, y: 10 },
+  show: { opacity: 1, y: 0, transition: { type: "spring" } },
+}
 const HeroAnimated = ({
   children,
   header,
diff --git a/apps/www/components/farmui/FUIForm.tsx b/apps/www/components/farmui/FUIForm.tsx
index 0a185ef4..69c6a62b 100644
--- a/apps/www/components/farmui/FUIForm.tsx
+++ b/apps/www/components/farmui/FUIForm.tsx
@@ -12,10 +12,10 @@ import {
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import LinkItem from "components/ui/LinkItem";
 import { ChevronRight, Loader2 } from "lucide-react";
 import { useState, useTransition } from "react";
 import { useToast } from "@/components/ui/use-toast";
+// raplace it with your actions.
 import { saySomething } from "actions/emailSubRelated";
 import {Button} from "@/components/ui/button";
 type FormType = {
@@ -156,3 +156,4 @@ export default function FUIForm() {
 }
 
 
+
diff --git a/apps/www/componentsDB/form-field/form-field-001.mdx b/apps/www/componentsDB/form-field/form-field-01.mdx
similarity index 99%
rename from apps/www/componentsDB/form-field/form-field-001.mdx
rename to apps/www/componentsDB/form-field/form-field-01.mdx
index 85b7accd..c02d1488 100644
--- a/apps/www/componentsDB/form-field/form-field-001.mdx
+++ b/apps/www/componentsDB/form-field/form-field-01.mdx
@@ -5,7 +5,7 @@ paid: false
 isActive: true
 ltr: {"preview":"function App() {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}","react":{"jsxTail":[{"label":"App.jsx","code":"export default () => {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}"}],"jsxCss":[{"code":"export default () => {\n    return (\n        <div className=\"website-url-input\">\n            <label for=\"website-url\">\n                Website URL\n            </label>\n            <div className=\"input-container\">\n                <div className=\"website-protocol\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"input\"\n                />\n            </div>\n        </div>\n    )\n}\n","label":"App.jsx"},{"label":"style.css","code":".website-url-input {\n  max-width: 28rem;\n  padding: 0px 1rem 0px 1rem;\n  margin: 3rem auto 0px auto;\n}\n.website-url-input label {\n  display: block;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: #6b7280;\n}\n.website-url-input .input-container {\n  display: flex;\n  align-items: center;\n  color: #9ca3af;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n}\n.website-url-input .input-container .website-protocol {\n  padding: 0.625rem 0.75rem 0.625rem 0.75rem;\n  background-color: #f9fafb;\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n  border-right: solid 1px #e5e7eb;\n}\n.website-url-input .input-container .input {\n  width: 100%;\n  padding: 0.625rem;\n  margin-left: 0.5rem;\n  background-color: transparent;\n  outline: none;\n}\n"}]},"vue":{"vueTail":[{"code":"<template>\n  <div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block text-left py-2 text-gray-500\">\n      Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n      <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\"\n        class=\"w-full p-2.5 ml-2 bg-transparent outline-none\" />\n    </div>\n  </div>\n</template>","label":"App.vue"}],"vueCss":[{"label":"App.vue","code":"<template>\n  <div class=\"input-container\">\n    <label for=\"website-url\" class=\"input-label\">\n      Website URL\n    </label>\n    <div class=\"input-parent\">\n      <div class=\"left-input bg-gray-50\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\" class=\"website-url\" />\n    </div>\n  </div>\n</template>"},{"code":"  .input-container {\n    max-width: 28rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\n    margin-left: auto;\n    margin-right: auto;\n    margin-top: 3rem;\n  }\n  .input-label {\n    color: #6b7280;\n    text-align: left;\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n    display: block;\n  }\n  .input-parent {\n    border-radius: 0.375rem;\n    display: flex;\n    align-items: center;\n    color: #9ca3af;\n    border-width: 1px;\n  }\n  .left-input {\n    padding-top: 0.625rem;\n    padding-bottom: 0.625rem;\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n    border-right-width: 1px;\n    border-top-left-radius: 0.375rem;\n    border-bottom-left-radius: 0.375rem;\n    background-color: #f9fafb;\n  }\n  .website-url {\n    padding: 0.625rem;\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n    background-color: transparent;\n    width: 100%;\n    margin-left: 0.5rem;\n  }","label":"style.css"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block py-2 text-gray-500\">\n        Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n        <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n            https://\n        </div>\n        <input \n            type=\"text\"\n            placeholder=\"www.example.com\"\n            id=\"website-url\"\n            class=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n        />\n    </div>\n</div>\n"}]}}
 slug: /inputs
-id: "001"
+id: "farmui-form-01"
 created_at: 1
 ---
 
diff --git a/apps/www/componentsDB/hero-section/here-section-101.mdx b/apps/www/componentsDB/hero-section/here-section-101.mdx
index 90dfe88f..2e4794da 100644
--- a/apps/www/componentsDB/hero-section/here-section-101.mdx
+++ b/apps/www/componentsDB/hero-section/here-section-101.mdx
@@ -5,7 +5,7 @@ paid: false
 isActive: true
 ltr: {"preview":"function App() {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}","react":{"jsxTail":[{"label":"App.jsx","code":"export default () => {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}"}],"jsxCss":[{"code":"export default () => {\n    return (\n        <div className=\"website-url-input\">\n            <label for=\"website-url\">\n                Website URL\n            </label>\n            <div className=\"input-container\">\n                <div className=\"website-protocol\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"input\"\n                />\n            </div>\n        </div>\n    )\n}\n","label":"App.jsx"},{"label":"style.css","code":".website-url-input {\n  max-width: 28rem;\n  padding: 0px 1rem 0px 1rem;\n  margin: 3rem auto 0px auto;\n}\n.website-url-input label {\n  display: block;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: #6b7280;\n}\n.website-url-input .input-container {\n  display: flex;\n  align-items: center;\n  color: #9ca3af;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n}\n.website-url-input .input-container .website-protocol {\n  padding: 0.625rem 0.75rem 0.625rem 0.75rem;\n  background-color: #f9fafb;\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n  border-right: solid 1px #e5e7eb;\n}\n.website-url-input .input-container .input {\n  width: 100%;\n  padding: 0.625rem;\n  margin-left: 0.5rem;\n  background-color: transparent;\n  outline: none;\n}\n"}]},"vue":{"vueTail":[{"code":"<template>\n  <div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block text-left py-2 text-gray-500\">\n      Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n      <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\"\n        class=\"w-full p-2.5 ml-2 bg-transparent outline-none\" />\n    </div>\n  </div>\n</template>","label":"App.vue"}],"vueCss":[{"label":"App.vue","code":"<template>\n  <div class=\"input-container\">\n    <label for=\"website-url\" class=\"input-label\">\n      Website URL\n    </label>\n    <div class=\"input-parent\">\n      <div class=\"left-input bg-gray-50\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\" class=\"website-url\" />\n    </div>\n  </div>\n</template>"},{"code":"  .input-container {\n    max-width: 28rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\n    margin-left: auto;\n    margin-right: auto;\n    margin-top: 3rem;\n  }\n  .input-label {\n    color: #6b7280;\n    text-align: left;\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n    display: block;\n  }\n  .input-parent {\n    border-radius: 0.375rem;\n    display: flex;\n    align-items: center;\n    color: #9ca3af;\n    border-width: 1px;\n  }\n  .left-input {\n    padding-top: 0.625rem;\n    padding-bottom: 0.625rem;\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n    border-right-width: 1px;\n    border-top-left-radius: 0.375rem;\n    border-bottom-left-radius: 0.375rem;\n    background-color: #f9fafb;\n  }\n  .website-url {\n    padding: 0.625rem;\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n    background-color: transparent;\n    width: 100%;\n    margin-left: 0.5rem;\n  }","label":"style.css"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block py-2 text-gray-500\">\n        Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n        <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n            https://\n        </div>\n        <input \n            type=\"text\"\n            placeholder=\"www.example.com\"\n            id=\"website-url\"\n            class=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n        />\n    </div>\n</div>\n"}]}}
 slug: /hero-section
-id: "101"
+id: "farmui-hero-01"
 created_at: 1
 ---
 
diff --git a/apps/www/componentsDB/hero-section/hero-section-100.mdx b/apps/www/componentsDB/hero-section/hero-section-100.mdx
index 914da137..147d5008 100644
--- a/apps/www/componentsDB/hero-section/hero-section-100.mdx
+++ b/apps/www/componentsDB/hero-section/hero-section-100.mdx
@@ -5,7 +5,7 @@ paid: false
 isActive: true
 ltr: {"preview":"function App() {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}","react":{"jsxTail":[{"label":"App.jsx","code":"export default () => {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}"}],"jsxCss":[{"code":"export default () => {\n    return (\n        <div className=\"website-url-input\">\n            <label for=\"website-url\">\n                Website URL\n            </label>\n            <div className=\"input-container\">\n                <div className=\"website-protocol\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"input\"\n                />\n            </div>\n        </div>\n    )\n}\n","label":"App.jsx"},{"label":"style.css","code":".website-url-input {\n  max-width: 28rem;\n  padding: 0px 1rem 0px 1rem;\n  margin: 3rem auto 0px auto;\n}\n.website-url-input label {\n  display: block;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: #6b7280;\n}\n.website-url-input .input-container {\n  display: flex;\n  align-items: center;\n  color: #9ca3af;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n}\n.website-url-input .input-container .website-protocol {\n  padding: 0.625rem 0.75rem 0.625rem 0.75rem;\n  background-color: #f9fafb;\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n  border-right: solid 1px #e5e7eb;\n}\n.website-url-input .input-container .input {\n  width: 100%;\n  padding: 0.625rem;\n  margin-left: 0.5rem;\n  background-color: transparent;\n  outline: none;\n}\n"}]},"vue":{"vueTail":[{"code":"<template>\n  <div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block text-left py-2 text-gray-500\">\n      Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n      <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\"\n        class=\"w-full p-2.5 ml-2 bg-transparent outline-none\" />\n    </div>\n  </div>\n</template>","label":"App.vue"}],"vueCss":[{"label":"App.vue","code":"<template>\n  <div class=\"input-container\">\n    <label for=\"website-url\" class=\"input-label\">\n      Website URL\n    </label>\n    <div class=\"input-parent\">\n      <div class=\"left-input bg-gray-50\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\" class=\"website-url\" />\n    </div>\n  </div>\n</template>"},{"code":"  .input-container {\n    max-width: 28rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\n    margin-left: auto;\n    margin-right: auto;\n    margin-top: 3rem;\n  }\n  .input-label {\n    color: #6b7280;\n    text-align: left;\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n    display: block;\n  }\n  .input-parent {\n    border-radius: 0.375rem;\n    display: flex;\n    align-items: center;\n    color: #9ca3af;\n    border-width: 1px;\n  }\n  .left-input {\n    padding-top: 0.625rem;\n    padding-bottom: 0.625rem;\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n    border-right-width: 1px;\n    border-top-left-radius: 0.375rem;\n    border-bottom-left-radius: 0.375rem;\n    background-color: #f9fafb;\n  }\n  .website-url {\n    padding: 0.625rem;\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n    background-color: transparent;\n    width: 100%;\n    margin-left: 0.5rem;\n  }","label":"style.css"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block py-2 text-gray-500\">\n        Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n        <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n            https://\n        </div>\n        <input \n            type=\"text\"\n            placeholder=\"www.example.com\"\n            id=\"website-url\"\n            class=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n        />\n    </div>\n</div>\n"}]}}
 slug: /hero-section
-id: "100"
+id: "farmui-hero-00"
 created_at: 1
 ---
 
diff --git a/apps/www/demo/hero-section-103.mdx b/apps/www/demo/hero-section-103.mdx
index 60813c76..6f722206 100644
--- a/apps/www/demo/hero-section-103.mdx
+++ b/apps/www/demo/hero-section-103.mdx
@@ -5,7 +5,7 @@ paid: false
 isActive: true
 ltr: {"preview":"function App() {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}","react":{"jsxTail":[{"label":"App.jsx","code":"export default () => {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}"}],"jsxCss":[{"code":"export default () => {\n    return (\n        <div className=\"website-url-input\">\n            <label for=\"website-url\">\n                Website URL\n            </label>\n            <div className=\"input-container\">\n                <div className=\"website-protocol\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"input\"\n                />\n            </div>\n        </div>\n    )\n}\n","label":"App.jsx"},{"label":"style.css","code":".website-url-input {\n  max-width: 28rem;\n  padding: 0px 1rem 0px 1rem;\n  margin: 3rem auto 0px auto;\n}\n.website-url-input label {\n  display: block;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: #6b7280;\n}\n.website-url-input .input-container {\n  display: flex;\n  align-items: center;\n  color: #9ca3af;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n}\n.website-url-input .input-container .website-protocol {\n  padding: 0.625rem 0.75rem 0.625rem 0.75rem;\n  background-color: #f9fafb;\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n  border-right: solid 1px #e5e7eb;\n}\n.website-url-input .input-container .input {\n  width: 100%;\n  padding: 0.625rem;\n  margin-left: 0.5rem;\n  background-color: transparent;\n  outline: none;\n}\n"}]},"vue":{"vueTail":[{"code":"<template>\n  <div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block text-left py-2 text-gray-500\">\n      Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n      <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\"\n        class=\"w-full p-2.5 ml-2 bg-transparent outline-none\" />\n    </div>\n  </div>\n</template>","label":"App.vue"}],"vueCss":[{"label":"App.vue","code":"<template>\n  <div class=\"input-container\">\n    <label for=\"website-url\" class=\"input-label\">\n      Website URL\n    </label>\n    <div class=\"input-parent\">\n      <div class=\"left-input bg-gray-50\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\" class=\"website-url\" />\n    </div>\n  </div>\n</template>"},{"code":"  .input-container {\n    max-width: 28rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\n    margin-left: auto;\n    margin-right: auto;\n    margin-top: 3rem;\n  }\n  .input-label {\n    color: #6b7280;\n    text-align: left;\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n    display: block;\n  }\n  .input-parent {\n    border-radius: 0.375rem;\n    display: flex;\n    align-items: center;\n    color: #9ca3af;\n    border-width: 1px;\n  }\n  .left-input {\n    padding-top: 0.625rem;\n    padding-bottom: 0.625rem;\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n    border-right-width: 1px;\n    border-top-left-radius: 0.375rem;\n    border-bottom-left-radius: 0.375rem;\n    background-color: #f9fafb;\n  }\n  .website-url {\n    padding: 0.625rem;\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n    background-color: transparent;\n    width: 100%;\n    margin-left: 0.5rem;\n  }","label":"style.css"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block py-2 text-gray-500\">\n        Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n        <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n            https://\n        </div>\n        <input \n            type=\"text\"\n            placeholder=\"www.example.com\"\n            id=\"website-url\"\n            class=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n        />\n    </div>\n</div>\n"}]}}
 slug: /hero-section
-id: "104"
+id: "farmui-hero-03"
 created_at: 1
 ---
 
diff --git a/apps/www/previewsComponents/FUIHeroWithGrid.tsx b/apps/www/previewsComponents/FUIHeroWithGrid.tsx
index b6636d94..64af8929 100644
--- a/apps/www/previewsComponents/FUIHeroWithGrid.tsx
+++ b/apps/www/previewsComponents/FUIHeroWithGrid.tsx
@@ -1,8 +1,5 @@
-import Image from "next/image";
-
 import LinkItem from "components/ui/LinkItem";
 import { IconGithub } from "components/icons";
-import bghero from "../../../public/img.png";
 import { ChevronRight } from "lucide-react";
 import HeroAnimated from "components/HeroAnimated";
 const FUIHeroWithGrid = () => {
@@ -19,7 +16,6 @@ const FUIHeroWithGrid = () => {
           height={1000}
           alt="back bg"
         />
-
         <div className="relative z-10 max-w-4xl translate-y-[33%]  mx-auto space-y-4">
           <HeroAnimated
             header="Take shadcn to the next level for modern web dev experience"
diff --git a/apps/www/previewsComponents/FUIHeroWithSimple.tsx b/apps/www/previewsComponents/FUIHeroWithSimple.tsx
index 9d45c254..b6036c3b 100644
--- a/apps/www/previewsComponents/FUIHeroWithSimple.tsx
+++ b/apps/www/previewsComponents/FUIHeroWithSimple.tsx
@@ -1,8 +1,5 @@
-import Image from "next/image";
-
 import LinkItem from "components/ui/LinkItem";
 import { IconGithub } from "components/icons";
-import bghero from "../../../public/img.png";
 import { ChevronRight } from "lucide-react";
 import HeroAnimated from "components/HeroAnimated";
 import BgGradient from "components/ui/BgGradient";
diff --git a/apps/www/sections/sections.json b/apps/www/sections/sections.json
index 77a68357..5e3c86d0 100644
--- a/apps/www/sections/sections.json
+++ b/apps/www/sections/sections.json
@@ -15,7 +15,7 @@
     "category": "Marketing",
     "count": 7,
     "cover_url": "FAQS.png",
-    "id": "001",
+    "id": "farmui-form-01",
     "section_name": "Form Field",
     "description": "Beautifully designed, fully responsive, expertly crafted Form examples",
     "isNew": true
diff --git a/apps/www/viewport/components/Viewport.tsx b/apps/www/viewport/components/Viewport.tsx
index dddbccf4..17e77afd 100644
--- a/apps/www/viewport/components/Viewport.tsx
+++ b/apps/www/viewport/components/Viewport.tsx
@@ -130,7 +130,7 @@ const Viewport = ({ children, files , comp, dir, srcDoc = template, ...props }:
     >
       <div
         ref={iframeContainerRef}
-        className="relative max-w-full min-w-full h-auto sm:min-w-[400px] sm:flex"
+        className="relative max-w-full  min-w-full h-auto sm:min-w-[400px] sm:flex"
       >
         {comp.component}
         {/* <iframe
diff --git a/apps/www/viewport/components/reactComponents.tsx b/apps/www/viewport/components/reactComponents.tsx
index 87b90d5f..1aeb4bf9 100644
--- a/apps/www/viewport/components/reactComponents.tsx
+++ b/apps/www/viewport/components/reactComponents.tsx
@@ -18,13 +18,13 @@ type ComponentProps = {
   };
 };
 export const componentToPreview: ComponentProps = {
-  "001": {
+  "farmui-form-01": {
     component: <FUIForm />,
     description: "Form Input UI",
     path: "previewsComponents/FUIForm",
     codeCopy: {
       react: `
-            \n"use client";\n\nimport {\n  CardTitle,\n  CardDescription,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Card,\n} from "@/components/ui/card";\nimport { Label } from "@/components/ui/label";\nimport { Input } from "@/components/ui/input";\nimport { Textarea } from "@/components/ui/textarea";\nimport LinkItem from "components/ui/LinkItem";\nimport { ChevronRight, Loader2 } from "lucide-react";\nimport { useState, useTransition } from "react";\nimport { useToast } from "@/components/ui/use-toast";\nimport { saySomething } from "actions/emailSubRelated";\nimport {Button} from "@/components/ui/button";\ntype FormType = {\n  firstName: string;\n  lastName?: string;\n  email: string;\n  message: string;\n};\nexport default function FUIForm() {\n  const [pending, startTransition] = useTransition();\n  const { toast } = useToast()\n\n  const [forms, setForms] = useState({\n    firstName: "",\n    lastName: "",\n    email: "",\n    message: "",\n  });\n  \n  const handleChange = (e: any) => {\n    setForms({ ...forms, [e.target.name]: e.target.value });\n  };\n  const onSubmit = (e:any) => {\n    e.preventDefault();\n    startTransition(async () => {\n      saySomething({\n        firstName: forms.firstName,\n        lastName: forms.lastName,\n        email: forms.email,\n        message: forms.message,\n      })\n        .then((res) => {\n          toast({\n            position: "bottom-left",\n            title: "Message submitted",\n            description:\n              "You have successfully submitted your message. we will keep in touch with you with the speed of light :)",\n          });\n          setForms({\n            firstName:"",\n            lastName:"",\n            email: "",\n            message: ""\n          })\n        })\n        .catch((err) => {\n          toast({\n            position: "bottom-left",\n\n            title: "Something went wrong",\n            description:\n              "There is an error while submitting the form, Please try again later :(",\n            variant: "destructive",\n\n          });\n        });\n    });\n  };\n  return (\n    <section className="custom-screen-lg mx-auto z-20">\n      <div className="relative backdrop-blur-3xl z-10 max-w-4xl mx-auto  space-y-4">\n        <Card className="relative mt-20 py-10 z-20 backdrop-blur-3xl">\n          <CardHeader>\n            <CardDescription>\n              Fill out the form below and we'll get back to you as soon as\n              possible.\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=""></div>\n            <form className="space-y-4 z-20" onSubmit={onSubmit}>\n              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 z-20">\n                <div className="space-y-2">\n                  <Label htmlFor="first-name">First Name</Label>\n                  <Input\n\n                    value={forms.firstName}\n                    onChange={(e) => handleChange(e)}\n                    name="firstName"\n                    placeholder="Enter your first name"\n                    required\n                  />\n                </div>\n                <div className="space-y-2">\n                  <Label htmlFor="last-name">Last Name</Label>\n                  <Input\n                    value={forms.lastName}\n                    onChange={handleChange}\n                    name="lastName"\n                    placeholder="Enter your last name"\n                  />\n                </div>\n              </div>\n              <div className="space-y-2">\n                <Label htmlFor="email">Email</Label>\n                <Input\n\n                  value={forms.email}\n                  name="email"\n                  onChange={handleChange}\n                  placeholder="Enter your email"\n                  type="email"\n                  required\n                />\n              </div>\n              <div className="space-y-2">\n                <Label htmlFor="message">Message</Label>\n                <Textarea\n                  required\n                  value={forms.message}\n                  \n                   className="bg-transparent"\n                   onChange={handleChange}\n                  name="message"\n                  maxLength={200}\n                  \n                  placeholder="Enter your message"\n                />\n              </div>\n                <Button\n                  disabled={pending}\n                  variant="default"\n                  className="inline-flex rounded-3xl  text-center group items-center w-full justify-center bg-gradient-to-tr from-black/90 via-zinc-800 to-black  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-6 px-10"\n                >\n                  Submit\n                  {pending ? (\n                    <Loader2 className="animate-spin ml-3 w-4 h-4 flex items-center" />\n                  ) : (\n                    <ChevronRight className="w-4 h-4 ml-2 group-hover:translate-x-1 duration-300" />\n                  )}\n                </Button>\n            </form>\n          </CardContent>\n        </Card>\n      </div>\n    </section>\n  );\n}\n
+            \n\"use client\";\n\nimport {\n  CardTitle,\n  CardDescription,\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Card,\n} from \"@/components/ui/card\";\nimport { Label } from \"@/components/ui/label\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { ChevronRight, Loader2 } from \"lucide-react\";\nimport { useState, useTransition } from \"react\";\nimport { useToast } from \"@/components/ui/use-toast\";\n// raplace it with your actions.\nimport { saySomething } from \"actions/emailSubRelated\";\nimport {Button} from \"@/components/ui/button\";\ntype FormType = {\n  firstName: string;\n  lastName?: string;\n  email: string;\n  message: string;\n};\nexport default function FUIForm() {\n  const [pending, startTransition] = useTransition();\n  const { toast } = useToast()\n\n  const [forms, setForms] = useState({\n    firstName: \"\",\n    lastName: \"\",\n    email: \"\",\n    message: \"\",\n  });\n  \n  const handleChange = (e: any) => {\n    setForms({ ...forms, [e.target.name]: e.target.value });\n  };\n  const onSubmit = (e:any) => {\n    e.preventDefault();\n    startTransition(async () => {\n      saySomething({\n        firstName: forms.firstName,\n        lastName: forms.lastName,\n        email: forms.email,\n        message: forms.message,\n      })\n        .then((res) => {\n          toast({\n            position: \"bottom-left\",\n            title: \"Message submitted\",\n            description:\n              \"You have successfully submitted your message. we will keep in touch with you with the speed of light :)\",\n          });\n          setForms({\n            firstName:\"\",\n            lastName:\"\",\n            email: \"\",\n            message: \"\"\n          })\n        })\n        .catch((err) => {\n          toast({\n            position: \"bottom-left\",\n\n            title: \"Something went wrong\",\n            description:\n              \"There is an error while submitting the form, Please try again later :(\",\n            variant: \"destructive\",\n\n          });\n        });\n    });\n  };\n  return (\n    <section className=\"custom-screen-lg mx-auto z-20\">\n      <div className=\"relative backdrop-blur-3xl z-10 max-w-4xl mx-auto  space-y-4\">\n        <Card className=\"relative mt-20 py-10 z-20 backdrop-blur-3xl\">\n          <CardHeader>\n            <CardDescription>\n              Fill out the form below and we'll get back to you as soon as\n              possible.\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"\"></div>\n            <form className=\"space-y-4 z-20\" onSubmit={onSubmit}>\n              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 z-20\">\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"first-name\">First Name</Label>\n                  <Input\n\n                    value={forms.firstName}\n                    onChange={(e) => handleChange(e)}\n                    name=\"firstName\"\n                    placeholder=\"Enter your first name\"\n                    required\n                  />\n                </div>\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"last-name\">Last Name</Label>\n                  <Input\n                    value={forms.lastName}\n                    onChange={handleChange}\n                    name=\"lastName\"\n                    placeholder=\"Enter your last name\"\n                  />\n                </div>\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input\n\n                  value={forms.email}\n                  name=\"email\"\n                  onChange={handleChange}\n                  placeholder=\"Enter your email\"\n                  type=\"email\"\n                  required\n                />\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"message\">Message</Label>\n                <Textarea\n                  required\n                  value={forms.message}\n                  \n                   className=\"bg-transparent\"\n                   onChange={handleChange}\n                  name=\"message\"\n                  maxLength={200}\n                  \n                  placeholder=\"Enter your message\"\n                />\n              </div>\n                <Button\n                  disabled={pending}\n                  variant=\"default\"\n                  className=\"inline-flex rounded-3xl  text-center group items-center w-full justify-center bg-gradient-to-tr from-black/90 via-zinc-800 to-black  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-6 px-10\"\n                >\n                  Submit\n                  {pending ? (\n                    <Loader2 className=\"animate-spin ml-3 w-4 h-4 flex items-center\" />\n                  ) : (\n                    <ChevronRight className=\"w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n                  )}\n                </Button>\n            </form>\n          </CardContent>\n        </Card>\n      </div>\n    </section>\n  );\n}\n\n\n
 
             
             `,
@@ -42,41 +42,39 @@ export const componentToPreview: ComponentProps = {
     },
   },
 
-  "100": {
+  "farmui-hero-00": {
     component: <FUIHeroWithGrid />,
     description: "Hero Section With Grid",
     path: "previewsComponents/FUIHeroWithGrid",
     codeCopy: {
       react: `
-            \nimport Image from "next/image";\n\nimport LinkItem from "components/ui/LinkItem";\nimport { IconGithub } from "components/icons";\nimport bghero from "../../../public/img.png";\nimport { ChevronRight } from "lucide-react";\nimport HeroAnimated from "components/HeroAnimated";\nconst FUIHeroWithGrid = () => {\n  return (\n    <>\n      <section className="min-h-[800px] w-full  mt-0 relative">\n        <div className="absolute -z-1 inset-0 opacity-15  h-[600px] w-full bg-transparent  bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>\n        <img\n          className="absolute inset-x-0 -top-20 opacity-75 "\n          src={\n            "https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75"\n          }\n          width={1000}\n          height={1000}\n          alt="back bg"\n        />\n\n        <div className="relative z-10 max-w-4xl translate-y-[33%]  mx-auto space-y-4">\n          <HeroAnimated\n            header="Take shadcn to the next level for modern web dev experience"\n            headerClassName="text-center max-w-5xl text-2xl md:text-5xl tracking-tighter mx-auto lg:text-7xl font-bold font-geist  font-normal  text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] leading-0 md:leading-0 md:pb-0 mt-1"\n            description="Move faster with beautiful, responsive UI components and website\n            templates with modern design, 100% free and open-source."\n            descriptionClassName="mx-auto text-zinc-400 text-center text-lg lg:max-w-2xl py-5"\n          >\n            <div className="flex flex-wrap items-center justify-center  gap-3">\n              <LinkItem\n                href="/components"\n                variant="default"\n                className="inline-flex text-center group items-center w-full justify-center bg-gradient-to-bl from-black/90 via-zinc-800 to-black  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-4 px-10"\n              >\n                Browser Components\n                <ChevronRight className="w-4 h-4 ml-2 group-hover:translate-x-1 duration-300" />\n              </LinkItem>\n              <LinkItem\n                href="https://github.com/Kinfe123/farm-ui"\n                variant="shiny"\n                className="inline-flex w-full justify-center items-center gap-x-2 border border-zinc-800 hover:border-zinc-600 bg-zinc-950 hover:text-zinc-100 duration-200 sm:w-auto py-4 px-10"\n                target="_blank"\n              >\n                <IconGithub className="w-5 h-5" />\n                Star on GitHub\n              </LinkItem>\n            </div>\n          </HeroAnimated>\n        </div>\n      </section>\n      {/* <div className="flex justify-center items-center bg-center overflow-x-hidden w-screen absolute top-0 md:-top-2 right-0 min-h-screen">\n        <Image src={bghero} className="w-full bg-center " alt="Hero Image" />\n      </div> */}\n    </>\n  );\n};\nexport default FUIHeroWithGrid;\n\n\n
+      \nimport LinkItem from \"components/ui/LinkItem\";\nimport { IconGithub } from \"components/icons\";\nimport { ChevronRight } from \"lucide-react\";\nimport HeroAnimated from \"components/HeroAnimated\";\nconst FUIHeroWithGrid = () => {\n  return (\n    <>\n      <section className=\"min-h-[800px] w-full  mt-0 relative\">\n        <div className=\"absolute -z-1 inset-0 opacity-15  h-[600px] w-full bg-transparent  bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div>\n        <img\n          className=\"absolute inset-x-0 -top-20 opacity-75 \"\n          src={\n            \"https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75\"\n          }\n          width={1000}\n          height={1000}\n          alt=\"back bg\"\n        />\n        <div className=\"relative z-10 max-w-4xl translate-y-[33%]  mx-auto space-y-4\">\n          <HeroAnimated\n            header=\"Take shadcn to the next level for modern web dev experience\"\n            headerClassName=\"text-center max-w-5xl text-5xl md:text-6xl tracking-tighter mx-auto lg:text-7xl font-bold font-geist  font-normal  text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] leading-0 md:leading-0 md:pb-0 mt-1\"\n            description=\"Move faster with beautiful, responsive UI components and website\n            templates with modern design, 100% free and open-source.\"\n            descriptionClassName=\"mx-auto text-zinc-400 text-center text-md lg:max-w-2xl md:py-5\"\n          >\n            <div className=\"flex flex-wrap items-center justify-center  gap-3\">\n              <LinkItem\n                href=\"/components\"\n                variant=\"default\"\n                className=\"inline-flex text-center group items-center w-full justify-center bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent bg-transparent  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-4 px-10\"\n              >\n                Browser Components\n                <ChevronRight className=\"w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n              </LinkItem>\n              <LinkItem\n                href=\"https://github.com/Kinfe123/farm-ui\"\n                variant=\"shiny\"\n                className=\"inline-flex w-full justify-center items-center gap-x-2 border border-zinc-800 hover:border-zinc-600 bg-zinc-950 hover:text-zinc-100 duration-200 sm:w-auto py-4 px-10\"\n                target=\"_blank\"\n              >\n                <IconGithub className=\"w-5 h-5\" />\n                Star on GitHub\n              </LinkItem>\n            </div>\n          </HeroAnimated>\n        </div>\n      </section>\n   \n    </>\n  );\n};\nexport default FUIHeroWithGrid;\n\n
+
+
 
 
             
             `,
     },
   },
-  "101": {
+  "farmui-hero-01": {
     component: <FUIHeroSectionWithLogoClouds />,
     description: "Hero Section With Clouds and Logo",
     path: "previewsComponents/FUIHeroSectionWithLogoClouds",
     codeCopy: {
       react: `
-            \nimport React from "react";\nimport * as Avatar from "@radix-ui/react-avatar";\nimport * as ContextMenu from "@radix-ui/react-context-menu";\nimport * as Dialog from "@radix-ui/react-dialog";\nimport * as Select from "@radix-ui/react-select";\nimport * as Tabs from "@radix-ui/react-tabs";\nimport * as DropdownMenu from "@radix-ui/react-dropdown-menu";\nimport { ChevronRight } from "lucide-react";\nexport default function FUIHeroSectionWithLogoClouds() {\n  const [state, setState] = React.useState(false);\n  const navigation = [\n    { title: "Partners", path: "javascript:void(0)" },\n    { title: "Customers", path: "javascript:void(0)" },\n    { title: "Team", path: "javascript:void(0)" },\n  ];\n\n  return (\n    <div className="relative w-full flex flex-col">\n      <img\n        className="absolute top-0 z-0 -translate-y-1/2"\n        src={"https://farmui.vercel.app/bg-back.png"}\n        width={1000}\n        height={1000}\n        alt="back bg"\n      />\n\n      <div className="absolute -z-1 inset-0  h-[600px] w-full bg-transparent opacity-10 bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>\n      <nav className="relative items-center pt-5 px-4 mx-auto w-full sm:px-8 lg:flex md:space-x-6">\n        <div className="flex justify-between">\n          <a href="javascript:void(0)">\n            <img\n              src="https://www.farmui.com/logo.svg"\n              width={120}\n              height={50}\n              alt="FarmUI logo"\n            />\n          </a>\n          <button\n            className="text-gray-500 outline-none md:hidden"\n            onClick={() => setState(!state)}\n          >\n            {state ? (\n              <svg\n                xmlns="http://www.w3.org/2000/svg"\n                className="h-6 w-6"\n                fill="none"\n                viewBox="0 0 24 24"\n                stroke="currentColor"\n              >\n                <path\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                  strokeWidth={2}\n                  d="M6 18L18 6M6 6l12 12"\n                />\n              </svg>\n            ) : (\n              <svg\n                xmlns="http://www.w3.org/2000/svg"\n                className="h-6 w-6"\n                fill="none"\n                viewBox="0 0 24 24"\n                stroke="currentColor"\n              >\n                <path\n                  strokeLinecap="round"\n                  strokeLinejoin="round"\n                  strokeWidth={2}\n                  d="M4 6h16M4 12h16M4 18h16"\n                />\n              </svg>\n            )}\n          </button>\n        </div>\n        <ul\n          className={'flex-1 justify-between mt-12 md:text-sm md:font-medium md:flex md:mt-0 \n              ? "absolute inset-x-0 px-4 border-b bg-white md:border-none md:static"\n              : "hidden"\n          }'}\n        >\n          <div className="items-center space-y-5 md:flex md:space-x-6 md:space-y-0 md:ml-12">\n            {navigation.map((item, idx) => (\n              <li className="text-gray-500 hover:text-indigo-600" key={idx}>\n                <a href={item.path}>{item.title}</a>\n              </li>\n            ))}\n          </div>\n          <li className="order-2 py-5 md:py-0">\n            <button className="inline-flex h-12 items-center justify-center font-geist rounded-md border border-gray-800 bg-gradient-to-t from-[#8678f9] from-0% to-[#c7d2fe] px-6 font-medium text-gray-950 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50 ">\n              Get Started\n            </button>\n          </li>\n        </ul>\n      </nav>\n      <section className="py-28 z-10">\n        <div className="max-w-screen-xl mx-auto text-gray-600 gap-x-12 items-center justify-between overflow-hidden md:flex md:px-8">\n          <div className="flex-none space-y-5 px-4 sm:max-w-lg md:px-0 lg:max-w-xl">\n            <h1 className="text-sm  text-gray-400 group font-geist mr-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit">\n              Over 200+ deals finished\n              <ChevronRight className="inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300" />\n            </h1>\n            <h2 className="text-4xl md:text-5xl font-geist font-normal tracking-tighter lg:text-5xl text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">\n              We help startups to grow and make money\n            </h2>\n            <p className="font-geist">\n              Sed ut perspiciatis unde omnis iste natus voluptatem accusantium\n              doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n            </p>\n            <div className="items-center gap-x-3 space-y-3 sm:flex sm:space-y-0">\n              <button className="inline-flex h-12 items-center justify-center font-geist rounded-md border border-gray-800 bg-gradient-to-t from-[#8678f9] from-0% to-[#c7d2fe] px-6 font-medium text-gray-950 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50 ">\n                Get Started \n                <svg\n                  xmlns="http://www.w3.org/2000/svg"\n                  viewBox="0 0 20 20"\n                  fill="currentColor"\n                  className="w-5 h-5 ml-2"\n                >\n                  <path\n                    fillRule="evenodd"\n                    d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z"\n                    clipRule="evenodd"\n                  />\n                </svg>\n              </button>\n             \n            </div>\n          </div>\n          <div className="flex-none mt-14 md:mt-0 md:max-w-xl">\n            <img\n              src="https://images.unsplash.com/photo-1573164713619-24c711fe7878?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1738&q=80"\n              className=" md:rounded-tl-[108px]"\n              alt=""\n            />\n          </div>\n        </div>\n        <div className="mt-14 px-4 md:px-8">\n          <p className="text-center font-displayAlt text-sm text-gray-700 font-semibold">\n            Trusted by the best companies\n          </p>\n          <div className="flex justify-center items-center flex-wrap gap-x-12 gap-y-6 mt-6">\n            <svg\n              xmlns="http://www.w3.org/2000/svg"\n              width="190"\n              height="33"\n              fill="none"\n            >\n              <g fill="#4B5563" clip-path="url(#a)">\n                <path d="M16.416 32.17v-6.175c6.554 0 11.596-6.49 9.106-13.36-.945-2.552-2.961-4.6-5.514-5.514-6.869-2.49-13.36 2.552-13.36 9.106H.473c0-10.43 10.083-18.559 21.016-15.156 4.79 1.481 8.57 5.294 10.052 10.052 3.403 10.965-4.695 21.048-15.125 21.048Z" />\n                <path\n                  fill-rule="evenodd"\n                  d="M16.416 25.995h-6.144v-6.144h6.144v6.144ZM10.272 30.721H5.546v-4.726h4.726v4.726ZM5.546 25.995h-3.97v-3.939h3.97v3.939Z"\n                  clip-rule="evenodd"\n                />\n                <path d="M57.19 9.516c-1.828-1.26-4.097-1.922-6.744-1.922H44.68V25.9h5.766c2.647 0 4.916-.661 6.743-2.016 1.008-.693 1.796-1.702 2.332-2.93.535-1.23.819-2.679.819-4.317 0-1.607-.284-3.057-.82-4.286-.535-1.197-1.323-2.174-2.33-2.835Zm-9.139 1.197h1.828c2.017 0 3.687.41 4.947 1.166 1.386.85 2.111 2.458 2.111 4.758 0 2.394-.725 4.064-2.111 4.978-1.197.788-2.867 1.198-4.916 1.198h-1.827l-.032-12.1ZM64.373 7.373c-.567 0-1.04.19-1.418.567-.378.378-.599.851-.599 1.387 0 .567.19 1.04.6 1.418.377.378.85.598 1.417.598.567 0 1.04-.189 1.418-.598.378-.378.599-.883.599-1.418 0-.567-.19-1.04-.6-1.387a1.975 1.975 0 0 0-1.417-.567ZM65.949 13.013h-3.246v12.919h3.246V13.013ZM77.764 14.085c-.976-.883-2.08-1.387-3.245-1.387-1.796 0-3.277.63-4.443 1.828-1.166 1.197-1.733 2.773-1.733 4.631 0 1.828.567 3.372 1.733 4.632 1.166 1.198 2.647 1.828 4.443 1.828 1.26 0 2.332-.347 3.214-1.04v.315c0 1.072-.284 1.89-.85 2.49-.568.566-1.356.85-2.332.85-1.513 0-2.427-.599-3.593-2.142l-2.205 2.11.063.095c.472.662 1.197 1.323 2.174 1.954.977.63 2.174.945 3.624.945 1.922 0 3.497-.599 4.631-1.764 1.166-1.166 1.733-2.742 1.733-4.695V13.013h-3.182l-.032 1.072Zm-.85 7.625c-.567.63-1.292.945-2.237.945-.946 0-1.67-.315-2.206-.945-.567-.63-.85-1.481-.85-2.521 0-1.04.283-1.922.85-2.552.567-.63 1.292-.977 2.206-.977.945 0 1.67.315 2.237.977.567.63.85 1.512.85 2.552s-.315 1.89-.85 2.52ZM86.965 13.013H83.72v12.919h3.245V13.013ZM85.39 7.373c-.567 0-1.04.19-1.418.567-.378.378-.599.851-.599 1.387 0 .567.19 1.04.599 1.418.378.378.85.598 1.418.598.567 0 1.04-.189 1.418-.598.378-.378.598-.883.598-1.418 0-.567-.189-1.04-.599-1.387a1.975 1.975 0 0 0-1.417-.567ZM94.086 9.547h-3.182v3.498h-1.86v2.962h1.86v5.356c0 1.67.346 2.867 1.008 3.56.662.694 1.828 1.04 3.497 1.04.536 0 1.072-.031 1.576-.063h.157V22.94l-1.102.063c-.788 0-1.292-.126-1.544-.41s-.378-.85-.378-1.701v-4.916h3.025v-2.962h-3.025V9.547h-.032ZM115.576 7.594h-3.246V25.9h3.246V7.594ZM148.376 21.3c-.567.662-1.166 1.229-1.638 1.512-.441.284-1.008.442-1.67.442-.945 0-1.733-.347-2.363-1.072-.631-.724-.946-1.638-.946-2.74 0-1.104.315-2.018.914-2.71.63-.725 1.387-1.072 2.332-1.072 1.04 0 2.142.662 3.088 1.764l2.142-2.048c-1.386-1.827-3.182-2.678-5.325-2.678-1.796 0-3.34.662-4.6 1.922-1.26 1.26-1.891 2.899-1.891 4.821 0 1.922.631 3.53 1.891 4.821 1.26 1.292 2.804 1.922 4.6 1.922 2.363 0 4.254-1.008 5.514-2.867l-2.048-2.017ZM161.705 14.81a5.263 5.263 0 0 0-1.859-1.545c-.788-.378-1.67-.567-2.679-.567-1.827 0-3.308.662-4.411 1.985-1.071 1.324-1.638 2.93-1.638 4.853 0 1.953.598 3.56 1.796 4.82 1.166 1.23 2.773 1.86 4.695 1.86 2.174 0 4.001-.883 5.325-2.647l.063-.095-2.111-2.048c-.19.252-.473.504-.725.756-.315.316-.63.536-.945.694-.473.252-1.04.346-1.639.346-.914 0-1.638-.252-2.206-.788-.535-.472-.85-1.134-.913-1.953h8.602l.031-1.198a8.48 8.48 0 0 0-.346-2.394 7.177 7.177 0 0 0-1.04-2.08Zm-7.09 3.056c.158-.63.441-1.135.851-1.544.441-.441 1.008-.662 1.701-.662.788 0 1.387.22 1.796.662.379.41.599.913.662 1.512h-5.01v.032ZM174.183 13.99c-.977-.85-2.332-1.26-4.034-1.26a6.85 6.85 0 0 0-2.993.693c-.851.44-1.67 1.134-2.206 2.08l.032.03 2.079 1.986c.851-1.355 1.796-1.827 3.057-1.827.693 0 1.229.188 1.67.535.441.347.63.82.63 1.386v.63a8.067 8.067 0 0 0-2.395-.377c-1.607 0-2.93.378-3.907 1.134-.977.756-1.481 1.859-1.481 3.214 0 1.197.41 2.206 1.261 2.93.85.693 1.89 1.072 3.119 1.072 1.229 0 2.395-.505 3.435-1.355v1.07h3.182v-8.318c.063-1.543-.441-2.772-1.449-3.623Zm-5.767 6.995c.378-.252.883-.378 1.544-.378.788 0 1.607.157 2.458.473v1.26c-.693.662-1.638.977-2.804.977-.567 0-1.009-.126-1.292-.378-.284-.253-.441-.536-.441-.946 0-.41.189-.756.535-1.008ZM188.173 14.242c-.914-1.008-2.175-1.512-3.782-1.512-1.291 0-2.331.378-3.119 1.102v-.787h-3.182v12.918h3.245v-7.152c0-.977.221-1.765.693-2.3.473-.567 1.072-.82 1.922-.82.725 0 1.292.252 1.702.725.409.504.63 1.166.63 2.017V25.9h3.245v-7.467c0-1.765-.441-3.183-1.354-4.19ZM108.265 13.99c-.976-.85-2.331-1.26-4.033-1.26a6.85 6.85 0 0 0-2.993.693c-.851.44-1.67 1.134-2.206 2.08l.032.03 2.079 1.986c.851-1.355 1.796-1.827 3.057-1.827.693 0 1.228.188 1.67.535.441.347.63.82.63 1.386v.63a8.067 8.067 0 0 0-2.395-.377c-1.607 0-2.93.378-3.907 1.134-.977.756-1.481 1.859-1.481 3.214 0 1.197.41 2.206 1.26 2.93.851.693 1.891 1.072 3.12 1.072s2.394-.505 3.434-1.355v1.07h3.183v-8.318c.031-1.543-.473-2.772-1.45-3.623Zm-5.766 6.995c.378-.252.882-.378 1.544-.378.788 0 1.607.157 2.458.473v1.26c-.693.662-1.639.977-2.805.977-.567 0-1.008-.126-1.291-.378-.284-.253-.442-.536-.442-.946 0-.41.158-.756.536-1.008ZM127.36 26.184c-5.199 0-9.453-4.222-9.453-9.453a9.44 9.44 0 0 1 9.453-9.452c5.199 0 9.453 4.222 9.453 9.452 0 5.23-4.254 9.453-9.453 9.453Zm0-15.534a6.118 6.118 0 0 0-6.113 6.113 6.118 6.118 0 0 0 6.113 6.113 6.12 6.12 0 0 0 6.113-6.113 6.12 6.12 0 0 0-6.113-6.113Z" />\n              </g>\n              <defs>\n                <clipPath id="a">\n                  <path fill="#fff" d="M0 0h190v32.454H0z" />\n                </clipPath>\n              </defs>\n            </svg>\n            <svg\n              xmlns="http://www.w3.org/2000/svg"\n              width="120"\n              height="28"\n              fill="none"\n            >\n              <g clip-path="url(#a)">\n                <path\n                  fill="#4B5563"\n                  d="M60.128 7.467c-4.664 0-8.027 3.042-8.027 7.605 0 4.563 3.781 7.605 8.45 7.605 2.818 0 5.302-1.116 6.84-2.996l-3.232-1.867c-.854.934-2.15 1.479-3.608 1.479-2.024 0-3.743-1.056-4.381-2.746h11.838c.093-.474.148-.964.148-1.48 0-4.558-3.359-7.6-8.028-7.6Zm-3.992 6.126c.528-1.685 1.973-2.746 3.992-2.746 2.024 0 3.469 1.06 3.993 2.746h-7.985ZM55.18 2.82 43.474 23.1 31.763 2.82h4.39l7.317 12.675L50.787 2.82h4.394ZM15.611.708l15.61 27.039H0L15.61.707ZM85.14 15.072c0 2.535 1.656 4.225 4.225 4.225 1.74 0 3.046-.79 3.717-2.079l3.245 1.872c-1.343 2.24-3.861 3.587-6.962 3.587-4.669 0-8.028-3.042-8.028-7.605 0-4.563 3.363-7.605 8.028-7.605 3.1 0 5.615 1.348 6.962 3.587l-3.245 1.872c-.671-1.289-1.977-2.079-3.717-2.079-2.565 0-4.225 1.69-4.225 4.225ZM119.986 2.82v19.434h-3.802V2.82h3.802Zm-14.364 4.647c-4.664 0-8.027 3.042-8.027 7.605 0 4.563 3.785 7.605 8.449 7.605 2.818 0 5.303-1.116 6.84-2.996l-3.232-1.867c-.853.934-2.15 1.479-3.608 1.479-2.023 0-3.743-1.056-4.381-2.746h11.838c.093-.474.148-.964.148-1.48 0-4.558-3.359-7.6-8.027-7.6Zm-3.993 6.126c.529-1.685 1.969-2.746 3.993-2.746 2.023 0 3.468 1.06 3.992 2.746h-7.985ZM80.069 7.89v4.094a4.816 4.816 0 0 0-1.351-.207c-2.455 0-4.225 1.69-4.225 4.225v6.252h-3.802V7.89h3.802v3.887c0-2.147 2.497-3.887 5.577-3.887Z"\n                />\n              </g>\n              <defs>\n                <clipPath id="a">\n                  <path fill="#fff" d="M0 .708h120v27.039H0z" />\n                </clipPath>\n              </defs>\n            </svg>\n            <svg\n              xmlns="http://www.w3.org/2000/svg"\n              width="180"\n              height="27"\n              fill="none"\n            >\n              <g fill="#4B5563" clip-path="url(#a)">\n                <path d="m39.535 25.951.296-1.025c.351-1.219.221-2.344-.37-3.173-.553-.762-1.454-1.21-2.557-1.263l-20.874-.265a.406.406 0 0 1-.373-.553.554.554 0 0 1 .483-.37l21.077-.276c2.487-.114 5.207-2.142 6.155-4.619l1.199-3.14a.74.74 0 0 0 .033-.425 13.727 13.727 0 0 0-26.39-1.42 6.177 6.177 0 0 0-9.674 6.472A8.77 8.77 0 0 0 .094 25.96a.406.406 0 0 0 .4.35h38.552a.506.506 0 0 0 .49-.358ZM46.492 11.505c-.184 0-.378.006-.58.017-.031 0-.061.007-.089.02a.323.323 0 0 0-.21.22l-.83 2.836c-.353 1.219-.223 2.344.371 3.173a3.22 3.22 0 0 0 2.554 1.263l4.452.276a.397.397 0 0 1 .385.355.414.414 0 0 1-.023.195.553.553 0 0 1-.483.37l-4.624.277c-2.512.116-5.218 2.142-6.166 4.615l-.334.874a.248.248 0 0 0 .218.337H57.06a.428.428 0 0 0 .426-.323 11.425 11.425 0 0 0-10.989-14.505h-.005ZM75.459 16.621h2.633v7.202H82.7v2.308h-7.242v-9.51ZM85.43 21.413v-.024c0-2.731 2.211-4.948 5.135-4.948s5.108 2.19 5.108 4.92v.027c0 2.731-2.211 4.945-5.135 4.945s-5.108-2.197-5.108-4.92Zm7.553 0v-.024c0-1.382-.992-2.568-2.445-2.568-1.454 0-2.405 1.166-2.405 2.54v.027c0 1.382.992 2.568 2.432 2.568s2.419-1.169 2.419-2.543M98.898 21.966v-5.345h2.678v5.284c0 1.382.691 2.026 1.752 2.026 1.062 0 1.752-.624 1.752-1.957v-5.353h2.676v5.27c0 3.071-1.752 4.423-4.455 4.423-2.703 0-4.403-1.382-4.403-4.348M111.791 16.621h3.667c3.397 0 5.367 1.957 5.367 4.699v.027c0 2.744-1.998 4.781-5.419 4.781h-3.615v-9.507Zm3.709 7.186c1.575 0 2.623-.87 2.623-2.407v-.025c0-1.523-1.048-2.407-2.623-2.407h-1.081v4.828l1.081.01ZM124.656 16.621h7.606v2.31h-4.969v1.617h4.496v2.187h-4.496v3.396h-2.637v-9.51ZM135.932 16.621h2.634v7.202h4.607v2.308h-7.241v-9.51ZM150.071 16.555h2.54l4.038 9.576h-2.824l-.694-1.697h-3.67l-.677 1.697h-2.764l4.051-9.576Zm2.308 5.826-1.058-2.703-1.084 2.703h2.142ZM160.043 16.621h4.497c1.456 0 2.459.382 3.098 1.034a2.937 2.937 0 0 1 .843 2.21v.028a3.013 3.013 0 0 1-1.957 2.922l2.269 3.316h-3.04l-1.918-2.88h-1.155v2.88h-2.637v-9.51Zm4.375 4.566c.898 0 1.415-.437 1.415-1.128v-.027c0-.75-.553-1.128-1.429-1.128h-1.724v2.283h1.738ZM172.284 16.621h7.65v2.242h-5.041v1.44h4.565v2.078h-4.565v1.509H180v2.241h-7.716v-9.51ZM69.688 22.519a2.333 2.333 0 0 1-2.178 1.426c-1.443 0-2.432-1.197-2.432-2.567v-.028c0-1.382.965-2.543 2.404-2.543a2.388 2.388 0 0 1 2.261 1.578h2.764c-.431-2.263-2.418-3.946-4.997-3.946-2.935 0-5.135 2.21-5.135 4.947v.027c0 2.731 2.172 4.92 5.107 4.92 2.51 0 4.472-1.625 4.989-3.803l-2.783-.011Z" />\n              </g>\n              <defs>\n                <clipPath id="a">\n                  <path fill="#fff" d="M0 .133h180v26.189H0z" />\n                </clipPath>\n              </defs>\n            </svg>\n            <svg\n              xmlns="http://www.w3.org/2000/svg"\n              width="123"\n              height="27"\n              fill="none"\n            >\n              <path\n                fill="#4B5563"\n                d="M46.72 6.111h-3.102v13.951h8.927v-2.053H46.72V6.111ZM63.495 12.03c-.396-.465-.957-.83-1.686-1.096a6.372 6.372 0 0 0-2.198-.398c-.953 0-1.825.13-2.616.388-.791.26-1.47.615-2.036 1.067a5 5 0 0 0-1.322 1.564 3.91 3.91 0 0 0-.472 1.863c0 .665.157 1.29.472 1.874a5.033 5.033 0 0 0 1.322 1.554c.566.452 1.244.808 2.036 1.067.79.259 1.663.388 2.616.388.737 0 1.47-.133 2.198-.398.729-.266 1.29-.631 1.686-1.096v1.255h2.94v-9.287h-2.94v1.255Zm-.27 4.524c-.18.36-.431.671-.755.937a3.79 3.79 0 0 1-1.173.638c-.459.16-.967.239-1.524.239-.558 0-1.061-.08-1.51-.24a3.818 3.818 0 0 1-1.16-.637 2.708 2.708 0 0 1-.742-.937 2.604 2.604 0 0 1-.256-1.136c0-.398.085-.777.256-1.136.17-.358.418-.67.742-.936a3.82 3.82 0 0 1 1.16-.638c.449-.16.952-.24 1.51-.24.557 0 1.065.08 1.524.24.458.16.85.372 1.173.638.324.266.575.578.755.936.18.36.27.738.27 1.136 0 .399-.09.778-.27 1.136ZM87.39 12.03c-.395-.465-.957-.83-1.685-1.096a6.372 6.372 0 0 0-2.198-.398c-.953 0-1.825.13-2.616.388-.791.26-1.47.615-2.036 1.067a5 5 0 0 0-1.322 1.564 3.91 3.91 0 0 0-.472 1.863c0 .665.157 1.29.472 1.874a5.033 5.033 0 0 0 1.322 1.554c.566.452 1.245.808 2.036 1.067.79.259 1.663.388 2.616.388.737 0 1.47-.133 2.198-.398.728-.266 1.29-.631 1.686-1.096v1.255h2.94v-9.287h-2.94v1.255Zm-.269 4.524c-.18.36-.431.671-.755.937a3.79 3.79 0 0 1-1.173.638c-.459.16-.967.239-1.524.239-.558 0-1.061-.08-1.51-.24a3.818 3.818 0 0 1-1.16-.637 2.708 2.708 0 0 1-.742-.937A2.604 2.604 0 0 1 80 15.418c0-.398.085-.777.256-1.136.17-.358.418-.67.742-.936a3.82 3.82 0 0 1 1.16-.638c.449-.16.952-.24 1.51-.24.557 0 1.065.08 1.524.24.458.16.85.372 1.173.638.324.266.575.578.755.936.18.36.27.738.27 1.136 0 .399-.09.778-.27 1.136ZM122.58 6.111h-2.939v13.951h2.939V6.112ZM68.754 20.062h2.94v-7.15h5.043v-2.137h-7.983v9.287ZM102.116 10.775l-3.695 7.112-3.694-7.112h-2.978l4.825 9.287h3.695l4.825-9.287h-2.978ZM111.506 10.536c-3.6 0-6.449 2.186-6.449 4.883 0 2.98 2.758 4.882 6.826 4.882 2.277 0 3.731-.643 5.507-2.044l-1.986-1.136c-.002.001-1.499 1.455-3.736 1.455-2.6 0-3.694-1.55-3.694-2.35h9.753c.512-3.068-2.218-5.69-6.221-5.69Zm-3.524 4.075c.022-.178.361-2.35 3.501-2.35 3.14 0 3.522 2.171 3.544 2.35h-7.045ZM34.671 6.002c-.004-.012-.014-.023-.02-.035-.01-.021-.02-.044-.035-.064-.01-.013-.026-.024-.039-.036-.016-.017-.03-.034-.05-.049-.016-.011-.036-.02-.054-.03-.02-.012-.039-.026-.062-.036l-6.715-2.857a.734.734 0 0 0-.559 0l-6.714 2.857c-.023.01-.042.023-.062.035-.018.01-.039.02-.055.031-.02.015-.034.032-.05.048-.012.013-.027.024-.038.037-.016.02-.025.042-.036.064-.006.012-.015.023-.02.035a.315.315 0 0 0-.02.108v5.425l-5.595 2.38V3.303a.317.317 0 0 0-.019-.108c-.004-.012-.014-.023-.02-.035-.01-.022-.02-.044-.035-.064-.011-.013-.026-.024-.039-.037-.016-.016-.03-.033-.05-.048-.016-.012-.036-.02-.054-.03-.02-.012-.04-.026-.062-.036L7.552.087a.734.734 0 0 0-.558 0L.28 2.944c-.023.01-.042.024-.062.035C.2 2.99.179 3 .163 3.01c-.02.015-.033.032-.05.048-.012.013-.027.024-.038.037-.016.02-.025.043-.036.064-.006.012-.015.023-.02.035A.315.315 0 0 0 0 3.302v16.993c0 .148.107.285.28.359l13.43 5.713c.029.012.06.02.092.028.014.004.028.01.043.013a.748.748 0 0 0 .287 0c.013-.003.025-.008.038-.012.033-.008.066-.016.097-.03l13.43-5.712c.173-.074.28-.21.28-.359V14.87l6.434-2.737c.173-.074.28-.21.28-.359V6.11a.326.326 0 0 0-.02-.108ZM13.987 19.82l-5.585-2.335 5.865-2.495 6.435-2.738 5.59 2.377-4.101 1.73-8.204 3.46Zm12.87-10.614v4.71l-2.35-1-3.245-1.38v-4.71l2.35.999 3.245 1.38Zm.56-5.475 5.593 2.38-5.593 2.379-5.593-2.38 5.593-2.38ZM10.183 15.773l-2.35 1V6.397l3.246-1.381 2.35-1v10.375l-3.246 1.38ZM7.273.923l5.593 2.38-5.593 2.379-5.593-2.38L7.273.922ZM1.118 4.017l2.35 1 3.246 1.38V17.49c0 .016.006.03.008.046.004.02.004.041.012.06v.002c.006.016.018.03.026.046.01.018.017.036.03.052v.001c.012.015.028.027.042.04.015.015.028.03.046.044l.002.001c.016.012.035.02.053.03.02.012.038.025.06.035h.003l.002.002 6.43 2.689v4.756l-12.31-5.236V4.017Zm25.74 16.04-12.31 5.236v-4.757l9.116-3.846 3.193-1.347v4.713Zm6.714-8.521-5.596 2.38v-4.71l3.246-1.381 2.35-1v4.71Z"\n              />\n            </svg>\n          </div>\n        </div>\n      </section>\n    </div>\n  );\n}\n\n
-
+      \nimport React from \"react\";\nimport * as Avatar from \"@radix-ui/react-avatar\";\nimport * as ContextMenu from \"@radix-ui/react-context-menu\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport * as Select from \"@radix-ui/react-select\";\nimport * as Tabs from \"@radix-ui/react-tabs\";\nimport * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport { ChevronRight } from \"lucide-react\";\nexport default function FUIHeroSectionWithLogoClouds() {\n  const [state, setState] = React.useState(false);\n\n  // Replace javascript:void(0) path with your path\n  const navigation = [\n    { title: \"Partners\", path: \"javascript:void(0)\" },\n    { title: \"Customers\", path: \"javascript:void(0)\" },\n    { title: \"Team\", path: \"javascript:void(0)\" },\n  ];\n\n  return (\n    <div className=\"relative w-full flex flex-col\">\n      <img\n        className=\"absolute top-0 z-0 -translate-y-1/2\"\n        src={\"https://farmui.vercel.app/bg-back.png\"}\n        width={1000}\n        height={1000}\n        alt=\"back bg\"\n      />\n\n      <div className=\"absolute -z-1 inset-0  h-[600px] w-full bg-transparent opacity-10 bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div>\n      <nav className=\"relative items-center pt-5 px-4 mx-auto w-full sm:px-8 lg:flex md:space-x-6\">\n        <div className=\"flex justify-between\">\n          <a href=\"javascript:void(0)\">\n            <img\n              src=\"https://www.farmui.com/logo.svg\"\n              width={120}\n              height={50}\n              alt=\"FarmUI logo\"\n            />\n          </a>\n          <button\n            className=\"text-gray-500 outline-none md:hidden\"\n            onClick={() => setState(!state)}\n          >\n            {state ? (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"h-6 w-6\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M6 18L18 6M6 6l12 12\"\n                />\n              </svg>\n            ) : (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"h-6 w-6\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M4 6h16M4 12h16M4 18h16\"\n                />\n              </svg>\n            )}\n          </button>\n        </div>\n        <ul\n          className={\`flex-1 justify-between mt-12 md:text-sm md:font-medium md:flex md:mt-0 \${\n            state\n              ? \"absolute inset-x-0 px-4 border-b bg-white md:border-none md:static\"\n              : \"hidden\"\n          }\`}\n        >\n          <div className=\"items-center space-y-5 md:flex md:space-x-6 md:space-y-0 md:ml-12\">\n            {navigation.map((item, idx) => (\n              <li className=\"text-gray-500 hover:text-indigo-600\" key={idx}>\n                <a href={item.path}>{item.title}</a>\n              </li>\n            ))}\n          </div>\n          <li className=\"order-2 py-5 md:py-0\">\n            <button className=\"inline-flex h-12 items-center justify-center font-geist rounded-md border border-gray-800 bg-gradient-to-t from-[#8678f9] from-0% to-[#c7d2fe] px-6 font-medium text-gray-950 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50 \">\n              Get Started\n            </button>\n          </li>\n        </ul>\n      </nav>\n      <section className=\"py-28 z-10\">\n        <div className=\"max-w-screen-xl mx-auto text-gray-600 gap-x-12 items-center justify-between overflow-hidden md:flex md:px-8\">\n          <div className=\"flex-none space-y-5 px-4 sm:max-w-lg md:px-0 lg:max-w-xl\">\n            <h1 className=\"text-sm  text-gray-400 group font-geist mr-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit\">\n              Over 200+ deals finished\n              <ChevronRight className=\"inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n            </h1>\n            <h2 className=\"text-4xl md:text-5xl font-geist font-normal tracking-tighter lg:text-5xl text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]\">\n              We help startups to grow and make money\n            </h2>\n            <p className=\"font-geist\">\n              Sed ut perspiciatis unde omnis iste natus voluptatem accusantium\n              doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n            </p>\n            <div className=\"items-center gap-x-3 space-y-3 sm:flex sm:space-y-0\">\n              <button className=\"inline-flex h-12 items-center justify-center font-geist rounded-md border border-gray-800 bg-gradient-to-t from-[#8678f9] from-0% to-[#c7d2fe] px-6 font-medium text-gray-950 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50 \">\n                Get Started \n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                  className=\"w-5 h-5 ml-2\"\n                >\n                  <path\n                    fillRule=\"evenodd\"\n                    d=\"M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z\"\n                    clipRule=\"evenodd\"\n                  />\n                </svg>\n              </button>\n             \n            </div>\n          </div>\n          <div className=\"flex-none mt-14 md:mt-0 md:max-w-xl\">\n            <img\n              src=\"https://images.unsplash.com/photo-1573164713619-24c711fe7878?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1738&q=80\"\n              className=\" md:rounded-tl-[108px]\"\n              alt=\"\"\n            />\n          </div>\n        </div>\n        <div className=\"mt-14 px-4 md:px-8\">\n          <p className=\"text-center font-displayAlt text-sm text-gray-700 font-semibold\">\n            Trusted by the best companies\n          </p>\n          <div className=\"flex justify-center items-center flex-wrap gap-x-12 gap-y-6 mt-6\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"190\"\n              height=\"33\"\n              fill=\"none\"\n            >\n              <g fill=\"#4B5563\" clip-path=\"url(#a)\">\n                <path d=\"M16.416 32.17v-6.175c6.554 0 11.596-6.49 9.106-13.36-.945-2.552-2.961-4.6-5.514-5.514-6.869-2.49-13.36 2.552-13.36 9.106H.473c0-10.43 10.083-18.559 21.016-15.156 4.79 1.481 8.57 5.294 10.052 10.052 3.403 10.965-4.695 21.048-15.125 21.048Z\" />\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M16.416 25.995h-6.144v-6.144h6.144v6.144ZM10.272 30.721H5.546v-4.726h4.726v4.726ZM5.546 25.995h-3.97v-3.939h3.97v3.939Z\"\n                  clip-rule=\"evenodd\"\n                />\n                <path d=\"M57.19 9.516c-1.828-1.26-4.097-1.922-6.744-1.922H44.68V25.9h5.766c2.647 0 4.916-.661 6.743-2.016 1.008-.693 1.796-1.702 2.332-2.93.535-1.23.819-2.679.819-4.317 0-1.607-.284-3.057-.82-4.286-.535-1.197-1.323-2.174-2.33-2.835Zm-9.139 1.197h1.828c2.017 0 3.687.41 4.947 1.166 1.386.85 2.111 2.458 2.111 4.758 0 2.394-.725 4.064-2.111 4.978-1.197.788-2.867 1.198-4.916 1.198h-1.827l-.032-12.1ZM64.373 7.373c-.567 0-1.04.19-1.418.567-.378.378-.599.851-.599 1.387 0 .567.19 1.04.6 1.418.377.378.85.598 1.417.598.567 0 1.04-.189 1.418-.598.378-.378.599-.883.599-1.418 0-.567-.19-1.04-.6-1.387a1.975 1.975 0 0 0-1.417-.567ZM65.949 13.013h-3.246v12.919h3.246V13.013ZM77.764 14.085c-.976-.883-2.08-1.387-3.245-1.387-1.796 0-3.277.63-4.443 1.828-1.166 1.197-1.733 2.773-1.733 4.631 0 1.828.567 3.372 1.733 4.632 1.166 1.198 2.647 1.828 4.443 1.828 1.26 0 2.332-.347 3.214-1.04v.315c0 1.072-.284 1.89-.85 2.49-.568.566-1.356.85-2.332.85-1.513 0-2.427-.599-3.593-2.142l-2.205 2.11.063.095c.472.662 1.197 1.323 2.174 1.954.977.63 2.174.945 3.624.945 1.922 0 3.497-.599 4.631-1.764 1.166-1.166 1.733-2.742 1.733-4.695V13.013h-3.182l-.032 1.072Zm-.85 7.625c-.567.63-1.292.945-2.237.945-.946 0-1.67-.315-2.206-.945-.567-.63-.85-1.481-.85-2.521 0-1.04.283-1.922.85-2.552.567-.63 1.292-.977 2.206-.977.945 0 1.67.315 2.237.977.567.63.85 1.512.85 2.552s-.315 1.89-.85 2.52ZM86.965 13.013H83.72v12.919h3.245V13.013ZM85.39 7.373c-.567 0-1.04.19-1.418.567-.378.378-.599.851-.599 1.387 0 .567.19 1.04.599 1.418.378.378.85.598 1.418.598.567 0 1.04-.189 1.418-.598.378-.378.598-.883.598-1.418 0-.567-.189-1.04-.599-1.387a1.975 1.975 0 0 0-1.417-.567ZM94.086 9.547h-3.182v3.498h-1.86v2.962h1.86v5.356c0 1.67.346 2.867 1.008 3.56.662.694 1.828 1.04 3.497 1.04.536 0 1.072-.031 1.576-.063h.157V22.94l-1.102.063c-.788 0-1.292-.126-1.544-.41s-.378-.85-.378-1.701v-4.916h3.025v-2.962h-3.025V9.547h-.032ZM115.576 7.594h-3.246V25.9h3.246V7.594ZM148.376 21.3c-.567.662-1.166 1.229-1.638 1.512-.441.284-1.008.442-1.67.442-.945 0-1.733-.347-2.363-1.072-.631-.724-.946-1.638-.946-2.74 0-1.104.315-2.018.914-2.71.63-.725 1.387-1.072 2.332-1.072 1.04 0 2.142.662 3.088 1.764l2.142-2.048c-1.386-1.827-3.182-2.678-5.325-2.678-1.796 0-3.34.662-4.6 1.922-1.26 1.26-1.891 2.899-1.891 4.821 0 1.922.631 3.53 1.891 4.821 1.26 1.292 2.804 1.922 4.6 1.922 2.363 0 4.254-1.008 5.514-2.867l-2.048-2.017ZM161.705 14.81a5.263 5.263 0 0 0-1.859-1.545c-.788-.378-1.67-.567-2.679-.567-1.827 0-3.308.662-4.411 1.985-1.071 1.324-1.638 2.93-1.638 4.853 0 1.953.598 3.56 1.796 4.82 1.166 1.23 2.773 1.86 4.695 1.86 2.174 0 4.001-.883 5.325-2.647l.063-.095-2.111-2.048c-.19.252-.473.504-.725.756-.315.316-.63.536-.945.694-.473.252-1.04.346-1.639.346-.914 0-1.638-.252-2.206-.788-.535-.472-.85-1.134-.913-1.953h8.602l.031-1.198a8.48 8.48 0 0 0-.346-2.394 7.177 7.177 0 0 0-1.04-2.08Zm-7.09 3.056c.158-.63.441-1.135.851-1.544.441-.441 1.008-.662 1.701-.662.788 0 1.387.22 1.796.662.379.41.599.913.662 1.512h-5.01v.032ZM174.183 13.99c-.977-.85-2.332-1.26-4.034-1.26a6.85 6.85 0 0 0-2.993.693c-.851.44-1.67 1.134-2.206 2.08l.032.03 2.079 1.986c.851-1.355 1.796-1.827 3.057-1.827.693 0 1.229.188 1.67.535.441.347.63.82.63 1.386v.63a8.067 8.067 0 0 0-2.395-.377c-1.607 0-2.93.378-3.907 1.134-.977.756-1.481 1.859-1.481 3.214 0 1.197.41 2.206 1.261 2.93.85.693 1.89 1.072 3.119 1.072 1.229 0 2.395-.505 3.435-1.355v1.07h3.182v-8.318c.063-1.543-.441-2.772-1.449-3.623Zm-5.767 6.995c.378-.252.883-.378 1.544-.378.788 0 1.607.157 2.458.473v1.26c-.693.662-1.638.977-2.804.977-.567 0-1.009-.126-1.292-.378-.284-.253-.441-.536-.441-.946 0-.41.189-.756.535-1.008ZM188.173 14.242c-.914-1.008-2.175-1.512-3.782-1.512-1.291 0-2.331.378-3.119 1.102v-.787h-3.182v12.918h3.245v-7.152c0-.977.221-1.765.693-2.3.473-.567 1.072-.82 1.922-.82.725 0 1.292.252 1.702.725.409.504.63 1.166.63 2.017V25.9h3.245v-7.467c0-1.765-.441-3.183-1.354-4.19ZM108.265 13.99c-.976-.85-2.331-1.26-4.033-1.26a6.85 6.85 0 0 0-2.993.693c-.851.44-1.67 1.134-2.206 2.08l.032.03 2.079 1.986c.851-1.355 1.796-1.827 3.057-1.827.693 0 1.228.188 1.67.535.441.347.63.82.63 1.386v.63a8.067 8.067 0 0 0-2.395-.377c-1.607 0-2.93.378-3.907 1.134-.977.756-1.481 1.859-1.481 3.214 0 1.197.41 2.206 1.26 2.93.851.693 1.891 1.072 3.12 1.072s2.394-.505 3.434-1.355v1.07h3.183v-8.318c.031-1.543-.473-2.772-1.45-3.623Zm-5.766 6.995c.378-.252.882-.378 1.544-.378.788 0 1.607.157 2.458.473v1.26c-.693.662-1.639.977-2.805.977-.567 0-1.008-.126-1.291-.378-.284-.253-.442-.536-.442-.946 0-.41.158-.756.536-1.008ZM127.36 26.184c-5.199 0-9.453-4.222-9.453-9.453a9.44 9.44 0 0 1 9.453-9.452c5.199 0 9.453 4.222 9.453 9.452 0 5.23-4.254 9.453-9.453 9.453Zm0-15.534a6.118 6.118 0 0 0-6.113 6.113 6.118 6.118 0 0 0 6.113 6.113 6.12 6.12 0 0 0 6.113-6.113 6.12 6.12 0 0 0-6.113-6.113Z\" />\n              </g>\n              <defs>\n                <clipPath id=\"a\">\n                  <path fill=\"#fff\" d=\"M0 0h190v32.454H0z\" />\n                </clipPath>\n              </defs>\n            </svg>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"120\"\n              height=\"28\"\n              fill=\"none\"\n            >\n              <g clip-path=\"url(#a)\">\n                <path\n                  fill=\"#4B5563\"\n                  d=\"M60.128 7.467c-4.664 0-8.027 3.042-8.027 7.605 0 4.563 3.781 7.605 8.45 7.605 2.818 0 5.302-1.116 6.84-2.996l-3.232-1.867c-.854.934-2.15 1.479-3.608 1.479-2.024 0-3.743-1.056-4.381-2.746h11.838c.093-.474.148-.964.148-1.48 0-4.558-3.359-7.6-8.028-7.6Zm-3.992 6.126c.528-1.685 1.973-2.746 3.992-2.746 2.024 0 3.469 1.06 3.993 2.746h-7.985ZM55.18 2.82 43.474 23.1 31.763 2.82h4.39l7.317 12.675L50.787 2.82h4.394ZM15.611.708l15.61 27.039H0L15.61.707ZM85.14 15.072c0 2.535 1.656 4.225 4.225 4.225 1.74 0 3.046-.79 3.717-2.079l3.245 1.872c-1.343 2.24-3.861 3.587-6.962 3.587-4.669 0-8.028-3.042-8.028-7.605 0-4.563 3.363-7.605 8.028-7.605 3.1 0 5.615 1.348 6.962 3.587l-3.245 1.872c-.671-1.289-1.977-2.079-3.717-2.079-2.565 0-4.225 1.69-4.225 4.225ZM119.986 2.82v19.434h-3.802V2.82h3.802Zm-14.364 4.647c-4.664 0-8.027 3.042-8.027 7.605 0 4.563 3.785 7.605 8.449 7.605 2.818 0 5.303-1.116 6.84-2.996l-3.232-1.867c-.853.934-2.15 1.479-3.608 1.479-2.023 0-3.743-1.056-4.381-2.746h11.838c.093-.474.148-.964.148-1.48 0-4.558-3.359-7.6-8.027-7.6Zm-3.993 6.126c.529-1.685 1.969-2.746 3.993-2.746 2.023 0 3.468 1.06 3.992 2.746h-7.985ZM80.069 7.89v4.094a4.816 4.816 0 0 0-1.351-.207c-2.455 0-4.225 1.69-4.225 4.225v6.252h-3.802V7.89h3.802v3.887c0-2.147 2.497-3.887 5.577-3.887Z\"\n                />\n              </g>\n              <defs>\n                <clipPath id=\"a\">\n                  <path fill=\"#fff\" d=\"M0 .708h120v27.039H0z\" />\n                </clipPath>\n              </defs>\n            </svg>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"180\"\n              height=\"27\"\n              fill=\"none\"\n            >\n              <g fill=\"#4B5563\" clip-path=\"url(#a)\">\n                <path d=\"m39.535 25.951.296-1.025c.351-1.219.221-2.344-.37-3.173-.553-.762-1.454-1.21-2.557-1.263l-20.874-.265a.406.406 0 0 1-.373-.553.554.554 0 0 1 .483-.37l21.077-.276c2.487-.114 5.207-2.142 6.155-4.619l1.199-3.14a.74.74 0 0 0 .033-.425 13.727 13.727 0 0 0-26.39-1.42 6.177 6.177 0 0 0-9.674 6.472A8.77 8.77 0 0 0 .094 25.96a.406.406 0 0 0 .4.35h38.552a.506.506 0 0 0 .49-.358ZM46.492 11.505c-.184 0-.378.006-.58.017-.031 0-.061.007-.089.02a.323.323 0 0 0-.21.22l-.83 2.836c-.353 1.219-.223 2.344.371 3.173a3.22 3.22 0 0 0 2.554 1.263l4.452.276a.397.397 0 0 1 .385.355.414.414 0 0 1-.023.195.553.553 0 0 1-.483.37l-4.624.277c-2.512.116-5.218 2.142-6.166 4.615l-.334.874a.248.248 0 0 0 .218.337H57.06a.428.428 0 0 0 .426-.323 11.425 11.425 0 0 0-10.989-14.505h-.005ZM75.459 16.621h2.633v7.202H82.7v2.308h-7.242v-9.51ZM85.43 21.413v-.024c0-2.731 2.211-4.948 5.135-4.948s5.108 2.19 5.108 4.92v.027c0 2.731-2.211 4.945-5.135 4.945s-5.108-2.197-5.108-4.92Zm7.553 0v-.024c0-1.382-.992-2.568-2.445-2.568-1.454 0-2.405 1.166-2.405 2.54v.027c0 1.382.992 2.568 2.432 2.568s2.419-1.169 2.419-2.543M98.898 21.966v-5.345h2.678v5.284c0 1.382.691 2.026 1.752 2.026 1.062 0 1.752-.624 1.752-1.957v-5.353h2.676v5.27c0 3.071-1.752 4.423-4.455 4.423-2.703 0-4.403-1.382-4.403-4.348M111.791 16.621h3.667c3.397 0 5.367 1.957 5.367 4.699v.027c0 2.744-1.998 4.781-5.419 4.781h-3.615v-9.507Zm3.709 7.186c1.575 0 2.623-.87 2.623-2.407v-.025c0-1.523-1.048-2.407-2.623-2.407h-1.081v4.828l1.081.01ZM124.656 16.621h7.606v2.31h-4.969v1.617h4.496v2.187h-4.496v3.396h-2.637v-9.51ZM135.932 16.621h2.634v7.202h4.607v2.308h-7.241v-9.51ZM150.071 16.555h2.54l4.038 9.576h-2.824l-.694-1.697h-3.67l-.677 1.697h-2.764l4.051-9.576Zm2.308 5.826-1.058-2.703-1.084 2.703h2.142ZM160.043 16.621h4.497c1.456 0 2.459.382 3.098 1.034a2.937 2.937 0 0 1 .843 2.21v.028a3.013 3.013 0 0 1-1.957 2.922l2.269 3.316h-3.04l-1.918-2.88h-1.155v2.88h-2.637v-9.51Zm4.375 4.566c.898 0 1.415-.437 1.415-1.128v-.027c0-.75-.553-1.128-1.429-1.128h-1.724v2.283h1.738ZM172.284 16.621h7.65v2.242h-5.041v1.44h4.565v2.078h-4.565v1.509H180v2.241h-7.716v-9.51ZM69.688 22.519a2.333 2.333 0 0 1-2.178 1.426c-1.443 0-2.432-1.197-2.432-2.567v-.028c0-1.382.965-2.543 2.404-2.543a2.388 2.388 0 0 1 2.261 1.578h2.764c-.431-2.263-2.418-3.946-4.997-3.946-2.935 0-5.135 2.21-5.135 4.947v.027c0 2.731 2.172 4.92 5.107 4.92 2.51 0 4.472-1.625 4.989-3.803l-2.783-.011Z\" />\n              </g>\n              <defs>\n                <clipPath id=\"a\">\n                  <path fill=\"#fff\" d=\"M0 .133h180v26.189H0z\" />\n                </clipPath>\n              </defs>\n            </svg>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"123\"\n              height=\"27\"\n              fill=\"none\"\n            >\n              <path\n                fill=\"#4B5563\"\n                d=\"M46.72 6.111h-3.102v13.951h8.927v-2.053H46.72V6.111ZM63.495 12.03c-.396-.465-.957-.83-1.686-1.096a6.372 6.372 0 0 0-2.198-.398c-.953 0-1.825.13-2.616.388-.791.26-1.47.615-2.036 1.067a5 5 0 0 0-1.322 1.564 3.91 3.91 0 0 0-.472 1.863c0 .665.157 1.29.472 1.874a5.033 5.033 0 0 0 1.322 1.554c.566.452 1.244.808 2.036 1.067.79.259 1.663.388 2.616.388.737 0 1.47-.133 2.198-.398.729-.266 1.29-.631 1.686-1.096v1.255h2.94v-9.287h-2.94v1.255Zm-.27 4.524c-.18.36-.431.671-.755.937a3.79 3.79 0 0 1-1.173.638c-.459.16-.967.239-1.524.239-.558 0-1.061-.08-1.51-.24a3.818 3.818 0 0 1-1.16-.637 2.708 2.708 0 0 1-.742-.937 2.604 2.604 0 0 1-.256-1.136c0-.398.085-.777.256-1.136.17-.358.418-.67.742-.936a3.82 3.82 0 0 1 1.16-.638c.449-.16.952-.24 1.51-.24.557 0 1.065.08 1.524.24.458.16.85.372 1.173.638.324.266.575.578.755.936.18.36.27.738.27 1.136 0 .399-.09.778-.27 1.136ZM87.39 12.03c-.395-.465-.957-.83-1.685-1.096a6.372 6.372 0 0 0-2.198-.398c-.953 0-1.825.13-2.616.388-.791.26-1.47.615-2.036 1.067a5 5 0 0 0-1.322 1.564 3.91 3.91 0 0 0-.472 1.863c0 .665.157 1.29.472 1.874a5.033 5.033 0 0 0 1.322 1.554c.566.452 1.245.808 2.036 1.067.79.259 1.663.388 2.616.388.737 0 1.47-.133 2.198-.398.728-.266 1.29-.631 1.686-1.096v1.255h2.94v-9.287h-2.94v1.255Zm-.269 4.524c-.18.36-.431.671-.755.937a3.79 3.79 0 0 1-1.173.638c-.459.16-.967.239-1.524.239-.558 0-1.061-.08-1.51-.24a3.818 3.818 0 0 1-1.16-.637 2.708 2.708 0 0 1-.742-.937A2.604 2.604 0 0 1 80 15.418c0-.398.085-.777.256-1.136.17-.358.418-.67.742-.936a3.82 3.82 0 0 1 1.16-.638c.449-.16.952-.24 1.51-.24.557 0 1.065.08 1.524.24.458.16.85.372 1.173.638.324.266.575.578.755.936.18.36.27.738.27 1.136 0 .399-.09.778-.27 1.136ZM122.58 6.111h-2.939v13.951h2.939V6.112ZM68.754 20.062h2.94v-7.15h5.043v-2.137h-7.983v9.287ZM102.116 10.775l-3.695 7.112-3.694-7.112h-2.978l4.825 9.287h3.695l4.825-9.287h-2.978ZM111.506 10.536c-3.6 0-6.449 2.186-6.449 4.883 0 2.98 2.758 4.882 6.826 4.882 2.277 0 3.731-.643 5.507-2.044l-1.986-1.136c-.002.001-1.499 1.455-3.736 1.455-2.6 0-3.694-1.55-3.694-2.35h9.753c.512-3.068-2.218-5.69-6.221-5.69Zm-3.524 4.075c.022-.178.361-2.35 3.501-2.35 3.14 0 3.522 2.171 3.544 2.35h-7.045ZM34.671 6.002c-.004-.012-.014-.023-.02-.035-.01-.021-.02-.044-.035-.064-.01-.013-.026-.024-.039-.036-.016-.017-.03-.034-.05-.049-.016-.011-.036-.02-.054-.03-.02-.012-.039-.026-.062-.036l-6.715-2.857a.734.734 0 0 0-.559 0l-6.714 2.857c-.023.01-.042.023-.062.035-.018.01-.039.02-.055.031-.02.015-.034.032-.05.048-.012.013-.027.024-.038.037-.016.02-.025.042-.036.064-.006.012-.015.023-.02.035a.315.315 0 0 0-.02.108v5.425l-5.595 2.38V3.303a.317.317 0 0 0-.019-.108c-.004-.012-.014-.023-.02-.035-.01-.022-.02-.044-.035-.064-.011-.013-.026-.024-.039-.037-.016-.016-.03-.033-.05-.048-.016-.012-.036-.02-.054-.03-.02-.012-.04-.026-.062-.036L7.552.087a.734.734 0 0 0-.558 0L.28 2.944c-.023.01-.042.024-.062.035C.2 2.99.179 3 .163 3.01c-.02.015-.033.032-.05.048-.012.013-.027.024-.038.037-.016.02-.025.043-.036.064-.006.012-.015.023-.02.035A.315.315 0 0 0 0 3.302v16.993c0 .148.107.285.28.359l13.43 5.713c.029.012.06.02.092.028.014.004.028.01.043.013a.748.748 0 0 0 .287 0c.013-.003.025-.008.038-.012.033-.008.066-.016.097-.03l13.43-5.712c.173-.074.28-.21.28-.359V14.87l6.434-2.737c.173-.074.28-.21.28-.359V6.11a.326.326 0 0 0-.02-.108ZM13.987 19.82l-5.585-2.335 5.865-2.495 6.435-2.738 5.59 2.377-4.101 1.73-8.204 3.46Zm12.87-10.614v4.71l-2.35-1-3.245-1.38v-4.71l2.35.999 3.245 1.38Zm.56-5.475 5.593 2.38-5.593 2.379-5.593-2.38 5.593-2.38ZM10.183 15.773l-2.35 1V6.397l3.246-1.381 2.35-1v10.375l-3.246 1.38ZM7.273.923l5.593 2.38-5.593 2.379-5.593-2.38L7.273.922ZM1.118 4.017l2.35 1 3.246 1.38V17.49c0 .016.006.03.008.046.004.02.004.041.012.06v.002c.006.016.018.03.026.046.01.018.017.036.03.052v.001c.012.015.028.027.042.04.015.015.028.03.046.044l.002.001c.016.012.035.02.053.03.02.012.038.025.06.035h.003l.002.002 6.43 2.689v4.756l-12.31-5.236V4.017Zm25.74 16.04-12.31 5.236v-4.757l9.116-3.846 3.193-1.347v4.713Zm6.714-8.521-5.596 2.38v-4.71l3.246-1.381 2.35-1v4.71Z\"\n              />\n            </svg>\n          </div>\n        </div>\n      </section>\n    </div>\n  );\n}\n\n
 
-
-            
             `,
     },
   },
-  "104": {
+  "farmui-hero-03": {
     component: <FUIHeroWithGridSimple />,
     description: "Hero Section With Simpl and Aligned",
     path: "previewsComponents/FUIHeroWithGridSimpe",
     codeCopy: {
       react: `
-\nimport Image from "next/image";\n\nimport LinkItem from "components/ui/LinkItem";\nimport { IconGithub } from "components/icons";\nimport bghero from "../../../public/img.png";\nimport { ChevronRight } from "lucide-react";\nimport HeroAnimated from "components/HeroAnimated";\nimport BgGradient from "components/ui/BgGradient";\nconst FUIHeroWithGridSimple = () => {\n  return (\n    <>\n      <section className="min-h-[800px] w-full  mt-0 relative">\n        <div className="absolute -top-0 inset-x-0 opacity-45">\n          <BgGradient />\n        </div>\n\n        <svg\n          className="absolute inset-0 z-1 h-full w-full  stroke-white/5 [mask-image:radial-gradient(100%_100%_at_top_left  ,white,transparent)]"\n          aria-hidden="true"\n        >\n          <defs>\n            <pattern\n              id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc"\n              width={200}\n              height={200}\n              x="50%"\n              y={-1}\n              patternUnits="userSpaceOnUse"\n            >\n              <path d="M.5 200V.5H200" fill="none" />\n            </pattern>\n          </defs>\n          <svg x="50%" y={-1} className="overflow-visible fill-gray-800/20">\n            <path\n              d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"\n              strokeWidth={0}\n            />\n          </svg>\n          <rect\n            width="100%"\n            height="100%"\n            strokeWidth={0}\n            fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)"\n          />\n        </svg>\n        <div\n          className="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]"\n          aria-hidden="true"\n        >\n          <div\n            className="aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-[#9c80ff] to-[#e546d5] opacity-20"\n            style={{\n              clipPath:\n                "polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)",\n            }}\n          />\n        </div>\n        {/* <div className="absolute -z-1 inset-0 opacity-15  h-[600px] w-full bg-transparent  bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div> */}\n\n        <div className="relative z-10 max-w-4xl ml-10 translate-y-[33%]  mr-auto  space-y-4">\n          <h1 className="text-sm  text-gray-400 group font-geist mr-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit">\n            <pre className="tracking-tight uppercase">\n              Build products for everyone\n              <ChevronRight className="inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300" />\n            </pre>\n          </h1>\n          <HeroAnimated\n            header="Take shadcn to the next level for modern web dev experience."\n            headerClassName="text-left tracking-tight max-w-5xl text-2xl md:text-5xl tracking-tighter mx-auto lg:text-7xl font-bold font-geist  font-normal  text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] leading-0 md:leading-0 md:pb-0 mt-1"\n            description=""\n            descriptionClassName="  "\n          >\n            <div className="mr-auto ml-2 text-zinc-400 text-left text-lg lg:max-w-2xl py-5">\n              <pre className="tracking-tight uppercase max-w-2xl text-wrap">\n                Move faster with beautiful responsive UI components and website\n                templates with modern design, 100% free and open-source.\n              </pre>\n            </div>\n          </HeroAnimated>\n            <div className="mr-auto ml-2  flex flex-wrap items-start justify-start gap-x-3">\n              <LinkItem\n                href="/components"\n                className="inline-flex rounded-none uppercase font-mono  text-center group items-center w-full justify-center  bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent bg-zinc-900  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-4 px-10"\n              >\n                Browser Components\n                <ChevronRight className="w-4 h-4 ml-2 group-hover:translate-x-1 duration-300" />\n              </LinkItem>\n              <LinkItem\n                href="https://github.com/Kinfe123/farm-ui"\n                variant="shiny"\n                className="inline-flex font-mono uppercase tracking-tight rounded-none w-full justify-center items-center gap-x-3 border border-zinc-800 hover:border-zinc-600 bg-zinc-950 hover:text-zinc-100 duration-200 sm:w-auto py-4 px-10"\n                target="_blank"\n              >\n                <IconGithub className="w-5 h-5 " />\n                Star on GitHub\n              </LinkItem>\n            </div>\n        </div>\n      </section>\n    </>\n  );\n};\nexport default FUIHeroWithGridSimple;\n\n\n
-
+      \nimport LinkItem from \"components/ui/LinkItem\";\nimport { IconGithub } from \"components/icons\";\nimport { ChevronRight } from \"lucide-react\";\nimport HeroAnimated from \"components/HeroAnimated\";\nimport BgGradient from \"components/ui/BgGradient\";\nconst FUIHeroWithGridSimple = () => {\n  return (\n    <>\n      <section className=\"min-h-[800px] w-full  mt-0 relative\">\n        <div className=\"absolute -top-0 inset-x-0 opacity-45\">\n          <BgGradient />\n        </div>\n\n        <svg\n          className=\"absolute inset-0 z-1 h-full w-full  stroke-white/5 [mask-image:radial-gradient(100%_100%_at_top_left  ,white,transparent)]\"\n          aria-hidden=\"true\"\n        >\n          <defs>\n            <pattern\n              id=\"983e3e4c-de6d-4c3f-8d64-b9761d1534cc\"\n              width={200}\n              height={200}\n              x=\"50%\"\n              y={-1}\n              patternUnits=\"userSpaceOnUse\"\n            >\n              <path d=\"M.5 200V.5H200\" fill=\"none\" />\n            </pattern>\n          </defs>\n          <svg x=\"50%\" y={-1} className=\"overflow-visible fill-gray-800/20\">\n            <path\n              d=\"M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z\"\n              strokeWidth={0}\n            />\n          </svg>\n          <rect\n            width=\"100%\"\n            height=\"100%\"\n            strokeWidth={0}\n            fill=\"url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)\"\n          />\n        </svg>\n        <div\n          className=\"absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]\"\n          aria-hidden=\"true\"\n        >\n          <div\n            className=\"aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-[#9c80ff] to-[#e546d5] opacity-20\"\n            style={{\n              clipPath:\n                \"polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)\",\n            }}\n          />\n        </div>\n        {/* <div className=\"absolute -z-1 inset-0 opacity-15  h-[600px] w-full bg-transparent  bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div> */}\n\n        <div className=\"relative z-10 max-w-4xl ml-5 md:ml-10  translate-y-[33%]  mr-auto  space-y-4\">\n          <h1 className=\"text-sm  text-gray-400 group font-geist mr-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit\">\n            <pre className=\"tracking-tight uppercase\">\n              Build products for everyone\n              <ChevronRight className=\"inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n            </pre>\n          </h1>\n          <HeroAnimated\n            header=\"Take shadcn to the next level for modern web dev experience.\"\n            headerClassName=\"ml-2 text-left tracking-tight max-w-md md:max-w-3xl text-3xl md:text-4xl tracking-tighter mr-auto lg:text-6xl font-bold font-geist  font-normal  text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] leading-0 md:leading-0 md:pb-0 mt-1\"\n            description=\"\"\n            descriptionClassName=\"  \"\n          >\n            <div className=\"mr-auto text-[0.84rem] ml-2 text-zinc-400 text-left md:text-lg lg:max-w-2xl md:py-5\">\n              <pre className=\"tracking-tight uppercase max-w-md md:max-w-3xl text-wrap\">\n                Move faster with beautiful responsive UI components and website\n                templates with modern design, 100% free and open-source.\n              </pre>\n            </div>\n          </HeroAnimated>\n            <div className=\"mr-auto ml-2  flex flex-wrap gap-y-4 items-start justify-start gap-x-3\">\n              <LinkItem\n                href=\"/components\"\n                className=\"inline-flex rounded-none uppercase font-mono  text-center group items-center w-full justify-center  bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent bg-zinc-900  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-4 px-10\"\n              >\n                Browser Components\n                <ChevronRight className=\"w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n              </LinkItem>\n              <LinkItem\n                href=\"https://github.com/Kinfe123/farm-ui\"\n                variant=\"shiny\"\n                className=\"inline-flex font-mono uppercase tracking-tight rounded-none w-full justify-center items-center gap-x-3 border border-zinc-800 hover:border-zinc-600 bg-zinc-950 hover:text-zinc-100 duration-200 sm:w-auto py-4 px-10\"\n                target=\"_blank\"\n              >\n                <IconGithub className=\"w-5 h-5 \" />\n                Star on GitHub\n              </LinkItem>\n            </div>\n        </div>\n      </section>\n    </>\n  );\n};\nexport default FUIHeroWithGridSimple;\n\n
             
             `,
     },

From 75e4786aa5c01f958de31df5ec1d8592e577e3b3 Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Fri, 31 May 2024 13:39:09 +0300
Subject: [PATCH 03/12] feat: cmd for multiple pkg manager

---
 apps/www/@/components/ui/dropdown-menu.tsx  | 200 ++++++++++++++++++++
 apps/www/components/farmui/CopyButton.tsx   |  92 +++++++++
 apps/www/components/farmui/FUISomething.tsx | 158 ----------------
 apps/www/components/ui/Preview/index.tsx    |  10 +-
 apps/www/tailwind.config.js                 |  10 +
 5 files changed, 310 insertions(+), 160 deletions(-)
 create mode 100644 apps/www/@/components/ui/dropdown-menu.tsx
 create mode 100644 apps/www/components/farmui/CopyButton.tsx
 delete mode 100644 apps/www/components/farmui/FUISomething.tsx

diff --git a/apps/www/@/components/ui/dropdown-menu.tsx b/apps/www/@/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..d110496f
--- /dev/null
+++ b/apps/www/@/components/ui/dropdown-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/apps/www/components/farmui/CopyButton.tsx b/apps/www/components/farmui/CopyButton.tsx
new file mode 100644
index 00000000..99d3947a
--- /dev/null
+++ b/apps/www/components/farmui/CopyButton.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+  } from "@/components/ui/dropdown-menu"
+  import { Button, ButtonProps } from "@/components/ui/button"
+import { CheckIcon, ClipboardIcon ,   } from "lucide-react"
+import React from "react"
+import { cn } from "@/lib/utils"
+import { CommandList } from "cmdk"
+import { Separator } from "@/components/ui/separator"
+
+
+interface CopyButtonProps extends ButtonProps {
+    value: string
+    src?: string
+  }
+
+
+  function copyToClipboardWithMeta(value: string,) {
+    navigator.clipboard.writeText(value)
+  }
+export function CopyNpmCommandButton({commands , className} : {commands: string , className?:string}) {
+    const [hasCopied, setHasCopied] = React.useState(false)
+  
+    React.useEffect(() => {
+      setTimeout(() => {
+        setHasCopied(false)
+      }, 2000)
+    }, [hasCopied])
+  
+    const copyCommand = React.useCallback(
+      (value: string, pm: "npm" | "pnpm" | "yarn" | "bun") => {
+        copyToClipboardWithMeta(pm + " " +  value)
+        setHasCopied(true)
+      },
+      []
+    )
+  
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            size="icon"
+            variant="ghost"
+            className={cn(
+              "relative z-20 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50",
+              className
+            )}
+          >
+            {hasCopied ? (
+              <CheckIcon className="h-3 w-3" />
+            ) : (
+              <ClipboardIcon className="h-3 w-3" />
+            )}
+            <span className="sr-only">Copy</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="z-20">
+          <DropdownMenuItem
+            onClick={() => copyCommand(commands, "npm")}
+          >
+
+            npm
+          </DropdownMenuItem>
+          <Separator className="border-[1px] border-white/10"/>
+          <DropdownMenuItem
+            onClick={() => copyCommand(commands, "yarn")}
+          >
+            yarn
+          </DropdownMenuItem>
+          <Separator className="border-[1px] border-white/10"/>
+
+          <DropdownMenuItem
+            onClick={() => copyCommand(commands, "pnpm")}
+          >
+            pnpm
+          </DropdownMenuItem>
+          <Separator className="border-[1px] border-white/10"/>
+
+          <DropdownMenuItem
+            onClick={() => copyCommand(commands, "bun")}
+          >
+            bun
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+  }
\ No newline at end of file
diff --git a/apps/www/components/farmui/FUISomething.tsx b/apps/www/components/farmui/FUISomething.tsx
deleted file mode 100644
index 0a185ef4..00000000
--- a/apps/www/components/farmui/FUISomething.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
- 
-"use client";
-
-import {
-  CardTitle,
-  CardDescription,
-  CardHeader,
-  CardContent,
-  CardFooter,
-  Card,
-} from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import LinkItem from "components/ui/LinkItem";
-import { ChevronRight, Loader2 } from "lucide-react";
-import { useState, useTransition } from "react";
-import { useToast } from "@/components/ui/use-toast";
-import { saySomething } from "actions/emailSubRelated";
-import {Button} from "@/components/ui/button";
-type FormType = {
-  firstName: string;
-  lastName?: string;
-  email: string;
-  message: string;
-};
-export default function FUIForm() {
-  const [pending, startTransition] = useTransition();
-  const { toast } = useToast()
-
-  const [forms, setForms] = useState({
-    firstName: "",
-    lastName: "",
-    email: "",
-    message: "",
-  });
-  
-  const handleChange = (e: any) => {
-    setForms({ ...forms, [e.target.name]: e.target.value });
-  };
-  const onSubmit = (e:any) => {
-    e.preventDefault();
-    startTransition(async () => {
-      saySomething({
-        firstName: forms.firstName,
-        lastName: forms.lastName,
-        email: forms.email,
-        message: forms.message,
-      })
-        .then((res) => {
-          toast({
-            position: "bottom-left",
-            title: "Message submitted",
-            description:
-              "You have successfully submitted your message. we will keep in touch with you with the speed of light :)",
-          });
-          setForms({
-            firstName:"",
-            lastName:"",
-            email: "",
-            message: ""
-          })
-        })
-        .catch((err) => {
-          toast({
-            position: "bottom-left",
-
-            title: "Something went wrong",
-            description:
-              "There is an error while submitting the form, Please try again later :(",
-            variant: "destructive",
-
-          });
-        });
-    });
-  };
-  return (
-    <section className="custom-screen-lg mx-auto z-20">
-      <div className="relative backdrop-blur-3xl z-10 max-w-4xl mx-auto  space-y-4">
-        <Card className="relative mt-20 py-10 z-20 backdrop-blur-3xl">
-          <CardHeader>
-            <CardDescription>
-              Fill out the form below and we'll get back to you as soon as
-              possible.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className=""></div>
-            <form className="space-y-4 z-20" onSubmit={onSubmit}>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 z-20">
-                <div className="space-y-2">
-                  <Label htmlFor="first-name">First Name</Label>
-                  <Input
-
-                    value={forms.firstName}
-                    onChange={(e) => handleChange(e)}
-                    name="firstName"
-                    placeholder="Enter your first name"
-                    required
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="last-name">Last Name</Label>
-                  <Input
-                    value={forms.lastName}
-                    onChange={handleChange}
-                    name="lastName"
-                    placeholder="Enter your last name"
-                  />
-                </div>
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="email">Email</Label>
-                <Input
-
-                  value={forms.email}
-                  name="email"
-                  onChange={handleChange}
-                  placeholder="Enter your email"
-                  type="email"
-                  required
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="message">Message</Label>
-                <Textarea
-                  required
-                  value={forms.message}
-                  
-                   className="bg-transparent"
-                   onChange={handleChange}
-                  name="message"
-                  maxLength={200}
-                  
-                  placeholder="Enter your message"
-                />
-              </div>
-                <Button
-                  disabled={pending}
-                  variant="default"
-                  className="inline-flex rounded-3xl  text-center group items-center w-full justify-center bg-gradient-to-tr from-black/90 via-zinc-800 to-black  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-6 px-10"
-                >
-                  Submit
-                  {pending ? (
-                    <Loader2 className="animate-spin ml-3 w-4 h-4 flex items-center" />
-                  ) : (
-                    <ChevronRight className="w-4 h-4 ml-2 group-hover:translate-x-1 duration-300" />
-                  )}
-                </Button>
-            </form>
-          </CardContent>
-        </Card>
-      </div>
-    </section>
-  );
-}
-
-
diff --git a/apps/www/components/ui/Preview/index.tsx b/apps/www/components/ui/Preview/index.tsx
index faa0cc93..6bcb18df 100644
--- a/apps/www/components/ui/Preview/index.tsx
+++ b/apps/www/components/ui/Preview/index.tsx
@@ -13,6 +13,8 @@ import componentsNames from "componentsNames";
 import TabsTrigger from "../Tabs/TabsTrigger";
 import { motion } from "framer-motion";
 import { componentToPreview } from "viewport/components/reactComponents";
+import { ClipboardIcon, Terminal } from "lucide-react";
+import { CopyNpmCommandButton } from "components/farmui/CopyButton";
 const tabs = [
   {
     name: "React.js",
@@ -84,8 +86,12 @@ export default ({
         <h3 className="text-sm text-zinc-300 font-medium py-4">
           {item?.title}
         </h3>
-        <div className="flex gap-3 items-center my-3 sm:mt-0">
-        {/* <div><pre className='text-white/50 text-sm'>npx farmui add farmui-{item.id}</pre></div> */}
+        <div className="flex gap-3 items-center my-3 sm:mt-0 z-20">
+        <div className="border-input animate-background-shine bg-[linear-gradient(110deg,#000,45%,#4D4B4B,55%,#000)] bg-[length:250%_100%]   border-[2px] py-2 px-4 rounded-lg flex gap-2 justify-center items-center">
+          <Terminal className="w-4 h-4 text-white/80"  />
+          <pre className='text-white/50 tracking-tight text-sm '>pnpm farmui add {item.id}</pre>
+          <CopyNpmCommandButton commands={`farmui add ${item.id}`}/>
+          </div>
 
           <PreviewSwitch preview={isPreview} setPreview={setPreview} />
         </div>
diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js
index c94425e2..9d122ce1 100644
--- a/apps/www/tailwind.config.js
+++ b/apps/www/tailwind.config.js
@@ -81,6 +81,14 @@ module.exports = {
             "offset-distance": "100%",
           },
         },
+        "background-shine": {
+          "from": {
+            "backgroundPosition": "0 0"
+          },
+          "to": {
+            "backgroundPosition": "-200% 0"
+          }
+        },
         grid: {
           "0%": { transform: "translateY(-50%)" },
           "100%": { transform: "translateY(0)" },
@@ -109,6 +117,8 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
         "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
         "border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
+        "background-shine": "background-shine 2s linear infinite"
+
 
       },
     },

From 4dce1cbda59a1d83aacc34c60f1a9826b4afec34 Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Fri, 31 May 2024 13:48:01 +0300
Subject: [PATCH 04/12] fix: prod preview issue

---
 apps/www/componentsDB/hero-section/hero-section-103.mdx | 2 +-
 apps/www/demo/hero-section-100.mdx                      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/componentsDB/hero-section/hero-section-103.mdx b/apps/www/componentsDB/hero-section/hero-section-103.mdx
index 60813c76..6f722206 100644
--- a/apps/www/componentsDB/hero-section/hero-section-103.mdx
+++ b/apps/www/componentsDB/hero-section/hero-section-103.mdx
@@ -5,7 +5,7 @@ paid: false
 isActive: true
 ltr: {"preview":"function App() {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}","react":{"jsxTail":[{"label":"App.jsx","code":"export default () => {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}"}],"jsxCss":[{"code":"export default () => {\n    return (\n        <div className=\"website-url-input\">\n            <label for=\"website-url\">\n                Website URL\n            </label>\n            <div className=\"input-container\">\n                <div className=\"website-protocol\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"input\"\n                />\n            </div>\n        </div>\n    )\n}\n","label":"App.jsx"},{"label":"style.css","code":".website-url-input {\n  max-width: 28rem;\n  padding: 0px 1rem 0px 1rem;\n  margin: 3rem auto 0px auto;\n}\n.website-url-input label {\n  display: block;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: #6b7280;\n}\n.website-url-input .input-container {\n  display: flex;\n  align-items: center;\n  color: #9ca3af;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n}\n.website-url-input .input-container .website-protocol {\n  padding: 0.625rem 0.75rem 0.625rem 0.75rem;\n  background-color: #f9fafb;\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n  border-right: solid 1px #e5e7eb;\n}\n.website-url-input .input-container .input {\n  width: 100%;\n  padding: 0.625rem;\n  margin-left: 0.5rem;\n  background-color: transparent;\n  outline: none;\n}\n"}]},"vue":{"vueTail":[{"code":"<template>\n  <div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block text-left py-2 text-gray-500\">\n      Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n      <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\"\n        class=\"w-full p-2.5 ml-2 bg-transparent outline-none\" />\n    </div>\n  </div>\n</template>","label":"App.vue"}],"vueCss":[{"label":"App.vue","code":"<template>\n  <div class=\"input-container\">\n    <label for=\"website-url\" class=\"input-label\">\n      Website URL\n    </label>\n    <div class=\"input-parent\">\n      <div class=\"left-input bg-gray-50\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\" class=\"website-url\" />\n    </div>\n  </div>\n</template>"},{"code":"  .input-container {\n    max-width: 28rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\n    margin-left: auto;\n    margin-right: auto;\n    margin-top: 3rem;\n  }\n  .input-label {\n    color: #6b7280;\n    text-align: left;\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n    display: block;\n  }\n  .input-parent {\n    border-radius: 0.375rem;\n    display: flex;\n    align-items: center;\n    color: #9ca3af;\n    border-width: 1px;\n  }\n  .left-input {\n    padding-top: 0.625rem;\n    padding-bottom: 0.625rem;\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n    border-right-width: 1px;\n    border-top-left-radius: 0.375rem;\n    border-bottom-left-radius: 0.375rem;\n    background-color: #f9fafb;\n  }\n  .website-url {\n    padding: 0.625rem;\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n    background-color: transparent;\n    width: 100%;\n    margin-left: 0.5rem;\n  }","label":"style.css"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block py-2 text-gray-500\">\n        Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n        <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n            https://\n        </div>\n        <input \n            type=\"text\"\n            placeholder=\"www.example.com\"\n            id=\"website-url\"\n            class=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n        />\n    </div>\n</div>\n"}]}}
 slug: /hero-section
-id: "104"
+id: "farmui-hero-03"
 created_at: 1
 ---
 
diff --git a/apps/www/demo/hero-section-100.mdx b/apps/www/demo/hero-section-100.mdx
index 914da137..147d5008 100644
--- a/apps/www/demo/hero-section-100.mdx
+++ b/apps/www/demo/hero-section-100.mdx
@@ -5,7 +5,7 @@ paid: false
 isActive: true
 ltr: {"preview":"function App() {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}","react":{"jsxTail":[{"label":"App.jsx","code":"export default () => {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}"}],"jsxCss":[{"code":"export default () => {\n    return (\n        <div className=\"website-url-input\">\n            <label for=\"website-url\">\n                Website URL\n            </label>\n            <div className=\"input-container\">\n                <div className=\"website-protocol\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"input\"\n                />\n            </div>\n        </div>\n    )\n}\n","label":"App.jsx"},{"label":"style.css","code":".website-url-input {\n  max-width: 28rem;\n  padding: 0px 1rem 0px 1rem;\n  margin: 3rem auto 0px auto;\n}\n.website-url-input label {\n  display: block;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: #6b7280;\n}\n.website-url-input .input-container {\n  display: flex;\n  align-items: center;\n  color: #9ca3af;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n}\n.website-url-input .input-container .website-protocol {\n  padding: 0.625rem 0.75rem 0.625rem 0.75rem;\n  background-color: #f9fafb;\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n  border-right: solid 1px #e5e7eb;\n}\n.website-url-input .input-container .input {\n  width: 100%;\n  padding: 0.625rem;\n  margin-left: 0.5rem;\n  background-color: transparent;\n  outline: none;\n}\n"}]},"vue":{"vueTail":[{"code":"<template>\n  <div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block text-left py-2 text-gray-500\">\n      Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n      <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\"\n        class=\"w-full p-2.5 ml-2 bg-transparent outline-none\" />\n    </div>\n  </div>\n</template>","label":"App.vue"}],"vueCss":[{"label":"App.vue","code":"<template>\n  <div class=\"input-container\">\n    <label for=\"website-url\" class=\"input-label\">\n      Website URL\n    </label>\n    <div class=\"input-parent\">\n      <div class=\"left-input bg-gray-50\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\" class=\"website-url\" />\n    </div>\n  </div>\n</template>"},{"code":"  .input-container {\n    max-width: 28rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\n    margin-left: auto;\n    margin-right: auto;\n    margin-top: 3rem;\n  }\n  .input-label {\n    color: #6b7280;\n    text-align: left;\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n    display: block;\n  }\n  .input-parent {\n    border-radius: 0.375rem;\n    display: flex;\n    align-items: center;\n    color: #9ca3af;\n    border-width: 1px;\n  }\n  .left-input {\n    padding-top: 0.625rem;\n    padding-bottom: 0.625rem;\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n    border-right-width: 1px;\n    border-top-left-radius: 0.375rem;\n    border-bottom-left-radius: 0.375rem;\n    background-color: #f9fafb;\n  }\n  .website-url {\n    padding: 0.625rem;\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n    background-color: transparent;\n    width: 100%;\n    margin-left: 0.5rem;\n  }","label":"style.css"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block py-2 text-gray-500\">\n        Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n        <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n            https://\n        </div>\n        <input \n            type=\"text\"\n            placeholder=\"www.example.com\"\n            id=\"website-url\"\n            class=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n        />\n    </div>\n</div>\n"}]}}
 slug: /hero-section
-id: "100"
+id: "farmui-hero-00"
 created_at: 1
 ---
 

From 26f9e2338cc8ba2275c277f552050f37e299b1eb Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Fri, 31 May 2024 15:56:14 +0300
Subject: [PATCH 05/12] featix: cli and comp db

---
 apps/api/constants/components.json            | 122 +++++++++++++---
 .../componentsDB/faqs/faqs-7c1180404b4e.mdx   |   2 +-
 .../componentsDB/faqs/faqs-86cc9726a658.mdx   |   2 +-
 apps/www/demo/hero-section-102.mdx            |   2 +-
 .../FUIFaqsWithDividedRows.jsx                | 131 ++++++++----------
 .../FUIFaqsWithSearchBox.jsx                  |   8 --
 .../FUIHeroSectionWithBottomImage.jsx         |   7 -
 .../viewport/components/reactComponents.tsx   |  17 +--
 8 files changed, 177 insertions(+), 114 deletions(-)

diff --git a/apps/api/constants/components.json b/apps/api/constants/components.json
index ec77f2fe..b0675163 100644
--- a/apps/api/constants/components.json
+++ b/apps/api/constants/components.json
@@ -1,6 +1,6 @@
 [
   {
-    "id": "farmui-form-01                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         ",
+    "id": "farmui-form-01",
     "name": "FUIForms",
     "dependencies": ["lucide-react"],
     "files": [
@@ -22,7 +22,15 @@
   {
     "id": "farmui-hero-01",
     "name": "FUIHeroLogoCompany",
-    "dependencies": ["@radix-ui/react-avatar", "@radix-ui/react-context-menu" , "@radix-ui/react-dialog" , "@radix-ui/react-select" , "@radix-ui/react-tabs" , "@radix-ui/react-dropdown-menu" , "lucide-react" ],
+    "dependencies": [
+      "@radix-ui/react-avatar",
+      "@radix-ui/react-context-menu",
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-select",
+      "@radix-ui/react-tabs",
+      "@radix-ui/react-dropdown-menu",
+      "lucide-react"
+    ],
     "files": [
       {
         "root": {
@@ -35,13 +43,13 @@
           ]
         }
       }
-     
-    ]
+    ],
+    "type": "ui"
   },
   {
     "id": "farmui-hero-00",
     "name": "FUIHeroWithGrid",
-    "dependencies": ["framer-motion" , "lucide-react" ],
+    "dependencies": ["framer-motion", "lucide-react"],
     "files": [
       {
         "root": {
@@ -55,36 +63,116 @@
         }
       },
       {
-        "child": {
-          "name": "HeroAnimated",
+        "child": [
+          {
+            "name": "HeroAnimated",
+            "contents": [
+              {
+                "code_for": "react",
+                "content": "\n\"use client\";\nimport { motion } from \"framer-motion\";\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst FADE_UP_ANIMATION_VARIANTS = {\n  hidden: { opacity: 0, y: 10 },\n  show: { opacity: 1, y: 0, transition: { type: \"spring\" } },\n}\nconst HeroAnimated = ({\n  children,\n  header,\n  headerClassName = \"\",\n  descriptionClassName = \"\",\n  childrenClassName = \"\",\n  description,\n}: {\n  children?: React.ReactNode;\n  header: string;\n  headerClassName?: string;\n  description: string;\n  descriptionClassName?: string;\n  childrenClassName?: string;\n}) => {\n\n\n  return (\n    <motion.div\n      initial=\"hidden\"\n      animate=\"show\"\n      viewport={{ once: true }}\n      variants={{\n        hidden: {},\n        show: {\n          transition: {\n            staggerChildren: 0.15,\n          },\n        },\n      }}\n    >\n      <motion.h1\n        className={cn(\n          headerClassName,\n          \"drop-shadow-sm\"\n        )}\n        variants={FADE_UP_ANIMATION_VARIANTS}\n      >\n        {header}\n      </motion.h1>\n      <motion.p\n        className={cn(descriptionClassName, \"mt-6\")}\n        variants={FADE_UP_ANIMATION_VARIANTS}\n      >\n        {description}\n      </motion.p>\n      <motion.div\n        className={cn(\n          childrenClassName,\n          \"mx-auto mt-6 flex items-center justify-center space-x-5\"\n        )}\n        variants={FADE_UP_ANIMATION_VARIANTS}\n      >\n        {children}\n      </motion.div>\n    </motion.div>\n  );\n};\n\nexport default HeroAnimated;\n\n              "
+              }
+            ]
+          }
+        ]
+      }
+    ],
+    "type": "ui"
+  },
+  {
+    "id": "farmui-hero-03",
+    "name": "FUIHeroWithGridSimple",
+    "dependencies": ["lucide-react"],
+    "files": [
+      {
+        "root": {
+          "name": "FUIHeroWithGridSimple",
           "contents": [
             {
               "code_for": "react",
-              "content": "\n\"use client\";\nimport { motion } from \"framer-motion\";\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst FADE_UP_ANIMATION_VARIANTS = {\n  hidden: { opacity: 0, y: 10 },\n  show: { opacity: 1, y: 0, transition: { type: \"spring\" } },\n}\nconst HeroAnimated = ({\n  children,\n  header,\n  headerClassName = \"\",\n  descriptionClassName = \"\",\n  childrenClassName = \"\",\n  description,\n}: {\n  children?: React.ReactNode;\n  header: string;\n  headerClassName?: string;\n  description: string;\n  descriptionClassName?: string;\n  childrenClassName?: string;\n}) => {\n\n\n  return (\n    <motion.div\n      initial=\"hidden\"\n      animate=\"show\"\n      viewport={{ once: true }}\n      variants={{\n        hidden: {},\n        show: {\n          transition: {\n            staggerChildren: 0.15,\n          },\n        },\n      }}\n    >\n      <motion.h1\n        className={cn(\n          headerClassName,\n          \"drop-shadow-sm\"\n        )}\n        variants={FADE_UP_ANIMATION_VARIANTS}\n      >\n        {header}\n      </motion.h1>\n      <motion.p\n        className={cn(descriptionClassName, \"mt-6\")}\n        variants={FADE_UP_ANIMATION_VARIANTS}\n      >\n        {description}\n      </motion.p>\n      <motion.div\n        className={cn(\n          childrenClassName,\n          \"mx-auto mt-6 flex items-center justify-center space-x-5\"\n        )}\n        variants={FADE_UP_ANIMATION_VARIANTS}\n      >\n        {children}\n      </motion.div>\n    </motion.div>\n  );\n};\n\nexport default HeroAnimated;\n\n              "
+              "content": "\nimport LinkItem from \"components/ui/LinkItem\";\nimport { IconGithub } from \"components/icons\";\nimport { ChevronRight } from \"lucide-react\";\nimport HeroAnimated from \"components/HeroAnimated\";\nimport BgGradient from \"components/ui/BgGradient\";\nconst FUIHeroWithGridSimple = () => {\n  return (\n    <>\n      <section className=\"min-h-[800px] w-full  mt-0 relative\">\n        <div className=\"absolute -top-0 inset-x-0 opacity-45\">\n          <BgGradient />\n        </div>\n\n        <svg\n          className=\"absolute inset-0 z-1 h-full w-full  stroke-white/5 [mask-image:radial-gradient(100%_100%_at_top_left  ,white,transparent)]\"\n          aria-hidden=\"true\"\n        >\n          <defs>\n            <pattern\n              id=\"983e3e4c-de6d-4c3f-8d64-b9761d1534cc\"\n              width={200}\n              height={200}\n              x=\"50%\"\n              y={-1}\n              patternUnits=\"userSpaceOnUse\"\n            >\n              <path d=\"M.5 200V.5H200\" fill=\"none\" />\n            </pattern>\n          </defs>\n          <svg x=\"50%\" y={-1} className=\"overflow-visible fill-gray-800/20\">\n            <path\n              d=\"M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z\"\n              strokeWidth={0}\n            />\n          </svg>\n          <rect\n            width=\"100%\"\n            height=\"100%\"\n            strokeWidth={0}\n            fill=\"url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)\"\n          />\n        </svg>\n        <div\n          className=\"absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]\"\n          aria-hidden=\"true\"\n        >\n          <div\n            className=\"aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-[#9c80ff] to-[#e546d5] opacity-20\"\n            style={{\n              clipPath:\n                \"polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)\",\n            }}\n          />\n        </div>\n        {/* <div className=\"absolute -z-1 inset-0 opacity-15  h-[600px] w-full bg-transparent  bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div> */}\n\n        <div className=\"relative z-10 max-w-4xl ml-5 md:ml-10  translate-y-[33%]  mr-auto  space-y-4\">\n          <h1 className=\"text-sm  text-gray-400 group font-geist mr-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit\">\n            <pre className=\"tracking-tight uppercase\">\n              Build products for everyone\n              <ChevronRight className=\"inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n            </pre>\n          </h1>\n          <HeroAnimated\n            header=\"Take shadcn to the next level for modern web dev experience.\"\n            headerClassName=\"ml-2 text-left tracking-tight max-w-md md:max-w-3xl text-3xl md:text-4xl tracking-tighter mr-auto lg:text-6xl font-bold font-geist  font-normal  text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] leading-0 md:leading-0 md:pb-0 mt-1\"\n            description=\"\"\n            descriptionClassName=\"  \"\n          >\n            <div className=\"mr-auto text-[0.84rem] ml-2 text-zinc-400 text-left md:text-lg lg:max-w-2xl md:py-5\">\n              <pre className=\"tracking-tight uppercase max-w-md md:max-w-3xl text-wrap\">\n                Move faster with beautiful responsive UI components and website\n                templates with modern design, 100% free and open-source.\n              </pre>\n            </div>\n          </HeroAnimated>\n            <div className=\"mr-auto ml-2  flex flex-wrap gap-y-4 items-start justify-start gap-x-3\">\n              <LinkItem\n                href=\"/components\"\n                className=\"inline-flex rounded-none uppercase font-mono  text-center group items-center w-full justify-center  bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent bg-zinc-900  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-4 px-10\"\n              >\n                Browser Components\n                <ChevronRight className=\"w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n              </LinkItem>\n              <LinkItem\n                href=\"https://github.com/Kinfe123/farm-ui\"\n                variant=\"shiny\"\n                className=\"inline-flex font-mono uppercase tracking-tight rounded-none w-full justify-center items-center gap-x-3 border border-zinc-800 hover:border-zinc-600 bg-zinc-950 hover:text-zinc-100 duration-200 sm:w-auto py-4 px-10\"\n                target=\"_blank\"\n              >\n                <IconGithub className=\"w-5 h-5 \" />\n                Star on GitHub\n              </LinkItem>\n            </div>\n        </div>\n      </section>\n    </>\n  );\n};\nexport default FUIHeroWithGridSimple;\n\n"
             }
           ]
         }
       }
-     
-    ]
+    ],
+    "type": "ui"
   },
   {
-    "id": "farmui-hero-03",
-    "name": "FUIHeroWithGridSimple",
-    "dependencies": ["@radix-ui/react-avatar", "@radix-ui/react-context-menu" , "@radix-ui/react-dialog" , "@radix-ui/react-select" , "@radix-ui/react-tabs" , "@radix-ui/react-dropdown-menu" , "lucide-react" ],
+    "id": "farmui-hero-02",
+    "name": "FUIHeroSectionWithBottomImage",
+    "dependencies": ["lucide-react"],
     "files": [
       {
         "root": {
-          "name": "FUIHeroWithGridSimple",
+          "name": "FUIHeroSectionWithBottomImage",
           "contents": [
             {
               "code_for": "react",
-              "content": "\nimport LinkItem from \"components/ui/LinkItem\";\nimport { IconGithub } from \"components/icons\";\nimport { ChevronRight } from \"lucide-react\";\nimport HeroAnimated from \"components/HeroAnimated\";\nimport BgGradient from \"components/ui/BgGradient\";\nconst FUIHeroWithGridSimple = () => {\n  return (\n    <>\n      <section className=\"min-h-[800px] w-full  mt-0 relative\">\n        <div className=\"absolute -top-0 inset-x-0 opacity-45\">\n          <BgGradient />\n        </div>\n\n        <svg\n          className=\"absolute inset-0 z-1 h-full w-full  stroke-white/5 [mask-image:radial-gradient(100%_100%_at_top_left  ,white,transparent)]\"\n          aria-hidden=\"true\"\n        >\n          <defs>\n            <pattern\n              id=\"983e3e4c-de6d-4c3f-8d64-b9761d1534cc\"\n              width={200}\n              height={200}\n              x=\"50%\"\n              y={-1}\n              patternUnits=\"userSpaceOnUse\"\n            >\n              <path d=\"M.5 200V.5H200\" fill=\"none\" />\n            </pattern>\n          </defs>\n          <svg x=\"50%\" y={-1} className=\"overflow-visible fill-gray-800/20\">\n            <path\n              d=\"M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z\"\n              strokeWidth={0}\n            />\n          </svg>\n          <rect\n            width=\"100%\"\n            height=\"100%\"\n            strokeWidth={0}\n            fill=\"url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)\"\n          />\n        </svg>\n        <div\n          className=\"absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]\"\n          aria-hidden=\"true\"\n        >\n          <div\n            className=\"aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-[#9c80ff] to-[#e546d5] opacity-20\"\n            style={{\n              clipPath:\n                \"polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)\",\n            }}\n          />\n        </div>\n        {/* <div className=\"absolute -z-1 inset-0 opacity-15  h-[600px] w-full bg-transparent  bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div> */}\n\n        <div className=\"relative z-10 max-w-4xl ml-5 md:ml-10  translate-y-[33%]  mr-auto  space-y-4\">\n          <h1 className=\"text-sm  text-gray-400 group font-geist mr-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit\">\n            <pre className=\"tracking-tight uppercase\">\n              Build products for everyone\n              <ChevronRight className=\"inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n            </pre>\n          </h1>\n          <HeroAnimated\n            header=\"Take shadcn to the next level for modern web dev experience.\"\n            headerClassName=\"ml-2 text-left tracking-tight max-w-md md:max-w-3xl text-3xl md:text-4xl tracking-tighter mr-auto lg:text-6xl font-bold font-geist  font-normal  text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] leading-0 md:leading-0 md:pb-0 mt-1\"\n            description=\"\"\n            descriptionClassName=\"  \"\n          >\n            <div className=\"mr-auto text-[0.84rem] ml-2 text-zinc-400 text-left md:text-lg lg:max-w-2xl md:py-5\">\n              <pre className=\"tracking-tight uppercase max-w-md md:max-w-3xl text-wrap\">\n                Move faster with beautiful responsive UI components and website\n                templates with modern design, 100% free and open-source.\n              </pre>\n            </div>\n          </HeroAnimated>\n            <div className=\"mr-auto ml-2  flex flex-wrap gap-y-4 items-start justify-start gap-x-3\">\n              <LinkItem\n                href=\"/components\"\n                className=\"inline-flex rounded-none uppercase font-mono  text-center group items-center w-full justify-center  bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent bg-zinc-900  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-4 px-10\"\n              >\n                Browser Components\n                <ChevronRight className=\"w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n              </LinkItem>\n              <LinkItem\n                href=\"https://github.com/Kinfe123/farm-ui\"\n                variant=\"shiny\"\n                className=\"inline-flex font-mono uppercase tracking-tight rounded-none w-full justify-center items-center gap-x-3 border border-zinc-800 hover:border-zinc-600 bg-zinc-950 hover:text-zinc-100 duration-200 sm:w-auto py-4 px-10\"\n                target=\"_blank\"\n              >\n                <IconGithub className=\"w-5 h-5 \" />\n                Star on GitHub\n              </LinkItem>\n            </div>\n        </div>\n      </section>\n    </>\n  );\n};\nexport default FUIHeroWithGridSimple;\n\n"
+              "content": " \nimport React from \"react\";\nimport RetroGrid from \"components/ui/Grid\";\n\nexport default function FUIHeroSectionWithBottomImage() {\n  return (\n    <div className=\"relative\">\n      <div class=\"absolute top-0 z-[0] h-screen w-screen bg-purple-950/10 bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\"></div>\n      <section className=\"relative max-w-full mx-auto  z-1\">\n        <RetroGrid />\n\n        <div className=\"max-w-screen-xl z-10 mx-auto px-4 py-28 gap-12 text-gray-600 md:px-8\">\n          <div className=\"space-y-5 max-w-3xl leading-0  lg:leading-5 mx-auto text-center\">\n            <h1 className=\"text-sm text-gray-400 group font-geist mx-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit\">\n              Build products for everyone\n              <ChevronRight className=\"inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n            </h1>\n\n            <h2 className=\"text-4xl tracking-tighter font-geist  bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] text-transparent   mx-auto md:text-6xl\">\n              Designing your projects faster with{\" \"}\n              <span className=\"text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-orange-200\">\n                the largest figma UI kit.\n              </span>\n            </h2>\n\n            <p className=\"max-w-2xl mx-auto text-gray-300\">\n              Sed ut perspiciatis unde omnis iste natus voluptatem accusantium\n              doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n            </p>\n            <div className=\"items-center  justify-center gap-x-3 space-y-3 sm:flex sm:space-y-0\">\n              <span className=\"relative inline-block overflow-hidden rounded-full p-[1.5px]\">\n                <span className=\"absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]\" />\n                <div className=\"inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-gray-950  text-xs font-medium text-gray-50 backdrop-blur-3xl\">\n                  <a\n                    href=\"javascript:void(0)\"\n                    className=\"inline-flex rounded-full text-center group items-center w-full justify-center   bg-gradient-to-tr from-zinc-300/5 via-purple-400/20 to-transparent    text-white border-input border-[1px] hover:bg-transparent/90 transition-colors sm:w-auto py-4 px-10\"\n                  >\n                    Browse courses\n                  </a>\n                </div>\n              </span>\n            </div>\n          </div>\n          <div className=\"mt-32 mx-10\">\n            <img\n              src=\"https://farmui.vercel.app/dashboard.png\"\n              className=\"w-full shadow-lg rounded-lg border\"\n              alt=\"\"\n            />\n          </div>\n        </div>\n      </section>\n    </div>\n  );\n}\n\n"
             }
           ]
         }
+      },
+      {
+        "child": [
+          {
+            "name": "FUIHeroSectionWithBottomImage",
+            "contents": [
+              {
+                "code_for": "react",
+                "content": " \nimport React from \"react\";\nimport RetroGrid from \"components/ui/Grid\";\n\nexport default function FUIHeroSectionWithBottomImage() {\n  return (\n    <div className=\"relative\">\n      <div class=\"absolute top-0 z-[0] h-screen w-screen bg-purple-950/10 bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\"></div>\n      <section className=\"relative max-w-full mx-auto  z-1\">\n        <RetroGrid />\n\n        <div className=\"max-w-screen-xl z-10 mx-auto px-4 py-28 gap-12 text-gray-600 md:px-8\">\n          <div className=\"space-y-5 max-w-3xl leading-0  lg:leading-5 mx-auto text-center\">\n            <h1 className=\"text-sm text-gray-400 group font-geist mx-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit\">\n              Build products for everyone\n              <ChevronRight className=\"inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n            </h1>\n\n            <h2 className=\"text-4xl tracking-tighter font-geist  bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] text-transparent   mx-auto md:text-6xl\">\n              Designing your projects faster with{\" \"}\n              <span className=\"text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-orange-200\">\n                the largest figma UI kit.\n              </span>\n            </h2>\n\n            <p className=\"max-w-2xl mx-auto text-gray-300\">\n              Sed ut perspiciatis unde omnis iste natus voluptatem accusantium\n              doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n            </p>\n            <div className=\"items-center  justify-center gap-x-3 space-y-3 sm:flex sm:space-y-0\">\n              <span className=\"relative inline-block overflow-hidden rounded-full p-[1.5px]\">\n                <span className=\"absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]\" />\n                <div className=\"inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-gray-950  text-xs font-medium text-gray-50 backdrop-blur-3xl\">\n                  <a\n                    href=\"javascript:void(0)\"\n                    className=\"inline-flex rounded-full text-center group items-center w-full justify-center   bg-gradient-to-tr from-zinc-300/5 via-purple-400/20 to-transparent    text-white border-input border-[1px] hover:bg-transparent/90 transition-colors sm:w-auto py-4 px-10\"\n                  >\n                    Browse courses\n                  </a>\n                </div>\n              </span>\n            </div>\n          </div>\n          <div className=\"mt-32 mx-10\">\n            <img\n              src=\"https://farmui.vercel.app/dashboard.png\"\n              className=\"w-full shadow-lg rounded-lg border\"\n              alt=\"\"\n            />\n          </div>\n        </div>\n      </section>\n    </div>\n  );\n}\n\n"
+              }
+            ]
+          }
+        ]
       }
-     
-    ]
+    ],
+    "type": "ui"
+  },
+  {
+    "id": "farmui-faq-00",
+    "name": "FUIFaqsWithSearchBox",
+    "dependencies": [
+      "@radix-ui/react-avatar",
+      "@radix-ui/react-context-menu",
+      "@radix-ui/react-dialog",
+      "@radix-ui/react-select",
+      "@radix-ui/react-tabs",
+      "@radix-ui/react-dropdown-menu",
+      "lucide-react"
+    ],
+    "files": [
+      {
+        "root": {
+          "name": "FUIFaqsWithSearchBox",
+          "contents": [
+            {
+              "code_for": "react",
+              "content": "\nimport React from \"react\";\n\nexport default function FUIFaqsWithSearchBox() {\n  const faqsList = [\n    {\n      q: \"What are some random questions to ask?\",\n      a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Do you include common questions?\",\n      a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Can I use this for 21 questions?\",\n      a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Are these questions for girls or for boys?\",\n      a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"What do you wish you had more talent doing?\",\n      a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n      href: \"javascript:void(0)\",\n    },\n  ];\n\n  return (\n    <section className=\"relative\">\n      <img\n        className=\"absolute inset-x-0 -top-20 opacity-25 \"\n        src={\n          \"https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75\"\n        }\n        width={1000}\n        height={1000}\n        alt=\"back bg\"\n      />\n\n      <div className=\"absolute -z-1 inset-0  h-[600px] w-full bg-transparent opacity-5 bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div>\n\n      <div className=\"pt-10 max-w-screen-xl mx-auto px-4 md:px-8\">\n        <div className=\"space-y-5 sm:text-left sm:max-w-md sm:mr-auto\">\n          <h3 className=\"text-gray-300 font-geist text-3xl font-extrabold sm:text-4xl\">\n            How can we help?\n          </h3>\n          <p className=\"text-gray-100\">\n            Everything you need to know about the product. Can’t find the answer\n            you’re looking for? feel free to{\" \"}\n            <a\n              className=\"text-cyan-700 font-semibold whitespace-nowrap\"\n              href=\"javascript:void(0)\"\n            >\n              contact us\n            </a>\n            .\n          </p>\n          <form\n            onSubmit={(e) => e.preventDefault()}\n            className=\"mx-auto sm:mx-auto \"\n          >\n            <div className=\"relative\">\n              <Mail className=\"w-6 h-6 text-gray-500 absolute left-3 inset-y-0 my-auto\" />\n              <input\n                type=\"text\"\n                placeholder=\"Enter your email\"\n                className=\"w-full pl-12 pr-3 py-2 text-gray-200 bg-transparent outline-none border focus:border-cyan-600 shadow-sm rounded-lg\"\n              />\n            </div>\n          </form>\n        </div>\n        <Separator className=\"h-[1px] bg-white/10 mt-4\" />\n        <div className=\"mt-12\">\n          <ul className=\"space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3\">\n            {faqsList.map((item, idx) => (\n              <li key={idx} className=\"space-y-3\">\n                <summary className=\"flex items-center justify-between font-semibold text-gray-500\">\n                  {item.q}\n                </summary>\n                <p\n                  dangerouslySetInnerHTML={{ __html: item.a }}\n                  className=\"text-gray-200 leading-relaxed\"\n                ></p>\n                <a\n                  href={item.href}\n                  className=\"flex items-center gap-x-1 text-sm text-cyan-600 hover:text-cyan-400 duration-150 font-medium\"\n                >\n                  Read more\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    className=\"w-5 h-5\"\n                  >\n                    <path\n                      fillRule=\"evenodd\"\n                      d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z\"\n                      clipRule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n"
+            }
+          ]
+        }
+      }
+    ],
+    "type": "ui"
+  },
+  {
+    "id": "farmui-faq-01",
+    "name": "FUIFaqsWithDividedRows",
+    "dependencies": ["lucide-react"],
+    "files": [
+      {
+        "root": {
+          "name": "FUIFaqsWithDividedRows",
+          "contents": [
+            {
+              "code_for": "react",
+              "content": " \nimport React from \"react\";\nexport default function FUIFaqsWithDividedRows() {\n  const faqsList = [\n    {\n      q: \"What are some random questions to ask?\",\n      a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n    },\n    {\n      q: \"Do you include common questions?\",\n      a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n    },\n    {\n      q: \"Can I use this for 21 questions?\",\n      a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n    },\n    {\n      q: \"Are these questions for girls or for boys?\",\n      a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n    },\n    {\n      q: \"What do you wish you had more talent doing?\",\n      a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n    },\n  ];\n\n  return (\n    <section className=\"relative\">\n      <img\n        className=\"absolute inset-x-0 -top-20 opacity-20 \"\n        src={\n          \"https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75\"\n        }\n        width={1000}\n        height={1000}\n        alt=\"back bg\"\n      />\n\n      <div className=\"py-14 relative  max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n        <div className=\"flex-1 \">\n          <div className=\"max-w-lg\">\n            <h3 className=\"font-semibold text-cyan-600\">\n              Frequently asked questions\n            </h3>\n            <p className=\"mt-3 text-gray-400 text-3xl font-extrabold sm:text-4xl\">\n              All information you need to know\n            </p>\n            <Separator className=\"h-[1px] mt-5 bg-white/10\" />\n          </div>\n        </div>\n        <div className=\"flex-1 mt-12 md:mt-0\">\n          <ul className=\"space-y-4 divide-y\">\n            {faqsList.map((item, idx) => (\n              <li className=\"py-5\" key={idx}>\n                <summary className=\"flex items-center justify-between font-semibold text-gray-700\">\n                  {item.q}\n                </summary>\n                <p\n                  dangerouslySetInnerHTML={{ __html: item.a }}\n                  className=\"mt-3 text-gray-300 leading-relaxed\"\n                ></p>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n            "
+            }
+          ]
+        }
+      }
+    ],
+    "type": "ui"
   }
 ]
diff --git a/apps/www/componentsDB/faqs/faqs-7c1180404b4e.mdx b/apps/www/componentsDB/faqs/faqs-7c1180404b4e.mdx
index 3374907e..272fa65b 100644
--- a/apps/www/componentsDB/faqs/faqs-7c1180404b4e.mdx
+++ b/apps/www/componentsDB/faqs/faqs-7c1180404b4e.mdx
@@ -5,7 +5,7 @@ paid: false
 isActive: true
 ltr: {"html":{"htmlTail":[{"label":"index.html","code":"<div\n  x-data=\"{ faqsList: [\n  {\n      q: 'What are some random questions to ask?',\n      a: 'That\\'s exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you\\'re able to find the perfect random question.',\n      href: 'javascript:void(0)'\n  },\n  {\n      q: 'Do you include common questions?',\n      a: 'This generator doesn\\'t include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.',\n      href: 'javascript:void(0)'\n  },\n  {\n      q: 'Can I use this for 21 questions?',\n      a: 'Yes! there are two ways that you can use this question generator depending on what you\\'re after. You can indicate that you want 21 questions generated.',\n      href: 'javascript:void(0)'\n  },\n  {\n      q: 'Are these questions for girls or for boys?',\n      a: 'The questions in this generator are gender neutral and can be used to ask either male or females (or any other gender the person identifies with).',\n      href: 'javascript:void(0)'\n  },\n  {\n      q: 'What do you wish you had more talent doing?',\n      a: 'If you\\'ve been searching for a way to get random questions, you\\'ve landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.',\n      href: 'javascript:void(0)'\n  }\n] }\"\n>\n  <section class=\"py-14\">\n    <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n      <div class=\"space-y-5 sm:text-center sm:max-w-md sm:mx-auto\">\n        <h3 class=\"text-gray-800 text-3xl font-extrabold sm:text-4xl\">\n          How can we help?\n        </h3>\n        <p class=\"text-gray-600\">\n          Everything you need to know about the product. Can’t find the\n          answer you’re looking for? feel free to\n          <a\n            class=\"text-indigo-600 font-semibold whitespace-nowrap\"\n            href=\"javascript:void(0)\"\n          >\n            contact us </a\n          >.\n        </p>\n        <form @submit.prevent=\"\" class=\"mx-auto sm:max-w-xs\">\n          <div class=\"relative\">\n            <svg\n              class=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n            <input\n              type=\"text\"\n              placeholder=\"Enter your email\"\n              class=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n            />\n          </div>\n        </form>\n      </div>\n      <div class=\"mt-12\">\n        <ul\n          class=\"space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3\"\n        >\n          <template x-for=\"(item, index) in faqsList\" :key=\"index\">\n            <li class=\"space-y-3\">\n              <summary\n                class=\"flex items-center justify-between font-semibold text-gray-700\"\n                x-text=\"item.q\"\n              ></summary>\n              <p class=\"text-gray-600 leading-relaxed\" x-html=\"item.a\"></p>\n              <a\n                :href=\"item.href\"\n                class=\"flex items-center gap-x-1 text-sm text-indigo-600 hover:text-indigo-400 duration-150 font-medium\"\n              >\n                Read more\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"h-5 w-5\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M13 7l5 5m0 0l-5 5m5-5H6\"\n                  />\n                </svg>\n              </a>\n            </li>\n          </template>\n        </ul>\n      </div>\n    </div>\n  </section>\n</div>"}]},"react":{"jsxCss":[],"jsxTail":[{"code":"export default () => {\n\n    const faqsList = [\n        {\n            q: \"What are some random questions to ask?\",\n            a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Do you include common questions?\",\n            a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Can I use this for 21 questions?\",\n            a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Are these questions for girls or for boys?\",\n            a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"What do you wish you had more talent doing?\",\n            a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n            href: \"javascript:void(0)\",\n        }\n    ]\n\n    return (\n        <section className='py-14'>\n            <div className=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n                <div className=\"space-y-5 sm:text-center sm:max-w-md sm:mx-auto\">\n                    <h3 className=\"text-gray-800 text-3xl font-extrabold sm:text-4xl\">\n                        How can we help?\n                    </h3>\n                    <p className=\"text-gray-600\">\n                        Everything you need to know about the product. Can’t find the answer you’re looking for? feel free to {\" \"}\n                        <a\n                            className='text-indigo-600 font-semibold whitespace-nowrap'\n                            href='javascript:void(0)'>\n                            contact us\n                        </a>.\n                    </p>\n                    <form onSubmit={(e) => e.preventDefault()} className=\"mx-auto sm:max-w-xs\">\n                        <div className=\"relative\">\n                            <svg className=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                <path fillRule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clipRule=\"evenodd\" />\n                            </svg>\n                            <input\n                                type=\"text\"\n                                placeholder=\"Enter your email\"\n                                className=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n                            />\n                        </div>\n                    </form>\n                </div>\n                <div className='mt-12'>\n                    <ul className='space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3'>\n                        {faqsList.map((item, idx) => (\n                            <li\n                                key={idx}\n                                className=\"space-y-3\"\n                            >\n                                <summary\n                                    className=\"flex items-center justify-between font-semibold text-gray-700\">\n                                    {item.q}\n                                </summary>\n                                <p\n                                    dangerouslySetInnerHTML={{ __html: item.a }}\n                                    className='text-gray-600 leading-relaxed'>\n                                </p>\n                                <a href={item.href} className=\"flex items-center gap-x-1 text-sm text-indigo-600 hover:text-indigo-400 duration-150 font-medium\">\n                                    Read more\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5\">\n                                        <path fillRule=\"evenodd\" d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z\" clipRule=\"evenodd\" />\n                                    </svg>\n                                </a>\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            </div>\n        </section>\n    );\n};","label":"App.jsx"}]},"svelte":{"svelteTail":[{"label":"App.svelte","code":"<script>\n  let faqsList = [\n    {\n      q: \"What are some random questions to ask?\",\n      a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Do you include common questions?\",\n      a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Can I use this for 21 questions?\",\n      a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Are these questions for girls or for boys?\",\n      a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"What do you wish you had more talent doing?\",\n      a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n      href: \"javascript:void(0)\",\n    }\n  ];\n</script>\n\n<section class='py-14'>\n  <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n    <div class=\"space-y-5 sm:text-center sm:max-w-md sm:mx-auto\">\n      <h3 class=\"text-gray-800 text-3xl font-extrabold sm:text-4xl\">\n        How can we help?\n      </h3>\n      <p class=\"text-gray-600\">\n        Everything you need to know about the product. Can’t find the answer you’re looking for? feel free to\n        <a class='text-indigo-600 font-semibold whitespace-nowrap' href='javascript:void(0)'>\n          contact us\n        </a>.\n      </p>\n      <form on:submit|preventDefault class=\"mx-auto sm:max-w-xs\">\n        <div class=\"relative\">\n          <svg class=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path fill-rule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clip-rule=\"evenodd\" />\n          </svg>\n          <input\n            type=\"text\"\n            placeholder=\"Enter your email\"\n            class=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n          />\n        </div>\n      </form>\n    </div>\n    <div class='mt-12'>\n      <ul class='space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3'>\n        {#each faqsList as item (item.q)}\n          <li class=\"space-y-3\">\n            <summary class=\"flex items-center justify-between font-semibold text-gray-700\">\n              {item.q}\n            </summary>\n            <p class='text-gray-600 leading-relaxed'>{@html item.a}</p>\n            <a href={item.href} class=\"flex items-center gap-x-1 text-sm text-indigo-600 hover:text-indigo-400 duration-150 font-medium\">\n              Read more\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"w-5 h-5\">\n                <path fill-rule=\"evenodd\" d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-2.01H5.75A.75.75 0 015 10z\" clip-rule=\"evenodd\" />\n              </svg>\n            </a>\n          </li>\n        {/each}\n      </ul>\n    </div>\n  </div>\n</section>"}]},"preview":"function App() {\n\n    const faqsList = [\n        {\n            q: \"What are some random questions to ask?\",\n            a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Do you include common questions?\",\n            a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Can I use this for 21 questions?\",\n            a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Are these questions for girls or for boys?\",\n            a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"What do you wish you had more talent doing?\",\n            a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n            href: \"javascript:void(0)\",\n        }\n    ]\n\n    return (\n        <section className='py-14'>\n            <div className=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n                <div className=\"space-y-5 sm:text-center sm:max-w-md sm:mx-auto\">\n                    <h3 className=\"text-gray-800 text-3xl font-extrabold sm:text-4xl\">\n                        How can we help?\n                    </h3>\n                    <p className=\"text-gray-600\">\n                        Everything you need to know about the product. Can’t find the answer you’re looking for? feel free to {\" \"}\n                        <a\n                            className='text-indigo-600 font-semibold whitespace-nowrap'\n                            href='javascript:void(0)'>\n                            contact us\n                        </a>.\n                    </p>\n                    <form onSubmit={(e) => e.preventDefault()} className=\"mx-auto sm:max-w-xs\">\n                        <div className=\"relative\">\n                            <svg className=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                <path fillRule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clipRule=\"evenodd\" />\n                            </svg>\n                            <input\n                                type=\"text\"\n                                placeholder=\"Enter your email\"\n                                className=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n                            />\n                        </div>\n                    </form>\n                </div>\n                <div className='mt-12'>\n                    <ul className='space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3'>\n                        {faqsList.map((item, idx) => (\n                            <li\n                                key={idx}\n                                className=\"space-y-3\"\n                            >\n                                <summary\n                                    className=\"flex items-center justify-between font-semibold text-gray-700\">\n                                    {item.q}\n                                </summary>\n                                <p\n                                    dangerouslySetInnerHTML={{ __html: item.a }}\n                                    className='text-gray-600 leading-relaxed'>\n                                </p>\n                                <a href={item.href} className=\"flex items-center gap-x-1 text-sm text-indigo-600 hover:text-indigo-400 duration-150 font-medium\">\n                                    Read more\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5\">\n                                        <path fillRule=\"evenodd\" d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z\" clipRule=\"evenodd\" />\n                                    </svg>\n                                </a>\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            </div>\n        </section>\n    );\n};","vue":{"vueCss":[],"vueTail":[{"code":"<template>\n  <section class='py-14'>\n    <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n      <div class=\"space-y-5 sm:text-center sm:max-w-md sm:mx-auto\">\n        <h3 class=\"text-gray-800 text-3xl font-extrabold sm:text-4xl\">\n          How can we help?\n        </h3>\n        <p class=\"text-gray-600\">\n          Everything you need to know about the product. Can’t find the answer you’re looking for? feel free to\n          <a class='text-indigo-600 font-semibold whitespace-nowrap' href='javascript:void(0)'>\n            contact us\n          </a>.\n        </p>\n        <form @submit.prevent=\"\" class=\"mx-auto sm:max-w-xs\">\n          <div class=\"relative\">\n            <svg\n              class=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n            <input type=\"text\" placeholder=\"Enter your email\" class=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\" />\n          </div>\n        </form>\n      </div>\n      <div class='mt-12'>\n        <ul class='space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3'>\n          <li v-for=\"(item, index) in faqsList\" :key=\"index\" class=\"space-y-3\">\n            <summary class=\"flex items-center justify-between font-semibold text-gray-700\">\n              {{ item.q }}\n            </summary>\n            <p v-html=\"item.a\" class=\"text-gray-600 leading-relaxed\"></p>\n            <a :href=\"item.href\" class=\"flex items-center gap-x-1 text-sm text-indigo-600 hover:text-indigo-400 duration-150 font-medium\">\n              Read more\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 7l5 5m0 0l-5 5m5-5H6\"/>\n              </svg>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      faqsList: [\n        {\n          q: \"What are some random questions to ask?\",\n          a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n          href: \"javascript:void(0)\",\n        },\n        {\n          q: \"Do you include common questions?\",\n          a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n          href: \"javascript:void(0)\",\n        },\n        {\n          q: \"Can I use this for 21 questions?\",\n          a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n          href: \"javascript:void(0)\",\n        },\n        {\n          q: \"Are these questions for girls or for boys?\",\n          a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n          href: \"javascript:void(0)\",\n        },\n        {\n          q: \"What do you wish you had more talent doing?\",\n          a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n          href: \"javascript:void(0)\",\n        }\n      ],\n    }\n  },\n}\n</script>","label":"App.vue"}]}}
 slug: /faqs
-id: bb87ffac-1579-4670-80be-7c1180404b4e
+id: "farmui-faq-00"
 created_at: 1670157220758
 ---
 
diff --git a/apps/www/componentsDB/faqs/faqs-86cc9726a658.mdx b/apps/www/componentsDB/faqs/faqs-86cc9726a658.mdx
index ea2d1bc3..978f81cc 100644
--- a/apps/www/componentsDB/faqs/faqs-86cc9726a658.mdx
+++ b/apps/www/componentsDB/faqs/faqs-86cc9726a658.mdx
@@ -5,7 +5,7 @@ paid: false
 isActive: true
 ltr: {"svelte":{"svelteTail":[{"code":"<script>\n  let faqsList = [\n    {\n      q: \"What are some random questions to ask?\",\n      a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\"\n    },\n    {\n      q: \"Do you include common questions?\",\n      a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\"\n    },\n    {\n      q: \"Can I use this for 21 questions?\",\n      a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\"\n    },\n    {\n      q: \"Are these questions for girls or for boys?\",\n      a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\"\n    },\n    {\n      q: \"What do you wish you had more talent doing?\",\n      a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\"\n    }\n  ];\n</script>\n\n<section class='py-14'>\n  <div class=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n    <div class='flex-1'>\n      <div class=\"max-w-lg\">\n        <h3 class='font-semibold text-indigo-600'>\n          Frequently asked questions\n        </h3>\n        <p class='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n          All information you need to know\n        </p>\n      </div>\n    </div>\n    <div class='flex-1 mt-12 md:mt-0'>\n      <ul class='space-y-4 divide-y'>\n        {#each faqsList as item, index}\n          <li class=\"py-5\">\n            <summary class=\"flex items-center justify-between font-semibold text-gray-700\">\n              {item.q}\n            </summary>\n            <p class='mt-3 text-gray-600 leading-relaxed'>\n              {@html item.a}\n            </p>\n          </li>\n        {/each}\n      </ul>\n    </div>\n  </div>\n</section>","label":"App.svelte"}]},"html":{"htmlTail":[{"code":"<section class='py-14' x-data=\"{ faqsList: [\n    {\n        q: 'What are some random questions to ask?',\n        a: 'That\\'s exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you\\'re able to find the perfect random question.'\n    },\n    {\n        q: 'Do you include common questions?',\n        a: 'This generator doesn\\'t include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.'\n    },\n    {\n        q: 'Can I use this for 21 questions?',\n        a: 'Yes! there are two ways that you can use this question generator depending on what you\\'re after. You can indicate that you want 21 questions generated.'\n    },\n    {\n        q: 'Are these questions for girls or for boys?',\n        a: 'The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).'\n    },\n    {\n        q: 'What do you wish you had more talent doing?',\n        a: 'If you\\'ve been searching for a way to get random questions, you\\'ve landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.'\n    }\n]}\">\n    <div class=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n        <div class='flex-1'>\n            <div class=\"max-w-lg\">\n                <h3 class='font-semibold text-indigo-600'>\n                    Frequently asked questions\n                </h3>\n                <p class='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n                    All information you need to know\n                </p>\n            </div>\n        </div>\n        <div class='flex-1 mt-12 md:mt-0'>\n            <ul class='space-y-4 divide-y'>\n                <template x-for=\"(item, idx) in faqsList\" :key=\"idx\">\n                    <li class=\"py-5\">\n                        <summary class=\"flex items-center justify-between font-semibold text-gray-700\" x-text=\"item.q\"></summary>\n                        <p class='mt-3 text-gray-600 leading-relaxed' x-html=\"item.a\"></p>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    </div>\n</section>","label":"index.html"}]},"preview":"function App() {\n\n    const faqsList = [\n        {\n            q: \"What are some random questions to ask?\",\n            a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\"\n        },\n        {\n            q: \"Do you include common questions?\",\n            a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\"\n        },\n        {\n            q: \"Can I use this for 21 questions?\",\n            a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\"\n        },\n        {\n            q: \"Are these questions for girls or for boys?\",\n            a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\"\n        },\n        {\n            q: \"What do you wish you had more talent doing?\",\n            a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\"\n        }\n    ]\n\n    return (\n        <section className='py-14'>\n            <div className=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n                <div className='flex-1'>\n                    <div className=\"max-w-lg\">\n                        <h3 className='font-semibold text-indigo-600'>\n                            Frequently asked questions\n                        </h3>\n                        <p className='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n                            All information you need to know\n                        </p>\n                    </div>\n                </div>\n                <div className='flex-1 mt-12 md:mt-0'>\n                    <ul className='space-y-4 divide-y'>\n                        {faqsList.map((item, idx) => (\n                            <li\n                                className=\"py-5\"\n                                key={idx}>\n                                <summary\n                                    className=\"flex items-center justify-between font-semibold text-gray-700\">\n                                    {item.q}\n                                </summary>\n                                <p\n                                    dangerouslySetInnerHTML={{ __html: item.a }}\n                                    className='mt-3 text-gray-600 leading-relaxed'>\n                                </p>\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            </div>\n        </section>\n    );\n};","react":{"jsxCss":[],"jsxTail":[{"code":"export default () => {\n\n    const faqsList = [\n        {\n            q: \"What are some random questions to ask?\",\n            a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\"\n        },\n        {\n            q: \"Do you include common questions?\",\n            a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\"\n        },\n        {\n            q: \"Can I use this for 21 questions?\",\n            a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\"\n        },\n        {\n            q: \"Are these questions for girls or for boys?\",\n            a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\"\n        },\n        {\n            q: \"What do you wish you had more talent doing?\",\n            a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\"\n        }\n    ]\n\n    return (\n        <section className='py-14'>\n            <div className=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n                <div className='flex-1'>\n                    <div className=\"max-w-lg\">\n                        <h3 className='font-semibold text-indigo-600'>\n                            Frequently asked questions\n                        </h3>\n                        <p className='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n                            All information you need to know\n                        </p>\n                    </div>\n                </div>\n                <div className='flex-1 mt-12 md:mt-0'>\n                    <ul className='space-y-4 divide-y'>\n                        {faqsList.map((item, idx) => (\n                            <li\n                                className=\"py-5\"\n                                key={idx}>\n                                <summary\n                                    className=\"flex items-center justify-between font-semibold text-gray-700\">\n                                    {item.q}\n                                </summary>\n                                <p\n                                    dangerouslySetInnerHTML={{ __html: item.a }}\n                                    className='mt-3 text-gray-600 leading-relaxed'>\n                                </p>\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            </div>\n        </section>\n    );\n};","label":"App.jsx"}]},"vue":{"vueCss":[],"vueTail":[{"code":"<template>\n  <section class='py-14'>\n    <div class=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n      <div class='flex-1'>\n        <div class=\"max-w-lg\">\n          <h3 class='font-semibold text-indigo-600'>\n            Frequently asked questions\n          </h3>\n          <p class='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n            All information you need to know\n          </p>\n        </div>\n      </div>\n      <div class='flex-1 mt-12 md:mt-0'>\n        <ul class='space-y-4 divide-y'>\n          <li class=\"py-5\" v-for=\"(item, index) in faqsList\" :key=\"index\">\n            <summary class=\"flex items-center justify-between font-semibold text-gray-700\">\n              {{ item.q }}\n            </summary>\n            <p class='mt-3 text-gray-600 leading-relaxed' v-html=\"item.a\"></p>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      faqsList: [\n        {\n          q: 'What are some random questions to ask?',\n          a: 'That\\'s exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you\\'re able to find the perfect random question.'\n        },\n        {\n          q: 'Do you include common questions?',\n          a: 'This generator doesn\\'t include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.'\n        },\n        {\n          q: 'Can I use this for 21 questions?',\n          a: 'Yes! there are two ways that you can use this question generator depending on what you\\'re after. You can indicate that you want 21 questions generated.'\n        },\n        {\n          q: 'Are these questions for girls or for boys?',\n          a: 'The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).'\n        },\n        {\n          q: 'What do you wish you had more talent doing?',\n          a: 'If you\\'ve been searching for a way to get random questions, you\\'ve landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.'\n        }\n      ]\n    };\n  }\n};\n</script>\n","label":"App.vue"}]}}
 slug: /faqs
-id: 639934f5-ad80-4b22-aa0f-86cc9726a658
+id: "farmui-faq-01
 created_at: 1670156922383
 ---
 
diff --git a/apps/www/demo/hero-section-102.mdx b/apps/www/demo/hero-section-102.mdx
index c9673b6c..69c570e5 100644
--- a/apps/www/demo/hero-section-102.mdx
+++ b/apps/www/demo/hero-section-102.mdx
@@ -5,7 +5,7 @@ paid: false
 isActive: true
 ltr: {"preview":"function App() {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}","react":{"jsxTail":[{"label":"App.jsx","code":"export default () => {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}"}],"jsxCss":[{"code":"export default () => {\n    return (\n        <div className=\"website-url-input\">\n            <label for=\"website-url\">\n                Website URL\n            </label>\n            <div className=\"input-container\">\n                <div className=\"website-protocol\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"input\"\n                />\n            </div>\n        </div>\n    )\n}\n","label":"App.jsx"},{"label":"style.css","code":".website-url-input {\n  max-width: 28rem;\n  padding: 0px 1rem 0px 1rem;\n  margin: 3rem auto 0px auto;\n}\n.website-url-input label {\n  display: block;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: #6b7280;\n}\n.website-url-input .input-container {\n  display: flex;\n  align-items: center;\n  color: #9ca3af;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n}\n.website-url-input .input-container .website-protocol {\n  padding: 0.625rem 0.75rem 0.625rem 0.75rem;\n  background-color: #f9fafb;\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n  border-right: solid 1px #e5e7eb;\n}\n.website-url-input .input-container .input {\n  width: 100%;\n  padding: 0.625rem;\n  margin-left: 0.5rem;\n  background-color: transparent;\n  outline: none;\n}\n"}]},"vue":{"vueTail":[{"code":"<template>\n  <div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block text-left py-2 text-gray-500\">\n      Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n      <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\"\n        class=\"w-full p-2.5 ml-2 bg-transparent outline-none\" />\n    </div>\n  </div>\n</template>","label":"App.vue"}],"vueCss":[{"label":"App.vue","code":"<template>\n  <div class=\"input-container\">\n    <label for=\"website-url\" class=\"input-label\">\n      Website URL\n    </label>\n    <div class=\"input-parent\">\n      <div class=\"left-input bg-gray-50\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\" class=\"website-url\" />\n    </div>\n  </div>\n</template>"},{"code":"  .input-container {\n    max-width: 28rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\n    margin-left: auto;\n    margin-right: auto;\n    margin-top: 3rem;\n  }\n  .input-label {\n    color: #6b7280;\n    text-align: left;\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n    display: block;\n  }\n  .input-parent {\n    border-radius: 0.375rem;\n    display: flex;\n    align-items: center;\n    color: #9ca3af;\n    border-width: 1px;\n  }\n  .left-input {\n    padding-top: 0.625rem;\n    padding-bottom: 0.625rem;\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n    border-right-width: 1px;\n    border-top-left-radius: 0.375rem;\n    border-bottom-left-radius: 0.375rem;\n    background-color: #f9fafb;\n  }\n  .website-url {\n    padding: 0.625rem;\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n    background-color: transparent;\n    width: 100%;\n    margin-left: 0.5rem;\n  }","label":"style.css"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block py-2 text-gray-500\">\n        Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n        <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n            https://\n        </div>\n        <input \n            type=\"text\"\n            placeholder=\"www.example.com\"\n            id=\"website-url\"\n            class=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n        />\n    </div>\n</div>\n"}]}}
 slug: /hero-section
-id: "710053f8-34ec-41cd-8ce0-e5fdc83c631d"
+id: "farmui-hero-02"
 created_at: 1
 ---
 
diff --git a/apps/www/previewsComponents/FUIFaqsWithDividedRows.jsx b/apps/www/previewsComponents/FUIFaqsWithDividedRows.jsx
index 05680977..1cbb8fc0 100644
--- a/apps/www/previewsComponents/FUIFaqsWithDividedRows.jsx
+++ b/apps/www/previewsComponents/FUIFaqsWithDividedRows.jsx
@@ -1,79 +1,68 @@
 import React from "react";
-import * as Avatar from "@radix-ui/react-avatar";
-import * as ContextMenu from "@radix-ui/react-context-menu";
-import * as Dialog from "@radix-ui/react-dialog";
-import * as Select from "@radix-ui/react-select";
-import * as Tabs from "@radix-ui/react-tabs";
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { Separator } from "@/components/ui/separator";
-
 export default function FUIFaqsWithDividedRows() {
+  const faqsList = [
+    {
+      q: "What are some random questions to ask?",
+      a: "That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.",
+    },
+    {
+      q: "Do you include common questions?",
+      a: "This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.",
+    },
+    {
+      q: "Can I use this for 21 questions?",
+      a: "Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.",
+    },
+    {
+      q: "Are these questions for girls or for boys?",
+      a: "The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).",
+    },
+    {
+      q: "What do you wish you had more talent doing?",
+      a: "If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.",
+    },
+  ];
 
-    const faqsList = [
-        {
-            q: "What are some random questions to ask?",
-            a: "That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question."
-        },
-        {
-            q: "Do you include common questions?",
-            a: "This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator."
-        },
-        {
-            q: "Can I use this for 21 questions?",
-            a: "Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated."
-        },
-        {
-            q: "Are these questions for girls or for boys?",
-            a: "The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with)."
-        },
-        {
-            q: "What do you wish you had more talent doing?",
-            a: "If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires."
-        }
-    ]
-
-    return (
-        <section className='relative'>
-            <img
+  return (
+    <section className="relative">
+      <img
         className="absolute inset-x-0 -top-20 opacity-20 "
-        src={"https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75"}
+        src={
+          "https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75"
+        }
         width={1000}
         height={1000}
         alt="back bg"
       />
-    
-            <div className="py-14 relative  max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8">
-                <div className='flex-1 '>
-                    <div className="max-w-lg">
-                        <h3 className='font-semibold text-cyan-600'>
-                            Frequently asked questions
-                        </h3>
-                        <p className='mt-3 text-gray-400 text-3xl font-extrabold sm:text-4xl'>
-                            All information you need to know
-                        </p>
-                    <Separator className="h-[1px] mt-5 bg-white/10"/>
-                    </div>
-                </div>
-                <div className='flex-1 mt-12 md:mt-0'>
-                    <ul className='space-y-4 divide-y'>
-                        {faqsList.map((item, idx) => (
-                            <li
-                                className="py-5"
-                                key={idx}>
-                                <summary
-                                    className="flex items-center justify-between font-semibold text-gray-700">
-                                    {item.q}
-                                </summary>
-                                <p
-                                    dangerouslySetInnerHTML={{ __html: item.a }}
-                                    className='mt-3 text-gray-300 leading-relaxed'>
-                                </p>
-                            </li>
-                        ))}
-                    </ul>
-                </div>
-            </div>
-        </section>
-    );
-};
-        
\ No newline at end of file
+
+      <div className="py-14 relative  max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8">
+        <div className="flex-1 ">
+          <div className="max-w-lg">
+            <h3 className="font-semibold text-cyan-600">
+              Frequently asked questions
+            </h3>
+            <p className="mt-3 text-gray-400 text-3xl font-extrabold sm:text-4xl">
+              All information you need to know
+            </p>
+            <Separator className="h-[1px] mt-5 bg-white/10" />
+          </div>
+        </div>
+        <div className="flex-1 mt-12 md:mt-0">
+          <ul className="space-y-4 divide-y">
+            {faqsList.map((item, idx) => (
+              <li className="py-5" key={idx}>
+                <summary className="flex items-center justify-between font-semibold text-gray-700">
+                  {item.q}
+                </summary>
+                <p
+                  dangerouslySetInnerHTML={{ __html: item.a }}
+                  className="mt-3 text-gray-300 leading-relaxed"
+                ></p>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/www/previewsComponents/FUIFaqsWithSearchBox.jsx b/apps/www/previewsComponents/FUIFaqsWithSearchBox.jsx
index 375534e3..efb6d2ac 100644
--- a/apps/www/previewsComponents/FUIFaqsWithSearchBox.jsx
+++ b/apps/www/previewsComponents/FUIFaqsWithSearchBox.jsx
@@ -1,12 +1,4 @@
 import React from "react";
-import * as Avatar from "@radix-ui/react-avatar";
-import * as ContextMenu from "@radix-ui/react-context-menu";
-import * as Dialog from "@radix-ui/react-dialog";
-import * as Select from "@radix-ui/react-select";
-import * as Tabs from "@radix-ui/react-tabs";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { Separator } from "@/components/ui/separator";
-import { Mail } from "lucide-react";
 
 export default function FUIFaqsWithSearchBox() {
   const faqsList = [
diff --git a/apps/www/previewsComponents/FUIHeroSectionWithBottomImage.jsx b/apps/www/previewsComponents/FUIHeroSectionWithBottomImage.jsx
index b156e7b7..0c61f5b5 100644
--- a/apps/www/previewsComponents/FUIHeroSectionWithBottomImage.jsx
+++ b/apps/www/previewsComponents/FUIHeroSectionWithBottomImage.jsx
@@ -1,11 +1,4 @@
 import React from "react";
-import * as Avatar from "@radix-ui/react-avatar";
-import * as ContextMenu from "@radix-ui/react-context-menu";
-import * as Dialog from "@radix-ui/react-dialog";
-import * as Select from "@radix-ui/react-select";
-import * as Tabs from "@radix-ui/react-tabs";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { ChevronRight } from "lucide-react";
 import RetroGrid from "components/ui/Grid";
 
 export default function FUIHeroSectionWithBottomImage() {
diff --git a/apps/www/viewport/components/reactComponents.tsx b/apps/www/viewport/components/reactComponents.tsx
index 1aeb4bf9..a96e6714 100644
--- a/apps/www/viewport/components/reactComponents.tsx
+++ b/apps/www/viewport/components/reactComponents.tsx
@@ -30,13 +30,14 @@ export const componentToPreview: ComponentProps = {
             `,
     },
   },
-  "bb87ffac-1579-4670-80be-7c1180404b4e": {
+  "farmui-faq-00": {
     component: <FUIFaqsWithSearchBox />,
     description: "FAQ with Search Box",
     path: "previewsComponents/FUIFaqsWithSearchBox",
     codeCopy: {
       react: `
-            \nimport React from "react";\nimport * as Avatar from "@radix-ui/react-avatar";\nimport * as ContextMenu from "@radix-ui/react-context-menu";\nimport * as Dialog from "@radix-ui/react-dialog";\nimport * as Select from "@radix-ui/react-select";\nimport * as Tabs from "@radix-ui/react-tabs";\nimport * as DropdownMenu from "@radix-ui/react-dropdown-menu";\nimport { Separator } from "@/components/ui/separator";\nimport { Mail } from "lucide-react";\n\nexport default function FUIFaqsWithSearchBox() {\n  const faqsList = [\n    {\n      q: "What are some random questions to ask?",\n      a: "That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.",\n      href: "javascript:void(0)",\n    },\n    {\n      q: "Do you include common questions?",\n      a: "This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.",\n      href: "javascript:void(0)",\n    },\n    {\n      q: "Can I use this for 21 questions?",\n      a: "Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.",\n      href: "javascript:void(0)",\n    },\n    {\n      q: "Are these questions for girls or for boys?",\n      a: "The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).",\n      href: "javascript:void(0)",\n    },\n    {\n      q: "What do you wish you had more talent doing?",\n      a: "If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.",\n      href: "javascript:void(0)",\n    },\n  ];\n\n  return (\n    <section className="relative">\n      <img\n        className="absolute inset-x-0 -top-20 opacity-25 "\n        src={\n          "https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75"\n        }\n        width={1000}\n        height={1000}\n        alt="back bg"\n      />\n\n      <div className="absolute -z-1 inset-0  h-[600px] w-full bg-transparent opacity-5 bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>\n\n      <div className="pt-10 max-w-screen-xl mx-auto px-4 md:px-8">\n        <div className="space-y-5 sm:text-left sm:max-w-md sm:mr-auto">\n          <h3 className="text-gray-300 font-geist text-3xl font-extrabold sm:text-4xl">\n            How can we help?\n          </h3>\n          <p className="text-gray-100">\n            Everything you need to know about the product. Can"t find the answer\n            you’re looking for? feel free to{" "}\n            <a\n              className="text-cyan-700 font-semibold whitespace-nowrap"\n              href="javascript:void(0)"\n            >\n              contact us\n            </a>\n            .\n          </p>\n          <form\n            onSubmit={(e) => e.preventDefault()}\n            className="mx-auto sm:mx-auto "\n          >\n            <div className="relative">\n              <Mail className="w-6 h-6 text-gray-500 absolute left-3 inset-y-0 my-auto" />\n              <input\n                type="text"\n                placeholder="Enter your email"\n                className="w-full pl-12 pr-3 py-2 text-gray-200 bg-transparent outline-none border focus:border-cyan-600 shadow-sm rounded-lg"\n              />\n            </div>\n          </form>\n        </div>\n        <Separator className="h-[1px] bg-white/10 mt-4" />\n        <div className="mt-12">\n          <ul className="space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3">\n            {faqsList.map((item, idx) => (\n              <li key={idx} className="space-y-3">\n                <summary className="flex items-center justify-between font-semibold text-gray-500">\n                  {item.q}\n                </summary>\n                <p\n                  dangerouslySetInnerHTML={{ __html: item.a }}\n                  className="text-gray-200 leading-relaxed"\n                ></p>\n                <a\n                  href={item.href}\n                  className="flex items-center gap-x-1 text-sm text-cyan-600 hover:text-cyan-400 duration-150 font-medium"\n                >\n                  Read more\n                  <svg\n                    xmlns="http://www.w3.org/2000/svg"\n                    viewBox="0 0 20 20"\n                    fill="currentColor"\n                    className="w-5 h-5"\n                  >\n                    <path\n                      fillRule="evenodd"\n                      d="M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z"\n                      clipRule="evenodd"\n                    />\n                  </svg>\n                </a>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n
+      \nimport React from \"react\";\n\nexport default function FUIFaqsWithSearchBox() {\n  const faqsList = [\n    {\n      q: \"What are some random questions to ask?\",\n      a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Do you include common questions?\",\n      a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Can I use this for 21 questions?\",\n      a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Are these questions for girls or for boys?\",\n      a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"What do you wish you had more talent doing?\",\n      a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n      href: \"javascript:void(0)\",\n    },\n  ];\n\n  return (\n    <section className=\"relative\">\n      <img\n        className=\"absolute inset-x-0 -top-20 opacity-25 \"\n        src={\n          \"https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75\"\n        }\n        width={1000}\n        height={1000}\n        alt=\"back bg\"\n      />\n\n      <div className=\"absolute -z-1 inset-0  h-[600px] w-full bg-transparent opacity-5 bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div>\n\n      <div className=\"pt-10 max-w-screen-xl mx-auto px-4 md:px-8\">\n        <div className=\"space-y-5 sm:text-left sm:max-w-md sm:mr-auto\">\n          <h3 className=\"text-gray-300 font-geist text-3xl font-extrabold sm:text-4xl\">\n            How can we help?\n          </h3>\n          <p className=\"text-gray-100\">\n            Everything you need to know about the product. Can’t find the answer\n            you’re looking for? feel free to{\" \"}\n            <a\n              className=\"text-cyan-700 font-semibold whitespace-nowrap\"\n              href=\"javascript:void(0)\"\n            >\n              contact us\n            </a>\n            .\n          </p>\n          <form\n            onSubmit={(e) => e.preventDefault()}\n            className=\"mx-auto sm:mx-auto \"\n          >\n            <div className=\"relative\">\n              <Mail className=\"w-6 h-6 text-gray-500 absolute left-3 inset-y-0 my-auto\" />\n              <input\n                type=\"text\"\n                placeholder=\"Enter your email\"\n                className=\"w-full pl-12 pr-3 py-2 text-gray-200 bg-transparent outline-none border focus:border-cyan-600 shadow-sm rounded-lg\"\n              />\n            </div>\n          </form>\n        </div>\n        <Separator className=\"h-[1px] bg-white/10 mt-4\" />\n        <div className=\"mt-12\">\n          <ul className=\"space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3\">\n            {faqsList.map((item, idx) => (\n              <li key={idx} className=\"space-y-3\">\n                <summary className=\"flex items-center justify-between font-semibold text-gray-500\">\n                  {item.q}\n                </summary>\n                <p\n                  dangerouslySetInnerHTML={{ __html: item.a }}\n                  className=\"text-gray-200 leading-relaxed\"\n                ></p>\n                <a\n                  href={item.href}\n                  className=\"flex items-center gap-x-1 text-sm text-cyan-600 hover:text-cyan-400 duration-150 font-medium\"\n                >\n                  Read more\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    className=\"w-5 h-5\"\n                  >\n                    <path\n                      fillRule=\"evenodd\"\n                      d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z\"\n                      clipRule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n
+
      
             `,
     },
@@ -79,24 +80,24 @@ export const componentToPreview: ComponentProps = {
             `,
     },
   },
-  "639934f5-ad80-4b22-aa0f-86cc9726a658": {
+  "farmui-faq-01": {
     component: <FUIFaqsWithDividedRows />,
     description: "FAQ with divided row",
     path: "previewsComponents/FUIFaqsWithDividedRows",
     codeCopy: {
       react: `
-            \nimport React from "react";\nimport * as Avatar from "@radix-ui/react-avatar";\nimport * as ContextMenu from "@radix-ui/react-context-menu";\nimport * as Dialog from "@radix-ui/react-dialog";\nimport * as Select from "@radix-ui/react-select";\nimport * as Tabs from "@radix-ui/react-tabs";\nimport * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport { Separator } from "@/components/ui/separator";\n\nexport default function FUIFaqsWithDividedRows() {\n\n    const faqsList = [\n        {\n            q: "What are some random questions to ask?",\n            a: "That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question."\n        },\n        {\n            q: "Do you include common questions?",\n            a: "This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator."\n        },\n        {\n            q: "Can I use this for 21 questions?",\n            a: "Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated."\n        },\n        {\n            q: "Are these questions for girls or for boys?",\n            a: "The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with)."\n        },\n        {\n            q: "What do you wish you had more talent doing?",\n            a: "If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires."\n        }\n    ]\n\n    return (\n        <section className='relative'>\n            <img\n        className="absolute inset-x-0 -top-20 opacity-20 "\n        src={"https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75"}\n        width={1000}\n        height={1000}\n        alt="back bg"\n      />\n    \n            <div className="py-14 relative  max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8">\n                <div className='flex-1 '>\n                    <div className="max-w-lg">\n                        <h3 className='font-semibold text-cyan-600'>\n                            Frequently asked questions\n                        </h3>\n                        <p className='mt-3 text-gray-400 text-3xl font-extrabold sm:text-4xl'>\n                            All information you need to know\n                        </p>\n                    <Separator className="h-[1px] mt-5 bg-white/10"/>\n                    </div>\n                </div>\n                <div className='flex-1 mt-12 md:mt-0'>\n                    <ul className='space-y-4 divide-y'>\n                        {faqsList.map((item, idx) => (\n                            <li\n                                className="py-5"\n                                key={idx}>\n                                <summary\n                                    className="flex items-center justify-between font-semibold text-gray-700">\n                                    {item.q}\n                                </summary>\n                                <p\n                                    dangerouslySetInnerHTML={{ __html: item.a }}\n                                    className='mt-3 text-gray-300 leading-relaxed'>\n                                </p>\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            </div>\n        </section>\n    );\n};\n
-            
+      \nimport React from \"react\";\nexport default function FUIFaqsWithDividedRows() {\n  const faqsList = [\n    {\n      q: \"What are some random questions to ask?\",\n      a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n    },\n    {\n      q: \"Do you include common questions?\",\n      a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n    },\n    {\n      q: \"Can I use this for 21 questions?\",\n      a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n    },\n    {\n      q: \"Are these questions for girls or for boys?\",\n      a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n    },\n    {\n      q: \"What do you wish you had more talent doing?\",\n      a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n    },\n  ];\n\n  return (\n    <section className=\"relative\">\n      <img\n        className=\"absolute inset-x-0 -top-20 opacity-20 \"\n        src={\n          \"https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75\"\n        }\n        width={1000}\n        height={1000}\n        alt=\"back bg\"\n      />\n\n      <div className=\"py-14 relative  max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n        <div className=\"flex-1 \">\n          <div className=\"max-w-lg\">\n            <h3 className=\"font-semibold text-cyan-600\">\n              Frequently asked questions\n            </h3>\n            <p className=\"mt-3 text-gray-400 text-3xl font-extrabold sm:text-4xl\">\n              All information you need to know\n            </p>\n            <Separator className=\"h-[1px] mt-5 bg-white/10\" />\n          </div>\n        </div>\n        <div className=\"flex-1 mt-12 md:mt-0\">\n          <ul className=\"space-y-4 divide-y\">\n            {faqsList.map((item, idx) => (\n              <li className=\"py-5\" key={idx}>\n                <summary className=\"flex items-center justify-between font-semibold text-gray-700\">\n                  {item.q}\n                </summary>\n                <p\n                  dangerouslySetInnerHTML={{ __html: item.a }}\n                  className=\"mt-3 text-gray-300 leading-relaxed\"\n                ></p>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n            
             `,
     },
   },
-  "710053f8-34ec-41cd-8ce0-e5fdc83c631d": {
+  "farmui-hero-02": {
     component: <FUIHeroSectionWithBottomImage />,
-    description: "FAQ with divided row",
+    description: "Hero With Retro Grid",
     path: "previewsComponents/FUIHeroSectionWithBottomImage",
     codeCopy: {
       react: `
-      \nimport React from "react";\nimport * as Avatar from "@radix-ui/react-avatar";\nimport * as ContextMenu from "@radix-ui/react-context-menu";\nimport * as Dialog from "@radix-ui/react-dialog";\nimport * as Select from "@radix-ui/react-select";\nimport * as Tabs from "@radix-ui/react-tabs";\nimport * as DropdownMenu from "@radix-ui/react-dropdown-menu";\nimport { ChevronRight } from "lucide-react";\nimport RetroGrid from "components/ui/Grid";\n\nexport default function FUIHeroSectionWithBottomImage() {\n  return (\n    <div className="relative">\n      <div class="absolute top-0 z-[0] h-screen w-screen bg-purple-950/10 bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>\n      <section className="relative max-w-full mx-auto  z-1">\n        <RetroGrid />\n\n        <div className="max-w-screen-xl z-10 mx-auto px-4 py-28 gap-12 text-gray-600 md:px-8">\n          <div className="space-y-5 max-w-3xl leading-0  lg:leading-5 mx-auto text-center">\n            <h1 className="text-sm text-gray-400 group font-geist mx-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit">\n              Build products for everyone\n              <ChevronRight className="inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300" />\n            </h1>\n\n            <h2 className="text-4xl tracking-tighter font-geist  bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] text-transparent   mx-auto md:text-6xl">\n              Designing your projects faster with{" "}\n              <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-orange-200">\n                the largest figma UI kit.\n              </span>\n            </h2>\n\n            <p className="max-w-2xl mx-auto text-gray-300">\n              Sed ut perspiciatis unde omnis iste natus voluptatem accusantium\n              doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n            </p>\n            <div className="items-center  justify-center gap-x-3 space-y-3 sm:flex sm:space-y-0">\n            <span className='relative inline-block overflow-hidden rounded-full p-[1.5px]'>\n      <span className='absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]' />\n      <div className='inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-gray-950  text-xs font-medium text-gray-50 backdrop-blur-3xl'>\n              <a\n                href="javascript:void(0)"\n                className="inline-flex rounded-full text-center group items-center w-full justify-center   bg-gradient-to-tr from-zinc-300/5 via-purple-400/20 to-transparent    text-white border-input border-[1px] hover:bg-transparent/90 transition-colors sm:w-auto py-4 px-10"\n              >\n                Browse courses\n              </a>\n      </div>\n    </span>\n            \n            </div>\n          </div>\n          <div className="mt-32 mx-10">\n            <img\n              src="https://farmui.vercel.app/dashboard.png"\n              className="w-full shadow-lg rounded-lg border"\n              alt=""\n            />\n          </div>\n        </div>\n      </section>\n    </div>\n  );\n}\n\n\n            
+      \nimport React from \"react\";\nimport RetroGrid from \"components/ui/Grid\";\n\nexport default function FUIHeroSectionWithBottomImage() {\n  return (\n    <div className=\"relative\">\n      <div class=\"absolute top-0 z-[0] h-screen w-screen bg-purple-950/10 bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\"></div>\n      <section className=\"relative max-w-full mx-auto  z-1\">\n        <RetroGrid />\n\n        <div className=\"max-w-screen-xl z-10 mx-auto px-4 py-28 gap-12 text-gray-600 md:px-8\">\n          <div className=\"space-y-5 max-w-3xl leading-0  lg:leading-5 mx-auto text-center\">\n            <h1 className=\"text-sm text-gray-400 group font-geist mx-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit\">\n              Build products for everyone\n              <ChevronRight className=\"inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n            </h1>\n\n            <h2 className=\"text-4xl tracking-tighter font-geist  bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] text-transparent   mx-auto md:text-6xl\">\n              Designing your projects faster with{\" \"}\n              <span className=\"text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-orange-200\">\n                the largest figma UI kit.\n              </span>\n            </h2>\n\n            <p className=\"max-w-2xl mx-auto text-gray-300\">\n              Sed ut perspiciatis unde omnis iste natus voluptatem accusantium\n              doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n            </p>\n            <div className=\"items-center  justify-center gap-x-3 space-y-3 sm:flex sm:space-y-0\">\n              <span className=\"relative inline-block overflow-hidden rounded-full p-[1.5px]\">\n                <span className=\"absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]\" />\n                <div className=\"inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-gray-950  text-xs font-medium text-gray-50 backdrop-blur-3xl\">\n                  <a\n                    href=\"javascript:void(0)\"\n                    className=\"inline-flex rounded-full text-center group items-center w-full justify-center   bg-gradient-to-tr from-zinc-300/5 via-purple-400/20 to-transparent    text-white border-input border-[1px] hover:bg-transparent/90 transition-colors sm:w-auto py-4 px-10\"\n                  >\n                    Browse courses\n                  </a>\n                </div>\n              </span>\n            </div>\n          </div>\n          <div className=\"mt-32 mx-10\">\n            <img\n              src=\"https://farmui.vercel.app/dashboard.png\"\n              className=\"w-full shadow-lg rounded-lg border\"\n              alt=\"\"\n            />\n          </div>\n        </div>\n      </section>\n    </div>\n  );\n}\n\n
+
             `,
     },
   },

From 4336ed1ae1281d41bcfd92e902473047ff00174a Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Fri, 31 May 2024 16:35:16 +0300
Subject: [PATCH 06/12] fix: slug for pkg missed

---
 apps/api/constants/components.json            | 32 +++++++----
 .../componentsDB/faqs/faqs-86cc9726a658.mdx   |  2 +-
 .../hero-section/hero-section-102.mdx         |  4 +-
 apps/www/demo/faqs-7c1180404b4e.mdx           |  2 +-
 apps/www/demo/faqs-86cc9726a658.mdx           |  2 +-
 .../FUIFaqsWithDividedRows.jsx                |  1 +
 .../FUIFaqsWithSearchBox.jsx                  |  4 +-
 .../FUIHeroSectionWithBottomImage.jsx         |  1 +
 .../viewport/components/reactComponents.tsx   | 57 ++++++++-----------
 9 files changed, 55 insertions(+), 50 deletions(-)

diff --git a/apps/api/constants/components.json b/apps/api/constants/components.json
index b0675163..6413a296 100644
--- a/apps/api/constants/components.json
+++ b/apps/api/constants/components.json
@@ -23,12 +23,7 @@
     "id": "farmui-hero-01",
     "name": "FUIHeroLogoCompany",
     "dependencies": [
-      "@radix-ui/react-avatar",
-      "@radix-ui/react-context-menu",
-      "@radix-ui/react-dialog",
-      "@radix-ui/react-select",
-      "@radix-ui/react-tabs",
-      "@radix-ui/react-dropdown-menu",
+ 
       "lucide-react"
     ],
     "files": [
@@ -133,12 +128,6 @@
     "id": "farmui-faq-00",
     "name": "FUIFaqsWithSearchBox",
     "dependencies": [
-      "@radix-ui/react-avatar",
-      "@radix-ui/react-context-menu",
-      "@radix-ui/react-dialog",
-      "@radix-ui/react-select",
-      "@radix-ui/react-tabs",
-      "@radix-ui/react-dropdown-menu",
       "lucide-react"
     ],
     "files": [
@@ -174,5 +163,24 @@
       }
     ],
     "type": "ui"
+  },
+  {
+    "id": "farmui-retro-grid",
+    "name": "RetroGrid",
+    "dependencies": ["tailwind-merge"],
+    "files": [
+      {
+        "root": {
+          "name": "RetroGrid",
+          "contents": [
+            {
+              "code_for": "react",
+              "content": "\nimport { cn } from \"@/lib/utils\";\n\nexport default function RetroGrid({ className }: { className?: string }) {\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute h-full w-full overflow-hidden opacity-50 [perspective:200px]\",\n        className,\n      )}\n    >\n      {/* Grid */}\n      <div className=\"absolute inset-0 [transform:rotateX(35deg)]\">\n        <div\n          className={cn(\n            \"animate-grid\",\n            \"[background-repeat:repeat] [background-size:120px_120px] [height:300vh] [inset:0%_0px] [margin-left:-50%] [transform-origin:100%_0_0] [width:600vw]\",\n            \"[background-image:linear-gradient(to_right,rgba(0,0,0,0.2)_1px,transparent_0),linear-gradient(to_bottom,rgba(0,0,0,0.3)_1px,transparent_0)]\",\n            \"dark:[background-image:linear-gradient(to_right,rgba(255,255,255,0.25)_1px,transparent_0),linear-gradient(to_bottom,rgba(255,255,255,0.2)_1px,transparent_0)]\",\n          )}\n        />\n      </div>\n\n      {/* Background Gradient */}\n      <div className=\"absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black\" />\n    </div>\n  );\n}\n\n\n              "
+            }
+          ]
+        }
+      }
+    ],
+    "type": "component"
   }
 ]
diff --git a/apps/www/componentsDB/faqs/faqs-86cc9726a658.mdx b/apps/www/componentsDB/faqs/faqs-86cc9726a658.mdx
index 978f81cc..182e9a7a 100644
--- a/apps/www/componentsDB/faqs/faqs-86cc9726a658.mdx
+++ b/apps/www/componentsDB/faqs/faqs-86cc9726a658.mdx
@@ -5,7 +5,7 @@ paid: false
 isActive: true
 ltr: {"svelte":{"svelteTail":[{"code":"<script>\n  let faqsList = [\n    {\n      q: \"What are some random questions to ask?\",\n      a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\"\n    },\n    {\n      q: \"Do you include common questions?\",\n      a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\"\n    },\n    {\n      q: \"Can I use this for 21 questions?\",\n      a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\"\n    },\n    {\n      q: \"Are these questions for girls or for boys?\",\n      a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\"\n    },\n    {\n      q: \"What do you wish you had more talent doing?\",\n      a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\"\n    }\n  ];\n</script>\n\n<section class='py-14'>\n  <div class=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n    <div class='flex-1'>\n      <div class=\"max-w-lg\">\n        <h3 class='font-semibold text-indigo-600'>\n          Frequently asked questions\n        </h3>\n        <p class='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n          All information you need to know\n        </p>\n      </div>\n    </div>\n    <div class='flex-1 mt-12 md:mt-0'>\n      <ul class='space-y-4 divide-y'>\n        {#each faqsList as item, index}\n          <li class=\"py-5\">\n            <summary class=\"flex items-center justify-between font-semibold text-gray-700\">\n              {item.q}\n            </summary>\n            <p class='mt-3 text-gray-600 leading-relaxed'>\n              {@html item.a}\n            </p>\n          </li>\n        {/each}\n      </ul>\n    </div>\n  </div>\n</section>","label":"App.svelte"}]},"html":{"htmlTail":[{"code":"<section class='py-14' x-data=\"{ faqsList: [\n    {\n        q: 'What are some random questions to ask?',\n        a: 'That\\'s exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you\\'re able to find the perfect random question.'\n    },\n    {\n        q: 'Do you include common questions?',\n        a: 'This generator doesn\\'t include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.'\n    },\n    {\n        q: 'Can I use this for 21 questions?',\n        a: 'Yes! there are two ways that you can use this question generator depending on what you\\'re after. You can indicate that you want 21 questions generated.'\n    },\n    {\n        q: 'Are these questions for girls or for boys?',\n        a: 'The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).'\n    },\n    {\n        q: 'What do you wish you had more talent doing?',\n        a: 'If you\\'ve been searching for a way to get random questions, you\\'ve landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.'\n    }\n]}\">\n    <div class=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n        <div class='flex-1'>\n            <div class=\"max-w-lg\">\n                <h3 class='font-semibold text-indigo-600'>\n                    Frequently asked questions\n                </h3>\n                <p class='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n                    All information you need to know\n                </p>\n            </div>\n        </div>\n        <div class='flex-1 mt-12 md:mt-0'>\n            <ul class='space-y-4 divide-y'>\n                <template x-for=\"(item, idx) in faqsList\" :key=\"idx\">\n                    <li class=\"py-5\">\n                        <summary class=\"flex items-center justify-between font-semibold text-gray-700\" x-text=\"item.q\"></summary>\n                        <p class='mt-3 text-gray-600 leading-relaxed' x-html=\"item.a\"></p>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    </div>\n</section>","label":"index.html"}]},"preview":"function App() {\n\n    const faqsList = [\n        {\n            q: \"What are some random questions to ask?\",\n            a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\"\n        },\n        {\n            q: \"Do you include common questions?\",\n            a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\"\n        },\n        {\n            q: \"Can I use this for 21 questions?\",\n            a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\"\n        },\n        {\n            q: \"Are these questions for girls or for boys?\",\n            a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\"\n        },\n        {\n            q: \"What do you wish you had more talent doing?\",\n            a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\"\n        }\n    ]\n\n    return (\n        <section className='py-14'>\n            <div className=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n                <div className='flex-1'>\n                    <div className=\"max-w-lg\">\n                        <h3 className='font-semibold text-indigo-600'>\n                            Frequently asked questions\n                        </h3>\n                        <p className='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n                            All information you need to know\n                        </p>\n                    </div>\n                </div>\n                <div className='flex-1 mt-12 md:mt-0'>\n                    <ul className='space-y-4 divide-y'>\n                        {faqsList.map((item, idx) => (\n                            <li\n                                className=\"py-5\"\n                                key={idx}>\n                                <summary\n                                    className=\"flex items-center justify-between font-semibold text-gray-700\">\n                                    {item.q}\n                                </summary>\n                                <p\n                                    dangerouslySetInnerHTML={{ __html: item.a }}\n                                    className='mt-3 text-gray-600 leading-relaxed'>\n                                </p>\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            </div>\n        </section>\n    );\n};","react":{"jsxCss":[],"jsxTail":[{"code":"export default () => {\n\n    const faqsList = [\n        {\n            q: \"What are some random questions to ask?\",\n            a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\"\n        },\n        {\n            q: \"Do you include common questions?\",\n            a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\"\n        },\n        {\n            q: \"Can I use this for 21 questions?\",\n            a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\"\n        },\n        {\n            q: \"Are these questions for girls or for boys?\",\n            a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\"\n        },\n        {\n            q: \"What do you wish you had more talent doing?\",\n            a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\"\n        }\n    ]\n\n    return (\n        <section className='py-14'>\n            <div className=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n                <div className='flex-1'>\n                    <div className=\"max-w-lg\">\n                        <h3 className='font-semibold text-indigo-600'>\n                            Frequently asked questions\n                        </h3>\n                        <p className='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n                            All information you need to know\n                        </p>\n                    </div>\n                </div>\n                <div className='flex-1 mt-12 md:mt-0'>\n                    <ul className='space-y-4 divide-y'>\n                        {faqsList.map((item, idx) => (\n                            <li\n                                className=\"py-5\"\n                                key={idx}>\n                                <summary\n                                    className=\"flex items-center justify-between font-semibold text-gray-700\">\n                                    {item.q}\n                                </summary>\n                                <p\n                                    dangerouslySetInnerHTML={{ __html: item.a }}\n                                    className='mt-3 text-gray-600 leading-relaxed'>\n                                </p>\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            </div>\n        </section>\n    );\n};","label":"App.jsx"}]},"vue":{"vueCss":[],"vueTail":[{"code":"<template>\n  <section class='py-14'>\n    <div class=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n      <div class='flex-1'>\n        <div class=\"max-w-lg\">\n          <h3 class='font-semibold text-indigo-600'>\n            Frequently asked questions\n          </h3>\n          <p class='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n            All information you need to know\n          </p>\n        </div>\n      </div>\n      <div class='flex-1 mt-12 md:mt-0'>\n        <ul class='space-y-4 divide-y'>\n          <li class=\"py-5\" v-for=\"(item, index) in faqsList\" :key=\"index\">\n            <summary class=\"flex items-center justify-between font-semibold text-gray-700\">\n              {{ item.q }}\n            </summary>\n            <p class='mt-3 text-gray-600 leading-relaxed' v-html=\"item.a\"></p>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      faqsList: [\n        {\n          q: 'What are some random questions to ask?',\n          a: 'That\\'s exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you\\'re able to find the perfect random question.'\n        },\n        {\n          q: 'Do you include common questions?',\n          a: 'This generator doesn\\'t include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.'\n        },\n        {\n          q: 'Can I use this for 21 questions?',\n          a: 'Yes! there are two ways that you can use this question generator depending on what you\\'re after. You can indicate that you want 21 questions generated.'\n        },\n        {\n          q: 'Are these questions for girls or for boys?',\n          a: 'The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).'\n        },\n        {\n          q: 'What do you wish you had more talent doing?',\n          a: 'If you\\'ve been searching for a way to get random questions, you\\'ve landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.'\n        }\n      ]\n    };\n  }\n};\n</script>\n","label":"App.vue"}]}}
 slug: /faqs
-id: "farmui-faq-01
+id: "farmui-faq-01"
 created_at: 1670156922383
 ---
 
diff --git a/apps/www/componentsDB/hero-section/hero-section-102.mdx b/apps/www/componentsDB/hero-section/hero-section-102.mdx
index c9673b6c..6b8f67fd 100644
--- a/apps/www/componentsDB/hero-section/hero-section-102.mdx
+++ b/apps/www/componentsDB/hero-section/hero-section-102.mdx
@@ -1,11 +1,11 @@
 ---
-title: Hero Section With Background Image 
+title: Hero Section With RetroGrid 
 category: Application
 paid: false
 isActive: true
 ltr: {"preview":"function App() {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}","react":{"jsxTail":[{"label":"App.jsx","code":"export default () => {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}"}],"jsxCss":[{"code":"export default () => {\n    return (\n        <div className=\"website-url-input\">\n            <label for=\"website-url\">\n                Website URL\n            </label>\n            <div className=\"input-container\">\n                <div className=\"website-protocol\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"input\"\n                />\n            </div>\n        </div>\n    )\n}\n","label":"App.jsx"},{"label":"style.css","code":".website-url-input {\n  max-width: 28rem;\n  padding: 0px 1rem 0px 1rem;\n  margin: 3rem auto 0px auto;\n}\n.website-url-input label {\n  display: block;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: #6b7280;\n}\n.website-url-input .input-container {\n  display: flex;\n  align-items: center;\n  color: #9ca3af;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n}\n.website-url-input .input-container .website-protocol {\n  padding: 0.625rem 0.75rem 0.625rem 0.75rem;\n  background-color: #f9fafb;\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n  border-right: solid 1px #e5e7eb;\n}\n.website-url-input .input-container .input {\n  width: 100%;\n  padding: 0.625rem;\n  margin-left: 0.5rem;\n  background-color: transparent;\n  outline: none;\n}\n"}]},"vue":{"vueTail":[{"code":"<template>\n  <div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block text-left py-2 text-gray-500\">\n      Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n      <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\"\n        class=\"w-full p-2.5 ml-2 bg-transparent outline-none\" />\n    </div>\n  </div>\n</template>","label":"App.vue"}],"vueCss":[{"label":"App.vue","code":"<template>\n  <div class=\"input-container\">\n    <label for=\"website-url\" class=\"input-label\">\n      Website URL\n    </label>\n    <div class=\"input-parent\">\n      <div class=\"left-input bg-gray-50\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\" class=\"website-url\" />\n    </div>\n  </div>\n</template>"},{"code":"  .input-container {\n    max-width: 28rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\n    margin-left: auto;\n    margin-right: auto;\n    margin-top: 3rem;\n  }\n  .input-label {\n    color: #6b7280;\n    text-align: left;\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n    display: block;\n  }\n  .input-parent {\n    border-radius: 0.375rem;\n    display: flex;\n    align-items: center;\n    color: #9ca3af;\n    border-width: 1px;\n  }\n  .left-input {\n    padding-top: 0.625rem;\n    padding-bottom: 0.625rem;\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n    border-right-width: 1px;\n    border-top-left-radius: 0.375rem;\n    border-bottom-left-radius: 0.375rem;\n    background-color: #f9fafb;\n  }\n  .website-url {\n    padding: 0.625rem;\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n    background-color: transparent;\n    width: 100%;\n    margin-left: 0.5rem;\n  }","label":"style.css"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block py-2 text-gray-500\">\n        Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n        <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n            https://\n        </div>\n        <input \n            type=\"text\"\n            placeholder=\"www.example.com\"\n            id=\"website-url\"\n            class=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n        />\n    </div>\n</div>\n"}]}}
 slug: /hero-section
-id: "710053f8-34ec-41cd-8ce0-e5fdc83c631d"
+id: "farmui-hero-02"
 created_at: 1
 ---
 
diff --git a/apps/www/demo/faqs-7c1180404b4e.mdx b/apps/www/demo/faqs-7c1180404b4e.mdx
index 3374907e..272fa65b 100644
--- a/apps/www/demo/faqs-7c1180404b4e.mdx
+++ b/apps/www/demo/faqs-7c1180404b4e.mdx
@@ -5,7 +5,7 @@ paid: false
 isActive: true
 ltr: {"html":{"htmlTail":[{"label":"index.html","code":"<div\n  x-data=\"{ faqsList: [\n  {\n      q: 'What are some random questions to ask?',\n      a: 'That\\'s exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you\\'re able to find the perfect random question.',\n      href: 'javascript:void(0)'\n  },\n  {\n      q: 'Do you include common questions?',\n      a: 'This generator doesn\\'t include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.',\n      href: 'javascript:void(0)'\n  },\n  {\n      q: 'Can I use this for 21 questions?',\n      a: 'Yes! there are two ways that you can use this question generator depending on what you\\'re after. You can indicate that you want 21 questions generated.',\n      href: 'javascript:void(0)'\n  },\n  {\n      q: 'Are these questions for girls or for boys?',\n      a: 'The questions in this generator are gender neutral and can be used to ask either male or females (or any other gender the person identifies with).',\n      href: 'javascript:void(0)'\n  },\n  {\n      q: 'What do you wish you had more talent doing?',\n      a: 'If you\\'ve been searching for a way to get random questions, you\\'ve landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.',\n      href: 'javascript:void(0)'\n  }\n] }\"\n>\n  <section class=\"py-14\">\n    <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n      <div class=\"space-y-5 sm:text-center sm:max-w-md sm:mx-auto\">\n        <h3 class=\"text-gray-800 text-3xl font-extrabold sm:text-4xl\">\n          How can we help?\n        </h3>\n        <p class=\"text-gray-600\">\n          Everything you need to know about the product. Can’t find the\n          answer you’re looking for? feel free to\n          <a\n            class=\"text-indigo-600 font-semibold whitespace-nowrap\"\n            href=\"javascript:void(0)\"\n          >\n            contact us </a\n          >.\n        </p>\n        <form @submit.prevent=\"\" class=\"mx-auto sm:max-w-xs\">\n          <div class=\"relative\">\n            <svg\n              class=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n            <input\n              type=\"text\"\n              placeholder=\"Enter your email\"\n              class=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n            />\n          </div>\n        </form>\n      </div>\n      <div class=\"mt-12\">\n        <ul\n          class=\"space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3\"\n        >\n          <template x-for=\"(item, index) in faqsList\" :key=\"index\">\n            <li class=\"space-y-3\">\n              <summary\n                class=\"flex items-center justify-between font-semibold text-gray-700\"\n                x-text=\"item.q\"\n              ></summary>\n              <p class=\"text-gray-600 leading-relaxed\" x-html=\"item.a\"></p>\n              <a\n                :href=\"item.href\"\n                class=\"flex items-center gap-x-1 text-sm text-indigo-600 hover:text-indigo-400 duration-150 font-medium\"\n              >\n                Read more\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"h-5 w-5\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M13 7l5 5m0 0l-5 5m5-5H6\"\n                  />\n                </svg>\n              </a>\n            </li>\n          </template>\n        </ul>\n      </div>\n    </div>\n  </section>\n</div>"}]},"react":{"jsxCss":[],"jsxTail":[{"code":"export default () => {\n\n    const faqsList = [\n        {\n            q: \"What are some random questions to ask?\",\n            a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Do you include common questions?\",\n            a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Can I use this for 21 questions?\",\n            a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Are these questions for girls or for boys?\",\n            a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"What do you wish you had more talent doing?\",\n            a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n            href: \"javascript:void(0)\",\n        }\n    ]\n\n    return (\n        <section className='py-14'>\n            <div className=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n                <div className=\"space-y-5 sm:text-center sm:max-w-md sm:mx-auto\">\n                    <h3 className=\"text-gray-800 text-3xl font-extrabold sm:text-4xl\">\n                        How can we help?\n                    </h3>\n                    <p className=\"text-gray-600\">\n                        Everything you need to know about the product. Can’t find the answer you’re looking for? feel free to {\" \"}\n                        <a\n                            className='text-indigo-600 font-semibold whitespace-nowrap'\n                            href='javascript:void(0)'>\n                            contact us\n                        </a>.\n                    </p>\n                    <form onSubmit={(e) => e.preventDefault()} className=\"mx-auto sm:max-w-xs\">\n                        <div className=\"relative\">\n                            <svg className=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                <path fillRule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clipRule=\"evenodd\" />\n                            </svg>\n                            <input\n                                type=\"text\"\n                                placeholder=\"Enter your email\"\n                                className=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n                            />\n                        </div>\n                    </form>\n                </div>\n                <div className='mt-12'>\n                    <ul className='space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3'>\n                        {faqsList.map((item, idx) => (\n                            <li\n                                key={idx}\n                                className=\"space-y-3\"\n                            >\n                                <summary\n                                    className=\"flex items-center justify-between font-semibold text-gray-700\">\n                                    {item.q}\n                                </summary>\n                                <p\n                                    dangerouslySetInnerHTML={{ __html: item.a }}\n                                    className='text-gray-600 leading-relaxed'>\n                                </p>\n                                <a href={item.href} className=\"flex items-center gap-x-1 text-sm text-indigo-600 hover:text-indigo-400 duration-150 font-medium\">\n                                    Read more\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5\">\n                                        <path fillRule=\"evenodd\" d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z\" clipRule=\"evenodd\" />\n                                    </svg>\n                                </a>\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            </div>\n        </section>\n    );\n};","label":"App.jsx"}]},"svelte":{"svelteTail":[{"label":"App.svelte","code":"<script>\n  let faqsList = [\n    {\n      q: \"What are some random questions to ask?\",\n      a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Do you include common questions?\",\n      a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Can I use this for 21 questions?\",\n      a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Are these questions for girls or for boys?\",\n      a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"What do you wish you had more talent doing?\",\n      a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n      href: \"javascript:void(0)\",\n    }\n  ];\n</script>\n\n<section class='py-14'>\n  <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n    <div class=\"space-y-5 sm:text-center sm:max-w-md sm:mx-auto\">\n      <h3 class=\"text-gray-800 text-3xl font-extrabold sm:text-4xl\">\n        How can we help?\n      </h3>\n      <p class=\"text-gray-600\">\n        Everything you need to know about the product. Can’t find the answer you’re looking for? feel free to\n        <a class='text-indigo-600 font-semibold whitespace-nowrap' href='javascript:void(0)'>\n          contact us\n        </a>.\n      </p>\n      <form on:submit|preventDefault class=\"mx-auto sm:max-w-xs\">\n        <div class=\"relative\">\n          <svg class=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path fill-rule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clip-rule=\"evenodd\" />\n          </svg>\n          <input\n            type=\"text\"\n            placeholder=\"Enter your email\"\n            class=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n          />\n        </div>\n      </form>\n    </div>\n    <div class='mt-12'>\n      <ul class='space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3'>\n        {#each faqsList as item (item.q)}\n          <li class=\"space-y-3\">\n            <summary class=\"flex items-center justify-between font-semibold text-gray-700\">\n              {item.q}\n            </summary>\n            <p class='text-gray-600 leading-relaxed'>{@html item.a}</p>\n            <a href={item.href} class=\"flex items-center gap-x-1 text-sm text-indigo-600 hover:text-indigo-400 duration-150 font-medium\">\n              Read more\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"w-5 h-5\">\n                <path fill-rule=\"evenodd\" d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-2.01H5.75A.75.75 0 015 10z\" clip-rule=\"evenodd\" />\n              </svg>\n            </a>\n          </li>\n        {/each}\n      </ul>\n    </div>\n  </div>\n</section>"}]},"preview":"function App() {\n\n    const faqsList = [\n        {\n            q: \"What are some random questions to ask?\",\n            a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Do you include common questions?\",\n            a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Can I use this for 21 questions?\",\n            a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Are these questions for girls or for boys?\",\n            a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"What do you wish you had more talent doing?\",\n            a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n            href: \"javascript:void(0)\",\n        }\n    ]\n\n    return (\n        <section className='py-14'>\n            <div className=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n                <div className=\"space-y-5 sm:text-center sm:max-w-md sm:mx-auto\">\n                    <h3 className=\"text-gray-800 text-3xl font-extrabold sm:text-4xl\">\n                        How can we help?\n                    </h3>\n                    <p className=\"text-gray-600\">\n                        Everything you need to know about the product. Can’t find the answer you’re looking for? feel free to {\" \"}\n                        <a\n                            className='text-indigo-600 font-semibold whitespace-nowrap'\n                            href='javascript:void(0)'>\n                            contact us\n                        </a>.\n                    </p>\n                    <form onSubmit={(e) => e.preventDefault()} className=\"mx-auto sm:max-w-xs\">\n                        <div className=\"relative\">\n                            <svg className=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                <path fillRule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clipRule=\"evenodd\" />\n                            </svg>\n                            <input\n                                type=\"text\"\n                                placeholder=\"Enter your email\"\n                                className=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n                            />\n                        </div>\n                    </form>\n                </div>\n                <div className='mt-12'>\n                    <ul className='space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3'>\n                        {faqsList.map((item, idx) => (\n                            <li\n                                key={idx}\n                                className=\"space-y-3\"\n                            >\n                                <summary\n                                    className=\"flex items-center justify-between font-semibold text-gray-700\">\n                                    {item.q}\n                                </summary>\n                                <p\n                                    dangerouslySetInnerHTML={{ __html: item.a }}\n                                    className='text-gray-600 leading-relaxed'>\n                                </p>\n                                <a href={item.href} className=\"flex items-center gap-x-1 text-sm text-indigo-600 hover:text-indigo-400 duration-150 font-medium\">\n                                    Read more\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5\">\n                                        <path fillRule=\"evenodd\" d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z\" clipRule=\"evenodd\" />\n                                    </svg>\n                                </a>\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            </div>\n        </section>\n    );\n};","vue":{"vueCss":[],"vueTail":[{"code":"<template>\n  <section class='py-14'>\n    <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n      <div class=\"space-y-5 sm:text-center sm:max-w-md sm:mx-auto\">\n        <h3 class=\"text-gray-800 text-3xl font-extrabold sm:text-4xl\">\n          How can we help?\n        </h3>\n        <p class=\"text-gray-600\">\n          Everything you need to know about the product. Can’t find the answer you’re looking for? feel free to\n          <a class='text-indigo-600 font-semibold whitespace-nowrap' href='javascript:void(0)'>\n            contact us\n          </a>.\n        </p>\n        <form @submit.prevent=\"\" class=\"mx-auto sm:max-w-xs\">\n          <div class=\"relative\">\n            <svg\n              class=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n            <input type=\"text\" placeholder=\"Enter your email\" class=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\" />\n          </div>\n        </form>\n      </div>\n      <div class='mt-12'>\n        <ul class='space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3'>\n          <li v-for=\"(item, index) in faqsList\" :key=\"index\" class=\"space-y-3\">\n            <summary class=\"flex items-center justify-between font-semibold text-gray-700\">\n              {{ item.q }}\n            </summary>\n            <p v-html=\"item.a\" class=\"text-gray-600 leading-relaxed\"></p>\n            <a :href=\"item.href\" class=\"flex items-center gap-x-1 text-sm text-indigo-600 hover:text-indigo-400 duration-150 font-medium\">\n              Read more\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 7l5 5m0 0l-5 5m5-5H6\"/>\n              </svg>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      faqsList: [\n        {\n          q: \"What are some random questions to ask?\",\n          a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n          href: \"javascript:void(0)\",\n        },\n        {\n          q: \"Do you include common questions?\",\n          a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n          href: \"javascript:void(0)\",\n        },\n        {\n          q: \"Can I use this for 21 questions?\",\n          a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n          href: \"javascript:void(0)\",\n        },\n        {\n          q: \"Are these questions for girls or for boys?\",\n          a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n          href: \"javascript:void(0)\",\n        },\n        {\n          q: \"What do you wish you had more talent doing?\",\n          a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n          href: \"javascript:void(0)\",\n        }\n      ],\n    }\n  },\n}\n</script>","label":"App.vue"}]}}
 slug: /faqs
-id: bb87ffac-1579-4670-80be-7c1180404b4e
+id: "farmui-faq-00"
 created_at: 1670157220758
 ---
 
diff --git a/apps/www/demo/faqs-86cc9726a658.mdx b/apps/www/demo/faqs-86cc9726a658.mdx
index ea2d1bc3..182e9a7a 100644
--- a/apps/www/demo/faqs-86cc9726a658.mdx
+++ b/apps/www/demo/faqs-86cc9726a658.mdx
@@ -5,7 +5,7 @@ paid: false
 isActive: true
 ltr: {"svelte":{"svelteTail":[{"code":"<script>\n  let faqsList = [\n    {\n      q: \"What are some random questions to ask?\",\n      a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\"\n    },\n    {\n      q: \"Do you include common questions?\",\n      a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\"\n    },\n    {\n      q: \"Can I use this for 21 questions?\",\n      a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\"\n    },\n    {\n      q: \"Are these questions for girls or for boys?\",\n      a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\"\n    },\n    {\n      q: \"What do you wish you had more talent doing?\",\n      a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\"\n    }\n  ];\n</script>\n\n<section class='py-14'>\n  <div class=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n    <div class='flex-1'>\n      <div class=\"max-w-lg\">\n        <h3 class='font-semibold text-indigo-600'>\n          Frequently asked questions\n        </h3>\n        <p class='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n          All information you need to know\n        </p>\n      </div>\n    </div>\n    <div class='flex-1 mt-12 md:mt-0'>\n      <ul class='space-y-4 divide-y'>\n        {#each faqsList as item, index}\n          <li class=\"py-5\">\n            <summary class=\"flex items-center justify-between font-semibold text-gray-700\">\n              {item.q}\n            </summary>\n            <p class='mt-3 text-gray-600 leading-relaxed'>\n              {@html item.a}\n            </p>\n          </li>\n        {/each}\n      </ul>\n    </div>\n  </div>\n</section>","label":"App.svelte"}]},"html":{"htmlTail":[{"code":"<section class='py-14' x-data=\"{ faqsList: [\n    {\n        q: 'What are some random questions to ask?',\n        a: 'That\\'s exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you\\'re able to find the perfect random question.'\n    },\n    {\n        q: 'Do you include common questions?',\n        a: 'This generator doesn\\'t include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.'\n    },\n    {\n        q: 'Can I use this for 21 questions?',\n        a: 'Yes! there are two ways that you can use this question generator depending on what you\\'re after. You can indicate that you want 21 questions generated.'\n    },\n    {\n        q: 'Are these questions for girls or for boys?',\n        a: 'The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).'\n    },\n    {\n        q: 'What do you wish you had more talent doing?',\n        a: 'If you\\'ve been searching for a way to get random questions, you\\'ve landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.'\n    }\n]}\">\n    <div class=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n        <div class='flex-1'>\n            <div class=\"max-w-lg\">\n                <h3 class='font-semibold text-indigo-600'>\n                    Frequently asked questions\n                </h3>\n                <p class='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n                    All information you need to know\n                </p>\n            </div>\n        </div>\n        <div class='flex-1 mt-12 md:mt-0'>\n            <ul class='space-y-4 divide-y'>\n                <template x-for=\"(item, idx) in faqsList\" :key=\"idx\">\n                    <li class=\"py-5\">\n                        <summary class=\"flex items-center justify-between font-semibold text-gray-700\" x-text=\"item.q\"></summary>\n                        <p class='mt-3 text-gray-600 leading-relaxed' x-html=\"item.a\"></p>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    </div>\n</section>","label":"index.html"}]},"preview":"function App() {\n\n    const faqsList = [\n        {\n            q: \"What are some random questions to ask?\",\n            a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\"\n        },\n        {\n            q: \"Do you include common questions?\",\n            a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\"\n        },\n        {\n            q: \"Can I use this for 21 questions?\",\n            a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\"\n        },\n        {\n            q: \"Are these questions for girls or for boys?\",\n            a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\"\n        },\n        {\n            q: \"What do you wish you had more talent doing?\",\n            a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\"\n        }\n    ]\n\n    return (\n        <section className='py-14'>\n            <div className=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n                <div className='flex-1'>\n                    <div className=\"max-w-lg\">\n                        <h3 className='font-semibold text-indigo-600'>\n                            Frequently asked questions\n                        </h3>\n                        <p className='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n                            All information you need to know\n                        </p>\n                    </div>\n                </div>\n                <div className='flex-1 mt-12 md:mt-0'>\n                    <ul className='space-y-4 divide-y'>\n                        {faqsList.map((item, idx) => (\n                            <li\n                                className=\"py-5\"\n                                key={idx}>\n                                <summary\n                                    className=\"flex items-center justify-between font-semibold text-gray-700\">\n                                    {item.q}\n                                </summary>\n                                <p\n                                    dangerouslySetInnerHTML={{ __html: item.a }}\n                                    className='mt-3 text-gray-600 leading-relaxed'>\n                                </p>\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            </div>\n        </section>\n    );\n};","react":{"jsxCss":[],"jsxTail":[{"code":"export default () => {\n\n    const faqsList = [\n        {\n            q: \"What are some random questions to ask?\",\n            a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\"\n        },\n        {\n            q: \"Do you include common questions?\",\n            a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\"\n        },\n        {\n            q: \"Can I use this for 21 questions?\",\n            a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\"\n        },\n        {\n            q: \"Are these questions for girls or for boys?\",\n            a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\"\n        },\n        {\n            q: \"What do you wish you had more talent doing?\",\n            a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\"\n        }\n    ]\n\n    return (\n        <section className='py-14'>\n            <div className=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n                <div className='flex-1'>\n                    <div className=\"max-w-lg\">\n                        <h3 className='font-semibold text-indigo-600'>\n                            Frequently asked questions\n                        </h3>\n                        <p className='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n                            All information you need to know\n                        </p>\n                    </div>\n                </div>\n                <div className='flex-1 mt-12 md:mt-0'>\n                    <ul className='space-y-4 divide-y'>\n                        {faqsList.map((item, idx) => (\n                            <li\n                                className=\"py-5\"\n                                key={idx}>\n                                <summary\n                                    className=\"flex items-center justify-between font-semibold text-gray-700\">\n                                    {item.q}\n                                </summary>\n                                <p\n                                    dangerouslySetInnerHTML={{ __html: item.a }}\n                                    className='mt-3 text-gray-600 leading-relaxed'>\n                                </p>\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            </div>\n        </section>\n    );\n};","label":"App.jsx"}]},"vue":{"vueCss":[],"vueTail":[{"code":"<template>\n  <section class='py-14'>\n    <div class=\"max-w-screen-xl mx-auto px-4 gap-12 md:flex md:px-8\">\n      <div class='flex-1'>\n        <div class=\"max-w-lg\">\n          <h3 class='font-semibold text-indigo-600'>\n            Frequently asked questions\n          </h3>\n          <p class='mt-3 text-gray-800 text-3xl font-extrabold sm:text-4xl'>\n            All information you need to know\n          </p>\n        </div>\n      </div>\n      <div class='flex-1 mt-12 md:mt-0'>\n        <ul class='space-y-4 divide-y'>\n          <li class=\"py-5\" v-for=\"(item, index) in faqsList\" :key=\"index\">\n            <summary class=\"flex items-center justify-between font-semibold text-gray-700\">\n              {{ item.q }}\n            </summary>\n            <p class='mt-3 text-gray-600 leading-relaxed' v-html=\"item.a\"></p>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      faqsList: [\n        {\n          q: 'What are some random questions to ask?',\n          a: 'That\\'s exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you\\'re able to find the perfect random question.'\n        },\n        {\n          q: 'Do you include common questions?',\n          a: 'This generator doesn\\'t include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.'\n        },\n        {\n          q: 'Can I use this for 21 questions?',\n          a: 'Yes! there are two ways that you can use this question generator depending on what you\\'re after. You can indicate that you want 21 questions generated.'\n        },\n        {\n          q: 'Are these questions for girls or for boys?',\n          a: 'The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).'\n        },\n        {\n          q: 'What do you wish you had more talent doing?',\n          a: 'If you\\'ve been searching for a way to get random questions, you\\'ve landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.'\n        }\n      ]\n    };\n  }\n};\n</script>\n","label":"App.vue"}]}}
 slug: /faqs
-id: 639934f5-ad80-4b22-aa0f-86cc9726a658
+id: "farmui-faq-01"
 created_at: 1670156922383
 ---
 
diff --git a/apps/www/previewsComponents/FUIFaqsWithDividedRows.jsx b/apps/www/previewsComponents/FUIFaqsWithDividedRows.jsx
index 1cbb8fc0..a5cb19f4 100644
--- a/apps/www/previewsComponents/FUIFaqsWithDividedRows.jsx
+++ b/apps/www/previewsComponents/FUIFaqsWithDividedRows.jsx
@@ -1,3 +1,4 @@
+import { Separator } from "@radix-ui/react-context-menu";
 import React from "react";
 export default function FUIFaqsWithDividedRows() {
   const faqsList = [
diff --git a/apps/www/previewsComponents/FUIFaqsWithSearchBox.jsx b/apps/www/previewsComponents/FUIFaqsWithSearchBox.jsx
index efb6d2ac..3697ddc4 100644
--- a/apps/www/previewsComponents/FUIFaqsWithSearchBox.jsx
+++ b/apps/www/previewsComponents/FUIFaqsWithSearchBox.jsx
@@ -1,3 +1,5 @@
+import { Separator } from "@/components/ui/separator";
+import { Mail } from "lucide-react";
 import React from "react";
 
 export default function FUIFaqsWithSearchBox() {
@@ -24,7 +26,7 @@ export default function FUIFaqsWithSearchBox() {
     },
     {
       q: "What do you wish you had more talent doing?",
-      a: "If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.",
+    a: "If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.",
       href: "javascript:void(0)",
     },
   ];
diff --git a/apps/www/previewsComponents/FUIHeroSectionWithBottomImage.jsx b/apps/www/previewsComponents/FUIHeroSectionWithBottomImage.jsx
index 0c61f5b5..e5de041a 100644
--- a/apps/www/previewsComponents/FUIHeroSectionWithBottomImage.jsx
+++ b/apps/www/previewsComponents/FUIHeroSectionWithBottomImage.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import RetroGrid from "components/ui/Grid";
+import { ChevronRight } from "lucide-react";
 
 export default function FUIHeroSectionWithBottomImage() {
   return (
diff --git a/apps/www/viewport/components/reactComponents.tsx b/apps/www/viewport/components/reactComponents.tsx
index a96e6714..a87cd024 100644
--- a/apps/www/viewport/components/reactComponents.tsx
+++ b/apps/www/viewport/components/reactComponents.tsx
@@ -30,31 +30,14 @@ export const componentToPreview: ComponentProps = {
             `,
     },
   },
-  "farmui-faq-00": {
-    component: <FUIFaqsWithSearchBox />,
-    description: "FAQ with Search Box",
-    path: "previewsComponents/FUIFaqsWithSearchBox",
-    codeCopy: {
-      react: `
-      \nimport React from \"react\";\n\nexport default function FUIFaqsWithSearchBox() {\n  const faqsList = [\n    {\n      q: \"What are some random questions to ask?\",\n      a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Do you include common questions?\",\n      a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Can I use this for 21 questions?\",\n      a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Are these questions for girls or for boys?\",\n      a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"What do you wish you had more talent doing?\",\n      a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n      href: \"javascript:void(0)\",\n    },\n  ];\n\n  return (\n    <section className=\"relative\">\n      <img\n        className=\"absolute inset-x-0 -top-20 opacity-25 \"\n        src={\n          \"https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75\"\n        }\n        width={1000}\n        height={1000}\n        alt=\"back bg\"\n      />\n\n      <div className=\"absolute -z-1 inset-0  h-[600px] w-full bg-transparent opacity-5 bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div>\n\n      <div className=\"pt-10 max-w-screen-xl mx-auto px-4 md:px-8\">\n        <div className=\"space-y-5 sm:text-left sm:max-w-md sm:mr-auto\">\n          <h3 className=\"text-gray-300 font-geist text-3xl font-extrabold sm:text-4xl\">\n            How can we help?\n          </h3>\n          <p className=\"text-gray-100\">\n            Everything you need to know about the product. Can’t find the answer\n            you’re looking for? feel free to{\" \"}\n            <a\n              className=\"text-cyan-700 font-semibold whitespace-nowrap\"\n              href=\"javascript:void(0)\"\n            >\n              contact us\n            </a>\n            .\n          </p>\n          <form\n            onSubmit={(e) => e.preventDefault()}\n            className=\"mx-auto sm:mx-auto \"\n          >\n            <div className=\"relative\">\n              <Mail className=\"w-6 h-6 text-gray-500 absolute left-3 inset-y-0 my-auto\" />\n              <input\n                type=\"text\"\n                placeholder=\"Enter your email\"\n                className=\"w-full pl-12 pr-3 py-2 text-gray-200 bg-transparent outline-none border focus:border-cyan-600 shadow-sm rounded-lg\"\n              />\n            </div>\n          </form>\n        </div>\n        <Separator className=\"h-[1px] bg-white/10 mt-4\" />\n        <div className=\"mt-12\">\n          <ul className=\"space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3\">\n            {faqsList.map((item, idx) => (\n              <li key={idx} className=\"space-y-3\">\n                <summary className=\"flex items-center justify-between font-semibold text-gray-500\">\n                  {item.q}\n                </summary>\n                <p\n                  dangerouslySetInnerHTML={{ __html: item.a }}\n                  className=\"text-gray-200 leading-relaxed\"\n                ></p>\n                <a\n                  href={item.href}\n                  className=\"flex items-center gap-x-1 text-sm text-cyan-600 hover:text-cyan-400 duration-150 font-medium\"\n                >\n                  Read more\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    className=\"w-5 h-5\"\n                  >\n                    <path\n                      fillRule=\"evenodd\"\n                      d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z\"\n                      clipRule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n
-
-     
-            `,
-    },
-  },
-
+  
   "farmui-hero-00": {
     component: <FUIHeroWithGrid />,
     description: "Hero Section With Grid",
     path: "previewsComponents/FUIHeroWithGrid",
     codeCopy: {
       react: `
-      \nimport LinkItem from \"components/ui/LinkItem\";\nimport { IconGithub } from \"components/icons\";\nimport { ChevronRight } from \"lucide-react\";\nimport HeroAnimated from \"components/HeroAnimated\";\nconst FUIHeroWithGrid = () => {\n  return (\n    <>\n      <section className=\"min-h-[800px] w-full  mt-0 relative\">\n        <div className=\"absolute -z-1 inset-0 opacity-15  h-[600px] w-full bg-transparent  bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div>\n        <img\n          className=\"absolute inset-x-0 -top-20 opacity-75 \"\n          src={\n            \"https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75\"\n          }\n          width={1000}\n          height={1000}\n          alt=\"back bg\"\n        />\n        <div className=\"relative z-10 max-w-4xl translate-y-[33%]  mx-auto space-y-4\">\n          <HeroAnimated\n            header=\"Take shadcn to the next level for modern web dev experience\"\n            headerClassName=\"text-center max-w-5xl text-5xl md:text-6xl tracking-tighter mx-auto lg:text-7xl font-bold font-geist  font-normal  text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] leading-0 md:leading-0 md:pb-0 mt-1\"\n            description=\"Move faster with beautiful, responsive UI components and website\n            templates with modern design, 100% free and open-source.\"\n            descriptionClassName=\"mx-auto text-zinc-400 text-center text-md lg:max-w-2xl md:py-5\"\n          >\n            <div className=\"flex flex-wrap items-center justify-center  gap-3\">\n              <LinkItem\n                href=\"/components\"\n                variant=\"default\"\n                className=\"inline-flex text-center group items-center w-full justify-center bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent bg-transparent  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-4 px-10\"\n              >\n                Browser Components\n                <ChevronRight className=\"w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n              </LinkItem>\n              <LinkItem\n                href=\"https://github.com/Kinfe123/farm-ui\"\n                variant=\"shiny\"\n                className=\"inline-flex w-full justify-center items-center gap-x-2 border border-zinc-800 hover:border-zinc-600 bg-zinc-950 hover:text-zinc-100 duration-200 sm:w-auto py-4 px-10\"\n                target=\"_blank\"\n              >\n                <IconGithub className=\"w-5 h-5\" />\n                Star on GitHub\n              </LinkItem>\n            </div>\n          </HeroAnimated>\n        </div>\n      </section>\n   \n    </>\n  );\n};\nexport default FUIHeroWithGrid;\n\n
-
-
-
-
-            
+      \nimport LinkItem from \"components/ui/LinkItem\";\nimport { IconGithub } from \"components/icons\";\nimport { ChevronRight } from \"lucide-react\";\nimport HeroAnimated from \"components/HeroAnimated\";\nconst FUIHeroWithGrid = () => {\n  return (\n    <>\n      <section className=\"min-h-[800px] w-full  mt-0 relative\">\n        <div className=\"absolute -z-1 inset-0 opacity-15  h-[600px] w-full bg-transparent  bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div>\n        <img\n          className=\"absolute inset-x-0 -top-20 opacity-75 \"\n          src={\n            \"https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75\"\n          }\n          width={1000}\n          height={1000}\n          alt=\"back bg\"\n        />\n        <div className=\"relative z-10 max-w-4xl translate-y-[33%]  mx-auto space-y-4\">\n          <HeroAnimated\n            header=\"Take shadcn to the next level for modern web dev experience\"\n            headerClassName=\"text-center max-w-5xl text-5xl md:text-6xl tracking-tighter mx-auto lg:text-7xl font-bold font-geist  font-normal  text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] leading-0 md:leading-0 md:pb-0 mt-1\"\n            description=\"Move faster with beautiful, responsive UI components and website\n            templates with modern design, 100% free and open-source.\"\n            descriptionClassName=\"mx-auto text-zinc-400 text-center text-md lg:max-w-2xl md:py-5\"\n          >\n            <div className=\"flex flex-wrap items-center justify-center  gap-3\">\n              <LinkItem\n                href=\"/components\"\n                variant=\"default\"\n                className=\"inline-flex text-center group items-center w-full justify-center bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent bg-transparent  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-4 px-10\"\n              >\n                Browser Components\n                <ChevronRight className=\"w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n              </LinkItem>\n              <LinkItem\n                href=\"https://github.com/Kinfe123/farm-ui\"\n                variant=\"shiny\"\n                className=\"inline-flex w-full justify-center items-center gap-x-2 border border-zinc-800 hover:border-zinc-600 bg-zinc-950 hover:text-zinc-100 duration-200 sm:w-auto py-4 px-10\"\n                target=\"_blank\"\n              >\n                <IconGithub className=\"w-5 h-5\" />\n                Star on GitHub\n              </LinkItem>\n            </div>\n          </HeroAnimated>\n        </div>\n      </section>\n   \n    </>\n  );\n};\nexport default FUIHeroWithGrid;\n\n            
             `,
     },
   },
@@ -69,14 +52,35 @@ export const componentToPreview: ComponentProps = {
             `,
     },
   },
+  "farmui-hero-02": {
+    component: <FUIHeroSectionWithBottomImage />,
+    description: "Hero Section With RetroGrid",
+    path: "previewsComponents/FUIHeroSectionWithBottomImage",
+    codeCopy: {
+      react: `
+      \nimport React from \"react\";\nimport RetroGrid from \"components/ui/Grid\";\n\nexport default function FUIHeroSectionWithBottomImage() {\n  return (\n    <div className=\"relative\">\n      <div class=\"absolute top-0 z-[0] h-screen w-screen bg-purple-950/10 bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\"></div>\n      <section className=\"relative max-w-full mx-auto  z-1\">\n        <RetroGrid />\n\n        <div className=\"max-w-screen-xl z-10 mx-auto px-4 py-28 gap-12 text-gray-600 md:px-8\">\n          <div className=\"space-y-5 max-w-3xl leading-0  lg:leading-5 mx-auto text-center\">\n            <h1 className=\"text-sm text-gray-400 group font-geist mx-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit\">\n              Build products for everyone\n              <ChevronRight className=\"inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n            </h1>\n\n            <h2 className=\"text-4xl tracking-tighter font-geist  bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] text-transparent   mx-auto md:text-6xl\">\n              Designing your projects faster with{\" \"}\n              <span className=\"text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-orange-200\">\n                the largest figma UI kit.\n              </span>\n            </h2>\n\n            <p className=\"max-w-2xl mx-auto text-gray-300\">\n              Sed ut perspiciatis unde omnis iste natus voluptatem accusantium\n              doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n            </p>\n            <div className=\"items-center  justify-center gap-x-3 space-y-3 sm:flex sm:space-y-0\">\n              <span className=\"relative inline-block overflow-hidden rounded-full p-[1.5px]\">\n                <span className=\"absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]\" />\n                <div className=\"inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-gray-950  text-xs font-medium text-gray-50 backdrop-blur-3xl\">\n                  <a\n                    href=\"javascript:void(0)\"\n                    className=\"inline-flex rounded-full text-center group items-center w-full justify-center   bg-gradient-to-tr from-zinc-300/5 via-purple-400/20 to-transparent    text-white border-input border-[1px] hover:bg-transparent/90 transition-colors sm:w-auto py-4 px-10\"\n                  >\n                    Browse courses\n                  </a>\n                </div>\n              </span>\n            </div>\n          </div>\n          <div className=\"mt-32 mx-10\">\n            <img\n              src=\"https://farmui.vercel.app/dashboard.png\"\n              className=\"w-full shadow-lg rounded-lg border\"\n              alt=\"\"\n            />\n          </div>\n        </div>\n      </section>\n    </div>\n  );\n}\n\n
+
+            `,
+    },
+  },
   "farmui-hero-03": {
     component: <FUIHeroWithGridSimple />,
-    description: "Hero Section With Simpl and Aligned",
+    description: "Hero Section With Simple and Aligned",
     path: "previewsComponents/FUIHeroWithGridSimpe",
     codeCopy: {
       react: `
       \nimport LinkItem from \"components/ui/LinkItem\";\nimport { IconGithub } from \"components/icons\";\nimport { ChevronRight } from \"lucide-react\";\nimport HeroAnimated from \"components/HeroAnimated\";\nimport BgGradient from \"components/ui/BgGradient\";\nconst FUIHeroWithGridSimple = () => {\n  return (\n    <>\n      <section className=\"min-h-[800px] w-full  mt-0 relative\">\n        <div className=\"absolute -top-0 inset-x-0 opacity-45\">\n          <BgGradient />\n        </div>\n\n        <svg\n          className=\"absolute inset-0 z-1 h-full w-full  stroke-white/5 [mask-image:radial-gradient(100%_100%_at_top_left  ,white,transparent)]\"\n          aria-hidden=\"true\"\n        >\n          <defs>\n            <pattern\n              id=\"983e3e4c-de6d-4c3f-8d64-b9761d1534cc\"\n              width={200}\n              height={200}\n              x=\"50%\"\n              y={-1}\n              patternUnits=\"userSpaceOnUse\"\n            >\n              <path d=\"M.5 200V.5H200\" fill=\"none\" />\n            </pattern>\n          </defs>\n          <svg x=\"50%\" y={-1} className=\"overflow-visible fill-gray-800/20\">\n            <path\n              d=\"M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z\"\n              strokeWidth={0}\n            />\n          </svg>\n          <rect\n            width=\"100%\"\n            height=\"100%\"\n            strokeWidth={0}\n            fill=\"url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)\"\n          />\n        </svg>\n        <div\n          className=\"absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]\"\n          aria-hidden=\"true\"\n        >\n          <div\n            className=\"aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-[#9c80ff] to-[#e546d5] opacity-20\"\n            style={{\n              clipPath:\n                \"polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)\",\n            }}\n          />\n        </div>\n        {/* <div className=\"absolute -z-1 inset-0 opacity-15  h-[600px] w-full bg-transparent  bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div> */}\n\n        <div className=\"relative z-10 max-w-4xl ml-5 md:ml-10  translate-y-[33%]  mr-auto  space-y-4\">\n          <h1 className=\"text-sm  text-gray-400 group font-geist mr-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit\">\n            <pre className=\"tracking-tight uppercase\">\n              Build products for everyone\n              <ChevronRight className=\"inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n            </pre>\n          </h1>\n          <HeroAnimated\n            header=\"Take shadcn to the next level for modern web dev experience.\"\n            headerClassName=\"ml-2 text-left tracking-tight max-w-md md:max-w-3xl text-3xl md:text-4xl tracking-tighter mr-auto lg:text-6xl font-bold font-geist  font-normal  text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] leading-0 md:leading-0 md:pb-0 mt-1\"\n            description=\"\"\n            descriptionClassName=\"  \"\n          >\n            <div className=\"mr-auto text-[0.84rem] ml-2 text-zinc-400 text-left md:text-lg lg:max-w-2xl md:py-5\">\n              <pre className=\"tracking-tight uppercase max-w-md md:max-w-3xl text-wrap\">\n                Move faster with beautiful responsive UI components and website\n                templates with modern design, 100% free and open-source.\n              </pre>\n            </div>\n          </HeroAnimated>\n            <div className=\"mr-auto ml-2  flex flex-wrap gap-y-4 items-start justify-start gap-x-3\">\n              <LinkItem\n                href=\"/components\"\n                className=\"inline-flex rounded-none uppercase font-mono  text-center group items-center w-full justify-center  bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent bg-zinc-900  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-4 px-10\"\n              >\n                Browser Components\n                <ChevronRight className=\"w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n              </LinkItem>\n              <LinkItem\n                href=\"https://github.com/Kinfe123/farm-ui\"\n                variant=\"shiny\"\n                className=\"inline-flex font-mono uppercase tracking-tight rounded-none w-full justify-center items-center gap-x-3 border border-zinc-800 hover:border-zinc-600 bg-zinc-950 hover:text-zinc-100 duration-200 sm:w-auto py-4 px-10\"\n                target=\"_blank\"\n              >\n                <IconGithub className=\"w-5 h-5 \" />\n                Star on GitHub\n              </LinkItem>\n            </div>\n        </div>\n      </section>\n    </>\n  );\n};\nexport default FUIHeroWithGridSimple;\n\n
-            
+      
+      `,
+    },
+  },
+  "farmui-faq-00": {
+    component: <FUIFaqsWithSearchBox />,
+    description: "FAQ with Search Box",
+    path: "previewsComponents/FUIFaqsWithSearchBox",
+    codeCopy: {
+      react: `
+      \nimport React from \"react\";\n\nexport default function FUIFaqsWithSearchBox() {\n  const faqsList = [\n    {\n      q: \"What are some random questions to ask?\",\n      a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Do you include common questions?\",\n      a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Can I use this for 21 questions?\",\n      a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Are these questions for girls or for boys?\",\n      a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"What do you wish you had more talent doing?\",\n      a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n      href: \"javascript:void(0)\",\n    },\n  ];\n\n  return (\n    <section className=\"relative\">\n      <img\n        className=\"absolute inset-x-0 -top-20 opacity-25 \"\n        src={\n          \"https://pipe.com/_next/image?url=%2Fassets%2Fimg%2Fhero-left.png&w=384&q=75\"\n        }\n        width={1000}\n        height={1000}\n        alt=\"back bg\"\n      />\n\n      <div className=\"absolute -z-1 inset-0  h-[600px] w-full bg-transparent opacity-5 bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div>\n\n      <div className=\"pt-10 max-w-screen-xl mx-auto px-4 md:px-8\">\n        <div className=\"space-y-5 sm:text-left sm:max-w-md sm:mr-auto\">\n          <h3 className=\"text-gray-300 font-geist text-3xl font-extrabold sm:text-4xl\">\n            How can we help?\n          </h3>\n          <p className=\"text-gray-100\">\n            Everything you need to know about the product. Can’t find the answer\n            you’re looking for? feel free to{\" \"}\n            <a\n              className=\"text-cyan-700 font-semibold whitespace-nowrap\"\n              href=\"javascript:void(0)\"\n            >\n              contact us\n            </a>\n            .\n          </p>\n          <form\n            onSubmit={(e) => e.preventDefault()}\n            className=\"mx-auto sm:mx-auto \"\n          >\n            <div className=\"relative\">\n              <Mail className=\"w-6 h-6 text-gray-500 absolute left-3 inset-y-0 my-auto\" />\n              <input\n                type=\"text\"\n                placeholder=\"Enter your email\"\n                className=\"w-full pl-12 pr-3 py-2 text-gray-200 bg-transparent outline-none border focus:border-cyan-600 shadow-sm rounded-lg\"\n              />\n            </div>\n          </form>\n        </div>\n        <Separator className=\"h-[1px] bg-white/10 mt-4\" />\n        <div className=\"mt-12\">\n          <ul className=\"space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3\">\n            {faqsList.map((item, idx) => (\n              <li key={idx} className=\"space-y-3\">\n                <summary className=\"flex items-center justify-between font-semibold text-gray-500\">\n                  {item.q}\n                </summary>\n                <p\n                  dangerouslySetInnerHTML={{ __html: item.a }}\n                  className=\"text-gray-200 leading-relaxed\"\n                ></p>\n                <a\n                  href={item.href}\n                  className=\"flex items-center gap-x-1 text-sm text-cyan-600 hover:text-cyan-400 duration-150 font-medium\"\n                >\n                  Read more\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    className=\"w-5 h-5\"\n                  >\n                    <path\n                      fillRule=\"evenodd\"\n                      d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z\"\n                      clipRule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n
             `,
     },
   },
@@ -90,15 +94,4 @@ export const componentToPreview: ComponentProps = {
             `,
     },
   },
-  "farmui-hero-02": {
-    component: <FUIHeroSectionWithBottomImage />,
-    description: "Hero With Retro Grid",
-    path: "previewsComponents/FUIHeroSectionWithBottomImage",
-    codeCopy: {
-      react: `
-      \nimport React from \"react\";\nimport RetroGrid from \"components/ui/Grid\";\n\nexport default function FUIHeroSectionWithBottomImage() {\n  return (\n    <div className=\"relative\">\n      <div class=\"absolute top-0 z-[0] h-screen w-screen bg-purple-950/10 bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]\"></div>\n      <section className=\"relative max-w-full mx-auto  z-1\">\n        <RetroGrid />\n\n        <div className=\"max-w-screen-xl z-10 mx-auto px-4 py-28 gap-12 text-gray-600 md:px-8\">\n          <div className=\"space-y-5 max-w-3xl leading-0  lg:leading-5 mx-auto text-center\">\n            <h1 className=\"text-sm text-gray-400 group font-geist mx-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit\">\n              Build products for everyone\n              <ChevronRight className=\"inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300\" />\n            </h1>\n\n            <h2 className=\"text-4xl tracking-tighter font-geist  bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] text-transparent   mx-auto md:text-6xl\">\n              Designing your projects faster with{\" \"}\n              <span className=\"text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-orange-200\">\n                the largest figma UI kit.\n              </span>\n            </h2>\n\n            <p className=\"max-w-2xl mx-auto text-gray-300\">\n              Sed ut perspiciatis unde omnis iste natus voluptatem accusantium\n              doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n            </p>\n            <div className=\"items-center  justify-center gap-x-3 space-y-3 sm:flex sm:space-y-0\">\n              <span className=\"relative inline-block overflow-hidden rounded-full p-[1.5px]\">\n                <span className=\"absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]\" />\n                <div className=\"inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-gray-950  text-xs font-medium text-gray-50 backdrop-blur-3xl\">\n                  <a\n                    href=\"javascript:void(0)\"\n                    className=\"inline-flex rounded-full text-center group items-center w-full justify-center   bg-gradient-to-tr from-zinc-300/5 via-purple-400/20 to-transparent    text-white border-input border-[1px] hover:bg-transparent/90 transition-colors sm:w-auto py-4 px-10\"\n                  >\n                    Browse courses\n                  </a>\n                </div>\n              </span>\n            </div>\n          </div>\n          <div className=\"mt-32 mx-10\">\n            <img\n              src=\"https://farmui.vercel.app/dashboard.png\"\n              className=\"w-full shadow-lg rounded-lg border\"\n              alt=\"\"\n            />\n          </div>\n        </div>\n      </section>\n    </div>\n  );\n}\n\n
-
-            `,
-    },
-  },
 };

From 5d9508d6715702909e66686874461ed260a0e835 Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Fri, 31 May 2024 16:46:17 +0300
Subject: [PATCH 07/12] fix: some pkg command naming

---
 apps/www/components/ui/Preview/index.tsx | 27 ++++++++++++------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/apps/www/components/ui/Preview/index.tsx b/apps/www/components/ui/Preview/index.tsx
index 6bcb18df..cec0454a 100644
--- a/apps/www/components/ui/Preview/index.tsx
+++ b/apps/www/components/ui/Preview/index.tsx
@@ -47,7 +47,7 @@ export default ({
   item: any;
   mdxSource: MDXRemoteSerializeResult;
   slug: string;
-  files: string[]
+  files: string[];
 }) => {
   const [isPreview, setPreview] = useState<boolean>(true);
   const [selectedFramework, setFramework] = useState("react");
@@ -68,7 +68,7 @@ export default ({
     textare.remove();
     setCopyed(true);
   };
-  
+
   // console.log('the compoent is: ' , item.codeCopy['react'])
 
   useEffect(() => {
@@ -76,21 +76,22 @@ export default ({
       setTimeout(() => setCopyed(false), 2000);
     }
   }, [copied]);
-  const reactCompToRender = componentToPreview[item?.id] ?? <></>
-  const comp = reactCompToRender.path
-  const codeCopy = reactCompToRender.codeCopy['react'].toString()
+  const reactCompToRender = componentToPreview[item?.id] ?? <></>;
+  const comp = reactCompToRender.path;
+  const codeCopy = reactCompToRender.codeCopy["react"].toString();
   return (
-
     <>
       <div className="items-start justify-between sm:flex">
         <h3 className="text-sm text-zinc-300 font-medium py-4">
           {item?.title}
         </h3>
         <div className="flex gap-3 items-center my-3 sm:mt-0 z-20">
-        <div className="border-input animate-background-shine bg-[linear-gradient(110deg,#000,45%,#4D4B4B,55%,#000)] bg-[length:250%_100%]   border-[2px] py-2 px-4 rounded-lg flex gap-2 justify-center items-center">
-          <Terminal className="w-4 h-4 text-white/80"  />
-          <pre className='text-white/50 tracking-tight text-sm '>pnpm farmui add {item.id}</pre>
-          <CopyNpmCommandButton commands={`farmui add ${item.id}`}/>
+          <div className="border-input animate-background-shine bg-[linear-gradient(110deg,#000,45%,#4D4B4B,55%,#000)] bg-[length:250%_100%]   border-[2px] py-2 px-4 rounded-lg flex gap-2 justify-center items-center">
+            <Terminal className="w-4 h-4 text-white/80" />
+            <pre className="text-white/50 tracking-tight text-sm ">
+              pnpm farmui add {item.id}
+            </pre>
+            <CopyNpmCommandButton commands={`farm-ui add ${item.id}`} />
           </div>
 
           <PreviewSwitch preview={isPreview} setPreview={setPreview} />
@@ -130,9 +131,7 @@ export default ({
           item.ltr[selectedFramework][fullTech as string].length > 0 ? (
             <button
               className="w-7 h-7 absolute top-16 right-6 flex items-center justify-center font-medium text-zinc-300 text-sm hover:bg-zinc-600 rounded-md duration-200"
-              onClick={() =>
-                copyCode(codeCopy)
-              }
+              onClick={() => copyCode(codeCopy)}
             >
               {copied ? (
                 <CheckIcon className="w-5 h-5" />
@@ -147,7 +146,7 @@ export default ({
             <Tabs.Content
               key={idx}
               className="overflow-auto p-4 delay-1000 duration-1000 data-[state=inactive]:opacity-0 data-[state=active]:opacity-1"
-              value={tab.value} 
+              value={tab.value}
             >
               {item.ltr[selectedFramework] &&
               item.ltr[selectedFramework][fullTech as string].length > 0 ? (

From f64db267f0d23670edc8fd108d95e1410ed19c8d Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Fri, 31 May 2024 16:53:01 +0300
Subject: [PATCH 08/12] fix: dropdown transparency

---
 apps/www/components/farmui/CopyButton.tsx | 6 +++---
 apps/www/components/ui/Preview/index.tsx  | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/www/components/farmui/CopyButton.tsx b/apps/www/components/farmui/CopyButton.tsx
index 99d3947a..34827cc5 100644
--- a/apps/www/components/farmui/CopyButton.tsx
+++ b/apps/www/components/farmui/CopyButton.tsx
@@ -52,14 +52,14 @@ export function CopyNpmCommandButton({commands , className} : {commands: string
             )}
           >
             {hasCopied ? (
-              <CheckIcon className="h-3 w-3" />
+              <CheckIcon className="h-4 w-4 mx-auto" />
             ) : (
-              <ClipboardIcon className="h-3 w-3" />
+              <ClipboardIcon className="h-4 w-4 mx-auto" />
             )}
             <span className="sr-only">Copy</span>
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" className="z-20">
+        <DropdownMenuContent align="start" className="z-20 bg-black/80">
           <DropdownMenuItem
             onClick={() => copyCommand(commands, "npm")}
           >
diff --git a/apps/www/components/ui/Preview/index.tsx b/apps/www/components/ui/Preview/index.tsx
index cec0454a..779ade57 100644
--- a/apps/www/components/ui/Preview/index.tsx
+++ b/apps/www/components/ui/Preview/index.tsx
@@ -86,10 +86,10 @@ export default ({
           {item?.title}
         </h3>
         <div className="flex gap-3 items-center my-3 sm:mt-0 z-20">
-          <div className="border-input animate-background-shine bg-[linear-gradient(110deg,#000,45%,#4D4B4B,55%,#000)] bg-[length:250%_100%]   border-[2px] py-2 px-4 rounded-lg flex gap-2 justify-center items-center">
+          <div className="border-input animate-background-shine bg-[linear-gradient(110deg,#000,55%,#4D4B4B,65%,#000)] bg-opacity-20 bg-[length:250%_100%]   border-[2px] py-2 px-4 rounded-lg flex gap-2 justify-center items-center">
             <Terminal className="w-4 h-4 text-white/80" />
             <pre className="text-white/50 tracking-tight text-sm ">
-              pnpm farmui add {item.id}
+              pnpm farm-ui add {item.id}
             </pre>
             <CopyNpmCommandButton commands={`farm-ui add ${item.id}`} />
           </div>

From 864b17fc90fc6c3915ce0c04effa8a05e4b39db1 Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Fri, 31 May 2024 17:11:54 +0300
Subject: [PATCH 09/12] fix: cmd

---
 apps/www/components/ui/Preview/index.tsx | 6 ++++--
 apps/www/tailwind.config.js              | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/www/components/ui/Preview/index.tsx b/apps/www/components/ui/Preview/index.tsx
index 779ade57..3d58a53a 100644
--- a/apps/www/components/ui/Preview/index.tsx
+++ b/apps/www/components/ui/Preview/index.tsx
@@ -88,8 +88,10 @@ export default ({
         <div className="flex gap-3 items-center my-3 sm:mt-0 z-20">
           <div className="border-input animate-background-shine bg-[linear-gradient(110deg,#000,55%,#4D4B4B,65%,#000)] bg-opacity-20 bg-[length:250%_100%]   border-[2px] py-2 px-4 rounded-lg flex gap-2 justify-center items-center">
             <Terminal className="w-4 h-4 text-white/80" />
-            <pre className="text-white/50 tracking-tight text-sm ">
-              pnpm farm-ui add {item.id}
+            <pre className="text-white/50 tracking-tight text-sm mt-1 mr-5">
+              <span className="font-extrabold text-white">pnpm</span> <span className="text-white/90">
+              farm-ui</span> add <span className="text-purple-100/80">
+              {item.id} </span>
             </pre>
             <CopyNpmCommandButton commands={`farm-ui add ${item.id}`} />
           </div>
diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js
index 9d122ce1..63bbb328 100644
--- a/apps/www/tailwind.config.js
+++ b/apps/www/tailwind.config.js
@@ -117,7 +117,7 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
         "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
         "border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
-        "background-shine": "background-shine 2s linear infinite"
+        "background-shine": "background-shine 5s linear infinite"
 
 
       },

From b5107bb9a6df0cb8adf9ccf96ef9ee9a5a674977 Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Fri, 31 May 2024 17:49:48 +0300
Subject: [PATCH 10/12] fix: cli

---
 .../farmui/FUIHeroWithGridSimple.tsx          | 102 ++++++++++++++++++
 packages/cli/dist/index.js                    |   4 +-
 packages/cli/dist/index.js.map                |   2 +-
 packages/cli/src/commands/add.ts              |   7 +-
 4 files changed, 111 insertions(+), 4 deletions(-)
 create mode 100644 packages/cli/components/farmui/FUIHeroWithGridSimple.tsx

diff --git a/packages/cli/components/farmui/FUIHeroWithGridSimple.tsx b/packages/cli/components/farmui/FUIHeroWithGridSimple.tsx
new file mode 100644
index 00000000..e04d18f7
--- /dev/null
+++ b/packages/cli/components/farmui/FUIHeroWithGridSimple.tsx
@@ -0,0 +1,102 @@
+
+import LinkItem from "components/ui/LinkItem";
+import { IconGithub } from "components/icons";
+import { ChevronRight } from "lucide-react";
+import HeroAnimated from "components/HeroAnimated";
+import BgGradient from "components/ui/BgGradient";
+const FUIHeroWithGridSimple = () => {
+  return (
+    <>
+      <section className="min-h-[800px] w-full  mt-0 relative">
+        <div className="absolute -top-0 inset-x-0 opacity-45">
+          <BgGradient />
+        </div>
+
+        <svg
+          className="absolute inset-0 z-1 h-full w-full  stroke-white/5 [mask-image:radial-gradient(100%_100%_at_top_left  ,white,transparent)]"
+          aria-hidden="true"
+        >
+          <defs>
+            <pattern
+              id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc"
+              width={200}
+              height={200}
+              x="50%"
+              y={-1}
+              patternUnits="userSpaceOnUse"
+            >
+              <path d="M.5 200V.5H200" fill="none" />
+            </pattern>
+          </defs>
+          <svg x="50%" y={-1} className="overflow-visible fill-gray-800/20">
+            <path
+              d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
+              strokeWidth={0}
+            />
+          </svg>
+          <rect
+            width="100%"
+            height="100%"
+            strokeWidth={0}
+            fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)"
+          />
+        </svg>
+        <div
+          className="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]"
+          aria-hidden="true"
+        >
+          <div
+            className="aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-[#9c80ff] to-[#e546d5] opacity-20"
+            style={{
+              clipPath:
+                "polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)",
+            }}
+          />
+        </div>
+        {/* <div className="absolute -z-1 inset-0 opacity-15  h-[600px] w-full bg-transparent  bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div> */}
+
+        <div className="relative z-10 max-w-4xl ml-5 md:ml-10  translate-y-[33%]  mr-auto  space-y-4">
+          <h1 className="text-sm  text-gray-400 group font-geist mr-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit">
+            <pre className="tracking-tight uppercase">
+              Build products for everyone
+              <ChevronRight className="inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300" />
+            </pre>
+          </h1>
+          <HeroAnimated
+            header="Take shadcn to the next level for modern web dev experience."
+            headerClassName="ml-2 text-left tracking-tight max-w-md md:max-w-3xl text-3xl md:text-4xl tracking-tighter mr-auto lg:text-6xl font-bold font-geist  font-normal  text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] leading-0 md:leading-0 md:pb-0 mt-1"
+            description=""
+            descriptionClassName="  "
+          >
+            <div className="mr-auto text-[0.84rem] ml-2 text-zinc-400 text-left md:text-lg lg:max-w-2xl md:py-5">
+              <pre className="tracking-tight uppercase max-w-md md:max-w-3xl text-wrap">
+                Move faster with beautiful responsive UI components and website
+                templates with modern design, 100% free and open-source.
+              </pre>
+            </div>
+          </HeroAnimated>
+            <div className="mr-auto ml-2  flex flex-wrap gap-y-4 items-start justify-start gap-x-3">
+              <LinkItem
+                href="/components"
+                className="inline-flex rounded-none uppercase font-mono  text-center group items-center w-full justify-center  bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent bg-zinc-900  border-input border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-4 px-10"
+              >
+                Browser Components
+                <ChevronRight className="w-4 h-4 ml-2 group-hover:translate-x-1 duration-300" />
+              </LinkItem>
+              <LinkItem
+                href="https://github.com/Kinfe123/farm-ui"
+                variant="shiny"
+                className="inline-flex font-mono uppercase tracking-tight rounded-none w-full justify-center items-center gap-x-3 border border-zinc-800 hover:border-zinc-600 bg-zinc-950 hover:text-zinc-100 duration-200 sm:w-auto py-4 px-10"
+                target="_blank"
+              >
+                <IconGithub className="w-5 h-5 " />
+                Star on GitHub
+              </LinkItem>
+            </div>
+        </div>
+      </section>
+    </>
+  );
+};
+export default FUIHeroWithGridSimple;
+
diff --git a/packages/cli/dist/index.js b/packages/cli/dist/index.js
index 2bd61a9f..3c01114a 100755
--- a/packages/cli/dist/index.js
+++ b/packages/cli/dist/index.js
@@ -1,4 +1,4 @@
-import"dotenv/config";import{Command as B}from"commander";import"dotenv/config";import{existsSync as x,promises as I}from"fs";import m from"path";import E from"gradient-string";import{Command as F}from"commander";import G from"ora";import{execa as N}from"execa";import b from"prompts";var y=`
+import"dotenv/config";import{Command as z}from"commander";import"dotenv/config";import{existsSync as P,promises as b}from"fs";import m from"path";import F from"gradient-string";import{Command as G}from"commander";import N from"ora";import{execa as U}from"execa";import v from"prompts";var x=`
 \u2591\u2592\u2593\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2593\u2592\u2591\u2592\u2593\u2588\u2588\u2588\u2588\u2588\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2592\u2593\u2588\u2593\u2592\u2591 
 \u2591\u2592\u2593\u2588\u2593\u2592\u2591     \u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2592\u2593\u2588\u2593\u2592\u2591 
 \u2591\u2592\u2593\u2588\u2593\u2592\u2591     \u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2592\u2593\u2588\u2593\u2592\u2591 
@@ -8,5 +8,5 @@ import"dotenv/config";import{Command as B}from"commander";import"dotenv/config";
 \u2591\u2592\u2593\u2588\u2593\u2592\u2591     \u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2588\u2588\u2588\u2588\u2588\u2593\u2592\u2591\u2591\u2592\u2593\u2588\u2593\u2592\u2591  v0.0.1 
 
                                                                                
-`;import f from"chalk";var n={error(...t){console.log(f.red(...t))},warn(...t){console.log(f.yellow(...t))},info(...t){console.log(f.cyan(...t))},success(...t){console.log(f.green(...t))},break(){console.log("")}};import{z as _}from"zod";import{detect as C}from"@antfu/ni";async function k(t){let e=await C({programmatic:!0,cwd:t});return e==="yarn@berry"?"yarn":e==="pnpm@6"?"pnpm":e==="bun"?"bun":e??"npm"}process.on("SIGINT",()=>process.exit(0));process.on("SIGTERM",()=>process.exit(0));var U="https://farmui-api.vercel.app/api/components",D=_.object({id:_.string(),cwd:_.string()});console.log(E("pink","blue")(y));var P=new F().name("add").description("add a new component or UI from farmui").argument("<string>","id of the component from https://farmui.com").option("-c, --cwd <cwd>","the working directory. defaults to the current directory.",process.cwd()).action(async(t,e)=>{let l=D.parse({id:t,...e}),c=m.resolve(l.cwd);x(c)||(n.error(`There is no ${c} exists your paths.`),process.exit(0));let w="components",T=process.cwd()===l.cwd;try{if(!T)n.info(`We are dumping the component inside of ${c} `);else{let{dir:o}=await b({type:"text",name:"dir",message:"A directory to dump the components? ",hint:"components "});o&&(w=o)}let g=m.join(c,w),s=m.join(g,"/farmui"),i=(await(await fetch(U)).json()).find(o=>o.id===l.id);if(i||(n.error("No such component exists with in this ID."),process.exit(0)),x(s)){let{proceed:o}=await b({type:"confirm",name:"proceed",message:"Ready to install components and dependencies. Proceed?",initial:!0});o||(n.info("Make sure you have the right path to dump the components"),process.exit(0))}else await I.mkdir(s,{recursive:!0});let r=[],M=i.files[0].root.name,R=i.files[0].root.contents[0].content,S=m.join(s,M),$=i.files[1].child;r.push({comp_content:R,comp_path:S});let q=[];$.map(o=>{let p=o.name,u=o.contents[0].content,d=m.join(s,p);r.push({comp_content:u,comp_path:d})});let h=G("Dumping your components...");h.start();let a=i.dependencies;r?r.map(async({comp_content:o,comp_path:p})=>{await I.writeFile(`${p}.tsx`,o)}):n.warn("No component to add");let j=await k(c);if(a?.length&&await N(`${j}`,["install",...a],{cwd:process.cwd()}),h.stop(),a.length&&(n.info(`Dependencies - ${a.length} added`),a.map(o=>{n.success(` + ${o}`)})),r){let o=s.split("/"),p=o[o.length-2]+"/"+o[o.length-1];n.info(`Components - ${r.length} added inside of ${p}`),r.map(u=>{let d=u.comp_path.split("/"),A=d[d.length-1];n.success(` + ${A}`)})}h.succeed("Successfully installed")}catch(g){n.error("Error has occured!"),console.log("Error: ",g)}});import J from"path";import O from"fs-extra";function v(){let t=J.join("package.json");return O.readJSONSync(t)}process.on("SIGINT",()=>process.exit(0));process.on("SIGTERM",()=>process.exit(0));async function z(){let t=await v(),e=new B().name("farmui").description("Add natively farmed farmUI blocks ").version(t.version||"0.1.0","-v, --version","display the version number");e.addCommand(P),e.parse()}z();
+`;import f from"chalk";var e={error(...t){console.log(f.red(...t))},warn(...t){console.log(f.yellow(...t))},info(...t){console.log(f.cyan(...t))},success(...t){console.log(f.green(...t))},break(){console.log("")}};import{z as _}from"zod";import{detect as E}from"@antfu/ni";async function I(t){let n=await E({programmatic:!0,cwd:t});return n==="yarn@berry"?"yarn":n==="pnpm@6"?"pnpm":n==="bun"?"bun":n??"npm"}process.on("SIGINT",()=>process.exit(0));process.on("SIGTERM",()=>process.exit(0));var D="https://farmui-api.vercel.app/api/components",J=_.object({id:_.string(),cwd:_.string()});console.log(F("pink","blue")(x));var T=new G().name("add").description("add a new component or UI from farmui").argument("<string>","id of the component from https://farmui.com").option("-c, --cwd <cwd>","the working directory. defaults to the current directory.",process.cwd()).action(async(t,n)=>{let l=J.parse({id:t,...n}),s=m.resolve(l.cwd);P(s)||(e.error(`There is no ${s} exists your paths.`),process.exit(0));let w="components",R=process.cwd()===l.cwd;try{if(!R)e.info(`We are dumping the component inside of ${s} `);else{let{dir:o}=await v({type:"text",name:"dir",message:"A directory to dump the components? ",hint:"components "});o&&(w=o)}let g=m.join(s,w),i=m.join(g,"/farmui"),y=await(await fetch(D)).json();console.log({comp_db:y});let c=y.find(o=>o.id===l.id);if(c||(e.error("No such component exists with in this ID."),process.exit(0)),P(i)){let{proceed:o}=await v({type:"confirm",name:"proceed",message:"Ready to install components and dependencies. Proceed?",initial:!0});o||(e.info("Make sure you have the right path to dump the components"),process.exit(0))}else await b.mkdir(i,{recursive:!0});let r=[],S=c.files[0].root.name,$=c.files[0].root.contents[0].content,j=m.join(i,S),k=[];c[1]&&(k=c.files[1].child),r.push({comp_content:$,comp_path:j});let q=[];k.map(o=>{let p=o.name,u=o.contents[0].content,d=m.join(i,p);r.push({comp_content:u,comp_path:d})});let h=N("Dumping your components...");h.start();let a=c.dependencies;r?r.map(async({comp_content:o,comp_path:p})=>{await b.writeFile(`${p}.tsx`,o)}):e.warn("No component to add");let A=await I(s);if(a?.length&&await U(`${A}`,["install",...a],{cwd:process.cwd()}),h.stop(),a.length&&(e.info(`Dependencies - ${a.length} added`),a.map(o=>{e.success(` + ${o}`)})),r){let o=i.split("/"),p=o[o.length-2]+"/"+o[o.length-1];e.info(`Components - ${r.length} added inside of ${p}`),r.map(u=>{let d=u.comp_path.split("/"),C=d[d.length-1];e.success(` + ${C}`)})}h.succeed("Successfully installed")}catch(g){e.error("Error has occured!"),console.log("Error: ",g)}});import O from"path";import B from"fs-extra";function M(){let t=O.join("package.json");return B.readJSONSync(t)}process.on("SIGINT",()=>process.exit(0));process.on("SIGTERM",()=>process.exit(0));async function L(){let t=await M(),n=new z().name("farmui").description("Add natively farmed farmUI blocks ").version(t.version||"0.1.0","-v, --version","display the version number");n.addCommand(T),n.parse()}L();
 //# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/packages/cli/dist/index.js.map b/packages/cli/dist/index.js.map
index bbd7ddd0..98d66370 100644
--- a/packages/cli/dist/index.js.map
+++ b/packages/cli/dist/index.js.map
@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/commands/add.ts","../src/utils/ascii-arts.ts","../src/utils/logger.ts","../src/utils/get-package-manager.ts","../src/utils/get-package-info.ts"],"sourcesContent":["import \"dotenv/config\"\nimport { Command } from \"commander\";\n\nimport { add } from \"./commands/add\";\nimport { getPackageInfo } from \"./utils/get-package-info\";\n\nprocess.on(\"SIGINT\", () => process.exit(0));\nprocess.on(\"SIGTERM\", () => process.exit(0));\n\nasync function main() {\n  const packageInfo = await getPackageInfo();\n\n  const program = new Command()\n    .name(\"farmui\")\n    .description(\"Add natively farmed farmUI blocks \")\n    .version(\n      packageInfo.version || \"0.1.0\",\n      \"-v, --version\",\n      \"display the version number\",\n    );\n\n  program.addCommand(add)\n\n  program.parse();\n}\n\nmain();\n","import \"dotenv/config\";\nimport { existsSync, promises as fs } from \"fs\";\nimport path from \"path\";\nimport chalk from \"chalk\";\nimport gradient from \"gradient-string\";\nimport { toBlock, toBlockString } from \"terminal-block-fonts\";\nimport { Command } from \"commander\";\nimport ora from \"ora\";\nimport { execa } from \"execa\";\nimport prompts from \"prompts\";\nimport { FARMUI_GRAFFITI } from \"../utils/ascii-arts\";\nimport { logger } from \"../utils/logger\";\nimport { custom, z } from \"zod\";\nimport { getPackageManager } from \"../utils/get-package-manager\";\n\n\nprocess.on(\"SIGINT\", () => process.exit(0));\nprocess.on(\"SIGTERM\", () => process.exit(0));\n\n\n\nconst COMPONENT_REGISTERY_URL = \"https://farmui-api.vercel.app/api/components\";\ntype CompToAddProps = {\n  comp_path: string;\n  comp_content: string;\n};\nconst addCommandInput = z.object({\n  id: z.string(),\n  cwd: z.string(),\n});\n\nconsole.log(gradient(\"pink\", \"blue\")(FARMUI_GRAFFITI));\n\nexport const add = new Command()\n\n  .name(\"add\")\n  .description(\"add a new component or UI from farmui\")\n  .argument(\"<string>\", \"id of the component from https://farmui.com\")\n  // .option(\"--id\", \"id of the component\")\n  .option(\n    \"-c, --cwd <cwd>\",\n    \"the working directory. defaults to the current directory.\",\n    process.cwd()\n  )\n  .action(async (id, opts) => {\n    const options = addCommandInput.parse({\n      id,\n      ...opts,\n    });\n\n    const custom_cwd = path.resolve(options.cwd);\n    if (!existsSync(custom_cwd)) {\n      logger.error(`There is no ${custom_cwd} exists your paths.`);\n      process.exit(0);\n    }\n    let defaultDir = \"components\";\n    const custom_cwd_flag = process.cwd() === options.cwd\n    // already found the id and next will be finding the component id\n    try {\n      if (!custom_cwd_flag) {\n        logger.info(`We are dumping the component inside of ${custom_cwd} `)\n      } else {\n\n        const { dir } = await prompts({\n          type: \"text\",\n          name: \"dir\",\n          message: `A directory to dump the components? `,\n          hint: \"components \",\n\n        });\n        if (dir) {\n          defaultDir = dir;\n        }\n      }\n      // should be prompting it for the component place to be stored\n      const path_ = path.join(custom_cwd, defaultDir);\n      const root_dir = path.join(path_, \"/farmui\");\n      const comp_fetch = await fetch(COMPONENT_REGISTERY_URL!);\n      let comp_db: any[] = await comp_fetch.json();\n      const select_files_by_id = comp_db.find((x) => x.id === options.id);\n      if (!select_files_by_id) {\n        logger.error(\"No such component exists with in this ID.\");\n        process.exit(0);\n      }\n\n      const exist = existsSync(root_dir);\n\n      if (exist) {\n        // logic for existed\n        const { proceed } = await prompts({\n          type: \"confirm\",\n          name: \"proceed\",\n          message: `Ready to install components and dependencies. Proceed?`,\n          initial: true,\n        });\n\n        if (!proceed) {\n          logger.info(\n            \"Make sure you have the right path to dump the components\"\n          );\n          process.exit(0);\n        }\n      } else {\n        await fs.mkdir(root_dir, { recursive: true });\n      }\n      const path_to_add: CompToAddProps[] = [];\n      // for now , the content we will support will be react based , toll we have updated the ednpoint\n      const root_comp_name = select_files_by_id.files[0].root.name;\n      const root_comp_content =\n        select_files_by_id.files[0].root.contents[0].content;\n      const root_comp_path = path.join(root_dir, root_comp_name);\n      const child_comp = select_files_by_id.files[1].child;\n      path_to_add.push({\n        comp_content: root_comp_content,\n        comp_path: root_comp_path,\n      });\n\n      const child_path: string[] = [];\n      const depends_on: any[] = child_comp;\n      depends_on.map((dep) => {\n        const child_comp_name = dep.name;\n        const child_comp_content = dep.contents[0].content;\n        const child_comp_path = path.join(root_dir, child_comp_name);\n        path_to_add.push({\n          comp_content: child_comp_content,\n          comp_path: child_comp_path,\n        });\n      });\n      const spinner = ora(`Dumping your components...`);\n      spinner.start();\n      const dependencies: string[] = select_files_by_id.dependencies;\n      if (!path_to_add) {\n        logger.warn(\"No component to add\");\n      } else {\n        path_to_add.map(async ({ comp_content, comp_path }) => {\n          await fs.writeFile(`${comp_path}.tsx`, comp_content);\n        });\n      }\n      const packageManager = await getPackageManager(custom_cwd)\n      if (dependencies?.length) {\n        await execa(`${packageManager}`, [\"install\", ...dependencies], {\n          cwd: process.cwd(),\n        });\n      }\n      spinner.stop();\n      if (dependencies.length) {\n        logger.info(`Dependencies - ${dependencies.length} added`)\n        dependencies.map((dep) => {\n          logger.success(` + ${dep}`)\n        })\n\n      }\n      if (path_to_add) {\n        const path_for_comp = root_dir.split(\"/\")\n        const last_two = path_for_comp[path_for_comp.length - 2] + \"/\" +  path_for_comp[path_for_comp.length - 1]\n\n        logger.info(`Components - ${path_to_add.length} added inside of ${last_two}`)\n        path_to_add.map((comps) => {\n          const comp_names = comps.comp_path.split(\"/\")\n          const comp_name = comp_names[comp_names.length - 1]\n          logger.success(` + ${comp_name}`)\n        })\n      }\n      spinner.succeed(\"Successfully installed\");\n    } catch (err) {\n      logger.error(\"Error has occured!\")\n      console.log(\"Error: \", err);\n    }\n  });\n","export const FARMUI_GRAFFITI = `\n░▒▓████████▓▒░▒▓██████▓▒░░▒▓███████▓▒░░▒▓██████████████▓▒░░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ \n░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ \n░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ \n░▒▓██████▓▒░░▒▓████████▓▒░▒▓███████▓▒░░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ \n░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ \n░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░  \n░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░░▒▓██████▓▒░░▒▓█▓▒░  v0.0.1 \n\n                                                                               \n`","import chalk from \"chalk\"\n\nexport const logger = {\n  error(...args: unknown[]) {\n    console.log(chalk.red(...args))\n  },\n  warn(...args: unknown[]) {\n    console.log(chalk.yellow(...args))\n  },\n  info(...args: unknown[]) {\n    console.log(chalk.cyan(...args))\n  },\n  success(...args: unknown[]) {\n    console.log(chalk.green(...args))\n  },\n  break() {\n    console.log(\"\")\n  },\n}\n","import { detect } from \"@antfu/ni\"\n\nexport async function getPackageManager(\n  targetDir: string\n): Promise<\"yarn\" | \"pnpm\" | \"bun\" | \"npm\"> {\n  const packageManager = await detect({ programmatic: true, cwd: targetDir })\n\n  if (packageManager === \"yarn@berry\") return \"yarn\"\n  if (packageManager === \"pnpm@6\") return \"pnpm\"\n  if (packageManager === \"bun\") return \"bun\"\n\n  return packageManager ?? \"npm\"\n}\n","import path from \"path\"\nimport fs from \"fs-extra\"\nimport { type PackageJson } from \"type-fest\"\n\nexport function getPackageInfo() {\n  const packageJsonPath = path.join(\"package.json\")\n\n  return fs.readJSONSync(packageJsonPath) as PackageJson\n}\n"],"mappings":"AAAA,MAAO,gBACP,OAAS,WAAAA,MAAe,YCDxB,MAAO,gBACP,OAAS,cAAAC,EAAY,YAAYC,MAAU,KAC3C,OAAOC,MAAU,OAEjB,OAAOC,MAAc,kBAErB,OAAS,WAAAC,MAAe,YACxB,OAAOC,MAAS,MAChB,OAAS,SAAAC,MAAa,QACtB,OAAOC,MAAa,UCTb,IAAMC,EAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECA/B,OAAOC,MAAW,QAEX,IAAMC,EAAS,CACpB,SAASC,EAAiB,CACxB,QAAQ,IAAIF,EAAM,IAAI,GAAGE,CAAI,CAAC,CAChC,EACA,QAAQA,EAAiB,CACvB,QAAQ,IAAIF,EAAM,OAAO,GAAGE,CAAI,CAAC,CACnC,EACA,QAAQA,EAAiB,CACvB,QAAQ,IAAIF,EAAM,KAAK,GAAGE,CAAI,CAAC,CACjC,EACA,WAAWA,EAAiB,CAC1B,QAAQ,IAAIF,EAAM,MAAM,GAAGE,CAAI,CAAC,CAClC,EACA,OAAQ,CACN,QAAQ,IAAI,EAAE,CAChB,CACF,EFNA,OAAiB,KAAAC,MAAS,MGZ1B,OAAS,UAAAC,MAAc,YAEvB,eAAsBC,EACpBC,EAC0C,CAC1C,IAAMC,EAAiB,MAAMH,EAAO,CAAE,aAAc,GAAM,IAAKE,CAAU,CAAC,EAE1E,OAAIC,IAAmB,aAAqB,OACxCA,IAAmB,SAAiB,OACpCA,IAAmB,MAAc,MAE9BA,GAAkB,KAC3B,CHIA,QAAQ,GAAG,SAAU,IAAM,QAAQ,KAAK,CAAC,CAAC,EAC1C,QAAQ,GAAG,UAAW,IAAM,QAAQ,KAAK,CAAC,CAAC,EAI3C,IAAMC,EAA0B,+CAK1BC,EAAkBC,EAAE,OAAO,CAC/B,GAAIA,EAAE,OAAO,EACb,IAAKA,EAAE,OAAO,CAChB,CAAC,EAED,QAAQ,IAAIC,EAAS,OAAQ,MAAM,EAAEC,CAAe,CAAC,EAE9C,IAAMC,EAAM,IAAIC,EAAQ,EAE5B,KAAK,KAAK,EACV,YAAY,uCAAuC,EACnD,SAAS,WAAY,6CAA6C,EAElE,OACC,kBACA,4DACA,QAAQ,IAAI,CACd,EACC,OAAO,MAAOC,EAAIC,IAAS,CAC1B,IAAMC,EAAUR,EAAgB,MAAM,CACpC,GAAAM,EACA,GAAGC,CACL,CAAC,EAEKE,EAAaC,EAAK,QAAQF,EAAQ,GAAG,EACtCG,EAAWF,CAAU,IACxBG,EAAO,MAAM,eAAeH,sBAA+B,EAC3D,QAAQ,KAAK,CAAC,GAEhB,IAAII,EAAa,aACXC,EAAkB,QAAQ,IAAI,IAAMN,EAAQ,IAElD,GAAI,CACF,GAAI,CAACM,EACHF,EAAO,KAAK,0CAA0CH,IAAa,MAC9D,CAEL,GAAM,CAAE,IAAAM,CAAI,EAAI,MAAMC,EAAQ,CAC5B,KAAM,OACN,KAAM,MACN,QAAS,uCACT,KAAM,aAER,CAAC,EACGD,IACFF,EAAaE,GAIjB,IAAME,EAAQP,EAAK,KAAKD,EAAYI,CAAU,EACxCK,EAAWR,EAAK,KAAKO,EAAO,SAAS,EAGrCE,GADe,MADF,MAAM,MAAMpB,CAAwB,GACjB,KAAK,GACR,KAAMqB,GAAMA,EAAE,KAAOZ,EAAQ,EAAE,EAQlE,GAPKW,IACHP,EAAO,MAAM,2CAA2C,EACxD,QAAQ,KAAK,CAAC,GAGFD,EAAWO,CAAQ,EAEtB,CAET,GAAM,CAAE,QAAAG,CAAQ,EAAI,MAAML,EAAQ,CAChC,KAAM,UACN,KAAM,UACN,QAAS,yDACT,QAAS,EACX,CAAC,EAEIK,IACHT,EAAO,KACL,0DACF,EACA,QAAQ,KAAK,CAAC,QAGhB,MAAMU,EAAG,MAAMJ,EAAU,CAAE,UAAW,EAAK,CAAC,EAE9C,IAAMK,EAAgC,CAAC,EAEjCC,EAAiBL,EAAmB,MAAM,CAAC,EAAE,KAAK,KAClDM,EACJN,EAAmB,MAAM,CAAC,EAAE,KAAK,SAAS,CAAC,EAAE,QACzCO,EAAiBhB,EAAK,KAAKQ,EAAUM,CAAc,EACnDG,EAAaR,EAAmB,MAAM,CAAC,EAAE,MAC/CI,EAAY,KAAK,CACf,aAAcE,EACd,UAAWC,CACb,CAAC,EAED,IAAME,EAAuB,CAAC,EACJD,EACf,IAAKE,GAAQ,CACtB,IAAMC,EAAkBD,EAAI,KACtBE,EAAqBF,EAAI,SAAS,CAAC,EAAE,QACrCG,EAAkBtB,EAAK,KAAKQ,EAAUY,CAAe,EAC3DP,EAAY,KAAK,CACf,aAAcQ,EACd,UAAWC,CACb,CAAC,CACH,CAAC,EACD,IAAMC,EAAUC,EAAI,4BAA4B,EAChDD,EAAQ,MAAM,EACd,IAAME,EAAyBhB,EAAmB,aAC7CI,EAGHA,EAAY,IAAI,MAAO,CAAE,aAAAa,EAAc,UAAAC,CAAU,IAAM,CACrD,MAAMf,EAAG,UAAU,GAAGe,QAAiBD,CAAY,CACrD,CAAC,EAJDxB,EAAO,KAAK,qBAAqB,EAMnC,IAAM0B,EAAiB,MAAMC,EAAkB9B,CAAU,EAczD,GAbI0B,GAAc,QAChB,MAAMK,EAAM,GAAGF,IAAkB,CAAC,UAAW,GAAGH,CAAY,EAAG,CAC7D,IAAK,QAAQ,IAAI,CACnB,CAAC,EAEHF,EAAQ,KAAK,EACTE,EAAa,SACfvB,EAAO,KAAK,kBAAkBuB,EAAa,cAAc,EACzDA,EAAa,IAAKN,GAAQ,CACxBjB,EAAO,QAAQ,MAAMiB,GAAK,CAC5B,CAAC,GAGCN,EAAa,CACf,IAAMkB,EAAgBvB,EAAS,MAAM,GAAG,EAClCwB,EAAWD,EAAcA,EAAc,OAAS,CAAC,EAAI,IAAOA,EAAcA,EAAc,OAAS,CAAC,EAExG7B,EAAO,KAAK,gBAAgBW,EAAY,0BAA0BmB,GAAU,EAC5EnB,EAAY,IAAKoB,GAAU,CACzB,IAAMC,EAAaD,EAAM,UAAU,MAAM,GAAG,EACtCE,EAAYD,EAAWA,EAAW,OAAS,CAAC,EAClDhC,EAAO,QAAQ,MAAMiC,GAAW,CAClC,CAAC,EAEHZ,EAAQ,QAAQ,wBAAwB,CAC1C,OAASa,EAAP,CACAlC,EAAO,MAAM,oBAAoB,EACjC,QAAQ,IAAI,UAAWkC,CAAG,CAC5B,CACF,CAAC,EIxKH,OAAOC,MAAU,OACjB,OAAOC,MAAQ,WAGR,SAASC,GAAiB,CAC/B,IAAMC,EAAkBH,EAAK,KAAK,cAAc,EAEhD,OAAOC,EAAG,aAAaE,CAAe,CACxC,CLFA,QAAQ,GAAG,SAAU,IAAM,QAAQ,KAAK,CAAC,CAAC,EAC1C,QAAQ,GAAG,UAAW,IAAM,QAAQ,KAAK,CAAC,CAAC,EAE3C,eAAeC,GAAO,CACpB,IAAMC,EAAc,MAAMC,EAAe,EAEnCC,EAAU,IAAIC,EAAQ,EACzB,KAAK,QAAQ,EACb,YAAY,oCAAoC,EAChD,QACCH,EAAY,SAAW,QACvB,gBACA,4BACF,EAEFE,EAAQ,WAAWE,CAAG,EAEtBF,EAAQ,MAAM,CAChB,CAEAH,EAAK","names":["Command","existsSync","fs","path","gradient","Command","ora","execa","prompts","FARMUI_GRAFFITI","chalk","logger","args","z","detect","getPackageManager","targetDir","packageManager","COMPONENT_REGISTERY_URL","addCommandInput","z","gradient","FARMUI_GRAFFITI","add","Command","id","opts","options","custom_cwd","path","existsSync","logger","defaultDir","custom_cwd_flag","dir","prompts","path_","root_dir","select_files_by_id","x","proceed","fs","path_to_add","root_comp_name","root_comp_content","root_comp_path","child_comp","child_path","dep","child_comp_name","child_comp_content","child_comp_path","spinner","ora","dependencies","comp_content","comp_path","packageManager","getPackageManager","execa","path_for_comp","last_two","comps","comp_names","comp_name","err","path","fs","getPackageInfo","packageJsonPath","main","packageInfo","getPackageInfo","program","Command","add"]}
\ No newline at end of file
+{"version":3,"sources":["../src/index.ts","../src/commands/add.ts","../src/utils/ascii-arts.ts","../src/utils/logger.ts","../src/utils/get-package-manager.ts","../src/utils/get-package-info.ts"],"sourcesContent":["import \"dotenv/config\"\nimport { Command } from \"commander\";\n\nimport { add } from \"./commands/add\";\nimport { getPackageInfo } from \"./utils/get-package-info\";\n\nprocess.on(\"SIGINT\", () => process.exit(0));\nprocess.on(\"SIGTERM\", () => process.exit(0));\n\nasync function main() {\n  const packageInfo = await getPackageInfo();\n\n  const program = new Command()\n    .name(\"farmui\")\n    .description(\"Add natively farmed farmUI blocks \")\n    .version(\n      packageInfo.version || \"0.1.0\",\n      \"-v, --version\",\n      \"display the version number\",\n    );\n\n  program.addCommand(add)\n\n  program.parse();\n}\n\nmain();\n","import \"dotenv/config\";\nimport { existsSync, promises as fs } from \"fs\";\nimport path from \"path\";\nimport chalk from \"chalk\";\nimport gradient from \"gradient-string\";\nimport { toBlock, toBlockString } from \"terminal-block-fonts\";\nimport { Command } from \"commander\";\nimport ora from \"ora\";\nimport { execa } from \"execa\";\nimport prompts from \"prompts\";\nimport { FARMUI_GRAFFITI } from \"../utils/ascii-arts\";\nimport { logger } from \"../utils/logger\";\nimport { custom, z } from \"zod\";\nimport { getPackageManager } from \"../utils/get-package-manager\";\n\n\nprocess.on(\"SIGINT\", () => process.exit(0));\nprocess.on(\"SIGTERM\", () => process.exit(0));\n\n\n\nconst COMPONENT_REGISTERY_URL = \"https://farmui-api.vercel.app/api/components\";\ntype CompToAddProps = {\n  comp_path: string;\n  comp_content: string;\n};\nconst addCommandInput = z.object({\n  id: z.string(),\n  cwd: z.string(),\n});\n\nconsole.log(gradient(\"pink\", \"blue\")(FARMUI_GRAFFITI));\n\nexport const add = new Command()\n\n  .name(\"add\")\n  .description(\"add a new component or UI from farmui\")\n  .argument(\"<string>\", \"id of the component from https://farmui.com\")\n  // .option(\"--id\", \"id of the component\")\n  .option(\n    \"-c, --cwd <cwd>\",\n    \"the working directory. defaults to the current directory.\",\n    process.cwd()\n  )\n  .action(async (id, opts) => {\n    const options = addCommandInput.parse({\n      id,\n      ...opts,\n    });\n\n    const custom_cwd = path.resolve(options.cwd);\n    if (!existsSync(custom_cwd)) {\n      logger.error(`There is no ${custom_cwd} exists your paths.`);\n      process.exit(0);\n    }\n    let defaultDir = \"components\";\n    const custom_cwd_flag = process.cwd() === options.cwd\n    // already found the id and next will be finding the component id\n    try {\n      if (!custom_cwd_flag) {\n        logger.info(`We are dumping the component inside of ${custom_cwd} `)\n      } else {\n\n        const { dir } = await prompts({\n          type: \"text\",\n          name: \"dir\",\n          message: `A directory to dump the components? `,\n          hint: \"components \",\n\n        });\n        if (dir) {\n          defaultDir = dir;\n        }\n      }\n      // should be prompting it for the component place to be stored\n      const path_ = path.join(custom_cwd, defaultDir);\n      const root_dir = path.join(path_, \"/farmui\");\n      const comp_fetch = await fetch(COMPONENT_REGISTERY_URL!);\n      let comp_db: any[] = await comp_fetch.json();\n      console.log({comp_db})\n      const select_files_by_id = comp_db.find((x) => x.id === options.id);\n      if (!select_files_by_id) {\n        logger.error(\"No such component exists with in this ID.\");\n        process.exit(0);\n      }\n\n      const exist = existsSync(root_dir);\n\n      if (exist) {\n        // logic for existed\n        const { proceed } = await prompts({\n          type: \"confirm\",\n          name: \"proceed\",\n          message: `Ready to install components and dependencies. Proceed?`,\n          initial: true,\n        });\n\n        if (!proceed) {\n          logger.info(\n            \"Make sure you have the right path to dump the components\"\n          );\n          process.exit(0);\n        }\n      } else {\n        await fs.mkdir(root_dir, { recursive: true });\n      }\n      const path_to_add: CompToAddProps[] = [];\n      // for now , the content we will support will be react based , toll we have updated the ednpoint\n      const root_comp_name = select_files_by_id.files[0].root.name;\n      const root_comp_content =\n        select_files_by_id.files[0].root.contents[0].content;\n      const root_comp_path = path.join(root_dir, root_comp_name);\n      let  child_comp  = []\n      if(select_files_by_id[1]) {\n        child_comp = select_files_by_id.files[1].child;\n\n      }\n      path_to_add.push({\n        comp_content: root_comp_content,\n        comp_path: root_comp_path,\n      });\n\n      const child_path: string[] = [];\n      const depends_on: any[] = child_comp;\n      depends_on.map((dep) => {\n        const child_comp_name = dep.name;\n        const child_comp_content = dep.contents[0].content;\n        const child_comp_path = path.join(root_dir, child_comp_name);\n        path_to_add.push({\n          comp_content: child_comp_content,\n          comp_path: child_comp_path,\n        });\n      });\n      const spinner = ora(`Dumping your components...`);\n      spinner.start();\n      const dependencies: string[] = select_files_by_id.dependencies;\n      if (!path_to_add) {\n        logger.warn(\"No component to add\");\n      } else {\n        path_to_add.map(async ({ comp_content, comp_path }) => {\n          await fs.writeFile(`${comp_path}.tsx`, comp_content);\n        });\n      }\n      const packageManager = await getPackageManager(custom_cwd)\n      if (dependencies?.length) {\n        await execa(`${packageManager}`, [\"install\", ...dependencies], {\n          cwd: process.cwd(),\n        });\n      }\n      spinner.stop();\n      if (dependencies.length) {\n        logger.info(`Dependencies - ${dependencies.length} added`)\n        dependencies.map((dep) => {\n          logger.success(` + ${dep}`)\n        })\n\n      }\n      if (path_to_add) {\n        const path_for_comp = root_dir.split(\"/\")\n        const last_two = path_for_comp[path_for_comp.length - 2] + \"/\" +  path_for_comp[path_for_comp.length - 1]\n\n        logger.info(`Components - ${path_to_add.length} added inside of ${last_two}`)\n        path_to_add.map((comps) => {\n          const comp_names = comps.comp_path.split(\"/\")\n          const comp_name = comp_names[comp_names.length - 1]\n          logger.success(` + ${comp_name}`)\n        })\n      }\n      spinner.succeed(\"Successfully installed\");\n    } catch (err) {\n      logger.error(\"Error has occured!\")\n      console.log(\"Error: \", err);\n    }\n  });\n","export const FARMUI_GRAFFITI = `\n░▒▓████████▓▒░▒▓██████▓▒░░▒▓███████▓▒░░▒▓██████████████▓▒░░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ \n░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ \n░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ \n░▒▓██████▓▒░░▒▓████████▓▒░▒▓███████▓▒░░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ \n░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░ \n░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░  \n░▒▓█▓▒░     ░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░░▒▓██████▓▒░░▒▓█▓▒░  v0.0.1 \n\n                                                                               \n`","import chalk from \"chalk\"\n\nexport const logger = {\n  error(...args: unknown[]) {\n    console.log(chalk.red(...args))\n  },\n  warn(...args: unknown[]) {\n    console.log(chalk.yellow(...args))\n  },\n  info(...args: unknown[]) {\n    console.log(chalk.cyan(...args))\n  },\n  success(...args: unknown[]) {\n    console.log(chalk.green(...args))\n  },\n  break() {\n    console.log(\"\")\n  },\n}\n","import { detect } from \"@antfu/ni\"\n\nexport async function getPackageManager(\n  targetDir: string\n): Promise<\"yarn\" | \"pnpm\" | \"bun\" | \"npm\"> {\n  const packageManager = await detect({ programmatic: true, cwd: targetDir })\n\n  if (packageManager === \"yarn@berry\") return \"yarn\"\n  if (packageManager === \"pnpm@6\") return \"pnpm\"\n  if (packageManager === \"bun\") return \"bun\"\n\n  return packageManager ?? \"npm\"\n}\n","import path from \"path\"\nimport fs from \"fs-extra\"\nimport { type PackageJson } from \"type-fest\"\n\nexport function getPackageInfo() {\n  const packageJsonPath = path.join(\"package.json\")\n\n  return fs.readJSONSync(packageJsonPath) as PackageJson\n}\n"],"mappings":"AAAA,MAAO,gBACP,OAAS,WAAAA,MAAe,YCDxB,MAAO,gBACP,OAAS,cAAAC,EAAY,YAAYC,MAAU,KAC3C,OAAOC,MAAU,OAEjB,OAAOC,MAAc,kBAErB,OAAS,WAAAC,MAAe,YACxB,OAAOC,MAAS,MAChB,OAAS,SAAAC,MAAa,QACtB,OAAOC,MAAa,UCTb,IAAMC,EAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ECA/B,OAAOC,MAAW,QAEX,IAAMC,EAAS,CACpB,SAASC,EAAiB,CACxB,QAAQ,IAAIF,EAAM,IAAI,GAAGE,CAAI,CAAC,CAChC,EACA,QAAQA,EAAiB,CACvB,QAAQ,IAAIF,EAAM,OAAO,GAAGE,CAAI,CAAC,CACnC,EACA,QAAQA,EAAiB,CACvB,QAAQ,IAAIF,EAAM,KAAK,GAAGE,CAAI,CAAC,CACjC,EACA,WAAWA,EAAiB,CAC1B,QAAQ,IAAIF,EAAM,MAAM,GAAGE,CAAI,CAAC,CAClC,EACA,OAAQ,CACN,QAAQ,IAAI,EAAE,CAChB,CACF,EFNA,OAAiB,KAAAC,MAAS,MGZ1B,OAAS,UAAAC,MAAc,YAEvB,eAAsBC,EACpBC,EAC0C,CAC1C,IAAMC,EAAiB,MAAMH,EAAO,CAAE,aAAc,GAAM,IAAKE,CAAU,CAAC,EAE1E,OAAIC,IAAmB,aAAqB,OACxCA,IAAmB,SAAiB,OACpCA,IAAmB,MAAc,MAE9BA,GAAkB,KAC3B,CHIA,QAAQ,GAAG,SAAU,IAAM,QAAQ,KAAK,CAAC,CAAC,EAC1C,QAAQ,GAAG,UAAW,IAAM,QAAQ,KAAK,CAAC,CAAC,EAI3C,IAAMC,EAA0B,+CAK1BC,EAAkBC,EAAE,OAAO,CAC/B,GAAIA,EAAE,OAAO,EACb,IAAKA,EAAE,OAAO,CAChB,CAAC,EAED,QAAQ,IAAIC,EAAS,OAAQ,MAAM,EAAEC,CAAe,CAAC,EAE9C,IAAMC,EAAM,IAAIC,EAAQ,EAE5B,KAAK,KAAK,EACV,YAAY,uCAAuC,EACnD,SAAS,WAAY,6CAA6C,EAElE,OACC,kBACA,4DACA,QAAQ,IAAI,CACd,EACC,OAAO,MAAOC,EAAIC,IAAS,CAC1B,IAAMC,EAAUR,EAAgB,MAAM,CACpC,GAAAM,EACA,GAAGC,CACL,CAAC,EAEKE,EAAaC,EAAK,QAAQF,EAAQ,GAAG,EACtCG,EAAWF,CAAU,IACxBG,EAAO,MAAM,eAAeH,sBAA+B,EAC3D,QAAQ,KAAK,CAAC,GAEhB,IAAII,EAAa,aACXC,EAAkB,QAAQ,IAAI,IAAMN,EAAQ,IAElD,GAAI,CACF,GAAI,CAACM,EACHF,EAAO,KAAK,0CAA0CH,IAAa,MAC9D,CAEL,GAAM,CAAE,IAAAM,CAAI,EAAI,MAAMC,EAAQ,CAC5B,KAAM,OACN,KAAM,MACN,QAAS,uCACT,KAAM,aAER,CAAC,EACGD,IACFF,EAAaE,GAIjB,IAAME,EAAQP,EAAK,KAAKD,EAAYI,CAAU,EACxCK,EAAWR,EAAK,KAAKO,EAAO,SAAS,EAEvCE,EAAiB,MADF,MAAM,MAAMpB,CAAwB,GACjB,KAAK,EAC3C,QAAQ,IAAI,CAAC,QAAAoB,CAAO,CAAC,EACrB,IAAMC,EAAqBD,EAAQ,KAAME,GAAMA,EAAE,KAAOb,EAAQ,EAAE,EAQlE,GAPKY,IACHR,EAAO,MAAM,2CAA2C,EACxD,QAAQ,KAAK,CAAC,GAGFD,EAAWO,CAAQ,EAEtB,CAET,GAAM,CAAE,QAAAI,CAAQ,EAAI,MAAMN,EAAQ,CAChC,KAAM,UACN,KAAM,UACN,QAAS,yDACT,QAAS,EACX,CAAC,EAEIM,IACHV,EAAO,KACL,0DACF,EACA,QAAQ,KAAK,CAAC,QAGhB,MAAMW,EAAG,MAAML,EAAU,CAAE,UAAW,EAAK,CAAC,EAE9C,IAAMM,EAAgC,CAAC,EAEjCC,EAAiBL,EAAmB,MAAM,CAAC,EAAE,KAAK,KAClDM,EACJN,EAAmB,MAAM,CAAC,EAAE,KAAK,SAAS,CAAC,EAAE,QACzCO,EAAiBjB,EAAK,KAAKQ,EAAUO,CAAc,EACpDG,EAAc,CAAC,EACjBR,EAAmB,CAAC,IACrBQ,EAAaR,EAAmB,MAAM,CAAC,EAAE,OAG3CI,EAAY,KAAK,CACf,aAAcE,EACd,UAAWC,CACb,CAAC,EAED,IAAME,EAAuB,CAAC,EACJD,EACf,IAAKE,GAAQ,CACtB,IAAMC,EAAkBD,EAAI,KACtBE,EAAqBF,EAAI,SAAS,CAAC,EAAE,QACrCG,EAAkBvB,EAAK,KAAKQ,EAAUa,CAAe,EAC3DP,EAAY,KAAK,CACf,aAAcQ,EACd,UAAWC,CACb,CAAC,CACH,CAAC,EACD,IAAMC,EAAUC,EAAI,4BAA4B,EAChDD,EAAQ,MAAM,EACd,IAAME,EAAyBhB,EAAmB,aAC7CI,EAGHA,EAAY,IAAI,MAAO,CAAE,aAAAa,EAAc,UAAAC,CAAU,IAAM,CACrD,MAAMf,EAAG,UAAU,GAAGe,QAAiBD,CAAY,CACrD,CAAC,EAJDzB,EAAO,KAAK,qBAAqB,EAMnC,IAAM2B,EAAiB,MAAMC,EAAkB/B,CAAU,EAczD,GAbI2B,GAAc,QAChB,MAAMK,EAAM,GAAGF,IAAkB,CAAC,UAAW,GAAGH,CAAY,EAAG,CAC7D,IAAK,QAAQ,IAAI,CACnB,CAAC,EAEHF,EAAQ,KAAK,EACTE,EAAa,SACfxB,EAAO,KAAK,kBAAkBwB,EAAa,cAAc,EACzDA,EAAa,IAAKN,GAAQ,CACxBlB,EAAO,QAAQ,MAAMkB,GAAK,CAC5B,CAAC,GAGCN,EAAa,CACf,IAAMkB,EAAgBxB,EAAS,MAAM,GAAG,EAClCyB,EAAWD,EAAcA,EAAc,OAAS,CAAC,EAAI,IAAOA,EAAcA,EAAc,OAAS,CAAC,EAExG9B,EAAO,KAAK,gBAAgBY,EAAY,0BAA0BmB,GAAU,EAC5EnB,EAAY,IAAKoB,GAAU,CACzB,IAAMC,EAAaD,EAAM,UAAU,MAAM,GAAG,EACtCE,EAAYD,EAAWA,EAAW,OAAS,CAAC,EAClDjC,EAAO,QAAQ,MAAMkC,GAAW,CAClC,CAAC,EAEHZ,EAAQ,QAAQ,wBAAwB,CAC1C,OAASa,EAAP,CACAnC,EAAO,MAAM,oBAAoB,EACjC,QAAQ,IAAI,UAAWmC,CAAG,CAC5B,CACF,CAAC,EI7KH,OAAOC,MAAU,OACjB,OAAOC,MAAQ,WAGR,SAASC,GAAiB,CAC/B,IAAMC,EAAkBH,EAAK,KAAK,cAAc,EAEhD,OAAOC,EAAG,aAAaE,CAAe,CACxC,CLFA,QAAQ,GAAG,SAAU,IAAM,QAAQ,KAAK,CAAC,CAAC,EAC1C,QAAQ,GAAG,UAAW,IAAM,QAAQ,KAAK,CAAC,CAAC,EAE3C,eAAeC,GAAO,CACpB,IAAMC,EAAc,MAAMC,EAAe,EAEnCC,EAAU,IAAIC,EAAQ,EACzB,KAAK,QAAQ,EACb,YAAY,oCAAoC,EAChD,QACCH,EAAY,SAAW,QACvB,gBACA,4BACF,EAEFE,EAAQ,WAAWE,CAAG,EAEtBF,EAAQ,MAAM,CAChB,CAEAH,EAAK","names":["Command","existsSync","fs","path","gradient","Command","ora","execa","prompts","FARMUI_GRAFFITI","chalk","logger","args","z","detect","getPackageManager","targetDir","packageManager","COMPONENT_REGISTERY_URL","addCommandInput","z","gradient","FARMUI_GRAFFITI","add","Command","id","opts","options","custom_cwd","path","existsSync","logger","defaultDir","custom_cwd_flag","dir","prompts","path_","root_dir","comp_db","select_files_by_id","x","proceed","fs","path_to_add","root_comp_name","root_comp_content","root_comp_path","child_comp","child_path","dep","child_comp_name","child_comp_content","child_comp_path","spinner","ora","dependencies","comp_content","comp_path","packageManager","getPackageManager","execa","path_for_comp","last_two","comps","comp_names","comp_name","err","path","fs","getPackageInfo","packageJsonPath","main","packageInfo","getPackageInfo","program","Command","add"]}
\ No newline at end of file
diff --git a/packages/cli/src/commands/add.ts b/packages/cli/src/commands/add.ts
index a0e875a9..c869c532 100644
--- a/packages/cli/src/commands/add.ts
+++ b/packages/cli/src/commands/add.ts
@@ -77,6 +77,7 @@ export const add = new Command()
       const root_dir = path.join(path_, "/farmui");
       const comp_fetch = await fetch(COMPONENT_REGISTERY_URL!);
       let comp_db: any[] = await comp_fetch.json();
+      console.log({comp_db})
       const select_files_by_id = comp_db.find((x) => x.id === options.id);
       if (!select_files_by_id) {
         logger.error("No such component exists with in this ID.");
@@ -109,7 +110,11 @@ export const add = new Command()
       const root_comp_content =
         select_files_by_id.files[0].root.contents[0].content;
       const root_comp_path = path.join(root_dir, root_comp_name);
-      const child_comp = select_files_by_id.files[1].child;
+      let  child_comp  = []
+      if(select_files_by_id[1]) {
+        child_comp = select_files_by_id.files[1].child;
+
+      }
       path_to_add.push({
         comp_content: root_comp_content,
         comp_path: root_comp_path,

From 41999cb858339e75cfd92aaaebaa516b5fe04956 Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Fri, 31 May 2024 17:56:19 +0300
Subject: [PATCH 11/12] fix: cli

---
 packages/cli/package.json        | 2 +-
 packages/cli/src/commands/add.ts | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/cli/package.json b/packages/cli/package.json
index 23b0e6ee..683b8994 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kinfe123/farm-ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Add farmui components and building blocks",
   "main": "index.js",
   "publishConfig": {
diff --git a/packages/cli/src/commands/add.ts b/packages/cli/src/commands/add.ts
index c869c532..b5d55f82 100644
--- a/packages/cli/src/commands/add.ts
+++ b/packages/cli/src/commands/add.ts
@@ -77,7 +77,6 @@ export const add = new Command()
       const root_dir = path.join(path_, "/farmui");
       const comp_fetch = await fetch(COMPONENT_REGISTERY_URL!);
       let comp_db: any[] = await comp_fetch.json();
-      console.log({comp_db})
       const select_files_by_id = comp_db.find((x) => x.id === options.id);
       if (!select_files_by_id) {
         logger.error("No such component exists with in this ID.");

From 49c2d06c46a7b91e917a67b20101e02891b1c57c Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Fri, 31 May 2024 17:58:10 +0300
Subject: [PATCH 12/12] fix: cli

---
 packages/cli/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/package.json b/packages/cli/package.json
index 683b8994..2c893ce0 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kinfe123/farm-ui",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Add farmui components and building blocks",
   "main": "index.js",
   "publishConfig": {