@php /** @var \App\Komma\Dynamic\Component\Component $component **/ @endphp
<div class="c-full-width-image">
    <svg width="100%" viewBox="0 0 1920 1100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <path id="full-width-image-path" d="M515.429305,428.41591 C644.972997,405.408643 789.367177,401.084675 924.620684,415.183211 C1068.0301,430.132979 1200.41063,450.333057 1351.31418,446.364812 C1495.76483,442.567648 1637.49383,424.341261 1771.16629,399.410376 C2005.32518,355.737775 2225.48509,297.520158 2458.53273,252.438225 C2695.27098,206.643802 2917.02096,167.350458 3178.13207,179.589009 C3757.53376,206.746033 4171.21756,431.483893 4149.69056,698.724953 C4139.77743,821.779144 4039.59593,944.029046 3852.53624,1032.96405 C3676.12598,1116.83652 3439.65651,1167.3534 3188.98479,1180.35451 C3018.84223,1189.17979 2835.41893,1187.67866 2673.03477,1160.19512 C2517.6501,1133.89454 2380.28929,1086.23284 2213.6973,1074.5722 C1975.0347,1057.86677 1754.84769,1104.3476 1530.66743,1133.67548 C1376.44143,1153.85052 1216.79473,1181.83687 1058.93912,1191.92543 C755.05182,1211.34626 420.964387,1195.05809 212.827167,1079.56589 C58.1223433,993.720778 24.0712459,870.518455 40.4033953,762.237736 C56.441923,655.918189 147.155257,547.675023 328.794237,478.591676 C383.037482,457.96181 445.165602,440.894392 515.429305,428.41591 Z" transform="translate(-100.000000, 0.000000)"></path>
        </defs>
        <g id="Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Over-Ons" transform="translate(0.000000, -1639.000000)">
                <g id="Bitmap" transform="translate(-1100.000000, 1482.000000)">
                    <mask id="full-width-image-mask" fill="white">
                        <use xlink:href="#full-width-image-path"></use>
                    </mask>
                    {{--<use id="-" fill="#000000" transform="translate(2093.591805, 688.107662) rotate(5.000000) translate(-2093.591805, -688.107662) " xlink:href="#full-width-image-path"></use>--}}
                    <image mask="url(#full-width-image-mask)" x="1100" y="0" width="100%" xlink:href="{!! $component->getValueFromAttribute('image','getValueAsCollection')->count() <= 0 ?: $component->getValueFromAttribute('image','getValueAsCollection')[0]->path !!}"></image>
                </g>
            </g>
        </g>
    </svg>
    <svg class="c-full-width-image__curve" preserveAspectRatio="xMinYMin meet" width="100%" viewBox="0 0 1920 396" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <polygon id="c-full-width-image__curve-path" points="0 0 1920 0 1920 462.481752 0 462.481752"></polygon>
            <linearGradient x1="100%" y1="100%" x2="0%" y2="0%" id="c-full-width-image__curve-linearGradient">
                <stop stop-color="#2EA8E6" offset="0%"></stop>
                <stop stop-color="#7AD3FF" offset="100%"></stop>
            </linearGradient>
        </defs>
        <g id="Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <mask id="c-full-width-image__curve-mask" fill="white" x="-10%">
                <use xlink:href="#c-full-width-image__curve-path"></use>
            </mask>
            <path d="M-4.54747351e-13,395.411887 C239.09989,231.8273 555.823881,95.5535362 893.767533,95.5535362 C1249.03281,95.5535362 1472.43322,286.392049 1920,286.392049 L1920,0 L-4.54747351e-13,0 L-4.54747351e-13,395.411887 Z" id="Fill-1" fill="url(#c-full-width-image__curve-linearGradient)" mask="url(#c-full-width-image__curve-mask)"></path>
        </g>
    </svg>

</div>