{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "typewriter-testimonials",
  "type": "registry:block",
  "title": "Typewriter testimonials",
  "description": "Typewriter testimonials",
  "files": [
    {
      "path": "components/usages/typewritertestimonialsusage.tsx",
      "content": "import React from \"react\";\n\nimport TypewriterTestimonial from \"@/registry/open-source/typewriter-testimonials\";\nimport { testimonials } from \"@/registry/utilities/example_data\";\n\nexport const typewritterTestimonials = [\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\ttext: \"Using this component library has significantly speed up our development process. The quality and ease of integration are remarkable!\",\n\t\tname: \"David Smith\",\n\t\tjobtitle: \"UI Designer\",\n\t\taudio: \"David.mp3\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\ttext: \"I love  how intuitive and well-documented this component library is. It has significantly improved our UI consistency across projects.\",\n\t\tname: \"James Wilson\",\n\t\tjobtitle: \"Product Manager\",\n\t\taudio: \"James.mp3\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\ttext: \"Using this library has been a game-changer for our product development.\",\n\t\tname: \"Michael Davis\",\n\t\tjobtitle: \"Full Stack Developer\",\n\t\taudio: \"Michael.mp3\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\ttext: \"The components are highly responsive and work seamlessly across different devices and screen sizes.\",\n\t\tname: \"Emily Chen\",\n\t\tjobtitle: \"Mobile App Developer\",\n\t\taudio: \"Emily.mp3\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\ttext: \"This library has saved us a significant amount of time and effort. The components are well-documented and easy to integrate.\",\n\t\tname: \"Sarah Taylor\",\n\t\tjobtitle: \"Backend Developer\",\n\t\taudio: \"Sarah.mp3\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\ttext: \"I appreciate the attention to detail in the design. The components are visually appealing and professional.\",\n\t\tname: \"Kevin White\",\n\t\tjobtitle: \"UI/UX Designer\",\n\t\taudio: \"Kevin.mp3\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\ttext: \"The components are highly customizable and can be easily integrated with our existing UI framework.\",\n\t\tname: \"Rachel Patel\",\n\t\tjobtitle: \"Full Stack Developer\",\n\t\taudio: \"Rachel.mp3\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\ttext: \"I love how the components are designed to be highly responsive and work well across different screen sizes.\",\n\t\tname: \"Brian Kim\",\n\t\tjobtitle: \"Mobile App Developer\",\n\t\taudio: \"Brian.mp3\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n];\n\nfunction UsageTypewriterTestimonial() {\n\treturn <TypewriterTestimonial testimonials={testimonials} />;\n}\n\nexport default UsageTypewriterTestimonial;\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/typewritertestimonialsusage.tsx",
      "content": "import React from \"react\";\n\nimport TypewriterTestimonial from \"@/registry/open-source/typewriter-testimonials\";\nimport { testimonials } from \"@/registry/utilities/example_data\";\n\nexport const typewritterTestimonials = [\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\ttext: \"Using this component library has significantly speed up our development process. The quality and ease of integration are remarkable!\",\n\t\tname: \"David Smith\",\n\t\tjobtitle: \"UI Designer\",\n\t\taudio: \"David.mp3\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\ttext: \"I love  how intuitive and well-documented this component library is. It has significantly improved our UI consistency across projects.\",\n\t\tname: \"James Wilson\",\n\t\tjobtitle: \"Product Manager\",\n\t\taudio: \"James.mp3\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\ttext: \"Using this library has been a game-changer for our product development.\",\n\t\tname: \"Michael Davis\",\n\t\tjobtitle: \"Full Stack Developer\",\n\t\taudio: \"Michael.mp3\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\ttext: \"The components are highly responsive and work seamlessly across different devices and screen sizes.\",\n\t\tname: \"Emily Chen\",\n\t\tjobtitle: \"Mobile App Developer\",\n\t\taudio: \"Emily.mp3\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\ttext: \"This library has saved us a significant amount of time and effort. The components are well-documented and easy to integrate.\",\n\t\tname: \"Sarah Taylor\",\n\t\tjobtitle: \"Backend Developer\",\n\t\taudio: \"Sarah.mp3\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\ttext: \"I appreciate the attention to detail in the design. The components are visually appealing and professional.\",\n\t\tname: \"Kevin White\",\n\t\tjobtitle: \"UI/UX Designer\",\n\t\taudio: \"Kevin.mp3\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\ttext: \"The components are highly customizable and can be easily integrated with our existing UI framework.\",\n\t\tname: \"Rachel Patel\",\n\t\tjobtitle: \"Full Stack Developer\",\n\t\taudio: \"Rachel.mp3\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\timage: \"/itjustworks.jpg\",\n\t\ttext: \"I love how the components are designed to be highly responsive and work well across different screen sizes.\",\n\t\tname: \"Brian Kim\",\n\t\tjobtitle: \"Mobile App Developer\",\n\t\taudio: \"Brian.mp3\",\n\t\timage: \"/itjustworks.jpg\",\n\t},\n];\n\nfunction UsageTypewriterTestimonial() {\n\treturn <TypewriterTestimonial testimonials={testimonials} />;\n}\n\nexport default UsageTypewriterTestimonial;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/typewriter-testimonials.tsx",
      "content": "import React, { useEffect, useRef, useState } from \"react\";\r\n\r\nimport { AnimatePresence, motion } from \"motion/react\";\r\n\r\n// Credit:\r\n// https://www.serenity-ui.com/components/testimonials/typewritertestimonial\r\n\r\ntype Testimonial = {\r\n\timage: string;\r\n\ttext: string;\r\n\tname: string;\r\n\tjobtitle: string;\r\n};\r\n\r\ntype TestimonialsProps = {\r\n\ttestimonials: Testimonial[];\r\n};\r\n\r\nconst TypewriterTestimonial: React.FC<TestimonialsProps> = ({\r\n\ttestimonials,\r\n}) => {\r\n\tconst [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\r\n\r\n\tconst [hasBeenHovered, setHasBeenHovered] = useState<boolean[]>(\r\n\t\tnew Array(testimonials.length).fill(false)\r\n\t);\r\n\tconst [typedText, setTypedText] = useState(\"\");\r\n\tconst typewriterRef = useRef<NodeJS.Timeout | null>(null);\r\n\tconst currentTextRef = useRef(\"\");\r\n\r\n\tconst handleMouseEnter = (index: number) => {\r\n\t\tsetHoveredIndex(index);\r\n\r\n\t\tsetHasBeenHovered((prev) => {\r\n\t\t\tconst updated = [...prev];\r\n\t\t\tupdated[index] = true;\r\n\t\t\treturn updated;\r\n\t\t});\r\n\t\tstartTypewriter(testimonials[index].text);\r\n\t};\r\n\r\n\tconst handleMouseLeave = () => {\r\n\t\tsetHoveredIndex(null);\r\n\t\tstopTypewriter();\r\n\t};\r\n\r\n\tconst startTypewriter = (text: string) => {\r\n\t\tlet i = 0;\r\n\t\tsetTypedText(\"\");\r\n\t\tcurrentTextRef.current = text;\r\n\r\n\t\tconst type = () => {\r\n\t\t\tif (i <= text.length) {\r\n\t\t\t\tsetTypedText(text.slice(0, i));\r\n\t\t\t\ti++;\r\n\t\t\t\ttypewriterRef.current = setTimeout(type, 50);\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\ttype();\r\n\t};\r\n\r\n\tconst stopTypewriter = () => {\r\n\t\tif (typewriterRef.current) {\r\n\t\t\tclearTimeout(typewriterRef.current);\r\n\t\t}\r\n\t\tsetTypedText(\"\");\r\n\t\tcurrentTextRef.current = \"\";\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\treturn () => {\r\n\t\t\tif (typewriterRef.current) {\r\n\t\t\t\tclearTimeout(typewriterRef.current);\r\n\t\t\t}\r\n\t\t};\r\n\t}, []);\r\n\r\n\treturn (\r\n\t\t<div className=\"flex justify-center items-center gap-4 flex-wrap\">\r\n\t\t\t{testimonials.map((testimonial, index) => (\r\n\t\t\t\t<motion.div\r\n\t\t\t\t\tkey={index + \"typewriter-testimonial\"}\r\n\t\t\t\t\tclassName=\"relative flex flex-col items-center\"\r\n\t\t\t\t\tonMouseEnter={() => handleMouseEnter(index)}\r\n\t\t\t\t\tonMouseLeave={handleMouseLeave}\r\n\t\t\t\t\twhileHover={{ scale: 1.05 }}\r\n\t\t\t\t\twhileTap={{ scale: 0.95 }}\r\n\t\t\t\t>\r\n\t\t\t\t\t<motion.img\r\n\t\t\t\t\t\tsrc={testimonial.image}\r\n\t\t\t\t\t\talt={`Testimonial ${index}`}\r\n\t\t\t\t\t\tclassName=\"w-16 h-16 rounded-full border-4 hover:animate-pulse border-gray-300\"\r\n\t\t\t\t\t\tanimate={{\r\n\t\t\t\t\t\t\tborderColor:\r\n\t\t\t\t\t\t\t\thoveredIndex === index || hasBeenHovered[index]\r\n\t\t\t\t\t\t\t\t\t? \"#ACA0FB\"\r\n\t\t\t\t\t\t\t\t\t: \"#E5E7EB\",\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\ttransition={{ duration: 0.3 }}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<AnimatePresence>\r\n\t\t\t\t\t\t{hoveredIndex === index && (\r\n\t\t\t\t\t\t\t<motion.div\r\n\t\t\t\t\t\t\t\tinitial={{ opacity: 0, scale: 0.8, y: -10 }}\r\n\t\t\t\t\t\t\t\tanimate={{ opacity: 1, scale: 1, y: -20 }}\r\n\t\t\t\t\t\t\t\texit={{ opacity: 0, scale: 0.8, y: -10 }}\r\n\t\t\t\t\t\t\t\ttransition={{ duration: 0.4 }}\r\n\t\t\t\t\t\t\t\tclassName=\"absolute bottom-20 bg-background text-foreground text-sm px-4 py-3 rounded-lg shadow-2xl max-w-xs w-56\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<div className=\"h-24 overflow-hidden whitespace-pre-wrap\">\r\n\t\t\t\t\t\t\t\t\t{typedText}\r\n\t\t\t\t\t\t\t\t\t<span className=\"animate-blink\">|</span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<p className=\"mt-2 text-right font-semibold\">\r\n\t\t\t\t\t\t\t\t\t{testimonial.name}\r\n\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t<p className=\"text-right text-foreground text-sm\">\r\n\t\t\t\t\t\t\t\t\t{testimonial.jobtitle}\r\n\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t<div className=\"absolute left-1/2 transform -translate-x-1/2 -bottom-4\">\r\n\t\t\t\t\t\t\t\t\t<div className=\"w-3 h-3 bg-background rounded-full shadow-lg\"></div>\r\n\t\t\t\t\t\t\t\t\t<div className=\"w-2 h-2 bg-background rounded-full shadow-lg mt-1\"></div>\r\n\t\t\t\t\t\t\t\t\t<div className=\"w-1 h-1 bg-background rounded-full shadow-lg mt-1\"></div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</motion.div>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t</AnimatePresence>\r\n\t\t\t\t</motion.div>\r\n\t\t\t))}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default TypewriterTestimonial;\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/example_data.tsx",
      "content": "import Image from \"next/image\";\r\n\r\nimport { Skeleton } from \"@/components/ui/skeleton\";\r\nimport Image1 from \"@/public/itjustworks.jpg\";\r\nimport { IconClipboardCopy } from \"@tabler/icons-react\";\r\nimport { Home } from \"lucide-react\";\r\n\r\nexport const typewritterTestimonials = [\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\ttext: \"Using this component library has significantly speed up our development process. The quality and ease of integration are remarkable!\",\r\n\t\tname: \"David Smith\",\r\n\t\tjobtitle: \"UI Designer\",\r\n\t\taudio: \"David.mp3\",\r\n\t},\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\ttext: \"I love  how intuitive and well-documented this component library is. It has significantly improved our UI consistency across projects.\",\r\n\t\tname: \"James Wilson\",\r\n\t\tjobtitle: \"Product Manager\",\r\n\t\taudio: \"James.mp3\",\r\n\t},\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\ttext: \"Using this library has been a game-changer for our product development.\",\r\n\t\tname: \"Michael Davis\",\r\n\t\tjobtitle: \"Full Stack Developer\",\r\n\t\taudio: \"Michael.mp3\",\r\n\t},\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\ttext: \"The components are highly responsive and work seamlessly across different devices and screen sizes.\",\r\n\t\tname: \"Emily Chen\",\r\n\t\tjobtitle: \"Mobile App Developer\",\r\n\t\taudio: \"Emily.mp3\",\r\n\t},\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\ttext: \"This library has saved us a significant amount of time and effort. The components are well-documented and easy to integrate.\",\r\n\t\tname: \"Sarah Taylor\",\r\n\t\tjobtitle: \"Backend Developer\",\r\n\t\taudio: \"Sarah.mp3\",\r\n\t},\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\ttext: \"I appreciate the attention to detail in the design. The components are visually appealing and professional.\",\r\n\t\tname: \"Kevin White\",\r\n\t\tjobtitle: \"UI/UX Designer\",\r\n\t\taudio: \"Kevin.mp3\",\r\n\t},\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\ttext: \"The components are highly customizable and can be easily integrated with our existing UI framework.\",\r\n\t\tname: \"Rachel Patel\",\r\n\t\tjobtitle: \"Full Stack Developer\",\r\n\t\taudio: \"Rachel.mp3\",\r\n\t},\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\ttext: \"I love how the components are designed to be highly responsive and work well across different screen sizes.\",\r\n\t\tname: \"Brian Kim\",\r\n\t\tjobtitle: \"Mobile App Developer\",\r\n\t\taudio: \"Brian.mp3\",\r\n\t},\r\n];\r\n\r\nexport const data: Array<{\r\n\tid: number;\r\n\tname: string;\r\n\tsales: string;\r\n\tregion: string;\r\n\tstatus: string;\r\n\tdeltaType: string;\r\n\thours: number;\r\n}> = [\r\n\t{\r\n\t\tid: 1,\r\n\t\tname: \"Peter McCrown\",\r\n\t\tsales: \"1,000,000\",\r\n\t\tregion: \"Region A\",\r\n\t\tstatus: \"overperforming\",\r\n\t\tdeltaType: \"moderateIncrease\",\r\n\t\thours: 100,\r\n\t},\r\n\t{\r\n\t\tid: 2,\r\n\t\tname: \"Jon Mueller\",\r\n\t\tsales: \"2,202,000\",\r\n\t\tregion: \"Region B\",\r\n\t\tstatus: \"overperforming\",\r\n\t\tdeltaType: \"moderateIncrease\",\r\n\t\thours: 110,\r\n\t},\r\n\t{\r\n\t\tid: 3,\r\n\t\tname: \"Peter Federer\",\r\n\t\tsales: \"1,505,000\",\r\n\t\tregion: \"Region C\",\r\n\t\tstatus: \"underperforming\",\r\n\t\tdeltaType: \"moderateDecrease\",\r\n\t\thours: 90,\r\n\t},\r\n\t{\r\n\t\tid: 4,\r\n\t\tname: \"Maxime Bujet\",\r\n\t\tsales: \"500,000\",\r\n\t\tregion: \"Region D\",\r\n\t\tstatus: \"overperforming\",\r\n\t\tdeltaType: \"moderateDecrease\",\r\n\t\thours: 92,\r\n\t},\r\n\t{\r\n\t\tid: 5,\r\n\t\tname: \"Emma Nelly\",\r\n\t\tsales: \"600,000\",\r\n\t\tregion: \"Region E\",\r\n\t\tstatus: \"underperforming\",\r\n\t\tdeltaType: \"moderateDecrease\",\r\n\t\thours: 95,\r\n\t},\r\n];\r\n\r\nexport const dummyContent = [\r\n\t{\r\n\t\ttitle: \"Lorem Ipsum Dolor Sit Amet\",\r\n\t\tdescription: (\r\n\t\t\t<>\r\n\t\t\t\t<p>\r\n\t\t\t\t\tSit duis est minim proident non nisi velit non consectetur.Esse\r\n\t\t\t\t\tadipisicing laboris consectetur enim ipsum reprehenderit eu\r\n\t\t\t\t\tdeserunt Lorem ut aliqua anim do.Duis cupidatat qui irure\r\n\t\t\t\t\tcupidatat incididunt incididunt enim magna id est qui sunt\r\n\t\t\t\t\tfugiat.Laboris do duis pariatur fugiat Lorem aute sit ullamco.\r\n\t\t\t\t\tQui deserunt non reprehenderit dolore nisi velit exercitation\r\n\t\t\t\t\tLorem qui do enim culpa.Aliqua eiusmod in occaecat reprehenderit\r\n\t\t\t\t\tlaborum nostrud fugiat voluptate do Lorem culpa officia sint\r\n\t\t\t\t\tlabore.Tempor consectetur excepteur ut fugiat veniam commodo et\r\n\t\t\t\t\tlabore dolore commodo pariatur.\r\n\t\t\t\t</p>\r\n\t\t\t\t<p>\r\n\t\t\t\t\tDolor minim irure ut Lorem proident.Ipsum do pariatur est ad ad\r\n\t\t\t\t\tveniam in commodo id reprehenderit adipisicing.Proident duis\r\n\t\t\t\t\texercitation ad quis ex cupidatat cupidatat occaecat adipisicing.\r\n\t\t\t\t</p>\r\n\t\t\t\t<p>\r\n\t\t\t\t\tTempor quis dolor veniam quis dolor.Sit reprehenderit eiusmod\r\n\t\t\t\t\treprehenderit deserunt amet laborum consequat adipisicing officia\r\n\t\t\t\t\tqui irure id sint adipisicing.Adipisicing fugiat aliqua nulla\r\n\t\t\t\t\tnostrud.Amet culpa officia aliquip deserunt veniam deserunt\r\n\t\t\t\t\tofficia adipisicing aliquip proident officia sunt.\r\n\t\t\t\t</p>\r\n\t\t\t</>\r\n\t\t),\r\n\t\tbadge: \"React\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\ttitle: \"Lorem Ipsum Dolor Sit Amet\",\r\n\t\tdescription: (\r\n\t\t\t<>\r\n\t\t\t\t<p>\r\n\t\t\t\t\tEx irure dolore veniam ex velit non aute nisi labore ipsum\r\n\t\t\t\t\toccaecat deserunt cupidatat aute.Enim cillum dolor et nulla sunt\r\n\t\t\t\t\texercitation non voluptate qui aliquip esse tempor.Ullamco ut\r\n\t\t\t\t\tsunt consectetur sint qui qui do do qui do.Labore laborum culpa\r\n\t\t\t\t\tmagna reprehenderit ea velit id esse adipisicing deserunt amet\r\n\t\t\t\t\tdolore.Ipsum occaecat veniam commodo proident aliqua id ad\r\n\t\t\t\t\tdeserunt dolor aliquip duis veniam sunt.\r\n\t\t\t\t</p>\r\n\t\t\t\t<p>\r\n\t\t\t\t\tIn dolore veniam excepteur eu est et sunt velit.Ipsum sint esse\r\n\t\t\t\t\tveniam fugiat esse qui sint ad sunt reprehenderit do qui proident\r\n\t\t\t\t\treprehenderit.Laborum exercitation aliqua reprehenderit ea sint\r\n\t\t\t\t\tcillum ut mollit.\r\n\t\t\t\t</p>\r\n\t\t\t</>\r\n\t\t),\r\n\t\tbadge: \"Changelog\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\ttitle: \"Lorem Ipsum Dolor Sit Amet\",\r\n\t\tdescription: (\r\n\t\t\t<>\r\n\t\t\t\t<p>\r\n\t\t\t\t\tEx irure dolore veniam ex velit non aute nisi labore ipsum\r\n\t\t\t\t\toccaecat deserunt cupidatat aute.Enim cillum dolor et nulla sunt\r\n\t\t\t\t\texercitation non voluptate qui aliquip esse tempor.Ullamco ut\r\n\t\t\t\t\tsunt consectetur sint qui qui do do qui do.Labore laborum culpa\r\n\t\t\t\t\tmagna reprehenderit ea velit id esse adipisicing deserunt amet\r\n\t\t\t\t\tdolore.Ipsum occaecat veniam commodo proident aliqua id ad\r\n\t\t\t\t\tdeserunt dolor aliquip duis veniam sunt.\r\n\t\t\t\t</p>\r\n\t\t\t</>\r\n\t\t),\r\n\t\tbadge: \"Launch Week\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n];\r\n\r\nexport const people = [\r\n\t{\r\n\t\tid: 1,\r\n\t\tname: \"John Doe\",\r\n\t\tdesignation: \"Software Engineer\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tid: 2,\r\n\t\tname: \"Robert Johnson\",\r\n\t\tdesignation: \"Product Manager\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tid: 3,\r\n\t\tname: \"Jane Smith\",\r\n\t\tdesignation: \"Data Scientist\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tid: 4,\r\n\t\tname: \"Emily Davis\",\r\n\t\tdesignation: \"UX Designer\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tid: 5,\r\n\t\tname: \"Tyler Durden\",\r\n\t\tdesignation: \"Soap Developer\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tid: 6,\r\n\t\tname: \"Dora\",\r\n\t\tdesignation: \"The Explorer\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n];\r\n\r\nexport const DummyContent = () => {\r\n\treturn (\r\n\t\t<Image\r\n\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\talt=\"dummy image\"\r\n\t\t\twidth={100}\r\n\t\t\theight={100}\r\n\t\t\tclassName=\"object-cover object-top-left h-[60%]  md:h-[90%] absolute -bottom-10 inset-x-0 w-[90%] rounded-xl mx-auto\"\r\n\t\t/>\r\n\t);\r\n};\r\n\r\nexport const tabs = [\r\n\t{\r\n\t\ttitle: \"Product\",\r\n\t\tvalue: \"product\",\r\n\t\tcontent: (\r\n\t\t\t<div className=\"w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-linear-to-br from-purple-700 to-violet-900\">\r\n\t\t\t\t<p>Product Tab</p>\r\n\t\t\t\t<DummyContent />\r\n\t\t\t</div>\r\n\t\t),\r\n\t},\r\n\t{\r\n\t\ttitle: \"Services\",\r\n\t\tvalue: \"services\",\r\n\t\tcontent: (\r\n\t\t\t<div className=\"w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-linear-to-br from-purple-700 to-violet-900\">\r\n\t\t\t\t<p>Services tab </p>\r\n\t\t\t\t<DummyContent />\r\n\t\t\t</div>\r\n\t\t),\r\n\t},\r\n\t{\r\n\t\ttitle: \"Playground\",\r\n\t\tvalue: \"playground\",\r\n\t\tcontent: (\r\n\t\t\t<div className=\"w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-linear-to-br from-purple-700 to-violet-900\">\r\n\t\t\t\t<p>Playground tab </p>\r\n\t\t\t\t<DummyContent />\r\n\t\t\t</div>\r\n\t\t),\r\n\t},\r\n\t{\r\n\t\ttitle: \"Content\",\r\n\t\tvalue: \"content\",\r\n\t\tcontent: (\r\n\t\t\t<div className=\"w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-linear-to-br from-purple-700 to-violet-900\">\r\n\t\t\t\t<p>Content tab </p>\r\n\t\t\t\t<DummyContent />\r\n\t\t\t</div>\r\n\t\t),\r\n\t},\r\n\t{\r\n\t\ttitle: \"Random\",\r\n\t\tvalue: \"random\",\r\n\t\tcontent: (\r\n\t\t\t<div className=\"w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-linear-to-br from-purple-700 to-violet-900\">\r\n\t\t\t\t<p>Random tab </p>\r\n\t\t\t\t<DummyContent />\r\n\t\t\t</div>\r\n\t\t),\r\n\t},\r\n];\r\n\r\nexport const content = [\r\n\t{\r\n\t\ttitle: \"Collaborative Editing\",\r\n\t\tdescription:\r\n\t\t\t\"Work together in real time with your team, clients, and stakeholders. Collaborate on documents, share ideas, and make decisions quickly. With our platform, you can streamline your workflow and increase productivity.\",\r\n\t\tcontent: (\r\n\t\t\t<div className=\"flex h-full w-full items-center justify-center bg-[linear-gradient(to_bottom_right,var(--cyan-500),var(--emerald-500))] text-white\">\r\n\t\t\t\tCollaborative Editing\r\n\t\t\t</div>\r\n\t\t),\r\n\t},\r\n\t{\r\n\t\ttitle: \"Real time changes\",\r\n\t\tdescription:\r\n\t\t\t\"See changes as they happen. With our platform, you can track every modification in real time. No more confusion about the latest version of your project. Say goodbye to the chaos of version control and embrace the simplicity of real-time updates.\",\r\n\t\tcontent: (\r\n\t\t\t<div className=\"flex h-full w-full items-center justify-center text-white\">\r\n\t\t\t\t<Image\r\n\t\t\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\t\t\twidth={300}\r\n\t\t\t\t\theight={300}\r\n\t\t\t\t\tclassName=\"h-full w-full object-cover\"\r\n\t\t\t\t\talt=\"linear board demo\"\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\t\t),\r\n\t},\r\n\t{\r\n\t\ttitle: \"Version control\",\r\n\t\tdescription:\r\n\t\t\t\"Experience real-time updates and never stress about version control again. Our platform ensures that you're always working on the most recent version of your project, eliminating the need for constant manual updates. Stay in the loop, keep your team aligned, and maintain the flow of your work without any interruptions.\",\r\n\t\tcontent: (\r\n\t\t\t<div className=\"flex h-full w-full items-center justify-center bg-[linear-gradient(to_bottom_right,var(--orange-500),var(--yellow-500))] text-white\">\r\n\t\t\t\tVersion control\r\n\t\t\t</div>\r\n\t\t),\r\n\t},\r\n\t{\r\n\t\ttitle: \"Running out of content\",\r\n\t\tdescription:\r\n\t\t\t\"Experience real-time updates and never stress about version control again. Our platform ensures that you're always working on the most recent version of your project, eliminating the need for constant manual updates. Stay in the loop, keep your team aligned, and maintain the flow of your work without any interruptions.\",\r\n\t\tcontent: (\r\n\t\t\t<div className=\"flex h-full w-full items-center justify-center bg-[linear-gradient(to_bottom_right,var(--cyan-500),var(--emerald-500))] text-white\">\r\n\t\t\t\tRunning out of content\r\n\t\t\t</div>\r\n\t\t),\r\n\t},\r\n];\r\n\r\nexport interface Step {\r\n\ttitle: string;\r\n\tdescription: string;\r\n\timage: any[];\r\n\texpandHeight?: number;\r\n}\r\n\r\nexport const testimonialsExamples = [\r\n\t{\r\n\t\tquote: \"It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair.\",\r\n\t\tname: \"Charles Dickens\",\r\n\t\ttitle: \"A Tale of Two Cities\",\r\n\t},\r\n\t{\r\n\t\tquote: \"To be, or not to be, that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take Arms against a Sea of troubles, And by opposing end them: to die, to sleep.\",\r\n\t\tname: \"William Shakespeare\",\r\n\t\ttitle: \"Hamlet\",\r\n\t},\r\n\t{\r\n\t\tquote: \"All that we see or seem is but a dream within a dream.\",\r\n\t\tname: \"Edgar Allan Poe\",\r\n\t\ttitle: \"A Dream Within a Dream\",\r\n\t},\r\n\t{\r\n\t\tquote: \"It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.\",\r\n\t\tname: \"Jane Austen\",\r\n\t\ttitle: \"Pride and Prejudice\",\r\n\t},\r\n\t{\r\n\t\tquote: \"Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.\",\r\n\t\tname: \"Herman Melville\",\r\n\t\ttitle: \"Moby-Dick\",\r\n\t},\r\n];\r\n\r\nexport const products = [\r\n\t{\r\n\t\ttitle: \"Moonbeam\",\r\n\t\tlink: \"https://gomoonbeam.com\",\r\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\r\n\t},\r\n\t{\r\n\t\ttitle: \"Cursor\",\r\n\t\tlink: \"https://cursor.so\",\r\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\r\n\t},\r\n\t{\r\n\t\ttitle: \"Rogue\",\r\n\t\tlink: \"https://userogue.com\",\r\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\r\n\t},\r\n\r\n\t{\r\n\t\ttitle: \"Editorially\",\r\n\t\tlink: \"https://editorially.org\",\r\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\r\n\t},\r\n\t{\r\n\t\ttitle: \"Editrix AI\",\r\n\t\tlink: \"https://editrix.ai\",\r\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\r\n\t},\r\n\t{\r\n\t\ttitle: \"Pixel Perfect\",\r\n\t\tlink: \"https://app.pixelperfect.quest\",\r\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\r\n\t},\r\n\r\n\t{\r\n\t\ttitle: \"Algochurn\",\r\n\t\tlink: \"https://algochurn.com\",\r\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\r\n\t},\r\n\t{\r\n\t\ttitle: \"Aceternity UI\",\r\n\t\tlink: \"https://ui.aceternity.com\",\r\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\r\n\t},\r\n\t{\r\n\t\ttitle: \"Tailwind Master Kit\",\r\n\t\tlink: \"https://tailwindmasterkit.com\",\r\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\r\n\t},\r\n\t{\r\n\t\ttitle: \"SmartBridge\",\r\n\t\tlink: \"https://smartbridgetech.com\",\r\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\r\n\t},\r\n\t{\r\n\t\ttitle: \"Renderwork Studio\",\r\n\t\tlink: \"https://renderwork.studio\",\r\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\r\n\t},\r\n\r\n\t{\r\n\t\ttitle: \"Creme Digital\",\r\n\t\tlink: \"https://cremedigital.com\",\r\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\r\n\t},\r\n\t{\r\n\t\ttitle: \"Golden Bells Academy\",\r\n\t\tlink: \"https://goldenbellsacademy.com\",\r\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\r\n\t},\r\n\t{\r\n\t\ttitle: \"Invoker Labs\",\r\n\t\tlink: \"https://invoker.lol\",\r\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\r\n\t},\r\n\t{\r\n\t\ttitle: \"E Free Invoice\",\r\n\t\tlink: \"https://efreeinvoice.com\",\r\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\r\n\t},\r\n];\r\n\r\nexport const blogContent = {\r\n\tslug: \"amazing-tailwindcss-grid-layouts\",\r\n\tauthor: \"Manu Arora\",\r\n\tdate: \"28th March, 2023\",\r\n\ttitle: \"Amazing Tailwindcss Grid Layout Examples\",\r\n\tdescription:\r\n\t\t\"Grids are cool, but Tailwindcss grids are cooler. In this article, we will learn how to create amazing Grid layouts with Tailwindcs grid and React.\",\r\n\timage: \"/itjustworks.jpg\",\r\n\tauthorAvatar: \"/itjustworks.jpg\",\r\n};\r\n\r\nexport const TitleComponent = ({\r\n\ttitle,\r\n\tavatar,\r\n}: {\r\n\ttitle: string;\r\n\tavatar: string;\r\n}) => (\r\n\t<div className=\"flex items-center space-x-2\">\r\n\t\t<img\r\n\t\t\tsrc={avatar}\r\n\t\t\theight=\"20\"\r\n\t\t\twidth=\"20\"\r\n\t\t\talt=\"thumbnail\"\r\n\t\t\tclassName=\"rounded-full border-2 border-white\"\r\n\t\t/>\r\n\t\t<p>{title} </p>\r\n\t</div>\r\n);\r\n\r\nexport const animeData = [\r\n\t{\r\n\t\tid: \"1\",\r\n\t\ttitle: \"Solo Leveling\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\tyear: \"2024\",\r\n\t\tseasons: \"1 season\",\r\n\t\tplatform: \"Crunchyroll\",\r\n\t},\r\n\t{\r\n\t\tid: \"2\",\r\n\t\ttitle: \"Ishura\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\tyear: \"2024\",\r\n\t\tseasons: \"1 season\",\r\n\t\tplatform: \"Crunchyroll\",\r\n\t},\r\n\t{\r\n\t\tid: \"3\",\r\n\t\ttitle: \"The Apothecary Diaries\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\tyear: \"2023\",\r\n\t\tseasons: \"2 seasons\",\r\n\t\tplatform: \"Crunchyroll\",\r\n\t},\r\n\t{\r\n\t\tid: \"4\",\r\n\t\ttitle: \"Zenshu\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\tyear: \"2023\",\r\n\t\tseasons: \"1 season\",\r\n\t\tplatform: \"Netflix\",\r\n\t},\r\n\t{\r\n\t\tid: \"5\",\r\n\t\ttitle: \"Sakamoto Days\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\tyear: \"2024\",\r\n\t\tseasons: \"1 season\",\r\n\t\tplatform: \"Crunchyroll\",\r\n\t},\r\n\t{\r\n\t\tid: \"6\",\r\n\t\ttitle: \"Dr. Stone\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\tyear: \"2019\",\r\n\t\tseasons: \"3 seasons\",\r\n\t\tplatform: \"Crunchyroll\",\r\n\t},\r\n\t{\r\n\t\tid: \"7\",\r\n\t\ttitle: \"Unnamed Memory\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\tyear: \"2024\",\r\n\t\tseasons: \"1 season\",\r\n\t\tplatform: \"Crunchyroll\",\r\n\t},\r\n\t{\r\n\t\tid: \"8\",\r\n\t\ttitle: \"I Got Married to the Male Lead\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\tyear: \"2024\",\r\n\t\tseasons: \"1 season\",\r\n\t\tplatform: \"Crunchyroll\",\r\n\t},\r\n];\r\n\r\nexport const cards = [\r\n\t{\r\n\t\tbgColor: \"bg-[#f97316]\",\r\n\t\ttitle: \"The Guiding Light\",\r\n\t\tdescription:\r\n\t\t\t\"Lighthouses have stood as beacons of hope for centuries, guiding sailors safely through treacherous waters. Their glowing light and towering presence serve as a reminder of humanity’s connection to the sea.\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tbgColor: \"bg-[#0015ff]\",\r\n\t\ttitle: \"Life Beneath the Waves\",\r\n\t\tdescription:\r\n\t\t\t\"From shimmering schools of fish to solitary hunters, the ocean is home to an incredible variety of marine life. Each species plays a vital role in maintaining the balance of underwater ecosystems.\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tbgColor: \"bg-[#ff5941]\",\r\n\t\ttitle: \"Alone on the Open Sea\",\r\n\t\tdescription:\r\n\t\t\t\"Drifting across the endless horizon, traveling alone on the sea is a test of courage and resilience. With nothing but the waves and the sky, solitude becomes both a challenge and a source of deep reflection.\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tbgColor: \"bg-[#1f464d]\",\r\n\t\ttitle: \"The Art of Sailing\",\r\n\t\tdescription:\r\n\t\t\t\"Harnessing the power of the wind, sailing is both a skill and an adventure. Whether racing across the waves or leisurely cruising, it’s a timeless way to explore the vast blue expanse.\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tbgColor: \"bg-[#0015ff]\",\r\n\t\ttitle: \"The Era of Whaling\",\r\n\t\tdescription:\r\n\t\t\t\"Once a thriving industry, whale hunting shaped economies and cultures across the world. Today, efforts to protect these majestic creatures highlight the shift toward conservation and respect for marine life.\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n];\r\n\r\nexport const itemsLinearlDialog = [\r\n\t{\r\n\t\tid: 1,\r\n\t\turl: Image1.src,\r\n\t\ttitle: \"Accordion\",\r\n\t\tdescription:\r\n\t\t\t\"Immerse yourself in our cutting-edge interactive gallery, designed to showcase a diverse array of visual content with unparalleled clarity and style. This feature allows users to effortlessly navigate through high-resolution images, from awe-inspiring landscapes to intimate portraits and abstract art. With smooth transitions, intuitive controls, and responsive design, our gallery adapts to any device, ensuring a seamless browsing experience. Dive deeper into each piece with expandable information panels, offering insights into the artist, technique, and story behind each image. \",\r\n\t\ttags: [\"Sunrise\", \"Mountains\", \"Golden\", \"Scenic\", \"Inspiring\"],\r\n\t},\r\n\t{\r\n\t\tid: 2,\r\n\t\turl: Image1.src,\r\n\t\ttitle: \"Globe Section\",\r\n\t\tdescription: `Embark on a virtual journey around the world with our state-of-the-art 3D globe feature. This interactive marvel allows users to explore geographical data, global trends, and worldwide connections with unprecedented ease and detail. Spin the globe with a flick of your mouse, zoom into street-level views, or soar high for a continental perspective. Our globe section integrates real-time data feeds, showcasing everything from climate patterns and population densities to economic indicators and cultural hotspots. Customizable layers let you focus on specific data sets, while intuitive tooltips provide in-depth information at every turn. `,\r\n\t\ttags: [\"Misty\", \"Path\", \"Mysterious\", \"Serene\", \"Rugged\"],\r\n\t},\r\n\t{\r\n\t\tid: 3,\r\n\t\turl: Image1.src,\r\n\r\n\t\ttitle: \"Image Mouse Trail\",\r\n\t\tdescription: `Transform your browsing experience with our mesmerizing Image Mouse Trail feature. As you move your cursor across the screen, watch in wonder as a trail of carefully curated images follows in its wake, creating a dynamic and engaging visual spectacle. This innovative feature goes beyond mere aesthetics; it's an interactive showcase of your content, products, or artwork. Each image in the trail can be clickable, leading to detailed views or related content, turning casual mouse movements into opportunities for discovery.`,\r\n\t\ttags: [\"Pathway\", \"Adventure\", \"Peaks\", \"Challenging\", \"Breathtaking\"],\r\n\t},\r\n];\r\n\r\nexport const example_cardstack_data = [\r\n\t{\r\n\t\ttitle: \"something\",\r\n\t\timages: [{ url: Image1.src, ...Image1 }],\r\n\t},\r\n\t{\r\n\t\ttitle: \"nm,.nm,.\",\r\n\t\timages: [{ url: Image1.src, ...Image1 }],\r\n\t},\r\n\t{\r\n\t\ttitle: \"kl;jl;kkjl;\",\r\n\t\timages: [{ url: Image1.src, ...Image1 }],\r\n\t},\r\n\t{\r\n\t\ttitle: \"rewyrey\",\r\n\t\timages: [{ url: Image1.src, ...Image1 }],\r\n\t},\r\n\t{\r\n\t\ttitle: \"essdaf\",\r\n\t\timages: [{ url: Image1.src, ...Image1 }],\r\n\t},\r\n];\r\n\r\nexport const example_testimonials_data = [\r\n\t{\r\n\t\ttitle: \"testimonial 1\",\r\n\t\tcomment: \"etst\",\r\n\t},\r\n\t{\r\n\t\ttitle: \"testimonial 1\",\r\n\t\tcomment: \"etst\",\r\n\t},\r\n\t{\r\n\t\ttitle: \"testimonial 1\",\r\n\t\tcomment: \"etst\",\r\n\t},\r\n];\r\n\r\nexport const example_opposite_links_data = [\r\n\t{\r\n\t\tid: 1,\r\n\t\ttitle: \"first entry\",\r\n\t\timage: Image1,\r\n\t\turi: \"/#\",\r\n\t},\r\n\t{\r\n\t\tid: 1,\r\n\t\ttitle: \"first entry\",\r\n\t\timage: Image1,\r\n\t\turi: \"/#\",\r\n\t},\r\n\t{\r\n\t\tid: 2,\r\n\t\ttitle: \"first entry\",\r\n\t\timage: Image1,\r\n\t\turi: \"/#\",\r\n\t},\r\n\t{\r\n\t\tid: 3,\r\n\t\ttitle: \"first entry\",\r\n\t\timage: Image1,\r\n\t\turi: \"/#\",\r\n\t},\r\n\t{\r\n\t\tid: 4,\r\n\t\ttitle: \"first entry\",\r\n\t\timage: Image1,\r\n\t\turi: \"/#\",\r\n\t},\r\n\t{\r\n\t\tid: 5,\r\n\t\ttitle: \"first entry\",\r\n\t\timage: Image1,\r\n\t\turi: \"/#\",\r\n\t},\r\n\t{\r\n\t\tid: 6,\r\n\t\ttitle: \"first entry\",\r\n\t\timage: Image1,\r\n\t\turi: \"/#\",\r\n\t},\r\n];\r\n\r\nexport const demoItems = [\r\n\t{\r\n\t\tlink: \"#\",\r\n\t\ttext: \"Mojave\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tlink: \"#\",\r\n\t\ttext: \"Sonoma\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tlink: \"#\",\r\n\t\ttext: \"Monterey\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tlink: \"#\",\r\n\t\ttext: \"Sequoia\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n];\r\n\r\nexport const testimonials = [\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\ttext: \"Using this library has been a game-changer for our product development.\",\r\n\t\tname: \"Michael Davis\",\r\n\t\tjobtitle: \"Full Stack Developer\",\r\n\t\trating: 5,\r\n\t},\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\ttext: \"I love  how intuitive and well-documented this component library is. It has significantly improved our UI consistency across projects.\",\r\n\t\tname: \"James Wilson\",\r\n\t\tjobtitle: \"Product Manager\",\r\n\t\trating: 2,\r\n\t},\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\ttext: \"This library has saved us a significant amount of time and effort. The components are well-documented and easy to integrate.\",\r\n\t\tname: \"Sarah Taylor\",\r\n\t\tjobtitle: \"Backend Developer\",\r\n\t\trating: 5,\r\n\t},\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\ttext: \"The components are highly responsive and work seamlessly across different devices and screen sizes.\",\r\n\t\tname: \"Emily Chen\",\r\n\t\tjobtitle: \"Mobile App Developer\",\r\n\t\trating: 5,\r\n\t},\r\n];\r\n\r\nexport const images = [\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\t\talt: \"Rabbit\",\r\n\t},\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\t\talt: \"Monkey\",\r\n\t},\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\t\talt: \"Donkey\",\r\n\t},\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\t\talt: \"Cow\",\r\n\t},\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\t\talt: \"Chameleon\",\r\n\t},\r\n];\r\n\r\nexport const infiniteMenuItems = [\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\tlink: \"https://google.com/\",\r\n\t\ttitle: \"Item 1\",\r\n\t\tdescription: \"This is pretty cool, right?\",\r\n\t},\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\tlink: \"https://google.com/\",\r\n\t\ttitle: \"Item 2\",\r\n\t\tdescription: \"This is pretty cool, right?\",\r\n\t},\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\tlink: \"https://google.com/\",\r\n\t\ttitle: \"Item 3\",\r\n\t\tdescription: \"This is pretty cool, right?\",\r\n\t},\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\tlink: \"https://google.com/\",\r\n\t\ttitle: \"Item 4\",\r\n\t\tdescription: \"This is pretty cool, right?\",\r\n\t},\r\n];\r\n\r\nexport const exampleData = [\r\n\t<div\r\n\t\tkey=\"one\"\r\n\t\tclassName=\"w-80 rounded-md p-5 bg-blue-100 border-2 border-blue-300 space-y-2 shadow-lg shadow-blue-200\"\r\n\t>\r\n\t\t<p className=\"text-sm uppercase\">Feature #1</p>\r\n\t\t<h3 className=\"text-lg text-balance font-semibold\">\r\n\t\t\tIntroduce a feature and its benefit.\r\n\t\t</h3>\r\n\t\t<div className=\"aspect-video grid place-items-center bg-neutral-200 rounded-md\">\r\n\t\t\t<Image\r\n\t\t\t\twidth={100}\r\n\t\t\t\theight={100}\r\n\t\t\t\tsrc={\"/itjustworks.jpg\"}\r\n\t\t\t\talt={\"\"}\r\n\t\t\t\tclassName=\"text-neutral-500\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t\t<p className=\"text-sm\">\r\n\t\t\tExplain how the feature provide value and benefit your customers. Keep\r\n\t\t\tit short and sweet.\r\n\t\t</p>\r\n\t</div>,\r\n\t<div\r\n\t\tkey=\"tow\"\r\n\t\tclassName=\"w-80 rounded-md p-5 bg-amber-100 border-2 border-amber-300 space-y-2 shadow-lg shadow-amber-200\"\r\n\t>\r\n\t\t<p className=\"text-sm uppercase\">Feature #2</p>\r\n\t\t<h3 className=\"text-lg text-balance font-semibold\">\r\n\t\t\tIntroduce a feature and its benefit.\r\n\t\t</h3>\r\n\t\t<div className=\"aspect-video grid place-items-center bg-neutral-200 rounded-md\">\r\n\t\t\t<Image\r\n\t\t\t\twidth={100}\r\n\t\t\t\theight={100}\r\n\t\t\t\tclassName=\"text-neutral-500\"\r\n\t\t\t\tsrc={\"/itjustworks.jpg\"}\r\n\t\t\t\talt={\"\"}\r\n\t\t\t/>\r\n\t\t</div>\r\n\t\t<p className=\"text-sm\">\r\n\t\t\tExplain how the feature provide value and benefit your customers. Keep\r\n\t\t\tit short and sweet.\r\n\t\t</p>\r\n\t</div>,\r\n\t<div\r\n\t\tkey=\"three\"\r\n\t\tclassName=\"w-80 rounded-md p-5 bg-green-100 border-2 border-green-300 space-y-2 shadow-lg shadow-green-200\"\r\n\t>\r\n\t\t<p className=\"text-sm uppercase\">Feature #3</p>\r\n\t\t<h3 className=\"text-lg text-balance font-semibold\">\r\n\t\t\tIntroduce a feature and its benefit.\r\n\t\t</h3>\r\n\t\t<div className=\"aspect-video grid place-items-center bg-neutral-200 rounded-md\">\r\n\t\t\t<Image\r\n\t\t\t\twidth={100}\r\n\t\t\t\theight={100}\r\n\t\t\t\tsrc={\"/itjustworks.jpg\"}\r\n\t\t\t\talt={\"\"}\r\n\t\t\t\tclassName=\"text-neutral-500\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t\t<p className=\"text-sm\">\r\n\t\t\tExplain how the feature provide value and benefit your customers. Keep\r\n\t\t\tit short and sweet.\r\n\t\t</p>\r\n\t</div>,\r\n];\r\n\r\nexport const TAB_CONTENT = [\r\n\t{\r\n\t\ttitle: \"2024\",\r\n\t\tfiles: [\r\n\t\t\t\"learning-to-meditate.md\",\r\n\t\t\t\"spring-garden-plans.md\",\r\n\t\t\t\"travel-wishlist.md\",\r\n\t\t\t\"new-coding-projects.md\",\r\n\t\t],\r\n\t},\r\n\t{\r\n\t\ttitle: \"2023\",\r\n\t\tfiles: [\r\n\t\t\t\"year-in-review.md\",\r\n\t\t\t\"marathon-training-log.md\",\r\n\t\t\t\"recipe-collection.md\",\r\n\t\t\t\"book-reflections.md\",\r\n\t\t],\r\n\t},\r\n\t{\r\n\t\ttitle: \"2022\",\r\n\t\tfiles: [\r\n\t\t\t\"moving-to-a-new-city.md\",\r\n\t\t\t\"starting-a-blog.md\",\r\n\t\t\t\"photography-basics.md\",\r\n\t\t\t\"first-coding-project.md\",\r\n\t\t],\r\n\t},\r\n\t{\r\n\t\ttitle: \"2021\",\r\n\t\tfiles: [\r\n\t\t\t\"goals-and-aspirations.md\",\r\n\t\t\t\"daily-gratitude.md\",\r\n\t\t\t\"learning-to-cook.md\",\r\n\t\t\t\"remote-work-journal.md\",\r\n\t\t],\r\n\t},\r\n];\r\n\r\nexport const projects = [\r\n\t{\r\n\t\ttitle: \"Stripe\",\r\n\t\tdescription:\r\n\t\t\t\"A technology company that builds economic infrastructure for the internet.\",\r\n\t\tlink: \"https://stripe.com\",\r\n\t},\r\n\t{\r\n\t\ttitle: \"Netflix\",\r\n\t\tdescription:\r\n\t\t\t\"A streaming service that offers a wide variety of award-winning TV shows, movies, anime, documentaries, and more on thousands of internet-connected devices.\",\r\n\t\tlink: \"https://netflix.com\",\r\n\t},\r\n\t{\r\n\t\ttitle: \"Google\",\r\n\t\tdescription:\r\n\t\t\t\"A multinational technology company that specializes in Internet-related services and products.\",\r\n\t\tlink: \"https://google.com\",\r\n\t},\r\n\t{\r\n\t\ttitle: \"Meta\",\r\n\t\tdescription:\r\n\t\t\t\"A technology company that focuses on building products that advance Facebook's mission of bringing the world closer together.\",\r\n\t\tlink: \"https://meta.com\",\r\n\t},\r\n\t{\r\n\t\ttitle: \"Amazon\",\r\n\t\tdescription:\r\n\t\t\t\"A multinational technology company focusing on e-commerce, cloud computing, digital streaming, and artificial intelligence.\",\r\n\t\tlink: \"https://amazon.com\",\r\n\t},\r\n\t{\r\n\t\ttitle: \"Microsoft\",\r\n\t\tdescription:\r\n\t\t\t\"A multinational technology company that develops, manufactures, licenses, supports, and sells computer software, consumer electronics, personal computers, and related services.\",\r\n\t\tlink: \"https://microsoft.com\",\r\n\t},\r\n];\r\n\r\nexport const socials = [\r\n\t{\r\n\t\tname: \"Instagram\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tname: \"LinkedIn\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tname: \"Spotify\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n\t{\r\n\t\tname: \"TikTok\",\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t},\r\n];\r\n\r\nexport const stepsExamples: Step[] = [\r\n\t{\r\n\t\ttitle: \"Welcome to Our Platform!\",\r\n\t\tdescription: \"Let's take a quick tour of our new features!\",\r\n\t\timage: [\r\n\t\t\t{\r\n\t\t\t\tsrc: \"/itjustworks.jpg\",\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\tsrc: \"/itjustworks.jpg\",\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\tsrc: \"/itjustworks.jpg\",\r\n\t\t\t},\r\n\t\t],\r\n\t},\r\n\t{\r\n\t\ttitle: \"Powerful Dashboard!\",\r\n\t\tdescription: \"Everything you need, right at your fingertips!\",\r\n\t\timage: [\r\n\t\t\t{\r\n\t\t\t\ttype: \"video\",\r\n\t\t\t\tsrc: \"/placeholder.mp4\",\r\n\t\t\t\tautoPlay: true,\r\n\t\t\t\tloop: true,\r\n\t\t\t\tclassName: \"shadow-none\",\r\n\t\t\t},\r\n\t\t],\r\n\t\texpandHeight: 120,\r\n\t},\r\n\t{\r\n\t\ttitle: \"Useful Tips!\",\r\n\t\tdescription: \"You can also use the sidebar to go to different pages!\",\r\n\t\timage: [\r\n\t\t\t{\r\n\t\t\t\tsrc: \"/itjustworks.jpg\",\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\tsrc: \"/itjustworks.jpg\",\r\n\t\t\t},\r\n\t\t],\r\n\t\texpandHeight: 140,\r\n\t},\r\n\t{\r\n\t\ttitle: \"Ready to Start?\",\r\n\t\tdescription: \"You're all set to explore the platform!\",\r\n\t\timage: [\r\n\t\t\t{\r\n\t\t\t\tsrc: \"/itjustworks.jpg\",\r\n\t\t\t\tclassName: \"shadow-none\",\r\n\t\t\t},\r\n\t\t],\r\n\t\texpandHeight: 140,\r\n\t},\r\n];\r\n\r\nexport const fadeInVariants = {\r\n\thidden: { opacity: 0 },\r\n\tvisible: {\r\n\t\topacity: 1,\r\n\t\ttransition: { duration: 0.5, staggerChildren: 0.1 },\r\n\t},\r\n};\r\n\r\nexport const wordVariants = {\r\n\thidden: { opacity: 0 },\r\n\tvisible: { opacity: 1 },\r\n};\r\n\r\nexport const words = \"Weekly goodies delivered straight to your inbox —\".split(\r\n\t\" \"\r\n);\r\n\r\nexport const transition = {\r\n\ttype: \"spring\",\r\n\tduration: 1,\r\n\tdelay: 0.4,\r\n\tbounce: 0,\r\n};\r\nexport const highlightClass = \"rounded-[0.3em] px-px\";\r\nexport const highlightColor = \"#F2AD91\";\r\nexport const inViewOptions = { once: true, initial: true, amount: 0.1 };\r\nexport const ASCII = [\"✎\", \"✐\", \"✏\", \"✑\"];\r\n\r\nexport const filter_constants = {\r\n\tDESKTOP_ONLY: \"desktop only\",\r\n\tMOBILE_READY: \"mobile ready\",\r\n\tDARK_MODE: \"dark mode ready\",\r\n\ta11y_ready: \"A11Y ready\",\r\n\tBACKGROUND: \"background\",\r\n\tACCORDION: \"accordion\",\r\n\tBUTTON: \"button\",\r\n\tBLOG_ARTICLES: \"block/articles\",\r\n\tCAROUSEL: \"carousel\",\r\n\tCARD: \"card\",\r\n\tCTA: \"cta\",\r\n\tDROPDOWN: \"dropdown\",\r\n\tFAQ: \"faq\",\r\n\tFEATURES: \"features\",\r\n\tFOOTER: \"footer\",\r\n\tFORM: \"form\",\r\n\tHERO: \"hero\",\r\n\tINTERACTIVE: \"interactive\",\r\n\tNAVIGATION: \"navigation\",\r\n\tNUMBERS: \"numbers\",\r\n\tPRELOADERS: \"preloaders\",\r\n\tPRICING: \"pricing\",\r\n\tSECTIONS: \"sections\",\r\n\tSTATS: \"stats\",\r\n\tTABS: \"tabs\",\r\n\tTESTIMONIALS: \"testimonials\",\r\n\tTEXT: \"text\",\r\n\tTIMELINE: \"timeline\",\r\n\tTRANSITIONS: \"transitions\",\r\n};\r\n\r\nexport const filterOptions = [\r\n\t{ label: \"desktop only\", value: \"desktop only\" },\r\n\t{ label: \"mobile ready\", value: \"mobile ready\" },\r\n\t{ label: \"dark mode ready\", value: \"dark mode ready\" },\r\n\t{ label: \"a11y ready\", value: \"a11y ready\" },\r\n\r\n\t{ label: \"accordion\", value: \"accordion\" },\r\n\t{ label: \"Button\", value: \"Button\" },\r\n\t{\r\n\t\tlabel: \"blog/articles\",\r\n\t\tvalue: \"blog/articles\",\r\n\t},\r\n\t{ label: \"Carousel\", value: \"Carousel\" },\r\n\t{ label: \"card\", value: \"card\" },\r\n\t{ label: \"cta\", value: \"cta\" },\r\n\t{ label: \"dropdown\", value: \"dropdown\" },\r\n\t{ label: \"FAQ\", value: \"FAQ\" },\r\n\t{ label: \"features\", value: \"features\" },\r\n\t{ label: \"footer\", value: \"footer\" },\r\n\t{ label: \"form\", value: \"form\" },\r\n\t{ label: \"Hero\", value: \"Hero\" },\r\n\t{ label: \"interactive\", value: \"interactive\" },\r\n\t{ label: \"navigation\", value: \"navigation\" },\r\n\t{ label: \"numbers\", value: \"numbers\" },\r\n\t{ label: \"preloaders\", value: \"preloaders\" },\r\n\t{ label: \"pricing\", value: \"pricing\" },\r\n\t{ label: \"sections\", value: \"sections\" },\r\n\t{ label: \"stats\", value: \"stats\" },\r\n\t{ label: \"tabs\", value: \"tabs\" },\r\n\t{ label: \"testimonials\", value: \"testimonials\" },\r\n\t{ label: \"text\", value: \"text\" },\r\n\t{ label: \"timeline\", value: \"timeline\" },\r\n\t{ label: \"transitions\", value: \"transitions\" },\r\n];\r\n\r\nexport const exampleImages = [\r\n\t{\r\n\t\turl: \"/itjustworks.jpg\",\r\n\t\tauthor: \"Branislav Rodman\",\r\n\t\ttitle: \"A Black and White Photo of a Woman Brushing Her Teeth\",\r\n\t},\r\n\t{\r\n\t\turl: \"/itjustworks.jpg\",\r\n\t\tlink: \"https://unsplash.com/photos/a-painting-of-a-palm-leaf-on-a-multicolored-background-AaNPwrSNOFE\",\r\n\t\ttitle: \"Neon Palm\",\r\n\t\tauthor: \"Tim Mossholder\",\r\n\t},\r\n\t{\r\n\t\turl: \"/itjustworks.jpg\",\r\n\t\tlink: \"https://unsplash.com/photos/a-blurry-photo-of-a-crowd-of-people-UgbxzloNGsc\",\r\n\t\tauthor: \"ANDRII SOLOK\",\r\n\t\ttitle: \"A blurry photo of a crowd of people\",\r\n\t},\r\n\t{\r\n\t\turl: \"/itjustworks.jpg\",\r\n\t\tlink: \"https://unsplash.com/photos/rippling-crystal-blue-water-9-OCsKoyQlk\",\r\n\t\tauthor: \"Wesley Tingey\",\r\n\t\ttitle: \"Rippling Crystal Blue Water\",\r\n\t},\r\n\t{\r\n\t\turl: \"/itjustworks.jpg\",\r\n\t\tlink: \"https://unsplash.com/de/fotos/mann-im-schwarzen-hemd-unter-blauem-himmel-m8RDNiuEXro\",\r\n\t\tauthor: \"Serhii Tyaglovsky\",\r\n\t\ttitle: \"Mann im schwarzen Hemd unter blauem Himmel\",\r\n\t},\r\n\t{\r\n\t\turl: \"/itjustworks.jpg\",\r\n\t\tlink: \"https://unsplash.com/photos/a-woman-with-a-flower-crown-on-her-head-0S3muIttbsY\",\r\n\t\tauthor: \"Vladimir Yelizarov\",\r\n\t\ttitle: \"A women with a flower crown on her head\",\r\n\t},\r\n\t{\r\n\t\turl: \"/itjustworks.jpg\",\r\n\t\ttitle: \"A blurry photo of white flowers in a field\",\r\n\t\tauthor: \"Eugene Golovesov\",\r\n\t\tlink: \"https://unsplash.com/photos/a-blurry-photo-of-white-flowers-in-a-field-6qbx0lzGPyc\",\r\n\t},\r\n\t{\r\n\t\turl: \"/itjustworks.jpg\",\r\n\t\tauthor: \"Mathilde Langevin\",\r\n\t\tlink: \"https://unsplash.com/photos/a-table-topped-with-two-wine-glasses-and-plates-Ig0gRAHspV0\",\r\n\t\ttitle: \"A table topped with two wine glasses and plates\",\r\n\t},\r\n];\r\n\r\nexport const chromaItems = [\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\ttitle: \"Sarah Johnson\",\r\n\t\tsubtitle: \"Frontend Developer\",\r\n\t\thandle: \"@sarahjohnson\",\r\n\t\tborderColor: \"#3B82F6\",\r\n\t\tgradient: \"linear-gradient(145deg, #3B82F6, #000)\",\r\n\t\turl: \"https://github.com/sarahjohnson\",\r\n\t},\r\n\t{\r\n\t\timage: \"/itjustworks.jpg\",\r\n\t\ttitle: \"Mike Chen\",\r\n\t\tsubtitle: \"Backend Engineer\",\r\n\t\thandle: \"@mikechen\",\r\n\t\tborderColor: \"#10B981\",\r\n\t\tgradient: \"linear-gradient(180deg, #10B981, #000)\",\r\n\t\turl: \"https://linkedin.com/in/mikechen\",\r\n\t},\r\n];\r\n\r\nexport const mediaBetweenElements = [\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\r\n\t\tleft: \"Tim\",\r\n\t\tright: \"Rodenböker\",\r\n\t\turl: \"https://www.instagram.com/tim_rodenbroeker/\",\r\n\t},\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\r\n\t\tleft: \"Simon \",\r\n\t\tright: \"Alexander-Adams\",\r\n\t\turl: \"https://www.instagram.com/polyhop/\",\r\n\t},\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\r\n\t\tleft: \"Andreion\",\r\n\t\tright: \"de Castro\",\r\n\t\turl: \"https://www.instagram.com/andreiongd/\",\r\n\t},\r\n\t{\r\n\t\tsrc: \"/itjustworks.jpg\",\r\n\r\n\t\tleft: \"Lorraine\",\r\n\t\tright: \"Li\",\r\n\t\turl: \"https://www.instagram.com/lorrr.l/\",\r\n\t},\r\n];\r\n\r\nexport const items = [\r\n\t{\r\n\t\ticon: <Home />,\r\n\t\timg: \"/itjustworks.jpg\",\r\n\t\ttitle: \"Bridge\",\r\n\t\tdesc: \"A breathtaking view of a city illuminated by countless lights, showcasing the vibrant and bustling nightlife.\",\r\n\t\tsliderName: \"bbridge\",\r\n\t},\r\n\t{\r\n\t\ticon: <Home />,\r\n\t\timg: \"/itjustworks.jpg\",\r\n\t\ttitle: \"Mountains View\",\r\n\t\tdesc: \"A serene lake reflecting the surrounding mountains and trees, creating a mirror-like surface.\",\r\n\t\tsliderName: \"bmountains\",\r\n\t},\r\n\t{\r\n\t\ticon: <Home />,\r\n\t\timg: \"/itjustworks.jpg\",\r\n\t\ttitle: \"Autumn\",\r\n\t\tdesc: \"A picturesque path winding through a dense forest adorned with vibrant autumn foliage.\",\r\n\t\tsliderName: \"bautumn\",\r\n\t},\r\n\t{\r\n\t\ticon: <Home />,\r\n\t\timg: \"/itjustworks.jpg\",\r\n\t\ttitle: \"Foggy\",\r\n\t\tsliderName: \"bfoggy\",\r\n\t\tdesc: \"A stunning foggy view over the foresh, with the sun casting a golden glow across the forest. \",\r\n\t},\r\n];\r\n\r\nexport const bentoItems = [\r\n\t{\r\n\t\ttitle: \"The Dawn of Innovation\",\r\n\t\tdescription: \"Explore the birth of groundbreaking ideas and inventions.\",\r\n\t\theader: <Skeleton />,\r\n\t\ticon: <IconClipboardCopy className=\"h-4 w-4 text-neutral-500\" />,\r\n\t},\r\n\t{\r\n\t\ttitle: \"The Digital Revolution\",\r\n\t\tdescription: \"Dive into the transformative power of technology.\",\r\n\t\theader: <Skeleton />,\r\n\t\ticon: <IconClipboardCopy className=\"h-4 w-4 text-neutral-500\" />,\r\n\t},\r\n\t{\r\n\t\ttitle: \"The Art of Design\",\r\n\t\tdescription: \"Discover the beauty of thoughtful and functional design.\",\r\n\t\theader: <Skeleton />,\r\n\t\ticon: <IconClipboardCopy className=\"h-4 w-4 text-neutral-500\" />,\r\n\t},\r\n\t{\r\n\t\ttitle: \"The Power of Communication\",\r\n\t\tdescription:\r\n\t\t\t\"Understand the impact of effective communication in our lives.\",\r\n\t\theader: <Skeleton />,\r\n\t\ticon: <IconClipboardCopy className=\"h-4 w-4 text-neutral-500\" />,\r\n\t},\r\n\t{\r\n\t\ttitle: \"The Pursuit of Knowledge\",\r\n\t\tdescription: \"Join the quest for understanding and enlightenment.\",\r\n\t\theader: <Skeleton />,\r\n\t\ticon: <IconClipboardCopy className=\"h-4 w-4 text-neutral-500\" />,\r\n\t},\r\n\t{\r\n\t\ttitle: \"The Joy of Creation\",\r\n\t\tdescription: \"Experience the thrill of bringing ideas to life.\",\r\n\t\theader: <Skeleton />,\r\n\t\ticon: <IconClipboardCopy className=\"h-4 w-4 text-neutral-500\" />,\r\n\t},\r\n\t{\r\n\t\ttitle: \"The Spirit of Adventure\",\r\n\t\tdescription: \"Embark on exciting journeys and thrilling discoveries.\",\r\n\t\theader: <Skeleton />,\r\n\t\ticon: <IconClipboardCopy className=\"h-4 w-4 text-neutral-500\" />,\r\n\t},\r\n];\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/skeleton.tsx",
      "content": "import { cn } from \"@/registry/utilities/cn\";\r\n\r\nfunction Skeleton({\r\n\tclassName,\r\n\t...props\r\n}: React.HTMLAttributes<HTMLDivElement>) {\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={cn(\"animate-pulse rounded-md bg-muted\", className)}\r\n\t\t\t{...props}\r\n\t\t/>\r\n\t);\r\n}\r\n\r\nexport { Skeleton };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}