One Dialog

import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'

const heroImage =
  'https://images.unsplash.com/photo-1635746065098-a0ae3eadfa6f?q=80&w=800&auto=format&fit=crop'

export function Dialog09() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Welcome tour</Button>
      </DialogTrigger>
      <DialogContent
        className="gap-0 overflow-hidden p-0 sm:max-w-sm"
        showCloseButton={false}
      >
        <div className="h-50 w-full overflow-hidden">
          <img
            src={heroImage}
            alt="Abstract gradient cover"
            className="size-full object-cover"
          />
        </div>
        <div className="flex flex-col gap-6 px-6 pt-5 pb-6">
          <DialogHeader className="gap-1.5 text-left">
            <DialogTitle>Welcome to Dali</DialogTitle>
            <DialogDescription>
              AI agents that work - or you don't pay. Start with one agent on
              one workflow, then widen from there.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter className="flex-col gap-2 sm:flex-col">
            <Button className="w-full">Start with one agent</Button>
            <DialogClose asChild>
              <Button variant="ghost" className="w-full">
                Skip for now
              </Button>
            </DialogClose>
            <a
              href="https://daliagents.com"
              target="_blank"
              rel="noreferrer"
              className="text-muted-foreground/60 hover:text-muted-foreground self-center text-[10px] tracking-wide transition-colors"
            >
              daliagents.com
            </a>
          </DialogFooter>
        </div>
      </DialogContent>
    </Dialog>
  )
}

export default Dialog09