217 lines
33 KiB
HTML
217 lines
33 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="description" content="Skiply.ai – Connected systems. Designed to connect a product to its second life." />
|
||
<title>Skiply.ai – Connected Systems</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&display=swap"
|
||
rel="stylesheet" />
|
||
|
||
<link rel="stylesheet" href="skiply-connected-systems.css" />
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<section class="connected" id="connected-systems">
|
||
<div class="connected__inner">
|
||
|
||
<!-- Heading -->
|
||
<header class="connected__header">
|
||
<p class="connected__eyebrow">Connected systems</p>
|
||
<h2 class="connected__title">Designed to connect a product to its second life</h2>
|
||
</header>
|
||
|
||
<!-- Shoe scan stage: plain product photo + CSS/JS-built wireframe scan effect -->
|
||
<div class="connected__banner">
|
||
<div class="shoe-stage" id="shoeStage">
|
||
<div class="shoe-stage__glow" aria-hidden="true"></div>
|
||
|
||
<img class="shoe-stage__img" src="../assets/connected-systems/Shoe_trans.png"
|
||
alt="Sneaker being scanned by Skiply's AI" />
|
||
|
||
<!-- <div class="shoe-stage__mesh-clip" id="meshClip" aria-hidden="true">
|
||
<div class="shoe-stage__mesh" id="shoeMesh"></div>
|
||
</div> -->
|
||
<div class="shoe-stage__horizon" id="scanHorizon" aria-hidden="true"></div>
|
||
<div class="shoe-stage__particles" id="scanParticles" aria-hidden="true"></div>
|
||
<div class="shoe-stage__ambient" id="ambientParticles" aria-hidden="true"></div>
|
||
|
||
<span class="scan-label scan-label--condition">
|
||
<img class="scan-label__icon" src="../assets/connected-systems/label-icon-condition.svg" alt="" />
|
||
<span class="scan-label__text">
|
||
<span class="scan-label__key">Condition</span>
|
||
<strong class="scan-label__value">New</strong>
|
||
</span>
|
||
</span>
|
||
<span class="scan-label scan-label--resale">
|
||
<img class="scan-label__icon" src="../assets/connected-systems/label-icon-resale.svg" alt="" />
|
||
<span class="scan-label__text">
|
||
<span class="scan-label__key">Resale</span>
|
||
<strong class="scan-label__value">In-Store</strong>
|
||
</span>
|
||
</span>
|
||
<span class="scan-label scan-label--market">
|
||
<img class="scan-label__icon" src="../assets/connected-systems/label-icon-market.svg" alt="" />
|
||
<span class="scan-label__text">
|
||
<span class="scan-label__key">Market</span>
|
||
<strong class="scan-label__value">High Demand</strong>
|
||
</span>
|
||
</span>
|
||
<span class="scan-label scan-label--value">
|
||
<img class="scan-label__icon" src="../assets/connected-systems/label-icon-value.svg" alt="" />
|
||
<span class="scan-label__text">
|
||
<span class="scan-label__key">Value</span>
|
||
<strong class="scan-label__value">$110</strong>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Light connector: carries the horizon beam down into the tree -->
|
||
<!-- <div class="connected__flow" id="connectedFlow" aria-hidden="true">
|
||
<span class="connected__flow-line"></span>
|
||
<span class="connected__flow-dot"></span>
|
||
</div> -->
|
||
|
||
<!-- Distribution tree: logo fanning out to routing options -->
|
||
<div class="connected__tree">
|
||
<svg class="connected__branches" id="treeSvg" viewBox="0 0 1201 453" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||
|
||
<g class="connected__branch-group" data-index="0">
|
||
<g filter="url(#filter0_f_323_255)"><path d="M70.4385 388.25C68.376 388.25 66.3135 388.25 64.251 388.25C64.1674 375.25 64.0838 362.25 64.0002 349.25C63.9979 348.824 64.0069 348.401 64.0273 347.978C64.3508 335.992 75.2542 325.508 87.3447 325.703C241.678 324.711 396.011 323.719 550.345 322.726C557.521 322.836 563.872 316.308 563.619 309.25C563.197 243.614 562.775 177.978 562.353 112.342C562.267 98.9778 562.181 85.6139 562.095 72.25C562.08 70.062 562.937 67.9635 564.485 66.4164C566.031 64.8692 568.142 64 570.345 64C572.547 64 574.658 64.8692 576.205 66.4164C577.752 67.9635 578.609 70.062 578.595 72.25C578.509 85.6139 578.423 98.9778 578.337 112.342C577.915 177.978 577.493 243.614 577.071 309.25C577.335 323.498 564.474 336.182 550.345 335.774C396.011 334.781 241.678 333.789 87.3447 332.797C78.9102 332.532 71.0623 339.811 70.7207 348.338C70.7021 348.641 70.6916 348.944 70.6893 349.25C70.6057 362.25 70.5221 375.25 70.4385 388.25Z" fill="#0066FF" fill-opacity="0.45"/></g>
|
||
<g filter="url(#filter1_f_323_255)"><path d="M70.4385 388.25C68.376 388.25 66.3135 388.25 64.251 388.25C64.1674 375.25 64.0838 362.25 64.0002 349.25C63.9979 348.824 64.0069 348.401 64.0273 347.978C64.3508 335.992 75.2542 325.508 87.3447 325.703C241.678 324.711 396.011 323.719 550.345 322.726C557.521 322.836 563.872 316.308 563.619 309.25C563.197 243.614 562.775 177.978 562.353 112.342C562.267 98.9778 562.181 85.6139 562.095 72.25C562.08 70.062 562.937 67.9635 564.485 66.4164C566.031 64.8692 568.142 64 570.345 64C572.547 64 574.658 64.8692 576.205 66.4164C577.752 67.9635 578.609 70.062 578.595 72.25C578.509 85.6139 578.423 98.9778 578.337 112.342C577.915 177.978 577.493 243.614 577.071 309.25C577.335 323.498 564.474 336.182 550.345 335.774C396.011 334.781 241.678 333.789 87.3447 332.797C78.9102 332.532 71.0623 339.811 70.7207 348.338C70.7021 348.641 70.6916 348.944 70.6893 349.25C70.6057 362.25 70.5221 375.25 70.4385 388.25Z" fill="#0066FF" fill-opacity="0.25"/></g>
|
||
<path d="M67.8135 388.25C67.501 388.25 67.1885 388.25 66.876 388.25C66.8633 375.25 66.8506 362.25 66.838 349.25C66.8376 348.875 66.8473 348.503 66.8669 348.131C67.1981 337.612 76.8053 328.488 87.3447 328.713C241.678 328.562 396.011 328.412 550.345 328.262C560.471 328.498 569.584 319.358 569.326 309.25C569.262 243.614 569.198 177.978 569.134 112.342C569.121 98.9778 569.108 85.6139 569.095 72.25C569.094 71.9185 569.226 71.6005 569.46 71.3661C569.695 71.1317 570.013 71 570.345 71C570.677 71 570.995 71.1317 571.229 71.3661C571.464 71.6005 571.595 71.9185 571.595 72.25C571.582 85.6139 571.569 98.9778 571.556 112.342C571.492 177.978 571.428 243.614 571.364 309.25C571.624 320.448 561.525 330.52 550.345 330.238C396.011 330.088 241.678 329.938 87.3447 329.787C77.3592 329.552 68.215 338.191 67.8811 348.186C67.8617 348.539 67.8518 348.893 67.8515 349.25C67.8388 362.25 67.8261 375.25 67.8135 388.25Z" fill="url(#paint0_linear_323_255)"/>
|
||
<path d="M67.8135 388.25C67.501 388.25 67.1885 388.25 66.876 388.25C66.8633 375.25 66.8506 362.25 66.838 349.25C66.8376 348.875 66.8473 348.503 66.8669 348.131C67.1981 337.612 76.8053 328.488 87.3447 328.713C241.678 328.562 396.011 328.412 550.345 328.262C560.471 328.498 569.584 319.358 569.326 309.25C569.262 243.614 569.198 177.978 569.134 112.342C569.121 98.9778 569.108 85.6139 569.095 72.25C569.094 71.9185 569.226 71.6005 569.46 71.3661C569.695 71.1317 570.013 71 570.345 71C570.677 71 570.995 71.1317 571.229 71.3661C571.464 71.6005 571.595 71.9185 571.595 72.25C571.582 85.6139 571.569 98.9778 571.556 112.342C571.492 177.978 571.428 243.614 571.364 309.25C571.624 320.448 561.525 330.52 550.345 330.238C396.011 330.088 241.678 329.938 87.3447 329.787C77.3592 329.552 68.215 338.191 67.8811 348.186C67.8617 348.539 67.8518 348.893 67.8515 349.25C67.8388 362.25 67.8261 375.25 67.8135 388.25Z" fill="url(#paint1_linear_323_255)"/>
|
||
</g>
|
||
|
||
<g class="connected__branch-group" data-index="1">
|
||
<g filter="url(#filter4_f_323_255)"><path d="M337.438 388.25C335.376 388.25 333.313 388.25 331.251 388.25C331.179 380.583 331.107 372.917 331.035 365.25C331.021 363.519 331.198 361.779 331.568 360.079C333.673 349.693 343.629 341.555 354.345 341.645C424.678 340.985 495.011 340.325 565.345 339.665C573.025 339.753 579.762 332.757 579.465 325.25C578.761 250.239 578.057 175.228 577.353 100.217C577.267 91.0611 577.181 81.9056 577.095 72.75C577.074 70.562 577.925 68.4635 579.472 66.9164C581.019 65.3692 583.136 64.5 585.345 64.5C587.554 64.5 589.67 65.3692 591.217 66.9164C592.765 68.4635 593.616 70.562 593.595 72.75C593.509 81.9056 593.423 91.0611 593.337 100.217C592.633 175.228 591.929 250.239 591.225 325.25C591.446 339.049 578.971 351.266 565.345 350.835C495.011 350.175 424.678 349.515 354.345 348.855C346.912 348.632 339.747 354.203 338.106 361.558C337.819 362.762 337.668 364.002 337.654 365.25C337.582 372.917 337.51 380.583 337.438 388.25Z" fill="#0066FF" fill-opacity="0.65"/></g>
|
||
<path d="M334.813 388.25C334.501 388.25 334.188 388.25 333.876 388.25C333.865 380.583 333.854 372.917 333.843 365.25C333.841 363.724 334.007 362.196 334.342 360.706C336.25 351.607 345.022 344.557 354.345 344.704C424.678 344.604 495.011 344.504 565.345 344.404C575.548 344.637 584.719 335.427 584.454 325.25C584.347 250.239 584.24 175.228 584.134 100.217C584.121 91.0611 584.108 81.9056 584.095 72.75C584.094 72.4185 584.226 72.1005 584.46 71.8661C584.694 71.6317 585.013 71.5 585.345 71.5C585.677 71.5 585.995 71.6317 586.229 71.8661C586.464 72.1005 586.595 72.4185 586.595 72.75C586.582 81.9056 586.569 91.0611 586.556 100.217C586.449 175.228 586.342 250.239 586.236 325.25C586.489 336.38 576.448 346.381 565.345 346.096C495.011 345.996 424.678 345.896 354.345 345.796C345.519 345.63 337.17 352.29 335.333 360.931C335.01 362.345 334.848 363.797 334.846 365.25C334.835 372.917 334.824 380.583 334.813 388.25Z" fill="url(#paint4_linear_323_255)"/>
|
||
<path d="M334.813 388.25C334.501 388.25 334.188 388.25 333.876 388.25C333.865 380.583 333.854 372.917 333.843 365.25C333.841 363.724 334.007 362.196 334.342 360.706C336.25 351.607 345.022 344.557 354.345 344.704C424.678 344.604 495.011 344.504 565.345 344.404C575.548 344.637 584.719 335.427 584.454 325.25C584.347 250.239 584.24 175.228 584.134 100.217C584.121 91.0611 584.108 81.9056 584.095 72.75C584.094 72.4185 584.226 72.1005 584.46 71.8661C584.694 71.6317 585.013 71.5 585.345 71.5C585.677 71.5 585.995 71.6317 586.229 71.8661C586.464 72.1005 586.595 72.4185 586.595 72.75C586.582 81.9056 586.569 91.0611 586.556 100.217C586.449 175.228 586.342 250.239 586.236 325.25C586.489 336.38 576.448 346.381 565.345 346.096C495.011 345.996 424.678 345.896 354.345 345.796C345.519 345.63 337.17 352.29 335.333 360.931C335.01 362.345 334.848 363.797 334.846 365.25C334.835 372.917 334.824 380.583 334.813 388.25Z" fill="url(#paint5_linear_323_255)"/>
|
||
</g>
|
||
|
||
<g class="connected__branch-group" data-index="2">
|
||
<g filter="url(#filter6_f_323_255)"><path d="M599.095 73.25C599.928 73.25 600.761 73.25 601.595 73.25C601.582 78.5 601.569 83.75 601.556 89C601.321 183.5 601.087 278 600.853 372.5C600.84 377.75 600.826 383 600.813 388.25C600.813 388.374 600.764 388.493 600.676 388.581C600.588 388.668 600.469 388.718 600.345 388.718C600.221 388.718 600.102 388.668 600.014 388.581C599.926 388.493 599.876 388.374 599.876 388.25C599.863 383 599.85 377.75 599.837 372.5C599.603 278 599.368 183.5 599.134 89C599.121 83.75 599.108 78.5 599.095 73.25Z" fill="#0066FF" fill-opacity="0.65"/></g>
|
||
<path d="M599.095 73.25C599.928 73.25 600.761 73.25 601.595 73.25C601.582 78.5 601.569 83.75 601.556 89C601.321 183.5 601.087 278 600.853 372.5C600.84 377.75 600.826 383 600.813 388.25C600.813 388.374 600.764 388.493 600.676 388.581C600.588 388.668 600.469 388.718 600.345 388.718C600.221 388.718 600.102 388.668 600.014 388.581C599.926 388.493 599.876 388.374 599.876 388.25C599.863 383 599.85 377.75 599.837 372.5C599.603 278 599.368 183.5 599.134 89C599.121 83.75 599.108 78.5 599.095 73.25Z" fill="url(#paint8_linear_323_255)"/>
|
||
<path d="M599.095 73.25C599.928 73.25 600.761 73.25 601.595 73.25C601.582 78.5 601.569 83.75 601.556 89C601.321 183.5 601.087 278 600.853 372.5C600.84 377.75 600.826 383 600.813 388.25C600.813 388.374 600.764 388.493 600.676 388.581C600.588 388.668 600.469 388.718 600.345 388.718C600.221 388.718 600.102 388.668 600.014 388.581C599.926 388.493 599.876 388.374 599.876 388.25C599.863 383 599.85 377.75 599.837 372.5C599.603 278 599.368 183.5 599.134 89C599.121 83.75 599.108 78.5 599.095 73.25Z" fill="url(#paint9_linear_323_255)"/>
|
||
</g>
|
||
|
||
<g class="connected__branch-group" data-index="3">
|
||
<g filter="url(#filter5_f_323_255)"><path d="M863.251 388.25C865.313 388.25 867.376 388.25 869.438 388.25C869.511 380.583 869.583 372.917 869.655 365.25C869.669 363.539 869.496 361.818 869.134 360.136C867.052 349.725 857.081 341.553 846.345 341.645C776.011 340.983 705.678 340.322 635.345 339.66C627.667 339.748 620.933 332.754 621.23 325.25C621.932 250.556 622.635 175.861 623.337 101.167C623.423 92.0278 623.509 82.8889 623.595 73.75C623.616 71.562 622.765 69.4635 621.217 67.9164C619.67 66.3692 617.554 65.5 615.345 65.5C613.136 65.5 611.019 66.3692 609.472 67.9164C607.925 69.4635 607.074 71.562 607.095 73.75C607.181 82.8889 607.267 92.0278 607.353 101.167C608.055 175.861 608.757 250.556 609.46 325.25C609.238 339.052 621.716 351.27 635.345 350.84C705.678 350.178 776.011 349.517 846.345 348.855C853.792 348.632 860.967 354.225 862.592 361.599C862.873 362.79 863.021 364.016 863.035 365.25C863.107 372.917 863.179 380.583 863.251 388.25Z" fill="#0066FF" fill-opacity="0.65"/></g>
|
||
<path d="M865.876 388.25C866.188 388.25 866.501 388.25 866.813 388.25C866.824 380.583 866.835 372.917 866.846 365.25C866.849 363.741 866.686 362.231 866.359 360.757C864.471 351.634 855.686 344.556 846.345 344.704C776.011 344.604 705.678 344.503 635.345 344.403C625.142 344.636 615.972 335.426 616.236 325.25C616.343 250.556 616.449 175.861 616.556 101.167C616.569 92.0278 616.582 82.8889 616.595 73.75C616.595 73.4185 616.464 73.1005 616.23 72.8661C615.995 72.6317 615.677 72.5 615.345 72.5C615.013 72.5 614.694 72.6317 614.46 72.8661C614.226 73.1005 614.094 73.4185 614.095 73.75C614.108 82.8889 614.121 92.0278 614.134 101.167C614.24 175.861 614.347 250.556 614.453 325.25C614.2 336.38 624.241 346.382 635.345 346.097C705.678 345.997 776.011 345.896 846.345 345.796C855.187 345.629 863.549 352.316 865.367 360.978C865.683 362.378 865.841 363.813 865.843 365.25C865.854 372.917 865.865 380.583 865.876 388.25Z" fill="url(#paint6_linear_323_255)"/>
|
||
<path d="M865.876 388.25C866.188 388.25 866.501 388.25 866.813 388.25C866.824 380.583 866.835 372.917 866.846 365.25C866.849 363.741 866.686 362.231 866.359 360.757C864.471 351.634 855.686 344.556 846.345 344.704C776.011 344.604 705.678 344.503 635.345 344.403C625.142 344.636 615.972 335.426 616.236 325.25C616.343 250.556 616.449 175.861 616.556 101.167C616.569 92.0278 616.582 82.8889 616.595 73.75C616.595 73.4185 616.464 73.1005 616.23 72.8661C615.995 72.6317 615.677 72.5 615.345 72.5C615.013 72.5 614.694 72.6317 614.46 72.8661C614.226 73.1005 614.094 73.4185 614.095 73.75C614.108 82.8889 614.121 92.0278 614.134 101.167C614.24 175.861 614.347 250.556 614.453 325.25C614.2 336.38 624.241 346.382 635.345 346.097C705.678 345.997 776.011 345.896 846.345 345.796C855.187 345.629 863.549 352.316 865.367 360.978C865.683 362.378 865.841 363.813 865.843 365.25C865.854 372.917 865.865 380.583 865.876 388.25Z" fill="url(#paint7_linear_323_255)"/>
|
||
</g>
|
||
|
||
<g class="connected__branch-group" data-index="4">
|
||
<g filter="url(#filter2_f_323_255)"><path d="M1130.25 388.25C1132.31 388.25 1134.38 388.25 1136.44 388.25C1136.52 375.25 1136.61 362.25 1136.69 349.25C1136.69 348.824 1136.68 348.401 1136.66 347.978C1136.34 335.992 1125.44 325.508 1113.34 325.703C959.011 324.711 804.678 323.719 650.345 322.726C643.168 322.836 636.817 316.308 637.071 309.25C637.493 243.614 637.915 177.978 638.337 112.342C638.423 98.9778 638.509 85.6139 638.595 72.25C638.609 70.062 637.752 67.9635 636.205 66.4164C634.658 64.8692 632.547 64 630.345 64C628.142 64 626.031 64.8692 624.485 66.4164C622.937 67.9635 622.08 70.062 622.095 72.25C622.181 85.6139 622.267 98.9778 622.353 112.342C622.775 177.978 623.197 243.614 623.619 309.25C623.354 323.498 636.215 336.182 650.345 335.774C804.678 334.781 959.011 333.789 1113.34 332.797C1121.78 332.532 1129.63 339.811 1129.97 348.338C1129.99 348.641 1130 348.944 1130 349.25C1130.08 362.25 1130.17 375.25 1130.25 388.25Z" fill="#0066FF" fill-opacity="0.65"/></g>
|
||
<g filter="url(#filter3_f_323_255)"><path d="M1132.88 388.25C1133.19 388.25 1133.5 388.25 1133.81 388.25C1133.83 375.25 1133.84 362.25 1133.85 349.25C1133.85 348.875 1133.84 348.503 1133.82 348.131C1133.49 337.612 1123.88 328.488 1113.34 328.713C959.011 328.562 804.678 328.412 650.345 328.262C640.218 328.498 631.106 319.358 631.364 309.25C631.428 243.614 631.492 177.978 631.556 112.342C631.569 98.9778 631.582 85.6139 631.595 72.25C631.595 71.9185 631.464 71.6005 631.229 71.3661C630.995 71.1317 630.677 71 630.345 71C630.013 71 629.695 71.1317 629.46 71.3661C629.226 71.6005 629.094 71.9185 629.095 72.25C629.108 85.6139 629.121 98.9778 629.134 112.342C629.198 177.978 629.262 243.614 629.326 309.25C629.066 320.448 639.165 330.52 650.345 330.238C804.678 330.088 959.011 329.938 1113.34 329.787C1123.33 329.552 1132.47 338.191 1132.81 348.186C1132.83 348.539 1132.84 348.893 1132.84 349.25C1132.85 362.25 1132.86 375.25 1132.88 388.25Z" fill="url(#paint2_linear_323_255)"/></g>
|
||
<path d="M1132.88 388.25C1133.19 388.25 1133.5 388.25 1133.81 388.25C1133.83 375.25 1133.84 362.25 1133.85 349.25C1133.85 348.875 1133.84 348.503 1133.82 348.131C1133.49 337.612 1123.88 328.488 1113.34 328.713C959.011 328.562 804.678 328.412 650.345 328.262C640.218 328.498 631.106 319.358 631.364 309.25C631.428 243.614 631.492 177.978 631.556 112.342C631.569 98.9778 631.582 85.6139 631.595 72.25C631.595 71.9185 631.464 71.6005 631.229 71.3661C630.995 71.1317 630.677 71 630.345 71C630.013 71 629.695 71.1317 629.46 71.3661C629.226 71.6005 629.094 71.9185 629.095 72.25C629.108 85.6139 629.121 98.9778 629.134 112.342C629.198 177.978 629.262 243.614 629.326 309.25C629.066 320.448 639.165 330.52 650.345 330.238C804.678 330.088 959.011 329.938 1113.34 329.787C1123.33 329.552 1132.47 338.191 1132.81 348.186C1132.83 348.539 1132.84 348.893 1132.84 349.25C1132.85 362.25 1132.86 375.25 1132.88 388.25Z" fill="url(#paint3_linear_323_255)"/>
|
||
</g>
|
||
|
||
<g class="connected__node" data-index="0">
|
||
<g filter="url(#filter7_f_323_255)"><circle cx="67.3447" cy="390.25" r="18" fill="#0060EF" fill-opacity="0.1"/></g>
|
||
<g filter="url(#filter8_f_323_255)"><circle cx="67.3448" cy="390.25" r="10.1739" fill="url(#paint10_radial_323_255)" fill-opacity="0.3"/></g>
|
||
<circle cx="67.3443" cy="390.251" r="7.04348" fill="url(#paint11_linear_323_255)"/>
|
||
</g>
|
||
<g class="connected__node" data-index="1">
|
||
<g filter="url(#filter9_f_323_255)"><circle cx="334.345" cy="390.25" r="18" fill="#0060EF" fill-opacity="0.1"/></g>
|
||
<g filter="url(#filter10_f_323_255)"><circle cx="334.345" cy="390.25" r="10.1739" fill="url(#paint12_radial_323_255)" fill-opacity="0.3"/></g>
|
||
<circle cx="334.344" cy="390.251" r="7.04348" fill="url(#paint13_linear_323_255)"/>
|
||
</g>
|
||
<g class="connected__node" data-index="2">
|
||
<g filter="url(#filter11_f_323_255)"><circle cx="600.345" cy="390.25" r="18" fill="#0060EF" fill-opacity="0.1"/></g>
|
||
<g filter="url(#filter12_f_323_255)"><circle cx="600.345" cy="390.25" r="10.1739" fill="url(#paint14_radial_323_255)" fill-opacity="0.3"/></g>
|
||
<circle cx="600.344" cy="390.251" r="7.04348" fill="url(#paint15_linear_323_255)"/>
|
||
</g>
|
||
<g class="connected__node" data-index="3">
|
||
<g filter="url(#filter13_f_323_255)"><circle cx="866.345" cy="390.25" r="18" fill="#0060EF" fill-opacity="0.1"/></g>
|
||
<g filter="url(#filter14_f_323_255)"><circle cx="866.345" cy="390.25" r="10.1739" fill="url(#paint16_radial_323_255)" fill-opacity="0.3"/></g>
|
||
<circle cx="866.344" cy="390.251" r="7.04348" fill="url(#paint17_linear_323_255)"/>
|
||
</g>
|
||
<g class="connected__node" data-index="4">
|
||
<g filter="url(#filter15_f_323_255)"><circle cx="1133.34" cy="390.25" r="18" fill="#0060EF" fill-opacity="0.1"/></g>
|
||
<g filter="url(#filter16_f_323_255)"><circle cx="1133.34" cy="390.25" r="10.1739" fill="url(#paint18_radial_323_255)" fill-opacity="0.3"/></g>
|
||
<circle cx="1133.34" cy="390.251" r="7.04348" fill="url(#paint19_linear_323_255)"/>
|
||
</g>
|
||
|
||
<defs>
|
||
<filter id="filter0_f_323_255" x="0" y="0" width="642.595" height="452.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<filter id="filter1_f_323_255" x="0" y="0" width="642.595" height="452.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<filter id="filter2_f_323_255" x="558.095" y="0" width="642.595" height="452.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<filter id="filter3_f_323_255" x="621.095" y="63" width="520.757" height="333.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="4" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<filter id="filter4_f_323_255" x="267.034" y="0.5" width="390.561" height="451.75" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<filter id="filter5_f_323_255" x="543.095" y="1.5" width="390.561" height="450.75" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<filter id="filter6_f_323_255" x="535.095" y="9.25" width="130.5" height="443.467" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<filter id="filter7_f_323_255" x="38.3882" y="361.293" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<filter id="filter8_f_323_255" x="51.6926" y="374.598" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<filter id="filter9_f_323_255" x="305.388" y="361.293" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<filter id="filter10_f_323_255" x="318.693" y="374.598" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<filter id="filter11_f_323_255" x="571.388" y="361.293" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<filter id="filter12_f_323_255" x="584.693" y="374.598" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<filter id="filter13_f_323_255" x="837.388" y="361.293" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<filter id="filter14_f_323_255" x="850.693" y="374.598" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<filter id="filter15_f_323_255" x="1104.39" y="361.293" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<filter id="filter16_f_323_255" x="1117.69" y="374.598" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_323_255"/></filter>
|
||
<linearGradient id="paint0_linear_323_255" x1="318.845" y1="-7.75005" x2="240.845" y2="337.75" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
|
||
<linearGradient id="paint1_linear_323_255" x1="318.845" y1="-7.75005" x2="240.845" y2="337.75" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
|
||
<linearGradient id="paint2_linear_323_255" x1="881.845" y1="-7.74998" x2="881.845" y2="388.25" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0060EF"/></linearGradient>
|
||
<linearGradient id="paint3_linear_323_255" x1="881.845" y1="-7.75005" x2="959.845" y2="337.75" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
|
||
<linearGradient id="paint4_linear_323_255" x1="459.845" y1="-4.25005" x2="325.477" y2="295.397" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
|
||
<linearGradient id="paint5_linear_323_255" x1="459.845" y1="-4.25005" x2="325.477" y2="295.397" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
|
||
<linearGradient id="paint6_linear_323_255" x1="740.845" y1="-4.25004" x2="875.212" y2="295.397" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
|
||
<linearGradient id="paint7_linear_323_255" x1="740.845" y1="-4.25004" x2="875.212" y2="295.397" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
|
||
<linearGradient id="paint8_linear_323_255" x1="600.345" y1="5.24999" x2="600.69" y2="339.408" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
|
||
<linearGradient id="paint9_linear_323_255" x1="600.345" y1="-0.750011" x2="600.69" y2="339.408" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
|
||
<radialGradient id="paint10_radial_323_255" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(66.1709 387.12) rotate(90) scale(16.8261)"><stop stop-color="white"/><stop offset="1" stop-color="#00D994"/></radialGradient>
|
||
<linearGradient id="paint11_linear_323_255" x1="64.6051" y1="384.381" x2="67.3443" y2="397.294" gradientUnits="userSpaceOnUse"><stop offset="0.0961538" stop-color="#BBD5FB"/><stop offset="0.546266" stop-color="#0060EF"/><stop offset="1" stop-color="#003789"/></linearGradient>
|
||
<radialGradient id="paint12_radial_323_255" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(333.171 387.12) rotate(90) scale(16.8261)"><stop stop-color="white"/><stop offset="1" stop-color="#00D994"/></radialGradient>
|
||
<linearGradient id="paint13_linear_323_255" x1="331.605" y1="384.381" x2="334.344" y2="397.294" gradientUnits="userSpaceOnUse"><stop offset="0.0961538" stop-color="#BBD5FB"/><stop offset="0.546266" stop-color="#0060EF"/><stop offset="1" stop-color="#003789"/></linearGradient>
|
||
<radialGradient id="paint14_radial_323_255" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(599.171 387.12) rotate(90) scale(16.8261)"><stop stop-color="white"/><stop offset="1" stop-color="#00D994"/></radialGradient>
|
||
<linearGradient id="paint15_linear_323_255" x1="597.605" y1="384.381" x2="600.344" y2="397.294" gradientUnits="userSpaceOnUse"><stop offset="0.0961538" stop-color="#BBD5FB"/><stop offset="0.546266" stop-color="#0060EF"/><stop offset="1" stop-color="#003789"/></linearGradient>
|
||
<radialGradient id="paint16_radial_323_255" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(865.171 387.12) rotate(90) scale(16.8261)"><stop stop-color="white"/><stop offset="1" stop-color="#00D994"/></radialGradient>
|
||
<linearGradient id="paint17_linear_323_255" x1="863.605" y1="384.381" x2="866.344" y2="397.294" gradientUnits="userSpaceOnUse"><stop offset="0.0961538" stop-color="#BBD5FB"/><stop offset="0.546266" stop-color="#0060EF"/><stop offset="1" stop-color="#003789"/></linearGradient>
|
||
<radialGradient id="paint18_radial_323_255" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1132.17 387.12) rotate(90) scale(16.8261)"><stop stop-color="white"/><stop offset="1" stop-color="#00D994"/></radialGradient>
|
||
<linearGradient id="paint19_linear_323_255" x1="1130.61" y1="384.381" x2="1133.34" y2="397.294" gradientUnits="userSpaceOnUse"><stop offset="0.0961538" stop-color="#BBD5FB"/><stop offset="0.546266" stop-color="#0060EF"/><stop offset="1" stop-color="#003789"/></linearGradient>
|
||
</defs>
|
||
</svg>
|
||
|
||
<ul class="connected__routes">
|
||
<li class="route">
|
||
<span class="route__badge"><img src="../assets/connected-systems/icon-resale.svg" alt="" /></span>
|
||
<span class="route__label">Resale</span>
|
||
</li>
|
||
<li class="route">
|
||
<span class="route__badge"><img src="../assets/connected-systems/icon-marketplace.svg" alt="" /></span>
|
||
<span class="route__label">Marketplace</span>
|
||
</li>
|
||
<li class="route">
|
||
<span class="route__badge"><img src="../assets/connected-systems/icon-recondition.svg" alt="" /></span>
|
||
<span class="route__label">Recondition</span>
|
||
</li>
|
||
<li class="route">
|
||
<span class="route__badge"><img src="../assets/connected-systems/icon-donation.svg" alt="" /></span>
|
||
<span class="route__label">Donation</span>
|
||
</li>
|
||
<li class="route">
|
||
<span class="route__badge"><img src="../assets/connected-systems/icon-recycling.svg" alt="" /></span>
|
||
<span class="route__label">Recycling</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<script src="skiply-connected-systems.js"></script>
|
||
</body>
|
||
|
||
</html>
|