Guided Tour

import { GuidedTour, GuidedTourOverlay, GuidedTourProvider, GuidedTourStep, GuidedTourTrigger } from "@/components/optics/guided-tour";import { Button } from "@/components/optics/button";import { Input } from "@/components/optics/input";import { Label } from "@/components/optics/label";import { HelpCircle } from "lucide-react";<GuidedTourProvider>  <GuidedTour>    <GuidedTourOverlay />    <div className="flex flex-col items-center gap-4 w-full max-w-md">      <GuidedTourTrigger        render={<Button><CircleQuestionMark className="mr-2" />Start Demo Tour</Button>}        tourId="demo-tour"      />      <div className="w-full flex items-stretch justify-center gap-8">        <GuidedTourStep          content={<div><h3 className="font-semibold mb-2 text-base">Welcome to the Tour</h3><p className="text-sm text-muted-foreground">This is the first step. Here you can see how the guided tour component works.</p></div>}          step={1}          tourId="demo-tour"        >          <div className="p-4 border rounded-lg bg-background space-y-2">            <Label>              Step 1: Input Field            </Label>            <Input placeholder="Type something here..." />          </div>        </GuidedTourStep>        <GuidedTourStep          content={<div><h3 className="font-semibold mb-2 text-base">Second Step</h3><p className="text-sm text-muted-foreground">This is the second element of the tour. You can continue navigating between steps.</p></div>}          step={2}          tourId="demo-tour"        >          <div className="p-4 border rounded-lg bg-background space-y-2">            <Label>              Step 2: Action Button            </Label>            <Button className="w-full">              Click Here            </Button>          </div>        </GuidedTourStep>        <GuidedTourStep          content={<div><h3 className="font-semibold mb-2 text-base">Last Step</h3><p className="text-sm text-muted-foreground">This is the last step of the tour. Press "Finish" to complete the tour.</p></div>}          step={3}          tourId="demo-tour"        >          <div className="p-4 border rounded-lg bg-background space-y-2">            <Label>              Step 3: Completion            </Label>            <Button              className="w-full"              variant="secondary"            >              Complete            </Button>          </div>        </GuidedTourStep>      </div>    </div>  </GuidedTour></GuidedTourProvider>