Vebego Component Library

Highlight Block 

<section class='org-highlight-block'>
    <svg class="overlay-top" width="390" height="66" viewBox="0 0 390 66" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M0 14.5623C112.093 4.21615 222.699 -0.518709 331.607 0.847257C351.406 21.4537 370.871 42.9742 390 65.4039V66.0001H0V14.5623Z" fill="white" />
    </svg>

    <svg class="ambient absolute -z-10 h-full w-full" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1401 561" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_732_31)">
            <path class="animate-wiggle" d="M-2050.14 -204.345L1538.67 -2276.34L3610.67 1312.46L21.8563 3384.46L-2050.14 -204.345Z" fill="url(#paint0_linear_732_31)" />
            <path class="animate-wiggle" opacity="0.35" d="M-235.763 -1021.04C184.007 -844.351 514.379 -368.568 498.964 32.3718C481.557 487.334 63.3508 859.84 -256.582 932.059C-576.515 1004.28 -869.519 656.538 -468.412 471.643C-67.3055 286.749 116.195 264.613 302.527 -1.01921C259.546 -168.006 -47.7195 -422.581 -483.652 -646.742C-845.528 -833.228 -639.19 -1190.84 -235.763 -1021.04ZM743.374 -403.471C551.089 -574.814 489.961 -1069.37 661.244 -1309.44C793.684 -1495.02 1076.36 -1333.68 1004.04 -1160.87C858.856 -813.25 857.106 -584.44 881.882 -502.563C1123.47 -371.494 1565.15 -600.068 1652.51 -628.004C1865.35 -695.764 2057.55 -489.499 1784.38 -336.284C1318.25 -75.0371 933.111 -234.594 743.374 -403.471ZM2441.76 28.8834C2740.56 160.667 2742.79 590.227 2272.6 525.9C1818.24 463.679 1215.21 334.868 855.28 500.489C776.87 717.311 898.58 1141.45 1223.94 1711.81C1463.93 2132.35 883.395 2305.53 644.6 1988.36C335.85 1578.27 206.665 902.528 641.102 364.285C870.363 79.4919 1630.36 -328.355 2441.76 28.8834Z" fill="#562081" />
            <path class="animate-wiggle" d="M619.906 283.605C1040.16 304.998 1934.43 736.16 2151.54 1733.93C2231.54 2101.51 1833.08 2394.62 1574.58 1912.78C1324.5 1447.48 1036.08 798.822 638.144 575.386C382.987 648.953 70.9201 1049.81 -239.065 1738.82C-468.239 2247.19 -1022.52 1824.1 -889.306 1386.33C-717.037 821.296 -175.264 243.348 619.906 283.605Z" fill="url(#paint2_linear_732_31)" />
            <path class="animate-wiggle-2" d="M831.823 -74.8587C396.739 216.832 -233.363 80.0584 -517.676 -168.618C-801.989 -417.294 -676.358 -925.148 -232.682 -677.367C210.995 -429.586 356.12 -273.778 730.026 -280.429C856.731 -433.447 885.528 -891.581 799.415 -1449.29C728.136 -1912.07 1201.02 -1961.81 1315.63 -1471.74C1435.17 -961.448 1215.23 -332.216 831.823 -74.8587Z" fill="url(#paint3_linear_732_31)" />
        </g>
        <defs>
            <linearGradient id="paint0_linear_732_31" x1="3569.5" y1="1265.2" x2="-2038.5" y2="-164.605" gradientUnits="userSpaceOnUse">
                <stop stop-color="#501D79" />
                <stop offset="0.1001" stop-color="#562081" />
                <stop offset="0.4029" stop-color="#980D7F" />
                <stop offset="0.5587" stop-color="#871280" />
                <stop offset="0.8653" stop-color="#5C1E81" />
                <stop offset="0.9028" stop-color="#562081" />
                <stop offset="1" stop-color="#501D79" />
            </linearGradient>
            <linearGradient id="paint1_linear_732_31" x1="1940.44" y1="-897.473" x2="1576.67" y2="1225.63" gradientUnits="userSpaceOnUse">
                <stop stop-color="#B92D85" stop-opacity="0.7" />
                <stop offset="0.2185" stop-color="#C44072" stop-opacity="0.7655" />
                <stop offset="0.6611" stop-color="#DF703F" stop-opacity="0.8983" />
                <stop offset="1" stop-color="#F69915" />
            </linearGradient>
            <linearGradient id="paint2_linear_732_31" x1="1683.94" y1="1213.25" x2="-473.832" y2="1087.84" gradientUnits="userSpaceOnUse">
                <stop stop-color="#D62B87" stop-opacity="0.7" />
                <stop offset="0.2013" stop-color="#C02084" stop-opacity="0.7" />
                <stop offset="0.505" stop-color="#980D7F" stop-opacity="0.7" />
                <stop offset="0.9013" stop-color="#3F2584" stop-opacity="0.7" />
                <stop offset="1" stop-color="#282B85" stop-opacity="0.7" />
            </linearGradient>
            <linearGradient id="paint3_linear_732_31" x1="-150.413" y1="-274.39" x2="1381.97" y2="-1527.36" gradientUnits="userSpaceOnUse">
                <stop stop-color="#651B82" />
                <stop offset="0.9974" stop-color="#901080" />
            </linearGradient>
            <clipPath id="clip0_732_31">
                <rect width="1401" height="561" fill="white" />
            </clipPath>
        </defs>
    </svg>

    <div class='vebego-container'>
        <div class='org-highlight-block-wrapper'>
            <h6 class="atm-heading ">Dagelijkse schoonmaak van uw bedrijfspand</h6>

            <div class="atm-paragraph ">
                <p>Met de dagelijkse schoonmaakservice van Vebego voeren onze getrainde medewerkers de schoonmaakwerkzaamheden uit tijdens uw openingstijden - uiteraard met de grootste zorg en discretie. Zonder uw lopende bedrijfsvoering te verstoren</p>
            </div>

            <a class="atm-button atm-button-primary  button-md icon-only  button-icon-only ">
                <div class="button-content-wrapper">
                    <span class="button-content">

                        <i class="atm-icon  fal fa-arrow-down   fa-fw"></i>

                    </span>
                </div>
                <span class="button-triangle"></span>
            </a>

        </div>
    </div>

    <svg class="overlay-bottom" width="391" height="73" viewBox="0 0 391 73" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M0.570563 0.180439L0.570557 72.5844L390.571 72.5845L390.571 51.0221C278.478 61.3683 167.872 66.1032 58.9631 64.7371C39.1645 44.1307 19.6995 22.6101 0.570563 0.180439Z" fill="white" />
    </svg>
