apex-ui-kit 2.0.6 → 2.0.7

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

@@ -0,0 +1,101 @@
+/* eslint-disable no-unused-vars */
+import React, { useState, useEffect, useRef } from "react";
+import { gsap } from "gsap";
+import { FaExternalLinkAlt, FaGithub, FaRegImage } from "react-icons/fa";
+const CARD_STACK_OFFSET = 32;
+const CARD_SCALE_STEP = 0.08;
+const AUTO_CYCLE_INTERVAL = 5000;
+export default function CardStack({
+    cards = [],
+    autoCycle = true,
+    cycleInterval = AUTO_CYCLE_INTERVAL,
+}) {
+    const [active, setActive] = useState(0);
+    const [isHovered, setIsHovered] = useState(false);
+    const [isScrolling, setIsScrolling] = useState(false);
+    const timeoutRef = useRef(null);
+    const scrollTimeoutRef = useRef(null);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!autoCycle || isHovered || isScrolling) return;
+        timeoutRef.current = setTimeout(() => {
+            setActive((prev) => (prev + 1) % cards.length);
+        }, cycleInterval);
+        return () => clearTimeout(timeoutRef.current);
+    }, [active, isHovered, isScrolling, autoCycle, cycleInterval, cards.length]);
+
+    useEffect(() => {
+        const handleScroll = () => {
+            setIsScrolling(true);
+            clearTimeout(scrollTimeoutRef.current);
+            scrollTimeoutRef.current = setTimeout(() => setIsScrolling(false), 150);
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            clearTimeout(scrollTimeoutRef.current);
+        };
+    }, []);
+    useEffect(() => {
+        if (!containerRef.current) return;
+        const cardElements = gsap.utils.toArray(".card-item", containerRef.current);
+        const tl = gsap.timeline({
+            defaults: { duration: 0.6, ease: "elastic.out(1, 0.3)" },
+        });
+        cardElements.forEach((card, i) => {
+            const isTop = i === 0;
+            const z = cards.length - i;
+            const offset = i * CARD_STACK_OFFSET;
+            const scale = 1 - i * CARD_SCALE_STEP;
+
+            tl.to(card, {
+                y: -offset,
+                scale: scale,
+                filter: isTop ? "none" : "blur(1px)",
+                opacity: 1,
+                zIndex: z,
+            }, 0);
+        });
+        return () => {
+            tl.kill();
+        };
+    }, [active]);
+    const getCardIndex = (i) => (active + i) % cards.length;
+    return (
+        <div
+            ref={containerRef}
+            className="relative flex justify-center items-center h-[340px] md:h-[400px] w-full max-w-lg mx-auto"
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+        >
+            {cards.map((_, i) => {
+                if (i >= 4) return null;
+
+                const idx = getCardIndex(i);
+                const isTop = i === 0;
+                const card = cards[idx];
+
+                return (
+                    <div
+                        key={idx}
+                        className={`card-item absolute left-0 right-0 mx-auto w-11/12 md:w-96 h-48 md:h-60 rounded-3xl shadow-xl bg-gradient-to-br ${card.color} bg-slate-950 border border-white/20 flex flex-row items-center px-3 md:px-6 py-4 cursor-pointer select-none ${isTop ? "" : "pointer-events-none"}`}
+                        style={{ opacity: 0 }}
+                    >
+                        <div className="flex-shrink-0 flex items-center justify-center w-16 h-16 md:w-24 md:h-24 lg:w-28 lg:h-28 rounded-xl overflow-hidden bg-white/10 border border-white/20 mr-3 md:mr-6">
+                            {card.image ? (<img src={card.image} alt={card.title} className="object-cover w-full h-full" />) : (<FaRegImage className="text-3xl text-white/40" />)}
+                        </div>
+                        <div className="flex-1 flex flex-col justify-center gap-1 md:gap-2 overflow-hidden">
+                            <div className="flex items-center gap-2">
+                                <h2 className="text-base md:text-xl font-bold text-white drop-shadow truncate">{card.title}</h2>
+                                {card.github && (<a href={card.github} target="_blank" rel="noopener noreferrer" className="text-white/70 hover:text-white ml-1 flex-shrink-0"><FaGithub className="inline-block align-middle text-lg md:text-xl" /></a>)}
+                            </div>
+                            <p className="text-xs md:text-sm text-white/60 mb-1 truncate">{card.subtitle}</p>
+                            <p className="text-xs md:text-base text-white/80 mb-1 line-clamp-2">{card.desc}</p>
+                            {card.link && (<a href={card.link} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-xs md:text-sm px-2 py-1 rounded bg-blue-500/80 hover:bg-blue-600/90 text-white font-semibold shadow transition w-fit mt-1"><FaExternalLinkAlt className="inline-block mr-1 text-xs md:text-sm" />Visit</a>)}
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

package/dist/ApexUI-Kit/templates/Carousel/ParallaxCarousel.jsx

@@ -1,161 +0,0 @@
-/* eslint-disable no-unused-vars */
-import React, { useState, useEffect, useRef } from 'react';
-import { motion, useMotionValue, useTransform } from 'framer-motion';
-import { ArrowLeft, ArrowRight } from 'lucide-react';
-
-// --- Card Component with Hover Parallax Effect ---
-const CarouselCard = ({ slide, isCenter }) => {
-    const cardRef = useRef(null);
-    const x = useMotionValue(0);
-    const y = useMotionValue(0);
-
-    // Mouse move ke hisab se rotation calculate karta hai (effect ko strong banaya gaya hai)
-    const rotateX = useTransform(y, [-200, 200], [15, -15]);
-    const rotateY = useTransform(x, [-200, 200], [-15, 15]);
-    const handleMouseMove = (event) => {
-        if (!cardRef.current || !isCenter) return;
-        const rect = cardRef.current.getBoundingClientRect();
-        x.set(event.clientX - rect.left - rect.width / 2);
-        y.set(event.clientY - rect.top - rect.height / 2);
-    };
-
-    const handleMouseLeave = () => {
-        x.set(0);
-        y.set(0);
-    };
-
-    return (
-        <motion.div
-            ref={cardRef}
-            className="w-full h-full bg-slate-900 rounded-2xl group"
-            style={{
-                transformStyle: 'preserve-3d',
-                perspective: '1500px',
-                rotateX: isCenter ? rotateX : 0,
-                rotateY: isCenter ? rotateY : 0,
-            }}
-            onMouseMove={handleMouseMove}
-            onMouseLeave={handleMouseLeave}
-
-        >
-            {/* Slide Content */}
-            <div className="absolute inset-0 w-full h-full"
-                style={{
-                    transformStyle: 'preserve-3d',
-                    perspective: '1500px',
-                }}
-            >
-                <img
-                    src={slide.imageUrl}
-                    alt={slide.title}
-                    className="w-full h-full object-cover group-hover:opacity-30 transition-all duration-300 ease-in-out rounded-2xl"
-                />
-                <img
-                    src={slide.pngUrl}
-                    alt={slide.title}
-                    className="absolute inset-0 w-full h-full object-cover group-hover:translate-z-15 transition-all duration-300 ease-in-out rounded-2xl"
-                />
-            </div>
-            <div
-                className="relative flex flex-col justify-end h-full text-white p-8"
-                style={{
-                    transformStyle: 'preserve-3d',
-                    perspective: '1500px',
-                }}
-            >
-                <h2 className="text-3xl font-bold group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.title}</h2>
-                <p className="text-lime-400 mt-1 group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.subtitle}</p>
-                <p className="text-slate-300 mt-4 text-sm leading-relaxed group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.text}</p>
-            </div>
-        </motion.div>
-    );
-};
-
-
-// --- Custom Parallax Carousel Component ---
-const ParallaxCarousel = ({ slides }) => {
-    const [activeIndex, setActiveIndex] = useState(0);
-    const [isHovered, setIsHovered] = useState(false);
-
-    const handleNext = () => {
-        setActiveIndex((prevIndex) => (prevIndex + 1) % slides.length);
-    };
-
-    const handlePrev = () => {
-        setActiveIndex((prevIndex) => (prevIndex - 1 + slides.length) % slides.length);
-    };
-
-    // Automatic sliding ke liye
-    useEffect(() => {
-        // Agar hovered hai to interval start hi mat karo
-        if (isHovered) {
-            return;
-        }
-
-        const interval = setInterval(() => {
-            handleNext();
-        }, 4000); // Har 4 second mein slide change hoga
-
-        return () => clearInterval(interval); // Cleanup
-    }, [activeIndex, isHovered]); // isHovered state change hone par effect ko firse chalayega
-
-    return (
-        <div
-            className="relative w-full flex flex-col items-center px-2"
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
-        >
-            {/* 3D Carousel Container */}
-            <div
-                className="relative w-full h-[480px] portrait:h-[480px] portrait:px-0"
-                style={{ perspective: '1200px', transformStyle: 'preserve-3d' }}
-            >
-                {slides.map((slide, index) => {
-                    let positionOffset = index - activeIndex;
-                    if (positionOffset > slides.length / 2) {
-                        positionOffset -= slides.length;
-                    } else if (positionOffset < -slides.length / 2) {
-                        positionOffset += slides.length;
-                    }
-
-                    const isVisible = Math.abs(positionOffset) <= 2;
-
-                    return (
-                        <motion.div
-                            key={index}
-                            className={`absolute w-full h-[340px] portrait:w-full portrait:h-[480px] top-0 left-0 portrait:left-0 portrait:top-0 ${positionOffset === 0 ? '' : ' pointer-events-none'} md:w-[50%] md:h-[400px] md:top-[50px] md:left-1/2 lg:-translate-x-1/2`}
-                            initial={false}
-                            style={{ transformStyle: 'preserve-3d' }}
-                            animate={{
-                                transform: `translateX(${positionOffset * 50}%) translateZ(${-Math.abs(positionOffset) * 250}px) scale(${1 - Math.abs(positionOffset) * 0.15})`,
-                                opacity: isVisible ? (1 - Math.abs(positionOffset) * 0.45) : 0,
-                                zIndex: slides.length - Math.abs(positionOffset),
-                            }}
-                            transition={{ type: 'spring', stiffness: 290, damping: 30 }}
-                        >
-                            <CarouselCard slide={slide} isCenter={positionOffset === 0} />
-                        </motion.div>
-                    );
-                })}
-            </div>
-
-            {/* Side Navigation Buttons */}
-            <motion.button
-                onClick={handlePrev}
-                className="absolute -left-10 lg:left-0 top-1/2 -translate-y-1/2 z-30 p-3 rounded-full text-slate-400 hover:text-lime-400  transition-colors"
-                whileTap={{ scale: 0.9 }}
-            >
-                <ArrowLeft size={32} />
-            </motion.button>
-            <motion.button
-                onClick={handleNext}
-                className="absolute -right-10 lg:right-0 top-1/2 -translate-y-1/2 z-30 p-3 rounded-full text-slate-400 hover:text-lime-400 transition-colors"
-                whileTap={{ scale: 0.9 }}
-            >
-                <ArrowRight size={32} />
-            </motion.button>
-        </div>
-    );
-};
-
-export default ParallaxCarousel;

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

@@ -16,10 +16,16 @@ const DragCarousel = ({ images }) => {
     const dragProxyRef = useRef(null);
     useEffect(() => {
         const cards = cardsRef.current;
+        // hint browser to use the GPU for transforms
+        cards.forEach((c) => {
+            if (c) c.style.willChange = 'transform, opacity';
+        });
+
         gsap.to(cards, {
-            duration: 0.4,
-            ease: 'power4.Out',
-            stagger: 0.05,
+            duration: 0.45,
+            ease: 'power2.out',
+            stagger: 0.03,
+            overwrite: true,
             // Har card ke liye naya transform calculate karta hai
             transform: (i) => {
                 let positionOffset = i - activeIndex;
@@ -31,7 +37,7 @@ const DragCarousel = ({ images }) => {
 
                 const translateX = positionOffset * 50;
                 const translateZ = -Math.abs(positionOffset) * 250;
-                const scale = 1 - Math.abs(positionOffset) * 0.15;
+                const scale = 1 - Math.abs(positionOffset) * 0.12;
 
                 return `translateX(${translateX}%) translateZ(${translateZ}px) scale(${scale})`;
             },
@@ -53,14 +59,39 @@ const DragCarousel = ({ images }) => {
     // GSAP Draggable ko setup karta hai
     useEffect(() => {
         // BUG FIX: Draggable ab proxy element par lagaya gaya hai
+        const cards = cardsRef.current;
+        const setters = cards.map((c) => (c ? gsap.quickSetter(c, 'css', 'transform') : null));
+
         const draggableInstance = Draggable.create(dragProxyRef.current, {
             type: "x",
             trigger: carouselRef.current,
             inertia: true,
             cursor: 'grab',
             activeCursor: 'grabbing',
+            onDrag: function () {
+                const w = carouselRef.current ? carouselRef.current.clientWidth : window.innerWidth;
+                const shiftPercent = (this.x / w) * 100; // percentage shift based on drag
+
+                cards.forEach((c, i) => {
+                    if (!c || !setters[i]) return;
+                    let positionOffset = i - activeIndex;
+                    if (positionOffset > images.length / 2) positionOffset -= images.length;
+                    if (positionOffset < -images.length / 2) positionOffset += images.length;
+
+                    const baseX = positionOffset * 50;
+                    const translateX = baseX + shiftPercent;
+                    const translateZ = -Math.abs(positionOffset) * 250;
+                    const scale = 1 - Math.abs(positionOffset) * 0.12;
+
+                    setters[i](`translateX(${translateX}%) translateZ(${translateZ}px) scale(${scale})`);
+                    c.style.opacity = Math.abs(positionOffset - (this.x / w)) > 2 ? 0 : 1;
+                    c.style.zIndex = images.length - Math.abs(positionOffset);
+                });
+            },
             onDragEnd: function () {
-                gsap.to(this.target, { x: 0, duration: 0.3 });
+                // Reset proxy position
+                gsap.to(this.target, { x: 0, duration: 0.35, ease: 'power2.out' });
+                // Direction based index change
                 if (this.getDirection("start") === "left") {
                     setActiveIndex(prev => (prev + 1) % images.length);
                 } else if (this.getDirection("start") === "right") {
@@ -74,8 +105,9 @@ const DragCarousel = ({ images }) => {
             if (draggableInstance && draggableInstance[0]) {
                 draggableInstance[0].kill();
             }
+            setters.forEach((s) => s && s.kill && s.kill());
         };
-    }, [images.length]);
+    }, [images.length, activeIndex]);
 
     return (
         <div

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

@@ -2,18 +2,16 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { motion, useMotionValue, useTransform } from 'framer-motion';
 import { ArrowLeft, ArrowRight } from 'lucide-react';
-
-// --- Card Component with Hover Parallax Effect ---
-const CarouselCard = ({ slide, isCenter }) => {
+const CarouselCard = ({ slide, isCenter, isScrolling }) => {
     const cardRef = useRef(null);
     const x = useMotionValue(0);
     const y = useMotionValue(0);
 
-    // Mouse move ke hisab se rotation calculate karta hai (effect ko strong banaya gaya hai)
     const rotateX = useTransform(y, [-200, 200], [15, -15]);
     const rotateY = useTransform(x, [-200, 200], [-15, 15]);
+
     const handleMouseMove = (event) => {
-        if (!cardRef.current || !isCenter) return;
+        if (!cardRef.current || !isCenter || isScrolling) return;
         const rect = cardRef.current.getBoundingClientRect();
         x.set(event.clientX - rect.left - rect.width / 2);
         y.set(event.clientY - rect.top - rect.height / 2);
@@ -24,6 +22,13 @@ const CarouselCard = ({ slide, isCenter }) => {
         y.set(0);
     };
 
+    useEffect(() => {
+        if (isScrolling) {
+            x.set(0);
+            y.set(0);
+        }
+    }, [isScrolling, x, y]);
+
     return (
         <motion.div
             ref={cardRef}
@@ -36,33 +41,13 @@ const CarouselCard = ({ slide, isCenter }) => {
             }}
             onMouseMove={handleMouseMove}
             onMouseLeave={handleMouseLeave}
-
         >
             {/* Slide Content */}
-            <div className="absolute inset-0 w-full h-full"
-                style={{
-                    transformStyle: 'preserve-3d',
-                    perspective: '1500px',
-                }}
-            >
-                <img
-                    src={slide.imageUrl}
-                    alt={slide.title}
-                    className="w-full h-full object-cover group-hover:opacity-30 transition-all duration-300 ease-in-out rounded-2xl"
-                />
-                <img
-                    src={slide.pngUrl}
-                    alt={slide.title}
-                    className="absolute inset-0 w-full h-full object-cover group-hover:translate-z-15 transition-all duration-300 ease-in-out rounded-2xl"
-                />
+            <div className="absolute inset-0 w-full h-full" style={{ transformStyle: 'preserve-3d', perspective: '1500px' }}>
+                <img src={slide.imageUrl} alt={slide.title} className="w-full h-full object-cover group-hover:opacity-30 transition-all duration-300 ease-in-out rounded-2xl" />
+                <img src={slide.pngUrl} alt={slide.title} className="absolute inset-0 w-full h-full object-cover group-hover:translate-z-15 transition-all duration-300 ease-in-out rounded-2xl" />
             </div>
-            <div
-                className="relative flex flex-col justify-end h-full text-white p-8"
-                style={{
-                    transformStyle: 'preserve-3d',
-                    perspective: '1500px',
-                }}
-            >
+            <div className="relative flex flex-col justify-end h-full text-white p-8" style={{ transformStyle: 'preserve-3d', perspective: '1500px' }}>
                 <h2 className="text-3xl font-bold group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.title}</h2>
                 <p className="text-lime-400 mt-1 group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.subtitle}</p>
                 <p className="text-slate-300 mt-4 text-sm leading-relaxed group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.text}</p>
@@ -75,37 +60,54 @@ const CarouselCard = ({ slide, isCenter }) => {
 // --- Custom Parallax Carousel Component ---
 const ParallaxCarousel = ({ slides }) => {
     const [activeIndex, setActiveIndex] = useState(0);
-    const [isHovered, setIsHovered] = useState(false);
+    const animatingRef = useRef(false);
+    const animTimeoutRef = useRef(null);
 
+    const [isScrolling, setIsScrolling] = useState(false);
+    const scrollTimeoutRef = useRef(null);
+
+    // ✅ REMOVED: isHovered state hata diya gaya hai.
+
+    const NAV_ANIM_MS = 600;
     const handleNext = () => {
+        if (animatingRef.current) return;
+        animatingRef.current = true;
+        clearTimeout(animTimeoutRef.current);
         setActiveIndex((prevIndex) => (prevIndex + 1) % slides.length);
+        animTimeoutRef.current = setTimeout(() => {
+            animatingRef.current = false;
+        }, NAV_ANIM_MS);
     };
 
     const handlePrev = () => {
+        if (animatingRef.current) return;
+        animatingRef.current = true;
+        clearTimeout(animTimeoutRef.current);
         setActiveIndex((prevIndex) => (prevIndex - 1 + slides.length) % slides.length);
+        animTimeoutRef.current = setTimeout(() => {
+            animatingRef.current = false;
+        }, NAV_ANIM_MS);
     };
-
-    // Automatic sliding ke liye
     useEffect(() => {
-        // Agar hovered hai to interval start hi mat karo
-        if (isHovered) {
-            return;
-        }
+        const handleScroll = () => {
+            setIsScrolling(true);
+            clearTimeout(scrollTimeoutRef.current);
+            scrollTimeoutRef.current = setTimeout(() => {
+                setIsScrolling(false);
+            }, 150);
+        };
 
-        const interval = setInterval(() => {
-            handleNext();
-        }, 4000); // Har 4 second mein slide change hoga
+        window.addEventListener('scroll', handleScroll, { passive: true });
+
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            clearTimeout(scrollTimeoutRef.current);
+        };
+    }, []);
 
-        return () => clearInterval(interval); // Cleanup
-    }, [activeIndex, isHovered]); // isHovered state change hone par effect ko firse chalayega
 
     return (
-        <div
-            className="relative w-full flex flex-col items-center px-2"
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
-        >
-            {/* 3D Carousel Container */}
+        <div className="relative w-full flex flex-col items-center px-2">
             <div
                 className="relative w-full h-[480px] portrait:h-[480px] portrait:px-0"
                 style={{ perspective: '1200px', transformStyle: 'preserve-3d' }}
@@ -125,33 +127,24 @@ const ParallaxCarousel = ({ slides }) => {
                             key={index}
                             className={`absolute w-full h-[340px] portrait:w-full portrait:h-[480px] top-0 left-0 portrait:left-0 portrait:top-0 ${positionOffset === 0 ? '' : ' pointer-events-none'} md:w-[50%] md:h-[400px] md:top-[50px] md:left-1/2 lg:-translate-x-1/2`}
                             initial={false}
-                            style={{ transformStyle: 'preserve-3d' }}
+                            style={{ transformStyle: 'preserve-3d', willChange: 'transform, opacity' }}
                             animate={{
                                 transform: `translateX(${positionOffset * 50}%) translateZ(${-Math.abs(positionOffset) * 250}px) scale(${1 - Math.abs(positionOffset) * 0.15})`,
                                 opacity: isVisible ? (1 - Math.abs(positionOffset) * 0.45) : 0,
                                 zIndex: slides.length - Math.abs(positionOffset),
                             }}
-                            transition={{ type: 'spring', stiffness: 290, damping: 30 }}
+                            transition={{ type: 'spring', stiffness: 160, damping: 22 }}
                         >
-                            <CarouselCard slide={slide} isCenter={positionOffset === 0} />
+                            <CarouselCard slide={slide} isCenter={positionOffset === 0} isScrolling={isScrolling} />
                         </motion.div>
                     );
                 })}
             </div>
 
-            {/* Side Navigation Buttons */}
-            <motion.button
-                onClick={handlePrev}
-                className="absolute -left-10 lg:left-0 top-1/2 -translate-y-1/2 z-30 p-3 rounded-full text-slate-400 hover:text-lime-400  transition-colors"
-                whileTap={{ scale: 0.9 }}
-            >
+            <motion.button onClick={handlePrev} className="absolute -left-10 lg:left-0 top-1/2 -translate-y-1/2 z-30 p-3 rounded-full text-slate-400 hover:text-lime-400 transition-colors" whileTap={{ scale: 0.9 }}>
                 <ArrowLeft size={32} />
             </motion.button>
-            <motion.button
-                onClick={handleNext}
-                className="absolute -right-10 lg:right-0 top-1/2 -translate-y-1/2 z-30 p-3 rounded-full text-slate-400 hover:text-lime-400 transition-colors"
-                whileTap={{ scale: 0.9 }}
-            >
+            <motion.button onClick={handleNext} className="absolute -right-10 lg:right-0 top-1/2 -translate-y-1/2 z-30 p-3 rounded-full text-slate-400 hover:text-lime-400 transition-colors" whileTap={{ scale: 0.9 }}>
                 <ArrowRight size={32} />
             </motion.button>
         </div>

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

@@ -6,25 +6,24 @@ const GitHubIcon = () => (<svg width="24" height="24" fill="none" stroke="curren
 const LinkedInIcon = () => (<svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" /><rect x="2" y="9" width="4" height="12" /><circle cx="4" cy="4" r="2" /></svg>);
 const TwitterIcon = () => (<BsTwitterX size={24} />);
 const InstagramIcon = () => (<svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z" /><line x1="17.5" y1="6.5" x2="17.5" y2="6.5" /></svg>);
-const ParallaxProfileCard = ({ profile }) => {
-    const defaultProfile = {
-        avatarUrl: "/assets/spiderman.png",
-        name: "Spider Man",
-        username: "spider_man",
-        dob: "10-08-2001",
-        title: "PhotoGrapher",
-        status: "Available for Hire",
-        socialLinks: {
-            github: "https://github.com/",
-            linkedin: "https://www.linkedin.com/",
-            twitter: "https://twitter.com/",
-            instagram: "https://www.instagram.com/",
-        },
-        // Button actions
-        onHireClick: () => alert("Hire Me button clicked!"),
-        onCvClick: () => alert("CV button clicked!"),
-    };
+const defaultProfile = {
+    avatarUrl: "/assets/spiderman.png",
+    name: "Spider Man",
+    username: "spider_man",
+    dob: "10-08-2001",
+    title: "PhotoGrapher",
+    status: "Available for Hire",
+    socialLinks: {
+        github: "https://github.com/",
+        linkedin: "https://www.linkedin.com/",
+        twitter: "https://twitter.com/",
+        instagram: "https://www.instagram.com/",
+    },
+    onHireClick: () => alert("Hire Me button clicked!"),
+    onCvClick: () => alert("CV button clicked!"),
+};
 
+const ParallaxProfileCard = ({ profile }) => {
     const {
         avatarUrl, name, username, dob, title, status, socialLinks, onHireClick, onCvClick
     } = profile || defaultProfile;
@@ -104,4 +103,16 @@ const ParallaxProfileCard = ({ profile }) => {
     );
 };
 
-export default ParallaxProfileCard;
+const ParallaxProfile = ({ profiles = [defaultProfile], className = '' }) => {
+    const safe = Array.isArray(profiles) && profiles.length > 0 ? profiles : [defaultProfile];
+    return (
+        <div className={`flex flex-wrap gap-6 justify-center ${className}`}>
+            {safe.map((p, i) => (
+                <ParallaxProfileCard key={p.id || p.username || i} profile={p} />
+            ))}
+        </div>
+    );
+};
+
+export { ParallaxProfileCard };
+export default ParallaxProfile;

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

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useState } from "react";
 
-const people = [
+const defaultPeople = [
     { id: 1, name: "Captain America", job: "Leader of the Avengers", img: "/assets/captainamerica.png" },
     { id: 2, name: "Doctor Strange", job: "Sorcerer Supreme", img: "/assets/doctorStrange.png" },
     { id: 3, name: "Iron Man", job: "Leader Of Stark Industries", img: "/assets/ironman.png" },
@@ -9,7 +9,13 @@ const people = [
     { id: 6, name: "Thanos", job: "The Mad Titan", img: "/assets/thanos.png" },
 ];
 
-const PointerFollower = ({ cursorColor = "#fff", interval = 3000, badgeColor = "#fff", badgeTextColor = "#212121" }) => {
+const PointerFollower = ({
+    cursorColor = "#fff",
+    interval = 3000,
+    badgeColor = "#fff",
+    badgeTextColor = "#212121",
+    people = defaultPeople,
+}) => {
     const containerRef = useRef(null);
     const [pos, setPos] = useState({ x: 0, y: 0 });
     const [hovered, setHovered] = useState(false);
@@ -20,11 +26,14 @@ const PointerFollower = ({ cursorColor = "#fff", interval = 3000, badgeColor = "
         if (hovered) return;
 
         const autoInterval = setInterval(() => {
-            setActiveIndex((prev) => (prev + 1) % people.length);
+            setActiveIndex((prev) => {
+                if (!people || people.length === 0) return 0;
+                return (prev + 1) % people.length;
+            });
         }, interval);
 
         return () => clearInterval(autoInterval);
-    }, [hovered, interval]);
+    }, [hovered, interval, people]);
 
     // 🖱️ Mouse tracking
     useEffect(() => {
@@ -53,13 +62,24 @@ const PointerFollower = ({ cursorColor = "#fff", interval = 3000, badgeColor = "
         };
     }, []);
 
-    const person = people[activeIndex]; // ✅ SYNCED HERE
+    // Guard against empty people array
+    const safePeople = Array.isArray(people) && people.length > 0 ? people : defaultPeople;
+    const person = safePeople[activeIndex % safePeople.length]; // ✅ SYNCED HERE
+
+    // If the provided people list changes, ensure activeIndex is valid
+    useEffect(() => {
+        if (!Array.isArray(people) || people.length === 0) {
+            setActiveIndex(0);
+            return;
+        }
+        setActiveIndex((idx) => idx % people.length);
+    }, [people]);
 
     return (
         <div className="relative w-full h-fit flex items-center justify-center">
             <div ref={containerRef} className="absolute flex items-center justify-center w-64  h-66 cursor-none">
                 {/* 🔁 Image stack with auto fade */}
-                {people.map((p, i) => (
+                {safePeople.map((p, i) => (
                     <img
                         key={i}
                         src={p.img}
@@ -67,7 +87,7 @@ const PointerFollower = ({ cursorColor = "#fff", interval = 3000, badgeColor = "
                         className={`absolute w-full h-full object-cover rounded-xl transition-opacity duration-1000 ease-in-out border border-white/10`}
                         style={{
                             transform: `translate(${i * -2}px, ${i * -2}px)`,
-                            zIndex: people.length - i,
+                            zIndex: safePeople.length - i,
                             opacity: activeIndex === i ? 1 : 0,
                         }}
                     />

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

@@ -87,30 +87,37 @@ void main() {
 
 
 export const SmokeBackground = ({
-    color = "#ffffff",
+    color = "#00c950",
     speed = 1,
     direction = "forward",
     scale = 1,
     opacity = 1,
     mouseInteractive = true,
     className = "",
+    maxWidth = 'max-w-4xl',
 }) => {
     const containerRef = useRef(null);
     const mousePos = useRef({ x: 0, y: 0 });
 
     useEffect(() => {
-        if (!containerRef.current) return;
+        const mountNode = containerRef.current;
+        if (!mountNode) return;
 
         const useCustomColor = color ? 1.0 : 0.0;
         const customColorRgb = color ? hexToRgb(color) : [1, 1, 1];
 
         let directionMultiplier = direction === "backward" ? -1.0 : 1.0;
 
+        // cap DPR depending on mount width to avoid heavy pixel loads on small devices
+        const mountWidth = mountNode.clientWidth || window.innerWidth;
+        const dprCap = mountWidth > 1200 ? 1.8 : (mountWidth > 768 ? 1.4 : 1.0);
+        const dpr = Math.min(window.devicePixelRatio || 1, dprCap);
+
         const renderer = new Renderer({
             webgl: 2,
             alpha: true,
             antialias: false,
-            dpr: Math.min(window.devicePixelRatio || 1, 1.8),
+            dpr,
         });
 
         const gl = renderer.gl;
@@ -118,7 +125,7 @@ export const SmokeBackground = ({
         canvas.style.display = "block";
         canvas.style.width = "100%";
         canvas.style.height = "100%";
-        containerRef.current.appendChild(canvas);
+        mountNode.appendChild(canvas);
 
         const geometry = new Triangle(gl);
 
@@ -145,17 +152,17 @@ export const SmokeBackground = ({
         let mouseNeedsUpdate = false;
         const handleMouseMove = (e) => {
             if (!mouseInteractive) return;
-            const rect = containerRef.current.getBoundingClientRect();
+            const rect = mountNode.getBoundingClientRect();
             mousePos.current.x = e.clientX - rect.left;
             mousePos.current.y = rect.height - (e.clientY - rect.top);
             mouseNeedsUpdate = true;
         };
         if (mouseInteractive) {
-            containerRef.current.addEventListener("mousemove", handleMouseMove);
+            mountNode.addEventListener("mousemove", handleMouseMove);
         }
 
         const setSize = () => {
-            const rect = containerRef.current.getBoundingClientRect();
+            const rect = mountNode.getBoundingClientRect();
             const width = Math.max(1, Math.floor(rect.width));
             const height = Math.max(1, Math.floor(rect.height));
             renderer.setSize(width, height);
@@ -167,7 +174,7 @@ export const SmokeBackground = ({
         const ro = new ResizeObserver(() => {
             requestAnimationFrame(setSize);
         });
-        ro.observe(containerRef.current);
+        ro.observe(mountNode);
         setSize();
 
         let raf = 0;
@@ -196,20 +203,21 @@ export const SmokeBackground = ({
         return () => {
             cancelAnimationFrame(raf);
             ro.disconnect();
-            if (mouseInteractive && containerRef.current) {
-                containerRef.current.removeEventListener("mousemove", handleMouseMove);
+            if (mouseInteractive && mountNode) {
+                mountNode.removeEventListener("mousemove", handleMouseMove);
             }
             try {
-                containerRef.current?.removeChild(canvas);
+                mountNode.removeChild(canvas);
             } catch (error) { console.error("Error removing canvas:", error); }
         };
     }, [color, speed, direction, scale, opacity, mouseInteractive, className]);
 
     return (
-        <div
-            ref={containerRef}
-            className={`w-screen lg:h-full h-[80vh] overflow-hidden relative ${className}`}
-        />
+        <div className={`w-full ${className}`}>
+            <div className={`mx-auto w-full ${maxWidth} h-[100vh] lg:h-[90vh] overflow-hidden relative`}>
+                <div ref={containerRef} className="absolute inset-0 w-full h-full" />
+            </div>
+        </div>
     );
 };
 

package/dist/ApexUI-Kit/templates/ThemeToggle/ThemeToggle.css

@@ -95,6 +95,8 @@
   --color-template-border: #fdc700;
   --color-template-text: #fdc700;
   --color-scan: #460809;
+  --selection-bg: #460809;
+  --selection-text: #fdc700;
 
   /* Hero Component */
   --right-color-bg: #e5c287;
@@ -246,6 +248,8 @@
   --color-btn-hover-text: #d9f99d;
   --color-stroke-color: #9ae600;
   --color-scan: #9ae600;
+  --selection-bg: #9ae600;
+  --selection-text: #1e2939;
   /* Hero Component */
   --color-stroke-color: #9ae600;
   --color-template: #101828;

package/dist/cli/index.js

@@ -21,7 +21,7 @@ const componentMap = {
     "basic-card": "Cards",
     "edge-glow-from": "EdgeGlowFrom",
     "glare-card": "GlareCard",
-    "glass-card-stack": "GlassCardStack",
+    "card-stack": "CardStack",
     "glass-profile": "GlassProfile",
     "hover-text": "HoverText",
     "hyper-card": "HyperCard",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apex-ui-kit",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "license": "MIT",
   "description": "Apex UI Kit - A React component library for building modern user interfaces",
   "keywords": [

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

@@ -1,111 +0,0 @@
-/* eslint-disable no-unused-vars */
-import React, { useState, useEffect, useRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { FaExternalLinkAlt, FaGithub, FaRegImage } from "react-icons/fa";
-const CARD_STACK_OFFSET = 32; 
-const CARD_SCALE_STEP = 0.08; 
-const AUTO_CYCLE_INTERVAL = 5000;
-export default function GlassCardStack({
-    cards = [],
-    autoCycle = true,
-    cycleInterval = AUTO_CYCLE_INTERVAL,
-}) {
-    const [active, setActive] = useState(0);
-    const [paused, setPaused] = useState(false);
-    const timeoutRef = useRef();
-
-    useEffect(() => {
-        if (!autoCycle || paused) return;
-        timeoutRef.current = setTimeout(() => {
-            setActive((prev) => (prev + 1) % cards.length);
-        }, cycleInterval);
-        return () => clearTimeout(timeoutRef.current);
-    }, [active, paused, autoCycle, cycleInterval, cards.length]);
-
-    // For cycling animation
-    const getCardIndex = (i) => (active + i) % cards.length;
-
-    return (
-        <div
-            className="relative flex justify-center items-center h-[340px] md:h-[400px] w-full max-w-lg mx-auto select-none"
-            onMouseEnter={() => setPaused(true)}
-            onMouseLeave={() => setPaused(false)}
-        >
-            {cards.map((_, i) => {
-                // Stack order: 0 is top, 1 is next, etc.
-                const idx = getCardIndex(i);
-                const isTop = i === 0;
-                const z = cards.length - i;
-                const offset = i * CARD_STACK_OFFSET;
-                const scale = 1 - i * CARD_SCALE_STEP;
-                const card = cards[idx];
-                return (
-                    <AnimatePresence key={idx}>
-                        <motion.div
-                            key={idx}
-                            initial={{
-                                y: 60,
-                                opacity: 0,
-                                scale: scale * 0.95,
-                            }}
-                            animate={{
-                                y: -offset,
-                                opacity: 1,
-                                scale,
-                                zIndex: z,
-                                filter: isTop ? "none" : "blur(2px)",
-                            }}
-                            exit={{
-                                y: -100,
-                                opacity: 0,
-                                scale: scale * 0.95,
-                            }}
-                            transition={{ type: "spring", stiffness: 300, damping: 30 }}
-                            className={`absolute left-0 right-0 mx-auto w-11/12 md:w-96 h-48 md:h-60 rounded-3xl shadow-xl bg-gradient-to-br ${card.color} backdrop-blur-lg border border-white/20 flex flex-row items-center px-3 md:px-6 py-4 cursor-pointer select-none ${isTop ? "" : "pointer-events-none"}`}
-                            style={{ zIndex: z }}
-                        >
-                            {/* Left: Responsive Image */}
-                            <div className="flex-shrink-0 flex items-center justify-center w-16 h-16 md:w-24 md:h-24 lg:w-28 lg:h-28 rounded-xl overflow-hidden bg-white/10 border border-white/20 mr-3 md:mr-6">
-                                {card.image ? (
-                                    <img
-                                        src={card.image}
-                                        alt={card.title}
-                                        className="object-cover w-full h-full"
-                                    />
-                                ) : (
-                                    <FaRegImage className="text-3xl text-white/40" />
-                                )}
-                            </div>
-                            {/* Right: Info */}
-                            <div className="flex-1 flex flex-col justify-center gap-1 md:gap-2">
-                                <div className="flex items-center gap-2">
-                                    <h2 className="text-base md:text-xl font-bold text-white drop-shadow">
-                                        {card.title}
-                                    </h2>
-                                    {card.github && (
-                                        <a href={card.github} target="_blank" rel="noopener noreferrer" className="text-white/70 hover:text-white ml-1">
-                                            <FaGithub className="inline-block align-middle text-lg md:text-xl" />
-                                        </a>
-                                    )}
-                                </div>
-                                <p className="text-xs md:text-sm text-white/60 mb-1">{card.subtitle}</p>
-                                <p className="text-xs md:text-base text-white/80 mb-1 line-clamp-2">{card.desc}</p>
-                                {card.link && (
-                                    <a
-                                        href={card.link}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="inline-flex items-center gap-1 text-xs md:text-sm px-2 py-1 rounded bg-blue-500/80 hover:bg-blue-600/90 text-white font-semibold shadow transition w-fit mt-1"
-                                    >
-                                        <FaExternalLinkAlt className="inline-block mr-1 text-xs md:text-sm" />
-                                        Visit
-                                    </a>
-                                )}
-                            </div>
-                        </motion.div>
-                    </AnimatePresence>
-                );
-            })}
-        </div>
-    );
-}