abhishek-portfolio-template 1.0.0

package/template/src/components/ui/toast.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { createContext, useContext, useState, useCallback } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { X, CheckCircle, AlertCircle, Info } from "lucide-react";
+
+type ToastType = "success" | "error" | "info";
+
+interface Toast {
+    id: string;
+    message: string;
+    type: ToastType;
+}
+
+interface ToastContextType {
+    showToast: (message: string, type?: ToastType) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+    const [toasts, setToasts] = useState<Toast[]>([]);
+
+    const showToast = useCallback((message: string, type: ToastType = "info") => {
+        const id = Math.random().toString(36).substring(2, 9);
+        setToasts((prev) => [...prev, { id, message, type }]);
+
+        // Auto remove after 3 seconds
+        setTimeout(() => {
+            setToasts((prev) => prev.filter((t) => t.id !== id));
+        }, 3000);
+    }, []);
+
+    const removeToast = (id: string) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    };
+
+    return (
+        <ToastContext.Provider value={{ showToast }}>
+            {children}
+            <div className="fixed bottom-6 right-6 z-[100] flex flex-col gap-3 pointer-events-none">
+                <AnimatePresence>
+                    {toasts.map((toast) => (
+                        <motion.div
+                            key={toast.id}
+                            initial={{ opacity: 0, y: 20, scale: 0.95 }}
+                            animate={{ opacity: 1, y: 0, scale: 1 }}
+                            exit={{ opacity: 0, scale: 0.9, transition: { duration: 0.2 } }}
+                            layout
+                            className="pointer-events-auto min-w-[300px] bg-[#1a1a1a]/90 backdrop-blur-md border border-white/10 p-4 rounded-xl shadow-2xl flex items-start gap-3"
+                        >
+                            <div className="mt-0.5">
+                                {toast.type === "success" && <CheckCircle className="w-5 h-5 text-emerald-500" />}
+                                {toast.type === "error" && <AlertCircle className="w-5 h-5 text-rose-500" />}
+                                {toast.type === "info" && <Info className="w-5 h-5 text-blue-500" />}
+                            </div>
+                            <div className="flex-1">
+                                <p className="text-sm font-medium text-white/90 leading-snug">{toast.message}</p>
+                            </div>
+                            <button
+                                onClick={() => removeToast(toast.id)}
+                                className="text-white/40 hover:text-white transition-colors"
+                            >
+                                <X className="w-4 h-4" />
+                            </button>
+                        </motion.div>
+                    ))}
+                </AnimatePresence>
+            </div>
+        </ToastContext.Provider>
+    );
+}
+
+export function useToast() {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error("useToast must be used within a ToastProvider");
+    }
+    return context;
+}

package/template/src/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+    React.ElementRef<typeof TooltipPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+    <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+            "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+            className,
+        )}
+        {...props}
+    />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/template/src/components/ui/user-location.tsx

