{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-banner-section-shadcnui",
  "type": "registry:page",
  "title": "CTA Banner Section",
  "description": "Animated call-to-action banner with gradient background and button animations",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/cta-banner-section.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  AnimatePresence,\n  motion,\n  MotionConfig,\n  useInView,\n  useReducedMotion,\n  type Variants,\n} from \"framer-motion\";\nimport { ArrowRight, ChevronRight, Sparkles, Zap } from \"lucide-react\";\nimport { useId, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst motionPresets = {\n  smooth: { type: \"spring\" as const, bounce: 0.3, duration: 0.4 },\n  bounce: { type: \"spring\" as const, bounce: 0.5, duration: 0.35 },\n  fade: { type: \"tween\" as const, ease: [0.26, 0.08, 0.25, 1] as const, duration: 0.2 },\n};\n\n\nconst highlights = [\n  { id: \"highlight-free\", label: \"Free Forever\", icon: Zap },\n  { id: \"highlight-credit\", label: \"No Credit Card\", icon: Sparkles },\n  { id: \"highlight-oss\", label: \"Open Source\", icon: ChevronRight },\n];\n\ninterface CTABannerSectionProps {\n  motionPreset?: keyof typeof motionPresets;\n  className?: string;\n}\n\nexport function CTABannerSection({\n  motionPreset = \"smooth\",\n  className,\n}: CTABannerSectionProps) {\n  const ref = useRef<HTMLDivElement | null>(null);\n  const isInView = useInView(ref, { once: true, margin: \"-10% 0px\" });\n  const shouldReduceMotion = useReducedMotion();\n  const [hoveredButton, setHoveredButton] = useState<\"primary\" | \"secondary\" | null>(null);\n\n  const titleId = useId();\n  const descriptionId = useMemo(() => `${titleId}-description`, [titleId]);\n\n  const reducedMotionVariants: Variants = {\n    hidden: { opacity: 0 },\n    visible: { opacity: 1 },\n  };\n\n  const containerVariants: Variants = useMemo(\n    () =>\n      shouldReduceMotion\n        ? reducedMotionVariants\n        : {\n            hidden: { opacity: 0 },\n            visible: {\n              opacity: 1,\n              transition: {\n                staggerChildren: 0.1,\n                delayChildren: 0.2,\n              },\n            },\n          },\n    [shouldReduceMotion]\n  );\n\n  const itemVariants: Variants = useMemo(\n    () =>\n      shouldReduceMotion\n        ? reducedMotionVariants\n        : {\n            hidden: { opacity: 0, y: 20 },\n            visible: {\n              opacity: 1,\n              y: 0,\n              transition: { duration: 0.4 },\n            },\n          },\n    [shouldReduceMotion]\n  );\n\n  // Button micro-interaction variants\n  const buttonVariants: Variants = {\n    idle: { y: 0 },\n    hover: { y: -4 },\n    tap: { y: 0, scale: 0.98 },\n  };\n\n  return (\n    <MotionConfig\n      transition={shouldReduceMotion ? { duration: 0 } : motionPresets[motionPreset]}\n      reducedMotion=\"user\"\n    >\n      <section\n        ref={ref}\n        aria-labelledby={titleId}\n        aria-describedby={descriptionId}\n        className={cn(\"relative w-full overflow-hidden px-4 py-5 sm:px-6 md:px-8 lg:py-5\", className)}\n      >\n\n        <div className=\"mx-auto max-w-5xl\">\n          <motion.div\n            variants={containerVariants}\n            initial=\"hidden\"\n            animate={isInView ? \"visible\" : \"hidden\"}\n            className=\"space-y-6 md:space-y-8 lg:space-y-12\"\n          >\n            {/* Main CTA Card - Dashboard style */}\n            <motion.div\n              variants={itemVariants}\n              whileHover={shouldReduceMotion ? {} : { y: -4 }}\n              transition={{ duration: 0.2 }}\n              className=\"group relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-6 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg sm:p-8 md:p-10 lg:p-12\"\n              role=\"article\"\n            >\n              {/* Hover gradient overlay - dashboard pattern */}\n              <div className=\"absolute inset-0 -z-10 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100\" />\n\n              <div className=\"relative space-y-5 text-center md:space-y-6 lg:space-y-8\">\n                {/* Status Badge - Dashboard style with live indicator */}\n                <motion.div variants={itemVariants} className=\"flex justify-center\">\n                  <Badge\n                    variant=\"outline\"\n                    className=\"inline-flex items-center gap-2 rounded-full border-border/50 bg-background/55 px-3 py-1 text-[10px] uppercase tracking-[0.2em] text-foreground/70 backdrop-blur sm:px-4 sm:py-1.5 sm:text-xs\"\n                    aria-label=\"Component library status\"\n                  >\n                    <motion.span\n                      className=\"h-1.5 w-1.5 rounded-full bg-emerald-500 sm:h-2 sm:w-2\"\n                      aria-hidden\n                      {...(shouldReduceMotion\n                        ? {}\n                        : {\n                            animate: { opacity: [1, 0.5, 1] },\n                            transition: { duration: 2, repeat: Infinity },\n                          })}\n                    />\n                    Ready to Ship\n                  </Badge>\n                </motion.div>\n\n                {/* Heading - Vercel style typography */}\n                <motion.div variants={itemVariants} className=\"space-y-3 md:space-y-4\">\n                  <h2\n                    id={titleId}\n                    className=\"text-balance text-2xl font-semibold tracking-tight text-foreground sm:text-3xl md:text-4xl lg:text-5xl\"\n                  >\n                    Ready to ship motion-rich UIs in minutes?\n                  </h2>\n                  <p\n                    id={descriptionId}\n                    className=\"mx-auto max-w-2xl text-sm text-foreground/70 sm:text-base md:text-lg\"\n                  >\n                    Access a curated library of glassmorphic components,\n                    production-grade motion recipes, and accessibility-first\n                    patterns. Start building products that feel alive.\n                  </p>\n                </motion.div>\n\n                {/* CTA Buttons - Dashboard toolbar style */}\n                <motion.div\n                  variants={itemVariants}\n                  className=\"flex flex-col items-center justify-center gap-3 sm:flex-row\"\n                  role=\"toolbar\"\n                  aria-label=\"Call to action\"\n                >\n                  <motion.div\n                    variants={buttonVariants}\n                    initial=\"idle\"\n                    whileHover={shouldReduceMotion ? {} : \"hover\"}\n                    whileTap={shouldReduceMotion ? {} : \"tap\"}\n                    onHoverStart={() => setHoveredButton(\"primary\")}\n                    onHoverEnd={() => setHoveredButton(null)}\n                    transition={{ duration: 0.2 }}\n                    className=\"w-full sm:w-auto\"\n                  >\n                    <Button\n                      size=\"lg\"\n                      className=\"group/btn w-full gap-2 rounded-full bg-foreground px-6 py-5 text-background shadow-lg transition-all hover:shadow-xl sm:w-auto sm:px-8 sm:py-6\"\n                    >\n                      <span className=\"text-xs font-semibold uppercase tracking-[0.1em] sm:text-sm\">\n                        Get Started\n                      </span>\n                      <motion.span\n                        aria-hidden\n                        className=\"inline-flex\"\n                        animate={\n                          shouldReduceMotion\n                            ? {}\n                            : hoveredButton === \"primary\"\n                              ? { x: 4 }\n                              : { x: 0 }\n                        }\n                        transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n                      >\n                        <ArrowRight className=\"h-4 w-4\" />\n                      </motion.span>\n                    </Button>\n                  </motion.div>\n\n                  <motion.div\n                    variants={buttonVariants}\n                    initial=\"idle\"\n                    whileHover={shouldReduceMotion ? {} : \"hover\"}\n                    whileTap={shouldReduceMotion ? {} : \"tap\"}\n                    transition={{ duration: 0.2 }}\n                    className=\"w-full sm:w-auto\"\n                  >\n                    <Button\n                      size=\"lg\"\n                      variant=\"outline\"\n                      className=\"w-full rounded-full border-border/40 bg-background/60 px-6 py-5 backdrop-blur transition-all hover:border-border/60 hover:bg-background/70 sm:w-auto sm:px-8 sm:py-6\"\n                    >\n                      <span className=\"text-xs font-semibold uppercase tracking-[0.1em] text-foreground/70 group-hover:text-foreground sm:text-sm\">\n                        View Docs\n                      </span>\n                    </Button>\n                  </motion.div>\n                </motion.div>\n              </div>\n            </motion.div>\n\n            {/* Feature highlights - Dashboard metric cards style */}\n            <motion.div\n              variants={itemVariants}\n              className=\"grid gap-3 sm:grid-cols-2 md:grid-cols-3 md:gap-4\"\n              role=\"list\"\n              aria-label=\"Key features\"\n            >\n              <AnimatePresence mode=\"popLayout\">\n                {highlights.map((item, index) => {\n                  const Icon = item.icon;\n                  return (\n                    <motion.div\n                      key={item.id}\n                      layout={!shouldReduceMotion}\n                      initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      transition={{\n                        delay: shouldReduceMotion ? 0 : 0.4 + index * 0.1,\n                        duration: 0.4,\n                      }}\n                      whileHover={shouldReduceMotion ? {} : { y: -4 }}\n                      className=\"group relative overflow-hidden rounded-xl border border-border/40 bg-background/60 p-4 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg md:rounded-2xl md:p-6\"\n                      role=\"listitem\"\n                    >\n                      {/* Hover gradient */}\n                      <div className=\"absolute inset-0 -z-10 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100\" />\n\n                      <div className=\"relative flex items-center gap-3 md:gap-4\">\n                        <div className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 md:h-10 md:w-10\">\n                          <Icon\n                            className=\"h-4 w-4 text-primary md:h-5 md:w-5\"\n                            aria-hidden\n                          />\n                        </div>\n                        <div className=\"min-w-0 space-y-0.5 md:space-y-1\">\n                          <p className=\"truncate text-xs font-semibold uppercase tracking-[0.1em] text-foreground sm:text-sm sm:tracking-[0.15em]\">\n                            {item.label}\n                          </p>\n                          <p className=\"text-[10px] text-foreground/60 sm:text-xs\">\n                            No strings attached\n                          </p>\n                        </div>\n                      </div>\n                    </motion.div>\n                  );\n                })}\n              </AnimatePresence>\n            </motion.div>\n\n            {/* Trust statement - Vercel subtle footer */}\n            <motion.p\n              variants={itemVariants}\n              className=\"text-center text-[10px] uppercase tracking-[0.2em] text-foreground/40 sm:text-xs sm:tracking-[0.25em]\"\n              aria-label=\"Trust statement\"\n            >\n              Trusted by teams shipping dashboards, finance tools, and modern SaaS\n            </motion.p>\n          </motion.div>\n        </div>\n      </section>\n    </MotionConfig>\n  );\n}\n",
      "type": "registry:page",
      "target": "components/uitripled/cta-banner-section-shadcnui.tsx"
    }
  ]
}