apex-ui-kit 2.0.6 → 2.1.0

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,36 +41,16 @@ 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',
-                }}
-            >
-                <h2 className="text-3xl font-bold group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.title}</h2>
+            <div className="relative flex flex-col justify-end h-full text-white p-5 sm:p-8" style={{ transformStyle: 'preserve-3d', perspective: '1500px' }}>
+                <h2 className="text-2xl sm: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>
+                <p className="text-slate-300 mt-3 sm:mt-4 text-xs sm:text-sm leading-relaxed line-clamp-3 sm:line-clamp-none group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.text}</p>
             </div>
         </motion.div>
     );
@@ -75,39 +60,56 @@ 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"
+                className="relative w-full h-[380px] sm:h-[480px]"
                 style={{ perspective: '1200px', transformStyle: 'preserve-3d' }}
             >
                 {slides.map((slide, index) => {
@@ -123,36 +125,27 @@ const ParallaxCarousel = ({ slides }) => {
                     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`}
+                            className={`absolute left-1/2 top-1/2 aspect-[25/26] w-[min(80%,25rem)] sm:w-[min(88%,25rem)] -translate-x-1/2 -translate-y-1/2 ${positionOffset === 0 ? '' : 'pointer-events-none'}`}
                             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 }}
-            >
-                <ArrowLeft size={32} />
+            <motion.button onClick={handlePrev} className="absolute left-0 top-1/2 -translate-y-1/2 z-30 p-1.5 sm:p-3 rounded-full text-slate-400 hover:text-lime-400 transition-colors" whileTap={{ scale: 0.9 }}>
+                <ArrowLeft size={32} className="h-5 w-5 sm:h-8 sm:w-8" />
             </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 onClick={handleNext} className="absolute right-0 top-1/2 -translate-y-1/2 z-30 p-1.5 sm:p-3 rounded-full text-slate-400 hover:text-lime-400 transition-colors" whileTap={{ scale: 0.9 }}>
+                <ArrowRight size={32} className="h-5 w-5 sm:h-8 sm:w-8" />
             </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: "https://ik.imagekit.io/ny6yinyut/apexui/assets/spiderman.png?tr=f-auto,q-80,w-480",
+    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;
@@ -45,7 +44,7 @@ const ParallaxProfileCard = ({ profile }) => {
             gsap.to(card, { duration: 1, rotationX: 0, rotationY: 0, scale: 1, ease: "elastic.out(1, 0.3)" });
         };
         gsap.set(card, { transformPerspective: 1000 });
-        card.addEventListener("mousemove", handleMouseMove);
+        card.addEventListener("mousemove", handleMouseMove, { passive: true });
         card.addEventListener("mouseleave", handleMouseLeave);
         return () => {
             card.removeEventListener("mousemove", handleMouseMove);
@@ -53,55 +52,70 @@ const ParallaxProfileCard = ({ profile }) => {
         };
     }, []);
 
+    const iconBtn = "flex h-9 w-9 items-center justify-center rounded-full border border-cyan-400/20 bg-cyan-400/5 text-cyan-300 transition-colors duration-200 hover:border-cyan-300/60 hover:text-white [&_svg]:h-[18px] [&_svg]:w-[18px]";
+
     return (
         <div
             ref={cardRef}
-            className="relative w-[300px] h-[440px] bg-[#1D2B3A] rounded-3xl p-6 border border-cyan-400/30 shadow-2xl shadow-cyan-900/40 flex flex-col"
+            className="relative w-[300px] max-w-full bg-[#1D2B3A] rounded-3xl p-6 border border-cyan-400/30 shadow-2xl shadow-cyan-900/40"
             style={{ transformStyle: "preserve-3d" }}
         >
-            <div className="absolute inset-0 bg-gradient-to-br from-[#1D2B3A] to-[#111827] rounded-3xl"></div>
-            <div className="absolute top-0 left-0 w-full h-full" style={{ background: "radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.08), transparent 70%)", transform: "translateZ(20px)" }}></div>
+            <div className="absolute inset-0 bg-gradient-to-br from-[#1D2B3A] to-[#0b1220] rounded-3xl"></div>
+            <div className="absolute inset-x-0 top-0 h-28 rounded-t-3xl" style={{ background: "radial-gradient(120% 100% at 50% 0%, rgba(34, 211, 238, 0.22), transparent 70%)", transform: "translateZ(20px)" }}></div>
 
-            <div className="relative z-10 flex flex-col items-center justify-between h-full" style={{ transform: "translateZ(50px)" }}>
-                {/* Top Part */}
-                <div className="text-center">
-                    <img src={avatarUrl} alt="Profile" className="w-28 h-28 rounded-full mx-auto mb-3 border-4 border-cyan-400 shadow-lg object-cover" onError={(e) => { e.target.onerror = null; e.target.src = "https://placehold.co/128x128/1D2B3A/A5F3FC?text=ERR"; }} />
-                    <h2 className="text-2xl font-bold text-cyan-300 tracking-wide">{name}</h2>
-                    <div className="flex flex-col items-center mt-1">
-                        <span className="text-xs font-semibold text-slate-300 bg-slate-700 px-2 py-0.5 rounded-full mb-1">@{username}</span>
-                        <span className="text-xs font-medium text-cyan-400 bg-slate-700 px-2 py-0.5 rounded-full">DOB: {dob}</span>
-                    </div>
+            <div className="relative z-10 flex flex-col items-center text-center" style={{ transform: "translateZ(50px)" }}>
+                {/* Avatar with status dot */}
+                <div className="relative">
+                    <img src={avatarUrl} alt="Profile" className="w-24 h-24 rounded-full border-[3px] border-cyan-400 shadow-lg shadow-cyan-500/30 object-cover" onError={(e) => { e.target.onerror = null; e.target.src = "https://placehold.co/128x128/1D2B3A/A5F3FC?text=ERR"; }} />
+                    {status && <span className="absolute bottom-1 right-1 h-4 w-4 rounded-full border-[3px] border-[#1D2B3A] bg-green-500" />}
+                </div>
+                <h2 className="mt-3 text-2xl font-bold text-cyan-300 tracking-wide">{name}</h2>
+                <p className="text-sm text-slate-400">{title}</p>
+                <div className="mt-3 flex flex-wrap items-center justify-center gap-1.5">
+                    <span className="text-[11px] font-semibold text-slate-300 bg-slate-700/70 px-2.5 py-1 rounded-full">@{username}</span>
+                    <span className="text-[11px] font-medium text-cyan-300 bg-slate-700/70 px-2.5 py-1 rounded-full">DOB: {dob}</span>
                 </div>
 
-                {/* Bottom Part */}
-                <div className="w-full text-center">
-                    <p className="text-slate-400 text-lg">{title}</p>
-                    {status && (
-                        <div className="flex items-center justify-center gap-2 mt-2">
-                            <span className="relative flex h-3 w-3"><span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span><span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span></span>
-                            <span className="text-green-300 text-sm">{status}</span>
-                        </div>
-                    )}
-                    <div className="flex justify-center gap-4 my-4">
-                        {socialLinks?.github && (<a href={socialLinks.github} target="_blank" rel="noopener noreferrer" title="GitHub" className="text-cyan-400 hover:text-white transition-colors duration-200"><GitHubIcon /></a>)}
-                        {socialLinks?.linkedin && (<a href={socialLinks.linkedin} target="_blank" rel="noopener noreferrer" title="LinkedIn" className="text-cyan-400 hover:text-white transition-colors duration-200"><LinkedInIcon /></a>)}
-                        {socialLinks?.twitter && (<a href={socialLinks.twitter} target="_blank" rel="noopener noreferrer" title="Twitter" className="text-cyan-400 hover:text-white transition-colors duration-200"><TwitterIcon /></a>)}
-                        {socialLinks?.instagram && (<a href={socialLinks.instagram} target="_blank" rel="noopener noreferrer" title="Instagram" className="text-cyan-400 hover:text-white transition-colors duration-200"><InstagramIcon /></a>)}
+                {status && (
+                    <div className="mt-4 inline-flex items-center gap-2 rounded-full border border-green-400/20 bg-green-400/5 px-3 py-1">
+                        <span className="relative flex h-2 w-2"><span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span><span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span></span>
+                        <span className="text-green-300 text-xs font-medium">{status}</span>
                     </div>
+                )}
 
-                    {/* Buttons Section */}
-                    <div className="flex justify-center gap-3">
-                        <button onClick={onHireClick} className="w-1/2 bg-cyan-500 text-slate-900 font-bold py-2 px-4 rounded-lg hover:bg-cyan-400 transition-colors duration-300">
-                            Hire Me
-                        </button>
-                        <button onClick={onCvClick} className="w-1/2 bg-slate-700 text-cyan-300 font-bold py-2 px-4 rounded-lg hover:bg-slate-600 transition-colors duration-300">
-                            CV
-                        </button>
-                    </div>
+                <div className="my-5 h-px w-full bg-gradient-to-r from-transparent via-cyan-400/25 to-transparent" />
+
+                <div className="flex justify-center gap-2.5">
+                    {socialLinks?.github && (<a href={socialLinks.github} target="_blank" rel="noopener noreferrer" title="GitHub" className={iconBtn}><GitHubIcon /></a>)}
+                    {socialLinks?.linkedin && (<a href={socialLinks.linkedin} target="_blank" rel="noopener noreferrer" title="LinkedIn" className={iconBtn}><LinkedInIcon /></a>)}
+                    {socialLinks?.twitter && (<a href={socialLinks.twitter} target="_blank" rel="noopener noreferrer" title="Twitter" className={iconBtn}><TwitterIcon /></a>)}
+                    {socialLinks?.instagram && (<a href={socialLinks.instagram} target="_blank" rel="noopener noreferrer" title="Instagram" className={iconBtn}><InstagramIcon /></a>)}
+                </div>
+
+                {/* Buttons Section */}
+                <div className="mt-5 flex w-full gap-3">
+                    <button onClick={onHireClick} className="flex-1 whitespace-nowrap bg-cyan-500 text-slate-900 text-sm font-bold py-2.5 px-3 rounded-xl hover:bg-cyan-400 transition-colors duration-300">
+                        Hire Me
+                    </button>
+                    <button onClick={onCvClick} className="flex-1 whitespace-nowrap bg-slate-700/80 text-cyan-300 text-sm font-bold py-2.5 px-3 rounded-xl hover:bg-slate-600 transition-colors duration-300">
+                        Download CV
+                    </button>
                 </div>
             </div>
         </div>
     );
 };
 
-export default ParallaxProfileCard;
+const ParallaxProfile = ({ profiles = [defaultProfile], className = '' }) => {
+    const safe = Array.isArray(profiles) && profiles.length > 0 ? profiles : [defaultProfile];
+    return (
+        <div className={`flex w-full 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,15 +1,21 @@
 import React, { useRef, useEffect, useState } from "react";
 
-const people = [
-    { 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" },
-    { id: 4, name: "HULK", job: "Scientist", img: "/assets/hulk.png" },
-    { id: 5, name: "Spider-Man", job: "Friendly Neighborhood Spider-Man", img: "/assets/spiderman.png" },
-    { id: 6, name: "Thanos", job: "The Mad Titan", img: "/assets/thanos.png" },
+const defaultPeople = [
+    { id: 1, name: "Captain America", job: "Leader of the Avengers", img: "https://ik.imagekit.io/ny6yinyut/apexui/assets/captainamerica.png?tr=f-auto,q-80,w-480" },
+    { id: 2, name: "Doctor Strange", job: "Sorcerer Supreme", img: "https://ik.imagekit.io/ny6yinyut/apexui/assets/doctorStrange.png?tr=f-auto,q-80,w-480" },
+    { id: 3, name: "Iron Man", job: "Leader Of Stark Industries", img: "https://ik.imagekit.io/ny6yinyut/apexui/assets/ironman.png?tr=f-auto,q-80,w-480" },
+    { id: 4, name: "HULK", job: "Scientist", img: "https://ik.imagekit.io/ny6yinyut/apexui/assets/hulk.png?tr=f-auto,q-80,w-480" },
+    { id: 5, name: "Spider-Man", job: "Friendly Neighborhood Spider-Man", img: "https://ik.imagekit.io/ny6yinyut/apexui/assets/spiderman.png?tr=f-auto,q-80,w-480" },
+    { id: 6, name: "Thanos", job: "The Mad Titan", img: "https://ik.imagekit.io/ny6yinyut/apexui/assets/thanos.png?tr=f-auto,q-80,w-480" },
 ];
 
-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(() => {
@@ -44,7 +53,7 @@ const PointerFollower = ({ cursorColor = "#fff", interval = 3000, badgeColor = "
             setHovered(false);
         };
 
-        container.addEventListener("pointermove", handleMove);
+        container.addEventListener("pointermove", handleMove, { passive: true });
         container.addEventListener("pointerleave", handleLeave);
 
         return () => {
@@ -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/SmartGridCard/SmartGridCard.jsx

@@ -123,10 +123,11 @@ const SmartGridCard = ({
         <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 ? {
-                gridTemplateColumns: "repeat(3, minmax(300px, 1fr))",
+                // 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(300px, 1fr))",
+                gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
                 gridTemplateRows: `repeat(3, ${CARD_HEIGHT}px)`
             } : {}}
         >
@@ -164,7 +165,7 @@ const SmartGridCard = ({
                             </div>
                             <button
                                 type="button"
-                                className="mt-auto relative overflow-hidden px-5 py-3 rounded-lg border border-purple-400/60 text-white transition hover:text-white bg-black/20 group flex items-center gap-2 text-xs md:text-base"
+                                className="mt-auto relative overflow-hidden whitespace-nowrap px-4 py-3 rounded-lg border border-purple-400/60 text-white transition hover:text-white bg-black/20 group flex items-center gap-2 text-xs md:text-base"
                             >
                                 <span className="relative z-10 flex items-center gap-2">
                                     {card.buttonText}

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { Renderer, Program, Mesh, Triangle } from "https://unpkg.com/ogl";
+import { Renderer, Program, Mesh, Triangle } from "ogl";
 
 const hexToRgb = (hex) => {
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@@ -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, { passive: true });
         }
 
         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,12 +174,16 @@ export const SmokeBackground = ({
         const ro = new ResizeObserver(() => {
             requestAnimationFrame(setSize);
         });
-        ro.observe(containerRef.current);
+        ro.observe(mountNode);
         setSize();
 
         let raf = 0;
+        // Only render while the background is on screen.
+        let visible = true;
         const t0 = performance.now();
         const loop = (t) => {
+            raf = 0;
+            if (!visible) return;
             let timeValue = (t - t0) * 0.001;
 
             if (direction === "funny") {
@@ -192,24 +203,32 @@ export const SmokeBackground = ({
             raf = requestAnimationFrame(loop);
         };
         raf = requestAnimationFrame(loop);
+        const visibilityObserver = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible && !raf) raf = requestAnimationFrame(loop);
+        });
+        visibilityObserver.observe(mountNode);
 
         return () => {
             cancelAnimationFrame(raf);
+            visibilityObserver.disconnect();
             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); }
+            gl.getExtension("WEBGL_lose_context")?.loseContext();
         };
     }, [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>
     );
 };