From 34c1b2581d648ae805023f20b8cf52d61f6705f1 Mon Sep 17 00:00:00 2001
From: sandulat <alex@sandulat.com>
Date: Mon, 12 May 2025 10:49:04 +0300
Subject: [PATCH] chore: added a banner to the docs website

---
 docs/src/app/layout.tsx        |  4 +--
 docs/src/app/page.md           |  8 ++---
 docs/src/components/hero.tsx   |  2 +-
 docs/src/components/layout.tsx | 63 ++++++++++++++++++++++++++++------
 docs/src/components/logo.tsx   |  2 ++
 5 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
index 8348df1..f99b5c2 100644
--- a/docs/src/app/layout.tsx
+++ b/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({
diff --git a/docs/src/app/page.md b/docs/src/app/page.md
index cc95d26..1f6c02d 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 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 /%}
 
diff --git a/docs/src/components/hero.tsx b/docs/src/components/hero.tsx
index 262f4f3..8b4bf0e 100644
--- a/docs/src/components/hero.tsx
+++ b/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">
diff --git a/docs/src/components/layout.tsx b/docs/src/components/layout.tsx
index e5a24dd..d2f2a19 100644
--- a/docs/src/components/layout.tsx
+++ b/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:hello@coltorapps.com"
+            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 />}
diff --git a/docs/src/components/logo.tsx b/docs/src/components/logo.tsx
index 04bb27d..7f2d54d 100644
--- a/docs/src/components/logo.tsx
+++ b/docs/src/components/logo.tsx
@@ -64,6 +64,7 @@ export function Logo(props: React.ComponentPropsWithoutRef<"svg">) {
         stroke="url(#paint0_linear_309_51)"
         strokeWidth="2"
         strokeMiterlimit="10"
+        strokeLinecap="round"
         fill="transparent"
       />
       <path
@@ -71,6 +72,7 @@ export function Logo(props: React.ComponentPropsWithoutRef<"svg">) {
         stroke="url(#paint1_linear_309_51)"
         strokeWidth="3"
         strokeMiterlimit="10"
+        strokeLinecap="round"
         fill="transparent"
       />
       <defs>