docs: update landing page

.gitignore

@@ -18,6 +18,7 @@ out/
 build
 
 # misc
+.idea/
 .DS_Store
 *.pem
 

docs/src/app/layout.tsx

@@ -26,11 +26,11 @@ const lexend = localFont({
 export const metadata: Metadata = {
   metadataBase: new URL("https://builder.coltorapps.com"),
   title: {
-    template: "%s - Docs",
-    default: "React Form Builder",
+    template: "React Form Builder | %s - Docs",
+    default: "React Form Builder | Dynamic JSON-based UI with Drag and Drop.",
   },
   description:
-    "React Form Builder. React Native Form Builder. Develop your own dynamic forms builder, websites builder, dashboards builder, UIs builder.",
+    "React Form Builder. React Native Form Builder. Develop your own dynamic forms builder, websites builder, dashboards builder, UIs builder. Drag-and-drop functionality, generate JSON schema, and seamless integration with React and Next.js",
 };
 
 export default function RootLayout({

docs/src/app/page.md

@@ -1,6 +1,6 @@
 ## Overview
 
-**Builder** is a versatile React and React Native library designed for crafting dynamic form builders and much more. You can also develop dynamic website builders, dashboard builders, and any other builders you envision.
+**Builder** is a versatile React and React Native library designed for crafting dynamic form builders and much more. You can also generate dynamic UI from JSON schema, drag and drop React UI builders, and any other builders you envision.
 
 Some key characteristics:
 
@@ -37,9 +37,11 @@ Learn how to get started with Builder through our guides. {% .lead %}
 
 ---
 
-## React Form Builder Demo
+## Demo of a React Form Builder with Drag and Drop
 
-Here is a live demo of a simple React form builder created using `shadcn` components for UI, and `dnd-kit` for drag and drop.
+Here is a live demo of a simple **React Form Builder Drag and Drop** interface created using `shadcn` components for UI and `dnd-kit`.
+
+In the **Preview Form** -> **Schema** section you can get an idea of how to generate React forms dynamically from JSON, making it easy to create and customize forms for your applications.
 
 {% basic-form-builder /%}
 

docs/src/components/hero.tsx

@@ -46,10 +46,10 @@ export function Hero() {
               priority
             />
             <div className="relative xl:pr-24">
-              <h1 className="font-display inline bg-gradient-to-t from-slate-400 to-white bg-clip-text text-3xl md:text-4xl tracking-tight text-transparent">
+              <h1 className="font-display inline bg-gradient-to-t from-slate-400 to-white bg-clip-text text-3xl tracking-tight text-transparent md:text-4xl">
                 React Form Builder
               </h1>
-              <h2 className="mt-3 md:text-2xl tracking-tight text-neutral-400">
+              <h2 className="mt-3 tracking-tight text-neutral-400 md:text-2xl">
                 <span className="not-sr-only">
                   Develop your dynamic{" "}
                   <WordRotate
@@ -60,7 +60,8 @@ export function Hero() {
                 </span>
                 <span className="sr-only">
                   Develop your own dynamic forms builder, websites builder,
-                  dashboards builder, UIs builder.
+                  dashboards builder. Dynamic UI form JSON. Drag and drop react
+                  builder. Generate UI from JSON schema.
                 </span>
               </h2>
               <div className="mt-8 flex gap-4 md:justify-center lg:justify-start">