// Generated by orrery. Edit the diagram spec and re-render instead of editing this file.
import { type SVGProps, useId } from "react";

export default function SaaSOnboardingJourney(props: SVGProps<SVGSVGElement>) {
  const uid = useId().replace(/[^A-Za-z0-9_-]/g, "");
  return (
    <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="1354" height="870" viewBox="0 0 1354 870" role="img" aria-labelledby={`${uid}-sdw-title ${uid}-sdw-desc`} fontFamily="'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace" {...props}>
      <title id={`${uid}-sdw-title`}>
        SaaS onboarding journey
      </title>
      <desc id={`${uid}-sdw-desc`}>
        SaaS onboarding journey. Customer journey in 5 stages (Discover, Sign up, Set up, First value, Renew) and 4 rows (Customer actions, Touchpoints, Pain points, Opportunities), 17 steps. Emotion from -2 to 2 by stage: Discover +1, Sign up -1, Set up -2, First value +1.5, Renew +1. Connections: Compares tools to Starts a free trial; Starts a free trial to Imports their data; Imports their data to Shares a first report; Shares a first report to Invites the team; Invites the team to Upgrades to a paid plan; Compares tools to Review site; Starts a free trial to Sign-up form; Imports their data to Import wizard; Invites the team to Dashboard; Upgrades to a paid plan to Trial-end email; Verification lands in spam to Magic-link sign-in; Columns do not map to Start with sample data; Plans are hard to compare to Plan preview in the app.
      </desc>
      <defs>
        <linearGradient id={`${uid}-bg`} x1="0" y1="0" x2="0.34" y2="0.94">
          <stop offset="0" stopColor="#0e1a24" />
          <stop offset="0.6" stopColor="#0b1012" />
        </linearGradient>
        <pattern id={`${uid}-grid`} width="30.77" height="30.77" patternUnits="userSpaceOnUse">
          <path d="M0 0.77H30.77M0.77 0V30.77" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1.54" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="733.5" cy="246" r="577.81">
          <stop offset="0" stopColor="#60a5fa" stopOpacity="0.12" />
          <stop offset="1" stopColor="#60a5fa" stopOpacity="0" />
        </radialGradient>
        <symbol id={`${uid}-s1`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6" />
        </symbol>
        <symbol id={`${uid}-s2`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" />
        </symbol>
        <symbol id={`${uid}-s3`} viewBox="0 0 24 24" overflow="visible">
          <g fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
            <path d="M15 3v4a1 1 0 0 0 1 1h4" />
            <path d="M18 17h-7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4l5 5v7a2 2 0 0 1-2 2" />
            <path d="M16 17v2a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2" />
          </g>
        </symbol>
        <symbol id={`${uid}-s4`} viewBox="0 0 24 24" overflow="visible">
          <g fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
            <path d="M10 13a2 2 0 1 0 4 0a2 2 0 1 0-4 0m3.45-1.45L15.5 9.5" />
            <path d="M6.4 20a9 9 0 1 1 11.2 0z" />
          </g>
        </symbol>
        <symbol id={`${uid}-s5`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 7a4 4 0 1 0 8 0a4 4 0 1 0-8 0M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2m1-17.87a4 4 0 0 1 0 7.75M21 21v-2a4 4 0 0 0-3-3.85" />
        </symbol>
        <symbol id={`${uid}-s6`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm0 2h18M7 15h.01M11 15h2" />
        </symbol>
        <symbol id={`${uid}-s7`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 8h16M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm4-2v4" />
        </symbol>
        <symbol id={`${uid}-s8`} viewBox="0 0 24 24" overflow="visible">
          <g fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
            <path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
            <path d="m3 7l9 6l9-6" />
          </g>
        </symbol>
        <symbol id={`${uid}-s9`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 6a3 3 0 1 0 6 0a3 3 0 0 0-6 0m18 5V8a2 2 0 0 0-2-2h-6l3 3m0-6l-3 3M3 13v3a2 2 0 0 0 2 2h6l-3-3m0 6l3-3m4 0a3 3 0 1 0 6 0a3 3 0 0 0-6 0" />
        </symbol>
        <symbol id={`${uid}-s10`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 13a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm12-4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zM9 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zM4 20h14" />
        </symbol>
        <symbol id={`${uid}-s11`} viewBox="0 0 24 24" overflow="visible">
          <path fill="none" stroke="#919394" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1" />
        </symbol>
      </defs>
      <rect width="1354" height="870" fill={`url(#${uid}-bg)`} />
      <rect width="1354" height="870" fill={`url(#${uid}-grid)`} />
      <rect width="1354" height="870" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          SAAS ONBOARDING JOURNEY
        </tspan>
      </text>
      <text fontSize="11.5" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.25">
          A new customer&#39;s path from first search to the first renewal, with what hurts and what to fix
        </tspan>
      </text>
      <g>
        <rect x="177" y="96" width="201" height="42" rx="3.08" fill="#ffffff" fillOpacity="0.06" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <circle cx="198" cy="117" r="10.23" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.54" />
        <text fontSize="9.5" fontWeight="700" fill="#649adb" textAnchor="middle">
          <tspan x="198" y="120.37">
            01
          </tspan>
        </text>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="217" y="120.91">
            DISCOVER
          </tspan>
        </text>
        <rect x="392" y="96" width="229" height="42" rx="3.08" fill="#ffffff" fillOpacity="0.06" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <circle cx="413" cy="117" r="10.23" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.54" />
        <text fontSize="9.5" fontWeight="700" fill="#649adb" textAnchor="middle">
          <tspan x="413" y="120.37">
            02
          </tspan>
        </text>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="432" y="120.91">
            SIGN UP
          </tspan>
        </text>
        <rect x="635" y="96" width="208" height="42" rx="3.08" fill="#ffffff" fillOpacity="0.06" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <circle cx="656" cy="117" r="10.23" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.54" />
        <text fontSize="9.5" fontWeight="700" fill="#649adb" textAnchor="middle">
          <tspan x="656" y="120.37">
            03
          </tspan>
        </text>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="675" y="120.91">
            SET UP
          </tspan>
        </text>
        <rect x="857" y="96" width="218" height="42" rx="3.08" fill="#ffffff" fillOpacity="0.06" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <circle cx="878" cy="117" r="10.23" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.54" />
        <text fontSize="9.5" fontWeight="700" fill="#649adb" textAnchor="middle">
          <tspan x="878" y="120.37">
            04
          </tspan>
        </text>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="897" y="120.91">
            FIRST VALUE
          </tspan>
        </text>
        <rect x="1089" y="96" width="237" height="42" rx="3.08" fill="#ffffff" fillOpacity="0.06" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <circle cx="1110" cy="117" r="10.23" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.54" />
        <text fontSize="9.5" fontWeight="700" fill="#649adb" textAnchor="middle">
          <tspan x="1110" y="120.37">
            05
          </tspan>
        </text>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="1129" y="120.91">
            RENEW
          </tspan>
        </text>
        <rect x="177" y="152" width="201" height="188" rx="3.08" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="392" y="152" width="229" height="188" rx="3.08" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="635" y="152" width="208" height="188" rx="3.08" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="857" y="152" width="218" height="188" rx="3.08" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="1089" y="152" width="237" height="188" rx="3.08" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="28" y="152" width="135" height="188" rx="3.08" fill="#ffffff" fillOpacity="0.06" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <text fontSize="10" fontWeight="700" letterSpacing="1" fill="#649adb">
          <tspan x="42" y="249.55">
            CUSTOMER ACTIONS
          </tspan>
        </text>
        <rect x="177" y="354" width="201" height="76" rx="3.08" fill="#ffffff" fillOpacity="0" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="392" y="354" width="229" height="76" rx="3.08" fill="#ffffff" fillOpacity="0" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="635" y="354" width="208" height="76" rx="3.08" fill="#ffffff" fillOpacity="0" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="857" y="354" width="218" height="76" rx="3.08" fill="#ffffff" fillOpacity="0" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="1089" y="354" width="237" height="76" rx="3.08" fill="#ffffff" fillOpacity="0" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="28" y="354" width="135" height="76" rx="3.08" fill="#ffffff" fillOpacity="0.06" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <text fontSize="10" fontWeight="700" letterSpacing="1" fill="#649adb">
          <tspan x="42" y="395.55">
            TOUCHPOINTS
          </tspan>
        </text>
        <rect x="177" y="444" width="201" height="93" rx="3.08" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="392" y="444" width="229" height="93" rx="3.08" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="635" y="444" width="208" height="93" rx="3.08" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="857" y="444" width="218" height="93" rx="3.08" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="1089" y="444" width="237" height="93" rx="3.08" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="28" y="444" width="135" height="93" rx="3.08" fill="#ffffff" fillOpacity="0.06" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <text fontSize="10" fontWeight="700" letterSpacing="1" fill="#649adb">
          <tspan x="42" y="494.05">
            PAIN POINTS
          </tspan>
        </text>
        <rect x="177" y="551" width="201" height="76" rx="3.08" fill="#ffffff" fillOpacity="0" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="392" y="551" width="229" height="76" rx="3.08" fill="#ffffff" fillOpacity="0" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="635" y="551" width="208" height="76" rx="3.08" fill="#ffffff" fillOpacity="0" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="857" y="551" width="218" height="76" rx="3.08" fill="#ffffff" fillOpacity="0" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="1089" y="551" width="237" height="76" rx="3.08" fill="#ffffff" fillOpacity="0" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="28" y="551" width="135" height="76" rx="3.08" fill="#ffffff" fillOpacity="0.06" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <text fontSize="10" fontWeight="700" letterSpacing="1" fill="#649adb">
          <tspan x="42" y="592.55">
            OPPORTUNITIES
          </tspan>
        </text>
        <rect x="28" y="641" width="135" height="136" rx="3.08" fill="#ffffff" fillOpacity="0.06" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <rect x="177" y="641" width="1149" height="136" rx="3.08" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <text fontSize="10" fontWeight="700" letterSpacing="1" fill="#649adb">
          <tspan x="42" y="712.55">
            EMOTION
          </tspan>
        </text>
        <text fontSize="9.5" fontWeight="400" letterSpacing="0.57" fill="#979a9b">
          <tspan x="42" y="666.37">
            DELIGHTED
          </tspan>
        </text>
        <text fontSize="9.5" fontWeight="400" letterSpacing="0.57" fill="#979a9b">
          <tspan x="42" y="758.37">
            FRUSTRATED
          </tspan>
        </text>
        <path d="M192.39 709 H1310.61" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.54" strokeDasharray="6.15 4.62" />
        <path d="M192.39 663 H1310.61" fill="none" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <path d="M192.39 755 H1310.61" fill="none" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <path d="M277.5 686 C353.83 701.33 430.17 721.87 506.5 732 C584 742.28 661.5 755 739 755 C814.67 755 890.33 674.5 966 674.5 C1046.5 674.5 1127 682.17 1207.5 686" fill="none" stroke="#60a5fa" strokeWidth="2.46" strokeLinecap="round" pathLength="1" strokeDasharray="1 1">
          <animate attributeName="stroke-dashoffset" values="1;1;0" keyTimes="0;0.2;1" dur="1.6s" fill="freeze" />
        </path>
        <g>
          <circle cx="277.5" cy="686" r="8" fill="#60a5fa" stroke="#0b1012" strokeWidth="3.08" />
          <circle cx="274.62" cy="684.4" r="1.2" fill="#0b1012" />
          <circle cx="280.38" cy="684.4" r="1.2" fill="#0b1012" />
          <path d="M274.14 687.92 Q277.5 693.04 280.86 687.92" fill="none" stroke="#0b1012" strokeWidth="1.3" strokeLinecap="round" />
          <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.56;1" dur="0.57s" fill="freeze" />
        </g>
        <g>
          <circle cx="506.5" cy="732" r="8" fill="#60a5fa" stroke="#0b1012" strokeWidth="3.08" />
          <circle cx="503.62" cy="730.4" r="1.2" fill="#0b1012" />
          <circle cx="509.38" cy="730.4" r="1.2" fill="#0b1012" />
          <path d="M503.14 735.36 Q506.5 730.24 509.86 735.36" fill="none" stroke="#0b1012" strokeWidth="1.3" strokeLinecap="round" />
          <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.72;1" dur="0.89s" fill="freeze" />
        </g>
        <g>
          <circle cx="739" cy="755" r="8" fill="#60a5fa" stroke="#0b1012" strokeWidth="3.08" />
          <circle cx="736.12" cy="753.4" r="1.2" fill="#0b1012" />
          <circle cx="741.88" cy="753.4" r="1.2" fill="#0b1012" />
          <path d="M735.64 758.36 Q739 753.24 742.36 758.36" fill="none" stroke="#0b1012" strokeWidth="1.3" strokeLinecap="round" />
          <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.79;1" dur="1.21s" fill="freeze" />
        </g>
        <g>
          <circle cx="966" cy="674.5" r="8" fill="#60a5fa" stroke="#0b1012" strokeWidth="3.08" />
          <circle cx="963.12" cy="672.9" r="1.2" fill="#0b1012" />
          <circle cx="968.88" cy="672.9" r="1.2" fill="#0b1012" />
          <path d="M962.64 676.42 Q966 681.54 969.36 676.42" fill="none" stroke="#0b1012" strokeWidth="1.3" strokeLinecap="round" />
          <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.84;1" dur="1.53s" fill="freeze" />
        </g>
        <g>
          <circle cx="1207.5" cy="686" r="8" fill="#60a5fa" stroke="#0b1012" strokeWidth="3.08" />
          <circle cx="1204.62" cy="684.4" r="1.2" fill="#0b1012" />
          <circle cx="1210.38" cy="684.4" r="1.2" fill="#0b1012" />
          <path d="M1204.14 687.92 Q1207.5 693.04 1210.86 687.92" fill="none" stroke="#0b1012" strokeWidth="1.3" strokeLinecap="round" />
          <animate attributeName="opacity" values="0;0;1" keyTimes="0;0.86;1" dur="1.85s" fill="freeze" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M368 197.5 L401.23 197.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M392.77 203.65 L402 197.5 L392.77 191.35" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M368 197.5 L401.23 197.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.85" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.2202;0.2906;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.678s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2202;0.2519;0.9;0.9317;1" dur="5.678s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M392.77 203.65 L402 197.5 L392.77 191.35" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2906;0.3223;0.9;0.9317;1" dur="5.678s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M611 197.5 L644.23 197.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M635.77 203.65 L645 197.5 L635.77 191.35" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M611 197.5 L644.23 197.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.85" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.3329;0.4033;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.678s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3329;0.3646;0.9;0.9317;1" dur="5.678s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M635.77 203.65 L645 197.5 L635.77 191.35" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4033;0.435;0.9;0.9317;1" dur="5.678s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M833 197.5 L866.23 197.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M857.77 203.65 L867 197.5 L857.77 191.35" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M833 197.5 L866.23 197.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.85" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.4456;0.516;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.678s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4456;0.4773;0.9;0.9317;1" dur="5.678s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M857.77 203.65 L867 197.5 L857.77 191.35" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.516;0.5477;0.9;0.9317;1" dur="5.678s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M966 233 L966 258.23" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M959.85 249.77 L966 259 L972.15 249.77" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M966 233 L966 258.23" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.85" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.5583;0.6288;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.678s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5583;0.59;0.9;0.9317;1" dur="5.678s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M959.85 249.77 L966 259 L972.15 249.77" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6288;0.6605;0.9;0.9317;1" dur="5.678s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M1065 294.5 L1074 294.5 Q1082 294.5 1082 286.5 L1082 205.5 Q1082 197.5 1090 197.5 L1098.23 197.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M1089.77 203.65 L1099 197.5 L1089.77 191.35" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M1065 294.5 L1074 294.5 Q1082 294.5 1082 286.5 L1082 205.5 Q1082 197.5 1090 197.5 L1098.23 197.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.85" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.671;0.7415;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="5.678s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.671;0.7027;0.9;0.9317;1" dur="5.678s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M1089.77 203.65 L1099 197.5 L1089.77 191.35" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7415;0.7732;0.9;0.9317;1" dur="5.678s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M277.5 233 L277.5 364" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.54 3.85" />
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M506.5 233 L506.5 364" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.54 3.85" />
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M739 233 L739 364" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.54 3.85" />
      </g>
      <g id={`${uid}-e-e9`}>
        <path d="M966 330 L966 364" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.54 3.85" />
      </g>
      <g id={`${uid}-e-e10`}>
        <path d="M1207.5 233 L1207.5 364" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.54 3.85" />
      </g>
      <g id={`${uid}-e-e11`}>
        <path d="M506.5 527 L506.5 561" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.54 3.85" />
      </g>
      <g id={`${uid}-e-e12`}>
        <path d="M739 527 L739 561" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.54 3.85" />
      </g>
      <g id={`${uid}-e-e13`}>
        <path d="M1207.5 527 L1207.5 561" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.54" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.54 3.85" />
      </g>
      <g id={`${uid}-n-search`}>
        <rect x="187" y="162" width="181" height="71" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="187" y="162" width="181" height="71" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <rect x="199" y="181.5" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="199" y="181.5" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s1`} x="205.4" y="187.9" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="241" y="185.41">
            COMPARES TOOLS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="241" y="202.75">
            Reads reviews and a
          </tspan>
          <tspan x="241" y="217.75">
            comparison post
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-trial`}>
        <rect x="402" y="162" width="209" height="71" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="402" y="162" width="209" height="71" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <rect x="414" y="181.5" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="414" y="181.5" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s2`} x="420.4" y="187.9" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="456" y="192.91">
            STARTS A FREE TRIAL
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="456" y="210.25">
            Work email and password
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-import`}>
        <rect x="645" y="162" width="188" height="71" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="645" y="162" width="188" height="71" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <rect x="657" y="181.5" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="657" y="181.5" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s3`} x="663.4" y="187.9" width="19.2" height="19.2" />
        <text fontSize="10" fontWeight="700" letterSpacing="0.8" fill="#9d9fa0">
          <tspan x="699" y="192.55">
            IMPORTS THEIR DATA
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="699" y="210.25">
            Uploads a CSV export
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-report`}>
        <rect x="867" y="162" width="198" height="71" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="867" y="162" width="198" height="71" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <rect x="879" y="181.5" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="879" y="181.5" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s4`} x="885.4" y="187.9" width="19.2" height="19.2" />
        <text fontSize="9.25" fontWeight="700" letterSpacing="0.74" fill="#9d9fa0">
          <tspan x="921" y="192.28">
            SHARES A FIRST REPORT
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="921" y="210.25">
            The moment it clicks
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-invite`}>
        <rect x="867" y="259" width="198" height="71" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="867" y="259" width="198" height="71" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <rect x="879" y="278.5" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="879" y="278.5" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="885.4" y="284.9" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="921" y="289.9">
            INVITES THE TEAM
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="921" y="307.25">
            Three more seats
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-upgrade`}>
        <rect x="1099" y="162" width="217" height="71" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="1099" y="162" width="217" height="71" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <rect x="1111" y="181.5" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="1111" y="181.5" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="1117.4" y="187.9" width="19.2" height="19.2" />
        <text fontSize="9.75" fontWeight="700" letterSpacing="0.78" fill="#9d9fa0">
          <tspan x="1153" y="192.46">
            UPGRADES TO A PAID PLAN
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="1153" y="210.25">
            Before the trial ends
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-review`}>
        <rect x="187" y="364" width="181" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="187" y="364" width="181" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <rect x="199" y="376" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="199" y="376" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="205.4" y="382.4" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="241" y="387.41">
            REVIEW SITE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="241" y="404.75">
            G2 and a blog post
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-form`}>
        <rect x="402" y="364" width="209" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="402" y="364" width="209" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <rect x="414" y="376" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="414" y="376" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="420.4" y="382.4" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="456" y="387.41">
            SIGN-UP FORM
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="456" y="404.75">
            Verify by email
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-wizard`}>
        <rect x="645" y="364" width="188" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="645" y="364" width="188" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <rect x="657" y="376" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="657" y="376" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="663.4" y="382.4" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="699" y="387.41">
            IMPORT WIZARD
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="699" y="404.75">
            Column mapping
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-dash`}>
        <rect x="867" y="364" width="198" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="867" y="364" width="198" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <rect x="879" y="376" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="879" y="376" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s10`} x="885.4" y="382.4" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="921" y="387.41">
            DASHBOARD
          </tspan>
        </text>
        <text fontSize="9.25" fontWeight="400" fill="#979a9b">
          <tspan x="921" y="404.5">
            Sharing and seat invites
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-billing`}>
        <rect x="1099" y="364" width="217" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="1099" y="364" width="217" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <rect x="1111" y="376" width="32" height="32" rx="5.44" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="1111" y="376" width="32" height="32" rx="5.44" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s11`} x="1117.4" y="382.4" width="19.2" height="19.2" />
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="1153" y="387.41">
            TRIAL-END EMAIL
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="1153" y="404.75">
            Links to billing
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-spam`}>
        <rect x="402" y="454" width="209" height="73" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="402" y="454" width="209" height="73" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="414" y="477.46">
            VERIFICATION LANDS IN
          </tspan>
          <tspan x="414" y="494.36">
            SPAM
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="414" y="511.7">
            A third never confirms
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-mapping`}>
        <rect x="645" y="454" width="188" height="73" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="645" y="454" width="188" height="73" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="657" y="485.91">
            COLUMNS DO NOT MAP
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="657" y="503.25">
            Dates and currencies fail
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-pricing`}>
        <rect x="1099" y="454" width="217" height="73" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="1099" y="454" width="217" height="73" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="1111" y="477.46">
            PLANS ARE HARD TO
          </tspan>
          <tspan x="1111" y="494.36">
            COMPARE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="1111" y="511.7">
            Seats or usage?
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-magic`}>
        <rect x="402" y="561" width="209" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="402" y="561" width="209" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="414" y="584.41">
            MAGIC-LINK SIGN-IN
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="414" y="601.75">
            No password, no wait
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-sample`}>
        <rect x="645" y="561" width="188" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="645" y="561" width="188" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="657" y="584.41">
            START WITH SAMPLE DATA
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="657" y="601.75">
            Map columns later
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-preview`}>
        <rect x="1099" y="561" width="217" height="56" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.54" />
        <g opacity="0">
          <rect x="1099" y="561" width="217" height="56" rx="6" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.54" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1233;0.155;0.9083;0.94;1" dur="5.678s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="0.88" fill="#9d9fa0">
          <tspan x="1111" y="584.41">
            PLAN PREVIEW IN THE APP
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b">
          <tspan x="1111" y="601.75">
            Cost at current usage
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <path d="M368 197.5 L401.23 197.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.69" pathLength="1" strokeDasharray="0.5 2" strokeDashoffset="0.5" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.5;0.5;-0.5;-1;-1" keyTimes="0;0.2202;0.2906;0.3258;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.678s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2202;0.2219;0.3258;0.3276;1" dur="5.678s" repeatCount="indefinite" />
        </path>
        <circle r="3.85" fill="#60a5fa" opacity="0">
          <animateMotion path="M368 197.5 L401.23 197.5" dur="5.678s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.2202;0.2906;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1937;0.2202;0.3329;0.3593;1" dur="5.678s" repeatCount="indefinite" />
        </circle>
        <path d="M611 197.5 L644.23 197.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.69" pathLength="1" strokeDasharray="0.5 2" strokeDashoffset="0.5" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.5;0.5;-0.5;-1;-1" keyTimes="0;0.3329;0.4033;0.4386;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.678s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3329;0.3346;0.4386;0.4403;1" dur="5.678s" repeatCount="indefinite" />
        </path>
        <circle r="3.85" fill="#60a5fa" opacity="0">
          <animateMotion path="M611 197.5 L644.23 197.5" dur="5.678s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3329;0.4033;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3065;0.3329;0.4456;0.472;1" dur="5.678s" repeatCount="indefinite" />
        </circle>
        <path d="M833 197.5 L866.23 197.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.69" pathLength="1" strokeDasharray="0.5 2" strokeDashoffset="0.5" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.5;0.5;-0.5;-1;-1" keyTimes="0;0.4456;0.516;0.5513;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.678s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4456;0.4474;0.5513;0.553;1" dur="5.678s" repeatCount="indefinite" />
        </path>
        <circle r="3.85" fill="#60a5fa" opacity="0">
          <animateMotion path="M833 197.5 L866.23 197.5" dur="5.678s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4456;0.516;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4192;0.4456;0.5583;0.5847;1" dur="5.678s" repeatCount="indefinite" />
        </circle>
        <path d="M966 233 L966 258.23" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.69" pathLength="1" strokeDasharray="0.5 2" strokeDashoffset="0.5" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.5;0.5;-0.5;-1;-1" keyTimes="0;0.5583;0.6288;0.664;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.678s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5583;0.5601;0.664;0.6658;1" dur="5.678s" repeatCount="indefinite" />
        </path>
        <circle r="3.85" fill="#60a5fa" opacity="0">
          <animateMotion path="M966 233 L966 258.23" dur="5.678s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5583;0.6288;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5319;0.5583;0.671;0.6975;1" dur="5.678s" repeatCount="indefinite" />
        </circle>
        <path d="M1065 294.5 L1074 294.5 Q1082 294.5 1082 286.5 L1082 205.5 Q1082 197.5 1090 197.5 L1098.23 197.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="3.69" pathLength="1" strokeDasharray="0.31 2" strokeDashoffset="0.31" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.31;0.31;-0.69;-1;-1" keyTimes="0;0.671;0.7415;0.7631;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="5.678s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.671;0.6728;0.7631;0.7649;1" dur="5.678s" repeatCount="indefinite" />
        </path>
        <circle r="3.85" fill="#60a5fa" opacity="0">
          <animateMotion path="M1065 294.5 L1074 294.5 Q1082 294.5 1082 286.5 L1082 205.5 Q1082 197.5 1090 197.5 L1098.23 197.5" dur="5.678s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.671;0.7415;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6446;0.671;0.7415;0.7679;1" dur="5.678s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="1102" y="789" width="224" height="53" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.54" />
        <path d="M1112 806.5 H1140" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.54" strokeLinecap="round" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="1148" y="809.87">
            THE CUSTOMER&#39;S PATH
          </tspan>
        </text>
        <path d="M1112 824.5 H1140" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.54" strokeLinecap="round" strokeDasharray="1.54 3.85" />
        <text fontSize="8" fontWeight="700" letterSpacing="0.48" fill="#9d9fa0">
          <tspan x="1148" y="827.34">
            WHERE IT HAPPENS, WHAT FIXES IT
          </tspan>
        </text>
      </g>
    </svg>
  );
}