@@ -0,0 +1,151 @@
+"use client"
+
+import { useState, useEffect, useRef } from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import { supabase } from "@/lib/supabase"
+import { MapPin, Clock } from "lucide-react"
+
+interface UserLocationProps {
+    className?: string
+}
+
+export function UserLocation({ className = "" }: UserLocationProps) {
+    const [location, setLocation] = useState({ city: "Kolkata", country: "India", timezone: "Asia/Kolkata" })
+    const [showTime, setShowTime] = useState(false)
+    const [currentTime, setCurrentTime] = useState("")
+
+
+    useEffect(() => {
+        const fetchLocation = async () => {
+            const { data } = await supabase.from("profile").select("location_city, location_country, location_timezone").single();
+            if (data) {
+                setLocation({
+                    city: data.location_city || "Kolkata",
+                    country: data.location_country || "India",
+                    timezone: data.location_timezone || "Asia/Kolkata"
+                });
+            }
+        };
+        fetchLocation();
+    }, []);
+
+    useEffect(() => {
+        const updateTime = () => {
+            try {
+                const now = new Date()
+                // Format: "10:30 PM IST"
+                const time = now.toLocaleTimeString("en-US", {
+                    hour: "numeric",
+                    minute: "2-digit",
+                    hour12: true,
+                    timeZone: location.timezone,
+                });
+
+                // Explicitly use "IST" for Indian time for compactness
+                const suffix = location.timezone.includes("Kolkata") ? " IST" : "";
+                setCurrentTime(`${time}${suffix}`);
+            } catch (e) {
+                setCurrentTime("00:00 AM")
+            }
+        }
+        updateTime()
+        const interval = setInterval(updateTime, 1000)
+        return () => clearInterval(interval)
+    }, [location.timezone])
+
+    const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+    const handleMobileClick = () => {
+        // Toggle or just show? User said "click... show type... after 1.5s auto animate change"
+        // Let's force show then revert.
+        setShowTime(true);
+
+        if (timerRef.current) clearTimeout(timerRef.current);
+
+        timerRef.current = setTimeout(() => {
+            setShowTime(false);
+        }, 1500);
+    };
+
+    return (
+        <motion.button
+            onMouseEnter={() => setShowTime(true)}
+            onMouseLeave={() => setShowTime(false)}
+            onClick={handleMobileClick}
+            onBlur={() => setShowTime(false)}
+            className={`group relative flex items-center gap-3 rounded-full border border-white/10 bg-white/5 px-4 py-2 transition-colors duration-300 hover:border-white/20 hover:bg-white/10 select-none touch-none overflow-hidden ${className}`}
+        >
+            <div className="relative flex items-center justify-center w-4 h-4">
+                <AnimatePresence mode="popLayout" initial={false}>
+                    {showTime ? (
+                        <motion.div
+                            key="clock"
+                            initial={{ scale: 0.5, opacity: 0, rotate: -180 }}
+                            animate={{ scale: 1, opacity: 1, rotate: 0 }}
+                            exit={{ scale: 0.5, opacity: 0, rotate: 180 }}
+                            transition={{
+                                type: "spring",
+                                stiffness: 300,
+                                damping: 20
+                            }}
+                            className="absolute inset-0 m-auto"
+                        >
+                            <Clock className="w-4 h-4 text-white/70" />
+                        </motion.div>
+                    ) : (
+                        <motion.div
+                            key="pin"
+                            initial={{ scale: 0.5, opacity: 0, rotate: -180 }}
+                            animate={{ scale: 1, opacity: 1, rotate: 0 }}
+                            exit={{ scale: 0.5, opacity: 0, rotate: 180 }}
+                            transition={{
+                                type: "spring",
+                                stiffness: 300,
+                                damping: 20
+                            }}
+                            className="absolute inset-0 m-auto"
+                        >
+                            <MapPin className="w-4 h-4 text-white/70" />
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </div>
+
+            <div className="relative h-5 flex flex-col justify-center items-start w-full overflow-hidden">
+                <AnimatePresence mode="popLayout" initial={false}>
+                    {showTime ? (
+                        <motion.span
+                            key="time"
+                            initial={{ y: 20, opacity: 0, filter: "blur(4px)" }}
+                            animate={{ y: 0, opacity: 1, filter: "blur(0px)" }}
+                            exit={{ y: -20, opacity: 0, filter: "blur(4px)" }}
+                            transition={{
+                                type: "spring",
+                                stiffness: 400,
+                                damping: 30
+                            }}
+                            className="text-sm font-medium text-white/90 font-sans block whitespace-nowrap absolute left-0"
+                        >
+                            {currentTime}
+                        </motion.span>
+                    ) : (
+                        <motion.span
+                            key="location"
+                            initial={{ y: 20, opacity: 0, filter: "blur(4px)" }}
+                            animate={{ y: 0, opacity: 1, filter: "blur(0px)" }}
+                            exit={{ y: -20, opacity: 0, filter: "blur(4px)" }}
+                            transition={{
+                                type: "spring",
+                                stiffness: 400,
+                                damping: 30
+                            }}
+                            className="text-sm font-medium text-white/90 font-sans block whitespace-nowrap absolute left-0"
+                        >
+                            {location.city}, {location.country}
+                        </motion.span>
+                    )}
+                </AnimatePresence>
+            </div>
+        </motion.button>
+    )
+}

package/template/src/components/ui/vertical-image-stack.tsx

@@ -0,0 +1,345 @@
+"use client"
+
+import { useEffect, useState, useRef, useCallback } from "react"
+import { motion, PanInfo } from "framer-motion"
+import Image from "next/image"
+import { supabase } from "@/lib/supabase"
+import { PAPER_SOUND_BASE64 } from "@/components/ui/sound-constants"
+import { usePreloader } from "@/components/ui/preloader-wrapper"
+
+interface GalleryItem {
+    id: number;
+    src: string;
+    alt: string;
+}
+
+const isVideo = (url: string) => {
+    return url?.match(/\.(mp4|webm|ogg|mov)$/i);
+};
+
+export function VerticalImageStack() {
+    const { hasShown } = usePreloader();
+    const [images, setImages] = useState<GalleryItem[]>([]);
+
+    // Remove dummy data. If no images, we will handle in render.
+
+    useEffect(() => {
+        const fetchGallery = async () => {
+            const { data } = await supabase
+                .from("gallery_images")
+                .select("*")
+                .order("display_order", { ascending: true });
+
+            if (data && data.length > 0) {
+                setImages(data.map((item, i) => ({
+                    id: i + 1,
+                    src: item.image_url,
+                    alt: item.alt_text || "Gallery Image"
+                })));
+            }
+        };
+        fetchGallery();
+    }, []);
+
+    // Ensure we handles empty case in UI
+    const displayImages = images;
+
+    const [currentIndex, setCurrentIndex] = useState(0)
+    const lastNavigationTime = useRef(0)
+    const navigationCooldown = 400 // Adjusted cooldown
+
+    const navigate = useCallback((newDirection: number) => {
+        const now = Date.now()
+        if (now - lastNavigationTime.current < navigationCooldown) return
+        lastNavigationTime.current = now
+
+        setCurrentIndex((prev) => {
+            if (newDirection > 0) {
+                return prev === displayImages.length - 1 ? 0 : prev + 1
+            }
+            return prev === 0 ? displayImages.length - 1 : prev - 1
+        })
+    }, [displayImages.length])
+
+    const handleDragEnd = (_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+        const threshold = 60 // Significant pull required
+        const velocityThreshold = 100 // High velocity sweep
+
+        // Swipe triggers on distance OR high velocity
+        if (info.offset.y < -threshold || info.velocity.y < -velocityThreshold) {
+            navigate(1)
+        } else if (info.offset.y > threshold || info.velocity.y > velocityThreshold) {
+            navigate(-1)
+        }
+    }
+
+    const handleWheel = useCallback(
+        (e: WheelEvent) => {
+            e.stopPropagation();
+            // Debounce wheel slightly less or differently? 
+            // Actually just relying on cooldown is enough.
+            if (Math.abs(e.deltaY) > 40) { // Higher threshold for stability
+                if (e.deltaY > 0) {
+                    navigate(1)
+                } else {
+                    navigate(-1)
+                }
+            }
+        },
+        [navigate],
+    )
+
+    const containerRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        const container = containerRef.current
+        if (!container) return
+
+        const onWheel = (e: WheelEvent) => {
+            e.preventDefault() // prevent page scroll
+            handleWheel(e)
+        }
+
+        container.addEventListener("wheel", onWheel, { passive: false })
+        return () => container.removeEventListener("wheel", onWheel)
+    }, [handleWheel])
+
+    const [isMobile, setIsMobile] = useState(false)
+
+    // --- Sound & Haptics Setup ---
+    const audioRef = useRef<HTMLAudioElement | null>(null);
+    const isFirstRender = useRef(true);
+
+    // Short, crisp "tick" sound (iPhone-like wheel click)
+    const TICK_SOUND = "data:audio/mp3;base64,SUQzBAAAAAABAFRYWFgAAAASAAADbWFqb3JfYnJhbmQAbXA0MgBUWFZYAAAAEQAAA21pbm9yX3ZlcnNpb24AMABUWFZYAAAAHAAAA2NvbXBhdGlibGVfYnJhbmRzAGlzb21tcTQyAP/7UAAAABwAAAAAABAAAAABACAAAABHAAAASgAAAAUAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//7UAAAAABAAAAAABACAAAABHAAAASgAAAAUAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//7UAAAAABAAAAAABACAAAABHAAAASgAAAAUAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//7UAAAAABAAAAAABACAAAABHAAAASgAAAAUAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//7UAAAAABAAAAAABACAAAABHAAAASgAAAAUAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//7UAAAAABAAAAAABACAAAABHAAAASgAAAAUAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//7UAAAAABAAAAAABACAAAABHAAAASgAAAAUAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//7UAAAAABAAAAAABACAAAABHAAAASgAAAAUAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"; // Placeholder - Replacing with real tick logic below
+
+    // Real Tick Sound Data (Shortened for brevity but functional placeholder for logic)
+    // Actually, I'll use a reliable "pop" sound URL or just a simple beep logic if Base64 is too risky to guess.
+    // User requested "iPhone tick". I will use a very short logic for now.
+
+    useEffect(() => {
+        if (!hasShown) return; // Defer audio init until preloader is done
+
+        // Initialize Audio
+        // Using Embedded Base64 for INSTANT playback (no network delay)
+        audioRef.current = new Audio(PAPER_SOUND_BASE64);
+        audioRef.current.load();
+
+    }, [hasShown]);
+
+    useEffect(() => {
+        const checkMobile = () => setIsMobile(window.innerWidth < 640)
+        checkMobile()
+        window.addEventListener('resize', checkMobile)
+        return () => window.removeEventListener('resize', checkMobile)
+    }, [])
+
+    // Unlock Audio Context on first interaction (Click/Touch/Key)
+    useEffect(() => {
+        const unlockAudio = () => {
+            if (audioRef.current) {
+                // Play silent brief note to unlock
+                const vol = audioRef.current.volume;
+                audioRef.current.volume = 0;
+                audioRef.current.play().then(() => {
+                    audioRef.current?.pause();
+                    audioRef.current!.currentTime = 0;
+                    audioRef.current!.volume = 0.5; // Restore volume
+                }).catch((e) => {
+                    // Fail silently but RESTORE VOLUME so future plays work
+                    if (audioRef.current) audioRef.current.volume = 0.5;
+                    console.log("Audio unlock attempt:", e);
+                });
+            }
+            // Remove listeners once unlocked (or attempted)
+            window.removeEventListener('click', unlockAudio);
+            window.removeEventListener('touchstart', unlockAudio);
+            window.removeEventListener('keydown', unlockAudio);
+        };
+
+        window.addEventListener('click', unlockAudio);
+        window.addEventListener('touchstart', unlockAudio);
+        window.addEventListener('keydown', unlockAudio);
+
+        return () => {
+            window.removeEventListener('click', unlockAudio);
+            window.removeEventListener('touchstart', unlockAudio);
+            window.removeEventListener('keydown', unlockAudio);
+        }
+    }, []);
+
+    // Trigger Sound & Haptics on Change
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+
+        // Haptic Feedback (Vibration)
+        // Soft "flip" feel (8ms)
+        if (typeof navigator !== "undefined" && navigator.vibrate) {
+            navigator.vibrate(15);
+        }
+
+        // Sound Effect
+        if (audioRef.current) {
+            // "audiomass-output.mp3" - Playing from start
+            audioRef.current.pause(); // Stop previous
+            audioRef.current.volume = 0.5; // FORCE VOLUME RESTORE
+            audioRef.current.currentTime = 0;
+            const playPromise = audioRef.current.play();
+            if (playPromise !== undefined) {
+                playPromise.catch(error => {
+                    // Suppress "NotAllowedError" if user hasn't interacted yet
+                    if (error.name !== "NotAllowedError") {
+                        console.error("Audio playback failed:", error);
+                    }
+                });
+            }
+        }
+
+    }, [currentIndex]);
+
+    const getCardStyle = (index: number) => {
+        const total = displayImages.length
+        let diff = index - currentIndex
+        if (diff > total / 2) diff -= total
+        if (diff < -total / 2) diff += total
+
+        // Responsive offsets
+        const yBase = isMobile ? 85 : 140
+        const ySecond = isMobile ? 150 : 240
+        const yHidden = isMobile ? 220 : 350
+
+        if (diff === 0) {
+            return { y: 0, scale: 1, opacity: 1, zIndex: 5, rotateX: 0, filter: "brightness(1)" }
+        } else if (diff === -1) {
+            return { y: -yBase, scale: 0.85, opacity: 0.4, zIndex: 4, rotateX: 5, filter: "brightness(0.5)" }
+        } else if (diff === -2) {
+            return { y: -ySecond, scale: 0.75, opacity: 0.2, zIndex: 3, rotateX: 10, filter: "brightness(0.3)" }
+        } else if (diff === 1) {
+            return { y: yBase, scale: 0.85, opacity: 0.4, zIndex: 4, rotateX: -5, filter: "brightness(0.5)" }
+        } else if (diff === 2) {
+            return { y: ySecond, scale: 0.75, opacity: 0.2, zIndex: 3, rotateX: -10, filter: "brightness(0.3)" }
+        } else {
+            return { y: diff > 0 ? yHidden : -yHidden, scale: 0.6, opacity: 0, zIndex: 0, rotateX: diff > 0 ? -20 : 20, filter: "brightness(0)" }
+        }
+    }
+
+    const isVisible = (index: number) => {
+        const total = displayImages.length
+        let diff = index - currentIndex
+        if (diff > total / 2) diff -= total
+        if (diff < -total / 2) diff += total
+        return Math.abs(diff) <= 2
+    }
+
+    return (
+        <div ref={containerRef} className="relative flex h-full w-full items-center justify-center overflow-hidden bg-[#111111] rounded-[32px] border border-white/5 select-none pointer-events-none sm:pointer-events-auto sm:touch-none">
+            {/* Subtle ambient glow */}
+            <div className="pointer-events-none absolute inset-0">
+                <div className="absolute left-1/2 top-1/2 h-[500px] w-[500px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/[0.02] blur-3xl opacity-50" />
+            </div>
+
+            {/* Card Stack */}
+            <div className="relative flex h-[320px] sm:h-[500px] w-full max-w-[320px] items-center justify-center py-10" style={{ perspective: "1000px" }}>
+                {displayImages.length === 0 && (
+                    <div className="absolute flex flex-col items-center justify-center z-10 text-white/20">
+                        <span className="text-sm tracking-widest uppercase">No Gallery Items</span>
+                    </div>
+                )}
+                {displayImages.map((image, index) => {
+                    if (!isVisible(index)) return null
+                    const style = getCardStyle(index)
+                    const isCurrent = index === currentIndex
+
+                    // Priority load current, previous, and next images for smoothness
+                    const shouldPrioritize = Math.abs(index - currentIndex) <= 1 || (currentIndex === 0 && index === displayImages.length - 1) || (currentIndex === displayImages.length - 1 && index === 0);
+
+                    return (
+                        <motion.div
+                            key={image.id}
+                            className="absolute cursor-grab active:cursor-grabbing w-[180px] sm:w-full flex justify-center pointer-events-auto"
+                            animate={{
+                                y: style.y,
+                                scale: style.scale,
+                                opacity: style.opacity,
+                                rotateX: style.rotateX,
+                                zIndex: style.zIndex,
+                                filter: style.filter
+                            }}
+                            transition={{
+                                type: "spring",
+                                stiffness: 120,    // Slower, smoother settle
+                                damping: 20,       // Less bouncy, more controlled
+                                mass: 1.2,         // "Heavier" feel
+                            }}
+                            drag={isCurrent ? "y" : false}
+                            dragConstraints={{ top: 0, bottom: 0 }}
+                            dragElastic={0.25} // Resistance for "pulling weight" feel
+                            onDragEnd={handleDragEnd}
+                            style={{
+                                transformStyle: "preserve-3d",
+                                zIndex: style.zIndex,
+                                willChange: "transform, opacity, filter"
+                            }}
+                        >
+                            <div
+                                className="relative h-[260px] w-[180px] sm:h-[420px] sm:w-[280px] overflow-hidden rounded-3xl bg-[#1a1a1a] ring-1 ring-white/10"
+                                style={{
+                                    boxShadow: isCurrent
+                                        ? "0 30px 60px -12px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08)"
+                                        : "0 10px 20px -10px rgba(0,0,0,0.5)",
+                                }}
+                            >
+                                {/* Card inner glow */}
+                                <div className="absolute inset-0 rounded-3xl bg-gradient-to-b from-white/10 via-transparent to-transparent z-10 pointer-events-none" />
+
+                                {isVideo(image.src) ? (
+                                    <video
+                                        src={image.src}
+                                        className="w-full h-full object-cover pointer-events-none"
+                                        autoPlay
+                                        loop
+                                        muted
+                                        playsInline
+                                    />
+                                ) : (
+                                    <Image
+                                        src={image.src || "/placeholder.svg"}
+                                        alt={image.alt}
+                                        fill
+                                        className="object-cover w-full h-full pointer-events-none"
+                                        draggable={false}
+                                        priority={shouldPrioritize}
+                                        sizes="300px"
+                                        quality={90}
+                                    />
+                                )}
+
+                                {/* Bottom gradient overlay */}
+                                <div className="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-black/80 to-transparent z-10 pointer-events-none" />
+                            </div>
+                        </motion.div>
+                    )
+                })}
+            </div>
+
+            {/* Navigation dots - Optimized */}
+            <div className="absolute right-6 top-1/2 flex -translate-y-1/2 flex-col gap-2 z-20">
+                {displayImages.map((_, index) => (
+                    <button
+                        key={index}
+                        onClick={() => {
+                            // Allow instant jump
+                            setCurrentIndex(index)
+                        }}
+                        className={`transition-all duration-300 rounded-full ${index === currentIndex ? "h-8 w-1.5 bg-white shadow-[0_0_10px_rgba(255,255,255,0.5)]" : "h-1.5 w-1.5 bg-white/20 hover:bg-white/50"
+                            }`}
+                        aria-label={`Go to image ${index + 1}`}
+                    />
+                ))}
+            </div>
+        </div>
+    )
+}