{"id":100415,"date":"2024-08-16T22:04:09","date_gmt":"2024-08-16T15:04:09","guid":{"rendered":"https:\/\/jblstore.co.id\/?page_id=100415"},"modified":"2024-08-17T00:15:31","modified_gmt":"2024-08-16T17:15:31","slug":"luxury","status":"publish","type":"page","link":"https:\/\/jblstore.co.id\/en\/luxury\/","title":{"rendered":"Luxury"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"100415\" class=\"elementor elementor-100415\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c513f5c elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"c513f5c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b6255f8\" data-id=\"b6255f8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1af781c elementor-widget elementor-widget-shortcode\" data-id=\"1af781c\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t    <style>\r\n        #title {\r\n            display: none;\r\n        }\r\n\r\n        .hero {\r\n            position: relative;\r\n            width: 100%;\r\n            height: 499px;\r\n            display: flex;\r\n            align-items: end;\r\n            background-image: url('\/wp-content\/uploads\/2024\/08\/Homepage-Hero-Luxury_2000.webp');\r\n            background-position: center;\r\n            background-repeat: no-repeat;\r\n            background-size: cover;\r\n            padding: 32px;\r\n\r\n            @media (min-width: 768px) {\r\n                & {\r\n                    height: 580px;\r\n                    padding: 52px;\r\n                }\r\n            }\r\n\r\n            .title-hero {\r\n                margin: 0;\r\n                color: white;\r\n                \/* 1440 -> 375 | 72px -> 32px *\/\r\n                font-size: clamp(32px, calc(2rem + ((1vw - 3.75px) * 3.7559)), 72px);\r\n                min-height: 0vw;\r\n                font-family: Grostesk-Bold, sans-serif;\r\n                line-height: 32px;\r\n\r\n                @media (min-width: 768px) {\r\n                    & {\r\n                        line-height: 57.6px;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        .nav-tabs-desktop {\r\n            position: sticky;\r\n            position: -webkit-sticky;\r\n            top: 0;\r\n            background-color: white;\r\n            color: black;\r\n            display: flex;\r\n            justify-content: center;\r\n            z-index: 20;\r\n            border-bottom: 1px solid #000000;\r\n\r\n            @media (max-width: 768px) {\r\n                & {\r\n                    display: none;\r\n                }\r\n            }\r\n\r\n            .list-tabs {\r\n                list-style: none;\r\n                display: flex;\r\n                gap: 72px;\r\n                position: relative;\r\n            }\r\n\r\n            .child {\r\n                position: relative;\r\n                font-size: 20px;\r\n                line-height: 16px;\r\n                padding: 20px 0;\r\n                cursor: pointer;\r\n                transition: all 2s ease-in;\r\n            }\r\n\r\n            .child:hover::before,\r\n            .child:hover::after {\r\n                content: \" \";\r\n                display: block;\r\n                position: absolute;\r\n                bottom: 0;\r\n                height: 3px;\r\n                background: #000;\r\n                \/* Black color on hover *\/\r\n                transition: width 2s ease-out;\r\n            }\r\n\r\n            .child:hover::before {\r\n                right: 0;\r\n                width: 100%;\r\n                \/* On hover, expand to full width *\/\r\n            }\r\n\r\n            .child:hover::after {\r\n                left: 0;\r\n                width: 100%;\r\n                \/* On hover, expand to full width *\/\r\n            }\r\n\r\n            .active::before,\r\n            .active::after {\r\n                content: \" \";\r\n                display: block;\r\n                position: absolute;\r\n                bottom: 0;\r\n                height: 3px;\r\n                background: orange;\r\n                \/* Orange color when active *\/\r\n                transition: width 2s ease-out;\r\n            }\r\n\r\n            .active::before {\r\n                right: 0;\r\n                width: 0%;\r\n                \/* Start with width 0 when active *\/\r\n            }\r\n\r\n            .active::after {\r\n                left: 0;\r\n                width: 100%;\r\n                \/* Expand to full width when active *\/\r\n            }\r\n\r\n            .active:hover::before,\r\n            .active:hover::after {\r\n                background: orange;\r\n                \/* Ensure it remains orange when hovered *\/\r\n            }\r\n        }\r\n\r\n        .container-product {\r\n            background-color: #FFFEF3;\r\n            border-top: 1px solid #FF4713;\r\n            \/* border-bottom: 1px solid #FF4713; *\/\r\n\r\n            .main-products {\r\n                display: grid;\r\n                grid-template-columns: repeat(4, minmax(0, 1fr));\r\n\r\n                @media (max-width: 768px) {\r\n                    & {\r\n                        grid-template-columns: repeat(2, minmax(0, 1fr));\r\n                    }\r\n                }\r\n\r\n                @media (min-width: 768px) {\r\n                    &>*:not(:nth-child(4n)) {\r\n                        border-right: 1px solid #FF4713;\r\n                    }\r\n                }\r\n\r\n                @media (max-width: 767px) {\r\n                    &>*:not(:nth-child(odd)) {\r\n                        border-right: 0;\r\n                    }\r\n\r\n                    &>*:nth-child(4n+1),\r\n                    &>*:nth-child(4n+3) {\r\n                        border-right: 1px solid #FF4713;\r\n                    }\r\n                }\r\n\r\n                .product {\r\n                    flex-basis: 50%;\r\n                    min-width: 50%;\r\n                    padding: 16px 24px;\r\n                    border-bottom: 1px solid #FF4713;\r\n                    display: flex;\r\n                    flex-direction: column;\r\n\r\n                    @media (min-width: 768px) {\r\n                        & {\r\n                            min-width: 25%;\r\n                            flex-basis: 25%;\r\n                        }\r\n                    }\r\n\r\n                    .product-wrapper {\r\n                        display: flex;\r\n                        flex-direction: column;\r\n                        justify-content: space-between;\r\n                        height: 100%;\r\n\r\n                        .product-info {\r\n                            padding-top: 16px;\r\n                            border-top: 1px solid #FF4713;\r\n\r\n                            .product-title {\r\n                                font-weight: 700;\r\n                                \/* 1440 -> 375 | 16px -> 14px *\/\r\n                                font-size: clamp(14px, calc(0.875rem + ((1vw - 3.75px) * 0.1878)), 16px);\r\n                                min-height: 0vw;\r\n                                margin: 0 0 8px 0;\r\n                                line-height: 19.6px;\r\n\r\n                                @media (min-width: 768px) {\r\n                                    & {\r\n                                        line-height: 19.2px;\r\n                                    }\r\n                                }\r\n                            }\r\n\r\n                            .product-description {\r\n                                font-weight: 400;\r\n                                font-size: 14px;\r\n                                line-height: 19.6px;\r\n\r\n                                @media (min-width: 768px) {\r\n                                    & {\r\n                                        line-height: 16.8px;\r\n                                    }\r\n                                }\r\n                            }\r\n                        }\r\n\r\n                        .product-footer {\r\n                            display: flex;\r\n                            flex-direction: column;\r\n                            justify-content: space-between;\r\n                            gap: 12px;\r\n\r\n                            @media (min-width: 768px) {\r\n                                & {\r\n                                    flex-direction: row;\r\n                                    gap: 5px;\r\n                                    align-items: center;\r\n                                }\r\n                            }\r\n\r\n                            .product-price {\r\n                                .discon-price {\r\n                                    font-weight: 700;\r\n                                    font-size: 16px;\r\n                                    line-height: 19.2px;\r\n                                    margin: 0;\r\n                                }\r\n\r\n                                .authentic-price {\r\n                                    font-weight: 700;\r\n                                    font-size: 14px;\r\n                                    line-height: 19.2px;\r\n                                    text-decoration: line-through;\r\n                                    color: rgba(8, 28, 32, 0.68);\r\n                                    margin: 0;\r\n                                }\r\n                            }\r\n\r\n                            .product-button {\r\n                                display: flex;\r\n                                \r\n                                .cta-button {\r\n                                    padding: 10px 16px;\r\n                                    font-size: 12px;\r\n                                    line-height: 22.4px;\r\n                                    color: white;\r\n                                    background-color: #DF2D00;\r\n\r\n                                    button {\r\n                                        color: white;\r\n                                        white-space: nowrap;\r\n                                    }\r\n\r\n                                    &:hover {\r\n                                        opacity: .7;\r\n                                    }\r\n                                }\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        .short-description {\r\n            background-color: #FFFEF3;\r\n            padding: 46px 25.5px;\r\n            text-align: center;\r\n\r\n            @media (min-width: 768px) {\r\n                & {\r\n                    padding-top: 64px;\r\n                    padding-bottom: 64px;\r\n                }\r\n            }\r\n\r\n            p {\r\n                width: 100%;\r\n                max-width: 640px;\r\n                \/* 1440 -> 375 | 20px -> 16px *\/\r\n                font-size: clamp(16px, calc(1rem + ((1vw - 3.75px) * 0.3756)), 20px);\r\n                min-height: 0vw;\r\n                line-height: 22.4px;\r\n                margin: 0 auto;\r\n\r\n                @media (min-width: 768px) {\r\n                    & {\r\n                        line-height: 28px;\r\n                    }\r\n                }\r\n            }\r\n\r\n            .action-description {\r\n                display: flex;\r\n                justify-content: center;\r\n                align-items: center;\r\n                gap: 24px;\r\n                margin-top: 32px;\r\n\r\n                @media (min-width: 768px) {\r\n                    margin-top: 39px;\r\n                }\r\n\r\n\r\n                button {\r\n                    border: 1px solid #FF4713;\r\n                    padding: 12px 16px 12px 16px;\r\n                    font-size: 16px;\r\n                    line-height: 22.4px;\r\n                    color: white;\r\n\r\n                    &:disabled {\r\n                        opacity: 1;\r\n                        cursor: default;\r\n                    }\r\n\r\n                    &.active {\r\n                        background-color: #FF4713;\r\n                    }\r\n\r\n                    &:not(.active) {\r\n                        background-color: #000000;\r\n                    }\r\n\r\n                    &:not(.active):hover {\r\n                        background-color: #FF4713;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        .story-telling {\r\n            background-color: #FFFEF3;\r\n\r\n            @media (min-width: 768px) {\r\n                & {\r\n                    padding: 60px 0;\r\n                }\r\n            }\r\n\r\n            .text-at-right {}\r\n\r\n            .text-at-left {}\r\n\r\n            .text-container {\r\n                display: flex;\r\n                flex-direction: column;\r\n                padding: 0 16px;\r\n                gap: 32px;\r\n\r\n                @media (min-width: 768px) {\r\n                    & {\r\n                        flex-direction: row;\r\n                        padding: 60px 0;\r\n                        gap: 0;\r\n                    }\r\n\r\n                    &>* {\r\n                        flex-basis: 50%;\r\n                    }\r\n                }\r\n\r\n                .text {\r\n                    align-content: center;\r\n                    order: 2;\r\n                    text-align: center;\r\n                    border-top: 2px solid #BBAC9F;\r\n                    padding-top: 24px;\r\n\r\n                    @media (min-width: 768px) {\r\n                        & {\r\n                            order: 0;\r\n                            padding: 0 69px;\r\n                            text-align: left;\r\n                            border-top: 0;\r\n                        }\r\n                    }\r\n\r\n                    h2 {\r\n                        \/* 1440 -> 375 | 72px -> 40px *\/\r\n                        font-size: clamp(40px, calc(2.5rem + ((1vw - 3.75px) * 3.0047)), 72px);\r\n                        min-height: 0vw;\r\n                        font-family: Grostesk-Bold, sans-serif;\r\n                        line-height: 36px;\r\n                        margin: 0 0 16px 0;\r\n\r\n                        @media (min-width: 768px) {\r\n                            & {\r\n                                line-height: 57.6px;\r\n                            }\r\n                        }\r\n                    }\r\n\r\n                    p {\r\n                        \/* 1440 -> 375 | 20px -> 16px *\/\r\n                        font-size: clamp(16px, calc(1rem + ((1vw - 3.75px) * 0.3756)), 20px);\r\n                        min-height: 0vw;\r\n                        line-height: 22.4px;\r\n                        font-weight: 400;\r\n                        margin-bottom: 80px;\r\n\r\n                        @media (min-width: 768px) {\r\n                            & {\r\n                                line-height: 28px;\r\n                                margin-bottom: 0;\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n\r\n                .image {\r\n                    position: relative;\r\n                    overflow: hidden;\r\n\r\n                    img {\r\n                        \/* position: absolute; *\/\r\n                        width: 100%;\r\n                        height: 100%;\r\n                        object-fit: cover;\r\n                        object-position: center;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    <\/style>\r\n    <main>\r\n        <section class=\"hero\">\r\n            <h1 class=\"title-hero\">JBL MODERN AUDIO AV RECEIVERS AND STAGE 2 LOUDSPEAKERS<\/h1>\r\n        <\/section>\r\n        <section class=\"nav-tabs-desktop\">\r\n            <ul class=\"list-tabs\">\r\n                <li class=\"child\" id=\"introduction-tab\">Introduction<\/li>\r\n                <li class=\"child\" id=\"product-interview-tab\">Product Overview<\/li>\r\n                <li class=\"child\" id=\"design-tab\">Design<\/li>\r\n                <li class=\"child\" id=\"performance-tab\">Performance<\/li>\r\n                <li class=\"child\" id=\"setup-tab\">Setup<\/li>\r\n                <li class=\"child\" id=\"streaming-tab\">Streaming<\/li>\r\n            <\/ul>\r\n        <\/section>\r\n        <section id=\"introduction\" class=\"short-description\">\r\n            <p>Take movie night to the next level. JBL\u2019s Modern AV Receivers and Loudspeakers are made with you in mind. Now you can enjoy your entertainment with a sound system that\u2019s simple to use and fits in perfectly with your modern space.<\/p>\r\n            <div class=\"action-description\">\r\n                <button class=\"btn-left active\" disabled>AVRs<\/button>\r\n                <button class=\"btn-right\">Speakers<\/button>\r\n            <\/div>\r\n        <\/section>\r\n        <section id=\"product-interview\" class=\"container-product\">\r\n            <div class=\"main-products\" id=\"main-products\">\r\n            <\/div>\r\n        <\/section>\r\n        <div class=\"story-telling\">\r\n            <section id=\"design\" class=\"text-container text-at-left\">\r\n                <div class=\"text\">\r\n                    <h2>A FRESH DESIGN THAT FITS INTO YOUR LIFE<\/h2>\r\n                    <p>This is a new generation of home theater made to match your lifestyle. Our AVRs and Stage 2 speakers are slimmer and sleeker, with a retro-modern feel and ambient lighting. These products are designed to play nicely with all your streaming services, so you can connect to your music, movies, gaming and more.<\/p>\r\n                <\/div>\r\n                <div class=\"image\">\r\n                    <img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/08\/Feature-1-Luxury_600.webp\" srcset=\"                        \/wp-content\/uploads\/2024\/08\/Feature-1-Luxury_1440.webp 1440w,                        \/wp-content\/uploads\/2024\/08\/Feature-1-Luxury_1200.webp 1200w,                        \/wp-content\/uploads\/2024\/08\/Feature-1-Luxury_1024.webp 1024w,                        \/wp-content\/uploads\/2024\/08\/Feature-1-Luxury_768.webp 768w,                        \/wp-content\/uploads\/2024\/08\/Feature-1-Luxury_600.webp 600w,                        \/wp-content\/uploads\/2024\/08\/Feature-1-Luxury_300.webp 300w,                        \/wp-content\/uploads\/2024\/08\/Feature-1-Luxury_150.webp 150w                    \" sizes=\"auto, (max-width: 600px) 300px,                         (max-width: 768px) 600px,                         (max-width: 1024px) 768px,                         (max-width: 1200px) 1024px,                         (max-width: 1600px) 1200px,                         1440px\" width=\"1440\" height=\"810\" alt=\"Feature 1 Illustration\" \/>\r\n                <\/div>\r\n            <\/section>\r\n            <section id=\"performance\" class=\"text-container text-at-right\">\r\n                <div class=\"image\">\r\n                    <img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/08\/Feature-2-Luxury_600.webp\" srcset=\"                        \/wp-content\/uploads\/2024\/08\/Feature-2-Luxury_1440.webp 1440w,                        \/wp-content\/uploads\/2024\/08\/Feature-2-Luxury_1200.webp 1200w,                        \/wp-content\/uploads\/2024\/08\/Feature-2-Luxury_1024.webp 1024w,                        \/wp-content\/uploads\/2024\/08\/Feature-2-Luxury_768.webp 768w,                        \/wp-content\/uploads\/2024\/08\/Feature-2-Luxury_600.webp 600w,                        \/wp-content\/uploads\/2024\/08\/Feature-2-Luxury_300.webp 300w,                        \/wp-content\/uploads\/2024\/08\/Feature-2-Luxury_150.webp 150w                    \" sizes=\"auto, (max-width: 600px) 300px,                         (max-width: 768px) 600px,                         (max-width: 1024px) 768px,                         (max-width: 1200px) 1024px,                         (max-width: 1600px) 1200px,                         1440px\" width=\"1440\" height=\"810\" alt=\"Feature 2 Illustration\" \/>\r\n                <\/div>\r\n                <div class=\"text\">\r\n                    <h2>HIGH-PERFORMANCE AUDIO FOR THE NEXT GENERATION<\/h2>\r\n                    <p>JBL is the go-to audio provider for movie theaters and recording studios around the globe. From our patented loudspeaker technology to our innovative approach to digital amplifier design, over 75 years of knowledge and expertise have gone into this new line of home theater products. Enjoy the ultimate cinema experience right at home with immersive, unfiltered sound.<\/p>\r\n                <\/div>\r\n            <\/section>\r\n            <section id=\"setup\" class=\"text-container text-at-left\">\r\n                <div class=\"text\">\r\n                    <h2>EASY TO SET UP<\/h2>\r\n                    <p>Our EZ Set EQ app makes calibrating the sound to match your room incredibly easy. To give you even more control, we\u2019ve added Works with SmartThings integration into all our Wi-Fi enabled AVRs so you can smoothly connect to all your home devices. Create easy routines like turning on your TV, lowering the lights and playing a movie\u2014all with a press of a button.<\/p>\r\n                <\/div>\r\n                <div class=\"image\">\r\n                    <img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/08\/Feature-3-Luxury_600.webp\" srcset=\"                        \/wp-content\/uploads\/2024\/08\/Feature-3-Luxury_1440.webp 1440w,                        \/wp-content\/uploads\/2024\/08\/Feature-3-Luxury_1200.webp 1200w,                        \/wp-content\/uploads\/2024\/08\/Feature-3-Luxury_1024.webp 1024w,                        \/wp-content\/uploads\/2024\/08\/Feature-3-Luxury_768.webp 768w,                        \/wp-content\/uploads\/2024\/08\/Feature-3-Luxury_600.webp 600w,                        \/wp-content\/uploads\/2024\/08\/Feature-3-Luxury_300.webp 300w,                        \/wp-content\/uploads\/2024\/08\/Feature-3-Luxury_150.webp 150w                    \" sizes=\"auto, (max-width: 600px) 300px,                         (max-width: 768px) 600px,                         (max-width: 1024px) 768px,                         (max-width: 1200px) 1024px,                         (max-width: 1600px) 1200px,                         1440px\" width=\"1440\" height=\"810\" alt=\"Feature 3 Illustration\" \/>\r\n                <\/div>\r\n            <\/section>\r\n            <section id=\"streaming\" class=\"text-container text-at-right\">\r\n                <div class=\"image\">\r\n                    <img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/08\/Feature-4-Luxury_600.webp\" srcset=\"                        \/wp-content\/uploads\/2024\/08\/Feature-4-Luxury_1440.webp 1440w,                        \/wp-content\/uploads\/2024\/08\/Feature-4-Luxury_1200.webp 1200w,                        \/wp-content\/uploads\/2024\/08\/Feature-4-Luxury_1024.webp 1024w,                        \/wp-content\/uploads\/2024\/08\/Feature-4-Luxury_768.webp 768w,                        \/wp-content\/uploads\/2024\/08\/Feature-4-Luxury_600.webp 600w,                        \/wp-content\/uploads\/2024\/08\/Feature-4-Luxury_300.webp 300w,                        \/wp-content\/uploads\/2024\/08\/Feature-4-Luxury_150.webp 150w                    \" sizes=\"auto, (max-width: 600px) 300px,                         (max-width: 768px) 600px,                         (max-width: 1024px) 768px,                         (max-width: 1200px) 1024px,                         (max-width: 1600px) 1200px,                         1440px\" width=\"1440\" height=\"810\" alt=\"Feature 4 Illustration\" \/>\r\n                <\/div>\r\n                <div class=\"text\">\r\n                    <h2>STREAM YOUR WAY<\/h2>\r\n                    <p>Whether you\u2019re streaming via Bluetooth or through the internet, enjoying all your entertainment in one place has never been easier. The JBL MA series gives you the flexibility to listen how you want.<\/p>\r\n                <\/div>\r\n            <\/section>\r\n        <\/div>\r\n    <\/main>\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function () {\r\n            const sections = document.querySelectorAll('section');\r\n            const tabs = document.querySelectorAll('.list-tabs .child');\r\n\r\n            const options = {\r\n                root: null,\r\n                threshold: 0.1\r\n            };\r\n\r\n            tabs.forEach(tab => {\r\n                tab.addEventListener('click', (event) => {\r\n                    event.preventDefault();\r\n\r\n                    const targetId = tab.getAttribute('id').replace('-tab', '');\r\n                    const targetElement = document.querySelector(`#${targetId}`);\r\n\r\n                    if (targetElement) {\r\n                        targetElement.scrollIntoView({ behavior: 'smooth' });\r\n                    }\r\n                });\r\n            });\r\n\r\n            const observer = new IntersectionObserver((entries) => {\r\n                entries.forEach(entry => {\r\n                    const tab = document.querySelector(`#${entry.target.id}-tab`);\r\n                    if (entry.isIntersecting) {\r\n                        tabs.forEach(tab => tab.classList.remove('active'));\r\n                        if (tab) tab.classList.add('active');\r\n                    }\r\n                });\r\n            }, options);\r\n\r\n            sections.forEach(section => {\r\n                observer.observe(section);\r\n            });\r\n\r\n            \/\/ { category: \"avrs\", image: \"\/wp-content\/uploads\/2024\/08\/product-1.png\", name: \"MA310\", description: \"5.2-channel 4K AV Receiver\", price: \"1.589.536\", linkButton: \"\/product\/jbl-ma310\/\", isComming: false },\r\n            \/\/ { category: \"avrs\", image: \"\/wp-content\/uploads\/2024\/08\/1_1.png\", name: \"MA510\", description: \"5.2-channel 8K AV Receiver\", price: \"9.412.495\", linkButton: \"\/product\/jbl-ma510\/\", isComming: false },\r\n            \/\/ { category: \"speakers\", image: \"\/wp-content\/uploads\/2024\/08\/LS_JBL_Stage2_200P_Front_QtrLeft_With_Grille_2_BLK_hero.webp\", name: \"Stage 200P\", description: \"10-inch (250mm) 300W Powered Subwoofer\", price: \"7.850.464\", linkButton: \"\/product\/jbl-stage-200p\/\", isComming: false },\r\n            \/\/ { category: \"speakers\", image: \"\/wp-content\/uploads\/2024\/08\/LS_JBL_Stage2_250B_Front_Hero_Pair_BLK_hero.webp\", name: \"Stage 250B\", description: \"2-Way 5.25-inch (130mm) Bookshelf Loudspeaker - Pair\", price: \"6.280.214\", linkButton: \"\/product\/jbl-stage-250b\/\", isComming: false },\r\n            \/\/ { category: \"speakers\", image: \"\", name: \"\", description: \"\", price: \"\", linkButton: \"\", isComming: false },\r\n            const products = [\r\n                { category: \"avrs\", name: \"MA710\", image: \"\/wp-content\/uploads\/2024\/08\/LS_JBL_MA710_RECEIVERS_Front_2_BLK.png\", description: \"7.2-channel 8K AV Receiver\", price: \"0\", linkButton: \"\/product\/ma710\/\", isComming: true },\r\n                { category: \"avrs\", name: \"MA7100HP\", image: \"\/wp-content\/uploads\/2024\/08\/LS_JBL_MA7100HP_RECEIVERS_Right_Facing_1_BLK.png\", description: \"7.2-channel 8K High Performance AV Receiver\", price: \"0\", linkButton: \"\/product\/jbl-ma7100hp\/\", isComming: true },\r\n                { category: \"avrs\", name: \"MA9100HP\", image: \"\/wp-content\/uploads\/2024\/08\/LS_JBL_MA9100HP_RECEIVERS_Front_2_BLK_WEB_D2.png\", description: \"9.2-channel 8K High Performance AV Receiver\", price: \"0\", linkButton: \"\/product\/jbl-ma9100hp\/\", isComming: true },\r\n                { category: \"avrs\", name: \"SA750\", image: \"\/wp-content\/uploads\/2024\/08\/JBLSA750-Walnut_3Qrt-Remote_WEB_D1-1.png\", description: \"Streaming Integrated Stereo Amplifier\", price: \"72.500.000\", linkButton: \"\/product\/jbl-sa750\/\", isComming: false },\r\n                { category: \"avrs\", name: \"SA550\", image: \"\/wp-content\/uploads\/2024\/08\/JBL-SA550_Front-Reflection-aptX-.png\", description: \"Integrated Amplifier with Bluetooth\", price: \"46.500.000\", linkButton: \"\/product\/jbl-sa550\/\", isComming: false },\r\n                { category: \"avrs\", name: \"CD350\", image: \"\/wp-content\/uploads\/2024\/08\/JBL-CD350_3QrtLeft-1-1-1.png\", description: \"Compact Disc Player\", price: \"18.000.000\", linkButton: \"\/product\/jbl-cd350\/\", isComming: false },\r\n                { category: \"speakers\", name: \"Stage2 220P\", image: \"\/wp-content\/uploads\/2024\/08\/LS_JBL_Stage2_220P_Front_QtrLeft_With_Grille_BLK_hero_1_-.png\", description: \"12-inch (300mm) 500W Powered Subwoofer\", price: \"13.500.000\", linkButton: \"\/product\/jbl-stage-220p\/\", isComming: false },\r\n                { category: \"speakers\", name: \"Stage2 240B\", image: \"\/wp-content\/uploads\/2024\/08\/LS_JBL_Stage2_240B_Front_Pair_2_BLK_d1.png\", description: \"2-Way 4.5-inch (114mm) Bookshelf Loudspeaker - Pair\", price: \"7.000.000\", linkButton: \"\/product\/jbl-stage-240b\/\", isComming: false },\r\n                { category: \"speakers\", name: \"Stage2 240H\", image: \"\/wp-content\/uploads\/2024\/08\/LS_JBL_Stage2_240H_Front_Without_Grille_BLK-.png\", description: \"2-Way 4.5-inch (114mm) Dolby Atmos\u00ae Surround Sound Loudspeaker - Pair\", price: \"10.500.000\", linkButton: \"\/product\/jbl-stage-240h\/\", isComming: false },\r\n                { category: \"speakers\", name: \"Stage2 245C\", image: \"\/wp-content\/uploads\/2024\/08\/LS_JBL_Stage2_245C_Front_Qtr_Left_With_Grille_2_BLK_hero.png\", description: \"2.5-Way Quad 4.5-inch (114mm) Center Channel Loudspeaker\", price: \"0\", linkButton: \"\/product\/jbl-stage-245c\/\", isComming: true },\r\n                { category: \"speakers\", name: \"Stage2 260F\", image: \"\/wp-content\/uploads\/2024\/08\/LS_JBL_Stage2_260F_Front_Without_Grille_BLK-.png\", description: \"2.5-Way Dual 6.5-inch (165mm) Floorstanding Loudspeaker\", price: \"11.500.000\", linkButton: \"\/product\/jbl-stage-260f\/\", isComming: false },\r\n                { category: \"speakers\", name: \"Stage2 280F\", image: \"\/wp-content\/uploads\/2024\/08\/LS_JBL_Stage2_280F-240H_Front_Pair_5_BLK-_2_-.png\", description: \"2.5-Way Dual 8-inch (200mm) Floorstanding Loudspeaker\", price: \"14.500.000\", linkButton: \"\/product\/jbl-stage-280f\/\", isComming: false },\r\n                { category: \"speakers\", name: \"L52\", image: \"\/wp-content\/uploads\/2024\/08\/L52-Classic-Pair-Blue.png\", description: \"5.25-inch (130mm) 2-way Bookshelf Loudspeaker\", price: \"26.000.000\", linkButton: \"\/product\/jbl-l52-classic\/\", isComming: false },\r\n                { category: \"speakers\", name: \"L82 MKII\", image: \"\/wp-content\/uploads\/2024\/08\/JBLL82MK2BLU_PairFrontWithGrille_OnJBLJS80STANDBLK_1605X160.png\", description: \"8-inch (200mm) 2-way Bookshelf Loudspeaker\", price: \"53.000.000\", linkButton: \"\/product\/l82-classic-mkii\/\", isComming: false },\r\n                { category: \"speakers\", name: \"L100 MKII\", image: \"\/wp-content\/uploads\/2024\/08\/JBLL100MK2BLK_PairFrontWithGrille_OnJBLJS150BLK_1605x1605.png\", description: \"12-inch (300mm) 3-way Bookshelf Loudspeaker\", price: \"53.000.000\", linkButton: \"\/product\/l100-classic-mkii\/\", isComming: false },\r\n                { category: \"speakers\", name: \"Stage 2FS\", image: \"\/wp-content\/uploads\/2024\/08\/LS_JBL_Stage2_FS_Base_2_BLK-1-1.png\", description: \"Floorstands for JBL Stage 240B and 250B\", price: \"6.000.000\", linkButton: \"\/product\/jbl-stage-2-fs\/\", isComming: false },\r\n                { category: \"speakers\", name: \"JS65\", image: \"\/wp-content\/uploads\/2024\/08\/JBL-JS-65-Product2-1605x1605-1.png\", description: \"Loudspeaker Stand\", price: \"10.500.000\", linkButton: \"\/product\/jbl-js65\/\", isComming: false },\r\n                { category: \"speakers\", name: \"JS80\", image: \"\/wp-content\/uploads\/2024\/08\/JBL-JS-80-Product2-1605x1605-1.png\", description: \"Loudspeaker Stand\", price: \"8.500.000\", linkButton: \"\/product\/jbl-js80\/\", isComming: false },\r\n                { category: \"speakers\", name: \"JS120\", image: \"\/wp-content\/uploads\/2024\/08\/JBL-JS-120-Product2-1605x1605-1.png\", description: \"Loudspeaker Stand for Extra Large Classic and Studio Monitor Loudspeakers\", price: \"8.500.000\", linkButton: \"\/product\/jbl-js120\/\", isComming: false },\r\n                { category: \"speakers\", name: \"JS150\", image: \"\/wp-content\/uploads\/2024\/08\/JBL_JS-150__Product.png\", description: \"7-degree tilt for optimum listening angle\", price: \"11.000.000\", linkButton: \"\/product\/jbl-js150\/\", isComming: false },\r\n            ];\r\n\r\n            function createProductElement(product) {\r\n                const productElement = document.createElement('div');\r\n                productElement.className = 'product';\r\n                productElement.setAttribute('data-category', product.category);\r\n\r\n                const productImage = document.createElement('div');\r\n                productImage.className = 'product-image';\r\n                const img = document.createElement('img');\r\n                img.src = product.image;\r\n                img.alt = product.name;\r\n                productImage.appendChild(img);\r\n                productElement.appendChild(productImage);\r\n\r\n                const productWrapper = document.createElement('div');\r\n                productWrapper.className = 'product-wrapper';\r\n\r\n                const productInfo = document.createElement('div');\r\n                productInfo.className = 'product-info';\r\n                const title = document.createElement('h3');\r\n                title.className = 'product-title';\r\n                title.textContent = product.name;\r\n                const description = document.createElement('p');\r\n                description.className = 'product-description';\r\n                description.textContent = product.description;\r\n                productInfo.appendChild(title);\r\n                productInfo.appendChild(description);\r\n                productWrapper.appendChild(productInfo);\r\n\r\n                const productFooter = document.createElement('div');\r\n                productFooter.className = 'product-footer';\r\n                const productPrice = document.createElement('div');\r\n                productPrice.className = 'product-price';\r\n                const disconPrice = document.createElement('p');\r\n                disconPrice.className = 'discon-price';\r\n                disconPrice.textContent = product.isComming ? '' : 'Rp. ' + product.price;\r\n                \/\/ disconPrice.textContent = ''\r\n                const authenticPrice = document.createElement('p');\r\n                authenticPrice.className = 'authentic-price';\r\n                authenticPrice.textContent = product.isComming ? '' : 'Rp. ' + product.price;\r\n                \/\/ authenticPrice.textContent = ''\r\n                productPrice.appendChild(disconPrice);\r\n                \/\/ productPrice.appendChild(authenticPrice);\r\n                productFooter.appendChild(productPrice);\r\n\r\n                const productButton = document.createElement('div');\r\n                productButton.className = 'product-button';\r\n                const isEnglish = (() => {\r\n                    try {\r\n                        const urlObj = new URL(window.location.href);\r\n                        const pathSegments = urlObj.pathname.split('\/');\r\n                        return pathSegments.includes('en');\r\n                    } catch (error) {\r\n                        console.error('Invalid URL:', error);\r\n                        return false;\r\n                    }\r\n                })();\r\n\r\n                if (product.isComming) {\r\n                    const button = document.createElement('button');\r\n                    button.textContent = isEnglish ? 'Coming Soon' : 'Segera Hadir';\r\n                    \/\/ button.disabled = true;\r\n                    button.className = \"cta-button\";\r\n                    productButton.appendChild(button);\r\n                } else {\r\n                    const buttonLink = document.createElement('a');\r\n                    buttonLink.href = isEnglish ? '\/en' + product.linkButton : product.linkButton;\r\n                    buttonLink.setAttribute('aria-label', 'Selengkapnya');\r\n                    buttonLink.setAttribute('aria-label', isEnglish ? 'Learn More' : 'Selengkapnya');\r\n                    buttonLink.className = 'cta-button';\r\n                    const button = document.createElement('button');\r\n                    \/\/ Beli sekarang\r\n                    button.textContent = isEnglish ? 'Learn More' : 'Selengkapnya';\r\n                    buttonLink.appendChild(button);\r\n                    productButton.appendChild(buttonLink);\r\n                }\r\n                productFooter.appendChild(productButton);\r\n\r\n                productWrapper.appendChild(productFooter);\r\n                productElement.appendChild(productWrapper);\r\n\r\n                return productElement;\r\n            }\r\n\r\n            function appendProductsToContainer(containerId, productList) {\r\n                const container = document.getElementById(containerId);\r\n                if (container) {\r\n                    container.innerHTML = ''; \/\/ Clear existing products\r\n                    productList.forEach(product => {\r\n                        const productElement = createProductElement(product);\r\n                        container.appendChild(productElement);\r\n                    });\r\n                } else {\r\n                    console.error(`Container with id \"${containerId}\" not found.`);\r\n                }\r\n            }\r\n\r\n            function filterProductsByCategory(category, button) {\r\n                \/\/ Filter products based on the category\r\n                const filteredProducts = products.filter(product => product.category === category);\r\n\r\n                \/\/ Update the container with filtered products\r\n                appendProductsToContainer('main-products', filteredProducts);\r\n\r\n                \/\/ Remove 'active' class from all buttons and enable them\r\n                document.querySelectorAll('.btn-left, .btn-right').forEach(btn => {\r\n                    btn.classList.remove('active');\r\n                    btn.removeAttribute('disabled');\r\n                });\r\n\r\n                \/\/ Add 'active' class to the clicked button and disable it\r\n                button.classList.add('active');\r\n                button.setAttribute('disabled', true);\r\n            }\r\n\r\n            \/\/ Function to handle button clicks\r\n            function handleButtonClick(category, button) {\r\n                \/\/ Filter products based on category\r\n                filterProductsByCategory(category, button);\r\n            }\r\n\r\n            const btnLeft = document.querySelector('.btn-left');\r\n            const btnRight = document.querySelector('.btn-right');\r\n\r\n            if (btnLeft && btnRight) {\r\n                btnLeft.addEventListener('click', function () {\r\n                    handleButtonClick('avrs', this);\r\n                });\r\n                btnRight.addEventListener('click', function () {\r\n                    handleButtonClick('speakers', this);\r\n                });\r\n\r\n                \/\/ Initialize with default category\r\n                handleButtonClick('avrs', btnLeft);\r\n            } else {\r\n                console.error('Buttons not found');\r\n            }\r\n        })\r\n    <\/script>\r\n    \t\t<div class=\"elementor-shortcode\"><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":88637,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-100415","page","type-page","status-publish","hentry","no-post-thumbnail"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Luxury<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jblstore.co.id\/en\/luxury\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Luxury\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jblstore.co.id\/en\/luxury\/\" \/>\n<meta property=\"og:site_name\" content=\"JBL Store\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-16T17:15:31+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jblstore.co.id\/en\/luxury\/\",\"url\":\"https:\/\/jblstore.co.id\/en\/luxury\/\",\"name\":\"Luxury - JBL Store\",\"isPartOf\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#website\"},\"datePublished\":\"2024-08-16T15:04:09+00:00\",\"dateModified\":\"2024-08-16T17:15:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/luxury\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jblstore.co.id\/en\/luxury\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jblstore.co.id\/en\/luxury\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jblstore.co.id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Luxury\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#website\",\"url\":\"https:\/\/jblstore.co.id\/en\/\",\"name\":\"JBL Store\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jblstore.co.id\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#organization\",\"name\":\"JBL Store\",\"url\":\"https:\/\/jblstore.co.id\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/\",\"url\":\"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png\",\"contentUrl\":\"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png\",\"width\":70,\"height\":52,\"caption\":\"JBL Store\"},\"image\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\",\"https:\/\/www.instagram.com\/jblindonesia\/\",\"https:\/\/www.youtube.com\/c\/JBLIndonesia\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Luxury","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jblstore.co.id\/en\/luxury\/","og_locale":"en_US","og_type":"article","og_title":"Luxury","og_url":"https:\/\/jblstore.co.id\/en\/luxury\/","og_site_name":"JBL Store","article_publisher":"https:\/\/www.facebook.com\/JBLAudioIndonesia\/","article_modified_time":"2024-08-16T17:15:31+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jblstore.co.id\/en\/luxury\/","url":"https:\/\/jblstore.co.id\/en\/luxury\/","name":"Luxury - JBL Store","isPartOf":{"@id":"https:\/\/jblstore.co.id\/en\/#website"},"datePublished":"2024-08-16T15:04:09+00:00","dateModified":"2024-08-16T17:15:31+00:00","breadcrumb":{"@id":"https:\/\/jblstore.co.id\/en\/luxury\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jblstore.co.id\/en\/luxury\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jblstore.co.id\/en\/luxury\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jblstore.co.id\/"},{"@type":"ListItem","position":2,"name":"Luxury"}]},{"@type":"WebSite","@id":"https:\/\/jblstore.co.id\/en\/#website","url":"https:\/\/jblstore.co.id\/en\/","name":"JBL Store","description":"","publisher":{"@id":"https:\/\/jblstore.co.id\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jblstore.co.id\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jblstore.co.id\/en\/#organization","name":"JBL Store","url":"https:\/\/jblstore.co.id\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/","url":"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png","contentUrl":"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png","width":70,"height":52,"caption":"JBL Store"},"image":{"@id":"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/JBLAudioIndonesia\/","https:\/\/www.instagram.com\/jblindonesia\/","https:\/\/www.youtube.com\/c\/JBLIndonesia"]}]}},"_links":{"self":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/100415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/users\/88637"}],"replies":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/comments?post=100415"}],"version-history":[{"count":4,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/100415\/revisions"}],"predecessor-version":[{"id":100419,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/100415\/revisions\/100419"}],"wp:attachment":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/media?parent=100415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}