apex-ui-kit 2.0.7 → 2.1.0

package/dist/ApexUI-Kit/templates/EdgeGlowForm/EdgeGlowFrom.jsx

@@ -2,12 +2,15 @@ import React, { useRef, useState, useEffect } from 'react';
 import gsap from 'gsap';
 
 const fields = [
-    { name: 'firstName', label: 'First Name', type: 'text' },
-    { name: 'lastName', label: 'Last Name', type: 'text' },
+    { name: 'firstName', label: 'First Name', type: 'text', half: true },
+    { name: 'lastName', label: 'Last Name', type: 'text', half: true },
     { name: 'email', label: 'Email Address', type: 'email' },
     { name: 'mobile', label: 'Mobile Number', type: 'tel' },
 ];
 
+// '#a78bfa88' + 'cc' -> '#a78bfacc'; works for #rrggbb and #rrggbbaa colours.
+const withAlpha = (hex, alpha) => `${hex.slice(0, 7)}${alpha}`;
+
 const EdgeGlowForm = ({
     GlowColor = 'violet',
     borderGlowColor = '#a78bfa88',
@@ -24,49 +27,51 @@ const EdgeGlowForm = ({
     const ballsRef = [useRef(), useRef(), useRef()];
     const checkTick = useRef();
 
-    // Mouse movement for glassy background
+    // Edge glow that follows the pointer (mouse, pen or touch)
     const [radialPos, setRadialPos] = useState({ x: 50, y: 50 });
+    const [glowing, setGlowing] = useState(false);
     const bgRef = useRef();
 
-    const handleBgMouseMove = e => {
+    const edgeColor = withAlpha(borderGlowColor, '');
+
+    const handlePointerMove = e => {
         if (!bgRef.current) return;
         const rect = bgRef.current.getBoundingClientRect();
         const x = ((e.clientX - rect.left) / rect.width) * 100;
         const y = ((e.clientY - rect.top) / rect.height) * 100;
         setRadialPos({ x, y });
+        setGlowing(true);
     };
-    const handleBgMouseLeave = () => {
+    const handlePointerLeave = () => {
         setRadialPos({ x: 50, y: 50 });
+        setGlowing(false);
     };
 
     const floatLabel = (name, up, color = null) => {
         const label = labelRefs.current[name];
         if (label) {
             gsap.to(label, {
-                top: up ? '-2px' : '23%',
-                left: '5px',
-                scale: up ? 0.85 : 1,
-                color: color ?? (up ? '#a78bfa' : '#bdbdbd'),
-                transform: 'translateY(-4%)',
+                top: up ? '6px' : '50%',
+                yPercent: up ? 0 : -50,
+                scale: up ? 0.78 : 1,
+                color: color ?? (up ? edgeColor : '#a1a1aa'),
                 fontWeight: up ? 500 : 400,
                 duration: 0.2,
-                ease: 'easeInOut',
-                zIndex: 10,
+                ease: 'power2.out',
             });
         }
     };
 
-    const showBorder = (name, show, color = '#a78bfa88') => {
-        const [top, bottom] = borderRefs.current[name] || [];
-        [top, bottom].forEach(border => {
+    const showBorder = (name, show, color = borderGlowColor) => {
+        (borderRefs.current[name] || []).forEach(border => {
             if (border) {
                 gsap.to(border, {
                     opacity: show ? 1 : 0,
-                    scaleX: show ? 1 : 0.7,
+                    scaleX: show ? 1 : 0.6,
                     background: `linear-gradient(90deg, transparent 0%, ${color} 50%, transparent 100%)`,
-                    boxShadow: `0 0 8px 0 ${color.replace('88', '33')}`,
-                    duration: 0.2,
-                    ease: show ? 'ease.out' : 'ease.in',
+                    boxShadow: `0 0 10px 1px ${color === borderGlowColor ? borderGlowShadow : withAlpha(color, '44')}`,
+                    duration: 0.25,
+                    ease: show ? 'power2.out' : 'power2.in',
                 });
             }
         });
@@ -87,31 +92,34 @@ const EdgeGlowForm = ({
     const handleChange = (e, name) => {
         const v = e.target.value;
         setValues(vals => ({ ...vals, [name]: v }));
+        if (errors[name] && v) setErrors(errs => ({ ...errs, [name]: false }));
         if (v) floatLabel(name, true);
         else if (focused !== name) floatLabel(name, false);
     };
 
     useEffect(() => {
         fields.forEach(f => {
-            const [top, bottom] = borderRefs.current[f.name] || [];
-            if (top) gsap.set(top, { opacity: 0, scaleX: 0.7 });
-            if (bottom) gsap.set(bottom, { opacity: 0, scaleX: 0.7 });
+            (borderRefs.current[f.name] || []).forEach(border => border && gsap.set(border, { opacity: 0, scaleX: 0.6 }));
             if (labelRefs.current[f.name]) gsap.set(labelRefs.current[f.name], {
-                top: '23%',
-                left: '5px',
+                top: '50%',
+                yPercent: -50,
                 scale: 1,
-                color: '#bdbdbd',
-                transform: 'translateY(-4%)',
-                fontWeight: 400,
-                position: 'absolute',
-                pointerEvents: 'none',
-                backgroundColor: '',
-                padding: '0 4px',
-                zIndex: 10,
+                color: '#a1a1aa',
+                transformOrigin: 'left center',
             });
         });
     }, []);
 
+    // Re-colour open borders and labels when the edge colour prop changes.
+    useEffect(() => {
+        fields.forEach(f => {
+            const up = focused === f.name || values[f.name];
+            if (up && !errors[f.name]) floatLabel(f.name, true);
+            if (focused === f.name) showBorder(f.name, true);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [borderGlowColor, borderGlowShadow]);
+
     const handleCheckbox = () => {
         setChecked(v => {
             const next = !v;
@@ -152,7 +160,7 @@ const EdgeGlowForm = ({
         setBtnState('loading');
         ballsRef.forEach((ref, i) => {
             gsap.fromTo(ref.current, { y: 0 }, {
-                y: -12,
+                y: -10,
                 repeat: -1,
                 yoyo: true,
                 delay: i * 0.12,
@@ -162,57 +170,76 @@ const EdgeGlowForm = ({
         });
         setTimeout(() => {
             setBtnState('success');
-            ballsRef.forEach(ref => gsap.set(ref.current, { y: 0 }));
+            ballsRef.forEach(ref => {
+                gsap.killTweensOf(ref.current);
+                gsap.set(ref.current, { y: 0 });
+            });
             setTimeout(() => {
                 setBtnState('default');
             }, 1200);
         }, 1600);
     };
 
-    return (
+    const glow = `radial-gradient(circle at ${radialPos.x}% ${radialPos.y}%, ${GlowColor} 0%, transparent 55%)`;
 
-        <div className=" rounded-xl w-full">
+    return (
+        <div className="w-full">
             <div
-                className="w-full max-w-sm mx-auto  rounded-xl shadow-2xl p-1 flex flex-col justify-center text-white relative overflow-hidden"
+                className="relative w-full max-w-sm mx-auto rounded-[1.4rem] p-[2px] text-white touch-pan-y"
                 ref={bgRef}
-                onMouseMove={handleBgMouseMove}
-                onMouseLeave={handleBgMouseLeave}
+                onPointerMove={handlePointerMove}
+                onPointerLeave={handlePointerLeave}
             >
-                {/* 🎯 Glassy Background */}
-                <div className="absolute inset-0 z-0 hidden md:block pointer-events-none rounded-xl">
+                {/* Soft halo outside the card */}
+                <div
+                    className="pointer-events-none absolute -inset-3 rounded-[2rem] blur-2xl transition-opacity duration-500"
+                    style={{ background: glow, opacity: glowing ? 0.55 : 0.25 }}
+                />
+                {/* 🎯 Edge glow: the gradient only shows through the 2px edge around the panel */}
+                <div
+                    className="pointer-events-none absolute inset-0 rounded-[1.4rem]"
+                    style={{ background: `${glow}, linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08))` }}
+                />
+
+                <div className="relative z-10 rounded-[calc(1.4rem-2px)] bg-[#0a0a0f] px-5 py-6 sm:px-7 sm:py-7 overflow-hidden">
+                    {/* faint dotted texture */}
                     <div
-                        className="absolute inset-0 opacity-95"
-                        style={{
-                            background: `radial-gradient(circle at ${radialPos.x}% ${radialPos.y}%, ${GlowColor} 10%, transparent 60%)`
-                        }}
-                    ></div>
-                </div>
-                <div className={`relative z-10 bg-black h-full w-full p-6 border border-purple-600 rounded-xl`}>
-                    <h2 className="text-2xl font-bold mb-6 flex items-center gap-2">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6 text-purple-400">
-                            <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25H4.5a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5H4.5a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-.659 1.591l-7.5 7.5a2.25 2.25 0 01-3.182 0l-7.5-7.5A2.25 2.25 0 012.25 6.993V6.75" />
-                        </svg>
-                        Get In Touch
-                    </h2>
-                    <form className="space-y-6 w-full" onSubmit={handleBtnClick}>
+                        className="pointer-events-none absolute inset-0 opacity-[0.07]"
+                        style={{ backgroundImage: 'radial-gradient(rgba(255,255,255,0.9) 1px, transparent 1px)', backgroundSize: '14px 14px' }}
+                    />
+
+                    <div className="relative mb-6 flex items-start gap-3">
+                        <span
+                            className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-white/10"
+                            style={{ background: `linear-gradient(135deg, ${withAlpha(borderGlowColor, '40')}, transparent)`, color: edgeColor }}
+                        >
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.6" stroke="currentColor" className="h-5 w-5">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25H4.5a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5H4.5a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-.659 1.591l-7.5 7.5a2.25 2.25 0 01-3.182 0l-7.5-7.5A2.25 2.25 0 012.25 6.993V6.75" />
+                            </svg>
+                        </span>
+                        <div>
+                            <h2 className="text-xl font-semibold tracking-tight">Get in touch</h2>
+                            <p className="mt-0.5 text-[0.8rem] text-zinc-400">We usually reply within a day.</p>
+                        </div>
+                    </div>
+
+                    <form className="relative grid grid-cols-2 gap-3" onSubmit={handleBtnClick} noValidate>
                         {fields.map(f => (
-                            <div key={f.name} className="relative flex flex-col justify-center">
+                            <div key={f.name} className={`relative ${f.half ? 'col-span-2 sm:col-span-1' : 'col-span-2'}`}>
                                 <label
                                     ref={el => (labelRefs.current[f.name] = el)}
-                                    className="absolute text-white/60 text-sm transition-all pointer-events-none"
+                                    htmlFor={`edge-glow-${f.name}`}
+                                    className="pointer-events-none absolute left-3.5 z-10 whitespace-nowrap text-sm"
                                 >{f.label}</label>
                                 <span
                                     ref={el => {
                                         if (!borderRefs.current[f.name]) borderRefs.current[f.name] = [];
                                         borderRefs.current[f.name][0] = el;
                                     }}
-                                    className="pointer-events-none absolute left-1/2 -translate-x-1/2 top-0 w-[80%] h-[2px] rounded-full opacity-0 scale-x-70 origin-center z-20"
-                                    style={{
-                                        background: `linear-gradient(90deg, transparent 0%, yellow 20%, transparent 100%)`,
-                                        boxShadow: `0 0 8px 0 ${borderGlowShadow}`,
-                                    }}
+                                    className="pointer-events-none absolute left-1/2 top-0 z-20 h-[1.5px] w-[80%] -translate-x-1/2 rounded-full opacity-0"
                                 />
                                 <input
+                                    id={`edge-glow-${f.name}`}
                                     type={f.type}
                                     name={f.name}
                                     value={values[f.name]}
@@ -220,78 +247,69 @@ const EdgeGlowForm = ({
                                     onFocus={() => handleFocus(f.name)}
                                     onBlur={() => handleBlur(f.name)}
                                     autoComplete="off"
-                                    className={`w-full px-4 pt-5 pb-2 rounded-lg bg-white/10 border ${errors[f.name] ? 'border-red-400' : 'border-white/20'} text-sm text-white focus:outline-none backdrop-blur-md transition font-light`}
+                                    className={`h-[3.25rem] w-full rounded-xl border bg-white/[0.04] px-3.5 pt-4 text-sm text-white transition-colors focus:bg-white/[0.06] focus:outline-none ${errors[f.name] ? 'border-red-400/70' : 'border-white/10 hover:border-white/20'}`}
                                 />
                                 <span
                                     ref={el => {
                                         if (!borderRefs.current[f.name]) borderRefs.current[f.name] = [];
                                         borderRefs.current[f.name][1] = el;
                                     }}
-                                    className="pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-0 w-[80%] h-[2px] rounded-full opacity-0 scale-x-70 origin-center"
-                                    style={{
-                                        background: `linear-gradient(90deg, transparent 0%, ${borderGlowColor} 20%, transparent 100%)`,
-                                        boxShadow: `0 0 8px 0 ${borderGlowShadow}`,
-                                    }}
+                                    className="pointer-events-none absolute bottom-0 left-1/2 h-[1.5px] w-[80%] -translate-x-1/2 rounded-full opacity-0"
                                 />
                             </div>
                         ))}
 
-                        <div className="flex items-center gap-3 mt-2 select-none relative">
+                        <div className="relative col-span-2 mt-1 flex select-none items-center gap-3">
                             <button
                                 type="button"
+                                role="checkbox"
                                 aria-checked={checked}
-                                tabIndex={0}
+                                aria-label="I agree to the terms"
                                 onClick={handleCheckbox}
-                                className={`relative w-6 h-6 rounded-md border-2 border-white/30 bg-white/10 flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-purple-400 transition`}
-                                style={{ minWidth: 24 }}
+                                className="relative flex h-5 w-5 min-w-5 items-center justify-center rounded-md border border-white/25 bg-white/5 transition focus:outline-none focus-visible:ring-2"
+                                style={{ borderColor: checked ? edgeColor : undefined, '--tw-ring-color': edgeColor }}
                             >
-                                <svg
-                                    ref={checkTick}
-                                    width="18" height="18" viewBox="0 0 18 18"
-                                    className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-purple-400"
-                                    style={{ scale: checked ? 1 : 0, opacity: checked ? 1 : 0, transition: 'all 0.2s' }}
-                                >
-                                    <polyline points="3,10 7,14 15,6" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+                                <svg ref={checkTick} width="14" height="14" viewBox="0 0 18 18" style={{ color: edgeColor }}>
+                                    <polyline points="3,10 7,14 15,6" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
                                 </svg>
                             </button>
-                            <span className="text-white/80 text-sm">I agree to the terms</span>
+                            <span className="text-sm text-zinc-400">I agree to the <span className="text-zinc-200 underline decoration-white/20 underline-offset-2">terms</span></span>
                             {checkboxError && (
-                                <div className="absolute -left-0 -top-10 flex flex-col items-center " style={{ zIndex: 999 }}>
-                                    <div className="bg-red-500 text-white text-xs rounded px-3 py-1 shadow-lg font-medium">check this box</div>
-                                    <div className="w-3 h-3 bg-red-500 rotate-135 -mt-1" style={{ clipPath: 'polygon(0 0, 100% 0, 100% 100%)' }}></div>
+                                <div className="absolute -top-9 left-0 z-50 flex flex-col items-start">
+                                    <div className="rounded-md bg-red-500 px-2.5 py-1 text-xs font-medium text-white shadow-lg">Please accept the terms</div>
+                                    <div className="ml-1.5 -mt-1 h-2.5 w-2.5 rotate-45 bg-red-500" />
                                 </div>
                             )}
                         </div>
+
                         {/* Animated Submit Button */}
                         <button
                             type="submit"
-                            className="mt-6 py-3 px-6 bg-gradient-to-r from-purple-700 via-purple-500 to-indigo-800 rounded-md hover:brightness-110 transition shadow-lg w-full font-semibold text-base flex items-center justify-center gap-2 relative overflow-hidden"
-                            style={{ minHeight: 48 }}
-                            onClick={handleBtnClick}
+                            className="relative col-span-2 mt-3 flex min-h-12 w-full items-center justify-center overflow-hidden rounded-xl text-sm font-semibold text-white shadow-lg transition hover:brightness-110 active:scale-[0.99]"
+                            style={{ background: `linear-gradient(110deg, ${GlowColor}, ${edgeColor})`, boxShadow: `0 10px 30px -12px ${edgeColor}` }}
                             disabled={btnState !== 'default'}
                         >
                             {/* Bouncing Balls */}
-                            <span className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex gap-1 ${btnState === 'loading' ? 'opacity-100' : 'opacity-0'}`} style={{ transition: 'opacity 0.2s' }}>
-                                <span ref={ballsRef[0]} className="w-2.5 h-2.5 rounded-full bg-white/80 inline-block" />
-                                <span ref={ballsRef[1]} className="w-2.5 h-2.5 rounded-full bg-white/80 inline-block" />
-                                <span ref={ballsRef[2]} className="w-2.5 h-2.5 rounded-full bg-white/80 inline-block" />
+                            <span className={`absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 gap-1 transition-opacity duration-200 ${btnState === 'loading' ? 'opacity-100' : 'opacity-0'}`}>
+                                <span ref={ballsRef[0]} className="inline-block h-2 w-2 rounded-full bg-white/90" />
+                                <span ref={ballsRef[1]} className="inline-block h-2 w-2 rounded-full bg-white/90" />
+                                <span ref={ballsRef[2]} className="inline-block h-2 w-2 rounded-full bg-white/90" />
                             </span>
                             {/* Checkmark */}
-                            <span
-                                className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl text-green-400 ${btnState === 'success' ? 'opacity-100' : 'opacity-0'}`}
-                                style={{ transition: 'opacity 0.2s' }}
-                            >
-                                <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7" /></svg>
+                            <span className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition-opacity duration-200 ${btnState === 'success' ? 'opacity-100' : 'opacity-0'}`}>
+                                <svg width="22" height="22" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7" /></svg>
                             </span>
                             {/* Default text */}
-                            <span className={`transition-opacity duration-200 ${btnState === 'default' ? 'opacity-100' : 'opacity-0'}`}>Send Message</span>
+                            <span className={`flex items-center gap-2 transition-opacity duration-200 ${btnState === 'default' ? 'opacity-100' : 'opacity-0'}`}>
+                                Send Message
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
+                            </span>
                         </button>
                     </form>
                 </div>
             </div>
         </div>
-
     );
-}
+};
 
 export default EdgeGlowForm;

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

@@ -20,17 +20,21 @@ const TwitterIcon = () => (
 );
 
 
+const ACCENT = "#B0DC3C";
+const stop = (e) => e.stopPropagation();
+const socialBtn = "flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/[0.04] text-white/70 transition-colors hover:border-[#B0DC3C]/50 hover:text-[#B0DC3C]";
+
 const FlipProfile = ({
     name = "Iron Man",
     role = "AI Engineer",
     dob = "5th March, 1999",
-    avatar = "/assets/ironman.png",
+    avatar = "https://ik.imagekit.io/ny6yinyut/apexui/assets/ironman.png?tr=f-auto,q-80,w-480",
     github = "#",
     linkedin = "#",
     twitter = "#",
     resumeLink = "/Iron-Man-Resume.pdf",
     hireLink = "#",
-    bgColor = "#0F172B" 
+    bgColor = "#0F172B"
 }) => {
     const [isFlipped, setIsFlipped] = useState(false);
 
@@ -44,19 +48,28 @@ const FlipProfile = ({
         hidden: { opacity: 0 },
         visible: {
             opacity: 1,
-            transition: { staggerChildren: 0.1, delayChildren: 0.3 }
+            transition: { staggerChildren: 0.08, delayChildren: 0.3 }
         }
     };
 
     const itemVariants = {
-        hidden: { opacity: 0, y: 20 },
+        hidden: { opacity: 0, y: 16 },
         visible: { opacity: 1, y: 0 }
     };
 
+    // Shared face styles: accent glow at the top and a faint grid
+    const faceStyle = {
+        backgroundColor: bgColor,
+        backgroundImage: `radial-gradient(120% 60% at 50% 0%, ${ACCENT}26, transparent 60%), linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px)`,
+        backgroundSize: "auto, 22px 22px, 22px 22px",
+        backfaceVisibility: "hidden",
+        WebkitBackfaceVisibility: "hidden",
+    };
+
     return (
-        <div className="w-full flex items-center justify-center p-4 min-h-[450px]" style={{ perspective: "1200px" }}>
+        <div className="w-full flex items-center justify-center p-4" style={{ perspective: "1200px" }}>
             <motion.div
-                className="relative w-full max-w-sm h-[420px] cursor-pointer"
+                className="relative w-[300px] max-w-full h-[420px] cursor-pointer"
                 style={{ transformStyle: "preserve-3d" }}
                 variants={cardVariants}
                 animate={isFlipped ? "flipped" : "initial"}
@@ -64,62 +77,81 @@ const FlipProfile = ({
                 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 rounded-[1.75rem] overflow-hidden border border-white/10 shadow-2xl shadow-black/50 flex flex-col items-center p-6 text-center text-white"
+                    style={faceStyle}
                 >
-                    <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>
+                    <div className="flex w-full items-center justify-between">
+                        <span className="rounded-full border border-[#B0DC3C]/30 bg-[#B0DC3C]/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-[#B0DC3C]">Profile</span>
+                        <span className="flex h-8 w-8 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white/60" aria-hidden="true">
+                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7L21 8" /><path d="M21 3v5h-5" /></svg>
+                        </span>
+                    </div>
+
+                    {/* Avatar with a slowly spinning accent ring */}
+                    <div className="relative mt-6 h-36 w-36">
+                        <div className="absolute inset-0 rounded-full animate-[spin_6s_linear_infinite]" style={{ background: `conic-gradient(from 0deg, ${ACCENT}, transparent 35%, ${ACCENT}55 60%, transparent 80%, ${ACCENT})` }} />
+                        <div className="absolute inset-[3px] rounded-full" style={{ backgroundColor: bgColor }} />
+                        <img src={avatar} alt={name} className="absolute inset-[7px] h-[calc(100%-14px)] w-[calc(100%-14px)] rounded-full object-cover" />
+                    </div>
+
+                    <h2 className="mt-5 text-3xl font-bold tracking-tight">{name}</h2>
+                    <p className="mt-1.5 rounded-full bg-white/5 px-3 py-1 text-sm font-medium text-[#B0DC3C]">{role}</p>
+
+                    <p className="mt-auto flex items-center gap-1.5 text-xs text-white/50">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 11V6a3 3 0 0 1 6 0v8" /><path d="M5 15a7 7 0 0 0 14 0v-1a2 2 0 0 0-4 0" /></svg>
+                        Tap to flip
+                    </p>
+                </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)"
-                    }}
+                <div
+                    className="absolute inset-0 rounded-[1.75rem] overflow-hidden border border-[#B0DC3C]/30 shadow-2xl shadow-black/50 p-6 text-white"
+                    style={{ ...faceStyle, transform: "rotateY(180deg)" }}
                 >
                     <AnimatePresence>
                         {isFlipped && (
                             <motion.div
-                                className="flex flex-col items-center justify-center w-full h-full"
+                                className="flex h-full w-full flex-col"
                                 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 items-center gap-3">
+                                    <img src={avatar} alt="" className="h-12 w-12 rounded-full border-2 border-[#B0DC3C] object-cover" />
+                                    <div className="min-w-0 text-left">
+                                        <p className="truncate text-lg font-bold leading-tight">{name}</p>
+                                        <p className="truncate text-xs text-[#B0DC3C]">{role}</p>
+                                    </div>
+                                </motion.div>
+
+                                <motion.div variants={itemVariants} className="mt-5 rounded-2xl border border-white/10 bg-white/[0.04] p-4 text-left">
+                                    <p className="text-[10px] font-semibold uppercase tracking-[0.16em] text-white/40">Born</p>
+                                    <p className="mt-1 text-sm font-medium text-white/90">{dob}</p>
+                                </motion.div>
 
-                                <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 variants={itemVariants} className="mt-4 flex items-center gap-2.5">
+                                    <a href={github} target="_blank" rel="noopener noreferrer" onClick={stop} aria-label="GitHub" className={socialBtn}><GitHubIcon /></a>
+                                    <a href={linkedin} target="_blank" rel="noopener noreferrer" onClick={stop} aria-label="LinkedIn" className={socialBtn}><LinkedInIcon /></a>
+                                    <a href={twitter} target="_blank" rel="noopener noreferrer" onClick={stop} aria-label="X (Twitter)" className={socialBtn}><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">
+                                <motion.div variants={itemVariants} className="mt-auto flex flex-col gap-2.5">
+                                    <motion.a whileTap={{ scale: 0.97 }} href={hireLink} onClick={stop} className="w-full rounded-xl bg-[#B0DC3C] py-2.5 text-center text-sm font-bold text-slate-950 transition hover:brightness-110">
                                         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">
+                                    <motion.a whileTap={{ scale: 0.97 }} href={resumeLink} download onClick={stop} className="w-full rounded-xl border border-white/15 bg-white/5 py-2.5 text-center text-sm font-semibold text-white transition hover:bg-white/10">
                                         Download CV
                                     </motion.a>
                                 </motion.div>
                             </motion.div>
                         )}
                     </AnimatePresence>
-                </motion.div>
+                </div>
             </motion.div>
         </div>
     );
 };
 
-export default FlipProfile;
+export default FlipProfile;

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

@@ -5,7 +5,7 @@ function cn(...classes) {
 }
 import React, { useRef } from "react";
 import { motion, useMotionValue, useSpring, useMotionTemplate } from "framer-motion";
-import bgHexa from '/assets/bg-hexa.jpg'
+const bgHexa = 'https://ik.imagekit.io/ny6yinyut/apexui/assets/bg-hexa.jpg?tr=f-auto,q-80';
 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">
@@ -78,7 +78,7 @@ export function GlareCard({
     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]"
+            className="relative isolate [contain:layout_style] [perspective:600px] transition-transform duration-[var(--duration)] ease-[var(--easing)] delay-[var(--delay)] will-change-transform w-full max-w-[320px] [aspect-ratio:17/21]"
             ref={refElement}
             onPointerMove={(event) => {
                 const rotateFactor = 0.4;