apex-ui-kit 2.0.5

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

@@ -0,0 +1,125 @@
+/* eslint-disable no-unused-vars */
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { BsTwitterX } from "react-icons/bs";
+// --- ICONS (unchanged) ---
+const GitHubIcon = () => (
+    <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
+        <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77A5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.54 2.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+    </svg>
+);
+const LinkedInIcon = () => (
+    <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
+        <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
+        <rect x="2" y="9" width="4" height="12"></rect>
+        <circle cx="4" cy="4" r="2"></circle>
+    </svg>
+);
+const TwitterIcon = () => (
+    <BsTwitterX size={17} />
+);
+
+
+const FlipProfile = ({
+    name = "Iron Man",
+    role = "AI Engineer",
+    dob = "5th March, 1999",
+    avatar = "/assets/ironman.png",
+    github = "#",
+    linkedin = "#",
+    twitter = "#",
+    resumeLink = "/Iron-Man-Resume.pdf",
+    hireLink = "#",
+    bgColor = "#0F172B" 
+}) => {
+    const [isFlipped, setIsFlipped] = useState(false);
+
+    const cardVariants = {
+        flipped: { rotateY: 180 },
+        initial: { rotateY: 0 }
+    };
+
+    // Staggered animation for the back content
+    const backContentVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: { staggerChildren: 0.1, delayChildren: 0.3 }
+        }
+    };
+
+    const itemVariants = {
+        hidden: { opacity: 0, y: 20 },
+        visible: { opacity: 1, y: 0 }
+    };
+
+    return (
+        <div className="w-full flex items-center justify-center p-4 min-h-[450px]" style={{ perspective: "1200px" }}>
+            <motion.div
+                className="relative w-full max-w-sm h-[420px] cursor-pointer"
+                style={{ transformStyle: "preserve-3d" }}
+                variants={cardVariants}
+                animate={isFlipped ? "flipped" : "initial"}
+                transition={{ duration: 0.7, ease: "easeInOut" }}
+                onClick={() => setIsFlipped(!isFlipped)}
+            >
+                {/* --- FRONT OF THE CARD --- */}
+                <motion.div
+                    className="absolute w-full h-full rounded-3xl overflow-hidden shadow-2xl border border-[#B0DC3C] backdrop-blur-md flex flex-col items-center justify-center p-6 text-center text-white"
+                    style={{
+                        background: bgColor,
+                        backfaceVisibility: "hidden"
+                    }}
+                >
+                    <div className="absolute inset-0 w-full h-full border-2 border-[#B0DC3C] rounded-3xl animate-pulse pointer-events-none opacity-30"></div>
+                    <img src={avatar} alt="Avatar" className="w-32 h-32 rounded-full border-4 border-[#B0DC3C] object-cover shadow-lg shadow-fuchsia-900/50 mb-4" />
+                    <h2 className="text-3xl font-bold bg-gradient-to-r from-gray-500 to-white bg-clip-text text-transparent">{name}</h2>
+                    <p className="text-lg font-medium text-green-200/90">{role}</p>
+                    <p className="mt-4 text-xs text-gray-100">Click to flip</p>
+                </motion.div>
+
+                {/* --- BACK OF THE CARD --- */}
+                <motion.div
+                    className="absolute w-full h-full rounded-3xl overflow-hidden shadow-2xl border border-cyan-500/40 backdrop-blur-md flex flex-col items-center justify-center p-6 text-center text-white"
+                    style={{
+                        background: bgColor,
+                        backfaceVisibility: "hidden",
+                        transform: "rotateY(180deg)"
+                    }}
+                >
+                    <AnimatePresence>
+                        {isFlipped && (
+                            <motion.div
+                                className="flex flex-col items-center justify-center w-full h-full"
+                                variants={backContentVariants}
+                                initial="hidden"
+                                animate="visible"
+                                exit="hidden"
+                            >
+                                <motion.p variants={itemVariants} className="text-sm text-cyan-300">DOB: {dob}</motion.p>
+                                <motion.div variants={itemVariants} className="w-1/2 h-px bg-cyan-400/30 my-4" />
+
+                                <motion.div variants={itemVariants} className="flex gap-5 items-center justify-center text-cyan-300">
+                                    <a href={github} target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors"><GitHubIcon /></a>
+                                    <a href={linkedin} target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors"><LinkedInIcon /></a>
+                                    <a href={twitter} target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors"><TwitterIcon /></a>
+                                </motion.div>
+
+                                <motion.div variants={itemVariants} className="mt-6 flex flex-col gap-3 w-full items-center">
+                                    <motion.a whileTap={{ scale: 0.95 }} href={hireLink} className="w-full max-w-xs text-center px-6 py-2.5 bg-cyan-600/80 hover:bg-cyan-500 text-white rounded-full font-semibold shadow-lg shadow-cyan-900/40 transition-all">
+                                        Hire Me
+                                    </motion.a>
+                                    <motion.a whileTap={{ scale: 0.95 }} href={resumeLink} download className="w-full max-w-xs text-center px-6 py-2.5 bg-white/10 hover:bg-white/20 text-white rounded-full font-semibold backdrop-blur-md transition-all">
+                                        Download CV
+                                    </motion.a>
+                                </motion.div>
+                            </motion.div>
+                        )}
+                    </AnimatePresence>
+                </motion.div>
+            </motion.div>
+        </div>
+    );
+};
+
+export default FlipProfile;

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

