apex-ui-kit 2.0.6 → 2.1.0

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

@@ -26,66 +26,87 @@ const AccordionMarquee = ({bgColor='#bbf451', textColor='#27272a'}) => {
     const containerRef = useRef(null);
 
     useLayoutEffect(() => {
-        const items = gsap.utils.toArray(".accordion-item");
-        let activeItem = null;
-        let activeMarquee = null;
-
-        items.forEach((item) => {
-            const marqueeText = item.querySelector(".marquee-text");
-            const title = item.querySelector(".accordion-title");
-
-            // Marquee text ko 2 baar duplicate karte hain for seamless loop
-            const marqueeContent = marqueeText.innerText;
-            const sparkleIconSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkle-icon lucide-sparkle"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class="sparkle-icon"/></svg>`;
-            marqueeText.innerHTML = [marqueeContent, sparkleIconSVG, marqueeContent, sparkleIconSVG, marqueeContent, sparkleIconSVG, marqueeContent, sparkleIconSVG].join("");
-
-            // Seamless Marquee animation
-            const marqueeWidth = marqueeText.scrollWidth / 2;
-            const marqueeTl = gsap.to(marqueeText, {
-                x: -marqueeWidth,
-                duration: marqueeWidth / 30, // Speed ko consistent rakhta hai
-                ease: "linear",
-                repeat: -1,
-            }).pause();
-
-            item.addEventListener("mouseenter", () => {
-                if (activeItem === item) return;
-
-                if (activeItem) {
-                    const oldTitle = activeItem.querySelector(".accordion-title");
-                    const oldMarqueeWrapper = activeItem.querySelector(".marquee-wrapper");
-                    gsap.to(oldTitle, { autoAlpha: 1, duration: 0.2, ease: "power3.inOut" });
-                    gsap.to(oldMarqueeWrapper, { autoAlpha: 0, duration: 0.2, ease: "power3.inOut" });
-                    if (activeMarquee) activeMarquee.pause();
-                }
+        const container = containerRef.current;
+        if (!container) return undefined;
+        const cleanups = [];
+
+        // Scoped to this instance and reverted on unmount, so a remount (or React
+        // StrictMode) no longer stacks a second set of handlers and tweens — that
+        // is what left several marquee bands visible at once.
+        const ctx = gsap.context(() => {
+            const items = gsap.utils.toArray(".accordion-item", container);
+            let activeItem = null;
+            let activeMarquee = null;
+
+            items.forEach((item) => {
+                const marqueeText = item.querySelector(".marquee-text");
+                const title = item.querySelector(".accordion-title");
+
+                // Marquee text ko 2 baar duplicate karte hain for seamless loop
+                // (the original text is kept so a remount doesn't duplicate it again)
+                if (!marqueeText.dataset.text) marqueeText.dataset.text = marqueeText.innerText;
+                const marqueeContent = marqueeText.dataset.text;
+                const sparkleIconSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkle-icon lucide-sparkle"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class="sparkle-icon"/></svg>`;
+                marqueeText.innerHTML = [marqueeContent, sparkleIconSVG, marqueeContent, sparkleIconSVG, marqueeContent, sparkleIconSVG, marqueeContent, sparkleIconSVG].join("");
+
+                // Seamless Marquee animation
+                const marqueeWidth = marqueeText.scrollWidth / 2;
+                const marqueeTl = gsap.to(marqueeText, {
+                    x: -marqueeWidth,
+                    duration: marqueeWidth / 30, // Speed ko consistent rakhta hai
+                    ease: "linear",
+                    repeat: -1,
+                }).pause();
+
+                // overwrite: true kills a still-delayed tween on the same element,
+                // so fast pointer moves can't leave a title and a band both visible.
+                const onEnter = () => {
+                    if (activeItem === item) return;
+
+                    if (activeItem) {
+                        const oldTitle = activeItem.querySelector(".accordion-title");
+                        const oldMarqueeWrapper = activeItem.querySelector(".marquee-wrapper");
+                        gsap.to(oldTitle, { autoAlpha: 1, duration: 0.2, ease: "power3.inOut", overwrite: true });
+                        gsap.to(oldMarqueeWrapper, { autoAlpha: 0, duration: 0.2, ease: "power3.inOut", overwrite: true });
+                        if (activeMarquee) activeMarquee.pause();
+                    }
 
-                activeItem = item;
-                activeMarquee = marqueeTl;
+                    activeItem = item;
+                    activeMarquee = marqueeTl;
 
-                const marqueeWrapper = item.querySelector(".marquee-wrapper");
-                gsap.to(title, { autoAlpha: 0, duration: 0.2, ease: "power3.inOut" });
-                gsap.to(marqueeWrapper, { autoAlpha: 1, duration: 0.2, delay: 0.1, ease: "power3.inOut" });
+                    const marqueeWrapper = item.querySelector(".marquee-wrapper");
+                    gsap.to(title, { autoAlpha: 0, duration: 0.2, ease: "power3.inOut", overwrite: true });
+                    gsap.to(marqueeWrapper, { autoAlpha: 1, duration: 0.2, delay: 0.1, ease: "power3.inOut", overwrite: true });
 
-                marqueeTl.play();
+                    marqueeTl.play();
+                };
+                item.addEventListener("mouseenter", onEnter);
+                cleanups.push(() => item.removeEventListener("mouseenter", onEnter));
             });
-        });
 
-        containerRef.current.addEventListener("mouseleave", () => {
-            if (!activeItem) return;
+            const onLeave = () => {
+                if (!activeItem) return;
 
-            const activeTitle = activeItem.querySelector(".accordion-title");
-            const activeMarqueeWrapper = activeItem.querySelector(".marquee-wrapper");
+                const activeTitle = activeItem.querySelector(".accordion-title");
+                const activeMarqueeWrapper = activeItem.querySelector(".marquee-wrapper");
 
-            gsap.to(activeTitle, { autoAlpha: 1, duration: 0.2, delay: 0.1, ease: "power3.inOut" });
-            gsap.to(activeMarqueeWrapper, { autoAlpha: 0, duration: 0.2, ease: "power3.inOut" });
-
-            if (activeMarquee) {
-                activeMarquee.pause();
-            }
-            activeItem = null;
-            activeMarquee = null;
-        });
+                gsap.to(activeTitle, { autoAlpha: 1, duration: 0.2, delay: 0.1, ease: "power3.inOut", overwrite: true });
+                gsap.to(activeMarqueeWrapper, { autoAlpha: 0, duration: 0.2, ease: "power3.inOut", overwrite: true });
 
+                if (activeMarquee) {
+                    activeMarquee.pause();
+                }
+                activeItem = null;
+                activeMarquee = null;
+            };
+            container.addEventListener("mouseleave", onLeave);
+            cleanups.push(() => container.removeEventListener("mouseleave", onLeave));
+        }, container);
+
+        return () => {
+            cleanups.forEach((fn) => fn());
+            ctx.revert();
+        };
     }, []);
 
     return (
@@ -107,7 +128,7 @@ const AccordionMarquee = ({bgColor='#bbf451', textColor='#27272a'}) => {
                 }
                 `}
             </style>
-            <div className="flex items-center justify-center w-screen bg-gray-900 text-white font-sans">
+            <div className="flex items-center justify-center w-full bg-gray-900 text-white font-sans">
                 <div ref={containerRef} className="flex flex-col w-full h-[80vh] md:h-[70vh]">
                     {accordionData.map((item, index) => (
                         <React.Fragment key={index}>

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

@@ -43,21 +43,23 @@ const BeamBar = ({
 
             // Animate beam opacity gradually during width expansion
             let start = null;
+            let frame = 0;
             function animateBeam(ts) {
                 if (!start) start = ts;
                 const elapsed = (ts - start) / 1000;
                 const progress = Math.min(elapsed / duration, 1);
                 setBeamOpacity(0.2 + 0.8 * progress); // from 0.2 to 1.0
                 if (progress < 1) {
-                    requestAnimationFrame(animateBeam);
+                    frame = requestAnimationFrame(animateBeam);
                 } else {
                     setPulse(true);
                 }
             }
-            requestAnimationFrame(animateBeam);
+            frame = requestAnimationFrame(animateBeam);
 
-            // Cleanup
+            // Cleanup (stop the running loop so a resize or unmount doesn't leave it going)
             return () => {
+                cancelAnimationFrame(frame);
                 setBeamOpacity(0.2);
                 setPulse(false);
             };

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

@@ -82,10 +82,22 @@ function BluePrintBackground({ color = '#9ae600', borderColor = 'rgb(98, 116, 14
             }
         };
 
-        window.addEventListener("mousemove", handleMouseMove);
+        // Hit-test at most once per frame instead of on every mousemove event.
+        let moveFrame = 0;
+        let lastMove = null;
+        const onMouseMove = (e) => {
+            lastMove = e;
+            if (moveFrame) return;
+            moveFrame = requestAnimationFrame(() => {
+                moveFrame = 0;
+                handleMouseMove(lastMove);
+            });
+        };
+        window.addEventListener("mousemove", onMouseMove, { passive: true });
 
         return () => {
-            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mousemove", onMouseMove);
+            cancelAnimationFrame(moveFrame);
             if (scrollTween && typeof scrollTween.kill === "function") {
                 try { scrollTween.kill(); } catch { /* ignore */ }
             }

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

@@ -0,0 +1,129 @@
+import React, { useState, useEffect, useRef } from "react";
+import { gsap } from "gsap";
+import { FaArrowRight, FaGithub, FaRegImage } from "react-icons/fa";
+// Cards scale from the bottom, so the offset must beat the shrink (6% of the height) to peek out.
+const CARD_STACK_OFFSET = 40;
+const CARD_SCALE_STEP = 0.06;
+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 || cards.length < 2) 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.7, ease: "elastic.out(1, 0.45)" },
+        });
+        cardElements.forEach((card, i) => {
+            tl.to(card, {
+                y: -i * CARD_STACK_OFFSET,
+                scale: 1 - i * CARD_SCALE_STEP,
+                // Back cards are dimmed instead of blurred: cheaper, and the images stay crisp.
+                filter: i === 0 ? "brightness(1)" : `brightness(${0.75 - i * 0.12})`,
+                opacity: 1,
+                zIndex: cards.length - i,
+            }, 0);
+        });
+        return () => {
+            tl.kill();
+        };
+    }, [active, cards.length]);
+
+    const next = () => setActive((prev) => (prev + 1) % cards.length);
+    const getCardIndex = (i) => (active + i) % cards.length;
+
+    return (
+        <div
+            ref={containerRef}
+            className="relative flex justify-center items-end h-[440px] w-full max-w-lg mx-auto pb-2"
+            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}
+                        onClick={isTop ? next : undefined}
+                        className={`card-item group absolute bottom-2 left-0 right-0 mx-auto h-[360px] w-[280px] max-w-[calc(100%-1rem)] origin-bottom overflow-hidden rounded-[1.75rem] border border-white/15 bg-slate-950 shadow-[0_24px_60px_-20px_rgba(0,0,0,0.8)] select-none ${isTop ? "cursor-pointer" : "pointer-events-none"}`}
+                        style={{ opacity: 0 }}
+                    >
+                        {/* Full-bleed image */}
+                        {card.image ? (
+                            <img src={card.image} alt={card.title} draggable="false" className="absolute inset-0 h-full w-full object-cover object-top transition-transform duration-700 group-hover:scale-105" />
+                        ) : (
+                            <div className="absolute inset-0 flex items-center justify-center bg-slate-900"><FaRegImage className="text-4xl text-white/30" /></div>
+                        )}
+                        {/* Card colour tint + readable bottom */}
+                        <div className={`absolute inset-0 bg-gradient-to-br ${card.color} opacity-40 mix-blend-soft-light`} />
+                        <div className="absolute inset-x-0 bottom-0 h-3/4 bg-gradient-to-t from-black via-black/75 to-transparent" />
+
+                        {/* Top row: subtitle chip + GitHub */}
+                        <div className="absolute inset-x-0 top-0 flex items-start justify-between gap-2 p-4">
+                            {card.subtitle && (
+                                <span className="line-clamp-1 rounded-full border border-white/15 bg-black/40 px-3 py-1 text-[11px] font-medium text-white/85 backdrop-blur-md">{card.subtitle}</span>
+                            )}
+                            {card.github && (
+                                <a href={card.github} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} aria-label="GitHub" className="ml-auto flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/15 bg-black/40 text-white/80 backdrop-blur-md transition hover:text-white">
+                                    <FaGithub className="text-base" />
+                                </a>
+                            )}
+                        </div>
+
+                        {/* Bottom content */}
+                        <div className="absolute inset-x-0 bottom-0 flex flex-col gap-1.5 p-5">
+                            <h2 className="text-xl font-bold leading-tight tracking-tight text-white">{card.title}</h2>
+                            {card.desc && <p className="line-clamp-2 text-[13px] leading-relaxed text-white/70">{card.desc}</p>}
+                            <div className="mt-2 flex items-center justify-between gap-3">
+                                {card.link ? (
+                                    <a href={card.link} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} className="inline-flex items-center gap-2 rounded-full bg-white px-4 py-1.5 text-xs font-semibold text-slate-950 transition hover:bg-white/85">
+                                        Visit <FaArrowRight className="text-[10px] transition-transform group-hover:translate-x-0.5" />
+                                    </a>
+                                ) : <span />}
+                                {/* Progress dots */}
+                                <div className="flex items-center gap-1.5" aria-hidden="true">
+                                    {cards.map((__, d) => (
+                                        <span key={d} className={`h-1.5 rounded-full transition-all duration-300 ${d === idx ? "w-4 bg-white" : "w-1.5 bg-white/35"}`} />
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

package/dist/ApexUI-Kit/templates/Cards/BasicCard.jsx

@@ -9,10 +9,10 @@ const ProfileCard = ({ title, summary, image, link }) => {
             initial={{ y: 20, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             transition={{ type: "spring", stiffness: 300, damping: 20 }}
-            className="w-72 rounded-2xl bg-slate-950 border border-gray-800 shadow-2xl overflow-hidden p-2 shadow-lime-700/20"
+            className="w-[280px] max-w-full rounded-2xl bg-slate-950 border border-gray-800 shadow-2xl overflow-hidden p-2 shadow-lime-700/20"
         >
-            {/* Image */}
-            <div className="h-[30vh] w-full rounded-b-4xl rounded-t-lg  overflow-hidden">
+            {/* Image: fixed px size so the card keeps its shape on every screen */}
+            <div className="h-[200px] w-full rounded-b-4xl rounded-t-lg  overflow-hidden">
                 <motion.img
                     src={image}
                     alt={title}

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
@@ -89,7 +121,7 @@ const DragCarousel = ({ images }) => {
                 <div
                     key={index}
                     ref={el => cardsRef.current[index] = el}
-                    className="card-item absolute h-[480px] w-[300px] lg:h-[550px] lg:w-[350px] rounded-xl overflow-hidden shadow-2xl top-[25px] -left-4 md:left-36 lg:left-70"
+                    className="card-item absolute h-[480px] w-[min(300px,80vw)] lg:h-[550px] lg:w-[350px] rounded-xl overflow-hidden shadow-2xl top-[25px] left-1/2 -ml-[min(150px,40vw)] lg:-ml-[175px]"
                 >
                     <img
                         src={src}