</section>
 
<section class='org-highlight-block'>
        <svg class="overlay-top" width="390" height="66" viewBox="0 0 390 66" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M0 14.5623C112.093 4.21615 222.699 -0.518709 331.607 0.847257C351.406 21.4537 370.871 42.9742 390 65.4039V66.0001H0V14.5623Z" fill="white"/>
        </svg>

        {{render "@ambient"}}

        <div class='vebego-container'>
            <div class='org-highlight-block-wrapper'>
                {{render "@heading" eyebrow}}
                {{render "@paragraph" paragraph}}
                {{render "@button-primary--icon-only-md" button merge=true}}
            </div>
        </div>

        <svg class="overlay-bottom" width="391" height="73" viewBox="0 0 391 73" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M0.570563 0.180439L0.570557 72.5844L390.571 72.5845L390.571 51.0221C278.478 61.3683 167.872 66.1032 58.9631 64.7371C39.1645 44.1307 19.6995 22.6101 0.570563 0.180439Z" fill="white"/>
        </svg>
</section>
 
{
  "eyebrow": {
    "text": "Dagelijkse schoonmaak van uw bedrijfspand",
    "tag": "h6"
  },
  "paragraph": {
    "text": "Met de dagelijkse schoonmaakservice van Vebego voeren onze getrainde medewerkers de schoonmaakwerkzaamheden uit tijdens uw openingstijden - uiteraard met de grootste zorg en discretie. Zonder uw lopende bedrijfsvoering te verstoren",
    "tag": "h2"
  },
  "button": {
    "icon": {
      "style": "fal",
      "icon": "fa-arrow-down"
    }
  }
}
  • Content: 
    .org-highlight-block {
    @apply overflow-hidden relative;

    .overlay-top{
        @apply absolute -top-[1px] w-full h-auto rotate-180 sm:hidden;
    }
    .overlay-bottom{
        @apply absolute -bottom-[4px] -left-[3px] w-[101%] h-auto;
    }
    .ambient{
        @apply h-[200%] top-0;
    }

    .org-highlight-block-wrapper {
        @apply flex flex-col items-center justify-center py-48 lg:pb-96 lg:pt-64;

        .atm-heading,
        .atm-paragraph {
            @apply text-white text-center;
        }

        .atm-paragraph p{
            @apply text-h3 lg:text-h1 font-display;
        }
    }
}
  • URL: /components/raw/highlight-block/highlight-block.css
  • Filesystem Path: src\components\04-organisms\highlight-block\highlight-block.css
  • Size: 643 Bytes
  • Content: 
    (function () {

    'use strict';

    if (document.querySelector(".org-highlight-block .ambient")) {
        gsap.registerPlugin(ScrollTrigger);
        
        gsap.to('.org-highlight-block .ambient', {
            y: '-25%',
            scrollTrigger: {
                trigger: '.org-highlight-block', // Element that triggers the animation
                toggleActions: 'restart pause reverse pause',
                start: 'top 50%', // When the top of the trigger hits 80% of the viewport
                end: 'bottom 50%', // End point of the animation
                scrub: 1, // Smooth scrubbing effect as you scroll
            },
        });
    }
})();
  • URL: /components/raw/highlight-block/highlight-block.js
  • Filesystem Path: src\components\04-organisms\highlight-block\highlight-block.js
  • Size: 686 Bytes

No notes defined.