CTA Exemple 1

1"use client";
2
3import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
4import { useState, useRef } from "react";
5
6// ─── Avatars ──────────────────────────────────────────────────────────────────
7
8const avatars = [
9  "https://i.pravatar.cc/40?img=11",
10  "https://i.pravatar.cc/40?img=22",
11  "https://i.pravatar.cc/40?img=33",
12];
13
14// ─── Hover image with 3D tilt + glow ─────────────────────────────────────────
15
16function HoverImage() {
17  const ref = useRef<HTMLSpanElement>(null);
18
19  const rawX = useMotionValue(0);
20  const rawY = useMotionValue(0);
21  const rotateX = useSpring(useTransform(rawY, [-1, 1], [18, -18]), {
22    stiffness: 300,
23    damping: 25,
24  });
25  const rotateY = useSpring(useTransform(rawX, [-1, 1], [-18, 18]), {
26    stiffness: 300,
27    damping: 25,
28  });
29  const scale = useSpring(1, { stiffness: 300, damping: 22 });
30
31  function handleMouseMove(e: React.MouseEvent<HTMLSpanElement>) {
32    const el = ref.current;
33    if (!el) return;
34    const rect = el.getBoundingClientRect();
35    const cx = rect.left + rect.width / 2;
36    const cy = rect.top + rect.height / 2;
37    rawX.set((e.clientX - cx) / (rect.width / 2));
38    rawY.set((e.clientY - cy) / (rect.height / 2));
39    scale.set(1.18);
40  }
41
42  function handleMouseLeave() {
43    rawX.set(0);
44    rawY.set(0);
45    scale.set(1);
46  }
47
48  return (
49    <motion.span
50      ref={ref}
51      onMouseMove={handleMouseMove}
52      onMouseLeave={handleMouseLeave}
53      style={{
54        rotateX,
55        rotateY,
56        scale,
57        transformStyle: "preserve-3d",
58        perspective: 600,
59      }}
60      className="inline-block w-11 h-11 md:w-13 md:h-13 rounded-xl overflow-hidden align-middle relative -top-1 cursor-pointer shadow-lg"
61      whileHover={{ boxShadow: "0 0 24px 6px rgba(255,255,255,0.15)" }}
62    >
63      <img
64        src="https://bagui.vercel.app/faviconblack.png"
65        alt=""
66        className="w-full h-full object-cover pointer-events-none"
67      />
68    </motion.span>
69  );
70}
71
72// ─── FadeUp word ──────────────────────────────────────────────────────────────
73
74// … truncated