apex-ui-kit 2.0.5

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

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

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

@@ -0,0 +1,216 @@
+import React, { useEffect, useRef } from "react";
+import { Renderer, Program, Mesh, Triangle } from "https://unpkg.com/ogl";
+
+const hexToRgb = (hex) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result) return [1, 0.5, 0.2];
+    return [
+        parseInt(result[1], 16) / 255,
+        parseInt(result[2], 16) / 255,
+        parseInt(result[3], 16) / 255,
+    ];
+};
+
+const vertex = `#version 300 es
+precision highp float;
+in vec2 position;
+in vec2 uv;
+out vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+
+const fragment = `#version 300 es
+precision highp float;
+uniform vec2 iResolution;
+uniform float iTime;
+uniform vec3 uCustomColor;
+uniform float uUseCustomColor;
+uniform float uSpeed;
+uniform float uDirection;
+uniform float uScale;
+uniform float uOpacity;
+uniform vec2 uMouse;
+uniform float uMouseInteractive;
+out vec4 fragColor;
+
+void mainImage(out vec4 o, vec2 C) {
+  vec2 center = iResolution.xy * 0.5;
+  C = (C - center) / uScale + center;
+
+  vec2 mouseOffset = (uMouse - center) * 0.0002;
+  C += mouseOffset * length(C - center) * step(0.5, uMouseInteractive);
+
+  float i, d, z, T = iTime * uSpeed * uDirection;
+  vec3 O, p, S;
+
+  // loop count reduced to 30
+  for (vec2 r = iResolution.xy, Q; ++i < 35.; O += o.w/d*o.xyz) {
+    p = z*normalize(vec3(C-.5*r,r.y));
+    p.z -= 4.;
+    S = p;
+    d = p.y-T;
+
+    p.x += .4*(1.+p.y)*sin(d + p.x*0.1)*cos(.34*d + p.x*0.05);
+    Q = p.xz *= mat2(cos(p.y+vec4(0,11,33,0)-T));
+    z+= d = abs(sqrt(length(Q*Q)) - .25*(5.+S.y))/3.+8e-4;
+    o = 1.+sin(S.y+p.z*.5+S.z-length(S-p)+vec4(2,1,0,8));
+  }
+
+  o.xyz = tanh(O/1e4);
+}
+
+bool finite1(float x){ return !(isnan(x) || isinf(x)); }
+vec3 sanitize(vec3 c){
+  return vec3(
+    finite1(c.r) ? c.r : 0.0,
+    finite1(c.g) ? c.g : 0.0,
+    finite1(c.b) ? c.b : 0.0
+  );
+}
+
+void main() {
+  vec4 o = vec4(0.0);
+  mainImage(o, gl_FragCoord.xy);
+  vec3 rgb = sanitize(o.rgb);
+
+  float intensity = (rgb.r + rgb.g + rgb.b) / 3.0;
+  vec3 customColor = intensity * uCustomColor;
+  vec3 finalColor = mix(rgb, customColor, step(0.5, uUseCustomColor));
+
+  float alpha = length(rgb) * uOpacity;
+  fragColor = vec4(finalColor, alpha);
+}
+`;
+
+
+export const SmokeBackground = ({
+    color = "#ffffff",
+    speed = 1,
+    direction = "forward",
+    scale = 1,
+    opacity = 1,
+    mouseInteractive = true,
+    className = "",
+}) => {
+    const containerRef = useRef(null);
+    const mousePos = useRef({ x: 0, y: 0 });
+
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        const useCustomColor = color ? 1.0 : 0.0;
+        const customColorRgb = color ? hexToRgb(color) : [1, 1, 1];
+
+        let directionMultiplier = direction === "backward" ? -1.0 : 1.0;
+
+        const renderer = new Renderer({
+            webgl: 2,
+            alpha: true,
+            antialias: false,
+            dpr: Math.min(window.devicePixelRatio || 1, 1.8),
+        });
+
+        const gl = renderer.gl;
+        const canvas = gl.canvas;
+        canvas.style.display = "block";
+        canvas.style.width = "100%";
+        canvas.style.height = "100%";
+        containerRef.current.appendChild(canvas);
+
+        const geometry = new Triangle(gl);
+
+        const program = new Program(gl, {
+            vertex: vertex,
+            fragment: fragment,
+            uniforms: {
+                iTime: { value: 0 },
+                iResolution: { value: new Float32Array([1, 1]) },
+                uCustomColor: { value: new Float32Array(customColorRgb) },
+                uUseCustomColor: { value: useCustomColor },
+                uSpeed: { value: speed * 0.4 },
+                uDirection: { value: directionMultiplier },
+                uScale: { value: scale },
+                uOpacity: { value: opacity },
+                uMouse: { value: new Float32Array([0, 0]) },
+                uMouseInteractive: { value: mouseInteractive ? 1.0 : 0.0 },
+            },
+        });
+
+        const mesh = new Mesh(gl, { geometry, program });
+
+        // 🖱 Mouse throttled to RAF
+        let mouseNeedsUpdate = false;
+        const handleMouseMove = (e) => {
+            if (!mouseInteractive) return;
+            const rect = containerRef.current.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);
+        }
+
+        const setSize = () => {
+            const rect = containerRef.current.getBoundingClientRect();
+            const width = Math.max(1, Math.floor(rect.width));
+            const height = Math.max(1, Math.floor(rect.height));
+            renderer.setSize(width, height);
+            const res = program.uniforms.iResolution.value;
+            res[0] = gl.drawingBufferWidth;
+            res[1] = gl.drawingBufferHeight;
+        };
+
+        const ro = new ResizeObserver(() => {
+            requestAnimationFrame(setSize);
+        });
+        ro.observe(containerRef.current);
+        setSize();
+
+        let raf = 0;
+        const t0 = performance.now();
+        const loop = (t) => {
+            let timeValue = (t - t0) * 0.001;
+
+            if (direction === "funny") {
+                const cycle = Math.sin(timeValue * 0.5);
+                program.uniforms.uDirection.value = cycle;
+            }
+
+            if (mouseNeedsUpdate) {
+                const mouseUniform = program.uniforms.uMouse.value;
+                mouseUniform[0] = mousePos.current.x;
+                mouseUniform[1] = mousePos.current.y;
+                mouseNeedsUpdate = false;
+            }
+
+            program.uniforms.iTime.value = timeValue;
+            renderer.render({ scene: mesh });
+            raf = requestAnimationFrame(loop);
+        };
+        raf = requestAnimationFrame(loop);
+
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            if (mouseInteractive && containerRef.current) {
+                containerRef.current.removeEventListener("mousemove", handleMouseMove);
+            }
+            try {
+                containerRef.current?.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}`}
+        />
+    );
+};
+
+export default SmokeBackground;

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

