From 9e4db22b2d169a83a362c21864efc4a9d805d381 Mon Sep 17 00:00:00 2001
From: Boris Vorob <boris.perepelita@dev>
Date: Thu, 5 Dec 2024 14:45:33 +0200
Subject: [PATCH] docs: update landing page

---
 .gitignore                   | 1 +
 docs/src/app/layout.tsx      | 6 +++---
 docs/src/app/page.md         | 8 +++++---
 docs/src/components/hero.tsx | 7 ++++---
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/.gitignore b/.gitignore
index 76ef19b..36826f9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,6 +18,7 @@ out/
 build
 
 # misc
+.idea/
 .DS_Store
 *.pem
 
diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
index 2166205..8348df1 100644
--- a/docs/src/app/layout.tsx
+++ b/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({
diff --git a/docs/src/app/page.md b/docs/src/app/page.md
index 8cb1065..cc95d26 100644
--- a/docs/src/app/page.md
+++ b/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 /%}
 
diff --git a/docs/src/components/hero.tsx b/docs/src/components/hero.tsx
index 85e3dba..262f4f3 100644
--- a/docs/src/components/hero.tsx
+++ b/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">