ui for onboarding

apps/dashboard/src/app/(onboarding)/onboarding/verify/page.tsx

@@ -0,0 +1,75 @@
+import { ButtonContainer } from '@/components/button-container';
+import { Button, LinkButton } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import type { CheckboxProps } from '@radix-ui/react-checkbox';
+import Link from 'next/link';
+
+import OnboardingLayout, {
+  OnboardingDescription,
+} from '../../onboarding-layout';
+
+function CheckboxGroup({
+  label,
+  description,
+  ...props
+}: { label: string; description: string } & CheckboxProps) {
+  const randId = Math.random().toString(36).substring(7);
+  return (
+    <label
+      className="flex gap-4 py-6 transition-colors hover:bg-slate-100"
+      htmlFor={randId}
+    >
+      <div>
+        <Checkbox {...props} id={randId} />
+      </div>
+      <div>
+        <div className="mb-1 mt-0.5 font-medium leading-none">{label}</div>
+        <div className="text-sm text-muted-foreground">{description}</div>
+      </div>
+    </label>
+  );
+}
+
+const Tracking = () => {
+  return (
+    <OnboardingLayout
+      title="Verify that you get events"
+      description={
+        <OnboardingDescription>
+          Create your account and start taking control of your data.
+        </OnboardingDescription>
+      }
+    >
+      <div className="flex flex-col divide-y">
+        <CheckboxGroup
+          label="Website"
+          description="Track events and conversion for your website"
+        />
+        <CheckboxGroup
+          label="App"
+          description="Track events and conversion for your app"
+        />
+        <CheckboxGroup
+          label="Backend"
+          description="Track events and conversion for your backend/api"
+        />
+      </div>
+
+      <ButtonContainer>
+        <LinkButton
+          href="/onboarding/connect"
+          size="lg"
+          className="min-w-28 self-start"
+          variant={'secondary'}
+        >
+          Back
+        </LinkButton>
+        <LinkButton href="/" size="lg" className="min-w-28 self-start">
+          Your dashboard
+        </LinkButton>
+      </ButtonContainer>
+    </OnboardingLayout>
+  );
+};
+
+export default Tracking;