{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-testimonials-with-stats","type":"registry:block","title":"With Stats","files":[{"path":"components/blocks/marketing/testimonials/with-stats.tsx","content":"import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { ArrowUp } from \"lucide-react\";\n\nexport default function WithStats() {\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=\"lg:grid lg:grid-cols-12 lg:items-center lg:justify-between lg:gap-16\">\n        <div className=\"lg:col-span-5 lg:col-start-1\">\n          {/* Title */}\n          <div className=\"mb-8\">\n            <h2 className=\"mb-2 text-3xl font-bold lg:text-4xl\">\n              It&apos;s all about speed\n            </h2>\n            <p className=\"text-muted-foreground\">\n              We provide you with a test account that can be set up in seconds.\n              Our main focus is getting responses to you as soon as we can.\n            </p>\n          </div>\n          {/* End Title */}\n\n          {/* Blockquote */}\n          <blockquote className=\"relative\">\n            <svg\n              className=\"text-muted-foreground/15 absolute start-0 top-0 size-16 -translate-x-6 -translate-y-8 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.3ZM14.6242 10.3C14.6242 11.0733 14.3755 11.7 13.878 12.18C13.3805 12.6333 12.7521 12.86 11.9928 12.86C11.0764 12.86 10.3171 12.5533 9.71484 11.94C9.13881 11.3266 8.85079 10.4467 8.85079 9.29999C8.85079 8.07332 9.19117 6.87332 9.87194 5.69999C10.5789 4.49999 11.5608 3.55332 12.8176 2.85999L13.7209 4.25999C13.0401 4.73999 12.4903 5.27332 12.0713 5.85999C11.6786 6.44666 11.4168 7.12666 11.2858 7.89999C11.5215 7.79332 11.7964 7.73999 12.1106 7.73999C12.8437 7.73999 13.446 7.97999 13.9173 8.45999C14.3886 8.93999 14.6242 9.55333 14.6242 10.3Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n\n            <div className=\"relative z-10\">\n              <p className=\"text-xl italic\">\n                Amazing people to work with. Very fast and professional partner.\n              </p>\n            </div>\n\n            <footer className=\"mt-6\">\n              <div className=\"flex items-center gap-x-4\">\n                <div className=\"shrink-0\">\n                  <Avatar className=\"size-8\">\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=80w=320&h=320&q=80\"\n                      alt=\"Avatar\"\n                    />\n                    <AvatarFallback>CN</AvatarFallback>\n                  </Avatar>\n                </div>\n                <div className=\"grow\">\n                  <div className=\"font-semibold\">Josh 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          </blockquote>\n          {/* End Blockquote */}\n        </div>\n        {/* End Col */}\n\n        <div className=\"mt-10 lg:col-span-6 lg:col-end-13 lg:mt-0\">\n          <div className=\"space-y-6 sm:space-y-8\">\n            {/* List */}\n            <ul className=\"divide-border grid grid-cols-2 divide-x divide-y overflow-hidden\">\n              <li className=\"-m-0.5 flex flex-col p-4 sm:p-8\">\n                <div className=\"mb-2 flex items-end gap-x-2 text-3xl font-bold sm:text-5xl\">\n                  45k+\n                </div>\n                <p className=\"text-muted-foreground text-sm sm:text-base\">\n                  users - from new startups to public companies\n                </p>\n              </li>\n\n              <li className=\"-m-0.5 flex flex-col p-4 sm:p-8\">\n                <div className=\"mb-2 flex items-end gap-x-2 text-3xl font-bold sm:text-5xl\">\n                  <ArrowUp className=\"size-5 shrink-0 text-blue-600\" />\n                  23%\n                </div>\n                <p className=\"text-muted-foreground text-sm sm:text-base\">\n                  increase in traffic on webpages with Looms\n                </p>\n              </li>\n\n              <li className=\"-m-0.5 flex flex-col p-4 sm:p-8\">\n                <div className=\"mb-2 flex items-end gap-x-2 text-3xl font-bold sm:text-5xl\">\n                  <ArrowUp className=\"size-5 shrink-0 text-blue-600\" />\n                  9.3%\n                </div>\n                <p className=\"text-muted-foreground text-sm sm:text-base\">\n                  boost in reply rates across sales outreach\n                </p>\n              </li>\n\n              <li className=\"-m-0.5 flex flex-col p-4 sm:p-8\">\n                <div className=\"mb-2 flex items-end gap-x-2 text-3xl font-bold sm:text-5xl\">\n                  2x\n                </div>\n                <p className=\"text-muted-foreground text-sm sm:text-base\">\n                  faster than previous Acme versions\n                </p>\n              </li>\n            </ul>\n            {/* End List */}\n          </div>\n        </div>\n        {/* End Col */}\n      </div>\n      {/* End Grid */}\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/testimonials/with-stats.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"}],"description":"A testimonial section blended with key metrics such as customers served and ratings. Combine a quote with proof points to back your claims with data.","dependencies":["lucide-react","radix-ui"]}