onboarding completed

2024-04-16 11:41:15 +02:00
parent 97627583ec
commit 7d22d2ddad
79 changed files with 2542 additions and 805 deletions
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list-item.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list-item.tsx
@@ -1,22 +1,27 @@
 'use client';

 import { useState } from 'react';
+import { SerieIcon } from '@/components/report/chart/SerieIcon';
 import { Tooltiper } from '@/components/ui/tooltip';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useNumber } from '@/hooks/useNumerFormatter';
 import { cn } from '@/utils/cn';
 import Link from 'next/link';

-import type { IServiceCreateEventPayload } from '@openpanel/db';
+import type {
+  IServiceCreateEventPayload,
+  IServiceEventMinimal,
+} from '@openpanel/db';

 import { EventDetails } from './event-details';
 import { EventIcon } from './event-icon';

-type EventListItemProps = IServiceCreateEventPayload;
+type EventListItemProps = IServiceEventMinimal | IServiceCreateEventPayload;

 export function EventListItem(props: EventListItemProps) {
  const { organizationSlug, projectId } = useAppParams();
-  const { createdAt, name, path, duration, meta, profile } = props;
+  const { createdAt, name, path, duration, meta } = props;
+  const profile = 'profile' in props ? props.profile : null;
  const [isDetailsOpen, setIsDetailsOpen] = useState(false);

  const number = useNumber();
@@ -45,28 +50,50 @@ export function EventListItem(props: EventListItemProps) {
    return null;
  };

+  const isMinimal = 'minimal' in props;
+
  return (
    <>
-      <EventDetails
-        event={props}
-        open={isDetailsOpen}
-        setOpen={setIsDetailsOpen}
-      />
+      {!isMinimal && (
+        <EventDetails
+          event={props}
+          open={isDetailsOpen}
+          setOpen={setIsDetailsOpen}
+        />
+      )}
      <button
-        onClick={() => setIsDetailsOpen(true)}
+        onClick={() => {
+          if (!isMinimal) {
+            setIsDetailsOpen(true);
+          }
+        }}
        className={cn(
          'card hover:bg-light-background flex w-full items-center justify-between rounded-lg p-4 transition-colors',
          meta?.conversion &&
            `bg-${meta.color}-50 dark:bg-${meta.color}-900 hover:bg-${meta.color}-100 dark:hover:bg-${meta.color}-700`
        )}
      >
-        <div className="flex items-center gap-4 text-left text-sm">
-          <EventIcon size="sm" name={name} meta={meta} projectId={projectId} />
-          <span>
-            <span className="font-medium">{renderName()}</span>
-            {'  '}
-            {renderDuration()}
-          </span>
+        <div>
+          <div className="flex items-center gap-4 text-left text-sm">
+            <EventIcon
+              size="sm"
+              name={name}
+              meta={meta}
+              projectId={projectId}
+            />
+            <span>
+              <span className="font-medium">{renderName()}</span>
+              {'  '}
+              {renderDuration()}
+            </span>
+          </div>
+          <div className="pl-10">
+            <div className="flex origin-left scale-75 gap-1">
+              <SerieIcon name={props.country} />
+              <SerieIcon name={props.os} />
+              <SerieIcon name={props.browser} />
+            </div>
+          </div>
        </div>
        <div className="flex gap-4">
          <Tooltiper
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-listener.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-listener.tsx
@@ -1,20 +1,19 @@
 'use client';

-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { useAppParams } from '@/hooks/useAppParams';
+import useWS from '@/hooks/useWS';
 import { cn } from '@/utils/cn';
-import { useQueryClient } from '@tanstack/react-query';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
-import useWebSocket from 'react-use-websocket';
 import { toast } from 'sonner';

-import type { IServiceCreateEventPayload } from '@openpanel/db';
+import type { IServiceEventMinimal } from '@openpanel/db';

 const AnimatedNumbers = dynamic(() => import('react-animated-numbers'), {
  ssr: false,
@@ -24,21 +23,13 @@ const AnimatedNumbers = dynamic(() => import('react-animated-numbers'), {
 export default function EventListener() {
  const router = useRouter();
  const { projectId } = useAppParams();
-  const ws = String(process.env.NEXT_PUBLIC_API_URL)
-    .replace(/^https/, 'wss')
-    .replace(/^http/, 'ws');
  const [counter, setCounter] = useState(0);
-  const [socketUrl] = useState(`${ws}/live/events/${projectId}`);

-  useWebSocket(socketUrl, {
-    shouldReconnect: () => true,
-    onMessage(payload) {
-      const event = JSON.parse(payload.data) as IServiceCreateEventPayload;
-      if (event?.name) {
-        setCounter((prev) => prev + 1);
-        toast(`New event ${event.name} from ${event.country}!`);
-      }
-    },
+  useWS<IServiceEventMinimal>(`/live/events/${projectId}`, (event) => {
+    if (event?.name) {
+      setCounter((prev) => prev + 1);
+      toast(`New event ${event.name} from ${event.country}!`);
+    }
  });

  return (
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout.tsx
@@ -28,22 +28,16 @@ export default async function AppLayout({

  if (!organizations.find((item) => item.slug === organizationSlug)) {
    return (
-      <FullPageEmptyState
-        title="Could not find organization"
-        className="min-h-screen"
-      >
-        The organization you are looking for could not be found.
+      <FullPageEmptyState title="Not found" className="min-h-screen">
+        The organization you were looking for could not be found.
      </FullPageEmptyState>
    );
  }

  if (!projects.find((item) => item.id === projectId)) {
    return (
-      <FullPageEmptyState
-        title="Could not find project"
-        className="min-h-screen"
-      >
-        The project you are looking for could not be found.
+      <FullPageEmptyState title="Not found" className="min-h-screen">
+        The project you were looking for could not be found.
      </FullPageEmptyState>
    );
  }
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/profile/logout.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/profile/logout.tsx
@@ -1,8 +1,7 @@
 'use client';

-import { buttonVariants } from '@/components/ui/button';
+import SignOutButton from '@/components/sign-out-button';
 import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
-import { SignOutButton } from '@clerk/nextjs';

 export function Logout() {
  return (
@@ -14,10 +13,7 @@ export function Logout() {
        <p className="mb-4">
          Sometime&apos;s you need to go. See you next time
        </p>
-        <SignOutButton
-          // @ts-expect-error
-          className={buttonVariants({ variant: 'destructive' })}
-        />
+        <SignOutButton />
      </WidgetBody>
    </Widget>
  );
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/create-project.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/create-project.tsx
@@ -1,79 +0,0 @@
-'use client';
-
-import { LogoSquare } from '@/components/logo';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { useAppParams } from '@/hooks/useAppParams';
-import { api, handleError } from '@/trpc/client';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { SaveIcon } from 'lucide-react';
-import { useRouter } from 'next/navigation';
-import type { SubmitHandler } from 'react-hook-form';
-import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
-import { z } from 'zod';
-
-const validation = z.object({
-  name: z.string().min(1),
-});
-
-type IForm = z.infer<typeof validation>;
-
-export function CreateProject() {
-  const params = useAppParams();
-  const router = useRouter();
-  const form = useForm<IForm>({
-    resolver: zodResolver(validation),
-  });
-  const mutation = api.project.create.useMutation({
-    onError: handleError,
-    onSuccess() {
-      toast.success('Project created');
-      router.refresh();
-    },
-  });
-  const onSubmit: SubmitHandler<IForm> = (values) => {
-    mutation.mutate({
-      name: values.name,
-      organizationSlug: params.organizationSlug,
-    });
-  };
-
-  return (
-    <>
-      <div>
-        <LogoSquare className="mb-8 w-20 md:w-28" />
-        <h1 className="text-3xl font-medium">Create your first project</h1>
-        <div className="text-lg">
-          A project is just a container for your events. You can create as many
-          as you want.
-        </div>
-        <form
-          className="mt-8 flex flex-col gap-4"
-          onSubmit={form.handleSubmit(onSubmit)}
-        >
-          <div>
-            <Label>Project name</Label>
-            <Input
-              placeholder="My App"
-              size="large"
-              error={form.formState.errors.name?.message}
-              {...form.register('name')}
-            />
-          </div>
-          <div className="flex justify-end">
-            <Button
-              type="submit"
-              size="lg"
-              icon={SaveIcon}
-              loading={mutation.isLoading}
-            >
-              Create project
-            </Button>
-          </div>
-        </form>
-      </div>
-    </>
-  );
-}
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/page.tsx
@@ -1,16 +1,15 @@
-import { LogoSquare } from '@/components/logo';
+import { FullPageEmptyState } from '@/components/full-page-empty-state';
+import FullWidthNavbar from '@/components/full-width-navbar';
 import { ProjectCard } from '@/components/projects/project-card';
-import { SignOutButton } from '@clerk/nextjs';
+import SignOutButton from '@/components/sign-out-button';
 import { notFound, redirect } from 'next/navigation';

 import {
+  getCurrentOrganizations,
  getCurrentProjects,
  getOrganizationBySlug,
-  isWaitlistUserAccepted,
 } from '@openpanel/db';

-import { CreateProject } from './create-project';
-
 interface PageProps {
  params: {
    organizationSlug: string;
@@ -20,41 +19,25 @@ interface PageProps {
 export default async function Page({
  params: { organizationSlug },
 }: PageProps) {
-  const [organization, projects] = await Promise.all([
-    getOrganizationBySlug(organizationSlug),
+  const [organizations, projects] = await Promise.all([
+    getCurrentOrganizations(),
    getCurrentProjects(organizationSlug),
  ]);

-  if (!organization) {
-    return notFound();
-  }
+  const organization = organizations.find(
+    (org) => org.slug === organizationSlug
+  );

-  if (process.env.BLOCK) {
-    const isAccepted = await isWaitlistUserAccepted();
-    if (!isAccepted) {
-      return (
-        <div className="flex h-screen items-center justify-center p-4">
-          <div className="w-full max-w-lg">
-            <LogoSquare className="mb-8 w-20 md:w-28" />
-            <h1 className="text-3xl font-medium">Not quite there yet</h1>
-            <div className="text-lg">
-              We&apos;re still working on Openpanel, but we&apos;re not quite
-              there yet. We&apos;ll let you know when we&apos;re ready to go!
-            </div>
-          </div>
-        </div>
-      );
-    }
+  if (!organization) {
+    return (
+      <FullPageEmptyState title="Not found" className="min-h-screen">
+        The organization you were looking for could not be found.
+      </FullPageEmptyState>
+    );
  }

  if (projects.length === 0) {
-    return (
-      <div className="flex h-screen items-center justify-center p-4 ">
-        <div className="w-full max-w-lg">
-          <CreateProject />
-        </div>
-      </div>
-    );
+    return redirect('/onboarding');
  }

  if (projects.length === 1 && projects[0]) {
@@ -62,12 +45,16 @@ export default async function Page({
  }

  return (
-    <div className="mx-auto flex w-full max-w-xl flex-col gap-4 p-4 pt-20 ">
-      <SignOutButton />
-      <h1 className="text-xl font-medium">Select project</h1>
-      {projects.map((item) => (
-        <ProjectCard key={item.id} {...item} />
-      ))}
+    <div>
+      <FullWidthNavbar>
+        <SignOutButton />
+      </FullWidthNavbar>
+      <div className="mx-auto flex w-full max-w-xl flex-col gap-4 p-4 pt-20 ">
+        <h1 className="text-xl font-medium">Select project</h1>
+        {projects.map((item) => (
+          <ProjectCard key={item.id} {...item} />
+        ))}
+      </div>
    </div>
  );
 }
--- a/apps/dashboard/src/app/(app)/create-organization.tsx
+++ b/apps/dashboard/src/app/(app)/create-organization.tsx
@@ -1,150 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import AnimateHeight from '@/components/animate-height';
-import { CreateClientSuccess } from '@/components/clients/create-client-success';
-import { LogoSquare } from '@/components/logo';
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { Button, buttonVariants } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
-import { api, handleError } from '@/trpc/client';
-import { cn } from '@/utils/cn';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { SaveIcon, WallpaperIcon } from 'lucide-react';
-import { useRouter } from 'next/navigation';
-import type { SubmitHandler } from 'react-hook-form';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-const validation = z.object({
-  organization: z.string().min(3),
-  project: z.string().min(3),
-  cors: z.string().url().or(z.literal('')),
-});
-
-type IForm = z.infer<typeof validation>;
-
-export function CreateOrganization() {
-  const router = useRouter();
-  const [hasDomain, setHasDomain] = useState(true);
-  const form = useForm<IForm>({
-    resolver: zodResolver(validation),
-    defaultValues: {
-      organization: '',
-      project: '',
-      cors: '',
-    },
-  });
-  const mutation = api.onboarding.organziation.useMutation({
-    onError: handleError,
-  });
-  const onSubmit: SubmitHandler<IForm> = (values) => {
-    mutation.mutate({
-      ...values,
-      cors: hasDomain ? values.cors : null,
-    });
-  };
-
-  if (mutation.isSuccess && mutation.data.client) {
-    return (
-      <div className="card p-4 md:p-8">
-        <LogoSquare className="mb-4 w-20" />
-        <h1 className="text-3xl font-medium">Nice job!</h1>
-        <div className="mb-4">
-          You&apos;re ready to start using our SDK. Save the client ID and
-          secret (if you have any)
-        </div>
-        <CreateClientSuccess {...mutation.data.client} />
-        <div className="mt-4 flex gap-4">
-          <a
-            className={cn(buttonVariants({ variant: 'secondary' }), 'flex-1')}
-            href="https://docs.openpanel.dev/docs"
-            target="_blank"
-          >
-            Read docs
-          </a>
-          <Button
-            className="flex-1"
-            onClick={() => router.refresh()}
-            icon={WallpaperIcon}
-          >
-            Dashboard
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="card p-4 md:p-8">
-      <LogoSquare className="mb-4 w-20" />
-      <h1 className="text-3xl font-medium">Welcome to Openpanel</h1>
-      <div className="text-lg">
-        Create your organization below (can be personal or a company) and your
-        first project.
-      </div>
-      <Alert className="mt-8">
-        <AlertTitle>Free during beta</AlertTitle>
-        <AlertDescription>
-          Openpanel is free during beta. Check our{' '}
-          <a
-            href="https://openpanel.dev/#pricing"
-            target="_blank"
-            className="text-blue-600 underline"
-          >
-            pricing
-          </a>{' '}
-          if you&apos;re curious. We&apos;ll also have a free tier.
-        </AlertDescription>
-      </Alert>
-      <form
-        className="mt-8 flex flex-col gap-4"
-        onSubmit={form.handleSubmit(onSubmit)}
-      >
-        <div>
-          <Label>Organization name *</Label>
-          <Input
-            placeholder="Organization name"
-            error={form.formState.errors.organization?.message}
-            {...form.register('organization')}
-          />
-        </div>
-        <div>
-          <Label>Project name *</Label>
-          <Input
-            placeholder="Project name"
-            error={form.formState.errors.project?.message}
-            {...form.register('project')}
-          />
-        </div>
-
-        <div>
-          <Label className="flex items-center justify-between">
-            <span>Domain</span>
-            <Switch checked={hasDomain} onCheckedChange={setHasDomain} />
-          </Label>
-          <AnimateHeight open={hasDomain}>
-            <Input
-              placeholder="https://example.com"
-              error={form.formState.errors.cors?.message}
-              {...form.register('cors')}
-            />
-          </AnimateHeight>
-        </div>
-
-        <div className="flex justify-end">
-          <Button
-            type="submit"
-            size="lg"
-            icon={SaveIcon}
-            loading={mutation.isLoading}
-          >
-            Create
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-}
--- a/apps/dashboard/src/app/(app)/page.tsx
+++ b/apps/dashboard/src/app/(app)/page.tsx
@@ -1,41 +1,13 @@
-// import { CreateOrganization } from '@clerk/nextjs';
-
-import { LogoSquare } from '@/components/logo';
 import { redirect } from 'next/navigation';

-import { getCurrentOrganizations, isWaitlistUserAccepted } from '@openpanel/db';
-
-import { CreateOrganization } from './create-organization';
+import { getCurrentOrganizations } from '@openpanel/db';

 export default async function Page() {
  const organizations = await getCurrentOrganizations();
-  if (process.env.BLOCK) {
-    const isAccepted = await isWaitlistUserAccepted();
-    if (!isAccepted) {
-      return (
-        <div className="flex h-screen items-center justify-center">
-          <div className="w-full max-w-lg">
-            <LogoSquare className="mb-8 w-20 md:w-28" />
-            <h1 className="text-3xl font-medium">Not quite there yet</h1>
-            <div className="text-lg">
-              We&apos;re still working on Openpanel, but we&apos;re not quite
-              there yet. We&apos;ll let you know when we&apos;re ready to go!
-            </div>
-          </div>
-        </div>
-      );
-    }
-  }

  if (organizations.length > 0) {
    return redirect(`/${organizations[0]?.slug}`);
  }

-  return (
-    <div className="flex h-screen items-center justify-center">
-      <div className="w-full max-w-lg">
-        <CreateOrganization />
-      </div>
-    </div>
-  );
+  return redirect('/onboarding');
 }
--- a/apps/dashboard/src/app/(auth)/layout.tsx
+++ b/apps/dashboard/src/app/(auth)/layout.tsx
@@ -0,0 +1,22 @@
+import LiveEventsServer from './live-events';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const Page = ({ children }: Props) => {
+  return (
+    <>
+      <div className="bg-slate-100">
+        <div className="grid h-full md:grid-cols-[min(400px,40vw)_1fr]">
+          <div className="min-h-screen border-r border-r-background bg-gradient-to-r from-background to-slate-200 max-md:hidden">
+            <LiveEventsServer />
+          </div>
+          <div className="min-h-screen">{children}</div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Page;
--- a/apps/dashboard/src/app/(auth)/live-events/index.tsx
+++ b/apps/dashboard/src/app/(auth)/live-events/index.tsx
@@ -0,0 +1,12 @@
+import { getEvents, transformMinimalEvent } from '@openpanel/db';
+
+import LiveEvents from './live-events';
+
+const LiveEventsServer = async () => {
+  const events = await getEvents(
+    'SELECT * FROM events ORDER BY created_at LIMIT 30'
+  );
+  return <LiveEvents events={events.map(transformMinimalEvent)} />;
+};
+
+export default LiveEventsServer;
--- a/apps/dashboard/src/app/(auth)/live-events/live-events.tsx
+++ b/apps/dashboard/src/app/(auth)/live-events/live-events.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { useState } from 'react';
+import { EventListItem } from '@/app/(app)/[organizationSlug]/[projectId]/events/event-list-item';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import useWS from '@/hooks/useWS';
+import { AnimatePresence, motion } from 'framer-motion';
+
+import type { IServiceEventMinimal } from '@openpanel/db';
+
+type Props = {
+  events: IServiceEventMinimal[];
+};
+
+const LiveEvents = ({ events }: Props) => {
+  const [state, setState] = useState(events ?? []);
+  useWS<IServiceEventMinimal>('/live/events', (event) => {
+    setState((p) => [event, ...p].slice(0, 30));
+  });
+  return (
+    <ScrollArea className="h-screen">
+      <div className="text-background-foreground py-16 text-center text-2xl font-bold">
+        Real time data
+        <br />
+        at your fingertips
+      </div>
+      <AnimatePresence mode="popLayout" initial={false}>
+        <div className="flex flex-col gap-4 p-4">
+          {state.map((event) => (
+            <motion.div
+              key={event.id}
+              layout
+              initial={{ opacity: 0, x: -400, scale: 0.5 }}
+              animate={{ opacity: 1, x: 0, scale: 1 }}
+              exit={{ opacity: 0, x: 200, scale: 1.2 }}
+              transition={{ duration: 0.6, type: 'spring' }}
+            >
+              <EventListItem {...event} minimal />
+            </motion.div>
+          ))}
+        </div>
+      </AnimatePresence>
+    </ScrollArea>
+  );
+};
+
+export default LiveEvents;
--- a/apps/dashboard/src/app/(auth)/login/email-sign-in.tsx
+++ b/apps/dashboard/src/app/(auth)/login/email-sign-in.tsx
@@ -0,0 +1,89 @@
+import { useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { getClerkError } from '@/utils/clerk-error';
+import { useSignIn } from '@clerk/nextjs';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { captureMessage } from '@sentry/nextjs';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const validator = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+});
+
+type IForm = z.infer<typeof validator>;
+
+const EmailSignUp = () => {
+  const router = useRouter();
+  const { isLoaded, signIn, setActive } = useSignIn();
+
+  const form = useForm<IForm>({
+    resolver: zodResolver(validator),
+  });
+
+  useEffect(() => {
+    if (form.formState.errors.email?.message) {
+      toast.error(`Email: ${form.formState.errors.email?.message}`);
+    }
+  }, [form.formState.errors.email?.message]);
+
+  useEffect(() => {
+    if (form.formState.errors.password?.message) {
+      toast.error(`Password: ${form.formState.errors.password?.message}`);
+    }
+  }, [form.formState.errors.password?.message]);
+
+  return (
+    <form
+      className="flex flex-col gap-2"
+      onSubmit={form.handleSubmit(async (values) => {
+        if (!isLoaded) {
+          return toast.error('Sign in is not ready yet, please try again.');
+        }
+
+        try {
+          const result = await signIn.create({
+            identifier: values.email,
+            password: values.password,
+          });
+
+          if (result.status === 'complete') {
+            await setActive({ session: result.createdSessionId });
+            router.push('/');
+          } else {
+            captureMessage('Sign in failed', {
+              extra: {
+                status: result.status,
+              },
+            });
+          }
+        } catch (e) {
+          const error = getClerkError(e);
+          if (error?.message) {
+            toast.error(error.message);
+          }
+        }
+      })}
+    >
+      <Input
+        type="email"
+        placeholder="Email"
+        {...form.register('email')}
+        error={form.formState.errors.email?.message}
+      />
+      <Input
+        type="password"
+        placeholder="Password"
+        {...form.register('password')}
+        error={form.formState.errors.password?.message}
+      />
+      <Button type="submit">Sign in</Button>
+    </form>
+  );
+};
+
+export default EmailSignUp;
--- a/apps/dashboard/src/app/(auth)/login/page.client.tsx
+++ b/apps/dashboard/src/app/(auth)/login/page.client.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import { useSignIn } from '@clerk/nextjs';
+import type { OAuthStrategy } from '@clerk/nextjs/dist/types/server';
+import { toast } from 'sonner';
+
+import EmailSignUp from './email-sign-in';
+
+const PageClient = () => {
+  const { signIn } = useSignIn();
+
+  const signInWith = (strategy: OAuthStrategy) => {
+    if (!signIn) {
+      return toast.error('Sign in is not available at the moment');
+    }
+    return signIn.authenticateWithRedirect({
+      strategy,
+      redirectUrl: '/sso-callback',
+      redirectUrlComplete: '/',
+    });
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="card w-full p-8 md:max-w-sm">
+        <div className="mb-8 text-2xl font-bold">Sign in</div>
+        <div className="flex flex-col gap-4">
+          <button
+            onClick={() => signInWith('oauth_google')}
+            type="button"
+            className="group flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-gray-200 bg-white px-4 text-sm text-gray-600 transition-all hover:bg-gray-100"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              className="h-4 w-4"
+            >
+              <path
+                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                fill="#4285F4"
+              ></path>
+              <path
+                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                fill="#34A853"
+              ></path>
+              <path
+                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                fill="#FBBC05"
+              ></path>
+              <path
+                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                fill="#EA4335"
+              ></path>
+              <path d="M1 1h22v22H1z" fill="none"></path>
+            </svg>
+            <p className="">Continue with Google</p>
+          </button>
+          <button
+            onClick={() => signInWith('oauth_github')}
+            type="button"
+            className="group flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-black bg-black px-4 text-sm text-white transition-all hover:bg-black/70"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              className="h-4 w-4"
+            >
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
+            </svg>
+            <p className="">Continue with GitHub</p>
+          </button>
+          <div className="relative flex justify-center">
+            <div className="absolute top-2.5 h-px w-full bg-border"></div>
+            <div className="relative bg-background px-4 text-center text-sm text-gray-500">
+              or with email
+            </div>
+          </div>
+          <EmailSignUp />
+          <p className="text-sm text-gray-500">
+            No account?{' '}
+            <a
+              className="font-semibold text-gray-500 underline transition-colors hover:text-black"
+              href="/register"
+            >
+              Create one now
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PageClient;
--- a/apps/dashboard/src/app/(onboarding)/get-started/page.tsx
+++ b/apps/dashboard/src/app/(onboarding)/get-started/page.tsx
@@ -1,15 +1,15 @@
 import { auth } from '@clerk/nextjs';
 import { redirect } from 'next/navigation';

-import GetStartedClient from './get-started';
+import PageClient from './page.client';

 // Sign up
-const GetStarted = () => {
+const Page = () => {
  const session = auth();
  if (session.userId) {
    return redirect('/');
  }
-  return <GetStartedClient />;
+  return <PageClient />;
 };

-export default GetStarted;
+export default Page;
--- a/apps/dashboard/src/app/(auth)/register/email-sign-up.tsx
+++ b/apps/dashboard/src/app/(auth)/register/email-sign-up.tsx
@@ -0,0 +1,85 @@
+import { useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { pushModal } from '@/modals';
+import { getClerkError } from '@/utils/clerk-error';
+import { useSignUp } from '@clerk/nextjs';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const validator = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+});
+
+type IForm = z.infer<typeof validator>;
+
+const EmailSignUp = () => {
+  const { isLoaded, signUp } = useSignUp();
+
+  const form = useForm<IForm>({
+    resolver: zodResolver(validator),
+  });
+
+  useEffect(() => {
+    if (form.formState.errors.email?.message) {
+      toast.error(`Email: ${form.formState.errors.email?.message}`);
+    }
+  }, [form.formState.errors.email?.message]);
+
+  useEffect(() => {
+    if (form.formState.errors.password?.message) {
+      toast.error(`Password: ${form.formState.errors.password?.message}`);
+    }
+  }, [form.formState.errors.password?.message]);
+
+  return (
+    <form
+      className="flex flex-col gap-2"
+      onSubmit={form.handleSubmit(async (values) => {
+        if (!isLoaded) {
+          return toast.error('Sign up is not ready yet, please try again.');
+        }
+
+        try {
+          await signUp.create({
+            emailAddress: values.email,
+            password: values.password,
+          });
+
+          // Send the user an email with the verification code
+          await signUp.prepareEmailAddressVerification({
+            strategy: 'email_code',
+          });
+
+          pushModal('VerifyEmail', {
+            email: values.email,
+          });
+        } catch (e) {
+          const error = getClerkError(e);
+          if (error?.message) {
+            toast.error(error.message);
+          }
+        }
+      })}
+    >
+      <Input
+        type="email"
+        placeholder="Email"
+        {...form.register('email')}
+        error={form.formState.errors.email?.message}
+      />
+      <Input
+        type="password"
+        placeholder="Password"
+        {...form.register('password')}
+        error={form.formState.errors.password?.message}
+      />
+      <Button type="submit">Create account</Button>
+    </form>
+  );
+};
+
+export default EmailSignUp;
--- a/apps/dashboard/src/app/(auth)/register/page.client.tsx
+++ b/apps/dashboard/src/app/(auth)/register/page.client.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import { useSignIn } from '@clerk/nextjs';
+import type { OAuthStrategy } from '@clerk/nextjs/dist/types/server';
+import { toast } from 'sonner';
+
+import EmailSignUp from './email-sign-up';
+
+const PageClient = () => {
+  const { signIn } = useSignIn();
+
+  const signInWith = (strategy: OAuthStrategy) => {
+    if (!signIn) {
+      return toast.error('Sign in is not available at the moment');
+    }
+    return signIn.authenticateWithRedirect({
+      strategy,
+      redirectUrl: '/sso-callback',
+      redirectUrlComplete: '/',
+    });
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="card w-full p-8 md:max-w-sm">
+        <div className="mb-8 text-2xl font-bold">Create an account</div>
+        <div className="flex flex-col gap-4">
+          <button
+            onClick={() => signInWith('oauth_google')}
+            type="button"
+            className="group flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-gray-200 bg-white px-4 text-sm text-gray-600 transition-all hover:bg-gray-100"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              className="h-4 w-4"
+            >
+              <path
+                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                fill="#4285F4"
+              ></path>
+              <path
+                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                fill="#34A853"
+              ></path>
+              <path
+                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                fill="#FBBC05"
+              ></path>
+              <path
+                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                fill="#EA4335"
+              ></path>
+              <path d="M1 1h22v22H1z" fill="none"></path>
+            </svg>
+            <p className="">Continue with Google</p>
+          </button>
+          <button
+            onClick={() => signInWith('oauth_github')}
+            type="button"
+            className="group flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-black bg-black px-4 text-sm text-white transition-all hover:bg-black/70"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              className="h-4 w-4"
+            >
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
+            </svg>
+            <p className="">Continue with GitHub</p>
+          </button>
+          <div className="relative flex justify-center">
+            <div className="absolute top-2.5 h-px w-full bg-border"></div>
+            <div className="relative bg-background px-4 text-center text-sm text-gray-500">
+              or with email
+            </div>
+          </div>
+          <EmailSignUp />
+          <p className="text-sm text-gray-500">
+            Already have an account?{' '}
+            <a
+              className="font-semibold text-gray-500 transition-colors hover:text-black"
+              href="/login"
+            >
+              Sign in
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PageClient;
--- a/apps/dashboard/src/app/(auth)/register/page.tsx
+++ b/apps/dashboard/src/app/(auth)/register/page.tsx
@@ -0,0 +1,15 @@
+import { auth } from '@clerk/nextjs';
+import { redirect } from 'next/navigation';
+
+import PageClient from './page.client';
+
+// Sign up
+const Page = () => {
+  const session = auth();
+  if (session.userId) {
+    return redirect('/');
+  }
+  return <PageClient />;
+};
+
+export default Page;
--- a/apps/dashboard/src/app/(onboarding)/sso-callback/page.tsx
+++ b/apps/dashboard/src/app/(onboarding)/sso-callback/page.tsx
--- a/apps/dashboard/src/app/(onboarding)/get-started/get-started.tsx
+++ b/apps/dashboard/src/app/(onboarding)/get-started/get-started.tsx
@@ -1,97 +0,0 @@
-'use client';
-
-import { Button } from '@/components/ui/button';
-import { SignInButton, useSignIn, useSignUp } from '@clerk/nextjs';
-import type { OAuthStrategy } from '@clerk/nextjs/dist/types/server';
-import { toast } from 'sonner';
-
-import OnboardingLayout, { OnboardingDescription } from '../onboarding-layout';
-
-const GetStarted = () => {
-  const { signIn } = useSignIn();
-
-  const signInWith = (strategy: OAuthStrategy) => {
-    if (!signIn) {
-      return toast.error('Sign in is not available at the moment');
-    }
-    return signIn.authenticateWithRedirect({
-      strategy,
-      redirectUrl: '/sso-callback',
-      redirectUrlComplete: '/onboarding',
-    });
-  };
-
-  return (
-    <OnboardingLayout
-      title="Create your account"
-      description={
-        <OnboardingDescription>
-          Create your account and start taking control of your data.
-        </OnboardingDescription>
-      }
-    >
-      <div className="flex flex-col gap-4 md:max-w-sm">
-        <button
-          onClick={() => signInWith('oauth_google')}
-          type="button"
-          className="group flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-gray-200 bg-white px-4 text-sm text-gray-600 transition-all hover:bg-gray-100"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            className="h-4 w-4"
-          >
-            <path
-              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-              fill="#4285F4"
-            ></path>
-            <path
-              d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-              fill="#34A853"
-            ></path>
-            <path
-              d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-              fill="#FBBC05"
-            ></path>
-            <path
-              d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-              fill="#EA4335"
-            ></path>
-            <path d="M1 1h22v22H1z" fill="none"></path>
-          </svg>
-          <p className="">Continue with Google</p>
-        </button>
-        <button
-          onClick={() => signInWith('oauth_github')}
-          type="button"
-          className="group flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-black bg-black px-4 text-sm text-white transition-all hover:bg-black/70"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            fill="currentColor"
-            viewBox="0 0 24 24"
-            className="h-4 w-4"
-          >
-            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
-          </svg>
-          <p className="">Continue with GitHub</p>
-        </button>
-      </div>
-      <p className="mt-4 text-sm text-gray-500">
-        Already have an account?{' '}
-        <a
-          className="font-semibold text-gray-500 transition-colors hover:text-black"
-          href="/login"
-        >
-          Sign in
-        </a>
-      </p>
-    </OnboardingLayout>
-  );
-};
-
-export default GetStarted;
--- a/apps/dashboard/src/app/(onboarding)/layout.tsx
+++ b/apps/dashboard/src/app/(onboarding)/layout.tsx
@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import FullWidthNavbar from '@/components/full-width-navbar';

 import SkipOnboarding from './skip-onboarding';
 import Steps from './steps';
@@ -10,25 +10,24 @@ type Props = {
 const Page = ({ children }: Props) => {
  return (
    <>
-      <div className="absolute inset-0 hidden md:grid md:grid-cols-[30vw_1fr] lg:grid-cols-[30vw_1fr]">
+      <div className="fixed inset-0 hidden md:grid md:grid-cols-[30vw_1fr] lg:grid-cols-[30vw_1fr]">
        <div className=""></div>
        <div className="border-l border-border bg-background"></div>
      </div>
      <div className="relative min-h-screen bg-background md:bg-transparent">
-        <div className="border-b border-border bg-background">
-          <div className="mx-auto flex h-14 w-full items-center justify-between px-4 md:max-w-[95vw] lg:max-w-[80vw]">
-            <Logo />
-            <SkipOnboarding />
-          </div>
-        </div>
+        <FullWidthNavbar>
+          <SkipOnboarding />
+        </FullWidthNavbar>
        <div className="mx-auto w-full md:max-w-[95vw] lg:max-w-[80vw]">
          <div className="grid md:grid-cols-[25vw_1fr] lg:grid-cols-[20vw_1fr]">
            <div className="max-w-screen flex flex-col gap-4 overflow-hidden bg-slate-100 p-4 pr-0 md:bg-transparent md:py-14">
              <div>
-                <div className="text-xs font-bold uppercase text-slate-700">
+                <div className="text-xs font-bold uppercase text-[#7b94ac]">
                  Welcome to Openpanel
                </div>
-                <div className="text-xl font-medium">Get started</div>
+                <div className="text-xl font-medium leading-loose">
+                  Get started
+                </div>
              </div>
              <Steps />
            </div>
--- a/apps/dashboard/src/app/(onboarding)/onboarding-layout.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding-layout.tsx
@@ -25,7 +25,7 @@ const OnboardingLayout = ({
  return (
    <div className={cn('flex max-w-3xl flex-col gap-4', className)}>
      <div className="mb-4">
-        <h1 className="text-2xl font-medium">{title}</h1>
+        <h1 className="mb-2 text-3xl font-medium">{title}</h1>
        {description}
      </div>

--- a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-app.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-app.tsx
@@ -0,0 +1,59 @@
+import { pushModal } from '@/modals';
+import { SmartphoneIcon } from 'lucide-react';
+
+import type { IServiceClient } from '@openpanel/db';
+import { frameworks } from '@openpanel/sdk-info';
+
+type Props = {
+  client: IServiceClient | null;
+};
+
+const ConnectApp = ({ client }: Props) => {
+  return (
+    <div className="rounded-lg border p-4 md:p-6">
+      <div className="flex items-center gap-2 text-2xl capitalize">
+        <SmartphoneIcon />
+        App
+      </div>
+      <p className="mt-2 text-sm text-muted-foreground">
+        Pick a framework below to get started.
+      </p>
+      <div className="mt-4 grid gap-4 md:grid-cols-2">
+        {frameworks.app.map((framework) => (
+          <button
+            onClick={() =>
+              pushModal('Instructions', {
+                framework,
+                client,
+              })
+            }
+            className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
+            key={framework.name}
+          >
+            <div className="h-10 w-10 rounded-md bg-slate-200 p-2">
+              <img
+                className="h-full w-full object-contain"
+                src={framework.logo}
+                alt={framework.name}
+                width={32}
+                height={32}
+              />
+            </div>
+            <div className="flex-1 font-semibold">{framework.name}</div>
+          </button>
+        ))}
+      </div>
+      <p className="mt-2 text-xs text-muted-foreground">
+        Missing a framework?{' '}
+        <a
+          href="mailto:hello@openpanel.dev"
+          className="text-foreground underline"
+        >
+          Let us know!
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default ConnectApp;
--- a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-backend.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-backend.tsx
@@ -0,0 +1,59 @@
+import { pushModal } from '@/modals';
+import { ServerIcon } from 'lucide-react';
+
+import type { IServiceClient } from '@openpanel/db';
+import { frameworks } from '@openpanel/sdk-info';
+
+type Props = {
+  client: IServiceClient | null;
+};
+
+const ConnectBackend = ({ client }: Props) => {
+  return (
+    <div className="rounded-lg border p-4 md:p-6">
+      <div className="flex items-center gap-2 text-2xl capitalize">
+        <ServerIcon />
+        Backend
+      </div>
+      <p className="mt-2 text-sm text-muted-foreground">
+        Pick a framework below to get started.
+      </p>
+      <div className="mt-4 grid gap-4 md:grid-cols-2">
+        {frameworks.backend.map((framework) => (
+          <button
+            onClick={() =>
+              pushModal('Instructions', {
+                framework,
+                client,
+              })
+            }
+            className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
+            key={framework.name}
+          >
+            <div className="h-10 w-10 rounded-md bg-slate-200 p-2">
+              <img
+                className="h-full w-full object-contain"
+                src={framework.logo}
+                alt={framework.name}
+                width={32}
+                height={32}
+              />
+            </div>
+            <div className="flex-1 font-semibold">{framework.name}</div>
+          </button>
+        ))}
+      </div>
+      <p className="mt-2 text-xs text-muted-foreground">
+        Missing a framework?{' '}
+        <a
+          href="mailto:hello@openpanel.dev"
+          className="text-foreground underline"
+        >
+          Let us know!
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default ConnectBackend;
--- a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-web.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-web.tsx
@@ -0,0 +1,59 @@
+import { pushModal } from '@/modals';
+import { MonitorIcon } from 'lucide-react';
+
+import type { IServiceClient } from '@openpanel/db';
+import { frameworks } from '@openpanel/sdk-info';
+
+type Props = {
+  client: IServiceClient | null;
+};
+
+const ConnectWeb = ({ client }: Props) => {
+  return (
+    <div className="rounded-lg border p-4 md:p-6">
+      <div className="flex items-center gap-2 text-2xl capitalize">
+        <MonitorIcon />
+        Website
+      </div>
+      <p className="mt-2 text-sm text-muted-foreground">
+        Pick a framework below to get started.
+      </p>
+      <div className="mt-4 grid gap-4 md:grid-cols-2">
+        {frameworks.website.map((framework) => (
+          <button
+            onClick={() =>
+              pushModal('Instructions', {
+                framework,
+                client,
+              })
+            }
+            className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
+            key={framework.name}
+          >
+            <div className="h-10 w-10 rounded-md bg-slate-200 p-2">
+              <img
+                className="h-full w-full object-contain"
+                src={framework.logo}
+                alt={framework.name}
+                width={32}
+                height={32}
+              />
+            </div>
+            <div className="flex-1 font-semibold">{framework.name}</div>
+          </button>
+        ))}
+      </div>
+      <p className="mt-2 text-xs text-muted-foreground">
+        Missing a framework?{' '}
+        <a
+          href="mailto:hello@openpanel.dev"
+          className="text-foreground underline"
+        >
+          Let us know!
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default ConnectWeb;
--- a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/onboarding-connect.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/onboarding-connect.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { ButtonContainer } from '@/components/button-container';
+import { LinkButton } from '@/components/ui/button';
+
+import type { IServiceProjectWithClients } from '@openpanel/db';
+
+import OnboardingLayout, {
+  OnboardingDescription,
+} from '../../../onboarding-layout';
+import ConnectApp from './connect-app';
+import ConnectBackend from './connect-backend';
+import ConnectWeb from './connect-web';
+
+type Props = {
+  project: IServiceProjectWithClients;
+};
+
+const Connect = ({ project }: Props) => {
+  const client = project.clients[0];
+
+  if (!client) {
+    return <div>Hmm, something fishy is going on. Please reload the page.</div>;
+  }
+
+  return (
+    <OnboardingLayout
+      title="Setup your data sources"
+      description={
+        <OnboardingDescription>
+          Let&apos;s connect your data sources to OpenPanel
+        </OnboardingDescription>
+      }
+    >
+      {project.types.map((type) => {
+        const Component = {
+          website: ConnectWeb,
+          app: ConnectApp,
+          backend: ConnectBackend,
+        }[type];
+
+        return <Component key={type} client={client} />;
+      })}
+      <ButtonContainer>
+        <div />
+        <LinkButton
+          href={`/onboarding/${project.id}/verify`}
+          size="lg"
+          className="min-w-28 self-start"
+        >
+          Next
+        </LinkButton>
+      </ButtonContainer>
+    </OnboardingLayout>
+  );
+};
+
+export default Connect;
--- a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/page.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/page.tsx
@@ -0,0 +1,34 @@
+import { cookies } from 'next/headers';
+
+import { getCurrentOrganizations, getProjectWithClients } from '@openpanel/db';
+
+import OnboardingConnect from './onboarding-connect';
+
+type Props = {
+  params: {
+    projectId: string;
+  };
+};
+
+const Connect = async ({ params: { projectId } }: Props) => {
+  const orgs = await getCurrentOrganizations();
+  const organizationSlug = orgs[0]?.slug;
+  if (!organizationSlug) {
+    throw new Error('No organization found');
+  }
+  const project = await getProjectWithClients(projectId);
+  const clientSecret = cookies().get('onboarding_client_secret')?.value ?? null;
+
+  if (!project) {
+    return <div>Hmm, something fishy is going on. Please reload the page.</div>;
+  }
+
+  // set visible client secret from cookie
+  if (clientSecret && project.clients[0]) {
+    project.clients[0].secret = clientSecret;
+  }
+
+  return <OnboardingConnect project={project} />;
+};
+
+export default Connect;
--- a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify-listener.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify-listener.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+import { useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import useWS from '@/hooks/useWS';
+import { pushModal } from '@/modals';
+import { cn } from '@/utils/cn';
+import { timeAgo } from '@/utils/date';
+import { CheckCircle2Icon, CheckIcon, Loader2 } from 'lucide-react';
+
+import type {
+  IServiceClient,
+  IServiceCreateEventPayload,
+  IServiceProject,
+} from '@openpanel/db';
+
+type Props = {
+  project: IServiceProject;
+  client: IServiceClient | null;
+  events: IServiceCreateEventPayload[];
+  onVerified: (verified: boolean) => void;
+};
+
+const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
+  const [events, setEvents] = useState<IServiceCreateEventPayload[]>(
+    _events ?? []
+  );
+  useWS<IServiceCreateEventPayload>(
+    `/live/events/${client?.projectId}`,
+    (data) => {
+      setEvents((prev) => [...prev, data]);
+      onVerified(true);
+    }
+  );
+
+  const isConnected = events.length > 0;
+
+  const renderBadge = () => {
+    if (isConnected) {
+      return <Badge variant={'success'}>Connected</Badge>;
+    }
+
+    return <Badge variant={'destructive'}>Not connected</Badge>;
+  };
+  const renderIcon = () => {
+    if (isConnected) {
+      return (
+        <CheckCircle2Icon
+          strokeWidth={1.2}
+          size={40}
+          className="shrink-0 text-emerald-600"
+        />
+      );
+    }
+
+    return (
+      <Loader2 size={40} className="shrink-0 animate-spin text-blue-600" />
+    );
+  };
+
+  return (
+    <div className="rounded-lg border p-4 md:p-6">
+      <div className="flex items-center gap-2 text-2xl capitalize">
+        {client?.name}
+      </div>
+      <div className="mt-2 text-xs font-semibold text-muted-foreground">
+        Connection status: {renderBadge()}
+      </div>
+
+      <div
+        className={cn(
+          'my-6 flex gap-6 rounded-xl p-4 md:p-6',
+          isConnected ? 'bg-emerald-100' : 'bg-blue-100'
+        )}
+      >
+        {renderIcon()}
+        <div className="flex-1">
+          <div className="text-lg font-semibold">
+            {isConnected ? 'Success' : 'Waiting for events'}
+          </div>
+          {isConnected ? (
+            <div className="flex flex-col-reverse">
+              {events.length > 5 && (
+                <div className="flex items-center gap-2 text-sm">
+                  <CheckIcon size={14} />{' '}
+                  <span>{events.length - 5} more events</span>
+                </div>
+              )}
+              {events.slice(-5).map((event, index) => (
+                <div key={index} className="flex items-center gap-2 text-sm">
+                  <CheckIcon size={14} />{' '}
+                  <span className="font-medium">{event.name}</span>{' '}
+                  <span className="ml-auto text-emerald-800">
+                    {timeAgo(event.createdAt, 'round')}
+                  </span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-sm">
+              Verify that your events works before submitting any changes to App
+              Store/Google Play
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="mt-2 text-xs text-muted-foreground">
+        You can{' '}
+        <button
+          className="underline"
+          onClick={() => {
+            pushModal('OnboardingTroubleshoot', {
+              client,
+              type: 'app',
+            });
+          }}
+        >
+          troubleshoot
+        </button>{' '}
+        if you are having issues connecting your app.
+      </div>
+    </div>
+  );
+};
+
+export default VerifyListener;
--- a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import { useState } from 'react';
+import { ButtonContainer } from '@/components/button-container';
+import { LinkButton } from '@/components/ui/button';
+import { cn } from '@/utils/cn';
+import Link from 'next/link';
+
+import type {
+  IServiceCreateEventPayload,
+  IServiceProjectWithClients,
+} from '@openpanel/db';
+
+import OnboardingLayout, {
+  OnboardingDescription,
+} from '../../../onboarding-layout';
+import VerifyListener from './onboarding-verify-listener';
+
+type Props = {
+  project: IServiceProjectWithClients;
+  events: IServiceCreateEventPayload[];
+};
+
+const Verify = ({ project, events }: Props) => {
+  const [verified, setVerified] = useState(events.length > 0);
+  const client = project.clients[0];
+
+  if (!client) {
+    return <div>Hmm, something fishy is going on. Please reload the page.</div>;
+  }
+
+  return (
+    <OnboardingLayout
+      title="Verify that you get events"
+      description={
+        <OnboardingDescription>
+          Deploy your changes, as soon as you see events here, you&apos;re all
+          set!
+        </OnboardingDescription>
+      }
+    >
+      {/* 
+      Sadly we cant have a verify for each type since we use the same client for all different types (website, app, backend)
+      
+      Pros: the user just need to keep track of one client id/secret
+      Cons: we cant verify each type individually
+
+      Might be a good idea to add a verify for each type in the future, but for now we will just have one verify for all types
+
+      {project.types.map((type) => {
+        const Component = {
+          website: VerifyWeb,
+          app: VerifyApp,
+          backend: VerifyBackend,
+        }[type];
+
+        return <Component key={type} client={client} events={events} />;
+      })} */}
+      <VerifyListener
+        project={project}
+        client={client}
+        events={events}
+        onVerified={setVerified}
+      />
+      <ButtonContainer>
+        <LinkButton
+          href={`/onboarding/${project.id}/connect`}
+          size="lg"
+          className="min-w-28 self-start"
+          variant={'secondary'}
+        >
+          Back
+        </LinkButton>
+
+        <div className="flex items-center gap-8">
+          {!verified && (
+            <Link
+              href={`/${project.organizationSlug}/${project.id}`}
+              className="text-sm text-muted-foreground underline"
+            >
+              Skip for now
+            </Link>
+          )}
+
+          <LinkButton
+            href="/"
+            size="lg"
+            className={cn(
+              'min-w-28 self-start',
+              !verified && 'pointer-events-none select-none opacity-20'
+            )}
+          >
+            Your dashboard
+          </LinkButton>
+        </div>
+      </ButtonContainer>
+    </OnboardingLayout>
+  );
+};
+
+export default Verify;
--- a/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/page.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/page.tsx
@@ -0,0 +1,44 @@
+import { cookies } from 'next/headers';
+import { escape } from 'sqlstring';
+
+import {
+  getCurrentOrganizations,
+  getEvents,
+  getProjectWithClients,
+} from '@openpanel/db';
+
+import OnboardingVerify from './onboarding-verify';
+
+type Props = {
+  params: {
+    projectId: string;
+  };
+};
+
+const Verify = async ({ params: { projectId } }: Props) => {
+  const orgs = await getCurrentOrganizations();
+  const organizationSlug = orgs[0]?.slug;
+  if (!organizationSlug) {
+    throw new Error('No organization found');
+  }
+  const [project, events] = await Promise.all([
+    await getProjectWithClients(projectId),
+    getEvents(
+      `SELECT * FROM events WHERE project_id = ${escape(projectId)} LIMIT 100`
+    ),
+  ]);
+  const clientSecret = cookies().get('onboarding_client_secret')?.value ?? null;
+
+  if (!project) {
+    return <div>Hmm, something fishy is going on. Please reload the page.</div>;
+  }
+
+  // set visible client secret from cookie
+  if (clientSecret && project.clients[0]) {
+    project.clients[0].secret = clientSecret;
+  }
+
+  return <OnboardingVerify project={project} events={events} />;
+};
+
+export default Verify;
--- a/apps/dashboard/src/app/(onboarding)/onboarding/connect/page.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/connect/page.tsx
@@ -1,79 +0,0 @@
-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 Connect = () => {
-  return (
-    <OnboardingLayout
-      title="Connect your data"
-      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/tracking"
-          size="lg"
-          className="min-w-28 self-start"
-          variant={'secondary'}
-        >
-          Back
-        </LinkButton>
-        <LinkButton
-          href="/onboarding/verify"
-          size="lg"
-          className="min-w-28 self-start"
-        >
-          Next
-        </LinkButton>
-      </ButtonContainer>
-    </OnboardingLayout>
-  );
-};
-
-export default Connect;
--- a/apps/dashboard/src/app/(onboarding)/onboarding/onboarding-tracking.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/onboarding-tracking.tsx
@@ -0,0 +1,218 @@
+'use client';
+
+import { useEffect } from 'react';
+import AnimateHeight from '@/components/animate-height';
+import { ButtonContainer } from '@/components/button-container';
+import { InputWithLabel } from '@/components/forms/input-with-label';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { api, handleError } from '@/trpc/client';
+import { cn } from '@/utils/cn';
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { LucideIcon } from 'lucide-react';
+import { MonitorIcon, ServerIcon, SmartphoneIcon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import type { ControllerRenderProps, SubmitHandler } from 'react-hook-form';
+import { Controller, useForm, useWatch } from 'react-hook-form';
+import type { z } from 'zod';
+
+import type { IServiceOrganization } from '@openpanel/db';
+import { zOnboardingProject } from '@openpanel/validation';
+
+import OnboardingLayout, { OnboardingDescription } from '../onboarding-layout';
+
+function CheckboxGroup({
+  label,
+  description,
+  Icon,
+  children,
+  onChange,
+  value,
+  disabled,
+  error,
+}: {
+  label: string;
+  description: string;
+  Icon: LucideIcon;
+  children?: React.ReactNode;
+  error?: string;
+} & ControllerRenderProps) {
+  const randId = Math.random().toString(36).substring(7);
+  return (
+    <div>
+      <label
+        className={cn(
+          'flex items-center gap-4 px-4 py-6 transition-colors hover:bg-slate-100',
+          disabled && 'cursor-not-allowed opacity-50'
+        )}
+        htmlFor={randId}
+      >
+        {Icon && <div className="w-6 shrink-0">{<Icon />}</div>}
+        <div className="flex-1">
+          <div className="font-medium">{label}</div>
+          <div className="text-sm text-muted-foreground">{description}</div>
+          {error && <div className="text-xs text-red-600">{error}</div>}
+        </div>
+        <div>
+          <Switch
+            disabled={disabled}
+            checked={!!value}
+            onCheckedChange={onChange}
+            id={randId}
+          />
+        </div>
+      </label>
+      {children}
+    </div>
+  );
+}
+
+type IForm = z.infer<typeof zOnboardingProject>;
+
+const Tracking = () => {
+  const router = useRouter();
+  const mutation = api.onboarding.project.useMutation({
+    onError: handleError,
+    onSuccess(res) {
+      router.push(`/onboarding/${res.projectId}/connect`);
+    },
+  });
+
+  const form = useForm<IForm>({
+    resolver: zodResolver(zOnboardingProject),
+    defaultValues: {
+      organization: '',
+      project: '',
+      domain: null,
+      website: false,
+      app: false,
+      backend: false,
+    },
+  });
+
+  const isWebsite = useWatch({
+    name: 'website',
+    control: form.control,
+  });
+
+  const isApp = useWatch({
+    name: 'app',
+    control: form.control,
+  });
+
+  const isBackend = useWatch({
+    name: 'backend',
+    control: form.control,
+  });
+
+  useEffect(() => {
+    if (!isWebsite) {
+      form.setValue('domain', null);
+    }
+  }, [isWebsite, form]);
+
+  const onSubmit: SubmitHandler<IForm> = (values) => {
+    mutation.mutate(values);
+  };
+
+  useEffect(() => {
+    form.clearErrors();
+  }, [isWebsite, isApp, isBackend]);
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      <OnboardingLayout
+        title="What are you tracking?"
+        description={
+          <OnboardingDescription>
+            Let us know what you want to track so we can help you get started.
+          </OnboardingDescription>
+        }
+      >
+        <div className="grid gap-4 md:grid-cols-2">
+          <InputWithLabel
+            label="Workspace name"
+            info="This is the name of your workspace. It can be anything you like."
+            placeholder="Eg. The Music Company"
+            error={form.formState.errors.organization?.message}
+            {...form.register('organization')}
+          />
+          <InputWithLabel
+            label="Project name"
+            placeholder="Eg. The Music App"
+            error={form.formState.errors.project?.message}
+            {...form.register('project')}
+          />
+        </div>
+        <div className="flex flex-col divide-y">
+          <Controller
+            name="website"
+            control={form.control}
+            render={({ field }) => (
+              <CheckboxGroup
+                error={form.formState.errors.website?.message}
+                Icon={MonitorIcon}
+                label="Website"
+                disabled={isApp}
+                description="Track events and conversion for your website"
+                {...field}
+              >
+                <AnimateHeight open={isWebsite && !isApp}>
+                  <div className="p-4 pl-14">
+                    <InputWithLabel
+                      label="Domain"
+                      placeholder="https://example.com"
+                      error={form.formState.errors.domain?.message}
+                      {...form.register('domain')}
+                    />
+                  </div>
+                </AnimateHeight>
+              </CheckboxGroup>
+            )}
+          />
+          <Controller
+            name="app"
+            control={form.control}
+            render={({ field }) => (
+              <CheckboxGroup
+                error={form.formState.errors.app?.message}
+                disabled={isWebsite}
+                Icon={SmartphoneIcon}
+                label="App"
+                description="Track events and conversion for your app"
+                {...field}
+              />
+            )}
+          />
+          <Controller
+            name="backend"
+            control={form.control}
+            render={({ field }) => (
+              <CheckboxGroup
+                error={form.formState.errors.backend?.message}
+                Icon={ServerIcon}
+                label="Backend / API"
+                description="Track events and conversion for your backend / API"
+                {...field}
+              />
+            )}
+          />
+        </div>
+
+        <ButtonContainer>
+          <div />
+          <Button
+            type="submit"
+            size="lg"
+            className="min-w-28 self-start"
+            loading={mutation.isLoading}
+          >
+            Next
+          </Button>
+        </ButtonContainer>
+      </OnboardingLayout>
+    </form>
+  );
+};
+
+export default Tracking;
--- a/apps/dashboard/src/app/(onboarding)/onboarding/page.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/page.tsx
@@ -1,76 +1,7 @@
-import { ButtonContainer } from '@/components/button-container';
-import { LinkButton } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import type { CheckboxProps } from '@radix-ui/react-checkbox';
-
-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>
-  );
-}
+import OnboardingTracking from './onboarding-tracking';

 const Tracking = () => {
-  return (
-    <OnboardingLayout
-      title="What do you want to track?"
-      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"
-          size="lg"
-          className="min-w-28 self-start"
-          variant={'secondary'}
-        >
-          Back
-        </LinkButton>
-        <LinkButton
-          href="/onboarding/connect"
-          size="lg"
-          className="min-w-28 self-start"
-        >
-          Next
-        </LinkButton>
-      </ButtonContainer>
-    </OnboardingLayout>
-  );
+  return <OnboardingTracking />;
 };

 export default Tracking;
--- a/apps/dashboard/src/app/(onboarding)/onboarding/verify/page.tsx
+++ b/apps/dashboard/src/app/(onboarding)/onboarding/verify/page.tsx
@@ -1,75 +0,0 @@
-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;
--- a/apps/dashboard/src/app/(onboarding)/steps.tsx
+++ b/apps/dashboard/src/app/(onboarding)/steps.tsx
@@ -1,13 +1,13 @@
 'use client';

 import { cn } from '@/utils/cn';
-import { ArrowRightCircleIcon, CheckCheckIcon, Edit2Icon } from 'lucide-react';
+import { CheckCheckIcon } from 'lucide-react';
 import { usePathname } from 'next/navigation';

 type Step = {
  name: string;
  status: 'completed' | 'current' | 'pending';
-  href: string;
+  match: string;
 };

 type Props = {
@@ -15,32 +15,32 @@ type Props = {
 };

 function useSteps(path: string) {
-  console.log('path', path);
-
  const steps: Step[] = [
    {
      name: 'Account creation',
      status: 'pending',
-      href: '/get-started',
+      match: '/sign-up',
    },
    {
-      name: 'Tracking information',
+      name: 'General',
      status: 'pending',
-      href: '/onboarding',
+      match: '/onboarding',
    },
    {
      name: 'Connect your data',
      status: 'pending',
-      href: '/onboarding/connect',
+      match: '/onboarding/(.+)/connect',
    },
    {
      name: 'Verify',
      status: 'pending',
-      href: '/onboarding/verify',
+      match: '/onboarding/(.+)/verify',
    },
  ];

-  const matchIndex = steps.findLastIndex((step) => path.startsWith(step.href));
+  const matchIndex = steps.findLastIndex((step) =>
+    path.match(new RegExp(step.match))
+  );

  return steps.map((step, index) => {
    if (index < matchIndex) {
@@ -87,18 +87,18 @@ const Steps = ({ className }: Props) => {
            <div
              className={cn(
                'relative flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm text-white'
-                // step.status === 'completed' && 'bg-blue-500 ring-blue-500/50',
-                // step.status === 'pending' && 'bg-slate-600 ring-slate-500/50'
+                // step.status === 'completed' && 'bg-blue-600 ring-blue-500/50',
+                // step.status === 'pending' && 'bg-slate-400 ring-slate-500/50'
              )}
            >
              <div
                className={cn(
-                  'absolute inset-0 z-0 rounded-full bg-blue-500',
-                  step.status === 'pending' && 'bg-slate-600'
+                  'absolute inset-0 z-0 rounded-full bg-blue-600',
+                  step.status === 'pending' && 'bg-slate-400'
                )}
              ></div>
              {step.status === 'current' && (
-                <div className="animate-ping-slow absolute inset-1 z-0 rounded-full bg-blue-500"></div>
+                <div className="absolute inset-1 z-0 animate-ping-slow rounded-full bg-blue-600"></div>
              )}
              <div className="relative">
                {step.status === 'completed' && <CheckCheckIcon size={14} />}