abhishek-portfolio-template 1.0.0

package/template/src/components/ui/social-stories.tsx

@@ -0,0 +1,394 @@
+"use client"
+
+import { useState, useEffect, useCallback, useRef } from "react"
+import { createPortal } from "react-dom"
+import { motion, AnimatePresence } from "framer-motion"
+import { ArrowUpRight, X, Loader2 } from "lucide-react"
+import Image from "next/image"
+import { supabase } from "@/lib/supabase"
+import { cn } from "@/lib/utils"
+
+export type SocialPlatform = "linkedin" | "instagram"
+
+export interface Story {
+    id: string
+    platform: SocialPlatform
+    mediaUrl: string
+    linkUrl: string
+    duration?: number // duration in seconds
+    date?: string
+    caption?: string
+}
+
+const PROFILE = {
+    name: "Abhishek Singh",
+    avatarUrl: "https://res.cloudinary.com/dap0u41dz/image/upload/v1766771167/file_00000000d51472078b7e2f9d883a6674_majhmb.jpg",
+}
+
+export function SocialStories({ id = "default" }: { id?: string }) {
+    const [stories, setStories] = useState<Story[]>([])
+    const [isOpen, setIsOpen] = useState(false)
+    const [currentIndex, setCurrentIndex] = useState(0)
+    const [isPaused, setIsPaused] = useState(false)
+    const [isMediaLoaded, setIsMediaLoaded] = useState(false)
+    const [mounted, setMounted] = useState(false)
+    const [dynamicDuration, setDynamicDuration] = useState<number | null>(null)
+    const [isFetchLoading, setIsFetchLoading] = useState(true)
+
+    // Timing refs for high-performance animation
+    const startTimeRef = useRef<number | null>(null)
+    const pausedAtRef = useRef<number | null>(null)
+    const rafRef = useRef<number | null>(null)
+    const lastTimeRef = useRef<number>(Date.now())
+    const progressRef = useRef(0)
+
+    // Direct DOM manipulation ref for performance
+    const activeProgressBarRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        setMounted(true)
+        fetchStories()
+    }, [])
+
+    const fetchStories = async () => {
+        setIsFetchLoading(true)
+        try {
+            const { data } = await supabase
+                .from("social_stories")
+                .select("*")
+                .order("display_order", { ascending: true })
+
+            if (data) {
+                setStories(data.map(s => ({
+                    id: s.id,
+                    platform: s.platform as SocialPlatform,
+                    mediaUrl: s.media_url,
+                    linkUrl: s.link_url,
+                    caption: s.caption,
+                    duration: 5
+                })))
+            }
+        } finally {
+            setIsFetchLoading(false)
+        }
+    }
+
+    const currentStory = stories[currentIndex]
+
+    // Priority: Dynamic (video detected) > DB provided > Default (5s)
+    const defaultDuration = 5
+    const durationMs = dynamicDuration ?? (currentStory?.duration ?? defaultDuration) * 1000
+
+    const stopAnimation = () => {
+        if (rafRef.current) {
+            cancelAnimationFrame(rafRef.current)
+            rafRef.current = null
+        }
+    }
+
+    const resetTiming = () => {
+        startTimeRef.current = null
+        // pausedAtRef.current = null // Not used in current draft but good to reset if added back
+        setIsMediaLoaded(false)
+        if (activeProgressBarRef.current) {
+            activeProgressBarRef.current.style.width = "0%"
+        }
+        progressRef.current = 0
+    }
+
+    const isVideoUrl = (url: string) => {
+        return url.match(/\.(mp4|webm|ogg|mov|m4v)$|^https?:\/\/res\.cloudinary\.com\/.*\/video\/upload\//i);
+    };
+
+    const goToNext = useCallback(() => {
+        stopAnimation()
+        resetTiming()
+        setDynamicDuration(null)
+
+        if (currentIndex < stories.length - 1) {
+            setCurrentIndex(i => i + 1)
+        } else {
+            setIsOpen(false)
+            setCurrentIndex(0)
+        }
+    }, [currentIndex, stories.length])
+
+    const goToPrev = useCallback(() => {
+        if (currentIndex === 0) return
+        stopAnimation()
+        resetTiming()
+        setDynamicDuration(null)
+        setCurrentIndex(i => i - 1)
+    }, [currentIndex])
+
+    useEffect(() => {
+        // Reset timing when index changes
+        lastTimeRef.current = Date.now()
+        progressRef.current = 0
+    }, [currentIndex])
+
+    useEffect(() => {
+        if (!isOpen || !currentStory) return
+
+        let animationFrameId: number
+
+        const animate = () => {
+            if (!isPaused && isMediaLoaded) {
+                const now = Date.now()
+                // Limit delta to prevent huge jumps if tab was inactive
+                const delta = Math.min(now - lastTimeRef.current, 100)
+                lastTimeRef.current = now
+
+                progressRef.current += delta
+                const progressPercent = Math.min((progressRef.current / durationMs) * 100, 100)
+
+                if (activeProgressBarRef.current) {
+                    activeProgressBarRef.current.style.width = `${progressPercent}%`
+                }
+
+                if (progressRef.current >= durationMs) {
+                    goToNext()
+                }
+            } else {
+                lastTimeRef.current = Date.now()
+            }
+
+            animationFrameId = requestAnimationFrame(animate)
+        }
+
+        animationFrameId = requestAnimationFrame(animate)
+
+        return () => {
+            cancelAnimationFrame(animationFrameId)
+        }
+    }, [isPaused, durationMs, goToNext, isOpen, currentIndex, isMediaLoaded, currentStory])
+
+    const handleTap = (e: React.MouseEvent<HTMLDivElement>) => {
+        if ((e.target as HTMLElement).closest('button')) {
+            return
+        }
+
+        const width = e.currentTarget.offsetWidth
+        const x = e.nativeEvent.offsetX
+
+        if (x < width / 3) {
+            goToPrev()
+        } else {
+            goToNext()
+        }
+    }
+
+    const toggleOpen = () => {
+        if (stories.length > 0) {
+            setIsOpen(!isOpen)
+        }
+    }
+
+    if (!mounted) return null
+    // removed early return to show trigger immediately
+
+    const isCurrentVideo = currentStory ? isVideoUrl(currentStory.mediaUrl) : false;
+
+    return (
+        <>
+            {/* Trigger in Navbar - Gold Border Ring */}
+            <div className="w-full h-full relative flex items-center justify-center z-50 group">
+                <AnimatePresence>
+                    {!isOpen && (
+                        <motion.div
+                            // Removed layoutId to prevent visibility conflics
+                            key="trigger"
+                            className={cn(
+                                "absolute inset-0 cursor-pointer rounded-full overflow-hidden transition-all duration-300",
+                                // Gold border integration
+                                "border-[1.5px]",
+                                isFetchLoading
+                                    ? "border-white/10 opacity-50 grayscale"
+                                    : "border-[#007AFF] hover:border-[#007AFF] opacity-100 grayscale-0 shadow-[0_0_10px_rgba(0,122,255,0.3)]"
+                            )}
+                            onClick={() => !isFetchLoading && stories.length > 0 && setIsOpen(true)}
+                            initial={{ opacity: 0, scale: 0.8 }}
+                            animate={{ opacity: 1, scale: 1 }}
+                            exit={{ opacity: 0, scale: 0.8 }}
+                            transition={{ duration: 0.2 }}
+                        >
+                            <Image
+                                src={PROFILE.avatarUrl}
+                                alt={PROFILE.name}
+                                fill
+                                className="object-cover p-[2px] rounded-full" // Slight padding inside border
+                                priority
+                            />
+
+                            {/* Loading / Active Pulse Overlay */}
+                            {isFetchLoading && (
+                                <motion.div
+                                    className="absolute inset-0 bg-white/10"
+                                    animate={{ opacity: [0, 0.2, 0] }}
+                                    transition={{ duration: 1.5, repeat: Infinity }}
+                                />
+                            )}
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </div>
+
+            {/* Portal for Expanded View */}
+            {createPortal(
+                <AnimatePresence>
+                    {isOpen && (
+                        <div className="fixed inset-0 z-[100] flex items-center justify-center">
+                            {/* Backdrop */}
+                            <motion.div
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                exit={{ opacity: 0 }}
+                                className="absolute inset-0 bg-black/80 backdrop-blur-md"
+                                onClick={() => setIsOpen(false)}
+                            />
+
+                            {/* Card - Responsive Size */}
+                            <motion.div
+                                key="card"
+                                initial={{ opacity: 0, scale: 0.9, y: 20 }}
+                                animate={{ opacity: 1, scale: 1, y: 0 }}
+                                exit={{ opacity: 0, scale: 0.9, y: 20 }}
+                                transition={{ type: "spring", damping: 25, stiffness: 300 }}
+                                className="relative w-[90vw] h-[65vh] md:w-[380px] md:h-[650px] bg-black rounded-[32px] overflow-hidden shadow-2xl z-10"
+                                drag="y"
+                                dragConstraints={{ top: 0, bottom: 0 }}
+                                onDragEnd={(e, { offset, velocity }) => {
+                                    if (offset.y > 100 || velocity.y > 500) {
+                                        setIsOpen(false)
+                                    }
+                                }}
+                            >
+                                <div className="absolute inset-0 w-full h-full"
+                                    onMouseEnter={() => setIsPaused(true)}
+                                    onMouseLeave={() => setIsPaused(false)}
+                                    onMouseDown={() => setIsPaused(true)}
+                                    onMouseUp={(e) => {
+                                        setIsPaused(false)
+                                        handleTap(e)
+                                    }}
+                                    onTouchStart={() => setIsPaused(true)}
+                                    onTouchEnd={() => setIsPaused(false)}
+                                >
+                                    {/* Loading State Spinner */}
+                                    {!isMediaLoaded && (
+                                        <div className="absolute inset-0 z-20 flex items-center justify-center bg-black/20">
+                                            <Loader2 className="w-8 h-8 text-white/50 animate-spin" />
+                                        </div>
+                                    )}
+
+                                    {/* Background Media */}
+                                    <AnimatePresence mode="wait">
+                                        <motion.div
+                                            key={currentStory.id}
+                                            initial={{ opacity: 0.6, scale: 1.05 }}
+                                            animate={{ opacity: 1, scale: 1 }}
+                                            exit={{ opacity: 0.6 }}
+                                            transition={{ duration: 0.3 }}
+                                            className="absolute inset-0 z-0"
+                                        >
+                                            {isCurrentVideo ? (
+                                                <video
+                                                    src={currentStory.mediaUrl}
+                                                    autoPlay
+                                                    playsInline
+                                                    loop
+                                                    className="w-full h-full object-contain"
+                                                    onLoadedData={(e) => {
+                                                        const video = e.currentTarget;
+                                                        setDynamicDuration(video.duration * 1000);
+                                                        setIsMediaLoaded(true);
+                                                    }}
+                                                />
+                                            ) : (
+                                                <Image
+                                                    src={currentStory.mediaUrl}
+                                                    alt={currentStory.caption || "Story"}
+                                                    fill
+                                                    className="object-cover"
+                                                    priority
+                                                    onLoad={() => setIsMediaLoaded(true)}
+                                                />
+                                            )}
+                                            <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-black/80 pointer-events-none" />
+                                        </motion.div>
+                                    </AnimatePresence>
+
+                                    {/* Content Overlay */}
+                                    <div className="absolute inset-0 z-10 flex flex-col p-5 pointer-events-none">
+                                        {/* Progress Bars */}
+                                        <div className="flex gap-1.5 mb-4">
+                                            {stories.map((story, idx) => (
+                                                <div key={story.id} className="h-0.5 flex-1 bg-white/30 rounded-full overflow-hidden backdrop-blur-sm">
+                                                    <div
+                                                        ref={idx === currentIndex ? activeProgressBarRef : null}
+                                                        className="h-full bg-white shadow-[0_0_10px_rgba(255,255,255,0.5)] transition-all duration-100 ease-linear rounded-full"
+                                                        style={{
+                                                            width: idx < currentIndex ? "100%" : "0%"
+                                                        }}
+                                                    />
+                                                </div>
+                                            ))}
+                                        </div>
+
+                                        {/* Header */}
+                                        <div className="flex items-center justify-between pointer-events-auto">
+                                            <div className="flex items-center gap-2.5">
+                                                <div className="w-8 h-8 rounded-full border border-white/20 overflow-hidden relative">
+                                                    <Image src={PROFILE.avatarUrl} alt={PROFILE.name} fill className="object-cover" />
+                                                </div>
+                                                <div className="flex flex-col">
+                                                    <span className="text-white font-semibold text-xs leading-none">{PROFILE.name}</span>
+                                                    <span className="text-white/60 text-[10px] leading-none mt-0.5">
+                                                        {currentStory.platform === 'linkedin' ? 'via LinkedIn' : 'via Instagram'}
+                                                    </span>
+                                                </div>
+                                            </div>
+
+                                            {/* Toggle Close Button */}
+                                            <button
+                                                onClick={(e) => {
+                                                    e.stopPropagation()
+                                                    setIsOpen(false)
+                                                }}
+                                                aria-label="Close Story"
+                                                className="w-8 h-8 flex items-center justify-center rounded-full bg-black/20 backdrop-blur-md text-white/80 hover:bg-black/40 hover:text-white transition-colors"
+                                            >
+                                                <X className="w-4 h-4" />
+                                            </button>
+                                        </div>
+
+                                        <div className="flex-1" />
+
+                                        {/* Footer */}
+                                        <div className="flex items-end justify-between gap-4 pb-1 pointer-events-auto">
+                                            <p className="text-white/90 text-sm font-medium line-clamp-3 drop-shadow-md flex-1">
+                                                {currentStory.caption}
+                                            </p>
+
+                                            <a
+                                                href={currentStory.linkUrl}
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                aria-label="Visit Story Link"
+                                                className="w-12 h-12 flex-shrink-0 flex items-center justify-center rounded-full bg-white text-black hover:scale-110 active:scale-95 transition-all shadow-lg group/btn"
+                                                onClick={(e) => e.stopPropagation()}
+                                            >
+                                                <ArrowUpRight className="w-5 h-5 group-hover/btn:rotate-45 transition-transform duration-300" strokeWidth={2.5} />
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </motion.div>
+                        </div>
+                    )}
+                </AnimatePresence>,
+                document.body
+            )}
+        </>
+    )
+}

package/template/src/components/ui/sound-constants.ts

@@ -0,0 +1 @@
+export const PAPER_SOUND_BASE64 = 'data:audio/mp3;base64,//vQBAAABbhfy60xIAK2q/l1piQAWumNT7msAAtasan3NYABADAAAAULRDAmBMD4jiWIhMMFiw4MDAwBMExWKydG3PznP0ogQMT9QhDLRigUIIf/+fggFAoFCCKBAxD+a5GCAoJGIf0QAmG3kAIAAAwGMQMJkYrFZPqgrFaNHOf9wsjC4JgmGyef/mujRo9uaMjFYrFZPq7e+5o0aNBDFyMLgmGydAgQIEEMtdAgYzzmjFYGAQDBIxCEII0bc5znNtBAzgABh4eHh7AAAAG44eHv4AADvzDz/+AIACAABB0ZHMEwJg3EsnkwwPFiwwMDAmAmCYrJ25+oI0aOdQQIGG57UIZa4oQMQ/v+ewQCgUCgkigQQ85zRisEAwKEEP4EAJht5ACAAAMBjEDFkYrFaPVBWKxWjbn/cIowuCYJisnn9uaNGTo555oxWKxWT7OdQy5o22IWuKwTBMNk6BAgQMQ9o0CBjPc0YrAwCAYJGIQhBGjbnOc5toIGcAAMPDw8PYAAAA3HDw9/AAAd+Yef/wBHA4HA4HA4HA4HA4HA4B9gKAVjnHF1B0N6z1fSUgf8cMH0y5/Osfc1r3ed3uxJWDMjeHXbmuY/stW8bXyIzKqbCtjbz+vbpE3WcL8f1PdguVypjZx7lju7g64NQHCRVBTWYL6qzFip9n7PK1TtmnVWU0UmOHQGIxBc5nKhw/CmprkzPRupjehj6r+SjuNOTFSCTSS4LIAUaBJLynluFJytcr0dbWdJGrWXZ6VWoct2sFILLZIrazVoMMWnHYg112IbYspplTf3KY/XP/6lfGpcuZ6r48viis/A4HA4HA4HA4HA4HA4ATlQdU9xxdSaJ6z1bSmp+61xpzbfje627QUxu8/e+RVkzD2567hhz9bLPvG18iMyqmwrY26+q9ukTdhClj+p7sFy1SY2ce6s7u4OuDUBwkVQU1mC8qsxYqfZ+zytU7Zp1pLCKTHAhwE2QuczlQ4fhTWrkzPRupjZhjdV/JR3G2NJTiGQI0FkAKNGFBJdiuFJytcr0dbWdJGrWWc9KqaHLdrBSCy2SLRZq0GGLTjsQa67ENsWU0ypv7lMfrn/9SvjUuXM9V8eXxRWdMQU0P/70gQAAgYaZdBfZeAAvAy6HOwwABk1lz6MGYBDJDLn5YMwIAo0mmlAISfIqlNHH7xoLUqtQ92nfqZsxk3W3K5Uar+IywzOc6jy6xCTjg7nnZ2xD04hKe8V4cTxOKNwkw/Vs/t6ZvN35zqBzncT2bnniyTuGMb7mzwFCws7+G9fPGROvfdhUaviRlcXRBRTqbrpBy02qlyw4vN6wrUS5sKoG+P14mWNZHW/McuilJ4rFHCXL0tyOcFVLEbILJBypkajdMF2CI+hRnCkzqaesNrZYbdhWp2RTN8GPHaGFzWFOyrz9icYUQOVyFpyAgQb+emJdMQPZklqVT0vpsn6u4zJDZ0qmZ/OKiITlb5P1FZosHi9X5mhA3JBZXZUsD8wSCeozF5zHNppK8sy+SzBH6IhJlku5GoyC8lstsDqVT9e2tXLDwxdm5yZmdHjIUEaojJrlxVyU9ex2n9hiVVbJYAWBmgnnZqDNeLxQVQ4MDNMVVoNh+UH0LiSqxnUw+lnji6yi5p5ykRoiR1O0MxbTYYjjAVk60/XmhybmhXPSkfnSk6PAXQmyiAHSEGkqnmIDyo4vGJtWCjISRHen4Glg/IaJFaK6GrbbWMrSED64eA8qC5FEGNDBsekaBcpid9OhF1QWH0vmB2eiWXT8elsSy6UezhglCcyWzJDMDVE0ZoZLNCLJyWwZBMeh0qKZSIy8czhWtOUFKXh1PiQPa0+BooXHrwjAyPE9BgelMwJQigYWH64fhsCJ8B6wjiEPJfQR/QjsqFos3VJweLEA4mSI3MF752VbrChDHKxITshOBU8Hg4D4Sjg0uwXF6o/RDwyhAAAAB0hBpKrWKCOCrhBR7h6cghE3r5aw+hii+Jspj+22cMusCePA4B5UFx9EGyGIx6MoFymJ306EXVBYfZjMDs9Esun5WQ4llzkezhglCcyWzJDMDVE0ZoZLNCLJyWwZBMeh0qKZSIy8czhWtOUaUvDqfEge1p8DRQuPXhGBkeJ6DA9KZgShFAwsP1w/DAET4D1hHEIeS+gj+hHZULRZuqTg8WIBxMkRuYL3zsq3WFCGOViQnZCcCp4PBwHwlHBYuwXF6o/RJiCmooGABIQAAgAAAAA//vSBAABBitl0XHvYDDB7Lo/PewMGCWZRQexgAMssuhg97J4A5VlFEI8EAEBhLwfVmRNZZ45JzgQDw89OK0MHAfUlNYuPTFWi6w9HEBq7DQiLYzkiqlwj3EcGwkEQnB/DD5ongMrxJ06Ye34LRoYNS0Hi81J6Q/HU/w9IJD0mLH2ExxZMcMRtobZ4cIQ9JywYOnSsEykHlSHa56JBHeKw+ME6wOh2IdSQcSySDtypUXHwiD0SYk5TNFC5U/I8GZLH8qF5WdQIaKKz0ZWjbhhAxU6PUZocJ3JOpxdyeq4lHY0ImV5m+z7xMRAcw7syGcAQIAIMU8E1ZkaIJ1kHLmbhBBmNS2pyZt4oFbpTIRbOYhvF1isVICKpQ6GjMZygHy4n+O4jEg0Ph32Hx8TsGV4i+nTCtfB8cIimw+L1J+kfLKvCyPIrqOh4+kLxxY6OGI20NtYsQisnPDiJMrBuhDppD+56YG7R0PjBOwUj2JdSQkmpw25U4ePiYViTzaGaONKn5LhmZlsqJla6CGLrPRnXtwwh5U6PY1Bw3STqcXcnq0dHZARMrzt9mXjCIuAEBCrU4wf0l3WCQbJDwzEdoqCAeAaHg4OOFYjg3EdFC8eMvvZBVMWCUWiwRU546cNIiAyIxPXISRSswuHJbaK1Dkj0iE61zazJSJYiLG31JATlUKR9KZ6PIlFpXwhD8SRJUTC4hLTwxM2kJfAEMZxZwtl0SjQi6y6NRgbGKIcB2KZaJxkmNVC5oQh2Pl+IBebRty2bjmtSIyxZ5DpCqOquqVxxF5ociKQhCQUHay0/h8yXDEqlp/kSQyyP2SUTVPi4ACAAWaLSkfLHHUqsSy4ZE+dcI/C+KwylI8eSmGZZOzLcGtmQiDHjYaqtyMQ5ClQeLeyRVI3Oj0bTSOt81NjjEw2NrPZTUYWmjpMbjrUZhTB/mQnGOO6NxjRJOUqmWU7TSVTnovyFJ06XDtasYHqoTrOxLp/IUs6stELmpTmJhFbSuhcYGxiaBwIxTLROMkxFNFyYEg+LS/CgQk6NuWy2Oa04RkyypDolNjqqk1PiQi9QciSXiUgo9rMF5PmUhicnz/Ikh1kfsmRNdTEFNRQMACQgABAAAD/+9IEAAAFsGXSYelnALmsukw9LOAZhZdFZ7H5Az8y6FD3pvgOoAEAAIARqBvHm1HIcO36tZn7tcaYY5wKpO+DTbWeadQM0XcaJC8RsaETSEeCdS7a+oZ1aKdrYmZyrGJJCcKv1cjFMo0TOtdIBIBbcCE7JAx6lwYoMoh6OC2kl28MoU09CXVKyep5WlKGChPjh4go1paJDf668OrxlEdj0fnJOMVMcSVNSvvNP2cRRmxSH9I3KRkurIyktPDhKjisTHqQqzfVkuYYZsJmlWsIVS6fHlRTTNYOIg7wgSCAgBGoG8ebUhhwqo32FmfLa40wxzgVSGxZXlm8806Ujg42cokLxGxoRNIR4J1Ltr6hnVop2tiZnKsYkkJwq/VyMUyjRM610UEgFzgQnZFmPCVhig0Io9HBbSS7eFs6ml0I60rHdTytKLBIRIeOFhBRrS0SG/9b5NeMojsej85JxipjiSpqV95p+ziKM2KQ/pG5SMl1ZGUlp4cJUcViY9SFWb6slzDDNhM0q1hCqXT48qKaZrBxECoCEAABBjKRHqJN6uwqbTWvMZkQI5JGRVoSfMi4R5puR3IUyq5lOdnb3JdIDZ+ztKHJkecsY4mBKDY5CAxqelOGkSFCPTR0dB/Gf9AhHWwpDJccGJMbcKpbO6ENIJakpCS0aG5GLKoPg0BE+A+IhbVqWFp4ZiSfnZfMoy9U70MP5uur1UyKxjXZyntLI4xohfUqPmEccrizM+3uX681p3DTVy+4xyRbMSOZ2ZjTtMx1wsyRo0qFJD4ZmP9kY1Kqk6r1ckWRXPnT/Lc+nAFCBAACMpFWrnbAssKm0kzuU5LIENUMiXZTPkXCPLmzGEgnFXK0t6rb1pdGpOfs6bNJMiXa5zdTh/G0wlInXqpX5aRV5rP5uYlMZc6r01NjFmC2KJ8wIahkrifqrT+ki2HPKhx0vlhVJtZcjKMwtrEjy2I9ncYD1kU7Kj1ek1c5KaphmgbzFdPkuVCsY0maJhSyOLlEJ6eIrrcXtrWVUq9vZX6YX07hpqte0YvkWzEjmdmYz9plsoZppqxMMemiP9AXISYUitEMkgqaPI7WRPTEFNRQMACQgABAAAAAAAAAAAAAAP/70gQAAiXJZdLzD2JwuSy6XmHsThnpj0MMPZNLOTLooYY/2AAkgxEAEAGKJjvxOdlt+UW7F5vdRVmVDXrK8aoSZdumo/HqecMr9oEd8oU+qlSiFtwJguzqdiEsSUOqWaPvun5TRnB2Yr4Tkt3hTKFMjwVyqVm2U6pOiWbz5JJhkIpkv1j1y5cPAfRPGx+V9YMz7vOvjOl61rUtMapSzDFCqwu5dQ5qxVxgzVWQqsKUgzKg80Wuu8ZvFYlUlMU7qFLNj2JJMJ/fy0t6zsB48cMqDqAzj8unjYFTE/aUAApLCQAQAMUTHfic7Zvw5bwjiEpWKsymjdWvGqEk3bpqPxSszhlM2gR3yhT6qVKIW3AmC7Op2ISxJQ6pZo++6flNGcHZivhOS3eFMoUyUjsqlZtlOjKcSzefJJYXCSZL9i9cuXFRGcWQT8r6wdn3edfGdL1rWpaY1FNmGKFVhdy6hzVirjBmqshVYUpBmVB5otdd4zeKxKpKYp3UKWbHsSSYT+/lpb1nYDx44ZUHUBnH5dPGwKmJ+0oAYAAAEotGFXIEopJXylUG0zdJQ7bDHAuPW78WZA56uM0xyUSHupl2Gml11VLKMMcHMQQ3biDG+X8yUiulVGJ2+jnYP82FXZCFMPslJPS3Can6ciFq1TmQqjpgn8U6UYFcShADyP5MP0AkLrEwzJ7pk4ZXxQJaujRMYNz4fyWr9SU946LjYdlAvCS8U0M+eswuP1LJVLZMPEZ3c8M8JTEEBiMjNaOkKGfKL3fgaCHFJ9HQfCWPYyRL0c14/L6SyVmiRFradw5Hk/M3loPt2SFQLAAiDHMhkVyKRiIV60Sj9M8FI7bWHA1BcPy5pD3rozVO5FaA5VNrXkcexhUXWWoMzh9c1Hn3fd3ZLHotacumtwAy9skvyfiVNLcF0XaXbEYYh+MxN1Is/spgJv5BSS5wGaBKMxEPygOB80TCWT3SU4ZXxwzjyAwYN1xbM3/Uoe8uSXHtATEl4ptlp61Hj92pVPzxQjO/PDPCUxkByRjNaOkKGuUX9/Ghjik+joaHZXGTQ/abV0o12uIS5gxGx1mG3xFKiVer3J6UbHa9I2UxBTUUDAAkIAAQAAAAAAAA//vSBAAEBixjUuMPYnDDDGpFZexOFwmXRkyxgAMLsyjpljAAARcQAAAAMOfVSf6bhiJUkNUjwNR4nscCG2SZ+F6RBvIwk6dNM6FcrFUmzngF3bUIQ0vClXSGwYM6ED+1URVjZ4N0p40fkxe0WDI7JpiViaOxIMRCIJeScotcvDyVGSmPhZXsGxAVrzd17VayKzN6cvPpbH1cvi+NK08yw0TdSll41Ns04hfx4vH5goWuHY2XkXYC4HYmD2cuFqx0Zh4mgZQkMncfHqQ9dKRXvQkD0mQ3yWPJy+avWSTBVYKoTVDQ1Lx2PjyDwACMTp3O9NwxKpY/1JELOK6WXsY9z8JsdhdkYOs/SdlwTygVSbNOAT9tQhDSSH6ikNgwYxkCxabEVY2eBkXTxMZjovaLBOOxFMR6HUPiQYg2GkvJOUWbLwpHipBFg6nZgPw0Kz8juvabrIrM/FK8+lsWrl6KNGcpnmWFxNhSj6qIptlTCFfi4hH4kKD1QdhsfkXUJIOYnFc5cPrJjsfGsZQoSdzx7AliLh3ehwVmk9zMqpX1L1kn5qwhQqUOFTY7LDy1AEc9YpWuBw4BoyI5FKiYkE4+JRULpfPy+UB2GRcOxiWwP2EMVjiORmSRUvfDZo5WOpIS6lSo0B+qcTjNfFpLQUfl0tCTEtOCSaFEkqhHNWENQT5c1OvK0DzC0YlJfVdHJtx4fpeqpcWlpAdgfZMNMl1hwKn9NGl3RVO61u0ZHUUD82hNf9hlUurlvafqheYwkT4HD5QzhTXnSuJ+AyYPT4yhYQS8ViUpLI4kwkqbFZaSKlJy75qvfAAgAEAAhQ9ZJSuFBgIjJPH0qJCQTj4lJC6hn5TQCcGZcTjFWFbwhis5Ho7MRMurGLS1yJMnLqVLGgK2CCPQ5txaS1SPy6fGLpicGJYI5JVCWaniGYGc5ra9NBaBaPpefqujk24dEbcwmixaglCsD7Jhp0msVCp9X5XLokVTutbvHR1E9HNoSyrsYMlo+TxR+0+6heSYRhZM4fGJ4qCVedIIgG5dEZgmk4Sm0IjCcPQhGpZDkRAlNWh6WkipSUP4Hx2f+mIKaigYAEhAACAAAAAAAAAAAAAAAAAAAAAAAAD/+9IEAAJl0WXQq2xNQL9suhVt7B4XqZdFDL2Dww4y6G2WPihAAAnNFZjATLHQhiXuhAE80CHYTFaekbHU0y12Fh3zRrgfOB4u+002zkFIFUE6eIiIdlrZ4ZriiL10K4RBsQDJWehVGlO0F9DMqnY9FOEVlUugBJHxQdX5IJ2MnwTcIZtAwK5sLis8c1aiKujLoH3RVDq6Ajd9bZMk6BJyfDzS2IEX7uy8UIXitSICDq6sFGW5q2fkohR0jRn8OORvXMiIsMCMbgJyhAwaYHSQQFjxk1UIKPgoJCUnQ4kgADTmisxgJljoIYzn4djMUidSqpZ3hnwLEtOQW81gf6Pujy2OUAuBoXhSRjpcRIh2WtnhmfEYP2oToOCIJhkfnofRpTs3fQzKTsvEFkVpS+AEkqNBlfkgmWdViXxV14fDu7jZmiQvawlZJ2huRpXENa8vWEuLPVunq9I5RtcPDyZw8Oq6iw9ViQcn5uXvDtBNVlYbSk1tUkWLV+L16NasiVvNqSUmSFcv0LbBw4qogHhUQkSlVlKMR0gLB6gs1gMDkD5xkq5TXcZrONlTBwqFWH8byiVawxK9PKV8SFHLCeVBGJR4U1ZwVngpMPxcPI4LySQkpKQqlcJX24Vrq909iVLh6fBu6uTlUAd84OGIXbDYeIi8ByZBKA5s6VLEVdGlUpIjmZslfNMLBwtyhpN2JmTz0S8G/EhLh3GtjWOsKJxMYEGIYiQ+2C7MNnnD47KB+PGmZZifN7KEKj5ye0KwdkexSBgshYJQ7KCAfVODhPiVzFsnZ1C0kxg8LNQgBAnWelarG70ldeWvg2ruvw/z7S6fnKaXv9DMqVVHY0EofBkORgXzc4Ky4DpIjw6FIgHY4ipKJRSqVwKvtoa11e6TYlR0HT4N3VxfRIt7mwMDZLFjG0djpdEI/OaRhtMwWWY07bFbNMP9m2dwssPHv04e8D/sm3T868KSDh/PFngTQInw3Mi5gpVQXcy+K6PBWLuFGlnXHP9Z1Hc7RGqkdtZaKZFoOy4Jo8lgIcZTgiGarArGPC5iYZep09LCbMQGRU1TEFNRQMACQgABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/70gQAAmYcZdCrL2Nwv2y6EGXsThk1l0XMMe/C+bLo8YeyOBQAAJ2KDPdUfOGovT50VyKxeRuYuEGgWZEMC7VLCmVar07KaZ/UVDEw2V0jxXKI0SlKRkgv0OyTwwUcwvkubhWR6Hk8X6J40S4Kwuj6Ji984XxDlYdgOBmAQ4QiEE4nIatTh1GVWFdjwkRTlsXuRnCuCM35Ke2Y4yT44sQFjdzl9BXKYD9TdhE4JRIDRUKlY9kgiQ800PqAtFrp0eQrrCEdkhxkvFU6Lh8Ti3AbOTULk6q7IeOICRgd4qMURTAeHHNPOUE7FBnugqFQ1P9xosMrOtmq1HmjWZEMC7VLCmVar07KaZ/UVDEw4V0jxXKI0SlKRkZPxG0CgOj8criOHAYP0Fywp0JQNQOGBdH0TF75wviHKw7AcDMAhwhEIJxOQ1anDqMqsK7HhIinLYvcjOFcEZvyU9sxxknxxYgLO05fN1ylJdTdhasEokBY8KjYtnpxZfYsD44ei2p0eQrrCEdkhxkvFU6Lh8Ti3AbOTULk6q7IeOICRgd4qMURTAeHHNLnKAMkRgIAAgndavqfUth7Kii3yOUT/H3hqQwIsEBo6BZUW1I3EZaeMLTAvKy3iFJoyhASOvFqEB0s6DJAH0FAvDE4L5aLzpwVybYR052KQ1ERgMiuW0E7UCW4P6aciTDDasdug5fOWpY0aBH98f9voroUDOszwIc0BhxDft7DCgv+/usaWtxawWtAq1HsjazOTq14Z1Rm9gJgfZOE8hDJdfPBCzkbV5lRzkw0jLa+ksE5c3GGwsShYV5IoqMwMy5unmN/GVd3BlVUNxD/bEI4nX9G4Ia/PS6HK3yeMT+EFxqljGEMXJo3nJbiptRPWSj143R2fyZdZajqYso1qNFU6PJ0mi+HqgWxTrTdEVjey2UcFjO091BIglOr1t+4IfdVpSMWImbVvEkHMJy1mNPdXl7TOp8PoPu5v43WyX217a3oUs3uixHNWeQyKcltQtaXu5x2OSqIkA4UQaGRYY0pkQtiAhl41LTzNHjYkj88A0/NWzkrE05KRBEx44Pi7wlGa94f20RYOmyymIKaigYAEhAACAAAAAAAAAAAAAAA//vSBAACJetk0fMDYADGjKouYY8OFy2XS8SZjgMEMuj4x7NAAnSyIRAAAUEBungB1ujSoQR/YUFxOJEBtIpZcujJ4H40MlK2Q8UCesVIx5Wk4mmw9kPGg+Gs8JhYRaDYeCQOJZHAnlZYRbnxWMj4/jiLgmHElMuNEsDp0Kj4dTRxQvP6kh0eFRk6VLqJzS05jmpYvdheIvwR0VOdJFOl7d2V6F8bJ5fG32DxiEzeSFoQT9MKUi6q5QfSdQlnTY7bSUUUHxkinCGgqSuUSXCviL4kQGBqXqlxOyvgYosbb95mwDCQYCAAAAAn8UiWe+vGlT8bAcJFqxhBYHHVMbmh5C2ZrUzncyHBMvGZNolhUR0ptFme90Xow1YoFQ6gkGPY5DdVJdELU0yBnclMrkOV8LrgzFJz1PaRPk5P5JLSpVNU03v7MGlJO+itl3WvO5UxEcYc13G75x8l8Mzy2kqxP37ep1GzeeDTfgOl237kUDI1pVPTL6pmQ6BajN2KU6crTHDU0VQUPCClVI3rWk+ginev3S7TjYrFlJQ1I3tqnePKPMw3KduZsAUTSkIADBAIQhuJPhOhmmWKncUDYJog05hwJZmNS1wTjg1WIZ+ZvkN4llM5d5YtTzYfCeZFVSuMz58uJxBGuF81wt4xg8HV4Vrp04kiqhKk7yUGJu2VWGjN44UXSGAYLEp0f+oWVWWbO2l1llkIrLHcZ6H4G8e/WTJYeVgan2i0PSGPTFjOq15cXIoFx1JXQmVzBgOC1MWCYwXhKOhcfCgS0ZMLyVcUrrw9JLJ+nbRlQ1j4vrU5LXLIgGmlBAAAAAKEkn1Ctx+ryGmOV/MH4lnxpWKIkAmI4PHJ4KkhqcMoKGrB9UDc5MXYjA5bisEAVjsEqlcI6iZ0gvkpKNrVZ9WQvCSAaBKuhrVpKPC44osfnZ8lCE/MyrRcveODy6Q8QHGVy/1CzVl4kOz1nFyEmYPdQ+Q7LDuY/05XHCk+ZvfqGokrBxWmIULjJxbDCdPFqBLg5kd0eAEHpeDwsJCEZLh+eIBm+eIUKRC47KqgxEta3GcIo5ZWwldcs5MQU1FAwAJCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/+9IEAAImFWXScw9jcMWMuk5h7G4YwZVGjDH1wx+yqNGGPHgAfYEBAAAAQDDNaki+kwjkN0uP0lXCUvUayw2GyQRaUNA81EfJ2UcjZUJejWVbqVnRSZRSuRyphG5GjoxskXcQ9FIjx56q1rpDoiXgKqJUO99fmV7Ur3SckGlGKR2LIUsQ1tp3VxweBxYHCFGw0tln2rR5iNhcgrZs/FCrLBMPX9Xl8S+//OXmGF5sbDkRjM+dTlAxUCs4hCuEqJlYFTEwNjEQy+uIBbhVvaqVrS1CdNI1aMS1gOeZIqRl4y5o5HSj0PAD50AAAAACAY3r0kX0mEMWXRd3krq4SlhRrK/Vtkgk0oaBtoUZpdIC0bJ0o5BKtxldp5MopDkcqWI3Iz9DIEBdzHopDzIfNBX10czxBwFUiVCPHV+cXwSviPjgaUYOlpACliGGLTtlxw4BrAOGo2FxzLPzA+1RGwuIy2Z1FqswMD1/V5DENliFTAtbfYFpqYoBUZVFQnEo2FC+5McJcLMmIkDcxEMT1xCH+FBVabI+HZ1GTikoUDwfkGyJRSMvE7uOR0o9DwsnRIABy1frokvZRLK8iyxl1eLxtxn4jFqiv0kP2bz9RWUQupCeJA+kgokpVJbQx0tQrLoE58JNVDKounSoa1foYGieTykTR4KitpSOyHU6bW3q+VpL5sUx8MC6qVLDYqoHnJ00FRNdSwnjbksWWC4+b+F1Y3FeUOS+I4lnbDW7Q/aMDbTk7HooCOKA+TEjM0sjp5CYTwJqcqPqZMjPFncGB0njrUODeZKynOr2t43savVp+MsJUvrn/lOH65nIrX7a3q+kbYsmZIABU1frokvnB42qszdstmYVDoYPIo1hPidJypYEvATWk4jU4m085dVtaEWopn0jGzIbVwguS5YnI93PbWWJRqNeUKIUjm+cUKa6sUN7esdPdTrS+lFYvuTk8WlK0bYWKEZShitsrJDieBZ4eTk2+WK8hzb7X12daHotuhZlszyKxvjsTAqISLNMxUX0olJFZRYXj0KpJLmhpPVlcsKAWFhDkPRvNKKxsZzv2tgY3ajXCmVKTVTxvZXjgkVs5FaxnOxq9wjbTEFNRQMACQgABP/70gQAAEV6ZVThjEzwu0yqbDGMbhg5lU0n4YcDCjKppPwwqBq2CSRyrLmKMQT9gnHgkCQuSKB4ETlRwYDM7OFvIZmTyWYvrPK4EygvPHDqBXEcmUVmzCpwYOvn5+TDzYWyWfwr3nENaV9pzS8nnypV7igkD+cPHy48OCcJ1G7WL/5nU6AKEq6kT3NsQ+0eF5Yi61nVE4yhgc/7+c8NCw8OCAFNWPrkpAgilE4iQEC7NTWKKBTHI/SI2mmStC3B4mXSEQBRaJdUmkRFCcrg20AuWXaEhIAACgAGLUEcT9gSjwkExcVB8FAHOVHAkBmVzg55DMyeCYNT8wsVwboC88oZNH6IqmUVmzCpUJh6+Zn5MPNhXjmW4TNU4hrSvCxRo/J5OVKvWKBwD84Pj5cYHBOE6jbzRftlOp0AeJV2c9zbEPtOJliLtaRY6mdOXHpmY5gX6vMlTpUJBo9U5UtHCeCqRs4TH6nYaLEIcMor1g+IhdhJoHiJIqNl6YOgpUU9DSEoGgVDuPNBzjCUVUL6ogAABARYRcGmrC+p9DzMhuu/7tOypupikeRGQFMUaE9TWm0IwjqCQPAlmxkCxcWl8/FIlIIvZje0vKzE5K56YlmE/MlhaI1i0XmphTDs88p0OQagqbRuz31fcH4MVp6IqxgyELT9GcIJ0cNxZX9OTGhi7NctA7OfHfeLy8rYrijyWF5bbLkbJgvHJKeklKwyJbJNOCk2cMtRXsusiWiKvW0aRo74ei3TxW/2NwEVgSgpPywXyMJKgNYSUPSMvwoyYaVIAEBVg2waaoN1Poe9Fd13/dp2VN1MU0yIyApijQnqa02hGEdQSB4Es2MgWLi0vn4pEpBF7Mb2l5WYnJXPTEswn5ksLRGsWi81MKYdnnlOhyDUFTaN2e+r7g/BitPRFWMGQhafozhBOjhtFZ36kkk0JqmWcXQOzkcbe8Xl5WxXE/0rF5bbLn2KhmuMT0spUS0zZWlwhLzhlp1lpdZQtJp+to0jRvLiaLdPFb/Y3ARWBKEU/MCubiSXA7hJQ9Iy/6smGlUxBTUUDAAkIAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//vSBAAGRcllUzMpffC5LKqKYS++GM2RTAw9lgsZsimBh7LBeAAAhm5gzB7Ian4/DEaf6ipFDGnNZdBdKxZmSO3OuY6z5Nji0aZLIX7iDdYi5V6zcAwZXBxArCYDnyEQTURhpSY3SJtMkoGNcs0j7DSUanmEouLrpkdzDzRwVB4SMCsgQlj2r26/6Ikr4oUQXG+KoS8BoyMrQKNuXN6RsXMhWN6UNkRg/xhSkduYpEUQLv55stEsSi/DCj5VWxQFs8Fwyoch0RWOSbY0PTbDg+x1kLZ2SU60urTrUbIX4AABJKJhy88DXLUjgN2H+cqiqL4fqGXYcVrtWghuzB0DSaDZdTOrOw/KIBlL/XsbgYZXGEEYTAc+QiCaiMNKTG6RNpklAxrlmkfYaSjU8wlFxddMjuYeaOCoPCRgVkCEse1e3X/RElfFCiC43xVCXgNGRlaBRthc3pGxc2VmtKGxUSH6ECnXi5ikRRAu/nmy0SxKL8MKPlVbFAWzwXDKhyHRFY5JtjQ9NqXB9jrIWzskp1pdWnWo2Qy0T8gRoEtj1G6NG+il90eCOkQADoUT0ZgcdAGADIvg46l4EkPYnF/SBGxN+Ou4jw/8eYcoUSF4SRFp9PwzUR0hSTmZUZUt2iORzLZJLzhcJEW3uSqHi91GfhhEWEZguSI15L5O556Vy6TDmR3uGg7CQeOltbcri8qKGoD0wHGMuJ0DIDs9NToxSzNoXticMoTY9sVnCdC8lxPJTuwepjQ7Q2k7Q6WYJEXguVoaGBg7yw5/iqorUgVOjhw7PLnBcTjJ2dUe4GmWifkCM0lseo3Ro30UvujwSESAAdCiejMDjoAwAZF8HHUvAkh7E4v6QI2Jvx13EeH/jzDlCiQvCSItPp+GaiOkKSczKjKlu0RyOZbJJecLhIi29yVQ8Xuoz8MIiwjMFyRGvJfJ1HnpXLpMOZHe4aDsJB46W1tyuLyooagPTAcYy4nQMgOz01OjFLM2he2JwybNj2xWcJ0LyHieSndg9TFiFK0naHSzBIi8FytDQwMHeWHP8VVFakCp0cOHZ5c4LicZOzqj3A1MQU1FAwAJCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/+9IEAAZl+GTWawlmYsVsmqk/DGpYfY9RJ+GLixux6imGJxlxMgAAAAApqJ9LrXoyiahyPS6VV5p2Iouh+F8gEpcdfaYb7eXPa2W8REUDQGJpg46bgQBkJd+JKCPMpg6kXrUFLK8hdokIC6aSiEAA4Fw2aMOIoMMMUUULo2w2sgcm0FIL0Ix4ollxiySkQv6iy2iZeGkjBAQkjDnFT7ChGeyZjbs0ZjW+jS4oIzKgVRNbNio0iyGKaojOTIprFuQEbUXXTCiiM5NGDeCiEbifALoGg5gJzxXaHmwCiu5M4XDb56sAAAAZxAhxlgUC6OhJI5ihqYgiMDAJYmSZ3gJab6ANwvBJ2Hgpgkgv+EILzgK44IDUVVMIX2QANshIZJA81JIzG7RRVEwkFeFpg9AEHwJxHNjRESmFixRhcWF8/fEc6MESGqHBY3hXNkkHbWrp6dIPZV19c7GToFBwcnjkUSVU4wdouuo/dVKez5xUnMDtTQkrnvfr/WXdTmPgXoVl11yaTg7erFuOMMLzk0YN4KQG4nwC6BoOWCc8V2h5sAoruTOFw2+fQltVhOAWKos4VhLMS57EpW7LSAJDKJdYWK2084cIa2FAiQU0kUk9h4SmJb10FMlL10pqspiLKk5mdQ83JiUqJIUlk4sckglCV4/BUSQOlYsrWDlhM2VjgyuJJycrn4FqIyeHIaR5CkOE6zLrFRWSrPs1riVEvGBZgUCU+ZRtFurxGuU09UqZl3PWU/nYkzqKlLZ7aAPXPqYTorpFy9XjT98aPkIlRLWUxitLVjowUH75pE8oWqz5fYlV61n1dDutc/UJ8Ii1FKJQF+OOm6sghUqjvyqItiWkASGUS6wsVtp5w4Q1sKBEgppIpJ7DwlMS3roKZKXrpTVZTEWVJzM6h5uTEpUSQpLJxY5JBKErx+CokgdKxZWsHLCZsrHBlcSTk5XPwLURk8OQ0jyFIcJ1mXWKiUlWfZrwVc2HCVIwKtInyNxkPTOrxKllWa1BDcZcWZPQh6uZIOObZXFQjURE5PJE+dLExwLOQqnBShDUiIUDgbRhBxocFJOJhXIAyHJSbH1BHGNamWOhHfimIKaigYAEhAACAAAAAAAAAP/70AQAAAYmY9HJ6WcCxax6OT0s4FkZnS8kvS1LFjOl5JelqQNAAABAh2gOKUfqFFI9JuJfk80vXxyq0bsQI8XYLo3j9Q4fRzF/UcAvqkHKjGI7RXjmJURlQSGUcpzK16uDyZV0q1C8Xd1UlVU1N5oq0YJznjZygmNEYRDJEVZJUtWD5bKA3H0q5xVWE2NYh6amS+nLkx+iofGRidTcvHRXODk+jgE800+cv7y3IXH6LTJ7XF7qxuE8WqW6V+Vpzj3PU2zs0SsLn8TH0Za09KpNwSV0XLTEOjNzblYpHzRuaL/ppijIlkccDQAAAQIdoDilH6hRSPSbiX5PNL18cqtG7EBtF2C6N4/UOH0cxf1HAL6pByoxiO0V45iVEZUEhlHKcyterg8mVdKtQvF3dVJVVNTeaKtGCc542coJjRGEQyRFWSVbVg+WygNx9KucVVhNjWIempkvY5cmP0VDI+OTqbl46K5wcn0cAnmmnzl7xrchcfotMntcXusNtqFqlOw7fFpzZ7nqbZbMpWFz8CY+sZJVpJJsiS87q0xCYzUX4lIRk0WzRv2NMUZEsjjghIAAIDBU8i0hQEyrCEsaQwaq+enKTIv5Sj1HugSdHar1ncjkcqQMYW0oTIPJDYXjJ1JEAmKuIlzKI68UjSM81FEQnWCZCo+MVq3xSehWuKx1AaIUnxaIUBpDBFbNskSMlIkZKImBUdEoWIx0EhCXQNuJiFQ0ht25JVATBUuZIm0KRohOHhUjEpE2zTUvSqT0KjSzZKWeKThoKlxKieqwTEJRyJOD2US7owJiFAJiFATLNK4iTZWDphpJLFlFFSaKYaSRJZZihVECEgAAgMFTyLSFATKsISxpDBqr56cpMi/lKPUe6BJ0dqvWdyORypAxhbShMg8kNheMnUkQCYq4iXMojrxSNIzzUURCdYNIVHxitW+KT0K1xWOoDRCk+LRCgNEMEVs2yRLmSJclImBUXEoWIx0EhCXQNuJiFQ0htmXkqoTBUuZIm0KRohUMhZGGREjJVtldWk9Ck9aaEs2Slm0KbMpJuRJsRrc+LJuVgTCFAJhCgJlmlYIk2Vg6YaSSxZRRUmimGkkSWWYoVRJiCmooAAA=';

package/template/src/components/ui/text-explode.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+import { motion, useAnimationControls, Variants } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+const containerVariants: Variants = {
+    initial: {
+        opacity: 1,
+        translateY: 0,
+        transition: {
+            duration: 0.5,
+        },
+        letterSpacing: "0px",
+    },
+    shrink: {
+        // Scale might need to be adjust according to font size for better effect
+        scale: 0.8,
+        letterSpacing: "-10%",
+    },
+    jitter: {
+        x: [0, -3, 3, -3, 3, 0],
+        y: [0, -2, 2, -2, 2, 0],
+        transition: {
+            duration: 0.5,
+            times: [0, 0.2, 0.4, 0.6, 0.8, 1],
+            ease: "easeInOut",
+        },
+    },
+    explode: {
+        scale: [0.7, 0.9, 1],
+        opacity: [1, 0.7, 0],
+        letterSpacing: "0px",
+        transition: {
+            times: [0, 0.9, 1],
+        },
+    },
+    end: {
+        scale: 1,
+        letterSpacing: "0px",
+        translateY: 50,
+    },
+};
+
+const createExplosion = ({ index, total }: { index: number; total: number }) => {
+    const direction = Math.random() > Math.random() ? -1 : 1;
+
+    // Increased horizontal spread
+    const x = Math.random() * 15 * total * direction;
+
+    // Increased vertical bias and radius for a more "earned" burst
+    const radius = total * 10;
+    const angleRange = Math.PI;
+    const angle = (index / (total - 1)) * angleRange;
+    // Bias significantly upward (-Math.sin) with more force
+    const y = radius * -Math.sin(angle) * (1 + Math.random() * 2);
+
+    const rotation = Math.random() * 720 * direction; // More rotation
+
+    return {
+        translateX: [0, x * 0.6, x * 0.9, x],
+        translateY: [0, y, y * 1.1, y * 0.8, y * 0.5], // Aggressive upward arc
+        rotate: [0, rotation * 0.5, rotation * 0.9, rotation],
+        scale: [1, 1.4, 2 + Math.random(), 2.5 + Math.random() * 2],
+        opacity: [1, 0.9, 0.4, 0],
+    };
+};
+
+const characterVariants: Variants = {
+    jitter: () => ({
+        x: [0, -3 + Math.random() * 6, 3 - Math.random() * 6, 0],
+        y: [0, -2 + Math.random() * 4, 2 - Math.random() * 4, 0],
+        transition: {
+            duration: 0.5,
+            times: [0, 0.33, 0.66, 1],
+            ease: "easeInOut",
+        },
+    }),
+    shrink: {
+        scale: 1.1,
+    },
+    explode: createExplosion,
+    end: {
+        translateY: 0,
+        translateX: 0,
+        rotate: 0,
+        scale: 1,
+    },
+    initial: {
+        opacity: 1,
+    },
+};
+
+const splitText = (text: string) => String(text).split(/(?:)/u);
+
+export default function TextExplode({
+    text,
+    mode = "loop",
+    className,
+    trigger = false,
+    onComplete,
+}: {
+    text: string;
+    className?: string;
+    mode?: "loop" | "hover" | "manual";
+    trigger?: boolean;
+    onComplete?: () => void;
+}) {
+    const characters = splitText(text);
+    const controls = useAnimationControls();
+    const isPlaying = useRef(false);
+
+    const animateSequence = useCallback(async () => {
+        await controls.start("shrink", {
+            duration: 0.8,
+            ease: "easeOut",
+        });
+        // Removed jitter for a cleaner feel
+        await controls.start("explode", {
+            duration: 0.6,
+            ease: "easeOut",
+        });
+        await controls.start("end");
+        await controls.start("initial", {
+            delay: 0.2,
+            duration: 0.6,
+            ease: "easeOut",
+        });
+
+        if (mode === "loop") {
+            requestAnimationFrame(() => animateSequence());
+        } else {
+            isPlaying.current = false;
+            onComplete?.();
+        }
+    }, [mode, controls, onComplete]);
+
+    useEffect(() => {
+        if (!characters.length || mode === "hover" || mode === "manual") {
+            return;
+        }
+
+        animateSequence();
+    }, [characters.length, mode, animateSequence]);
+
+    useEffect(() => {
+        if (mode === "manual" && trigger && !isPlaying.current) {
+            isPlaying.current = true;
+            animateSequence();
+        }
+    }, [trigger, mode, animateSequence]);
+
+    return (
+        <motion.div
+            variants={containerVariants}
+            animate={controls}
+            onPointerDown={() => {
+                if (mode === "hover" && !isPlaying.current) {
+                    isPlaying.current = true;
+                    animateSequence();
+                }
+            }}
+            onMouseEnter={() => {
+                if (mode === "hover" && !isPlaying.current) {
+                    isPlaying.current = true;
+                    animateSequence();
+                }
+            }}
+            className={cn(
+                "flex items-center justify-center text-3xl tracking-normal text-foreground",
+                className,
+            )}
+        >
+            {characters.map((char, index) => (
+                <motion.span
+                    key={index}
+                    variants={characterVariants}
+                    custom={{ index, total: characters.length }}
+                    className="inline-block whitespace-pre"
+                >
+                    {char === " " ? "\u00A0" : char}
+                </motion.span>
+            ))}
+            <span className="sr-only">{text}</span>
+        </motion.div>
+    );
+}