@@ -0,0 +1,146 @@
+/* eslint-disable no-unused-vars */
+
+function cn(...classes) {
+    return classes.filter(Boolean).join(" ");
+}
+import React, { useRef } from "react";
+import { motion, useMotionValue, useSpring, useMotionTemplate } from "framer-motion";
+import bgHexa from '/assets/bg-hexa.jpg'
+export default function GlareCardDemo() {
+    return (
+        <GlareCard className="flex flex-col items-center justify-center bg-gradient-to-br from-gray-900 via-slate-800 to-[#181825] p-8 border border-slate-800 shadow-2xl relative overflow-hidden group group-hover:scale-100 transition-transform duration-300 ease-in-out">
+            {/* Background Image */}
+            <img
+                src={bgHexa}
+                alt="bg"
+                className="absolute inset-0 w-full h-full object-cover opacity-30 pointer-events-none select-none z-0"
+                draggable="false"
+            />
+            <div className="flex items-center justify-center w-20 h-20 rounded-md bg-gradient-to-br from-[#23233a] to-[#181825] border-2 border-[#a855f7]/60 shadow-xl mb-4 z-10 group">
+                <span className="text-5xl font-extrabold text-[#a855f7] drop-shadow-[0_2px_12px_#a855f7aa]">A</span>
+            </div>
+            <p className="text-slate-200 font-extrabold text-2xl mt-2 tracking-wide z-10">ApexUI</p>
+        </GlareCard>
+    );
+}
+
+export function GlareCard({
+    children,
+    className = "",
+    backgroundImage = bgHexa,
+    foilSvg = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='26' height='26' fill='white'%3E%3Cpath d='M10 90 L40 10 L60 10 L90 90 L70 90 L62 70 H38 L30 90 Z M45 50 H55 L50 30 Z' fill='white'/%3E%3C/svg%3E")`
+}) {
+    const refElement = useRef(null);
+    // Framer Motion values
+    const glareX = useMotionValue(50);
+    const glareY = useMotionValue(50);
+    const bgX = useMotionValue(50);
+    const bgY = useMotionValue(50);
+    const rX = useMotionValue(0);
+    const rY = useMotionValue(0);
+    // Springs for smoothness
+    const springConfig = { stiffness: 120, damping: 18 };
+    const sGlareX = useSpring(glareX, springConfig);
+    const sGlareY = useSpring(glareY, springConfig);
+    const sBgX = useSpring(bgX, springConfig);
+    const sBgY = useSpring(bgY, springConfig);
+    const sRX = useSpring(rX, springConfig);
+    const sRY = useSpring(rY, springConfig);
+
+    // CSS variable template
+    const style = {
+        "--m-x": useMotionTemplate`${sGlareX}%`,
+        "--m-y": useMotionTemplate`${sGlareY}%`,
+        "--r-x": useMotionTemplate`${sRX}deg`,
+        "--r-y": useMotionTemplate`${sRY}deg`,
+        "--bg-x": useMotionTemplate`${sBgX}%`,
+        "--bg-y": useMotionTemplate`${sBgY}%`,
+        "--duration": "300ms",
+        "--foil-size": "100%",
+        "--opacity": "0",
+        "--radius": "10px",
+        "--easing": "ease",
+        "--transition": "var(--duration) var(--easing)"
+    };
+    const backgroundStyle = {
+        "--step": "5%",
+        "--foil-svg": foilSvg,
+        "--pattern": "var(--foil-svg) center/100% no-repeat",
+        "--rainbow":
+            "repeating-linear-gradient( 0deg,rgb(255,119,115) calc(var(--step) * 1),rgba(255,237,95,1) calc(var(--step) * 2),rgba(168,255,95,1) calc(var(--step) * 3),rgba(131,255,247,1) calc(var(--step) * 4),rgba(120,148,255,1) calc(var(--step) * 5),rgb(216,117,255) calc(var(--step) * 6),rgb(255,119,115) calc(var(--step) * 7) ) 0% var(--bg-y)/200% 700% no-repeat",
+        "--diagonal":
+            "repeating-linear-gradient( 128deg,#0e152e 0%,hsl(180,10%,60%) 3.8%,hsl(180,10%,60%) 4.5%,hsl(180,10%,60%) 5.2%,#0e152e 10%,#0e152e 12% ) var(--bg-x) var(--bg-y)/300% no-repeat",
+        "--shade":
+            "radial-gradient( farthest-corner circle at var(--m-x) var(--m-y),rgba(255,255,255,0.1) 12%,rgba(255,255,255,0.15) 20%,rgba(255,255,255,0.25) 120% ) var(--bg-x) var(--bg-y)/300% no-repeat",
+        backgroundBlendMode: "hue, hue, hue, overlay",
+    };
+
+    return (
+        <motion.div
+            style={style}
+            className="relative isolate [contain:layout_style] [perspective:600px] transition-transform duration-[var(--duration)] ease-[var(--easing)] delay-[var(--delay)] will-change-transform w-[320px] [aspect-ratio:17/21]"
+            ref={refElement}
+            onPointerMove={(event) => {
+                const rotateFactor = 0.4;
+                const rect = event.currentTarget.getBoundingClientRect();
+                const position = {
+                    x: event.clientX - rect.left,
+                    y: event.clientY - rect.top,
+                };
+                const percentage = {
+                    x: (100 / rect.width) * position.x,
+                    y: (100 / rect.height) * position.y,
+                };
+                const delta = {
+                    x: percentage.x - 50,
+                    y: percentage.y - 50,
+                };
+                bgX.set(50 + percentage.x / 4 - 12.5);
+                bgY.set(50 + percentage.y / 3 - 16.67);
+                rX.set(-(delta.x / 3.5) * rotateFactor);
+                rY.set(delta.y / 2 * rotateFactor);
+                glareX.set(percentage.x);
+                glareY.set(percentage.y);
+            }}
+            onPointerEnter={() => {
+                if (refElement.current) {
+                    setTimeout(() => {
+                        refElement.current?.style.setProperty("--duration", "0s");
+                    }, 300);
+                }
+            }}
+            onPointerLeave={() => {
+                if (refElement.current) {
+                    refElement.current.style.removeProperty("--duration");
+                    rX.set(0);
+                    rY.set(0);
+                }
+            }}
+        >
+            <div
+                className="h-full grid will-change-transform origin-center transition-transform duration-[var(--duration)] ease-[var(--easing)] delay-[var(--delay)] [transform:rotateY(var(--r-x))_rotateX(var(--r-y))] rounded-[var(--radius)] border border-slate-800 hover:[--opacity:0.6] hover:[--duration:200ms] hover:[--easing:linear] hover:filter-none overflow-hidden"
+            >
+                <div
+                    className="w-full h-full grid [grid-area:1/1] mix-blend-soft-light [clip-path:inset(0_0_0_0_round_var(--radius))]">
+                    <div className={cn("h-full w-full bg-slate-950", className)}>
+                        {/* Background Image Layer (if provided) */}
+                        {backgroundImage && (
+                            <img
+                                src={backgroundImage}
+                                alt="bg"
+                                className="absolute inset-0 w-full h-full object-cover opacity-30 pointer-events-none select-none z-0"
+                                draggable="false"
+                            />
+                        )}
+                        {children}
+                    </div>
+                </div>
+                <div
+                    className="w-full h-full grid [grid-area:1/1] mix-blend-soft-light [clip-path:inset(0_0_1px_0_round_var(--radius))] opacity-[var(--opacity)] transition-opacity transition-background duration-[var(--duration)] ease-[var(--easing)] delay-[var(--delay)] will-change-background [background:radial-gradient(farthest-corner_circle_at_var(--m-x)_var(--m-y),_rgba(255,255,255,0.8)_10%,_rgba(255,255,255,0.65)_20%,_rgba(255,255,255,0)_90%)]" />
+                <div
+                    className="w-full h-full grid [grid-area:1/1] mix-blend-color-dodge opacity-[var(--opacity)] will-change-background transition-opacity [clip-path:inset(0_0_1px_0_round_var(--radius))] [background-blend-mode:hue_hue_hue_overlay] [background:var(--pattern),_var(--rainbow),_var(--diagonal),_var(--shade)] relative after:content-[''] after:grid-area-[inherit] after:bg-repeat-[inherit] after:bg-attachment-[inherit] after:bg-origin-[inherit] after:bg-clip-[inherit] after:bg-[inherit] after:mix-blend-exclusion after:[background-size:var(--foil-size),_200%_400%,_800%,_200%] after:[background-position:center,_0%_var(--bg-y),_calc(var(--bg-x)*_-1)_calc(var(--bg-y)*_-1),_var(--bg-x)_var(--bg-y)] after:[background-blend-mode:soft-light,_hue,_hard-light]"
+                    style={{ ...backgroundStyle }} />
+            </div>
+        </motion.div>
+    );
+}

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

