Feature Exemple 3

1"use client";
2 
3import { motion, Variants } from "framer-motion";
4import { Zap, Shield, Cpu, Gauge } from "lucide-react";
5 
6/* ─── Animation ─── */
7const fadeUp: Variants = {
8    hidden: { opacity: 0, y: 20 },
9    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] } },
10};
11const stagger: Variants = { hidden: {}, visible: { transition: { staggerChildren: 0.1 } } };
12 
13/* ══════════════════════════════════════════
14   SVG 1 — Invoice card
15══════════════════════════════════════════ */
16function InvoiceSvg() {
17    return (
18        <svg viewBox="0 0 320 160" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full">
19            {/* Outer card */}
20            <rect x="8" y="8" width="304" height="144" rx="12" fill="white" stroke="#e2e8f0" strokeWidth="1.2"/>
21 
22            {/* Blue accent top-left corner square */}
23            <rect x="24" y="24" width="32" height="32" rx="6" fill="#eff6ff" stroke="#bfdbfe" strokeWidth="1"/>
24            {/* Grid icon inside */}
25            <line x1="34" y1="30" x2="34" y2="50" stroke="#93c5fd" strokeWidth="1.2"/>
26            <line x1="46" y1="30" x2="46" y2="50" stroke="#93c5fd" strokeWidth="1.2"/>
27            <line x1="28" y1="36" x2="52" y2="36" stroke="#93c5fd" strokeWidth="1.2"/>
28            <line x1="28" y1="44" x2="52" y2="44" stroke="#93c5fd" strokeWidth="1.2"/>
29 
30            {/* Doc lines top-right */}
31            <rect x="242" y="28" width="52" height="6" rx="3" fill="#f1f5f9"/>
32            <rect x="242" y="38" width="40" height="5" rx="2.5" fill="#f1f5f9"/>
33            <rect x="242" y="47" width="46" height="5" rx="2.5" fill="#f1f5f9"/>
34            {/* Doc corner fold icon */}
35            <rect x="266" y="22" width="22" height="28" rx="3" fill="white" stroke="#e2e8f0" strokeWidth="1"/>
36            <polyline points="278,22 288,32 278,32" fill="#f1f5f9" stroke="#e2e8f0" strokeWidth="1"/>
37            {/* Small icon bottom-right of doc */}
38            <rect x="270" y="38" width="14" height="10" rx="2" fill="#f8fafc" stroke="#e2e8f0" strokeWidth="0.8"/>
39            <line x1="273" y1="42" x2="281" y2="42" stroke="#cbd5e1" strokeWidth="0.8"/>
40 
41            {/* Invoice details */}
42            <text x="24" y="76" fontSize="7.5" fill="#94a3b8" fontFamily="Inter,sans-serif">INV-456789</text>
43// … truncated