PDJ Brandbox

hero-product: Usa 

<section class="hero-product hero-product--care">

    <div class="hero-product__in">
        <div class="hero-product__inner">
            <div class="hero-product__media">
                <section class="media media--slider">
                    <div class="media__slider swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="media__slide">
                                    <picture class="visual">
                                        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
                                        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
                                        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
                                        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
                                        <img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
                                    </picture>

                                </div>
                            </div>

                            <div class="swiper-slide">
                                <div class="media__slide">
                                    <picture class="visual">
                                        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
                                        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
                                        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
                                        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
                                        <img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
                                    </picture>

                                </div>
                            </div>

                            <div class="swiper-slide">
                                <div class="media__slide">
                                    <picture class="visual">
                                        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
                                        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
                                        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
                                        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
                                        <img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
                                    </picture>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="media__thumbs swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="media__thumb">
                                    <picture class="visual">
                                        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
                                        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
                                        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
                                        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
                                        <img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
                                    </picture>

                                </div>
                            </div>

                            <div class="swiper-slide">
                                <div class="media__thumb">
                                    <picture class="visual">
                                        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
                                        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
                                        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
                                        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
                                        <img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
                                    </picture>

                                </div>
                            </div>

                            <div class="swiper-slide">
                                <div class="media__thumb">
                                    <picture class="visual">
                                        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
                                        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
                                        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
                                        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
                                        <img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
                                    </picture>

                                </div>
                            </div>
                        </div>

                        <div class="media__nav">
                            <div class="media__nav__item">
                                <a class="media__nav__link media__nav__link--prev">
                                    <span class="media__nav__icon">
                                        <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                            <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                                        </svg>
                                    </span>
                                </a>
                            </div>

                            <div class="media__nav__item">
                                <a class="media__nav__link media__nav__link--next">
                                    <span class="media__nav__icon">
                                        <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                            <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                                        </svg>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </section>

            </div>

            <div class="hero-product__content">
                <div class="hero-product__back caption">
                    <a href="#" class="link link--underlined">
                        <span class="link__label">&lt; DJ Players</span>
                    </a>

                </div>

                <div class="hero-product__logos">
                    <img src="../../graphics/logo-bt.png" alt="" class="hero-product__logo">
                </div>

                <div class="hero-product__intro">
                    <h1 class="hero-product__heading heading">CDJ-3000</h1>

                    <div class="hero-product__description">
                        Pro-DJ multi player with high-res audio support (black)
                    </div>

                    <div class="hero-product__cross-links">
                        <span class="hero-product__cross-link">
                            <a href="" class="link link--underlined">
                                <span class="link__label">Product link</span>
                            </a>

                        </span>
                        <span class="hero-product__cross-link">
                            <a href="" class="link link--underlined">
                                <span class="link__label">Product link</span>
                            </a>

                        </span>
                    </div>
                </div>

                <div class="hero-product__info">
                    <h2 class="hero-product__subheading heading">The last mixer you’ll need. Period.</h2>

                    <div class="hero-product__description p--2">
                        Born from a fresh design concept, the DJM-V10 is a new breed of mixer, built to enable the most creative DJs to craft original soundscapes.
                    </div>
                </div>

                <div class="hero-product__price">€1999 <span style="font-size: var(--p--2);">(Suggested Retail Price)</span></div>

                <div class="hero-product__colors">
                    <div class="hero-product__color">
                        <a href="#" class="radio-color" style="background: #FFFFFF;" title="white"></a>

                    </div>
                    <div class="hero-product__color">
                        <a href="#" class="radio-color" style="background: #000000;" title="black"></a>

                    </div>
                    <div class="hero-product__color">
                        <a href="#" class="radio-color" style="background: #9A2B2F;" title="red"></a>

                    </div>
                </div>

                <div class="hero-product__warranty">
                    <div class="hero-product__warranty__top">

                        <div class="care-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221.77 221.25">
                                <path fill="#fff" d="M221.77,173.32c0,26.36-21.62,47.93-48.04,47.93H48.04c-26.42,0-48.04-21.57-48.04-47.93V47.93C0,21.57,21.62,0,48.04,0h125.69c26.42,0,48.04,21.57,48.04,47.93v125.4Z" />
                                <g>
                                    <g>
                                        <path fill="#f1b43f" d="M114.59,57.75c-.03-.06-.06-.12-.11-.18l-.79-1.01c-.15-.19-.37-.31-.61-.34-.24-.03-.48,.05-.66,.2l-7.7,6.35c-.29,.23-.69,.27-1.01,.08l-6.52-3.76c-.2-.11-.34-.3-.41-.52l-1.82-6.26c-.1-.34,.01-.7,.29-.93l8.14-6.71c.37-.31,.43-.85,.14-1.23l-1.03-1.33c-.06-.07-.12-.12-.2-.17-3.17-.64-6.38-.25-9.22,.99-3.54,1.6-6.48,4.53-7.98,8.44-1.81,4.71-1.1,9.75,1.39,13.72,.36,.57,.67,1.1,.94,1.6,1.63,1.97,3.77,3.56,6.33,4.54,2.43,.93,4.96,1.2,7.38,.9,.33-.11,.68-.19,1.06-.22,.21-.02,.42-.05,.64-.08,4.75-1.14,8.87-4.51,10.76-9.4,.6-1.55,.92-3.13,1-4.7Z" />
                                        <path fill="#f1b43f" d="M95.97,75.87c-1.63-.15-2.19-.11-3.72-.7-1.66-.64-2.17-1.12-3.56-2.22-2.46,6.35-21.09,49.9-21.09,49.9-1.11,2.89,.33,6.14,3.24,7.25,2.9,1.11,6.16-.33,7.27-3.23l17.86-51.01Zm-7.71,6.39l1.74,.66-12.22,31.75-1.74-.67,12.22-31.75Zm-16.41,45.23c-1.45-.55-2.18-2.18-1.62-3.63,.56-1.45,2.18-2.17,3.63-1.61,1.45,.56,2.17,2.18,1.62,3.63-.56,1.45-2.18,2.17-3.63,1.61Z" />
                                    </g>
                                    <g>
                                        <polygon fill="#f1b43f" points="138.59 92.46 123.01 54.84 124.09 49.44 118.18 40.93 115.93 41.79 113.69 42.65 115.01 52.92 119.43 56.21 133.08 94.57 138.59 92.46" />
                                        <path fill="#f1b43f" d="M141.78,95.59l-8.97,3.43,8.44,27.7c1.36,3.54,5.34,5.3,8.88,3.94,3.54-1.36,5.31-5.32,3.95-8.86l-12.31-26.22Zm5.87,25.71l-1.95,.75-7.7-20.01,1.95-.75,7.7,20.01Z" />
                                    </g>
                                </g>
                                <g>
                                    <path d="M35.49,155.57l6.11,15.82h-2.98l-1.49-4.19h-6.33l-1.49,4.19h-2.87l6.09-15.82h2.95Zm-1.53,2.73l-2.4,6.8h4.84l-2.38-6.8h-.07Z" />
                                    <path d="M45.8,155.57v15.82h-2.53v-15.82h2.53Z" />
                                    <path d="M59.77,165.72c0,3.01-1.51,5.98-4.95,5.98-1.44,0-3.06-.51-3.84-1.8h-.04v5.72h-2.53v-15.69h2.4v1.55h.04c.73-1.33,2.09-1.86,3.55-1.86,3.6,0,5.38,2.75,5.38,6.09Zm-5.71,3.99c2.29,0,3.18-2.04,3.18-4.03s-.96-4.05-3.2-4.05c-2.35,0-3.2,1.99-3.2,4.05s.98,4.03,3.22,4.03Z" />
                                    <path d="M63.99,155.57v5.87h.04c.73-1.15,2.02-1.82,3.46-1.82,2.64,0,4.04,1.53,4.04,3.81v7.95h-2.53v-7.09c0-1.46-.44-2.68-2.24-2.68s-2.78,1.44-2.78,2.95v6.82h-2.53v-15.82h2.53Z" />
                                    <path d="M83.61,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.27,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z" />
                                    <path d="M96.91,155.57v2.39h-5.04v13.43h-2.78v-13.43h-5.02v-2.39h12.84Z" />
                                    <path d="M100.71,155.57v5.87h.04c.73-1.15,2.02-1.82,3.46-1.82,2.64,0,4.04,1.53,4.04,3.81v7.95h-2.53v-7.09c0-1.46-.44-2.68-2.24-2.68s-2.78,1.44-2.78,2.95v6.82h-2.53v-15.82h2.53Z" />
                                    <path d="M120.95,165.45c0,.29-.02,.58-.04,.86h-8.44c0,1.88,1.09,3.39,3.09,3.39,1.4,0,2.33-.58,2.8-1.91h2.4c-.51,2.46-2.69,3.9-5.2,3.9-3.62,0-5.62-2.53-5.62-6.01s2.13-6.07,5.55-6.07c3.24,0,5.46,2.66,5.46,5.83Zm-2.58-.8c-.13-1.6-1.18-3.04-2.91-3.04s-2.91,1.35-3,3.04h5.91Z" />
                                    <path d="M126.13,156.5v3.43h2.29v1.88h-2.29v6.25c0,1.2,.29,1.44,1.27,1.44,.47,0,.93-.04,1.02-.09v1.95c-1,.11-1.29,.13-1.64,.13-2.42,0-3.18-.78-3.18-3.08v-6.6h-1.91v-1.88h1.91v-3.43h2.53Z" />
                                    <path d="M140.19,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.27,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z" />
                                    <path d="M162.49,160.6h-2.78c-.56-2.1-1.87-3.15-3.95-3.15-3.02,0-4.82,2.5-4.82,6.03s1.78,6.03,4.82,6.03c2.27,0,3.75-1.6,4.04-4.14h2.71c-.29,3.79-2.84,6.4-6.75,6.4-2.24,0-4.06-.8-5.49-2.35-1.4-1.57-2.11-3.57-2.11-5.94,0-4.52,2.82-8.29,7.6-8.29,3.66,0,6.37,2.06,6.73,5.41Z" />
                                    <path d="M174.31,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.26,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z" />
                                    <path d="M183.77,159.69v2.44c-.38-.07-.73-.11-1.09-.11-1.89,0-3.11,1.64-3.11,3.83v5.54h-2.53v-11.46h2.38v2.22h.04c.36-1.46,2.07-2.53,3.35-2.53,.49,0,.58,0,.96,.07Z" />
                                    <path d="M195.32,165.45c0,.29-.02,.58-.04,.86h-8.44c0,1.88,1.09,3.39,3.09,3.39,1.4,0,2.33-.58,2.8-1.91h2.4c-.51,2.46-2.69,3.9-5.2,3.9-3.62,0-5.62-2.53-5.62-6.01s2.13-6.07,5.55-6.07c3.24,0,5.46,2.66,5.46,5.83Zm-2.58-.8c-.13-1.6-1.18-3.04-2.91-3.04s-2.91,1.35-3,3.04h5.91Z" />
                                </g>
                            </svg>

                        </div>

                        <div class="care-title">
                            <h3>Extended warranty service</h3>
                            <div class="care-title__subtitle">
                                <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect x="0.4" y="0.4" width="12.2" height="12.2" rx="6.1" stroke="#007DE1" stroke-width="0.8" />
                                    <path d="M6.87598 7.90527H5.78711C5.79036 7.60254 5.81641 7.34863 5.86523 7.14355C5.91406 6.93522 5.99544 6.74642 6.10938 6.57715C6.22656 6.40788 6.38118 6.22884 6.57324 6.04004C6.72298 5.89681 6.85807 5.76172 6.97852 5.63477C7.09896 5.50456 7.19499 5.36784 7.2666 5.22461C7.33822 5.07812 7.37402 4.91048 7.37402 4.72168C7.37402 4.5166 7.33984 4.34245 7.27148 4.19922C7.20312 4.05599 7.10221 3.94694 6.96875 3.87207C6.83854 3.7972 6.67578 3.75977 6.48047 3.75977C6.31771 3.75977 6.16471 3.79232 6.02148 3.85742C5.87826 3.91927 5.7627 4.01693 5.6748 4.15039C5.58691 4.2806 5.53971 4.45312 5.5332 4.66797H4.35645C4.36296 4.25781 4.46061 3.91276 4.64941 3.63281C4.83822 3.35286 5.09212 3.1429 5.41113 3.00293C5.73014 2.86296 6.08659 2.79297 6.48047 2.79297C6.91667 2.79297 7.28939 2.86784 7.59863 3.01758C7.90788 3.16406 8.14388 3.37891 8.30664 3.66211C8.47266 3.94206 8.55566 4.2806 8.55566 4.67773C8.55566 4.96419 8.4987 5.22461 8.38477 5.45898C8.27083 5.6901 8.12272 5.90658 7.94043 6.1084C7.75814 6.30697 7.5612 6.50553 7.34961 6.7041C7.16732 6.87012 7.04362 7.05078 6.97852 7.24609C6.91341 7.43815 6.87923 7.65788 6.87598 7.90527ZM5.68945 9.42871C5.68945 9.25293 5.74967 9.10482 5.87012 8.98438C5.99056 8.86068 6.15495 8.79883 6.36328 8.79883C6.57161 8.79883 6.736 8.86068 6.85645 8.98438C6.97689 9.10482 7.03711 9.25293 7.03711 9.42871C7.03711 9.60449 6.97689 9.75423 6.85645 9.87793C6.736 9.99837 6.57161 10.0586 6.36328 10.0586C6.15495 10.0586 5.99056 9.99837 5.87012 9.87793C5.74967 9.75423 5.68945 9.60449 5.68945 9.42871Z" fill="#007DE1" />
                                </svg>
                                <a class="overlay-modal__trigger" href="#" data-modal="warranty-info">Learn more</a>
                            </div>

                        </div>

                    </div>

                    <div class="hero-product__warranty__bottom">
                        <div class="radio-item">
                            <input class="custom-radio custom-radio--warranty" name="care" id="care-no" type="radio" value="care-no" checked>
                            <label for="care-no">Without extended warranty</label>
                        </div>

                        <div class="radio-item">
                            <input class="custom-radio custom-radio--warranty" name="care" id="care-plus" type="radio" value="care-plus" data-title="AlphaTheta Care Plus">
                            <label for="care-plus">AlphaTheta Care Plus (+ €20)</label>
                        </div>

                        <div class="radio-item">
                            <input class="custom-radio custom-radio--warranty" name="care" id="care-pro" type="radio" value="care-pro" data-title="AlphaTheta Care Pro">
                            <label for="care-pro">AlphaTheta Care Pro (+ €25)</label>
                        </div>

                    </div>
                </div>

                <section class="overlay-modal" data-modal="warranty-info">
                    <div class="overlay-modal__overlay">
                        <span class="overlay-modal__bg overlay-modal__trigger--close"></span>

                        <div class="overlay-modal__inner">
                            <span class="overlay-modal__close overlay-modal__trigger--close"><span class="icon-cross">
                                    <span class="icon-cross__inner"></span>
                                </span></span>

                            <div class="overlay-modal__content">
                                <h3 class="heading heading--4">
                                    <span data-step="1">What is the extended warranty?</span>
                                </h3>

                                <div class="overlay-modal__description">
                                    <div class="form-container__info">
                                        <br>
                                        <h3 class="form-container__info--title">AlphaTheta Care Plus:</h3>
                                        <p class="form-container__info--text">
                                            Free repair for a total of 3 years (1-year manufacturer warranty +2 years extended warranty)
                                            for natural failure in the use case of following the manual, such as the exhaustion of
                                            buttons and faders.
                                        </p>
                                        <br>
                                        <h3 class="form-container__info--title">AlphaTheta Care Pro:</h3>
                                        <p class="form-container__info--text">
                                            In addition to the natural failure, Pro covers a 3-year warranty for accidental damage such
                                            as dropping liquid spills and dropping the equipment, and it also has a free loaner units
                                            service to minimize the damage of running the venue business.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="overlay-modal" data-modal="atc-care">
                    <div class="overlay-modal__overlay">
                        <span class="overlay-modal__bg overlay-modal__trigger--close"></span>

                        <div class="overlay-modal__inner">
                            <span class="overlay-modal__close overlay-modal__trigger--close"></span>

                            <div class="overlay-modal__content">
                                <h3 class="heading heading--4">
                                    <span class="form-title"></span>
                                </h3>
                                <br>

                                <form id="form-atccare" class="form-container" novalidate>
                                    <div class="client">
                                        <div class="client__type">
                                            <div class="customer-field">
                                                <input class="custom-radio" name="care" id="private" type="radio" value="private" checked>
                                                <label for="private">Private client</label>
                                            </div>
                                        </div>
                                        <div class="client__type">
                                            <div class="customer-field">
                                                <input class="custom-radio" name="care" id="business" type="radio" value="business">
                                                <label for="business">Business client</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="overlay-modal__form">
                                        <div class="input-field">
                                            <div class="input-field__inner">
                                                <input class="input-field__info" type="text" name="firstname" value="" required>
                                                <span class="input-field__placeholder">Name</span>
                                            </div>
                                        </div>
                                        <br>
                                        <div class="input-field">
                                            <div class="input-field__inner">
                                                <input class="input-field__info" type="text" name="surname" value="" required>
                                                <span class="input-field__placeholder">Surname</span>
                                            </div>
                                        </div>
                                        <br>

                                        <div class="business-field hidden">
                                            <div class="input-field">
                                                <div class="input-field__inner">
                                                    <input class="input-field__info" type="text" name="company" value="" required disabled>
                                                    <span class="input-field__placeholder">Company name</span>
                                                </div>
                                            </div>
                                            <br>
                                            <div class="input-field">
                                                <div class="input-field__inner">
                                                    <input class="input-field__info" type="text" name="vat" value="" required disabled>
                                                    <span class="input-field__placeholder">VAT number</span>
                                                </div>
                                            </div>
                                            <br>
                                        </div>

                                        <div class="input-field">
                                            <div class="input-field__inner">
                                                <input class="input-field__info" type="text" name="email" value="" required>
                                                <span class="input-field__placeholder">E-mail address</span>
                                            </div>
                                        </div>
                                        <br>
                                        <div class="input-field">
                                            <div class="input-field__inner">
                                                <input class="input-field__info" type="text" name="confirm-email" value="" required>
                                                <span class="input-field__placeholder">Confirm e-mail address</span>
                                            </div>
                                        </div>

                                        <div class="overlay-modal__note">

                                            <p class="legal">
                                                You can unsubscribe from these communications at any time. For more information on how to unsubscribe
                                                AlphaTheta’s privacy practices and how AlphaTheta is committed to protecting and respecting your
                                                privacy, please review AlphaTheta’s
                                                <a href="#" target="_blank">Privacy Policy</a>.
                                            </p>

                                            <p class="legal">
                                                The [AlphaTheta Care] program is administered by New Leaf Service Contracts, Inc. (“New Leaf”). When you
                                                submit your application, New Leaf will receive personal information about you. New Leaf processes the
                                                personal information it collects and receives as described in its
                                                <a href="#" target="_blank">Privacy Policy</a>.
                                            </p>

                                            <div class="checkbox">
                                                <div class="checkbox__inner">
                                                    <input class="input-field__info" type="checkbox" name="alphatheta" value="yes" id="alphatheta">
                                                    <span class="checkbox__spoof">
                                                        <span class="checkbox__icon">
                                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                                            </svg>

                                                        </span>
                                                    </span>
                                                    <span class="checkbox__label">
                                                        <label for="alphatheta">
                                                            From time to time, AlphaTheta Music Americas, Inc. (“AlphaTheta”) would like to contact you
                                                            about our products and services, as well as other content that may be of interest to you.
                                                            If you consent to AlphaTheta contacting you for this purpose, please check the box.
                                                        </label>
                                                    </span>
                                                </div>
                                            </div>

                                            <br>

                                            <div class="checkbox">
                                                <div class="checkbox__inner">
                                                    <input class="input-field__info" type="checkbox" name="agree" value="agree" id="agree" required>
                                                    <span class="checkbox__spoof">
                                                        <span class="checkbox__icon">
                                                            <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                                <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                                            </svg>

                                                        </span>
                                                    </span>
                                                    <span class="checkbox__label">
                                                        <label for="agree"> I agree to the <a href="#" target="_blank">terms of use</a>.</label>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div id="error-atccare" class="hidden">
                                            This is an error
                                        </div>

                                        <div class="overlay-modal__action">
                                            <button type="submit" href="#" class="action action--normal action--on-light">
                                                <span class="action__label">Buy now</span>
                                                <span class="action__bg"></span>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </section>

                <div class="hero-product__actions">
                    <div class="actions actions--stack actions--force">
                        <div class="actions__item">

                            <a href="#" target="_blank" class="action--modal action action--normal action--on-light">
                                <span class="action__label">Buy now</span>
                                <span class="action__bg"></span>
                            </a>

                        </div>

                        <div class="actions__item">
                            <a href="#" class="link link--underlined link--icon-left">
                                <span class="link__icon">
                                    <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                        <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                                    </svg>

                                </span>
                                <span class="link__label">Find a store</span>
                            </a>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
 
