Feature Exemple 1

1"use client";
2
3import { motion, Variants } from "framer-motion";
4
5const containerVariants: Variants = {
6    hidden: {},
7    visible: { transition: { staggerChildren: 0.1 } },
8};
9
10const cardVariants: Variants = {
11    hidden: { opacity: 0, y: 24 },
12    visible: { opacity: 1, y: 0, transition: { duration: 0.55, ease: [0.22, 1, 0.36, 1] } },
13};
14
15/* ══════════════════════════════════════════
16   SVG ILLUSTRATIONS — Black & White only
17══════════════════════════════════════════ */
18
19function AiSvg() {
20    return (
21        <svg viewBox="0 0 240 170" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full">
22            <polygon points="120,18 210,72 120,126 30,72" fill="white" stroke="black" strokeWidth="1.4"/>
23            <polygon points="120,30 200,76 120,112 40,76" fill="#e8e8e8" stroke="#888" strokeWidth="1"/>
24            <rect x="76" y="44" width="88" height="70" rx="14" fill="white" stroke="black" strokeWidth="1.6"/>
25            <rect x="88" y="56" width="64" height="46" rx="9" fill="#f0f0f0" stroke="#aaa" strokeWidth="1.2"/>
26            <circle cx="105" cy="73" r="6" fill="black" opacity=".15"/>
27            <circle cx="127" cy="73" r="6" fill="black" opacity=".15"/>
28            <circle cx="105" cy="73" r="2.5" fill="black"/>
29            <circle cx="127" cy="73" r="2.5" fill="black"/>
30            <path d="M100 87 Q116 95 132 87" stroke="black" strokeWidth="1.5" strokeLinecap="round" fill="none"/>
31            <line x1="120" y1="56" x2="120" y2="44" stroke="black" strokeWidth="1.3"/>
32            <circle cx="120" cy="42" r="3" fill="black"/>
33            <path d="M34 28 L37 22 L40 28 L37 34 Z" fill="black" opacity=".2"/>
34            <path d="M196 30 L199 24 L202 30 L199 36 Z" fill="black" opacity=".2"/>
35        </svg>
36    );
37}
38
39function FrontEndSvg() {
40    return (
41        <svg viewBox="0 0 240 170" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full">
42            <rect x="30" y="54" width="152" height="98" rx="12" fill="#e8e8e8" stroke="#aaa" strokeWidth="1.2" transform="rotate(-5 30 54)"/>
43            <rect x="40" y="42" width="152" height="98" rx="12" fill="#f0f0f0" stroke="#888" strokeWidth="1.2" transform="rotate(-1.5 40 42)"/>
44// … truncated