@@ -0,0 +1,111 @@
+/* eslint-disable no-unused-vars */
+import React, { useState, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { FaExternalLinkAlt, FaGithub, FaRegImage } from "react-icons/fa";
+const CARD_STACK_OFFSET = 32; 
+const CARD_SCALE_STEP = 0.08; 
+const AUTO_CYCLE_INTERVAL = 5000;
+export default function GlassCardStack({
+    cards = [],
+    autoCycle = true,
+    cycleInterval = AUTO_CYCLE_INTERVAL,
+}) {
+    const [active, setActive] = useState(0);
+    const [paused, setPaused] = useState(false);
+    const timeoutRef = useRef();
+
+    useEffect(() => {
+        if (!autoCycle || paused) return;
+        timeoutRef.current = setTimeout(() => {
+            setActive((prev) => (prev + 1) % cards.length);
+        }, cycleInterval);
+        return () => clearTimeout(timeoutRef.current);
+    }, [active, paused, autoCycle, cycleInterval, cards.length]);
+
+    // For cycling animation
+    const getCardIndex = (i) => (active + i) % cards.length;
+
+    return (
+        <div
+            className="relative flex justify-center items-center h-[340px] md:h-[400px] w-full max-w-lg mx-auto select-none"
+            onMouseEnter={() => setPaused(true)}
+            onMouseLeave={() => setPaused(false)}
+        >
+            {cards.map((_, i) => {
+                // Stack order: 0 is top, 1 is next, etc.
+                const idx = getCardIndex(i);
+                const isTop = i === 0;
+                const z = cards.length - i;
+                const offset = i * CARD_STACK_OFFSET;
+                const scale = 1 - i * CARD_SCALE_STEP;
+                const card = cards[idx];
+                return (
+                    <AnimatePresence key={idx}>
+                        <motion.div
+                            key={idx}
+                            initial={{
+                                y: 60,
+                                opacity: 0,
+                                scale: scale * 0.95,
+                            }}
+                            animate={{
+                                y: -offset,
+                                opacity: 1,
+                                scale,
+                                zIndex: z,
+                                filter: isTop ? "none" : "blur(2px)",
+                            }}
+                            exit={{
+                                y: -100,
+                                opacity: 0,
+                                scale: scale * 0.95,
+                            }}
+                            transition={{ type: "spring", stiffness: 300, damping: 30 }}
+                            className={`absolute left-0 right-0 mx-auto w-11/12 md:w-96 h-48 md:h-60 rounded-3xl shadow-xl bg-gradient-to-br ${card.color} backdrop-blur-lg border border-white/20 flex flex-row items-center px-3 md:px-6 py-4 cursor-pointer select-none ${isTop ? "" : "pointer-events-none"}`}
+                            style={{ zIndex: z }}
+                        >
+                            {/* Left: Responsive Image */}
+                            <div className="flex-shrink-0 flex items-center justify-center w-16 h-16 md:w-24 md:h-24 lg:w-28 lg:h-28 rounded-xl overflow-hidden bg-white/10 border border-white/20 mr-3 md:mr-6">
+                                {card.image ? (
+                                    <img
+                                        src={card.image}
+                                        alt={card.title}
+                                        className="object-cover w-full h-full"
+                                    />
+                                ) : (
+                                    <FaRegImage className="text-3xl text-white/40" />
+                                )}
+                            </div>
+                            {/* Right: Info */}
+                            <div className="flex-1 flex flex-col justify-center gap-1 md:gap-2">
+                                <div className="flex items-center gap-2">
+                                    <h2 className="text-base md:text-xl font-bold text-white drop-shadow">
+                                        {card.title}
+                                    </h2>
+                                    {card.github && (
+                                        <a href={card.github} target="_blank" rel="noopener noreferrer" className="text-white/70 hover:text-white ml-1">
+                                            <FaGithub className="inline-block align-middle text-lg md:text-xl" />
+                                        </a>
+                                    )}
+                                </div>
+                                <p className="text-xs md:text-sm text-white/60 mb-1">{card.subtitle}</p>
+                                <p className="text-xs md:text-base text-white/80 mb-1 line-clamp-2">{card.desc}</p>
+                                {card.link && (
+                                    <a
+                                        href={card.link}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="inline-flex items-center gap-1 text-xs md:text-sm px-2 py-1 rounded bg-blue-500/80 hover:bg-blue-600/90 text-white font-semibold shadow transition w-fit mt-1"
+                                    >
+                                        <FaExternalLinkAlt className="inline-block mr-1 text-xs md:text-sm" />
+                                        Visit
+                                    </a>
+                                )}
+                            </div>
+                        </motion.div>
+                    </AnimatePresence>
+                );
+            })}
+        </div>
+    );
+}