apex-ui-kit 2.0.5

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

@@ -0,0 +1,161 @@
+/* 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

@@ -0,0 +1,105 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+// To use GSAP in this environment, we'll import it from a CDN.
+// In a local project: `npm install gsap`
+import { gsap } from 'gsap';
+import { Draggable } from 'gsap/Draggable';
+
+// GSAP Draggable plugin ko register karna zaroori hai
+gsap.registerPlugin(Draggable);
+
+// --- GSAP Drag Carousel Component ---
+const DragCarousel = ({ images }) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const carouselRef = useRef(null);
+    const cardsRef = useRef([]);
+    const dragProxyRef = useRef(null);
+    useEffect(() => {
+        const cards = cardsRef.current;
+        gsap.to(cards, {
+            duration: 0.4,
+            ease: 'power4.Out',
+            stagger: 0.05,
+            // Har card ke liye naya transform calculate karta hai
+            transform: (i) => {
+                let positionOffset = i - activeIndex;
+                if (positionOffset > images.length / 2) {
+                    positionOffset -= images.length;
+                } else if (positionOffset < -images.length / 2) {
+                    positionOffset += images.length;
+                }
+
+                const translateX = positionOffset * 50;
+                const translateZ = -Math.abs(positionOffset) * 250;
+                const scale = 1 - Math.abs(positionOffset) * 0.15;
+
+                return `translateX(${translateX}%) translateZ(${translateZ}px) scale(${scale})`;
+            },
+            zIndex: (i) => {
+                let positionOffset = i - activeIndex;
+                if (positionOffset > images.length / 2) positionOffset -= images.length;
+                if (positionOffset < -images.length / 2) positionOffset += images.length;
+                return images.length - Math.abs(positionOffset);
+            },
+            opacity: (i) => {
+                let positionOffset = i - activeIndex;
+                if (positionOffset > images.length / 2) positionOffset -= images.length;
+                if (positionOffset < -images.length / 2) positionOffset += images.length;
+                return Math.abs(positionOffset) > 2 ? 0 : 1;
+            }
+        });
+    }, [activeIndex, images.length]);
+
+    // GSAP Draggable ko setup karta hai
+    useEffect(() => {
+        // BUG FIX: Draggable ab proxy element par lagaya gaya hai
+        const draggableInstance = Draggable.create(dragProxyRef.current, {
+            type: "x",
+            trigger: carouselRef.current,
+            inertia: true,
+            cursor: 'grab',
+            activeCursor: 'grabbing',
+            onDragEnd: function () {
+                gsap.to(this.target, { x: 0, duration: 0.3 });
+                if (this.getDirection("start") === "left") {
+                    setActiveIndex(prev => (prev + 1) % images.length);
+                } else if (this.getDirection("start") === "right") {
+                    setActiveIndex(prev => (prev - 1 + images.length) % images.length);
+                }
+            }
+        });
+
+        // Cleanup function
+        return () => {
+            if (draggableInstance && draggableInstance[0]) {
+                draggableInstance[0].kill();
+            }
+        };
+    }, [images.length]);
+
+    return (
+        <div
+            ref={carouselRef}
+            className="relative w-full h-[490px] lg:h-[590px] cursor-grab"
+            style={{ perspective: '1200px', transformStyle: 'preserve-3d' }}
+        >
+            <div ref={dragProxyRef} className="absolute inset-0 z-20"></div>
+
+            {images.map((src, index) => (
+                <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"
+                >
+                    <img
+                        src={src}
+                        alt={`carousel-item-${index}`}
+                        className="w-full h-full object-cover pointer-events-none"
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default DragCarousel;

package/dist/ApexUI-Kit/templates/EdgeGlowForm/EdgeGlowFrom.jsx

@@ -0,0 +1,297 @@
+import React, { useRef, useState, useEffect } from 'react';
+import gsap from 'gsap';
+
+const fields = [
+    { name: 'firstName', label: 'First Name', type: 'text' },
+    { name: 'lastName', label: 'Last Name', type: 'text' },
+    { name: 'email', label: 'Email Address', type: 'email' },
+    { name: 'mobile', label: 'Mobile Number', type: 'tel' },
+];
+
+const EdgeGlowForm = ({
+    GlowColor = 'violet',
+    borderGlowColor = '#a78bfa88',
+    borderGlowShadow = '#a78bfa33',
+}) => {
+    const [values, setValues] = useState({ firstName: '', lastName: '', email: '', mobile: '' });
+    const [focused, setFocused] = useState('');
+    const [checked, setChecked] = useState(false);
+    const [btnState, setBtnState] = useState('default');
+    const [errors, setErrors] = useState({});
+    const [checkboxError, setCheckboxError] = useState(false);
+    const labelRefs = useRef({});
+    const borderRefs = useRef({});
+    const ballsRef = [useRef(), useRef(), useRef()];
+    const checkTick = useRef();
+
+    // Mouse movement for glassy background
+    const [radialPos, setRadialPos] = useState({ x: 50, y: 50 });
+    const bgRef = useRef();
+
+    const handleBgMouseMove = e => {
+        if (!bgRef.current) return;
+        const rect = bgRef.current.getBoundingClientRect();
+        const x = ((e.clientX - rect.left) / rect.width) * 100;
+        const y = ((e.clientY - rect.top) / rect.height) * 100;
+        setRadialPos({ x, y });
+    };
+    const handleBgMouseLeave = () => {
+        setRadialPos({ x: 50, y: 50 });
+    };
+
+    const floatLabel = (name, up, color = null) => {
+        const label = labelRefs.current[name];
+        if (label) {
+            gsap.to(label, {
+                top: up ? '-2px' : '23%',
+                left: '5px',
+                scale: up ? 0.85 : 1,
+                color: color ?? (up ? '#a78bfa' : '#bdbdbd'),
+                transform: 'translateY(-4%)',
+                fontWeight: up ? 500 : 400,
+                duration: 0.2,
+                ease: 'easeInOut',
+                zIndex: 10,
+            });
+        }
+    };
+
+    const showBorder = (name, show, color = '#a78bfa88') => {
+        const [top, bottom] = borderRefs.current[name] || [];
+        [top, bottom].forEach(border => {
+            if (border) {
+                gsap.to(border, {
+                    opacity: show ? 1 : 0,
+                    scaleX: show ? 1 : 0.7,
+                    background: `linear-gradient(90deg, transparent 0%, ${color} 50%, transparent 100%)`,
+                    boxShadow: `0 0 8px 0 ${color.replace('88', '33')}`,
+                    duration: 0.2,
+                    ease: show ? 'ease.out' : 'ease.in',
+                });
+            }
+        });
+    };
+
+    const handleFocus = name => {
+        setFocused(name);
+        floatLabel(name, true);
+        showBorder(name, true);
+    };
+
+    const handleBlur = name => {
+        setFocused('');
+        if (!values[name]) floatLabel(name, false);
+        showBorder(name, false);
+    };
+
+    const handleChange = (e, name) => {
+        const v = e.target.value;
+        setValues(vals => ({ ...vals, [name]: v }));
+        if (v) floatLabel(name, true);
+        else if (focused !== name) floatLabel(name, false);
+    };
+
+    useEffect(() => {
+        fields.forEach(f => {
+            const [top, bottom] = borderRefs.current[f.name] || [];
+            if (top) gsap.set(top, { opacity: 0, scaleX: 0.7 });
+            if (bottom) gsap.set(bottom, { opacity: 0, scaleX: 0.7 });
+            if (labelRefs.current[f.name]) gsap.set(labelRefs.current[f.name], {
+                top: '23%',
+                left: '5px',
+                scale: 1,
+                color: '#bdbdbd',
+                transform: 'translateY(-4%)',
+                fontWeight: 400,
+                position: 'absolute',
+                pointerEvents: 'none',
+                backgroundColor: '',
+                padding: '0 4px',
+                zIndex: 10,
+            });
+        });
+    }, []);
+
+    const handleCheckbox = () => {
+        setChecked(v => {
+            const next = !v;
+            if (checkTick.current) {
+                gsap.to(checkTick.current, {
+                    scale: next ? 1 : 0,
+                    opacity: next ? 1 : 0,
+                    duration: 0.3,
+                    ease: 'expo.out',
+                });
+            }
+            return next;
+        });
+    };
+
+    useEffect(() => {
+        if (checkTick.current) gsap.set(checkTick.current, { scale: checked ? 1 : 0, opacity: checked ? 1 : 0 });
+    }, [checked]);
+
+    const handleBtnClick = e => {
+        e.preventDefault();
+        const newErrors = {};
+        fields.forEach(f => {
+            if (!values[f.name]) newErrors[f.name] = true;
+        });
+        setErrors(newErrors);
+        Object.keys(newErrors).forEach(name => {
+            floatLabel(name, true, '#f87171');
+            showBorder(name, true, '#f87171cc');
+        });
+        if (!checked) {
+            setCheckboxError(true);
+            setTimeout(() => setCheckboxError(false), 2000);
+        }
+        if (Object.keys(newErrors).length > 0 || !checked) return;
+        if (btnState !== 'default') return;
+
+        setBtnState('loading');
+        ballsRef.forEach((ref, i) => {
+            gsap.fromTo(ref.current, { y: 0 }, {
+                y: -12,
+                repeat: -1,
+                yoyo: true,
+                delay: i * 0.12,
+                duration: 0.38,
+                ease: 'power1.inOut',
+            });
+        });
+        setTimeout(() => {
+            setBtnState('success');
+            ballsRef.forEach(ref => gsap.set(ref.current, { y: 0 }));
+            setTimeout(() => {
+                setBtnState('default');
+            }, 1200);
+        }, 1600);
+    };
+
+    return (
+
+        <div className=" rounded-xl w-full">
+            <div
+                className="w-full max-w-sm mx-auto  rounded-xl shadow-2xl p-1 flex flex-col justify-center text-white relative overflow-hidden"
+                ref={bgRef}
+                onMouseMove={handleBgMouseMove}
+                onMouseLeave={handleBgMouseLeave}
+            >
+                {/* 🎯 Glassy Background */}
+                <div className="absolute inset-0 z-0 hidden md:block pointer-events-none rounded-xl">
+                    <div
+                        className="absolute inset-0 opacity-95"
+                        style={{
+                            background: `radial-gradient(circle at ${radialPos.x}% ${radialPos.y}%, ${GlowColor} 10%, transparent 60%)`
+                        }}
+                    ></div>
+                </div>
+                <div className={`relative z-10 bg-black h-full w-full p-6 border border-purple-600 rounded-xl`}>
+                    <h2 className="text-2xl font-bold mb-6 flex items-center gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6 text-purple-400">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25H4.5a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5H4.5a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-.659 1.591l-7.5 7.5a2.25 2.25 0 01-3.182 0l-7.5-7.5A2.25 2.25 0 012.25 6.993V6.75" />
+                        </svg>
+                        Get In Touch
+                    </h2>
+                    <form className="space-y-6 w-full" onSubmit={handleBtnClick}>
+                        {fields.map(f => (
+                            <div key={f.name} className="relative flex flex-col justify-center">
+                                <label
+                                    ref={el => (labelRefs.current[f.name] = el)}
+                                    className="absolute text-white/60 text-sm transition-all pointer-events-none"
+                                >{f.label}</label>
+                                <span
+                                    ref={el => {
+                                        if (!borderRefs.current[f.name]) borderRefs.current[f.name] = [];
+                                        borderRefs.current[f.name][0] = el;
+                                    }}
+                                    className="pointer-events-none absolute left-1/2 -translate-x-1/2 top-0 w-[80%] h-[2px] rounded-full opacity-0 scale-x-70 origin-center z-20"
+                                    style={{
+                                        background: `linear-gradient(90deg, transparent 0%, yellow 20%, transparent 100%)`,
+                                        boxShadow: `0 0 8px 0 ${borderGlowShadow}`,
+                                    }}
+                                />
+                                <input
+                                    type={f.type}
+                                    name={f.name}
+                                    value={values[f.name]}
+                                    onChange={e => handleChange(e, f.name)}
+                                    onFocus={() => handleFocus(f.name)}
+                                    onBlur={() => handleBlur(f.name)}
+                                    autoComplete="off"
+                                    className={`w-full px-4 pt-5 pb-2 rounded-lg bg-white/10 border ${errors[f.name] ? 'border-red-400' : 'border-white/20'} text-sm text-white focus:outline-none backdrop-blur-md transition font-light`}
+                                />
+                                <span
+                                    ref={el => {
+                                        if (!borderRefs.current[f.name]) borderRefs.current[f.name] = [];
+                                        borderRefs.current[f.name][1] = el;
+                                    }}
+                                    className="pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-0 w-[80%] h-[2px] rounded-full opacity-0 scale-x-70 origin-center"
+                                    style={{
+                                        background: `linear-gradient(90deg, transparent 0%, ${borderGlowColor} 20%, transparent 100%)`,
+                                        boxShadow: `0 0 8px 0 ${borderGlowShadow}`,
+                                    }}
+                                />
+                            </div>
+                        ))}
+
+                        <div className="flex items-center gap-3 mt-2 select-none relative">
+                            <button
+                                type="button"
+                                aria-checked={checked}
+                                tabIndex={0}
+                                onClick={handleCheckbox}
+                                className={`relative w-6 h-6 rounded-md border-2 border-white/30 bg-white/10 flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-purple-400 transition`}
+                                style={{ minWidth: 24 }}
+                            >
+                                <svg
+                                    ref={checkTick}
+                                    width="18" height="18" viewBox="0 0 18 18"
+                                    className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-purple-400"
+                                    style={{ scale: checked ? 1 : 0, opacity: checked ? 1 : 0, transition: 'all 0.2s' }}
+                                >
+                                    <polyline points="3,10 7,14 15,6" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+                                </svg>
+                            </button>
+                            <span className="text-white/80 text-sm">I agree to the terms</span>
+                            {checkboxError && (
+                                <div className="absolute -left-0 -top-10 flex flex-col items-center " style={{ zIndex: 999 }}>
+                                    <div className="bg-red-500 text-white text-xs rounded px-3 py-1 shadow-lg font-medium">check this box</div>
+                                    <div className="w-3 h-3 bg-red-500 rotate-135 -mt-1" style={{ clipPath: 'polygon(0 0, 100% 0, 100% 100%)' }}></div>
+                                </div>
+                            )}
+                        </div>
+                        {/* Animated Submit Button */}
+                        <button
+                            type="submit"
+                            className="mt-6 py-3 px-6 bg-gradient-to-r from-purple-700 via-purple-500 to-indigo-800 rounded-md hover:brightness-110 transition shadow-lg w-full font-semibold text-base flex items-center justify-center gap-2 relative overflow-hidden"
+                            style={{ minHeight: 48 }}
+                            onClick={handleBtnClick}
+                            disabled={btnState !== 'default'}
+                        >
+                            {/* Bouncing Balls */}
+                            <span className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex gap-1 ${btnState === 'loading' ? 'opacity-100' : 'opacity-0'}`} style={{ transition: 'opacity 0.2s' }}>
+                                <span ref={ballsRef[0]} className="w-2.5 h-2.5 rounded-full bg-white/80 inline-block" />
+                                <span ref={ballsRef[1]} className="w-2.5 h-2.5 rounded-full bg-white/80 inline-block" />
+                                <span ref={ballsRef[2]} className="w-2.5 h-2.5 rounded-full bg-white/80 inline-block" />
+                            </span>
+                            {/* Checkmark */}
+                            <span
+                                className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl text-green-400 ${btnState === 'success' ? 'opacity-100' : 'opacity-0'}`}
+                                style={{ transition: 'opacity 0.2s' }}
+                            >
+                                <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7" /></svg>
+                            </span>
+                            {/* Default text */}
+                            <span className={`transition-opacity duration-200 ${btnState === 'default' ? 'opacity-100' : 'opacity-0'}`}>Send Message</span>
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+
+    );
+}
+
+export default EdgeGlowForm;