Footer Exemple 2

1"use client";
2
3import { motion, Variants } from "framer-motion";
4import Image from "next/image";
5
6// ─── Avatar data — real photos via DiceBear (open-source, no key needed) ──────
7const AVATARS = [
8  {
9    id: 1,
10    src: "https://api.dicebear.com/9.x/notionists/svg?seed=JK&backgroundColor=b6e3f4",
11  },
12  {
13    id: 2,
14    src: "https://api.dicebear.com/9.x/notionists/svg?seed=AM&backgroundColor=c0aede",
15  },
16  {
17    id: 3,
18    src: "https://api.dicebear.com/9.x/notionists/svg?seed=SL&backgroundColor=ffdfbf",
19  },
20  {
21    id: 4,
22    src: "https://api.dicebear.com/9.x/notionists/svg?seed=TR&backgroundColor=d1d4f9",
23  },
24  {
25    id: 5,
26    src: "https://api.dicebear.com/9.x/notionists/svg?seed=PW&backgroundColor=ffd5dc",
27  },
28];
29
30// ─── Motion variants ──────────────────────────────────────────────────────────
31const stagger: Variants = {
32  hidden: { opacity: 0 },
33  visible: {
34    opacity: 1,
35    transition: { staggerChildren: 0.1, delayChildren: 0.05 },
36  },
37};
38
39const slide: Variants = {
40  hidden: { opacity: 0, y: 16 },
41  visible: {
42    opacity: 1,
43    y: 0,
44    transition: { duration: 0.45, ease: "easeOut" },
45  },
46};
47
48const panelVariant: Variants = {
49  hidden: { opacity: 0, scale: 0.975 },
50  visible: {
51    opacity: 1,
52    scale: 1,
53    transition: { duration: 0.55, ease: "easeOut", delay: 0.1 },
54  },
55};
56
57const currentYear = new Date().getFullYear();
58
59function AvatarStack() {
60  return (
61    <motion.div variants={slide} className="flex items-center">
62      <div className="flex -space-x-2.5">
63        {AVATARS.map((a) => (
64          <div
65            key={a.id}
66            className="w-10 h-10 rounded-sm border-2 border-white overflow-hidden bg-zinc-100 select-none flex-shrink-0"
67          >
68            <Image
69              src={a.src}
70              alt="team member"
71              width={40}
72              height={40}
73              className="w-full h-full object-cover"
74              unoptimized
75            />
76          </div>
77        ))}
78      </div>
79    </motion.div>
80  );
81}
82
83function LeftHeading() {
84  return (
85    <motion.h2
86      variants={slide}
87      className="text-[1.85rem] sm:text-[2.1rem] leading-[1.18] tracking-[-0.025em] text-zinc-900"
88      style={{ fontFamily: "'Geist', 'Inter', system-ui, sans-serif" }}
89    >
90// … truncated