✨ added more cards (#266)

* ✨ added accordion & playground cards

* ✨ added stepper component

Author: Ansub

public/images/ui/accordion.svg

@@ -1,3 +1,5 @@
+'use client'
+
 import { motion, AnimatePresence } from 'framer-motion'
 import { Check, Copy } from 'lucide-react'
 import React, { useEffect, useState } from 'react'
@@ -21,7 +23,7 @@ const CopyPasteButton = () => {
     <motion.button
       whileTap={{ scale: 0.9, opacity: 0.8 }}
       onClick={() => setCopied(!copied)}
-      className="rounded-lg border border-gray-100  bg-gray-900 p-3 text-white"
+      className="rounded-lg border border-gray-100  bg-red-500 p-3 text-white"
     >
       <AnimatePresence mode="wait" initial={false}>
         {copied ? (

public/images/ui/stepper.svg

@@ -5,6 +5,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import HeartbeatButton from '../components/button/HeartbeatButton'
 import Card from './Card'
+import CopyPasteButton from '../playground/CopyPasteButton'
 
 const data = [
   {
@@ -37,6 +38,21 @@ const data = [
     component: <SimpleToggle />,
     link: '/components/toggle',
   },
+  {
+    title: 'Accordion',
+    image: '/images/ui/accordion.svg',
+    link: '/components/accordion',
+  },
+  {
+    title: 'Playground',
+    component: <CopyPasteButton />,
+    link: '/playground',
+  },
+  {
+    title: 'Stepper',
+    image: '/images/ui/stepper.svg',
+    link: '/components/stepper',
+  },
 ]
 
 const ComponentCards = () => {