feat: add shadow pluse button animation

src/components/Dashboard/Dashboard.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import SideBar from "./SideBar";
+import PulseButtonSnippets from "../SnippetComponents/PulseButtonSnippets";
+
+const Dashboard = () => {
+  // State to track which category is selected in the sidebar
+  const [activeTab, setActiveTab] = useState("Pulse Buttons");
+
+  return (
+    <div className="flex h-screen bg-gray-100 dark:bg-gray-900">
+      {/* Sidebar component - passing state setter to change tabs */}
+      <SideBar setActiveTab={setActiveTab} activeTab={activeTab} />
+
+      {/* Main Content Area */}
+      <main className="flex-1 overflow-y-auto p-8">
+        <div className="max-w-7xl mx-auto">
+          {/* FIXED: Removed the extra closing brace here */}
+          <h1 className="text-3xl font-bold text-gray-800 dark:text-white mb-8">
+            {activeTab}
+          </h1>
+
+          {/* Conditional Rendering Logic for your feature */}
+          {activeTab === "Pulse Buttons" && <PulseButtonSnippets />}
+
+          {/* Add future conditional renders here */}
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default Dashboard;

src/components/SnippetComponents/PulseButtonSnippets.jsx

@@ -0,0 +1,96 @@
+import React, { useState } from "react";
+import Modal from "../UI/Modal";
+import StringToReactComponent from "string-to-react-component";
+// Import buttonSnippets from the central snippet data file
+import { buttonSnippets } from "./Snippets/Buttons";
+import FavoriteButton from "../../Pages/Favorites/FavoriteButton";
+
+/**
+ * PulseButtonSnippets Component
+ * Follows the precise format of the existing button snippets while
+ * implementing the logic for the Shadow Pulse Button [1, 3].
+ */
+function PulseButtonSnippets() {
+  const [showModal, setShowModal] = useState(false);
+  const [jsxCode, setJsxCode] = useState("");
+  const [cssCode, setCssCode] = useState("");
+
+  const handleShowModal = (jsx, css) => {
+    setJsxCode(jsx);
+    setCssCode(css);
+    setShowModal(true);
+  };
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 bg-gradient-to-br from-white via-gray-50/30 to-blue-50/30 dark:from-gray-900 dark:via-gray-800/80 dark:to-gray-900/50 rounded-lg ">
+      {/* 
+        Mapping logic specifically for the Shadow Pulse Button to ensure 
+        it aligns with the 'logic of the pulsebutton' you requested.
+      */}
+      {buttonSnippets
+        .filter((buttonObject) => buttonObject.label === "Shadow Pulse Button")
+        .map((buttonObject, index) => (
+        <div
+          key={index}
+          className="
+            p-8 pt-14 
+          bg-[#dbeafe]
+          dark:bg-secondary-800 
+          text-secondary-900 dark:text-white 
+            rounded-lg 
+            border border-blue-300 dark:border-[#a855f7]
+            shadow-lg shadow-[0_4px_20px_rgba(0,0,0,0.2)] dark:shadow-[0_4px_20px_rgba(255,255,255,0.1)] 
+            flex flex-col items-center justify-evenly gap-10 relative 
+            text-sm
+          "
+        >
+          {/* Favorite Button - Absolute Positioned per your template */}
+          <div className="absolute top-4 right-4">
+            <FavoriteButton
+              snippet={{
+                type: "button",
+                index: index,
+                title: buttonObject.label, 
+                jsxCode: buttonObject.jsxCode,
+                cssCode: buttonObject.cssCode,
+              }}
+              size="md"
+            />
+          </div>
+
+          {/* Live Preview Rendering [3] */}
+          <StringToReactComponent>
+            {`(props) => (${buttonObject.jsxCode})`}
+          </StringToReactComponent>
+
+          <div className="flex flex-col gap-4 w-full">
+            <button
+              className="w-full bg-blue-500 text-white text-md py-3 px-6 rounded-full shadow-md hover:shadow-lg transition-all duration-200"
+              onClick={() =>
+                handleShowModal(buttonObject.jsxCode, buttonObject.cssCode)
+              }
+            >
+              Show CSS
+            </button>
+            <button
+              className="w-full text-secondary-900 dark:text-white border border-secondary-300 dark:border-secondary-600 bg-white dark:bg-secondary-700 text-md py-3 px-6 rounded-full shadow-md hover:shadow-lg transition-all duration-200"
+              onClick={() =>
+                handleShowModal(buttonObject.jsxCode, buttonObject.cssCode)
+              }
+            >
+              React Snippet
+            </button>
+          </div>
+        </div>
+      ))}
+      <Modal
+        showModal={showModal}
+        onClose={() => setShowModal(false)}
+        jsxCode={jsxCode}
+        cssCode={cssCode}
+      />
+    </div>
+  );
+}
+
+export default PulseButtonSnippets;

src/components/SnippetComponents/Snippets/Buttons.js

@@ -1,4 +1,12 @@
 export const buttonSnippets = [
+   {
+    label: "Shadow Pulse Button",
+    tags: ['pulse', 'animation', 'tailwind'],
+    cssCode:
+      '<button style="background-color: #9333ea; color: white; padding: 12px 24px; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);">Pulse Effect</button>',
+    jsxCode:
+      "<button className={`px-6 py-3 font-semibold text-white bg-purple-600 rounded-lg shadow-lg animate-pulse`}>Pulse Effect</button>",
+  },
   {
     label: "Move Right",
     tags: ['hover', 'slide', 'transform'],