Feature Exemple 2

1"use client";
2
3import { motion, Variants } from "framer-motion";
4import Image from "next/image";
5
6/* ─── Animation ─── */
7const fadeUp: Variants = {
8    hidden: { opacity: 0, y: 20 },
9    visible: { opacity: 1, y: 0, transition: { duration: 0.55, ease: [0.22, 1, 0.36, 1] } },
10};
11const stagger: Variants = {
12    hidden: {},
13    visible: { transition: { staggerChildren: 0.13 } },
14};
15
16/* ══════════════════════════════════════════
17   SVG 1 — Connect your stack
18   Radial web with real logo <img> via foreignObject
19══════════════════════════════════════════ */
20const LOGOS = [
21    {
22        label: "Stripe",
23        src: "https://cdn.simpleicons.org/stripe",
24        cx: 62,
25        cy: 62,
26    },
27    {
28        label: "HubSpot",
29        src: "https://cdn.simpleicons.org/hubspot",
30        cx: 198,
31        cy: 62,
32    },
33    {
34        label: "Vercel",
35        src: "https://cdn.simpleicons.org/vercel",
36        cx: 62,
37        cy: 158,
38    },
39    {
40        label: "Xero",
41        src: "https://cdn.simpleicons.org/xero",
42        cx: 198,
43        cy: 158,
44    },
45];
46
47function ConnectSvg() {
48    const cx = 130, cy = 110;
49    return (
50        <svg viewBox="0 0 260 220" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full">
51            {/* Dashed circles */}
52            <circle cx={cx} cy={cy} r="72" stroke="#d1d5db" strokeWidth="1" strokeDasharray="4 3"/>
53            <circle cx={cx} cy={cy} r="44" stroke="#d1d5db" strokeWidth="1" strokeDasharray="4 3"/>
54            <circle cx={cx} cy={cy} r="20" stroke="#d1d5db" strokeWidth="1"/>
55
56            {/* Center globe */}
57            <circle cx={cx} cy={cy} r="16" fill="white" stroke="#9ca3af" strokeWidth="1.3"/>
58            <ellipse cx={cx} cy={cy} rx="6.5" ry="16" stroke="#9ca3af" strokeWidth="1" fill="none"/>
59            <line x1={cx - 16} y1={cy} x2={cx + 16} y2={cy} stroke="#9ca3af" strokeWidth="1"/>
60            <line x1={cx} y1={cy - 16} x2={cx} y2={cy + 16} stroke="#9ca3af" strokeWidth="1" opacity=".4"/>
61
62            {/* Connector lines to logos */}
63            {LOGOS.map(({ cx: lx, cy: ly, label }) => (
64                <line key={label} x1={cx} y1={cy} x2={lx} y2={ly} stroke="#d1d5db" strokeWidth="1.3"/>
65            ))}
66
67            {/* Logo circles */}
68// … truncated