apex-ui-kit 2.0.7 → 2.1.1

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

@@ -1,9 +1,9 @@
-/* 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;
+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 = [],
@@ -17,7 +17,7 @@ export default function CardStack({
     const scrollTimeoutRef = useRef(null);
     const containerRef = useRef(null);
     useEffect(() => {
-        if (!autoCycle || isHovered || isScrolling) return;
+        if (!autoCycle || isHovered || isScrolling || cards.length < 2) return;
         timeoutRef.current = setTimeout(() => {
             setActive((prev) => (prev + 1) % cards.length);
         }, cycleInterval);
@@ -40,31 +40,30 @@ export default function CardStack({
         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)" },
+            defaults: { duration: 0.7, ease: "elastic.out(1, 0.45)" },
         });
         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)",
+                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: z,
+                zIndex: cards.length - i,
             }, 0);
         });
         return () => {
             tl.kill();
         };
-    }, [active]);
+    }, [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-center h-[340px] md:h-[400px] w-full max-w-lg mx-auto"
+            className="relative flex justify-center items-end h-[27.5rem] w-full max-w-lg mx-auto pb-2"
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
         >
@@ -78,24 +77,53 @@ export default function CardStack({
                 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"}`}
+                        onClick={isTop ? next : undefined}
+                        className={`card-item group absolute bottom-2 left-0 right-0 mx-auto h-[22.5rem] w-[17.5rem] 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 }}
                     >
-                        <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" />)}
+                        {/* 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>
-                        <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>)}
+
+                        {/* 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>
-                            <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/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-[17.5rem] 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 size (in rem, like the text) so the card keeps its shape on every screen */}
+            <div className="h-[12.5rem] w-full rounded-b-4xl rounded-t-lg  overflow-hidden">
                 <motion.img
                     src={image}
                     alt={title}

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

@@ -121,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}