apex-ui-kit 2.3.0 → 2.3.1

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

@@ -11,7 +11,7 @@ import { ArrowUp, Bot, Sparkles } from "lucide-react";
 
 const DEMO_REPLIES = [
     "Sure! Wrap your section in a container with `grid` and `gap-6`, then let the cards span two columns on large screens. Want me to write the code?",
-    "Great question. Animate only `transform` and `opacity` — they run on the GPU and never trigger layout, so the motion stays at 60fps.",
+    "Great question. Animate only `transform` and `opacity`, they run on the GPU and never trigger layout, so the motion stays at 60fps.",
     "Here's a quick idea: use a spring with stiffness 380 and damping 30. It feels snappy without bouncing too much.",
 ];
 

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

@@ -8,10 +8,10 @@ import { AnimatePresence, motion } from "framer-motion";
  */
 
 const DEFAULT_TABS = [
-    { id: "overview", label: "Overview", content: "A quick look at everything in one place — usage, limits and the latest activity." },
+    { id: "overview", label: "Overview", content: "A quick look at everything in one place, usage, limits and the latest activity." },
     { id: "analytics", label: "Analytics", content: "Visitors, conversions and retention, updated every few seconds with zero setup." },
     { id: "reports", label: "Reports", content: "Export weekly PDF reports or schedule them to land in your team's inbox." },
-    { id: "settings", label: "Settings", content: "Workspace name, members, billing and the danger zone — all in one tidy screen." },
+    { id: "settings", label: "Settings", content: "Workspace name, members, billing and the danger zone, all in one tidy screen." },
 ];
 
 const AnimatedTabs = ({ tabs = DEFAULT_TABS, defaultTab, variant = "pill", accentColor = "#a3e635", theme = "dark", onChange, className = "" }) => {

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

@@ -12,7 +12,7 @@ const DEFAULT_CARDS = [
     { icon: Sparkles, title: "Smooth", body: "Springs tuned to feel natural, never floaty." },
     { icon: Layers, title: "Composable", body: "Drop components in and style them with Tailwind." },
     { icon: Code2, title: "Yours", body: "Copy the source or add it with one CLI command." },
-    { icon: Zap, title: "Fast", body: "Transforms and opacity only — 60fps on phones." },
+    { icon: Zap, title: "Fast", body: "Transforms and opacity only, 60fps on phones." },
 ];
 
 const CardSwap3D = ({ cards = DEFAULT_CARDS, delay = 3200, distanceX = 3.6, distanceY = 3.2, skew = 5, pauseOnHover = true, accentColor = "#a3e635", theme = "dark", width = 18, className = "" }) => {

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

@@ -16,15 +16,17 @@ const ClickSpark = ({ sparkColor = "#a3e635", sparkCount = 10, sparkRadius = 26,
 
     useEffect(() => {
         const c = canvas.current;
+        // Hold the element itself: the ref is cleared on unmount before cleanup runs.
+        const el = wrap.current;
         const resize = () => {
-            const r = wrap.current.getBoundingClientRect();
+            const r = el.getBoundingClientRect();
             const dpr = Math.min(window.devicePixelRatio || 1, 2);
             c.width = r.width * dpr;
             c.height = r.height * dpr;
             c.getContext("2d").setTransform(dpr, 0, 0, dpr, 0, 0);
         };
         const ro = new ResizeObserver(resize);
-        ro.observe(wrap.current);
+        ro.observe(el);
         resize();
         return () => {
             ro.disconnect();

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

@@ -105,6 +105,8 @@ const CubeGallery = ({ faces = DEFAULT_FACES, size = 13, autoRotate = true, spee
                     className="relative h-full w-full cursor-grab touch-none active:cursor-grabbing [transform-style:preserve-3d]"
                     style={{ rotateX: rotX, rotateY: rotY }}
                     onPointerDown={(e) => {
+                        // Block text selection / native drag, which cancel the drag midway.
+                        e.preventDefault();
                         e.currentTarget.setPointerCapture(e.pointerId);
                         rotY.stop();
                         rotX.stop();

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

@@ -236,6 +236,7 @@ const DotGlobe = ({
         };
 
         const onDown = (e) => {
+            e.preventDefault();
             drag = { x: e.clientX, yaw, lastX: e.clientX, lastT: performance.now() };
             canvas.setPointerCapture?.(e.pointerId);
         };

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

@@ -51,7 +51,7 @@ const DynamicIsland = ({
     accentColor = "#a3e635",
     music = { title: "Midnight City", artist: "Apex Sessions", cover: `${IK}/spiderman.png?tr=f-auto,q-80,w-200` },
     call = { name: "Tony Stark", subtitle: "Mobile", avatar: `${IK}/ironman.png?tr=f-auto,q-80,w-160` },
-    notification = { app: "Messages", title: "Peter Parker", message: "On my way — saving the city first 🕷️" },
+    notification = { app: "Messages", title: "Peter Parker", message: "On my way, saving the city first 🕷️" },
     timerSeconds = 300,
     onViewChange,
     className = "",

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

@@ -32,6 +32,8 @@ const ElasticSlider = ({
     const [hover, setHover] = useState(false);
     const track = useRef(null);
     const drag = useRef(false);
+    // Latest value, readable synchronously from pointer handlers (state lags a render).
+    const valueRef = useRef(clamp(defaultValue));
 
     const pct = useMotionValue(((clamp(defaultValue) - min) / (max - min)) * 100);
     const overflow = useMotionValue(0); // px past an end, negative = left
@@ -44,10 +46,11 @@ const ElasticSlider = ({
 
     const commit = (raw) => {
         const v = clamp(Math.round(raw / step) * step);
-        setValue((prev) => {
-            if (prev !== v) onChange?.(v);
-            return v;
-        });
+        if (v !== valueRef.current) {
+            valueRef.current = v;
+            setValue(v);
+            onChange?.(v);
+        }
         return v;
     };
 
@@ -66,7 +69,7 @@ const ElasticSlider = ({
         setDragging(false);
         animate(overflow, 0, { type: "spring", stiffness: 380, damping: 12 });
         // Snap the fill to the stepped value.
-        animate(pct, ((value - min) / (max - min)) * 100, { duration: 0.15 });
+        animate(pct, ((valueRef.current - min) / (max - min)) * 100, { duration: 0.12 });
     };
 
     // Keep the fill in sync for keyboard changes.
@@ -74,7 +77,7 @@ const ElasticSlider = ({
         if (!drag.current) animate(pct, ((value - min) / (max - min)) * 100, { type: "spring", stiffness: 500, damping: 40 });
     }, [value, min, max, pct]);
 
-    const nudge = (delta) => commit(value + delta);
+    const nudge = (delta) => commit(valueRef.current + delta);
     const big = Math.max(step, (max - min) / 10);
     const thick = dragging || hover;
 
@@ -98,7 +101,13 @@ const ElasticSlider = ({
                     onPointerLeave={() => setHover(false)}
                     onPointerDown={(e) => {
                         if (e.button !== 0) return;
+                        // No text selection / native drag: those fire pointercancel mid-drag.
+                        e.preventDefault();
+                        e.currentTarget.focus({ preventScroll: true });
                         e.currentTarget.setPointerCapture(e.pointerId);
+                        // Stop any spring still settling from the last drag.
+                        pct.stop();
+                        overflow.stop();
                         drag.current = true;
                         setDragging(true);
                         fromPointer(e.clientX);

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

@@ -9,7 +9,7 @@ import { Plus } from "lucide-react";
  */
 
 const DEFAULT_ITEMS = [
-    { q: "Is ApexUI free to use?", a: "Yes. Every component is free and open source — copy it into your project or add it with one CLI command." },
+    { q: "Is ApexUI free to use?", a: "Yes. Every component is free and open source, copy it into your project or add it with one CLI command." },
     { q: "Does it work with Next.js?", a: "Yes. The components are plain React with Tailwind CSS, so they work in Vite, Next.js, Remix and anything else that runs React." },
     { q: "Can I change the colors?", a: "Every component takes props for its accent colors, and the Tailwind classes are right there in the code if you want to go further." },
     { q: "Do the animations respect reduced motion?", a: "Yes. Components check the visitor's reduced-motion setting and tone their movement down or switch it off." },

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

@@ -13,7 +13,7 @@ const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
 const DEFAULT_PAGES = [
     { title: "ApexUI", body: "A field guide to motion", cover: true },
     { title: "Chapter 1", body: "Start small. One spring, one easing, one idea per interaction." },
-    { title: "Chapter 2", body: "Motion should explain — where things come from and where they go.", image: `${IK}/spiderman.png?tr=f-auto,q-80,w-500` },
+    { title: "Chapter 2", body: "Motion should explain, where things come from and where they go.", image: `${IK}/spiderman.png?tr=f-auto,q-80,w-500` },
     { title: "Chapter 3", body: "Keep it fast. Animate transform and opacity, never layout." },
     { title: "Chapter 4", body: "Respect reduced motion. Calm is a feature too.", image: `${IK}/doctorStrange.png?tr=f-auto,q-80,w-500` },
     { title: "Chapter 5", body: "Details compound. Tiny shadows and easing make it feel real." },

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

@@ -160,8 +160,10 @@ const GooeyNav = ({ items = DEFAULT_ITEMS, initialActive = 0, onChange, accentCo
         };
         sim.current = s;
 
+        // Hold the element itself: the ref is cleared on unmount before cleanup runs.
+        const barEl = bar.current;
         const resize = () => {
-            const r = bar.current.getBoundingClientRect();
+            const r = barEl.getBoundingClientRect();
             s.dpr = Math.min(window.devicePixelRatio || 1, 2);
             const w = r.width + PAD * 2;
             const h = r.height + PAD * 2;
@@ -182,7 +184,7 @@ const GooeyNav = ({ items = DEFAULT_ITEMS, initialActive = 0, onChange, accentCo
         };
         resize();
         const ro = new ResizeObserver(resize);
-        ro.observe(bar.current);
+        ro.observe(barEl);
 
         const dropData = new Float32Array(MAX_DROPS * 4);
         let raf = 0;

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

@@ -45,6 +45,9 @@ const ImageCompare = ({
         <div
             ref={ref}
             onPointerDown={(e) => {
+                // Block text selection / native drag, which cancel the drag midway.
+                e.preventDefault();
+                e.currentTarget.focus?.({ preventScroll: true });
                 e.currentTarget.setPointerCapture(e.pointerId);
                 setHeld(true);
                 fromPointer(e);
@@ -81,8 +84,8 @@ const ImageCompare = ({
                     aria-valuenow={Math.round(pos)}
                     aria-orientation={vertical ? "vertical" : "horizontal"}
                     onKeyDown={onKeyDown}
-                    className={`pointer-events-auto absolute left-1/2 top-1/2 grid h-10 w-10 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full text-black shadow-[0_6px_20px_-4px_rgba(0,0,0,0.6)] outline-none transition-transform duration-200 focus-visible:ring-4 focus-visible:ring-white/50 ${held ? "scale-110" : "group-hover:scale-105"}`}
-                    style={{ background: accentColor }}
+                    className={`pointer-events-auto absolute left-1/2 top-1/2 grid h-10 w-10 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-white text-neutral-800 shadow-[0_6px_20px_-4px_rgba(0,0,0,0.55)] outline-none transition-transform duration-200 focus-visible:ring-4 focus-visible:ring-white/50 ${held ? "scale-110" : "group-hover:scale-105"}`}
+                    style={{ boxShadow: `0 0 0 2px ${accentColor}, 0 6px 20px -4px rgba(0,0,0,0.55)` }}
                 >
                     <ChevronsLeftRight className={`h-5 w-5 ${vertical ? "rotate-90" : ""}`} />
                 </button>

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

@@ -14,7 +14,7 @@ const DefaultSecond = () => (
         <div>
             <p className="text-[0.7rem] font-semibold uppercase tracking-[0.3em] text-white/50">Wakanda</p>
             <p className="mt-2 text-3xl font-black">Black Panther</p>
-            <p className="mt-2 text-sm text-white/60">King T&apos;Challa — protector of his people.</p>
+            <p className="mt-2 text-sm text-white/60">King T&apos;Challa, protector of his people.</p>
         </div>
     </div>
 );

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

@@ -132,7 +132,7 @@ const PointerFollower = ({
                         >
                             <div className="px-4 py-3 rounded-full text-[11px] overflow-hidden font-semibold shadow-[0_2px_8px_rgba(0,0,0,0.25)] border border-black/10" style={{ backgroundColor: badgeColor }}>
                                 <span className="text-[12px] font-medium tracking-wide whitespace-nowrap drop-shadow" style={{ color: badgeTextColor }}>
-                                    {person.name} — {person.job}
+                                    {person.name} none {person.job}
                                 </span>
                             </div>
                         </div>

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

@@ -3,24 +3,30 @@ import { motion, useReducedMotion } from "framer-motion";
 
 /*
  * Shiny Text: a bright band of light sweeps across the text on a loop, like
- * light catching metal. The text keeps its own color between sweeps.
+ * light catching metal. The band starts and ends fully outside the text, so
+ * the loop is seamless — it never pauses on the last letters or jumps back.
  */
 
-const ShinyText = ({ text = "Shipping soon — join the waitlist", as = "span", speed = 2.8, color = "#71717a", shineColor = "#ffffff", spread = 22, disabled = false, className = "" }) => {
+const ShinyText = ({ text = "Shipping soon, join the waitlist", as = "span", speed = 2.8, color = "#71717a", shineColor = "#ffffff", spread = 10, pause = 0.6, disabled = false, className = "" }) => {
     const reduced = useReducedMotion();
     const Tag = motion[as] ?? motion.span;
     const still = disabled || reduced;
+    // The gradient is 3× the text width with the band in its middle. Moving the
+    // background from 100% to 0% carries the band from fully left of the text
+    // to fully right of it, so both ends of the loop look identical.
+    const band = Math.min(16, Math.max(4, spread));
     return (
         <Tag
             className={`inline-block bg-clip-text text-transparent ${className}`}
             style={{
-                backgroundImage: `linear-gradient(110deg, ${color} ${50 - spread}%, ${shineColor} 50%, ${color} ${50 + spread}%)`,
-                backgroundSize: "250% 100%",
+                backgroundImage: `linear-gradient(100deg, ${color} ${50 - band}%, ${shineColor} 50%, ${color} ${50 + band}%)`,
+                backgroundSize: "300% 100%",
+                backgroundRepeat: "no-repeat",
                 WebkitBackgroundClip: "text",
+                backgroundPosition: "100% 0",
             }}
-            initial={{ backgroundPosition: "100% 0" }}
             animate={still ? { backgroundPosition: "100% 0" } : { backgroundPosition: ["100% 0", "0% 0"] }}
-            transition={still ? undefined : { duration: speed, ease: "linear", repeat: Infinity, repeatDelay: speed * 0.25 }}
+            transition={still ? undefined : { duration: speed, ease: "linear", repeat: Infinity, repeatDelay: pause }}
         >
             {text}
         </Tag>

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

@@ -9,7 +9,7 @@ import { Check } from "lucide-react";
  */
 
 const DEFAULT_STEPS = [
-    { title: "Account", content: <p>Welcome! Pick a username to get started — you can change it later.</p> },
+    { title: "Account", content: <p>Welcome! Pick a username to get started, you can change it later.</p> },
     { title: "Profile", content: <p>Add a photo and a short bio so people know who you are.</p> },
     { title: "Theme", content: <p>Choose light, dark or follow your system. Your choice syncs everywhere.</p> },
     { title: "Done", content: <p>All set. Press Complete to finish onboarding.</p> },
@@ -21,6 +21,18 @@ const variants = {
     exit: (dir) => ({ x: dir > 0 ? "-40%" : "40%", opacity: 0 }),
 };
 
+function StepBody({ step, total, title, content, accentColor, dark }) {
+    return (
+        <>
+            <p className="text-[0.72rem] font-semibold uppercase tracking-[0.18em]" style={{ color: accentColor }}>
+                Step {step + 1} of {total}
+            </p>
+            <h3 className="mt-1 text-xl font-semibold">{title}</h3>
+            <div className={`mt-2 text-[0.92rem] leading-relaxed ${dark ? "text-white/65" : "text-neutral-600"}`}>{content}</div>
+        </>
+    );
+}
+
 const Stepper = ({ steps = DEFAULT_STEPS, initialStep = 0, onStepChange, onComplete, accentColor = "#a3e635", theme = "dark", className = "" }) => {
     const id = useId();
     const [step, setStep] = useState(initialStep);
@@ -72,26 +84,27 @@ const Stepper = ({ steps = DEFAULT_STEPS, initialStep = 0, onStepChange, onCompl
                 })}
             </div>
 
-            <motion.div layout className="relative mt-6 overflow-hidden" transition={{ type: "spring", stiffness: 300, damping: 32 }}>
+            <div className="relative mt-6 grid overflow-hidden">
+                {/* Invisible copies of every step reserve the tallest height, so the
+                    card and its buttons never move up and down between steps. */}
+                {steps.map((s, i) => (
+                    <div key={i} aria-hidden="true" className="invisible col-start-1 row-start-1 pb-1">
+                        <StepBody step={i} total={steps.length} title={s.title} content={s.content} accentColor={accentColor} dark={dark} />
+                    </div>
+                ))}
                 <AnimatePresence mode="popLayout" initial={false} custom={dir}>
-                    <motion.div key={done ? "done" : step} custom={dir} variants={variants} initial="enter" animate="center" exit="exit" transition={{ type: "spring", stiffness: 300, damping: 32 }} className="pb-1">
+                    <motion.div key={done ? "done" : step} custom={dir} variants={variants} initial="enter" animate="center" exit="exit" transition={{ type: "spring", stiffness: 300, damping: 32 }} className="col-start-1 row-start-1 pb-1">
                         {done ? (
                             <div className="py-4 text-center">
                                 <p className="text-lg font-semibold">You are all set 🎉</p>
                                 <p className={`mt-1 text-sm ${dark ? "text-white/55" : "text-neutral-500"}`}>Every step is complete.</p>
                             </div>
                         ) : (
-                            <>
-                                <p className="text-[0.72rem] font-semibold uppercase tracking-[0.18em]" style={{ color: accentColor }}>
-                                    Step {step + 1} of {steps.length}
-                                </p>
-                                <h3 className="mt-1 text-xl font-semibold">{steps[step].title}</h3>
-                                <div className={`mt-2 text-[0.92rem] leading-relaxed ${dark ? "text-white/65" : "text-neutral-600"}`}>{steps[step].content}</div>
-                            </>
+                            <StepBody step={step} total={steps.length} title={steps[step].title} content={steps[step].content} accentColor={accentColor} dark={dark} />
                         )}
                     </motion.div>
                 </AnimatePresence>
-            </motion.div>
+            </div>
 
             <div className="mt-6 flex items-center justify-between">
                 {done ? (

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

@@ -38,6 +38,8 @@ const TextRing3D = ({ text = "APEX UI · 3D TYPE · ", radius = 9, speed = 30, t
             className={`grid cursor-grab touch-none select-none place-items-center active:cursor-grabbing [perspective:900px] ${className}`}
             style={{ width: `${radius * 2.4}rem`, maxWidth: "100%", height: `${fontSize * 3.2 + 4}rem`, color }}
             onPointerDown={(e) => {
+                // Block text selection / native drag, which cancel the drag midway.
+                e.preventDefault();
                 e.currentTarget.setPointerCapture(e.pointerId);
                 drag.current = { x: e.clientX, a: angle.current, t: performance.now() };
             }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apex-ui-kit",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "license": "MIT",
   "description": "Apex UI Kit - A React component library for building modern user interfaces",
   "keywords": [

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

@@ -1,105 +0,0 @@
-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;