{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-testimonials-big-image","type":"registry:block","title":"Big Image","files":[{"path":"components/blocks/marketing/testimonials/big-image.tsx","content":"import { AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Avatar } from '@/components/ui/avatar';\nimport { Button } from '@/components/ui/button';\n\nexport default function BigImage() {\n  return (\n    <div className=\"container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]\">\n      {/* Grid */}\n      <div className=\"md:grid md:grid-cols-2 md:items-center md:gap-10 lg:gap-16\">\n        <div className=\"mb-24 hidden sm:px-6 md:mb-0 md:block\">\n          <div className=\"relative\">\n            <img\n              className=\"rounded-xl\"\n              src=\"https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=500&h=600&q=80\"\n              alt=\"Avatar\"\n              width={500}\n              height={600}\n            />\n\n            {/* SVG Element */}\n            <div className=\"absolute start-0 bottom-0 -z-[1] -translate-x-14 translate-y-10\">\n              <svg\n                className=\"text-muted-foreground h-auto max-w-40\"\n                width=\"696\"\n                height=\"653\"\n                viewBox=\"0 0 696 653\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <circle cx=\"72.5\" cy=\"29.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"171.5\" cy=\"29.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"270.5\" cy=\"29.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"369.5\" cy=\"29.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"468.5\" cy=\"29.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"567.5\" cy=\"29.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"666.5\" cy=\"29.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"29.5\" cy=\"128.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"128.5\" cy=\"128.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"227.5\" cy=\"128.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"326.5\" cy=\"128.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"425.5\" cy=\"128.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"524.5\" cy=\"128.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"623.5\" cy=\"128.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"72.5\" cy=\"227.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"171.5\" cy=\"227.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"270.5\" cy=\"227.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"369.5\" cy=\"227.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"468.5\" cy=\"227.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"567.5\" cy=\"227.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"666.5\" cy=\"227.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"29.5\" cy=\"326.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"128.5\" cy=\"326.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"227.5\" cy=\"326.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"326.5\" cy=\"326.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"425.5\" cy=\"326.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"524.5\" cy=\"326.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"623.5\" cy=\"326.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"72.5\" cy=\"425.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"171.5\" cy=\"425.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"270.5\" cy=\"425.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"369.5\" cy=\"425.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"468.5\" cy=\"425.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"567.5\" cy=\"425.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"666.5\" cy=\"425.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"29.5\" cy=\"524.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"128.5\" cy=\"524.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"227.5\" cy=\"524.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"326.5\" cy=\"524.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"425.5\" cy=\"524.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"524.5\" cy=\"524.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"623.5\" cy=\"524.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"72.5\" cy=\"623.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"171.5\" cy=\"623.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"270.5\" cy=\"623.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"369.5\" cy=\"623.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"468.5\" cy=\"623.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"567.5\" cy=\"623.5\" r=\"29.5\" fill=\"currentColor\" />\n                <circle cx=\"666.5\" cy=\"623.5\" r=\"29.5\" fill=\"currentColor\" />\n              </svg>\n            </div>\n            {/* End SVG Element */}\n          </div>\n        </div>\n        {/* End Col */}\n\n        <div>\n          {/* Blockquote */}\n          <blockquote className=\"relative\">\n            <svg\n              className=\"text-muted-foreground/15 absolute start-0 top-0 size-24 -translate-x-8 -translate-y-4 transform\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              aria-hidden=\"true\"\n            >\n              <path\n                d=\"M7.39762 10.3C7.39762 11.0733 7.14888 11.7 6.6514 12.18C6.15392 12.6333 5.52552 12.86 4.76621 12.86C3.84979 12.86 3.09047 12.5533 2.48825 11.94C1.91222 11.3266 1.62421 10.4467 1.62421 9.29999C1.62421 8.07332 1.96459 6.87332 2.64535 5.69999C3.35231 4.49999 4.33418 3.55332 5.59098 2.85999L6.4943 4.25999C5.81354 4.73999 5.26369 5.27332 4.84476 5.85999C4.45201 6.44666 4.19017 7.12666 4.05926 7.89999C4.29491 7.79332 4.56983 7.73999 4.88403 7.73999C5.61716 7.73999 6.21938 7.97999 6.69067 8.45999C7.16197 8.93999 7.39762 9.55333 7.39762 10.3Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n\n            <div className=\"relative z-10\">\n              <p className=\"text-muted-foreground mb-3 text-xs font-semibold tracking-wide uppercase\">\n                Featured client\n              </p>\n\n              <p className=\"text-xl font-medium italic md:text-2xl md:leading-normal xl:text-3xl xl:leading-normal\">\n                To say that switching to Acme has been life-changing is an\n                understatement. My business has tripled and I got my life back.\n              </p>\n            </div>\n\n            <footer className=\"mt-6\">\n              <div className=\"flex items-center\">\n                <div className=\"shrink-0 md:hidden\">\n                  <Avatar className=\"size-12\">\n                    <AvatarImage\n                      src=\"https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80\"\n                      alt=\"Avatar\"\n                    />\n                    <AvatarFallback>CN</AvatarFallback>\n                  </Avatar>\n                </div>\n                <div className=\"ms-4 md:ms-0\">\n                  <div className=\"text-base font-semibold\">Nicole Grazioso</div>\n                  <div className=\"text-muted-foreground text-xs\">\n                    Director Payments &amp; Risk | Airbnb\n                  </div>\n                </div>\n              </div>\n            </footer>\n\n            <div className=\"mt-8 lg:mt-14\">\n              <Button>Read the story</Button>\n            </div>\n          </blockquote>\n          {/* End Blockquote */}\n        </div>\n        {/* End Col */}\n      </div>\n      {/* End Grid */}\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/testimonials/big-image.tsx"},{"path":"components/ui/avatar.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n","type":"registry:ui","target":"components/ui/avatar.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"}],"description":"A testimonial paired with a large customer photo beside the quote. Use it when you want a single voice to carry weight and feel personal and real.","dependencies":["class-variance-authority","radix-ui"]}