<section class="supt-section-guardvision">
<div class="supt-section-guardvision__inner">
<div class="container">
<div class="row">
<div class="col-12">
<div class="supt-section-guardvision__image col-10">
<div class="supt-section-guardvision__image__inner">
<img src="/sites/gv/files/flmngr/superhuit/innovation/GuardVision-Outdoor-off.png" alt="GuardVision Outdoor" class="-off" />
<img src="/sites/gv/files/flmngr/superhuit/innovation/GuardVision-Outdoor-on.png" alt="GuardVision Outdoor" class="-on" />
<span class="supt-section-guardvision__image__zoom">
<svg width="1040" height="768" viewbox="0 0 1040 768" fill="none" xmlns="http://www.w3.org/2000/svg" preserveaspectratio="xMidYMid slice" class="supt-section-guardvision__image__zoom__radar">
<ellipse cx="539.5" cy="220.5" rx="54.5" ry="57.5" stroke="#ED002F" stroke-width="0.5" vector-effect="non-scaling-stroke" />
</svg>
<svg width="1040" height="768" viewbox="0 0 1040 768" fill="none" xmlns="http://www.w3.org/2000/svg" preserveaspectratio="xMidYMid slice" class="supt-section-guardvision__image__zoom__radar">
<ellipse cx="539.5" cy="220.5" rx="54.5" ry="57.5" stroke="#ED002F" stroke-width="0.5" vector-effect="non-scaling-stroke" />
</svg>
<svg width="1040" height="768" viewbox="0 0 1040 768" fill="none" xmlns="http://www.w3.org/2000/svg" preserveaspectratio="xMidYMid slice" class="supt-section-guardvision__image__zoom__radar">
<ellipse cx="539.5" cy="220.5" rx="54.5" ry="57.5" stroke="#ED002F" stroke-width="0.5" vector-effect="non-scaling-stroke" />
</svg>
<svg width="1040" height="768" viewbox="0 0 1040 768" fill="none" xmlns="http://www.w3.org/2000/svg" preserveaspectratio="xMidYMid slice" class="supt-section-guardvision__image__zoom__radar">
<ellipse cx="539.5" cy="220.5" rx="54.5" ry="57.5" stroke="#ED002F" stroke-width="0.5" vector-effect="non-scaling-stroke" />
</svg>
</span>
<img src="/sites/gv/files/flmngr/superhuit/innovation/GuardVision-Outdoor-circle.png" alt="" class="supt-section-guardvision__image__circle" />
</div>
<div class="supt-section-guardvision__image__star-wrapper">
<svg width="1040" height="768" viewbox="0 0 1040 768" fill="none" xmlns="http://www.w3.org/2000/svg" preserveaspectratio="xMidYMid slice" class="supt-section-guardvision__image__star">
<g filter="url(#filter0_d_10498_8391)">
<path d="M539.996 381.162C539.974 380.497 539.858 379.835 539.649 379.203C539.443 378.57 539.147 377.967 538.771 377.417C538.421 376.899 537.998 376.432 537.525 376.022C536.463 375.11 535.462 374.8 534.137 374.542C533.523 374.423 532.908 374.319 532.302 374.157C531.691 373.995 531.117 373.776 530.557 373.489C530.138 373.273 529.733 373.025 529.35 372.748C528.967 372.472 528.606 372.166 528.27 371.836C527.819 371.393 527.432 370.919 527.089 370.391C526.75 369.866 526.461 369.316 526.157 368.774C525.5 367.598 524.896 366.747 523.694 366.024C523.155 365.701 522.577 365.449 521.978 365.277C521.335 365.093 520.666 365 519.998 365C519.33 365 518.662 365.093 518.019 365.277C517.415 365.449 516.837 365.701 516.303 366.024C515.104 366.747 514.497 367.598 513.843 368.774C513.539 369.316 513.25 369.87 512.911 370.391C512.568 370.915 512.181 371.393 511.73 371.836C511.394 372.166 511.033 372.472 510.65 372.748C510.267 373.025 509.866 373.273 509.443 373.489C508.883 373.78 508.305 373.995 507.698 374.157C507.092 374.319 506.477 374.42 505.863 374.542C504.538 374.8 503.537 375.11 502.475 376.022C502.002 376.432 501.579 376.899 501.229 377.417C500.853 377.967 500.557 378.57 500.351 379.203C500.145 379.835 500.026 380.497 500.004 381.162C499.983 381.783 500.044 382.412 500.188 383.02C500.506 384.378 501.135 385.212 502.056 386.197C502.482 386.653 502.919 387.095 503.313 387.58C503.71 388.069 504.046 388.579 504.328 389.144C504.538 389.564 504.718 389.999 504.866 390.448C505.014 390.897 505.126 391.354 505.202 391.817C505.307 392.436 505.336 393.05 505.303 393.675C505.271 394.297 505.177 394.912 505.101 395.53C504.939 396.863 504.924 397.909 505.47 399.192C505.712 399.767 506.033 400.31 506.416 400.802C506.828 401.327 507.312 401.794 507.854 402.186C508.396 402.577 508.992 402.89 509.62 403.116C510.209 403.329 510.827 403.465 511.452 403.515C512.849 403.634 513.843 403.3 515.067 402.732C515.635 402.47 516.194 402.193 516.78 401.97C517.368 401.744 517.964 401.585 518.586 401.492C519.052 401.424 519.525 401.388 519.998 401.388C520.471 401.388 520.945 401.424 521.411 401.492C522.036 401.585 522.632 401.744 523.22 401.97C523.806 402.193 524.365 402.47 524.933 402.732C526.157 403.3 527.151 403.634 528.548 403.515C529.173 403.461 529.791 403.329 530.38 403.116C531.008 402.89 531.604 402.574 532.146 402.182C532.688 401.79 533.172 401.323 533.584 400.798C533.97 400.306 534.288 399.763 534.53 399.188C535.076 397.902 535.061 396.86 534.899 395.526C534.823 394.908 534.733 394.294 534.697 393.672C534.664 393.046 534.697 392.432 534.798 391.814C534.874 391.35 534.989 390.89 535.134 390.445C535.278 389.999 535.459 389.56 535.672 389.14C535.954 388.579 536.29 388.065 536.687 387.577C537.081 387.091 537.518 386.649 537.944 386.193C538.862 385.208 539.494 384.371 539.812 383.016C539.956 382.409 540.017 381.783 539.996 381.158V381.162ZM519.998 396.457C513.955 396.457 509.053 391.584 509.053 385.568C509.053 379.552 513.951 374.678 519.998 374.678C526.045 374.678 530.943 379.552 530.943 385.568C530.943 391.584 526.045 396.457 519.998 396.457Z" fill="white" />
<path d="M519.998 395.187C525.337 395.187 529.665 390.882 529.665 385.57C529.665 380.259 525.337 375.953 519.998 375.953C514.66 375.953 510.332 380.259 510.332 385.57C510.332 390.882 514.66 395.187 519.998 395.187Z" fill="white" />
</g>
<defs>
<filter id="filter0_d_10498_8391" x="492" y="357" width="56" height="54.5391" filterunits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stddeviation="4" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_10498_8391" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_10498_8391" result="shape" />
</filter>
</defs>
</svg>
</div>
</div>
<div class="supt-section-guardvision__content row justify-content-between">
<div class="col-12 col-md-3">
<div class="supt-section-guardvision__text">
<p>GuardVision™ Outdoor is our next generation outdoor camera detector with built-in Machine Learning algorithms running locally on the edge, making it one of the first EN certified devices running with AI</p>
</div>
<span class="supt-section-guardvision__mobile-line">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 130 389" fill="none" class="supt-section-guardvision__mobile-line__glow">
<g filter="url(#supt-innovation-shared-line-glow-effect)">
<path d="M65 0L65 325" stroke="white" stroke-width="2" vector-effect="non-scaling-stroke" />
</g>
</svg>
</span>
</div>
<div class="supt-section-guardvision__line col-12 col-md-2">
<svg xmlns="http://www.w3.org/2000/svg" width="173" height="93" viewbox="0 0 173 93" fill="none" class="-default">
<path opacity="0.24" d="M172 92L81.5858 1.58579C81.2107 1.21071 80.702 1 80.1716 1H0" stroke="white" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="301" height="221" viewbox="0 0 301 221" fill="none" class="-glow">
<g filter="url(#supt-innovation-shared-glow-effect)">
<path d="M236 156L145.586 65.5858C145.211 65.2107 144.702 65 144.172 65H64" stroke="white" stroke-width="2" />
</g>
</svg>
</div>
<div class="supt-section-guardvision__line col-12 col-md-2 offset-md-2">
<svg xmlns="http://www.w3.org/2000/svg" width="174" height="110" viewbox="0 0 174 110" fill="none" class="-default">
<path opacity="0.24" d="M1 1L108.414 108.414C108.789 108.789 109.298 109 109.828 109H174" stroke="white" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="302" height="238" viewbox="0 0 302 238" fill="none" class="-glow">
<g filter="url(#supt-innovation-shared-glow-effect)">
<path d="M65 65L172.414 172.414C172.789 172.789 173.298 173 173.828 173H238" stroke="white" stroke-width="2" />
</g>
</svg>
</div>
<div class="col-12 col-md-3">
<span class="supt-section-guardvision__mobile-line">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 130 389" fill="none" class="supt-section-guardvision__mobile-line__glow">
<g filter="url(#supt-innovation-shared-line-glow-effect)">
<path d="M65 0L65 325" stroke="white" stroke-width="2" vector-effect="non-scaling-stroke" />
</g>
</svg>
</span>
<div class="supt-section-guardvision__text">
<p>While our greatest reward is protecting and serving our customers, we were honoured in 2024 with several awards, including two prestigious Red Dot Design Awards for our innovative GuardVision™ Business and Outdoor cameras.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="supt-section-guardvision__horizontal-scroll">
<div class="supt-section-guardvision__horizontal-scroll__inner">
<span class="supt-section-guardvision__horizontal-scroll__line">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1440 130" fill="none" class="supt-section-guardvision__horizontal-scroll__line__glow">
<g filter="url(#filter0_dddddd_10260_136703)">
<path d="M1440 65L3.09944e-05 65" stroke="white" stroke-width="2" vector-effect="non-scaling-stroke" />
</g>
<defs>
<filter id="filter0_dddddd_10260_136703" x="-63.9999" y="0" width="1568" height="130" filterunits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stddeviation="2" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_10260_136703" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stddeviation="4" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0" />
<feBlend mode="normal" in2="effect1_dropShadow_10260_136703" result="effect2_dropShadow_10260_136703" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stddeviation="8" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0" />
<feBlend mode="normal" in2="effect2_dropShadow_10260_136703" result="effect3_dropShadow_10260_136703" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stddeviation="12" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0" />
<feBlend mode="normal" in2="effect3_dropShadow_10260_136703" result="effect4_dropShadow_10260_136703" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stddeviation="16" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0" />
<feBlend mode="normal" in2="effect4_dropShadow_10260_136703" result="effect5_dropShadow_10260_136703" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stddeviation="32" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0" />
<feBlend mode="normal" in2="effect5_dropShadow_10260_136703" result="effect6_dropShadow_10260_136703" />
<feBlend mode="normal" in="SourceGraphic" in2="effect6_dropShadow_10260_136703" result="shape" />
</filter>
</defs>
</svg>
<span class="supt-section-guardvision__horizontal-scroll__line__end">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewbox="0 0 26 26" fill="none">
<g filter="url(#filter0_dd_10333_14937)">
<circle cx="13" cy="13" r="5" fill="white" />
</g>
<defs>
<filter id="filter0_dd_10333_14937" x="0" y="0" width="26" height="26" filterunits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stddeviation="2" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_10333_14937" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stddeviation="4" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0" />
<feBlend mode="normal" in2="effect1_dropShadow_10333_14937" result="effect2_dropShadow_10333_14937" />
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_10333_14937" result="shape" />
</filter>
</defs>
</svg>
<span class="supt-section-guardvision__horizontal-scroll__line__end__radar"></span>
<span class="supt-section-guardvision__horizontal-scroll__line__end__radar"></span>
<span class="supt-section-guardvision__horizontal-scroll__line__end__radar"></span>
</span>
</span>
<div class="supt-section-guardvision__horizontal-scroll__image">
<video autoplay muted loop playsinline>
<source src="/sites/gv/files/flmngr/superhuit/innovation/innovation-arc.webm" type="video/webm">
<source src="/sites/gv/files/flmngr/superhuit/innovation/innovation-arc.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</section>
No notes defined.
<section class="supt-section-guardvision">
<div class="supt-section-guardvision__inner">
<div class="container">
<div class="row">
<div class="col-12">
<div class="supt-section-guardvision__image col-10">
<div class="supt-section-guardvision__image__inner">
<img src="/sites/gv/files/flmngr/superhuit/innovation/GuardVision-Outdoor-off.png" alt="GuardVision Outdoor" class="-off"/>
<img src="/sites/gv/files/flmngr/superhuit/innovation/GuardVision-Outdoor-on.png" alt="GuardVision Outdoor" class="-on"/>
<span class="supt-section-guardvision__image__zoom">
{% for i in 1..4 %}
<svg width="1040" height="768" viewbox="0 0 1040 768" fill="none" xmlns="http://www.w3.org/2000/svg" preserveaspectratio="xMidYMid slice" class="supt-section-guardvision__image__zoom__radar">
<ellipse cx="539.5" cy="220.5" rx="54.5" ry="57.5" stroke="#ED002F" stroke-width="0.5" vector-effect="non-scaling-stroke"/>
</svg>
{% endfor %}
</span>
<img src="/sites/gv/files/flmngr/superhuit/innovation/GuardVision-Outdoor-circle.png" alt="" class="supt-section-guardvision__image__circle"/>
</div>
<div class="supt-section-guardvision__image__star-wrapper">
<svg width="1040" height="768" viewbox="0 0 1040 768" fill="none" xmlns="http://www.w3.org/2000/svg" preserveaspectratio="xMidYMid slice" class="supt-section-guardvision__image__star">
<g filter="url(#filter0_d_10498_8391)">
<path d="M539.996 381.162C539.974 380.497 539.858 379.835 539.649 379.203C539.443 378.57 539.147 377.967 538.771 377.417C538.421 376.899 537.998 376.432 537.525 376.022C536.463 375.11 535.462 374.8 534.137 374.542C533.523 374.423 532.908 374.319 532.302 374.157C531.691 373.995 531.117 373.776 530.557 373.489C530.138 373.273 529.733 373.025 529.35 372.748C528.967 372.472 528.606 372.166 528.27 371.836C527.819 371.393 527.432 370.919 527.089 370.391C526.75 369.866 526.461 369.316 526.157 368.774C525.5 367.598 524.896 366.747 523.694 366.024C523.155 365.701 522.577 365.449 521.978 365.277C521.335 365.093 520.666 365 519.998 365C519.33 365 518.662 365.093 518.019 365.277C517.415 365.449 516.837 365.701 516.303 366.024C515.104 366.747 514.497 367.598 513.843 368.774C513.539 369.316 513.25 369.87 512.911 370.391C512.568 370.915 512.181 371.393 511.73 371.836C511.394 372.166 511.033 372.472 510.65 372.748C510.267 373.025 509.866 373.273 509.443 373.489C508.883 373.78 508.305 373.995 507.698 374.157C507.092 374.319 506.477 374.42 505.863 374.542C504.538 374.8 503.537 375.11 502.475 376.022C502.002 376.432 501.579 376.899 501.229 377.417C500.853 377.967 500.557 378.57 500.351 379.203C500.145 379.835 500.026 380.497 500.004 381.162C499.983 381.783 500.044 382.412 500.188 383.02C500.506 384.378 501.135 385.212 502.056 386.197C502.482 386.653 502.919 387.095 503.313 387.58C503.71 388.069 504.046 388.579 504.328 389.144C504.538 389.564 504.718 389.999 504.866 390.448C505.014 390.897 505.126 391.354 505.202 391.817C505.307 392.436 505.336 393.05 505.303 393.675C505.271 394.297 505.177 394.912 505.101 395.53C504.939 396.863 504.924 397.909 505.47 399.192C505.712 399.767 506.033 400.31 506.416 400.802C506.828 401.327 507.312 401.794 507.854 402.186C508.396 402.577 508.992 402.89 509.62 403.116C510.209 403.329 510.827 403.465 511.452 403.515C512.849 403.634 513.843 403.3 515.067 402.732C515.635 402.47 516.194 402.193 516.78 401.97C517.368 401.744 517.964 401.585 518.586 401.492C519.052 401.424 519.525 401.388 519.998 401.388C520.471 401.388 520.945 401.424 521.411 401.492C522.036 401.585 522.632 401.744 523.22 401.97C523.806 402.193 524.365 402.47 524.933 402.732C526.157 403.3 527.151 403.634 528.548 403.515C529.173 403.461 529.791 403.329 530.38 403.116C531.008 402.89 531.604 402.574 532.146 402.182C532.688 401.79 533.172 401.323 533.584 400.798C533.97 400.306 534.288 399.763 534.53 399.188C535.076 397.902 535.061 396.86 534.899 395.526C534.823 394.908 534.733 394.294 534.697 393.672C534.664 393.046 534.697 392.432 534.798 391.814C534.874 391.35 534.989 390.89 535.134 390.445C535.278 389.999 535.459 389.56 535.672 389.14C535.954 388.579 536.29 388.065 536.687 387.577C537.081 387.091 537.518 386.649 537.944 386.193C538.862 385.208 539.494 384.371 539.812 383.016C539.956 382.409 540.017 381.783 539.996 381.158V381.162ZM519.998 396.457C513.955 396.457 509.053 391.584 509.053 385.568C509.053 379.552 513.951 374.678 519.998 374.678C526.045 374.678 530.943 379.552 530.943 385.568C530.943 391.584 526.045 396.457 519.998 396.457Z" fill="white"/>
<path d="M519.998 395.187C525.337 395.187 529.665 390.882 529.665 385.57C529.665 380.259 525.337 375.953 519.998 375.953C514.66 375.953 510.332 380.259 510.332 385.57C510.332 390.882 514.66 395.187 519.998 395.187Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_10498_8391" x="492" y="357" width="56" height="54.5391" filterunits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stddeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_10498_8391"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_10498_8391" result="shape"/>
</filter>
</defs>
</svg>
</div>
</div>
<div class="supt-section-guardvision__content row justify-content-between">
<div class="col-12 col-md-3">
<div class="supt-section-guardvision__text">
<p>GuardVision™ Outdoor is our next generation outdoor camera detector with built-in Machine Learning algorithms running locally on the edge, making it one of the first EN certified devices running with AI</p>
</div>
{# Mobile glow line #}
<span class="supt-section-guardvision__mobile-line">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 130 389" fill="none" class="supt-section-guardvision__mobile-line__glow">
<g filter="url(#supt-innovation-shared-line-glow-effect)">
<path d="M65 0L65 325" stroke="white" stroke-width="2" vector-effect="non-scaling-stroke"/>
</g>
</svg>
</span>
</div>
<div
class="supt-section-guardvision__line col-12 col-md-2">
{# Desktop glow line #}
<svg xmlns="http://www.w3.org/2000/svg" width="173" height="93" viewbox="0 0 173 93" fill="none" class="-default">
<path opacity="0.24" d="M172 92L81.5858 1.58579C81.2107 1.21071 80.702 1 80.1716 1H0" stroke="white"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="301" height="221" viewbox="0 0 301 221" fill="none" class="-glow">
<g filter="url(#supt-innovation-shared-glow-effect)">
<path d="M236 156L145.586 65.5858C145.211 65.2107 144.702 65 144.172 65H64" stroke="white" stroke-width="2"/>
</g>
</svg>
</div>
<div
class="supt-section-guardvision__line col-12 col-md-2 offset-md-2">
{# Desktop glow line #}
<svg xmlns="http://www.w3.org/2000/svg" width="174" height="110" viewbox="0 0 174 110" fill="none" class="-default">
<path opacity="0.24" d="M1 1L108.414 108.414C108.789 108.789 109.298 109 109.828 109H174" stroke="white"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="302" height="238" viewbox="0 0 302 238" fill="none" class="-glow">
<g filter="url(#supt-innovation-shared-glow-effect)">
<path d="M65 65L172.414 172.414C172.789 172.789 173.298 173 173.828 173H238" stroke="white" stroke-width="2"/>
</g>
</svg>
</div>
<div
class="col-12 col-md-3">
{# Mobile glow line #}
<span class="supt-section-guardvision__mobile-line">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 130 389" fill="none" class="supt-section-guardvision__mobile-line__glow">
<g filter="url(#supt-innovation-shared-line-glow-effect)">
<path d="M65 0L65 325" stroke="white" stroke-width="2" vector-effect="non-scaling-stroke"/>
</g>
</svg>
</span>
<div class="supt-section-guardvision__text">
<p>While our greatest reward is protecting and serving our customers, we were honoured in 2024 with several awards, including two prestigious Red Dot Design Awards for our innovative GuardVision™ Business and Outdoor cameras.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="supt-section-guardvision__horizontal-scroll">
<div class="supt-section-guardvision__horizontal-scroll__inner">
<span class="supt-section-guardvision__horizontal-scroll__line">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1440 130" fill="none" class="supt-section-guardvision__horizontal-scroll__line__glow">
<g filter="url(#filter0_dddddd_10260_136703)">
<path d="M1440 65L3.09944e-05 65" stroke="white" stroke-width="2" vector-effect="non-scaling-stroke"/>
</g>
<defs>
<filter id="filter0_dddddd_10260_136703" x="-63.9999" y="0" width="1568" height="130" filterunits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stddeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_10260_136703"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stddeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_10260_136703" result="effect2_dropShadow_10260_136703"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stddeviation="8"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_10260_136703" result="effect3_dropShadow_10260_136703"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stddeviation="12"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect3_dropShadow_10260_136703" result="effect4_dropShadow_10260_136703"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stddeviation="16"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect4_dropShadow_10260_136703" result="effect5_dropShadow_10260_136703"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stddeviation="32"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect5_dropShadow_10260_136703" result="effect6_dropShadow_10260_136703"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect6_dropShadow_10260_136703" result="shape"/>
</filter>
</defs>
</svg>
<span class="supt-section-guardvision__horizontal-scroll__line__end">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewbox="0 0 26 26" fill="none">
<g filter="url(#filter0_dd_10333_14937)">
<circle cx="13" cy="13" r="5" fill="white"/>
</g>
<defs>
<filter id="filter0_dd_10333_14937" x="0" y="0" width="26" height="26" filterunits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stddeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_10333_14937"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stddeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0 0 0 0 0 0.184314 0 0 0 1 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_10333_14937" result="effect2_dropShadow_10333_14937"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_10333_14937" result="shape"/>
</filter>
</defs>
</svg>
{% for i in 1..3 %}
<span class="supt-section-guardvision__horizontal-scroll__line__end__radar"></span>
{% endfor %}
</span>
</span>
<div class="supt-section-guardvision__horizontal-scroll__image">
<video autoplay muted loop playsinline>
<source src="/sites/gv/files/flmngr/superhuit/innovation/innovation-arc.webm" type="video/webm">
<source src="/sites/gv/files/flmngr/superhuit/innovation/innovation-arc.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</section>
/* No context defined. */
import { Sizes } from '@/js/Sizes';
import { animate, createTimeline, onScroll, stagger } from 'animejs';
export class SectionGuardvision {
private $element: HTMLElement;
private $container: HTMLElement;
$imagesWrapper: HTMLElement;
$imageInner: HTMLElement;
$imageZoom: HTMLElement;
$imageZoomRadars: NodeListOf<HTMLElement>;
$imageZoomCircle: HTMLElement;
$imageStarWrapper: HTMLElement;
$imageStar: HTMLElement;
$lines: NodeListOf<SVGElement>;
$glowLines: NodeListOf<SVGElement>;
$mobileLines: NodeListOf<SVGElement>;
$mobileGlowLines: NodeListOf<SVGElement>;
$content: HTMLElement;
$texts: NodeListOf<HTMLElement>;
$horizontalScroll: HTMLElement;
$horizontalScrollInner: HTMLElement;
$horizontalScrollLine: HTMLElement;
$horizontalScrollGlow: HTMLElement;
$horizontalScrollImage: HTMLElement;
$horizontalScrollEnd: HTMLElement;
$horizontalScrollEndRadars: NodeListOf<HTMLElement>;
sizes: Sizes;
constructor($element: HTMLElement, $container: HTMLElement) {
this.$element = $element;
this.$container = $container;
this.$imagesWrapper = this.$element.querySelector(
'.supt-section-guardvision__image'
) as HTMLElement;
this.$imageInner = this.$imagesWrapper.querySelector(
'.supt-section-guardvision__image__inner'
) as HTMLElement;
this.$imageZoom = this.$imagesWrapper.querySelector(
'.supt-section-guardvision__image__zoom'
) as HTMLElement;
this.$imageZoomRadars = this.$imagesWrapper.querySelectorAll(
'.supt-section-guardvision__image__zoom__radar'
);
this.$imageZoomCircle = this.$imagesWrapper.querySelector(
'.supt-section-guardvision__image__circle'
) as HTMLElement;
this.$imageStarWrapper = this.$imagesWrapper.querySelector(
'.supt-section-guardvision__image__star-wrapper'
) as HTMLElement;
this.$imageStar = this.$imageStarWrapper.querySelector(
'.supt-section-guardvision__image__star'
) as HTMLElement;
this.$lines = this.$element.querySelectorAll('.supt-section-guardvision__line');
this.$glowLines = this.$element.querySelectorAll('.supt-section-guardvision__line .-glow');
this.$mobileLines = this.$element.querySelectorAll('.supt-section-guardvision__mobile-line');
this.$mobileGlowLines = this.$element.querySelectorAll(
'.supt-section-guardvision__mobile-line__glow'
);
this.$content = this.$element.querySelector(
'.supt-section-guardvision__content'
) as HTMLElement;
this.$texts = this.$element.querySelectorAll('.supt-section-guardvision__text');
this.$horizontalScroll = this.$element.querySelector(
'.supt-section-guardvision__horizontal-scroll'
) as HTMLElement;
this.$horizontalScrollInner = this.$horizontalScroll.querySelector(
'.supt-section-guardvision__horizontal-scroll__inner'
) as HTMLElement;
this.$horizontalScrollLine = this.$horizontalScroll.querySelector(
'.supt-section-guardvision__horizontal-scroll__line'
) as HTMLElement;
this.$horizontalScrollGlow = this.$horizontalScroll.querySelector(
'.supt-section-guardvision__horizontal-scroll__line__glow'
) as HTMLElement;
this.$horizontalScrollImage = this.$horizontalScroll.querySelector(
'.supt-section-guardvision__horizontal-scroll__image'
) as HTMLElement;
this.$horizontalScrollEnd = this.$horizontalScroll.querySelector(
'.supt-section-guardvision__horizontal-scroll__line__end'
) as HTMLElement;
this.$horizontalScrollEndRadars = this.$horizontalScroll.querySelectorAll(
'.supt-section-guardvision__horizontal-scroll__line__end__radar'
);
this.sizes = new Sizes(); // Singleton
this.setupScrollAnimations();
}
setupScrollAnimations() {
// Display default lines + update background color
animate([this.$lines, this.$mobileLines], {
opacity: 1,
duration: 300,
delay: stagger(100),
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'top top',
sync: 'play play reverse reverse',
onEnterForward: () => {
this.$container.style.setProperty('--supt-innovation-background-dark', '#501319');
},
onEnterBackward: () => {
this.$container.style.setProperty('--supt-innovation-background-dark', '#2c0e0f');
},
}),
});
// Glow lines
if (this.sizes.isDesktop) {
animate(this.$glowLines, {
strokeDashoffset: [230, 0],
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'top 2%',
leave: 'top 5%',
sync: true,
}),
});
} else {
animate(this.$mobileGlowLines, {
strokeDashoffset: [40, 0],
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'top 2%',
leave: 'top 5%',
sync: true,
}),
});
}
// Display texts
animate(this.$texts, {
opacity: 1,
duration: 500,
ease: 'easeInOutSine',
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'top 5%',
sync: 'play play reverse reverse',
}),
});
// Hide lines + texts
animate(this.$content, {
opacity: [1, 0],
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'top 10%',
leave: 'top 20%',
sync: true,
}),
});
// Display product image ON
const $onImage = this.$imagesWrapper.querySelector('.-on') as HTMLElement;
createTimeline({
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'top 20%',
sync: 'play play reverse reverse',
}),
})
// glow star scale
.add($onImage, {
opacity: 1,
duration: 300,
ease: 'linear',
})
.add([this.$imageZoom, this.$imageZoomCircle], {
opacity: 1,
duration: 300,
ease: 'linear',
});
// Animate zoom radars
animate(this.$imageZoomRadars, {
opacity: [1, 0],
scale: [1, 6],
duration: 2000,
loop: true,
ease: 'easeInOutSine',
delay: stagger(400, { ease: 'inQuad' }),
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'top 20%',
sync: 'play play pause pause',
}),
});
// Display image star
animate(this.$imageStar, {
opacity: 1,
duration: 500,
ease: 'easeInOutSine',
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'top 30%',
sync: 'play play reverse reverse',
}),
});
// Hide product except image star
animate(this.$imageInner, {
opacity: [1, 0],
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'top 40%',
leave: 'top 45%',
sync: true,
}),
});
// Zoom + move image star to center of viewport
animate(this.$imageStar, {
scale: [1, 1.3],
translate: '-50% -50%',
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'top 45%',
leave: 'top 50%',
sync: true,
}),
});
// Update container background on scroll => from dark to light
const $lightBackground = this.$container.querySelector(
'.supt-innovation-overview-page__background.-light'
) as HTMLElement;
animate($lightBackground, {
opacity: [0, 1],
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'top 45%',
leave: 'top 50%',
sync: true,
}),
});
/**
* Horizontal scroll part
*/
// Move horizontal scroll
animate(this.$horizontalScroll, {
translateX: ['100vw', '32vw'],
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'top 50%',
leave: 'top 60%',
sync: true,
}),
});
// Move star + line
animate([this.$imageStarWrapper, this.$horizontalScrollInner], {
x: '-108.5vw',
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'top 60%',
leave: 'bottom bottom',
sync: true,
}),
});
// Glow horizontal scroll + show end of line
createTimeline({
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'top 60%',
leave: 'bottom bottom',
sync: true,
}),
})
.add(this.$horizontalScrollGlow, {
scaleX: [0, 1],
translateY: ['-50%', '-50%'],
})
.add(this.$horizontalScrollEnd, {
scale: [0, 1],
translateY: ['-50%', '-50%'],
duration: 200,
});
// Add parallax on horizontal image on scroll
const $horizontalScrollImg = this.$horizontalScrollImage.querySelector(
'img'
) as HTMLImageElement;
animate($horizontalScrollImg, {
scale: [1.3, 1],
x: ['-10%', 0],
ease: 'linear',
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'top 60%',
leave: 'bottom bottom',
sync: true,
}),
});
// Move down horizontal scroll line
animate(this.$horizontalScrollLine, {
translateY: ['0%', '15vh'],
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'top 67%',
leave: 'bottom bottom',
sync: true,
}),
});
// Animate horizontal scroll end radars
animate(this.$horizontalScrollEndRadars, {
opacity: [1, 0],
scale: [0, 1],
translate: ['-50% -50%', '-50% -50%'],
duration: 2000,
loop: true,
ease: 'easeInOutSine',
delay: stagger(400, { ease: 'inQuad' }),
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'bottom bottom-=10%',
sync: 'play play pause pause',
}),
});
}
}
.supt-section-guardvision {
height: 600vh;
&__inner,
&__horizontal-scroll {
padding-top: 69px;
@media (min-width: $breakpoint-md) {
padding-top: 81px;
}
}
&__inner {
height: 100vh;
position: sticky;
top: 0;
display: flex;
align-items: center;
overflow: hidden;
}
.container {
position: relative;
}
&__image {
position: absolute;
top: 50%;
left: 50%;
height: 70%;
transform: translate(-50%, -52%);
z-index: 1;
@media (min-width: $breakpoint-sm) {
height: 80%;
}
@media (min-width: $breakpoint-md) {
transform: translate(-50%, -50%);
height: 100%;
}
&__inner {
position: absolute;
inset: 0;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
&.-on {
position: absolute;
inset: 0;
opacity: 0;
}
}
&__zoom {
position: absolute;
inset: 0;
opacity: 0;
&__radar {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform-origin: 48% 30%;
z-index: 1;
@media (min-width: $breakpoint-lg) {
transform-origin: 48% 28%;
}
@media (min-width: $breakpoint-xxl) {
transform-origin: 48% 30%;
}
}
}
&__circle {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
}
&__star-wrapper {
position: absolute;
inset: 0;
}
&__star {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
translate: -44.5% -43.5%;
opacity: 0;
@media (min-width: $breakpoint-xs) {
translate: -45% -43.5%;
}
@media (min-width: $breakpoint-sm) {
translate: -46% -43.5%;
}
@media (min-width: $breakpoint-lg) {
translate: -46.5% -43.5%;
}
@media (min-width: $breakpoint-xl) {
translate: -47% -43%;
}
@media (min-width: $breakpoint-xxl) {
translate: -46% -44%;
}
}
}
&__content {
height: calc(100vh - 10vh * 2);
@media (min-width: $breakpoint-md) {
height: calc(100vh - 100px * 2);
}
& > * {
&:nth-child(1),
&:nth-child(2) {
align-self: flex-start;
}
&:nth-last-child(1),
&:nth-last-child(2) {
align-self: flex-end;
}
/* 1st line */
&:nth-child(2) {
margin-top: 65px;
}
/* 2nd line */
&:nth-last-child(2) {
margin-bottom: 65px;
}
}
}
&__text {
opacity: 0;
p {
@extend %t-body-s;
color: $color-white;
}
}
&__line {
position: relative;
opacity: 0;
display: none;
@media (min-width: $breakpoint-md) {
display: block;
}
svg {
display: block;
&.-default,
&.-glow {
width: 100%;
height: auto;
}
&.-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150%;
stroke-dasharray: 230;
stroke-dashoffset: 230;
}
}
}
&__mobile-line {
position: relative;
display: block;
width: 1px;
height: 5vh;
background-color: $color-new;
left: 50%;
transform: translateX(-50%);
transform-origin: top;
opacity: 0;
@media (min-width: $breakpoint-md) {
display: none;
}
&:first-child {
margin-bottom: 3vh;
}
&:last-child {
margin-top: 3vh;
transform-origin: 50%;
transform: scaleY(-1);
}
&__glow {
position: absolute;
top: 0;
left: calc(-50% + 1px);
width: auto;
height: 100%;
transform-origin: top;
transform: scaleY(1.2) translateX(-50%);
stroke-dasharray: 40;
stroke-dashoffset: 40;
}
}
/* Horizontal scroll */
&__horizontal-scroll {
position: absolute;
inset: 0;
width: 200vw;
transform-origin: left;
transform: translateX(100%);
z-index: 0;
&__inner {
position: relative;
inset: 0;
width: 200vw;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
&__line {
position: relative;
display: block;
width: 120vw;
height: 1px;
background-color: $color-new;
z-index: 2;
margin-right: -67vw;
/* Because we've translated the image to -52% on mobile */
top: -1%;
@media (min-width: $breakpoint-md) {
top: 0;
width: 140vw;
margin-right: -87vw;
}
&__glow {
position: absolute;
top: calc(-50% + 1px);
left: 0;
width: 100%;
height: auto;
transform-origin: left;
transform: translateY(-50%) scaleX(0);
overflow: visible;
}
&__end {
position: absolute;
top: 50%;
right: -10px;
transform: translateY(-50%) scale(0);
transform-origin: 50% 0%;
&__radar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500%;
height: 500%;
border-radius: 50%;
border: 3px solid $color-main;
z-index: -1;
}
}
}
&__image {
width: 100vw;
height: 100%;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 25%;
background: linear-gradient(-90deg, rgba(1, 1, 1, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
z-index: 1;
}
video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom right;
}
}
}
}