apex-ui-kit 2.0.5

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

@@ -0,0 +1,114 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { gsap } from 'gsap';
+import { ChevronDown } from 'lucide-react';
+const DropdownPanel = ({ item, isActive }) => {
+    const panelRef = useRef(null);
+
+    // GSAP animation for revealing the panel
+    useEffect(() => {
+        if (isActive) {
+            gsap.to(panelRef.current, {
+                autoAlpha: 1,
+                y: 0,
+                scale: 1,
+                duration: 0.2,
+                ease: 'power3.out'
+            });
+        } else {
+            gsap.to(panelRef.current, {
+                autoAlpha: 0,
+                y: -10,
+                scale: 0.95,
+                duration: 0.2,
+                ease: 'power3.in'
+            });
+        }
+    }, [isActive]);
+
+    return (
+        <div
+            ref={panelRef}
+            style={{ visibility: 'hidden', transformOrigin: 'top left' }}
+            className="absolute top-full left-1/2 -translate-x-1/2 mt-8 w-max max-w-4xl"
+        >
+            <div className="bg-gray-950 rounded-4xl shadow-xl p-6 z-50 border border-dashed border-gray-700/40">
+                {/* Links Dropdown */}
+                {item.type === "links" && (
+                    <ul className="grid grid-cols-2 gap-x-8 gap-y-2 text-left">
+                        {item.submenu.map((subItem, i) => (
+                            <li key={i}>
+                                <a href={subItem.href} className="block p-1.5 text-sm text-gray-400 rounded-md transition-colors duration-75 hover:text-lime-400 hover:bg-slate-800">
+                                    {subItem.label}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+                {/* Products Dropdown */}
+                {item.type === "products" && (
+                    <div className=' border border-gray-700/40 bg-black/10 rounded-2xl p-5'>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 z-50">
+                            {item.submenu.map((subItem, i) => (
+                                <a href={subItem.href} key={i} className={`flex items-center gap-4 bg-slate-800/50 p-3 rounded-lg hover:bg-slate-800 transition-all group w-80`}>
+                                    <div className="overflow-hidden rounded-md">
+                                        <img src={subItem.image} alt={subItem.label} className="w-20 h-20 object-cover transition-transform duration-300 group-hover:scale-110" />
+                                    </div>
+                                    <div className="text-left">
+                                        <h3 className="text-gray-200 font-medium text-sm">{subItem.label}</h3>
+                                        <p className="text-gray-500 text-xs">{subItem.subtitle}</p>
+                                    </div>
+                                </a>
+                            ))}
+                        </div>
+                    </div>
+                )}
+                {/* Services Dropdown */}
+                {item.type === "services" && (
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                        {item.submenu.map((subItem, i) => (
+                            <a href={subItem.href} key={i} className="group block bg-slate-800/50 p-3 rounded-lg hover:bg-slate-800 transition-all w-64">
+                                <h3 className="text-lime-400 font-medium transition-colors group-hover:text-lime-300">{subItem.label}</h3>
+                                <p className="text-gray-500 text-sm">{subItem.subtitle}</p>
+                            </a>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+const NavDropDown = ({ navData }) => {
+    const [openIndex, setOpenIndex] = useState(null);
+
+    return (
+        // New container panel with dashed border
+        <div className=" inline-block bg-stone-950 border border-dashed border-slate-300/20 rounded-xl p-4 fixed" style={{ zIndex: '4000' }}>
+            <nav className="relative">
+                <ul className="flex space-x-2 justify-center">
+                    {navData.map((item, index) => (
+                        <li
+                            key={index}
+                            className="relative"
+                            onMouseEnter={() => item.submenu && setOpenIndex(index)}
+                            onMouseLeave={() => item.submenu && setOpenIndex(null)}
+                        >
+                            <a
+                                href={item.href || '#'}
+                                className="flex items-center px-3 py-2 text-sm font-medium hover:text-lime-400 text-slate-300 transition-colors duration-300 cursor-pointer"
+                            >
+                                {item.label}
+                                {item.submenu && (
+                                    <ChevronDown size={16} className={`ml-1 transition-transform duration-300 ${openIndex === index ? "rotate-180" : ""}`} />
+                                )}
+                            </a>
+                            {item.submenu && <DropdownPanel item={item} isActive={openIndex === index} />}
+                        </li>
+                    ))}
+                </ul>
+            </nav>
+        </div>
+    );
+};
+
+export default NavDropDown; 

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

@@ -0,0 +1,153 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { gsap } from "gsap";
+const NavMenu = ({
+    indicatorColor = "#a3e635",
+    backgroundColor = "rgba(17, 24, 39, 0.5)",
+    activeColor = "#ffffff",
+    indicatorAnimation = "elastic",
+    onNavItemClick
+}) => {
+    const [activeIdx, setActiveIdx] = useState(0);
+    const navItemsRef = useRef([]);
+    const indicatorRef = useRef(null);
+    const navContainerRef = useRef(null);
+    useEffect(() => {
+        if (!navContainerRef.current) return;
+        gsap.fromTo(
+            navContainerRef.current,
+            { width: 0, opacity: 0 },
+            { width: "auto", opacity: 1, duration: 0.8, ease: "power2.out", delay: 0.5 }
+        );
+    }, []);
+
+    useEffect(() => {
+        const indicator = indicatorRef.current;
+        const el = navItemsRef.current[activeIdx];
+
+        if (!indicator || !el) return;
+
+        const getEase = () => {
+            switch (indicatorAnimation) {
+                case "spring": return "bounce.out";
+                case "power": return "power3.out";
+                case "elastic":
+                default: return "elastic.out(1, 0.6)";
+            }
+        };
+
+        const moveWithGSAP = () => {
+            const rect = el.getBoundingClientRect();
+            const parentRect = el.parentElement.getBoundingClientRect();
+            const left = rect.left - parentRect.left;
+            const width = rect.width;
+
+            gsap.to(indicator, {
+                x: left,
+                width,
+                duration: 0.5,
+                ease: getEase(),
+            });
+        };
+
+        const timeoutId = setTimeout(moveWithGSAP, 50);
+        return () => clearTimeout(timeoutId);
+
+    }, [activeIdx, indicatorAnimation]);
+
+    // Handle resize
+    useEffect(() => {
+        const handleResize = () => {
+            const el = navItemsRef.current[activeIdx];
+            if (el) {
+                const rect = el.getBoundingClientRect();
+                const parentRect = el.parentElement.getBoundingClientRect();
+                const left = rect.left - parentRect.left;
+                const width = rect.width;
+
+                gsap.set(indicatorRef.current, {
+                    x: left,
+                    width: width
+                });
+            }
+        };
+
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [activeIdx]);
+
+    const navItems = ['Home', 'Docs', 'UI Kit', 'Contact'];
+
+    return (
+        <nav
+            ref={navContainerRef}
+            className="rounded px-3 py-2 shadow-lg border border-white/10 overflow-hidden"
+            style={{ backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', background: backgroundColor ,  }}
+        >
+            <div
+                ref={indicatorRef}
+                className="absolute top-1.5 h-[calc(100%-0.75rem)] rounded-lg z-0 "
+                style={{ background: indicatorColor, opacity: 0.3 }}
+            />
+            <div className="relative flex gap-2 z-10 whitespace-nowrap">
+                {navItems.map((label, i) => (
+                    <button
+                        key={label}
+                        ref={(el) => (navItemsRef.current[i] = el)}
+                        onClick={() => {
+                            setActiveIdx(i);
+                            if (onNavItemClick) onNavItemClick();
+                        }}
+                        className={`nav-item px-6 py-2 text-base font-semibold rounded-full relative z-10 transition-colors duration-300 ${i === activeIdx ? '' : 'text-gray-400 hover:text-white'}`}
+                        style={{ color: i === activeIdx ? activeColor : undefined }}
+                    >
+                        {label}
+                    </button>
+                ))}
+            </div>
+        </nav>
+    );
+};
+
+
+// Responsive Wrapper Component
+const ResponsiveNavMenu = (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const navItems = ['Home', 'Docs', 'UI Kit', 'Contact'];
+
+    return (
+        <nav className="flex items-center justify-center p-4 sticky top-0 left-0 w-full z-50 bg-transparent">
+            <div className="hidden md:flex w-full justify-center">
+                <NavMenu {...props} />
+            </div>
+
+            <div className="md:hidden flex w-full justify-end">
+                <button onClick={() => setIsOpen(!isOpen)} className="text-white focus:outline-none">
+                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={isOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16m-7 6h7"} />
+                    </svg>
+                </button>
+            </div>
+
+            {isOpen && (
+                <div className="md:hidden absolute top-20 left-4 right-4 rounded-xl shadow-lg border border-white/10"
+                    style={{ backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', background: 'rgba(17, 24, 39, 0.7)' }}>
+                    <div className="flex flex-col items-center gap-2 p-4">
+                        {navItems.map((label, i) => (
+                            <button
+                                key={label}
+                                onClick={() => {
+                                    console.log(`${label} clicked`);
+                                    setIsOpen(false);
+                                }}
+                                className="w-full text-center px-6 py-3 text-lg font-semibold rounded-full text-gray-300 hover:text-white hover:bg-white/10 transition-colors duration-300"
+                            >
+                                {label}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </nav>
+    );
+};
+export default ResponsiveNavMenu;

package/dist/ApexUI-Kit/templates/OrbsBackground/FloatingOrbs.jsx

@@ -0,0 +1,96 @@
+/* eslint-disable no-unused-vars */
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+
+// --- FloatingOrbsBackground Component (Optimized for Mobile) ---
+const FloatingOrbsBackground = ({
+    children,
+    className,
+    containerClassName,
+    colors,
+    desktopOrbs = 20, // Orbs for desktop
+    mobileOrbs = 10,   // Orbs for mobile
+}) => {
+    const [numberOfOrbs, setNumberOfOrbs] = useState(desktopOrbs);
+    const [isMobile, setIsMobile] = useState(false);
+
+    // Screen size check karne ke liye
+    useEffect(() => {
+        const checkScreenSize = () => {
+            const isMobileDevice = window.innerWidth < 768;
+            setIsMobile(isMobileDevice);
+            setNumberOfOrbs(isMobileDevice ? mobileOrbs : desktopOrbs);
+        };
+
+        checkScreenSize(); // Pehli baar check karein
+        window.addEventListener('resize', checkScreenSize);
+
+        // Cleanup
+        return () => window.removeEventListener('resize', checkScreenSize);
+    }, [desktopOrbs, mobileOrbs]);
+
+    const orbColors = colors ?? [
+        "#10b981", "#06b6d4", "#6366f1", "#a855f7",
+        "#d946ef", "#ec4899", "#f43f5e", "#f97316",
+    ];
+
+    return (
+        <div
+            className={`relative h-[60vh] lg:h-[80vh] w-full flex flex-col items-center justify-center overflow-hidden bg-slate-950 ${containerClassName}`}
+        >
+            {/* Orbs Container */}
+            <div className="absolute inset-0 z-0 w-full h-full">
+                {Array.from({ length: numberOfOrbs }).map((_, index) => {
+                    const size = Math.random() * 200 + 100;
+                    const duration = Math.random() * 20 + 15;
+                    // Mobile ke liye blur kam kar diya hai
+                    const blur = isMobile ? '60px' : '80px';
+
+                    return (
+                        <motion.div
+                            key={index}
+                            className="absolute rounded-full"
+                            style={{
+                                width: size,
+                                height: size,
+                                backgroundColor: orbColors[index % orbColors.length],
+                                filter: `blur(${blur})`,
+                                opacity: 0.4,
+                                // Performance behtar karne ke liye browser ko hint dena
+                                willChange: 'transform, opacity',
+                            }}
+                            animate={{
+                                x: [
+                                    // Movement range ko badha diya hai taaki yeh poori screen cover kare
+                                    `${Math.random() * 150 - 75}vw`,
+                                    `${Math.random() * 150 - 75}vw`,
+                                    `${Math.random() * 150 - 75}vw`,
+                                ],
+                                y: [
+                                    // Movement range ko badha diya hai taaki yeh poori screen cover kare
+                                    `${Math.random() * 150 - 75}vh`,
+                                    `${Math.random() * 150 - 75}vh`,
+                                    `${Math.random() * 150 - 75}vh`,
+                                ],
+                                scale: [1, 1.2, 1],
+                            }}
+                            transition={{
+                                duration: duration,
+                                repeat: Infinity,
+                                ease: 'easeInOut',
+                                repeatType: 'mirror',
+                            }}
+                        />
+                    );
+                })}
+            </div>
+
+            <div className={`relative z-10 ${className}`}>
+                {children}
+            </div>
+        </div>
+    );
+};
+
+
+export default FloatingOrbsBackground;

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

@@ -0,0 +1,127 @@
+import React, { useRef, useEffect } from 'react';
+import { gsap } from 'gsap';
+import { ArrowRight } from 'lucide-react';
+import { User } from 'lucide-react';
+
+// --- Multi-Layered 3D Parallax Card Component ---
+const ParallaxCard = ({ cardData = [], tiltEnable, glareEnable, scale, perspective }) => {
+    // Helper for per-card refs
+    const cardRefs = useRef([]);
+    const titleRefs = useRef([]);
+    const imageRefs = useRef([]);
+    const descRefs = useRef([]);
+    const buttonRefs = useRef([]);
+    const linkRefs = useRef([]);
+
+    useEffect(() => {
+        cardData.forEach((_, idx) => {
+            const cardElement = cardRefs.current[idx];
+            const titleElement = titleRefs.current[idx];
+            const imageElement = imageRefs.current[idx];
+            const descElement = descRefs.current[idx];
+            const buttonElement = buttonRefs.current[idx];
+            const linkElement = linkRefs.current[idx];
+
+            if (!cardElement) return;
+
+            const handleMouseMove = (e) => {
+                if (!tiltEnable) return;
+                const { left, top, width, height } = cardElement.getBoundingClientRect();
+                const x = e.clientX - left;
+                const y = e.clientY - top;
+                const rotateX = (y / height - 0.5) * -30;
+                const rotateY = (x / width - 0.5) * 30;
+
+                gsap.to(cardElement, {
+                    duration: 1,
+                    rotationX: rotateX,
+                    rotationY: rotateY,
+                    scale: scale,
+                    ease: "power3.out",
+                });
+
+                gsap.to(titleElement, { duration: 0.7, x: rotateY * 0.8, y: -rotateX * 0.8 });
+                gsap.to(imageElement, { duration: 0.8, x: rotateY * 1.5, y: -rotateX * 1.5 });
+                gsap.to(descElement, { duration: 0.9, x: rotateY * 1.2, y: -rotateX * 1.2 });
+                gsap.to(buttonElement, { duration: 1, x: rotateY * 1.1, y: -rotateX * 1.1 });
+                gsap.to(linkElement, { duration: 1, x: rotateY * 1.1, y: -rotateX * 1.1 });
+            };
+
+            const handleMouseLeave = () => {
+                if (tiltEnable) {
+                    gsap.to(cardElement, {
+                        duration: 1.2,
+                        rotationX: 0,
+                        rotationY: 0,
+                        scale: 1,
+                        ease: "elastic.out(1, 0.5)",
+                    });
+                    gsap.to([titleElement, imageElement, descElement, buttonElement, linkElement], {
+                        duration: 1.2,
+                        x: 0,
+                        y: 0,
+                        ease: "elastic.out(1, 0.5)",
+                    });
+                }
+            };
+
+            cardElement.addEventListener("mousemove", handleMouseMove);
+            cardElement.addEventListener("mouseleave", handleMouseLeave);
+
+            return () => {
+                cardElement.removeEventListener("mousemove", handleMouseMove);
+                cardElement.removeEventListener("mouseleave", handleMouseLeave);
+            };
+        });
+    }, [cardData, tiltEnable, scale]);
+
+    return (
+        <div className="flex flex-wrap gap-8 justify-center">
+            {cardData.map((card, idx) => (
+                <div
+                    key={idx}
+                    ref={el => cardRefs.current[idx] = el}
+                    className="w-full max-w-md rounded-2xl"
+                    style={{ transformStyle: 'preserve-3d', perspective: `${perspective}px` }}
+                >
+                    <div className="relative md:w-full w-70 h-[50vh] md:h-full  bg-stone-950 rounded-2xl p-8 border border-lime-500/20 shadow-2 shadow-lime-900/40 overflow-hidden"
+                        style={{ transformStyle: 'preserve-3d' }}
+                    >
+                        {glareEnable && (
+                            <div className="absolute inset-0 w-full h-full bg-gradient-to-br from-white/10 to-transparent opacity-50 pointer-events-none z-0" style={{ transform: 'translateZ(100px)' }}></div>
+                        )}
+
+                        <div className="relative z-10 flex flex-col h-full">
+                            <div ref={el => titleRefs.current[idx] = el} className="text-start" style={{ transform: 'translateZ(40px)' }}>
+                                <div className='flex items-center gap-3'>
+                                    <User /> <h2 className="md:text-3xl font-bold text-white">{card.title}</h2>
+
+                                </div>
+                                <p className="text-lime-400 mt-1">{card.subtitle}</p>
+                            </div>
+
+                            <div ref={el => imageRefs.current[idx] = el} className="my-6" style={{ transform: 'translateZ(80px)' }}>
+                                <img
+                                    src={card.imageUrl}
+                                    alt={card.title}
+                                    className="w-full md:h-56 object-cover rounded-lg shadow-lg shadow-black/40"
+                                />
+                            </div>
+
+                            <div ref={el => descRefs.current[idx] = el} className="text-start" style={{ transform: 'translateZ(30px)' }}>
+                                <p className="text-slate-400 md:text-sm text-xs mb-6">{card.description}</p>
+                            </div>
+                            <div ref={el => buttonRefs.current[idx] = el} className="text-center flex items-center justify-end" style={{ transform: 'translateZ(30px)' }}>
+                                <a href={card.link} className="border border-lime-400 py-2 px-3 rounded-full flex items-center gap-2 font-medium text-white group hover:text-lime-400 transition-colors duration-300">
+                                    Learn More <ArrowRight size={16} className="transition-transform duration-300 group-hover:translate-x-1 translate-y-0.5" />
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default ParallaxCard;

package/dist/ApexUI-Kit/templates/ParallaxCarousel/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;