Onboarding

1"use client";23import { Button } from "@/components/ui/button";4import { cn } from "@/lib/utils";56type Onboarding01Props = {7  className?: string;8};910const HIGHLIGHTS = [11  "Invite your team in one click",12  "Start from ready-made blocks",13  "Ship a first page today",14] as const;1516function CheckIcon({ className }: { className?: string }) {17  return (18    <svg19      viewBox="0 0 24 24"20      fill="none"21      stroke="currentColor"22      strokeWidth="2"23      strokeLinecap="round"24      strokeLinejoin="round"25      aria-hidden="true"26      className={className}27    >28      <path d="M5 12.5 10 17.5 19 7" />29    </svg>30  );31}3233export function Onboarding01({ className }: Onboarding01Props) {34  return (35    <section className={cn("@container w-full bg-background", className)}>36      <div className="mx-auto flex w-full max-w-lg flex-col items-center px-4 py-10 text-center @[32rem]:px-6 @[32rem]:py-14">37        <p className="text-xs tracking-wide text-muted-foreground">38          Welcome to Arctis39        </p>40        <h2 className="mt-2 text-2xl font-medium tracking-wide text-foreground @[32rem]:text-3xl">41          Let’s get your workspace ready42        </h2>43        <p className="mt-3 text-sm tracking-wide text-muted-foreground">44          A short setup so your team can start shipping pages without the blank45          canvas.46        </p>4748        <ul className="mt-8 flex w-full flex-col gap-3 text-left">49          {HIGHLIGHTS.map((item) => (50            <li51              key={item}52              className="flex items-center gap-3 rounded-xl bg-muted px-4 py-3 text-sm tracking-wide text-foreground"53            >54              <span className="flex size-5 shrink-0 items-center justify-center text-foreground [&_svg]:size-3.5">55                <CheckIcon />56              </span>57              {item}58            </li>59          ))}60        </ul>6162        <div className="mt-8 flex w-full flex-col gap-2 @[32rem]:flex-row @[32rem]:justify-center">63          <Button type="button" size="sm" className="w-full @[32rem]:w-auto">64            Get started65          </Button>66          <Button67            type="button"68            size="sm"69            variant="ghost"70            className="w-full @[32rem]:w-auto"71          >72            Skip for now73          </Button>74        </div>75      </div>76    </section>77  );78}

1"use client";23import { useState } from "react";4import { Button } from "@/components/ui/button";5import { Input } from "@/components/ui/input";6import { Label } from "@/components/ui/label";7import { Progress } from "@/components/ui/progress";8import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";9import { cn } from "@/lib/utils";1011type Onboarding02Props = {12  className?: string;13};1415const STEPS = [16  { id: "profile", title: "Profile", detail: "Who’s setting this up" },17  { id: "workspace", title: "Workspace", detail: "Name your space" },18  { id: "role", title: "Role", detail: "How you’ll use Arctis" },19] as const;2021const ROLES = [22  { value: "design", label: "Design", detail: "Marketing pages and kits" },23  { value: "eng", label: "Engineering", detail: "Ship components faster" },24  { value: "founder", label: "Founder", detail: "Launch and iterate" },25] as const;2627function CheckIcon({ className }: { className?: string }) {28  return (29    <svg30      viewBox="0 0 24 24"31      fill="none"32      stroke="currentColor"33      strokeWidth="2"34      strokeLinecap="round"35      strokeLinejoin="round"36      aria-hidden="true"37      className={className}38    >39      <path d="M5 12.5 10 17.5 19 7" />40    </svg>41  );42}4344export function Onboarding02({ className }: Onboarding02Props) {45  const [step, setStep] = useState(0);46  const [done, setDone] = useState(false);47  const [name, setName] = useState("");48  const [workspace, setWorkspace] = useState("");49  const [role, setRole] = useState("design");5051  const progress = ((step + 1) / STEPS.length) * 100;52  const current = STEPS[step]!;53  const isLast = step === STEPS.length - 1;54  const roleLabel = ROLES.find((option) => option.value === role)?.label;55  const displayName = name.trim() || "there";56  const displayWorkspace = workspace.trim() || "your workspace";5758  return (59    <section className={cn("@container w-full bg-background", className)}>60      <div className="mx-auto w-full max-w-md px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">61        {done ? (62          <div className="flex flex-col items-center text-center">63            <span className="flex size-12 items-center justify-center rounded-full bg-muted text-foreground [&_svg]:size-5">64              <CheckIcon />65            </span>66            <h2 className="mt-5 text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">67              You’re all set, {displayName}68            </h2>69            <p className="mt-2 text-sm tracking-wide text-muted-foreground">70              {displayWorkspace} is ready71              {roleLabel ? ` for ${roleLabel.toLowerCase()}` : ""}. Jump in and72              start building.73            </p>74            <div className="mt-8 flex w-full flex-col gap-2 @[32rem]:flex-row @[32rem]:justify-center">75              <Button type="button" size="sm" className="w-full @[32rem]:w-auto">76                Go to dashboard77              </Button>78              <Button79                type="button"80                size="sm"81                variant="ghost"82                className="w-full @[32rem]:w-auto"83                onClick={() => {84                  setDone(false);85                  setStep(0);86                }}87              >88                Start over89              </Button>90            </div>91          </div>92        ) : (93          <>94            <div className="flex items-center justify-between gap-3">95              <p className="text-xs tracking-wide text-muted-foreground">96                Step {step + 1} of {STEPS.length}97              </p>98              <p className="text-xs tracking-wide text-muted-foreground">99                {current.title}100              </p>101            </div>102            <Progress value={progress} className="mt-3" />103104            <div className="mt-8">105              <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">106                {current.title}107              </h2>108              <p className="mt-2 text-sm tracking-wide text-muted-foreground">109                {current.detail}110              </p>111            </div>112113            <div className="mt-6 min-h-40">114              {step === 0 ? (115                <div className="flex flex-col gap-1.5">116                  <Label htmlFor="onboarding-02-name">Your name</Label>117                  <Input118                    id="onboarding-02-name"119                    value={name}120                    onChange={(event) => setName(event.target.value)}121                    placeholder="Maya Chen"122                    className="border-0 bg-muted"123                  />124                </div>125              ) : null}126127              {step === 1 ? (128                <div className="flex flex-col gap-1.5">129                  <Label htmlFor="onboarding-02-workspace">Workspace name</Label>130                  <Input131                    id="onboarding-02-workspace"132                    value={workspace}133                    onChange={(event) => setWorkspace(event.target.value)}134                    placeholder="Northline"135                    className="border-0 bg-muted"136                  />137                </div>138              ) : null}139140              {step === 2 ? (141                <RadioGroup142                  value={role}143                  onValueChange={setRole}144                  className="flex flex-col gap-2"145                >146                  {ROLES.map((option) => (147                    <div148                      key={option.value}149                      className="flex items-center gap-3 rounded-xl bg-muted px-3 py-3"150                    >151                      <RadioGroupItem152                        id={`onboarding-02-${option.value}`}153                        value={option.value}154                      />155                      <label156                        htmlFor={`onboarding-02-${option.value}`}157                        className="min-w-0 flex-1 cursor-pointer"158                      >159                        <span className="block text-sm font-medium tracking-wide text-foreground">160                          {option.label}161                        </span>162                        <span className="block text-xs tracking-wide text-muted-foreground">163                          {option.detail}164                        </span>165                      </label>166                    </div>167                  ))}168                </RadioGroup>169              ) : null}170            </div>171172            <div className="mt-8 flex items-center justify-between gap-2">173              <Button174                type="button"175                size="sm"176                variant="ghost"177                disabled={step === 0}178                onClick={() => setStep((value) => Math.max(0, value - 1))}179              >180                Back181              </Button>182              <Button183                type="button"184                size="sm"185                onClick={() => {186                  if (isLast) {187                    setDone(true);188                    return;189                  }190                  setStep((value) => Math.min(STEPS.length - 1, value + 1));191                }}192              >193                {isLast ? "Finish setup" : "Continue"}194              </Button>195            </div>196          </>197        )}198      </div>199    </section>200  );201}

