chore: added a banner to the docs website

docs/src/app/layout.tsx

@@ -27,10 +27,10 @@ export const metadata: Metadata = {
   metadataBase: new URL("https://builder.coltorapps.com"),
   title: {
     template: "React Form Builder | %s - Docs",
-    default: "React Form Builder | Dynamic JSON-based UI with Drag and Drop.",
+    default: "React Form Builder | Drag and drop form builder with JSON schema form.",
   },
   description:
-    "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",
+    "React Form Builder. React Native Form Builder. Develop your own Drag and Drop form builder, websites builder, dashboards builder and more. Generate JSON schema form, 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 generate dynamic UI from JSON schema, drag and drop React UI builders, and any other builders you envision.
+**Builder** is a versatile React and React Native library designed for crafting drag and drop form builders and JSON schema forms. You can also generate dynamic UI from JSON schema and any other builders you envision.
 
 Some key characteristics:
 
@@ -37,11 +37,11 @@ Learn how to get started with Builder through our guides. {% .lead %}
 
 ---
 
-## Demo of a React Form Builder with Drag and Drop
+## Demo of a React Drag and Drop Form Builder
 
-Here is a live demo of a simple **React Form Builder Drag and Drop** interface created using `shadcn` components for UI and `dnd-kit`.
+Here is a live demo of a simple **React Drag and Drop Form Builder** 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.
+In the **Preview Form** -> **Schema** section you can get an idea of how to generate React forms dynamically from a JSON schema, making it easy to create and customize forms for your applications.
 
 {% basic-form-builder /%}
 

docs/src/components/hero.tsx

@@ -32,7 +32,7 @@ function TrafficLightsIcon(props: React.ComponentPropsWithoutRef<"svg">) {
 
 export function Hero() {
   return (
-    <div className="overflow-hidden bg-neutral-950 dark:-mb-32 dark:mt-[-4.75rem] dark:pb-32 dark:pt-[4.75rem]">
+    <div className="overflow-hidden bg-neutral-950 dark:-mb-32 dark:mt-[-4.75rem] dark:pb-32 dark:pt-24">
       <div className="py-16 sm:px-2 lg:relative lg:px-0 lg:py-20">
         <div className="lg:max-w-8xl xl:gap-x-18 mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-8 gap-y-40 px-4 md:max-w-3xl lg:grid-cols-2 lg:px-8 xl:px-12">
           <div className="relative z-10 md:text-center lg:text-left">

docs/src/components/layout.tsx

@@ -10,8 +10,6 @@ import { Navigation } from "@/components/navigation";
 import { Search } from "@/components/search";
 import clsx from "clsx";
 
-import { Button } from "./ui/button";
-
 function GitHubIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   return (
     <svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
@@ -93,15 +91,6 @@ function Header() {
         >
           <GitHubIcon className="h-6 w-6 fill-neutral-400 group-hover:fill-neutral-500 dark:group-hover:fill-neutral-300" />
         </Link>
-        <Button variant="secondary" asChild>
-          <a
-            href="https://www.coltorapps.com/#contacts"
-            target="_blank"
-            className="hidden lg:inline-block"
-          >
-            Contact us
-          </a>
-        </Button>
       </div>
     </header>
   );
@@ -113,6 +102,58 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
   return (
     <div className="flex w-full flex-col">
+      <div className="relative isolate flex items-center gap-x-6 overflow-hidden bg-blue-950 py-2.5 px-3.5 sm:before:flex-1">
+        <div
+          aria-hidden="true"
+          className="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
+        >
+          <div
+            style={{
+              clipPath:
+                "polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
+            }}
+            className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-cyan-300 to-blue-300 opacity-50"
+          />
+        </div>
+        <div
+          aria-hidden="true"
+          className="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
+        >
+          <div
+            style={{
+              clipPath:
+                "polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
+            }}
+            className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-cyan-300 to-blue-300 opacity-50"
+          />
+        </div>
+        <div className="flex flex-wrap items-center sm:gap-x-4 gap-y-2 text-[0.8125rem] sm:text-sm">
+          <p className="font-medium text-white">
+            We are{" "}
+            <a
+              className="font-bold underline"
+              href="https://www.coltorapps.com/"
+            >
+              Coltor Apps
+            </a>
+            {" "}― a software development agency behind this OSS. Need a reliable tech partner?
+          </p>
+          <a
+            href="mailto:[email protected]"
+            className="flex-none rounded-full bg-gray-900 px-3.5 py-1 font-semibold text-white shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
+          >
+            Let’s talk <span aria-hidden="true">&rarr;</span>
+          </a>
+        </div>
+        <div className="flex flex-1 justify-end">
+          <button
+            type="button"
+            className="-m-3 p-3 focus-visible:outline-offset-[-4px]"
+          >
+            <span className="sr-only">Dismiss</span>
+          </button>
+        </div>
+      </div>
       <Header />
 
       {isHomePage && <Hero />}

docs/src/components/logo.tsx

@@ -64,13 +64,15 @@ export function Logo(props: React.ComponentPropsWithoutRef<"svg">) {
         stroke="url(#paint0_linear_309_51)"
         strokeWidth="2"
         strokeMiterlimit="10"
+        strokeLinecap="round"
         fill="transparent"
       />
       <path
         d="M8.5 15.5827L19 21.4167M8.5 15.5827L18.5144 10.0198C18.8164 9.852 19.1836 9.85201 19.4856 10.0198L29.5 15.5833M8.5 15.5827V27.8277C8.5 28.1909 8.69688 28.5255 9.01432 28.7018L19 34.25M19 21.4167L29.5 15.5833M19 21.4167V34.25M29.5 15.5833V27.8283C29.5 28.1914 29.3031 28.5261 28.9856 28.7024L19 34.25"
         stroke="url(#paint1_linear_309_51)"
         strokeWidth="3"
         strokeMiterlimit="10"
+        strokeLinecap="round"
         fill="transparent"
       />
       <defs>