@@ -0,0 +1,117 @@
+/* eslint-disable no-unused-vars */
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from "framer-motion";
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+
+
+// --- Testimonials Component ---
+const Testimonials = ({ testimonials }) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    const handleNext = () => {
+        setActiveIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
+    };
+
+    const handlePrev = () => {
+        setActiveIndex((prevIndex) => (prevIndex - 1 + testimonials.length) % testimonials.length);
+    };
+
+    // Animation variants for the text content
+    const textVariants = {
+        enter: { opacity: 0, y: 20, filter: "blur(5px)" },
+        center: { opacity: 1, y: 0, filter: "blur(0px)" },
+        exit: { opacity: 0, y: -20, filter: "blur(5px)" },
+    };
+
+    return (
+        <div className="w-full max-w-4xl mx-auto bg-slate-950 rounded-2xl p-8 md:p-12 border border-slate-800 grid md:grid-cols-2 gap-12 items-center overflow-hidden">
+
+            {/* Left Part: Text Content and Navigation */}
+            <div className="flex flex-col justify-center h-full text-center md:text-left order-2 md:order-1">
+                {/* Title and Subtitle with Animation */}
+                <div className="relative h-32">
+                    <AnimatePresence initial={false} mode="wait">
+                        <motion.div
+                            key={activeIndex}
+                            variants={textVariants}
+                            initial="enter"
+                            animate="center"
+                            exit="exit"
+                            transition={{ duration: 0.4, ease: "easeInOut" }}
+                            className="absolute w-full"
+                        >
+                            <h2 className="text-3xl font-bold text-white tracking-tight">{testimonials[activeIndex].author}</h2>
+                            <p className="mt-2 text-lime-400 font-medium">{testimonials[activeIndex].title}</p>
+                            <p className="mt-4 text-slate-400 text-sm leading-relaxed hidden md:block">"{testimonials[activeIndex].text}"</p>
+                        </motion.div>
+                    </AnimatePresence>
+                </div>
+
+                {/* Navigation Buttons with Microinteractions */}
+                <div className="flex items-center justify-center md:justify-start gap-4 mt-8">
+                    <motion.button
+                        onClick={handlePrev}
+                        className="bg-slate-800/80 hover:bg-slate-800 rounded-full p-3 transition-colors duration-300 text-slate-400 hover:text-lime-400 focus:outline-none"
+                        whileHover={{ scale: 1.1 }}
+                        whileTap={{ scale: 0.95 }}
+                        transition={{ type: 'spring', stiffness: 400, damping: 17 }}
+                    >
+                        <ArrowLeft size={20} />
+                    </motion.button>
+                    <motion.button
+                        onClick={handleNext}
+                        className="bg-slate-800/80 hover:bg-slate-800 rounded-full p-3 transition-colors duration-300 text-slate-400 hover:text-lime-400 focus:outline-none"
+                        whileHover={{ scale: 1.1 }}
+                        whileTap={{ scale: 0.95 }}
+                        transition={{ type: 'spring', stiffness: 400, damping: 17 }}
+                    >
+                        <ArrowRight size={20} />
+                    </motion.button>
+                </div>
+            </div>
+
+            {/* Right Part: Stacked Images */}
+            <div className="relative h-80 w-full flex items-center justify-center order-1 md:order-2">
+                {testimonials.map((testimonial, index) => {
+                    // Determine the position of the card in the stack
+                    const position = (index - activeIndex + testimonials.length) % testimonials.length;
+
+                    // Only render the top 4 cards for performance and visual clarity
+                    if (position > 3) return null;
+
+                    return (
+                        <motion.div
+                            key={testimonial.id || index}
+                            className="absolute w-64 h-80 bg-slate-800 rounded-xl shadow-2xl overflow-hidden border-2 border-slate-700"
+                            initial={false}
+                            animate={{
+                                scale: 1 - position * 0.08,
+                                rotate: -4 + position * 4, // Add a fanned rotation effect
+                                left: `${position * 20}px`, // Fan out horizontally
+                                top: `${position * 10}px`, // Stagger vertically
+                                zIndex: testimonials.length - position,
+                                opacity: position === 0 ? 1 : 0.5, // Only top image is fully opaque
+                            }}
+                            transition={{
+                                type: 'spring',
+                                stiffness: 260,
+                                damping: 25,
+                            }}
+                        >
+                            <img
+                                src={testimonial.image}
+                                alt={testimonial.author}
+                                className="w-full h-full object-cover"
+                                onError={(e) => { e.target.onerror = null; e.target.src = `https://placehold.co/256x320/0f172a/a3e635?text=${testimonial.author.split(' ')[0]}`; }}
+                            />
+                        </motion.div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+
+
+export default Testimonials;