{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-section-with-dashed-border",
  "type": "registry:block",
  "title": "CTA Section With Dashed Border",
  "description": "CTA section with dashed border effects.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["clsx", "lucide-react", "tailwind-merge"],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/cta-sections/cta-section-with-dashed-border.tsx",
      "content": "'use client';\n\nimport { cn } from '@/lib/utils';\nimport { Headset } from 'lucide-react';\n\ninterface CTASectionWithDashedBorderProps {\n  heading?: string;\n  highlightedText?: string;\n  accentText?: string;\n  primaryButtonLabel?: string;\n  secondaryButtonLabel?: string;\n  testimonial?: string;\n  testimonialName?: string;\n  testimonialRole?: string;\n  className?: string;\n}\n\nexport default function CTASectionWithDashedBorder({\n  heading = 'Scale your business with',\nhighlightedText = '10 engineers',\naccentText = 'first month completely free',\nprimaryButtonLabel = 'Start now',\nsecondaryButtonLabel = 'Chat with us',\ntestimonial =\n  \"This is the most reliable platform ever when it comes to building. Ten on ten recommended. I just can't stop thinking about what comes next with this tool.\",\ntestimonialName = 'Lynlyn small',\ntestimonialRole = 'Full stack developer',\n  className,\n}: CTASectionWithDashedBorderProps) {\n  return (\n    <section\n      className={cn(\n        'relative z-20 mx-auto my-20 grid w-full max-w-6xl grid-cols-1 justify-start overflow-hidden bg-linear-to-br from-gray-100 to-white md:my-40 md:overflow-visible md:grid-cols-3 dark:from-neutral-900 dark:to-neutral-950',\n        className,\n      )}\n    >\n      <BorderLine position='top' />\n      <BorderLine position='bottom' />\n      <BorderLine position='left' />\n      <BorderLine position='right' />\n\n      <div className='p-8 md:col-span-2 md:p-14'>\n        <h2 className='text-left text-xl font-medium tracking-tight text-neutral-500 md:text-3xl dark:text-neutral-200'>\n          {heading}{' '}\n          <span className='font-bold text-black dark:text-white'>{highlightedText} </span>\n          and get\n          <span className='font-bold text-indigo-500 dark:text-indigo-500'> {accentText}</span>.\n        </h2>\n\n        <div className='flex flex-col items-start sm:flex-row sm:items-center sm:gap-4'>\n          <button className='group mt-8 flex items-center space-x-2 rounded-lg bg-linear-to-b from-indigo-500 to-indigo-700 px-4 py-2 text-base text-white shadow-[0px_2px_0px_0px_rgba(255,255,255,0.3)_inset]'>\n            <span>{primaryButtonLabel}</span>\n          </button>\n\n          <button className='group mt-8 flex items-center space-x-2 rounded-lg border border-neutral-200 px-4 py-2 text-base text-black shadow-[0px_2px_0px_0px_rgba(255,255,255,0.3)_inset] dark:border-neutral-800 dark:text-white'>\n            <span>{secondaryButtonLabel}</span>\n            <Headset className='mt-0.5 h-3 w-3 stroke-[1px] text-black transition-transform duration-200 group-hover:translate-x-1 dark:text-white' />\n          </button>\n        </div>\n      </div>\n\n      <div className='border-t border-dashed p-8 md:border-l md:border-t-0 md:p-14'>\n        <p className='text-base text-neutral-700 dark:text-neutral-200'>\n          &ldquo;{testimonial}&rdquo;\n        </p>\n        <div className='mt-4 flex flex-col items-start gap-1 text-sm'>\n          <p className='font-bold text-neutral-800 dark:text-neutral-200'>{testimonialName}</p>\n          <p className='text-neutral-500 dark:text-neutral-400'>{testimonialRole}</p>\n        </div>\n      </div>\n    </section>\n  );\n}\n\ninterface BorderLineProps {\n  position: 'top' | 'bottom' | 'left' | 'right';\n}\n\nfunction BorderLine({ position }: BorderLineProps) {\n  const isHorizontal = position === 'top' || position === 'bottom';\n\n  return (\n    <div\n      className={cn(\n        'absolute z-30',\n        isHorizontal\n          ? 'left-0 h-(--height) w-full md:left-[calc(var(--offset)/2*-1)] md:w-[calc(100%+var(--offset))] bg-size-[var(--width)_var(--height)] [mask:linear-gradient(to_left,var(--background)_var(--fade-stop),transparent),linear-gradient(to_right,var(--background)_var(--fade-stop),transparent),linear-gradient(black,black)] mask-exclude bg-[linear-gradient(to_right,var(--color),var(--color)_50%,transparent_0,transparent)] dark:bg-[linear-gradient(to_right,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)]'\n          : 'top-[calc(var(--offset)/2*-1)] h-[calc(100%+var(--offset))] w-(--width) bg-size-[var(--width)_var(--height)] [mask:linear-gradient(to_top,var(--background)_var(--fade-stop),transparent),linear-gradient(to_bottom,var(--background)_var(--fade-stop),transparent),linear-gradient(black,black)] mask-exclude bg-[linear-gradient(to_bottom,var(--color),var(--color)_50%,transparent_0,transparent)] dark:bg-[linear-gradient(to_bottom,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)]',\n        position === 'top' && 'top-0',\n        position === 'bottom' && 'bottom-0 top-auto',\n        position === 'left' && 'left-4',\n        position === 'right' && 'left-auto right-4',\n      )}\n      style={\n        {\n          '--background': '#ffffff',\n          '--color': 'rgba(0, 0, 0, 0.2)',\n          '--color-dark': 'rgba(255, 255, 255, 0.2)',\n          '--fade-stop': '90%',\n          '--offset': isHorizontal ? '200px' : '80px',\n          '--height': isHorizontal ? '1px' : '5px',\n          '--width': isHorizontal ? '5px' : '1px',\n        } as React.CSSProperties\n      }\n    />\n  );\n}"
    },
    {
      "type": "registry:lib",
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"
    }
  ]
}