<section class="hero-product hero-product--care">

  <div class="hero-product__in">
    <div class="hero-product__inner">
      <div class="hero-product__media">
        {{render '@media--slider' }}
      </div>

      <div class="hero-product__content">
        <div class="hero-product__back caption">
          {{render '@link' back-link merge=true }}
        </div>

        {{#if logo }}
          <div class="hero-product__logos">
            <img src="{{path '/graphics/logo-bt.png' }}" alt="" class="hero-product__logo">
          </div>
        {{/if}}

        <div class="hero-product__intro">
          <h1 class="hero-product__heading heading">{{ intro.heading }}</h1>

          <div class="hero-product__description">
            {{ intro.description }}
          </div>

          {{#if intro.crossLinks }}
            <div class="hero-product__cross-links">
              {{#each intro.crossLinks }}
                <span class="hero-product__cross-link">
                  {{render '@link--underlined' this }}
                </span>
              {{/each}}
            </div>
          {{/if}}
        </div>

        <div class="hero-product__info">
          <h2 class="hero-product__subheading heading">{{ info.heading }}</h2>

          <div class="hero-product__description p--2">
            {{ info.description }}
          </div>
        </div>

        <div class="hero-product__price">{{{ price }}}</div>

        <div class="hero-product__colors">
          {{#each colors }}
          <div class="hero-product__color">
            {{render '@radio-color' this merge=true }}
          </div>
          {{/each}}
        </div>

        {{render '@product-warranty--usa' this merge=true }}

        <div class="hero-product__actions">
          {{#if outofstock}}
          {{render '@overlay-modal' }}
          <h3 class="heading heading--4">Out of stock</h3>

          <div class="spacer spacer--4"></div>

          <div class="actions actions--start actions--force">
            <div class="actions__item">
              {{render '@action' actionoutofstock }}
            </div>
          </div>

          <div class="spacer spacer--6"></div>

          {{/if}}
          <div class="actions actions--stack actions--force">
            {{#unless outofstock}}
              <div class="actions__item">
                {{render '@action' action merge=true }}
              </div>
            {{/unless}}

            <div class="actions__item">
              {{render '@link--icon-left' }}
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>
 
back-link:
  url: '#'
  modifier: underlined
  label: < DJ Players
logo: true
intro:
  heading: CDJ-3000
  description: Pro-DJ multi player with high-res audio support (black)
  crossLinks:
    - href: '#'
      label: Product link
      modifier: underlined
    - href: '#'
      label: Product link
      modifier: underlined
info:
  heading: The last mixer you’ll need. Period.
  description: >-
    Born from a fresh design concept, the DJM-V10 is a new breed of mixer, built
    to enable the most creative DJs to craft original soundscapes.
colors:
  - color: '#FFFFFF'
    label: white
    url: '#'
  - color: '#000000'
    label: black
    url: '#'
  - color: '#9A2B2F'
    label: red
    url: '#'
price: '€1999 <span style="font-size: var(--p--2);">(Suggested Retail Price)</span>'
action:
  url: '#'
  label: Buy now
  class: action--modal
actionoutofstock:
  type: normal
  tint: on-light
  url: ''
  label: Notify me when available
  buttonType: button
  class: overlay-modal__trigger
  • Content: 
    <?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221.77 221.25"><defs><style>.cls-1{fill:#f1b43f;}.cls-2{fill:#fff;}</style></defs><path class="cls-2" d="M221.77,173.32c0,26.36-21.62,47.93-48.04,47.93H48.04c-26.42,0-48.04-21.57-48.04-47.93V47.93C0,21.57,21.62,0,48.04,0h125.69c26.42,0,48.04,21.57,48.04,47.93v125.4Z"/><g><g><path class="cls-1" d="M114.59,57.75c-.03-.06-.06-.12-.11-.18l-.79-1.01c-.15-.19-.37-.31-.61-.34-.24-.03-.48,.05-.66,.2l-7.7,6.35c-.29,.23-.69,.27-1.01,.08l-6.52-3.76c-.2-.11-.34-.3-.41-.52l-1.82-6.26c-.1-.34,.01-.7,.29-.93l8.14-6.71c.37-.31,.43-.85,.14-1.23l-1.03-1.33c-.06-.07-.12-.12-.2-.17-3.17-.64-6.38-.25-9.22,.99-3.54,1.6-6.48,4.53-7.98,8.44-1.81,4.71-1.1,9.75,1.39,13.72,.36,.57,.67,1.1,.94,1.6,1.63,1.97,3.77,3.56,6.33,4.54,2.43,.93,4.96,1.2,7.38,.9,.33-.11,.68-.19,1.06-.22,.21-.02,.42-.05,.64-.08,4.75-1.14,8.87-4.51,10.76-9.4,.6-1.55,.92-3.13,1-4.7Z"/><path class="cls-1" d="M95.97,75.87c-1.63-.15-2.19-.11-3.72-.7-1.66-.64-2.17-1.12-3.56-2.22-2.46,6.35-21.09,49.9-21.09,49.9-1.11,2.89,.33,6.14,3.24,7.25,2.9,1.11,6.16-.33,7.27-3.23l17.86-51.01Zm-7.71,6.39l1.74,.66-12.22,31.75-1.74-.67,12.22-31.75Zm-16.41,45.23c-1.45-.55-2.18-2.18-1.62-3.63,.56-1.45,2.18-2.17,3.63-1.61,1.45,.56,2.17,2.18,1.62,3.63-.56,1.45-2.18,2.17-3.63,1.61Z"/></g><g><polygon class="cls-1" points="138.59 92.46 123.01 54.84 124.09 49.44 118.18 40.93 115.93 41.79 113.69 42.65 115.01 52.92 119.43 56.21 133.08 94.57 138.59 92.46"/><path class="cls-1" d="M141.78,95.59l-8.97,3.43,8.44,27.7c1.36,3.54,5.34,5.3,8.88,3.94,3.54-1.36,5.31-5.32,3.95-8.86l-12.31-26.22Zm5.87,25.71l-1.95,.75-7.7-20.01,1.95-.75,7.7,20.01Z"/></g></g><g><path d="M35.49,155.57l6.11,15.82h-2.98l-1.49-4.19h-6.33l-1.49,4.19h-2.87l6.09-15.82h2.95Zm-1.53,2.73l-2.4,6.8h4.84l-2.38-6.8h-.07Z"/><path d="M45.8,155.57v15.82h-2.53v-15.82h2.53Z"/><path d="M59.77,165.72c0,3.01-1.51,5.98-4.95,5.98-1.44,0-3.06-.51-3.84-1.8h-.04v5.72h-2.53v-15.69h2.4v1.55h.04c.73-1.33,2.09-1.86,3.55-1.86,3.6,0,5.38,2.75,5.38,6.09Zm-5.71,3.99c2.29,0,3.18-2.04,3.18-4.03s-.96-4.05-3.2-4.05c-2.35,0-3.2,1.99-3.2,4.05s.98,4.03,3.22,4.03Z"/><path d="M63.99,155.57v5.87h.04c.73-1.15,2.02-1.82,3.46-1.82,2.64,0,4.04,1.53,4.04,3.81v7.95h-2.53v-7.09c0-1.46-.44-2.68-2.24-2.68s-2.78,1.44-2.78,2.95v6.82h-2.53v-15.82h2.53Z"/><path d="M83.61,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.27,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z"/><path d="M96.91,155.57v2.39h-5.04v13.43h-2.78v-13.43h-5.02v-2.39h12.84Z"/><path d="M100.71,155.57v5.87h.04c.73-1.15,2.02-1.82,3.46-1.82,2.64,0,4.04,1.53,4.04,3.81v7.95h-2.53v-7.09c0-1.46-.44-2.68-2.24-2.68s-2.78,1.44-2.78,2.95v6.82h-2.53v-15.82h2.53Z"/><path d="M120.95,165.45c0,.29-.02,.58-.04,.86h-8.44c0,1.88,1.09,3.39,3.09,3.39,1.4,0,2.33-.58,2.8-1.91h2.4c-.51,2.46-2.69,3.9-5.2,3.9-3.62,0-5.62-2.53-5.62-6.01s2.13-6.07,5.55-6.07c3.24,0,5.46,2.66,5.46,5.83Zm-2.58-.8c-.13-1.6-1.18-3.04-2.91-3.04s-2.91,1.35-3,3.04h5.91Z"/><path d="M126.13,156.5v3.43h2.29v1.88h-2.29v6.25c0,1.2,.29,1.44,1.27,1.44,.47,0,.93-.04,1.02-.09v1.95c-1,.11-1.29,.13-1.64,.13-2.42,0-3.18-.78-3.18-3.08v-6.6h-1.91v-1.88h1.91v-3.43h2.53Z"/><path d="M140.19,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.27,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z"/><path d="M162.49,160.6h-2.78c-.56-2.1-1.87-3.15-3.95-3.15-3.02,0-4.82,2.5-4.82,6.03s1.78,6.03,4.82,6.03c2.27,0,3.75-1.6,4.04-4.14h2.71c-.29,3.79-2.84,6.4-6.75,6.4-2.24,0-4.06-.8-5.49-2.35-1.4-1.57-2.11-3.57-2.11-5.94,0-4.52,2.82-8.29,7.6-8.29,3.66,0,6.37,2.06,6.73,5.41Z"/><path d="M174.31,162.88v6.03c0,.6,.13,.8,.69,.8,.13,0,.36,0,.53-.04v1.75c-.64,.18-1.31,.29-1.6,.29-1.11,0-1.78-.44-1.95-1.4-.91,.91-2.58,1.4-3.98,1.4-2.26,0-3.93-1.24-3.93-3.35s1.27-2.99,2.98-3.35c.87-.18,1.82-.29,2.89-.42,1.53-.18,2-.53,2-1.42,0-1-.8-1.55-2.38-1.55s-2.42,.66-2.53,1.82h-2.53c.18-2.5,2-3.81,5.22-3.81,2.78,0,4.6,1.31,4.6,3.26Zm-5.53,6.82c1.73,0,3-.86,3-2.1v-1.95c-.69,.42-1.02,.42-2.78,.64-1.67,.2-2.4,.8-2.4,1.84,0,.95,.8,1.57,2.18,1.57Z"/><path d="M183.77,159.69v2.44c-.38-.07-.73-.11-1.09-.11-1.89,0-3.11,1.64-3.11,3.83v5.54h-2.53v-11.46h2.38v2.22h.04c.36-1.46,2.07-2.53,3.35-2.53,.49,0,.58,0,.96,.07Z"/><path d="M195.32,165.45c0,.29-.02,.58-.04,.86h-8.44c0,1.88,1.09,3.39,3.09,3.39,1.4,0,2.33-.58,2.8-1.91h2.4c-.51,2.46-2.69,3.9-5.2,3.9-3.62,0-5.62-2.53-5.62-6.01s2.13-6.07,5.55-6.07c3.24,0,5.46,2.66,5.46,5.83Zm-2.58-.8c-.13-1.6-1.18-3.04-2.91-3.04s-2.91,1.35-3,3.04h5.91Z"/></g></svg>
  • URL: /components/raw/hero-product/AlphaTheta-Icon.svg
  • Filesystem Path: ../src/04_organisms/hero-product/AlphaTheta-Icon.svg
  • Size: 5.1 KB
  • Content: 
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.9093 5.30355L5.30273 15.9102" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.30355 5.30355L15.9102 15.9102" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
  • URL: /components/raw/hero-product/close.svg
  • Filesystem Path: ../src/04_organisms/hero-product/close.svg
  • Size: 355 Bytes
  • Content: 
    const HEROPRODUCT = ((w, d, undefined) => {
  'use strict';

  const selectors = {
    wrapper: '.hero-product',
    wrapperLegacy: '.hero-product--legacy',
    description: '.hero-product__info .hero-product__description',
    readmore: '.hero-product__readmore-trigger'
  };

  const defaultLength = 250;

  const showMore = (target, text, wrapper) => {
    const readlesslabel = wrapper.dataset.readlesslabel;

    target.innerHTML = `${text}  <a href="#" class="${ selectors.readmore.replace('.', '') }">${ readlesslabel }</a>`;

    const trigger = target.querySelector(selectors.readmore);

    trigger.addEventListener('click', (e) => {
      e.preventDefault();

      legacyReadMore(wrapper);
    }, { once: true });
  };

  const legacyReadMore = (wrapper) => {
    // if legacy wrapper not found, do nothing
    if (!wrapper) { return; }

    const readmorelabel = wrapper.dataset.readmorelabel;
    const maxchars = parseInt(wrapper.dataset.maxchars, 10) || defaultLength;
    const description = wrapper.querySelector(selectors.description);

    if (!description) { return; }
    const oldTrigger = description.querySelector(selectors.readmore);

    if (oldTrigger) { oldTrigger.remove(); }

    const text = description.innerText;

    if (text.length > maxchars) {
      const newText = text.slice(0, maxchars);

      description.innerHTML = `${newText}... <a href="#" class="${ selectors.readmore.replace('.', '') }">${ readmorelabel }</a>`;

      const trigger = description.querySelector(selectors.readmore);

      trigger.addEventListener('click', (e) => {
        e.preventDefault();

        showMore(description, text, wrapper);
      }, { once: true });
    }

  };

  const init = () => {
    legacyReadMore(document.querySelector(selectors.wrapperLegacy));
  };

  d.addEventListener('DOMContentLoaded', init);
})(window, window.document);
  • URL: /components/raw/hero-product/hero-product.js
  • Filesystem Path: ../src/04_organisms/hero-product/hero-product.js
  • Size: 1.9 KB
  • Content: 
    .hero-product {
  padding: 0 var(--gutter--bucket);
}

.hero-product__in {
  max-width: var(--section--9);
  margin: 0 auto;
}

.hero-product__inner {
  width: 100%;
  max-width: calc(var(--section--9) - ((var(--section--9) - var(--section--8)) / 2));
  margin-left: auto;

  @media (min-width: 750px) {
    display: flex;
    flex-direction: row-reverse;
  }
}

.hero-product__media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;

  @media (min-width: 750px) {
    width: calc(100% - 380px);
  }
}

.hero-product__content {
  position: relative;
  flex: 0 0 380px;
  margin-top: var(--gap--8);
  padding-right: var(--gap--8);

  @media (min-width: 750px) {
    margin-top: 0;
    padding-bottom: var(--gap--10);
  }

  @media (min-width: 900px) {
    padding-top: var(--gap--20);
  }

  @media (min-width: 1100px) {
    padding-top: var(--gap--30);
  }
}

.hero-product__back {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  color: var(--color--neutrals-5);

  @media (min-width: 900px) {
    display: block;
  }
}

.hero-product__logos {
  display: flex;
  margin-bottom: var(--gap--3);
}

.hero-product__logo {
  width: auto !important;
  max-height: 32px;
  margin-left: var(--gap--2);

  &:first-child {
    margin-left: 0;
  }
}

.hero-product__intro {
  margin-bottom: var(--gap--6);

  @media (min-width: 900px) {
    margin-bottom: var(--gap--15);
  }
}

.hero-product__heading {
  font-size: var(--h--2);
  font-weight: 500;
}

.hero-product__description {
  margin-top: var(--gap--1);

  @media (min-width: 900px) {
    margin-top: var(--gap--2);
  }
}

.hero-product__cross-links {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--gap--2);
  margin-bottom: calc(var(--gap--2) * -1);

  @media (min-width: 900px) {
    margin-top: var(--gap--4);
  }
}

.hero-product__cross-link {
  flex: 0 0 auto;
  margin-bottom: var(--gap--2);
  margin-right: var(--gap--4);
}

.hero-product__subheading {
  margin-bottom: var(--gap--2);
  font-size: var(--h--7);
  font-weight: 700;

  @media (min-width: 900px) {
    margin-bottom: var(--gap--3);
    font-size: var(--h--5);
  }
}

.hero-product__colors {
  display: flex;
  margin-top: var(--gap--4);
}

.hero-product__color {
  margin-left: var(--gap--4);

  &:first-child {
    margin-left: 0;
  }
}

.hero-product__price {
  margin: var(--gap--4) 0;
}

.hero-product--legacy {
  .hero-product__media {
    img {
      object-fit: contain !important;
    }
  }
}

.hero-product--compact {
  .hero-product__content {
    @media (min-width: 1100px) {
      padding-top: var(--gap--10);
    }
  }

  .hero-product__intro {
    @media (min-width: 900px) {
      margin-bottom: var(--gap--6);
    }
  }
}

// New styling
#the-bucket {
  .hero-product__subheading--warranty {
    margin-top: var(--gap--3);
  }
}

.hero-product--care {
  .hero-product {
    &__content {
      padding-top: var(--gap--8);
    }

    &__intro {
      margin-bottom: var(--gap--8);
    }
  }
}
  • URL: /components/raw/hero-product/hero-product.scss
  • Filesystem Path: ../src/04_organisms/hero-product/hero-product.scss
  • Size: 3 KB
  • Content: 
    <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.4" y="0.4" width="12.2" height="12.2" rx="6.1" stroke="#007DE1" stroke-width="0.8"/>
<path d="M6.87598 7.90527H5.78711C5.79036 7.60254 5.81641 7.34863 5.86523 7.14355C5.91406 6.93522 5.99544 6.74642 6.10938 6.57715C6.22656 6.40788 6.38118 6.22884 6.57324 6.04004C6.72298 5.89681 6.85807 5.76172 6.97852 5.63477C7.09896 5.50456 7.19499 5.36784 7.2666 5.22461C7.33822 5.07812 7.37402 4.91048 7.37402 4.72168C7.37402 4.5166 7.33984 4.34245 7.27148 4.19922C7.20312 4.05599 7.10221 3.94694 6.96875 3.87207C6.83854 3.7972 6.67578 3.75977 6.48047 3.75977C6.31771 3.75977 6.16471 3.79232 6.02148 3.85742C5.87826 3.91927 5.7627 4.01693 5.6748 4.15039C5.58691 4.2806 5.53971 4.45312 5.5332 4.66797H4.35645C4.36296 4.25781 4.46061 3.91276 4.64941 3.63281C4.83822 3.35286 5.09212 3.1429 5.41113 3.00293C5.73014 2.86296 6.08659 2.79297 6.48047 2.79297C6.91667 2.79297 7.28939 2.86784 7.59863 3.01758C7.90788 3.16406 8.14388 3.37891 8.30664 3.66211C8.47266 3.94206 8.55566 4.2806 8.55566 4.67773C8.55566 4.96419 8.4987 5.22461 8.38477 5.45898C8.27083 5.6901 8.12272 5.90658 7.94043 6.1084C7.75814 6.30697 7.5612 6.50553 7.34961 6.7041C7.16732 6.87012 7.04362 7.05078 6.97852 7.24609C6.91341 7.43815 6.87923 7.65788 6.87598 7.90527ZM5.68945 9.42871C5.68945 9.25293 5.74967 9.10482 5.87012 8.98438C5.99056 8.86068 6.15495 8.79883 6.36328 8.79883C6.57161 8.79883 6.736 8.86068 6.85645 8.98438C6.97689 9.10482 7.03711 9.25293 7.03711 9.42871C7.03711 9.60449 6.97689 9.75423 6.85645 9.87793C6.736 9.99837 6.57161 10.0586 6.36328 10.0586C6.15495 10.0586 5.99056 9.99837 5.87012 9.87793C5.74967 9.75423 5.68945 9.60449 5.68945 9.42871Z" fill="#007DE1"/>
</svg>
  • URL: /components/raw/hero-product/learn-more.svg
  • Filesystem Path: ../src/04_organisms/hero-product/learn-more.svg
  • Size: 1.7 KB

No notes defined.