Add onboarding to examples page

examples/onboarding/src/components/Button.tsx

@@ -7,9 +7,11 @@ export function Button({
   text,
   onClick,
   disabled,
+  type = "button",
   ...props
 }: {
   text: string;
+  type?: "button" | "submit";
   onClick?: () => void;
   disabled?: boolean;
 }) {
@@ -17,7 +19,7 @@ export function Button({
     <button
       {...props}
       onClick={onClick}
-      type="button"
+      type={type}
       disabled={disabled}
       className={`${
         disabled ? disabledClasses : regularClasses

examples/onboarding/src/pages/NewEmployee.tsx

@@ -66,23 +66,23 @@ export function NewEmployee({
     <div className="w-96">
       <Stack>
         <NavigateBack />
-        <form>
+        <form className="grid gap-3">
           <TextInput
             label="Employee name"
             id="employee-name"
             value={employeeName}
             onChange={({ target: { value } }) => setEmployeeName(value)}
           />
+          <Button
+            type="submit"
+            disabled={!employeeName}
+            onClick={() => {
+              createEmployee();
+              navigate("/");
+            }}
+            text="Create Employee"
+          />
         </form>
-
-        <Button
-          disabled={!employeeName}
-          onClick={() => {
-            createEmployee();
-            navigate("/");
-          }}
-          text="Create Employee"
-        />
       </Stack>
     </div>
   );

homepage/homepage/app/examples/page.tsx

@@ -10,7 +10,11 @@ import {
   CloudUploadIcon,
   FingerprintIcon,
   FolderArchiveIcon,
+  Icon,
   ImageIcon,
+  LockIcon,
+  PencilLineIcon,
+  UserPlusIcon,
 } from "lucide-react";
 
 import {
@@ -73,6 +77,28 @@ const FormIllustration = () => (
   </div>
 );
 
+const OnboardingIllustration = () => (
+  <div className="flex h-full flex-col justify-center text-sm dark:bg-transparent">
+    <div className="mx-auto grid gap-3">
+      {[
+        { icon: UserPlusIcon, text: "Add new employee" },
+        {
+          icon: PencilLineIcon,
+          text: "Invite employee to fill in their profile",
+        },
+        { icon: LockIcon, text: "Get confirmation from admin" },
+      ].map(({ text, icon: Icon }, index) => (
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-green-800 bg-green-100 leading-none font-medium text-center p-1.5 block rounded-full dark:bg-green-800 dark:text-green-200">
+            <Icon strokeWidth={2} size={15} />
+          </span>
+          {text}
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
 const MusicIllustration = () => (
   <div className="flex flex-col items-center justify-center h-full p-8">
     <div className="p-3 w-[12rem] h-[8rem] border border-dashed border-blue dark:border-blue-500 rounded-lg flex gap-2 flex-col items-center justify-center">
@@ -322,6 +348,15 @@ const reactExamples: Example[] = [
     demoUrl: "https://form-demo.jazz.tools",
     illustration: <FormIllustration />,
   },
+  {
+    name: "HR Onboarding",
+    slug: "onboarding",
+    description:
+      "See how admin and writer permissions work while onboarding new employees",
+    tech: [tech.react],
+    features: [features.imageUpload, features.inviteLink],
+    illustration: <OnboardingIllustration />,
+  },
 ];
 
 const nextExamples: Example[] = [