{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonials",
  "title": "Testimonials",
  "description": "component for the Testimonials",
  "dependencies": [
    "lucide-react",
    "framer-motion"
  ],
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "app/registry/testimonials/testimonials.tsx",
      "content": "'use client';\n\nimport { motion } from 'framer-motion';\nimport { Play, Star } from 'lucide-react';\nimport { Card } from '@/components/ui/card';\nimport Image from 'next/image';\n\nconst mainTestimonial = {\n  quote: 'Using Spectrum UI made our design process much smoother.',\n  author: 'Danielle M.',\n  role: 'Senior UI Designer',\n  videoThumbnail: '/test1.jpg',\n  videoUrl: '/placeholder-video.mp4',\n};\n\nconst testimonials = [\n  {\n    id: 1,\n    quote: 'With Spectrum UI, we built a clean dashboard in just a few hours.',\n    author: 'Alex B.',\n    role: 'Product Manager',\n    avatar: '/headshot/Lummi Doodle 02.png',\n    rating: 5,\n  },\n  {\n    id: 2,\n    quote:\n      \"I've used Spectrum UI in 5 client projects so far. It’s super consistent and saves a lot of time during development.\",\n    author: 'Jasmine R.',\n    role: 'Frontend Developer',\n    avatar: '/headshot/Rectangle-1.png',\n    rating: 5,\n  },\n  {\n    id: 3,\n    quote:\n      'From first drafts to final product, Spectrum UI made everything easier. It just works well out of the box.',\n    author: 'Leo D.',\n    role: 'Startup Founder',\n    avatar: '/headshot/Lummi Doodle 06.png',\n    rating: 5,\n  },\n  {\n    id: 4,\n    quote:\n      'The components are clean, the docs are simple to follow, and the support from the community is great.',\n    author: 'Marta C.',\n    role: 'UI/UX Designer',\n    avatar: '/headshot/Lummi Doodle 09.png',\n    rating: 5,\n  },\n];\n\nexport default function Testimonial() {\n  const cardWidth = 320;\n  const gap = 24;\n  const totalWidth = testimonials.length * (cardWidth + gap);\n\n  return (\n    <div className=\"max-w-full px-3 sm:px-4 md:px-6 lg:px-8 py-6 sm:py-8 md:py-10\">\n      <div className=\" bg-neutral-100 dark:bg-neutral-900 rounded-xl sm:rounded-2xl p-4 sm:p-6 md:p-10 lg:p-16 shadow-xs\">\n        <div className=\"grid md:grid-cols-2 gap-6 sm:gap-8 items-start mb-8 sm:mb-10 lg:mb-12\">\n          <div>\n            <h1 className=\"text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold text-neutral-900 dark:text-neutral-100 leading-tight\">\n              Real stories. Real results.\n            </h1>\n          </div>\n          <div>\n            <p className=\"text-sm sm:text-base md:text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed\">\n              Developers, designers, and teams trust Spectrum UI to build beautiful interfaces\n              faster.\n            </p>\n          </div>\n        </div>\n\n        <div className=\"flex flex-col xl:flex-row justify-between gap-4 sm:gap-6\">\n          <div className=\"grid md:grid-cols-2 bg-white dark:bg-neutral-800  rounded-2xl sm:rounded-3xl p-3 sm:p-4 md:p-6 gap-4 sm:gap-6 mb-8 sm:mb-10 lg:mb-16\">\n            <div className=\"flex flex-col relative group cursor-pointer\">\n              <Image\n                alt=\"Video Thumbnail\"\n                className=\"w-full  rounded-lg cursor-pointer object-cover border border-neutral-200\"\n                height={200}\n                width={200}\n                src={mainTestimonial.videoThumbnail}\n              />\n\n              <div className=\"absolute bottom-2 sm:bottom-4 left-2 sm:left-4\">\n                <div className=\"bg-black/80 backdrop-blur-xs rounded-full px-2 sm:px-4 py-1.5 sm:py-2 flex items-center space-x-1.5 sm:space-x-2 text-white\">\n                  <Play className=\"w-3 h-3 sm:w-4 sm:h-4 fill-white\" />\n                  <span className=\"font-medium text-xs sm:text-sm\">Watch Video</span>\n                </div>\n              </div>\n            </div>\n\n            <div className=\"space-y-5 flex flex-col justify-between\">\n              <div className=\"inline-flex items-center space-x-2 bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-400 px-3 py-1.5 rounded-full text-sm font-medium w-fit\">\n                <div className=\"w-2 h-2 bg-green-500 rounded-full\"></div>\n                <span>Design System Success</span>\n              </div>\n              <div>\n                <blockquote className=\"font-medium text-base sm:text-lg text-neutral-900 dark:text-neutral-100\">\n                  “{mainTestimonial.quote}”\n                </blockquote>\n                <div className=\"space-y-1\">\n                  <p className=\"font-semibold text-neutral-900 dark:text-neutral-100 text-sm sm:text-base\">\n                    {mainTestimonial.author}\n                  </p>\n                  <p className=\"text-neutral-600 dark:text-neutral-400 text-sm\">\n                    {mainTestimonial.role}\n                  </p>\n                </div>\n              </div>\n            </div>\n          </div>\n\n        </div>\n\n        <div className=\"relative overflow-hidden mt-8 sm:mt-10\">\n          <motion.div\n            className=\"flex space-x-4 sm:space-x-6\"\n            animate={{ x: [-totalWidth, 0] }}\n            transition={{\n              x: {\n                repeat: Infinity,\n                repeatType: 'loop',\n                duration: 30,\n                ease: 'linear',\n              },\n            }}\n          >\n            {[...testimonials, ...testimonials].map((testimonial, index) => (\n              <motion.div\n                key={`${testimonial.id}-${index}`}\n                initial={{ opacity: 0, y: 20 }}\n                animate={{ opacity: 1, y: 0 }}\n                transition={{ duration: 0.5, delay: index * 0.1, ease: 'easeOut' }}\n                whileHover={{ scale: 1.02, y: -5, transition: { duration: 0.2 } }}\n              >\n                <Card className=\"shrink-0 w-64 sm:w-72 md:w-80 bg-white dark:bg-neutral-800 rounded-xl p-4 sm:p-6 space-y-3 sm:space-y-4 border-0 shadow-xs min-h-[180px] sm:min-h-[200px]\">\n                  <div className=\"flex space-x-1\">\n                    {[...Array(testimonial.rating)].map((_, i) => (\n                      <Star\n                        key={i}\n                        className=\"w-3 h-3 sm:w-4 sm:h-4 fill-green-500 text-green-500\"\n                      />\n                    ))}\n                  </div>\n                  <p className=\"text-xs sm:text-sm text-neutral-700 dark:text-neutral-300 leading-relaxed min-h-12 sm:min-h-16\">\n                    “{testimonial.quote}”\n                  </p>\n                  <div className=\"flex items-center space-x-2 sm:space-x-3\">\n                    <Image\n                      width={20}\n                      height={20}\n                      loading=\"lazy\"\n                      src={testimonial.avatar || '/placeholder.svg'}\n                      alt={testimonial.author}\n                      className=\"w-8 h-8 sm:w-10 sm:h-10 rounded-full object-cover border-2 border-neutral-200 dark:border-neutral-600\"\n                    />\n                    <div>\n                      <p className=\"font-semibold text-sm text-neutral-900 dark:text-neutral-100\">\n                        {testimonial.author}\n                      </p>\n                      <p className=\"text-xs text-neutral-600 dark:text-neutral-400\">\n                        {testimonial.role}\n                      </p>\n                    </div>\n                  </div>\n                </Card>\n              </motion.div>\n            ))}\n          </motion.div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/testimonials.tsx"
    }
  ],
  "type": "registry:component"
}