PDJ Brandbox

hero-product: Care Oos 

<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>

                <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>

                <div class="hero-product__actions">

                    <section class="overlay-modal" data-step="1">
                        <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 data-step="1">Sign me up for: CDJ-3000</span>
                                        <span data-step="2">Thank you!</span>
                                    </h3>

                                    <div class="overlay-modal__description">
                                        We&#x27;ll notify you as soon as this product is available again.
                                    </div>

                                    <form data-step="1" class="form form--modal form--modal" novalidate>
                                        <div class="overlay-modal__form">
                                            <div class="parent-class input-field is-required">
                                                <div class="input-field__inner">
                                                    <input type="email" name="email" id="" value="" class="test" required>
                                                    <span class="input-field__placeholder">Email address</span>
                                                </div>
                                                <div class="input-field__error">
                                                    <p>This field is not filled in correctly or cannot be empty.</p>
                                                </div>
                                            </div>

                                            <div class="overlay-modal__action">

                                                <button type="submit" class="action action--normal action--on-light">
                                                    <span class="action__label">Sign me up</span>
                                                    <span class="action__bg"></span>
                                                </button>

                                            </div>
                                        </div>

                                        <div class="overlay-modal__note">
                                            We respect your privacy and don&#x27;t share you email with anybody.
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </section>

                    <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">

                            <button type="button" class="overlay-modal__trigger action action--normal action--on-light">
                                <span class="action__label">Notify me when available</span>
                                <span class="action__bg"></span>
                            </button>

                        </div>
                    </div>

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

                    <div class="actions actions--stack actions--force">
                        <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--oos' this merge=true }}

        <div class="hero-product__actions">
          {{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>

          <div class="actions actions--stack actions--force">
            <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.