apex-ui-kit 2.10.0 → 2.12.0

package/dist/ApexUI-Kit/templates/Testimonials/Testimonials.jsx

@@ -1,120 +1,140 @@
-/* eslint-disable no-unused-vars */
-import React, { useState } from 'react';
-import { motion, AnimatePresence } from "framer-motion";
-import { ArrowLeft, ArrowRight } from 'lucide-react';
-
-
-// --- Testimonials Component ---
-const Testimonials = ({ testimonials }) => {
-    const [activeIndex, setActiveIndex] = useState(0);
-
-    const handleNext = () => {
-        setActiveIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
-    };
-
-    const handlePrev = () => {
-        setActiveIndex((prevIndex) => (prevIndex - 1 + testimonials.length) % testimonials.length);
-    };
-
-    // Animation variants for the text content
-    const textVariants = {
-        enter: { opacity: 0, y: 20, filter: "blur(5px)" },
-        center: { opacity: 1, y: 0, filter: "blur(0px)" },
-        exit: { opacity: 0, y: -20, filter: "blur(5px)" },
-    };
-
-    return (
-        <div className="w-full max-w-4xl mx-auto bg-slate-950 rounded-2xl p-6 sm:p-8 md:p-12 border border-slate-800 grid md:grid-cols-2 gap-8 md:gap-12 items-center overflow-hidden">
-
-            {/* Left Part: Text Content and Navigation */}
-            <div className="flex flex-col justify-center h-full text-center md:text-left order-2 md:order-1">
-                {/* Title, subtitle and quote with animation; the min height keeps the buttons from jumping. */}
-                <div className="relative min-h-[13rem] sm:min-h-[12rem]">
-                    <AnimatePresence initial={false} mode="wait">
-                        <motion.div
-                            key={activeIndex}
-                            variants={textVariants}
-                            initial="enter"
-                            animate="center"
-                            exit="exit"
-                            transition={{ duration: 0.4, ease: "easeInOut" }}
-                            className="w-full"
-                        >
-                            <h2 className="text-2xl sm:text-3xl font-bold text-white tracking-tight">{testimonials[activeIndex].author}</h2>
-                            <p className="mt-2 text-lime-400 font-medium">{testimonials[activeIndex].title}</p>
-                            <p className="mt-4 text-slate-400 text-sm leading-relaxed">"{testimonials[activeIndex].text}"</p>
-                        </motion.div>
-                    </AnimatePresence>
-                </div>
-
-                {/* Navigation Buttons with Microinteractions */}
-                <div className="flex items-center justify-center md:justify-start gap-4 mt-8">
-                    <motion.button
-                        onClick={handlePrev}
-                        className="bg-slate-800/80 hover:bg-slate-800 rounded-full p-3 transition-colors duration-300 text-slate-400 hover:text-lime-400 focus:outline-none"
-                        whileHover={{ scale: 1.1 }}
-                        whileTap={{ scale: 0.95 }}
-                        transition={{ type: 'spring', stiffness: 400, damping: 17 }}
-                    >
-                        <ArrowLeft size={20} />
-                    </motion.button>
-                    <motion.button
-                        onClick={handleNext}
-                        className="bg-slate-800/80 hover:bg-slate-800 rounded-full p-3 transition-colors duration-300 text-slate-400 hover:text-lime-400 focus:outline-none"
-                        whileHover={{ scale: 1.1 }}
-                        whileTap={{ scale: 0.95 }}
-                        transition={{ type: 'spring', stiffness: 400, damping: 17 }}
-                    >
-                        <ArrowRight size={20} />
-                    </motion.button>
-                </div>
-            </div>
-
-            {/* Right Part: Stacked Images */}
-            <div className="flex w-full items-center justify-center order-1 md:order-2">
-                {/* Sized to the card plus the fan, so the stack stays centred and inside the panel. */}
-                <div className="relative h-[calc(16rem+30px)] w-[calc(12rem+60px)] sm:h-[calc(20rem+30px)] sm:w-[calc(16rem+60px)]">
-                {testimonials.map((testimonial, index) => {
-                    // Determine the position of the card in the stack
-                    const position = (index - activeIndex + testimonials.length) % testimonials.length;
-
-                    // Only render the top 4 cards for performance and visual clarity
-                    if (position > 3) return null;
-
-                    return (
-                        <motion.div
-                            key={testimonial.id || index}
-                            className="absolute w-48 h-64 sm:w-64 sm:h-80 bg-slate-800 rounded-xl shadow-2xl overflow-hidden border-2 border-slate-700"
-                            initial={false}
-                            animate={{
-                                scale: 1 - position * 0.08,
-                                rotate: -4 + position * 4, // Add a fanned rotation effect
-                                left: `${position * 20}px`, // Fan out horizontally
-                                top: `${position * 10}px`, // Stagger vertically
-                                zIndex: testimonials.length - position,
-                                opacity: position === 0 ? 1 : 0.5, // Only top image is fully opaque
-                            }}
-                            transition={{
-                                type: 'spring',
-                                stiffness: 260,
-                                damping: 25,
-                            }}
-                        >
-                            <img
-                                src={testimonial.image}
-                                alt={testimonial.author}
-                                className="w-full h-full object-cover"
-                                onError={(e) => { e.target.onerror = null; e.target.src = `https://placehold.co/256x320/0f172a/a3e635?text=${testimonial.author.split(' ')[0]}`; }}
-                            />
-                        </motion.div>
-                    );
-                })}
-                </div>
-            </div>
-        </div>
-    );
-};
-
-
-
-export default Testimonials;
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { motion, AnimatePresence } from "framer-motion";
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+
+
+// --- Testimonials Component ---
+const Testimonials = ({ testimonials }) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    // The layout follows the card's own width (not the screen), so it also
+    // fits sidebars, preview frames and narrow columns.
+    const root = useRef(null);
+    const [size, setSize] = useState("lg");
+
+    useLayoutEffect(() => {
+        const el = root.current;
+        if (!el) return undefined;
+        const ro = new ResizeObserver(() => {
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            const w = el.clientWidth / rem;
+            setSize(w < 26 ? "sm" : w < 44 ? "md" : "lg");
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+
+    const wide = size === "lg";
+    const small = size === "sm";
+
+    const handleNext = () => {
+        setActiveIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
+    };
+
+    const handlePrev = () => {
+        setActiveIndex((prevIndex) => (prevIndex - 1 + testimonials.length) % testimonials.length);
+    };
+
+    // Animation variants for the text content
+    const textVariants = {
+        enter: { opacity: 0, y: 20, filter: "blur(5px)" },
+        center: { opacity: 1, y: 0, filter: "blur(0px)" },
+        exit: { opacity: 0, y: -20, filter: "blur(5px)" },
+    };
+
+    return (
+        <div ref={root} className={`w-full max-w-4xl mx-auto bg-slate-950 rounded-2xl border border-slate-800 grid items-center overflow-hidden ${wide ? "grid-cols-2 gap-12 p-12" : small ? "gap-6 p-5" : "gap-8 p-8"}`}>
+
+            {/* Left Part: Text Content and Navigation */}
+            <div className={`flex flex-col justify-center h-full ${wide ? "text-left order-1" : "text-center order-2"}`}>
+                {/* Title, subtitle and quote with animation; the min height keeps the buttons from jumping. */}
+                <div className={`relative ${small ? "min-h-[15rem]" : "min-h-[12rem]"}`}>
+                    <AnimatePresence initial={false} mode="wait">
+                        <motion.div
+                            key={activeIndex}
+                            variants={textVariants}
+                            initial="enter"
+                            animate="center"
+                            exit="exit"
+                            transition={{ duration: 0.4, ease: "easeInOut" }}
+                            className="w-full"
+                        >
+                            <h2 className={`${small ? "text-2xl" : "text-3xl"} font-bold text-white tracking-tight`}>{testimonials[activeIndex].author}</h2>
+                            <p className="mt-2 text-lime-400 font-medium">{testimonials[activeIndex].title}</p>
+                            <p className="mt-4 text-slate-400 text-sm leading-relaxed">"{testimonials[activeIndex].text}"</p>
+                        </motion.div>
+                    </AnimatePresence>
+                </div>
+
+                {/* Navigation Buttons with Microinteractions */}
+                <div className={`flex items-center gap-4 ${wide ? "justify-start mt-8" : "justify-center mt-5"}`}>
+                    <motion.button
+                        onClick={handlePrev}
+                        aria-label="Previous testimonial"
+                        className="bg-slate-800/80 hover:bg-slate-800 rounded-full p-3 transition-colors duration-300 text-slate-400 hover:text-lime-400 focus:outline-none"
+                        whileHover={{ scale: 1.1 }}
+                        whileTap={{ scale: 0.95 }}
+                        transition={{ type: 'spring', stiffness: 400, damping: 17 }}
+                    >
+                        <ArrowLeft size={20} />
+                    </motion.button>
+                    <motion.button
+                        onClick={handleNext}
+                        aria-label="Next testimonial"
+                        className="bg-slate-800/80 hover:bg-slate-800 rounded-full p-3 transition-colors duration-300 text-slate-400 hover:text-lime-400 focus:outline-none"
+                        whileHover={{ scale: 1.1 }}
+                        whileTap={{ scale: 0.95 }}
+                        transition={{ type: 'spring', stiffness: 400, damping: 17 }}
+                    >
+                        <ArrowRight size={20} />
+                    </motion.button>
+                </div>
+            </div>
+
+            {/* Right Part: Stacked Images */}
+            <div className={`flex w-full items-center justify-center ${wide ? "order-2" : "order-1"}`}>
+                {/* Sized to the card plus the fan, so the stack stays centred and inside the panel. */}
+                <div className={`relative ${small ? "h-[calc(14rem+30px)] w-[calc(10.5rem+60px)]" : "h-[calc(20rem+30px)] w-[calc(16rem+60px)]"}`}>
+                {testimonials.map((testimonial, index) => {
+                    // Determine the position of the card in the stack
+                    const position = (index - activeIndex + testimonials.length) % testimonials.length;
+
+                    // Only render the top 4 cards for performance and visual clarity
+                    if (position > 3) return null;
+
+                    return (
+                        <motion.div
+                            key={testimonial.id || index}
+                            className={`absolute ${small ? "w-[10.5rem] h-56" : "w-64 h-80"} bg-slate-800 rounded-xl shadow-2xl overflow-hidden border-2 border-slate-700`}
+                            initial={false}
+                            animate={{
+                                scale: 1 - position * 0.08,
+                                rotate: -4 + position * 4, // Add a fanned rotation effect
+                                left: `${position * 20}px`, // Fan out horizontally
+                                top: `${position * 10}px`, // Stagger vertically
+                                zIndex: testimonials.length - position,
+                                opacity: position === 0 ? 1 : 0.5, // Only top image is fully opaque
+                            }}
+                            transition={{
+                                type: 'spring',
+                                stiffness: 260,
+                                damping: 25,
+                            }}
+                        >
+                            <img
+                                src={testimonial.image}
+                                alt={testimonial.author}
+                                className="w-full h-full object-cover"
+                                onError={(e) => { e.target.onerror = null; e.target.src = `https://placehold.co/256x320/0f172a/a3e635?text=${testimonial.author.split(' ')[0]}`; }}
+                            />
+                        </motion.div>
+                    );
+                })}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+
+
+export default Testimonials;

package/dist/cli/index.js

@@ -40,7 +40,6 @@ const componentMap = {
     "rain-background": "RainBackground",
     "ripple-background": "RippleBackground",
     "scroll-marquee": "ScrollMarquee",
-    "smart-grid-card": "SmartGridCard",
     "smoke-background": "SmokeBackground",
     "tooltip": "ToolTip",
     "tool-tip": "ToolTip",
@@ -153,6 +152,31 @@ const extraDeps = {
     WebGLCarousel: ["ogl"],
     CrossedMarquee: ["simple-icons"],
 };
+// Packages the app already has (or that ship with Node), never installed by us.
+const BUILTIN = new Set(["react", "react-dom", "path", "fs", "url"]);
+// The npm packages a component folder imports, read from its source files.
+async function importedPackages(dir) {
+    const found = new Set();
+    const walk = async (d) => {
+        for (const entry of await fs.readdir(d, { withFileTypes: true })) {
+            const full = path.join(d, entry.name);
+            if (entry.isDirectory())
+                await walk(full);
+            else if (/\.(jsx?|tsx?|mjs)$/.test(entry.name)) {
+                const code = await fs.readFile(full, "utf8");
+                const re = /(?:from\s+|import\s*\(\s*|import\s+)["']([^"'.\/][^"']*)["']/g;
+                for (let m = re.exec(code); m; m = re.exec(code)) {
+                    const spec = m[1];
+                    const name = spec.startsWith("@") ? spec.split("/").slice(0, 2).join("/") : spec.split("/")[0];
+                    if (!BUILTIN.has(name))
+                        found.add(name);
+                }
+            }
+        }
+    };
+    await walk(dir);
+    return [...found];
+}
 async function main() {
     const args = process.argv.slice(2);
     const command = args[0];
@@ -220,26 +244,6 @@ async function main() {
             { title: "TypeScript (Coming Soon)", value: "ts", disabled: true },
         ],
     });
-    // Install dependencies
-    console.log(chalk.cyan("📦 Installing dependencies..."));
-    const deps = [
-        "gsap",
-        "framer-motion",
-        "three",
-        "@fortawesome/fontawesome-svg-core",
-        "@fortawesome/free-solid-svg-icons",
-        "@fortawesome/react-fontawesome",
-        "react-icons",
-        "lucide-react",
-        ...(extraDeps[matchedName] ?? []),
-    ];
-    try {
-        execSync(`npm install ${deps.join(" ")}`, { stdio: "inherit" });
-    }
-    catch (err) {
-        console.log(chalk.red("❌ Failed to install dependencies."));
-        return;
-    }
     // Prepare destination
     const apexKitPath = path.join(basePath, "ApexUI-Kit");
     const dest = path.join(apexKitPath, matchedName);
@@ -250,6 +254,21 @@ async function main() {
         console.log(chalk.red(`❌ Internal error: Component folder '${matchedName}' not found.`));
         return;
     }
+    // Install only what this component imports, so the app stays light.
+    const deps = [...new Set([...(await importedPackages(source)), ...(extraDeps[matchedName] ?? [])])];
+    if (deps.length) {
+        console.log(chalk.cyan(`📦 Installing ${deps.join(", ")}...`));
+        try {
+            execSync(`npm install ${deps.join(" ")}`, { stdio: "inherit" });
+        }
+        catch (err) {
+            console.log(chalk.red("❌ Failed to install dependencies."));
+            return;
+        }
+    }
+    else {
+        console.log(chalk.cyan("📦 No extra packages needed."));
+    }
     await fs.ensureDir(dest);
     await fs.copy(source, dest);
     console.log(chalk.green(`✅ '${matchedName}' added to ${dest}`));

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "apex-ui-kit",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "license": "MIT",
-  "description": "118 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
+  "description": "117 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
   "homepage": "https://apex-ui.in",
   "repository": {
     "type": "git",
@@ -60,5 +60,11 @@
     "@types/node": "^20.4.0",
     "copyfiles": "^2.4.1",
     "typescript": "^5.4.0"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "engines": {
+    "node": ">=18"
   }
 }

package/dist/ApexUI-Kit/templates/SmartGridCard/SmartGridCard.jsx

@@ -1,243 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { gsap } from "gsap";
-import {
-    Box,
-    Settings,
-    Lock,
-    Sparkles,
-    Search,
-    LaptopMinimal,
-} from "lucide-react";
-
-const CARD_HEIGHT = 264;
-const CARD_EXPANDED_HEIGHT = 2 * CARD_HEIGHT + 10; // two rows plus the grid gap
-
-const SmartGridCard = ({
-    cards = defaultCards(),
-    mergeMap = {}, // Example: { 5: 2 }
-    borderColor = "cyan"
-}) => {
-    // Track screen width for responsive mergeMap logic
-    const [screenWidth, setScreenWidth] = useState(() => typeof window !== 'undefined' ? window.innerWidth : 1200);
-    useEffect(() => {
-        const handleResize = () => setScreenWidth(window.innerWidth);
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, []);
-    const isLargeScreen = screenWidth >= 1080;
-    const isThreeCol = screenWidth >= 1024;
-    const isTwoCol = screenWidth >= 768 && screenWidth < 1024;
-    const cardRefs = useRef({});
-    const [mousePos, setMousePos] = useState({});
-
-    useEffect(() => {
-        if (!isLargeScreen) return; // Only run mergeMap effect on large screens
-        // Defensive: never trigger a reload, only animate
-        if (Object.keys(mergeMap).length === 0) return; // No merges to process
-        // Animate cards based on mergeMap
-        Object.entries(mergeMap).forEach(([sourceId, targetId]) => {
-            const sourceEl = cardRefs.current[sourceId];
-            const targetEl = cardRefs.current[targetId];
-
-            if (targetEl) {
-                gsap.to(targetEl, {
-                    height: CARD_EXPANDED_HEIGHT,
-                    duration: 0.5,
-                    ease: "power2.out",
-                });
-            }
-
-            if (sourceEl) {
-                gsap.to(sourceEl, {
-                    opacity: 0,
-                    scale: 0.9,
-                    duration: 0.3,
-                    onComplete: () => {
-                        if (sourceEl) sourceEl.style.display = "none";
-                    },
-                });
-            }
-        });
-        // No reload, no navigation, no window.location
-        return () => { };
-    }, [mergeMap, isLargeScreen]);
-
-    const handleMouseMove = (e, id) => {
-        const bounds = e.currentTarget.getBoundingClientRect();
-        const x = e.clientX - bounds.left;
-        const y = e.clientY - bounds.top;
-        setMousePos((prev) => ({
-            ...prev,
-            [id]: { x, y },
-        }));
-    };
-
-    const getCardStyle = (id) => {
-        // <768px: 1 column
-        if (screenWidth < 768) {
-            return {
-                display: 'block',
-                height: CARD_HEIGHT,
-                gridColumnStart: 'auto',
-                gridRowStart: 'auto',
-            };
-        }
-        // 768px - 1023px: 2 columns
-        if (isTwoCol) {
-            const col = ((id - 1) % 2) + 1;
-            const row = Math.floor((id - 1) / 2) + 1;
-            return {
-                display: 'block',
-                height: CARD_HEIGHT,
-                gridColumnStart: col,
-                gridRowStart: row,
-            };
-        }
-        // 1024px and above: 3 columns (mergeMap only for >=1080px)
-        if (isThreeCol) {
-            if (screenWidth < 1080) {
-                const col = ((id - 1) % 3) + 1;
-                const row = Math.floor((id - 1) / 3) + 1;
-                return {
-                    display: 'block',
-                    height: CARD_HEIGHT,
-                    gridColumnStart: col,
-                    gridRowStart: row,
-                };
-            }
-            // >=1080px: 3 columns, merging enabled
-            const isMerged = mergeMap[id];
-            const isTarget = Object.values(mergeMap).includes(id);
-            if (isMerged) return { display: "none" };
-            const col = ((id - 1) % 3) + 1;
-            const row = Math.floor((id - 1) / 3) + 1;
-            return {
-                gridColumnStart: col,
-                gridRowStart: row,
-                height: isTarget ? CARD_EXPANDED_HEIGHT : CARD_HEIGHT,
-            };
-        }
-    };
-
-    return (
-        <div
-            className={`grid gap-2 justify-center p-4 w-full ${screenWidth >= 1024 ? 'grid-cols-3' : screenWidth >= 768 ? 'grid-cols-2' : 'grid-cols-1'}`}
-            style={screenWidth >= 1024 ? {
-                // minmax(0, …): columns share the container's width instead of overflowing it.
-                gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
-                gridTemplateRows: `repeat(2, ${CARD_HEIGHT}px)`
-            } : screenWidth >= 768 ? {
-                gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-                gridTemplateRows: `repeat(3, ${CARD_HEIGHT}px)`
-            } : {}}
-        >
-            {cards.map((card) => {
-                const style = getCardStyle(card.id);
-                if (style.display === "none") return null;
-
-                const pos = mousePos[card.id] || { x: 0, y: 0 };
-
-                return (
-                    <div
-                        key={card.id}
-                        ref={(el) => (cardRefs.current[card.id] = el)}
-                        style={style}
-                        onMouseMove={(e) => handleMouseMove(e, card.id)}
-                        className="group relative overflow-hidden p-[1px] rounded-2xl bg-zinc-900 border border-zinc-700 shadow-2xl transition-all duration-500"
-                    >
-                        {/* Mouse Glow Border */}
-                        <div
-                            className="pointer-events-none absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition duration-300"
-                            style={{
-                                maskImage: `radial-gradient(circle at ${pos.x}px ${pos.y}px, white 40%, transparent 80%)`,
-                                WebkitMaskImage: `radial-gradient(circle at ${pos.x}px ${pos.y}px, white 40%, transparent 80%)`,
-                                background: `radial-gradient(circle at ${pos.x}px ${pos.y}px, ${borderColor}, transparent 80%)`,
-                                borderRadius: "1rem",
-                            }}
-                        />
-
-                        {/* Card Content */}
-                        {/* Compact enough that the button always fits inside the fixed card height */}
-                        <div className="relative z-10 flex flex-col items-start h-full w-full p-5 rounded-2xl bg-zinc-900 text-white gap-3">
-                            <div className="flex h-11 w-11 shrink-0 items-center justify-center border border-dashed rounded-lg border-purple-600">{card.icon}</div>
-                            <div className="min-h-0">
-                                <h3 className="text-lg font-bold mb-1.5 break-words leading-tight">{card.title}</h3>
-                                <p className="text-sm leading-relaxed w-full text-white/70 break-words line-clamp-3">{card.description}</p>
-                            </div>
-                            <button
-                                type="button"
-                                className="mt-auto shrink-0 relative overflow-hidden whitespace-nowrap px-4 py-2 rounded-lg border border-purple-400/60 text-white transition hover:text-white bg-black/20 group flex items-center gap-2 text-sm"
-                            >
-                                <span className="relative z-10 flex items-center gap-2">
-                                    {card.buttonText}
-                                    <span className="arrow-icon transition-transform duration-200 group-hover:translate-x-2 flex items-center">
-                                        <svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
-                                            <path d="M5 12h14M13 6l6 6-6 6" />
-                                        </svg>
-                                    </span>
-                                </span>
-                                <span
-                                    className="absolute bottom-0 left-0 w-full h-full opacity-0 group-hover:opacity-100 origin-bottom transition-all ease-in-out duration-500 rounded-lg"
-                                    style={{
-                                        background: "radial-gradient(circle at bottom, purple, transparent 69%)",
-                                        mixBlendMode: "screen",
-                                    }}
-                                />
-                            </button>
-                        </div>
-                    </div>
-                );
-            })}
-        </div>
-    );
-};
-
-// Default Cards
-function defaultCards() {
-    return [
-        {
-            id: 1,
-            icon: <LaptopMinimal className="w-6 h-6 text-white" />,
-            title: "Responsive Layout",
-            description: "Works across all screen sizes with smooth animation.",
-            buttonText: "Learn More",
-        },
-        {
-            id: 2,
-            icon: <Box className="w-6 h-6 text-white" />,
-            title: "Composable Components",
-            description: "Each card is modular and easy to customize.",
-            buttonText: "Explore",
-        },
-        {
-            id: 3,
-            icon: <Settings className="w-6 h-6 text-white" />,
-            title: "Easy Config",
-            description: "Use props like mergeMap to control logic.",
-            buttonText: "Settings",
-        },
-        {
-            id: 4,
-            icon: <Lock className="w-6 h-6 text-white" />,
-            title: "Secure UI",
-            description: "Perfect for dashboards and secure apps.",
-            buttonText: "Secure Now",
-        },
-        {
-            id: 5,
-            icon: <Sparkles className="w-6 h-6 text-white" />,
-            title: "Edge Effects",
-            description: "Glowing borders that follow your mouse.",
-            buttonText: "Try It",
-        },
-        {
-            id: 6,
-            icon: <Search className="w-6 h-6 text-white" />,
-            title: "Fast Search",
-            description: "Lightning-fast component navigation.",
-            buttonText: "Search",
-        },
-    ];
-}
-
-export default SmartGridCard;