1"use client";23import { useState } from "react";4import { Button } from "@/components/ui/button";5import { Checkbox } from "@/components/ui/checkbox";6import { cn } from "@/lib/utils";78type Onboarding03Props = {9  className?: string;10};1112const GOALS = [13  { id: "landing", label: "Landing pages", detail: "Hero, features, pricing" },14  { id: "app", label: "App UI", detail: "Dashboards and settings" },15  { id: "docs", label: "Docs site", detail: "Guides and API reference" },16  { id: "marketing", label: "Campaigns", detail: "Banners, CTAs, emails" },17] as const;1819export function Onboarding03({ className }: Onboarding03Props) {20  const [selected, setSelected] = useState<string[]>(["landing"]);2122  function toggle(id: string) {23    setSelected((current) =>24      current.includes(id)25        ? current.filter((value) => value !== id)26        : [...current, id],27    );28  }2930  return (31    <section className={cn("@container w-full bg-background", className)}>32      <div33        data-slot="block-split"34        className="mx-auto grid w-full max-w-4xl gap-10 px-4 py-10 @[40rem]:grid-cols-2 @[40rem]:items-start @[40rem]:gap-12 @[40rem]:px-6 @[40rem]:py-14"35      >36        <div>37          <p className="text-xs tracking-wide text-muted-foreground">38            Almost done39          </p>40          <h2 className="mt-2 text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">41            What are you building first?42          </h2>43          <p className="mt-2 text-sm tracking-wide text-muted-foreground">44            Pick a few goals so we can suggest the right blocks. You can change45            this later.46          </p>47          <p className="mt-6 text-sm tracking-wide text-muted-foreground">48            {selected.length} selected49          </p>50        </div>5152        <div>53          <ul className="flex flex-col gap-2">54            {GOALS.map((goal) => {55              const checked = selected.includes(goal.id);56              const inputId = `onboarding-03-${goal.id}`;5758              return (59                <li key={goal.id}>60                  <div className="flex items-center gap-3 rounded-xl bg-muted px-3 py-3">61                    <Checkbox62                      id={inputId}63                      checked={checked}64                      onCheckedChange={() => toggle(goal.id)}65                    />66                    <label htmlFor={inputId} className="min-w-0 flex-1 cursor-pointer">67                      <span className="block text-sm font-medium tracking-wide text-foreground">68                        {goal.label}69                      </span>70                      <span className="block text-xs tracking-wide text-muted-foreground">71                        {goal.detail}72                      </span>73                    </label>74                  </div>75                </li>76              );77            })}78          </ul>7980          <div className="mt-6 flex flex-wrap gap-2">81            <Button type="button" size="sm" disabled={selected.length === 0}>82              Continue83            </Button>84            <Button type="button" size="sm" variant="ghost">85              Skip86            </Button>87          </div>88        </div>89      </div>90    </section>91  );92}