{"id":88,"date":"2026-10-08T07:59:43","date_gmt":"2026-10-08T07:59:43","guid":{"rendered":"https:\/\/intouch.my.id\/web\/?page_id=88"},"modified":"2026-10-08T09:18:35","modified_gmt":"2026-10-08T09:18:35","slug":"luxury-boutique-ecommerce-website-design-infrastructure","status":"publish","type":"page","link":"https:\/\/intouch.my.id\/web\/proposal\/luxury-boutique-ecommerce-website-design-infrastructure\/","title":{"rendered":"Luxury Boutique Ecommerce Website Design &#038; Infrastructure"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"88\" class=\"elementor elementor-88\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be1254e e-flex e-con-boxed e-con e-parent\" data-id=\"be1254e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-021fc84 elementor-widget elementor-widget-html\" data-id=\"021fc84\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Luxury Boutique Ecommerce Website Design & Infrastructure Proposal<\/title>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n    <style>\n        :root {\n            --bg-color: #fcfbfa;\n            --text-main: #1a1a1a;\n            --text-muted: #666666;\n            --border-color: #e5e2dd;\n            --accent-color: #7d7568;\n            --card-bg: #ffffff;\n            --highlight-green: #f2faf5;\n            --highlight-blue: #f3f7fa;\n\n            \/* Demo Specific Variables *\/\n            --ink: #182d38;\n            --muted: #6c7d83;\n            --line: #e5e9e7;\n            --paper: #fbfaf7;\n            --sand: #eee7dc;\n            --accent: #c88f5e;\n            --dark: #203c43;\n            --shadow: 0 20px 50px rgba(29,52,58,.12);\n        }\n\n        * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        body {\n            font-family: 'Inter', sans-serif;\n            background-color: var(--bg-color);\n            color: var(--text-main);\n            line-height: 1.6;\n            -webkit-user-select: none;\n            -moz-user-select: none;\n            -ms-user-select: none;\n            user-select: none;\n            overflow-x: hidden;\n        }\n\n        .container {\n            max-width: 1100px;\n            margin: 0 auto;\n            padding: 40px 20px;\n        }\n\n        header {\n            margin-bottom: 40px;\n            border-bottom: 1px solid var(--border-color);\n            padding-bottom: 30px;\n        }\n\n        .proposal-meta {\n            font-size: 13px;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            color: var(--text-muted);\n            margin-bottom: 15px;\n        }\n\n        h1 {\n            font-family: 'Cormorant Garamond', serif;\n            font-size: 3rem;\n            font-weight: 400;\n            line-height: 1.2;\n            margin-bottom: 20px;\n        }\n\n        .meta-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n            gap: 20px;\n            font-size: 14px;\n            margin-top: 30px;\n        }\n\n        .meta-item strong {\n            display: block;\n            color: var(--text-muted);\n            font-weight: 500;\n            margin-bottom: 4px;\n        }\n\n        .validity-badge {\n            display: inline-block;\n            background-color: #fff5f5;\n            color: #c53030;\n            font-size: 13px;\n            font-weight: 600;\n            padding: 6px 12px;\n            border-radius: 4px;\n            margin-top: 15px;\n            border: 1px solid #feb2b2;\n        }\n\n        .nav-tabs {\n            display: flex;\n            flex-wrap: wrap;\n            border-bottom: 1px solid var(--border-color);\n            margin-bottom: 40px;\n            gap: 5px;\n        }\n\n        .tab-btn {\n            background: none;\n            border: none;\n            padding: 12px 18px;\n            font-family: 'Inter', sans-serif;\n            font-size: 14px;\n            color: var(--text-muted);\n            cursor: pointer;\n            transition: all 0.2s ease;\n            border-bottom: 2px solid transparent;\n        }\n\n        .tab-btn:hover {\n            color: var(--text-main);\n        }\n\n        .tab-btn.active {\n            color: var(--text-main);\n            border-bottom: 2px solid var(--text-main);\n            font-weight: 600;\n        }\n\n        .proposal-section {\n            display: none;\n            animation: fadeIn 0.4s ease;\n        }\n\n        .proposal-section.active {\n            display: block;\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(5px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        h2 {\n            font-family: 'Cormorant Garamond', serif;\n            font-size: 2.2rem;\n            font-weight: 400;\n            margin-bottom: 15px;\n            border-bottom: 1px solid var(--border-color);\n            padding-bottom: 10px;\n        }\n\n        h3 {\n            font-family: 'Cormorant Garamond', serif;\n            font-size: 1.6rem;\n            font-weight: 400;\n            margin: 30px 0 15px 0;\n            color: #2c2c2c;\n        }\n\n        .section-intro, .section-sub-intro {\n            color: var(--text-muted);\n            margin-bottom: 25px;\n            max-width: 800px;\n        }\n\n        \/* Tables styling *\/\n        .proposal-table {\n            width: 100%;\n            border-collapse: collapse;\n            margin-bottom: 30px;\n            font-size: 14px;\n            background-color: var(--card-bg);\n        }\n\n        .proposal-table th, .proposal-table td {\n            padding: 14px 18px;\n            text-align: left;\n            border-bottom: 1px solid var(--border-color);\n        }\n\n        .proposal-table th {\n            background-color: #f5f4f0;\n            font-weight: 600;\n            color: var(--text-main);\n            text-transform: uppercase;\n            font-size: 12px;\n            letter-spacing: 1px;\n        }\n\n        .proposal-table tbody tr:hover {\n            background-color: #faf9f6;\n        }\n\n        \/* Badges *\/\n        .badge {\n            padding: 4px 8px;\n            border-radius: 4px;\n            font-size: 11px;\n            font-weight: bold;\n            text-transform: uppercase;\n            display: inline-block;\n        }\n        .badge-low { background-color: #e2e8f0; color: #4a5568; }\n        .badge-mid { background-color: #feebc8; color: #c05621; }\n\n        .highlight-recommend {\n            background-color: var(--highlight-green) !important;\n            border-left: 4px solid #38a169;\n        }\n        .highlight-speed {\n            background-color: var(--highlight-blue) !important;\n            border-left: 4px solid #3182ce;\n        }\n        .highlight-value {\n            background-color: #f7fafc;\n        }\n\n        \/* IP Protection & Notes *\/\n        .ip-protection-clause {\n            background-color: #fffaf0;\n            border-left: 4px solid #dd6b20;\n            padding: 20px;\n            margin: 35px 0;\n            border-radius: 4px;\n        }\n        .commercial-note {\n            font-size: 13px;\n            color: var(--text-muted);\n            margin-top: 15px;\n            background: #f5f4f0;\n            padding: 12px;\n            border-radius: 4px;\n        }\n\n        \/* Input Block Cards *\/\n        .input-blocks-container {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: 25px;\n            margin-bottom: 40px;\n        }\n        @media(min-width: 768px) {\n            .input-blocks-container { grid-template-columns: repeat(3, 1fr); }\n        }\n        .input-block-card {\n            border: 1px solid var(--border-color);\n            padding: 24px;\n            border-radius: 6px;\n            background-color: var(--card-bg);\n            box-shadow: 0 2px 4px rgba(0,0,0,0.02);\n        }\n        .input-block-card ul, .input-block-card ol {\n            padding-left: 20px;\n            margin-top: 12px;\n            font-size: 13.5px;\n        }\n        .input-block-card li { margin-bottom: 8px; }\n\n        .ready-to-build-cta {\n            text-align: center;\n            background: #1a1a1a;\n            color: #ffffff;\n            padding: 50px 30px;\n            border-radius: 6px;\n            margin-top: 40px;\n        }\n        .ready-to-build-cta h2 {\n            border: none;\n            color: #ffffff;\n            margin-bottom: 15px;\n        }\n        .btn-primary {\n            display: inline-block;\n            background: #ffffff;\n            color: #1a1a1a;\n            padding: 14px 36px;\n            text-decoration: none;\n            border-radius: 4px;\n            font-weight: 600;\n            letter-spacing: 1px;\n            transition: all 0.2s ease;\n            margin: 15px 0;\n            font-size: 14px;\n            text-transform: uppercase;\n        }\n        .btn-primary:hover {\n            background: #eae6df;\n        }\n\n        \/* INTERACTIVE DEMO STYLING FOR TAB 04 *\/\n        .demo-showcase-container {\n            background: #ffffff;\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            padding: 30px;\n            margin: 40px 0;\n            position: relative;\n        }\n        .demo-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            border-bottom: 1px solid var(--border-color);\n            padding-bottom: 15px;\n            margin-bottom: 25px;\n        }\n        .cart-trigger-btn {\n            background: none;\n            border: 1px solid var(--text-main);\n            padding: 8px 16px;\n            cursor: pointer;\n            font-family: inherit;\n            font-size: 14px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            transition: all 0.2s;\n        }\n        .cart-trigger-btn:hover {\n            background: #1a1a1a;\n            color: #fff;\n        }\n        .demo-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n            gap: 30px;\n        }\n        .demo-product-card {\n            background: #fff;\n            border: 1px solid #f0ede9;\n            padding: 12px;\n            border-radius: 4px;\n            display: flex;\n            flex-direction: column;\n        }\n        .demo-img-placeholder {\n            width: 100%;\n            aspect-ratio: 3\/4;\n            background: #f5f4f0;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            color: var(--text-muted);\n            font-size: 12px;\n            font-style: italic;\n            margin-bottom: 15px;\n            position: relative;\n            border-radius: 2px;\n            text-align: center;\n            padding: 10px;\n        }\n        .demo-img-placeholder svg {\n            width: 32px;\n            height: 32px;\n            margin-bottom: 8px;\n            stroke: #aaa;\n        }\n        .webp-badge {\n            position: absolute;\n            top: 8px;\n            right: 8px;\n            background: rgba(26,26,26,0.8);\n            color: #fff;\n            padding: 2px 6px;\n            font-size: 9px;\n            letter-spacing: 1px;\n            font-family: monospace;\n            border-radius: 2px;\n            font-style: normal;\n        }\n        .demo-prod-title {\n            font-family: 'Cormorant Garamond', serif;\n            font-size: 1.25rem;\n            margin-bottom: 5px;\n            font-weight: 600;\n        }\n        .demo-prod-price {\n            font-size: 14px;\n            font-weight: 500;\n            margin-bottom: 12px;\n            color: #333;\n        }\n        .swatch-group {\n            display: flex;\n            gap: 8px;\n            margin-bottom: 15px;\n        }\n        .swatch-circle {\n            width: 20px;\n            height: 20px;\n            border-radius: 50%;\n            border: 1px solid #ccc;\n            cursor: pointer;\n            position: relative;\n            transition: transform 0.2s;\n        }\n        .swatch-circle:hover { transform: scale(1.1); }\n        .swatch-circle.selected::after {\n            content: '';\n            position: absolute;\n            top: -3px;\n            left: -3px;\n            right: -3px;\n            bottom: -3px;\n            border: 1px solid var(--text-main);\n            border-radius: 50%;\n        }\n        .btn-add-demo {\n            width: 100%;\n            background: #1a1a1a;\n            color: #fff;\n            border: none;\n            padding: 10px;\n            font-size: 12px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: background 0.2s;\n            margin-top: auto;\n        }\n        .btn-add-demo:hover { background: var(--accent-color); }\n\n        \/* Slide Cart Drawer *\/\n        .side-cart-drawer {\n            position: fixed;\n            top: 0;\n            right: -420px;\n            width: 100%;\n            max-width: 400px;\n            height: 100%;\n            background: #fff;\n            box-shadow: -5px 0 25px rgba(0,0,0,0.08);\n            z-index: 1000;\n            transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n            display: flex;\n            flex-direction: column;\n            padding: 30px;\n        }\n        .side-cart-drawer.open { right: 0; }\n        .cart-drawer-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            border-bottom: 1px solid var(--border-color);\n            padding-bottom: 15px;\n            margin-bottom: 20px;\n        }\n        .cart-close-btn {\n            background: none;\n            border: none;\n            font-size: 24px;\n            cursor: pointer;\n            color: var(--text-muted);\n        }\n        .cart-items-list {\n            flex: 1;\n            overflow-y: auto;\n            margin-bottom: 20px;\n        }\n        .cart-item-row {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 12px 0;\n            border-bottom: 1px solid #f5f4f0;\n            font-size: 13.5px;\n        }\n        .cart-item-details h4 {\n            font-family: 'Cormorant Garamond', serif;\n            font-size: 1.1rem;\n            margin-bottom: 2px;\n        }\n        .cart-item-meta {\n            font-size: 11px;\n            color: var(--text-muted);\n        }\n        .cart-item-remove {\n            background: none;\n            border: none;\n            color: #c53030;\n            font-size: 11px;\n            cursor: pointer;\n            margin-top: 4px;\n            display: block;\n        }\n        .cart-footer-summary {\n            border-top: 1px solid var(--border-color);\n            padding-top: 20px;\n        }\n        .cart-subtotal-line {\n            display: flex;\n            justify-content: space-between;\n            font-weight: 600;\n            font-size: 15px;\n            margin-bottom: 15px;\n        }\n        .btn-checkout-demo {\n            width: 100%;\n            background: #1a1a1a;\n            color: #fff;\n            border: none;\n            padding: 14px;\n            text-transform: uppercase;\n            font-size: 13px;\n            letter-spacing: 1px;\n            font-weight: 600;\n            cursor: pointer;\n            text-align: center;\n            border-radius: 2px;\n        }\n        .btn-checkout-demo:hover { background: #333; }\n        .cart-overlay {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0,0,0,0.3);\n            z-index: 999;\n            display: none;\n            backdrop-filter: blur(2px);\n        }\n        .cart-overlay.open { display: block; }\n\n        \/* Payment Gateway Sandbox Simulated Modal *\/\n        .gateway-modal {\n            position: fixed;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%) scale(0.9);\n            background: #fff;\n            border-radius: 8px;\n            box-shadow: 0 10px 40px rgba(0,0,0,0.15);\n            z-index: 1001;\n            width: 90%;\n            max-width: 480px;\n            display: none;\n            flex-direction: column;\n            overflow: hidden;\n            transition: all 0.2s ease;\n        }\n        .gateway-modal.open { display: flex; transform: translate(-50%, -50%) scale(1); }\n        .gateway-header {\n            background: #0176ff;\n            color: #fff;\n            padding: 20px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n        .gateway-header.xendit { background: #242833; }\n        .gateway-title { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px;}\n        .gateway-body { padding: 25px; background: #f9fafb; }\n        .payment-methods-sim {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 12px;\n            margin-top: 15px;\n        }\n        .pay-method-btn {\n            background: #fff;\n            border: 1px solid #e5e7eb;\n            padding: 12px;\n            border-radius: 6px;\n            text-align: left;\n            cursor: pointer;\n            font-size: 13px;\n            font-weight: 500;\n            transition: all 0.2s;\n        }\n        .pay-method-btn:hover { border-color: #0176ff; background: #f0f7ff; }\n        .sandbox-alert-badge {\n            background: #fffbeb;\n            border: 1px solid #fef3c7;\n            color: #d97706;\n            padding: 10px;\n            border-radius: 6px;\n            font-size: 12px;\n            margin-bottom: 15px;\n            line-height: 1.4;\n        }\n\n        \/* Sign-off styling *\/\n        .sign-off-container {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 40px;\n            margin-top: 30px;\n        }\n        .sign-block {\n            border-top: 1px dashed var(--text-main);\n            margin-top: 60px;\n            padding-top: 10px;\n            font-size: 0.9rem;\n        }\n\n        \/* ========================================================= *\/\n        \/* TAB 08: FULL LUXURY BOUTIQUE EMBEDDED DEMO STYLING *\/\n        \/* ========================================================= *\/\n        .demo-standalone-shell {\n            background: #fff;\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n            overflow: hidden;\n            box-shadow: 0 4px 20px rgba(0,0,0,0.03);\n            margin-top: 20px;\n        }\n\n        .demo-standalone-shell button, \n        .demo-standalone-shell input, \n        .demo-standalone-shell textarea, \n        .demo-standalone-shell select {\n            font: inherit;\n        }\n        .demo-standalone-shell button { cursor: pointer; }\n        .demo-standalone-shell a { color: inherit; text-decoration: none; }\n\n        .demo-standalone-shell .topline {\n            background: var(--dark);\n            color: #edf7f5;\n            text-align: center;\n            font-size: 11px;\n            letter-spacing: .12em;\n            text-transform: uppercase;\n            padding: 8px 16px;\n        }\n\n        .demo-standalone-shell .site-head {\n            position: sticky;\n            top: 0;\n            z-index: 20;\n            background: rgba(255,255,255,.92);\n            backdrop-filter: blur(14px);\n            border-bottom: 1px solid var(--line);\n            display: grid;\n            grid-template-columns: 1fr auto 1fr;\n            align-items: center;\n            padding: 17px 5%;\n        }\n\n        .demo-standalone-shell .brand {\n            font: 700 27px\/1 Georgia, serif;\n            letter-spacing: -.04em;\n        }\n        .demo-standalone-shell .brand small {\n            display: block;\n            font: 10px\/1 'Inter', sans-serif;\n            letter-spacing: .18em;\n            text-transform: uppercase;\n            color: var(--accent);\n            margin-top: 7px;\n        }\n\n        .demo-standalone-shell .nav {\n            display: flex;\n            gap: 24px;\n            justify-content: center;\n            font-size: 12px;\n            text-transform: uppercase;\n            letter-spacing: .12em;\n        }\n        .demo-standalone-shell .nav button, \n        .demo-standalone-shell .utility button {\n            border: 0;\n            background: none;\n            color: var(--ink);\n            padding: 5px;\n        }\n        .demo-standalone-shell .nav button:hover, \n        .demo-standalone-shell .utility button:hover {\n            color: var(--accent);\n        }\n\n        .demo-standalone-shell .utility {\n            display: flex;\n            justify-content: flex-end;\n            align-items: center;\n            gap: 10px;\n            font-size: 12px;\n        }\n        .demo-standalone-shell .cart-badge {\n            display: inline-grid;\n            place-items: center;\n            width: 20px;\n            height: 20px;\n            background: var(--ink);\n            color: #fff;\n            border-radius: 50%;\n            font-size: 10px;\n            margin-left: 4px;\n        }\n\n        .demo-standalone-shell .view { display: none; }\n        .demo-standalone-shell .view.active { display: block; }\n\n        .demo-standalone-shell .hero {\n            min-height: 580px;\n            display: grid;\n            grid-template-columns: 1.05fr .95fr;\n            background: #f2eee6;\n        }\n        .demo-standalone-shell .hero-copy {\n            padding: 70px 8%;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n        }\n        .demo-standalone-shell .eyebrow, \n        .demo-standalone-shell .label {\n            font-size: 11px;\n            text-transform: uppercase;\n            letter-spacing: .19em;\n            color: var(--accent);\n            font-weight: 800;\n        }\n        .demo-standalone-shell .hero h1 {\n            font: 400 clamp(38px,5vw,72px)\/.98 Georgia, serif;\n            letter-spacing: -.06em;\n            margin: 18px 0;\n            color: var(--ink);\n        }\n        .demo-standalone-shell .hero p {\n            font-size: 16px;\n            color: #5b6d72;\n            max-width: 480px;\n        }\n        .demo-standalone-shell .actions {\n            display: flex;\n            gap: 12px;\n            flex-wrap: wrap;\n            margin-top: 24px;\n        }\n        .demo-standalone-shell .btn {\n            border: 1px solid var(--ink);\n            background: var(--ink);\n            color: #fff;\n            padding: 13px 20px;\n            border-radius: 0;\n            font-size: 12px;\n            text-transform: uppercase;\n            letter-spacing: .1em;\n            font-weight: 800;\n        }\n        .demo-standalone-shell .btn.alt {\n            background: transparent;\n            color: var(--ink);\n        }\n        .demo-standalone-shell .btn.light {\n            background: #fff;\n            color: var(--ink);\n            border-color: #fff;\n        }\n        .demo-standalone-shell .hero-media {\n            min-height: 580px;\n            background-image: url('https:\/\/files.manuscdn.com\/search-media\/310519663976453077\/QPRA80MD6SHAckjZQYD4LO\/dWJJYf52rmTreAz9CbMMGU.jpg');\n            background-size: cover;\n            background-position: center;\n            filter: saturate(.82);\n        }\n\n        .demo-standalone-shell .wrap { padding: 60px 6%; }\n        .demo-standalone-shell .section-head {\n            display: flex;\n            justify-content: space-between;\n            gap: 30px;\n            align-items: flex-end;\n            margin-bottom: 30px;\n        }\n        .demo-standalone-shell .section-head h2 {\n            font: 400 clamp(28px,3.5vw,46px)\/1 Georgia, serif;\n            letter-spacing: -.04em;\n            margin: 8px 0;\n            border: none;\n            padding: 0;\n        }\n        .demo-standalone-shell .section-head p {\n            max-width: 480px;\n            color: var(--muted);\n            margin: 0;\n        }\n\n        .demo-standalone-shell .filter-bar {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            flex-wrap: wrap;\n            gap: 16px;\n            padding: 18px 0;\n            margin-bottom: 28px;\n            border-top: 1px solid var(--line);\n            border-bottom: 1px solid var(--line);\n        }\n        .demo-standalone-shell .filter-group {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            flex-wrap: wrap;\n        }\n        .demo-standalone-shell .filter-label {\n            font-size: 11px;\n            text-transform: uppercase;\n            letter-spacing: .12em;\n            font-weight: 800;\n            color: var(--muted);\n        }\n        .demo-standalone-shell .filter-btn {\n            border: 1px solid var(--line);\n            background: #fff;\n            color: var(--ink);\n            padding: 6px 14px;\n            font-size: 12px;\n            text-transform: uppercase;\n            letter-spacing: .08em;\n            transition: all .2s ease;\n        }\n        .demo-standalone-shell .filter-btn:hover,\n        .demo-standalone-shell .filter-btn.active {\n            background: var(--ink);\n            color: #fff;\n            border-color: var(--ink);\n        }\n        .demo-standalone-shell .sort-select {\n            border: 1px solid var(--line);\n            background: #fff;\n            color: var(--ink);\n            padding: 6px 12px;\n            font-size: 12px;\n            letter-spacing: .05em;\n        }\n\n        .demo-standalone-shell .product-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 26px;\n        }\n        .demo-standalone-shell .product-card { min-width: 0; }\n        .demo-standalone-shell .product-photo {\n            aspect-ratio: 4\/5;\n            background: var(--sand);\n            overflow: hidden;\n            position: relative;\n        }\n        .demo-standalone-shell .product-photo img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            display: block;\n            transition: transform .6s ease;\n            filter: saturate(.82);\n        }\n        .demo-standalone-shell .product-card:hover .product-photo img {\n            transform: scale(1.035);\n        }\n        .demo-standalone-shell .quick {\n            position: absolute;\n            bottom: 13px;\n            left: 13px;\n            right: 13px;\n            background: rgba(255,255,255,.92);\n            border: 0;\n            padding: 10px;\n            text-transform: uppercase;\n            letter-spacing: .1em;\n            font-size: 10px;\n            opacity: 0;\n            transform: translateY(5px);\n            transition: .2s;\n        }\n        .demo-standalone-shell .product-card:hover .quick {\n            opacity: 1;\n            transform: none;\n        }\n        .demo-standalone-shell .product-info { padding: 14px 2px; }\n        .demo-standalone-shell .product-name {\n            font: 400 20px Georgia, serif;\n            margin: 0 0 6px;\n        }\n        .demo-standalone-shell .product-meta {\n            display: flex;\n            justify-content: space-between;\n            gap: 10px;\n            align-items: baseline;\n        }\n        .demo-standalone-shell .price { font-weight: 800; }\n        .demo-standalone-shell .muted { color: var(--muted); font-size: 13px; }\n        .demo-standalone-shell .swatches { display: flex; gap: 7px; margin: 13px 0; }\n        .demo-standalone-shell .swatch {\n            width: 20px;\n            height: 20px;\n            border-radius: 50%;\n            border: 2px solid #fff;\n            box-shadow: 0 0 0 1px #cbd4d3;\n        }\n        .demo-standalone-shell .swatch.selected { box-shadow: 0 0 0 2px var(--ink); }\n        .demo-standalone-shell .sizes { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0 14px; }\n        .demo-standalone-shell .size {\n            background: #fff;\n            border: 1px solid var(--line);\n            padding: 5px 9px;\n            font-size: 11px;\n        }\n        .demo-standalone-shell .size.selected {\n            border-color: var(--ink);\n            background: var(--ink);\n            color: #fff;\n        }\n        .demo-standalone-shell .add {\n            width: 100%;\n            padding: 11px;\n            background: transparent;\n            border: 1px solid var(--ink);\n            text-transform: uppercase;\n            letter-spacing: .1em;\n            font-size: 10px;\n            font-weight: 800;\n        }\n        .demo-standalone-shell .add:hover {\n            background: var(--ink);\n            color: #fff;\n        }\n\n        .demo-standalone-shell .story {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 40px;\n            align-items: center;\n            background: #f4f0e9;\n        }\n        .demo-standalone-shell .story-image {\n            min-height: 480px;\n            background: url('https:\/\/files.manuscdn.com\/search-media\/310519663976453077\/QPRA80MD6SHAckjZQYD4LO\/aAtWMh4U55bsHXVgb5HmnR.jpg') center\/cover;\n            filter: saturate(.78);\n        }\n        .demo-standalone-shell .story-copy { padding: 35px 8% 35px 0; }\n        .demo-standalone-shell .story-copy h2, \n        .demo-standalone-shell .about h2, \n        .demo-standalone-shell .contact h2, \n        .demo-standalone-shell .tech-view h2 {\n            font: 400 clamp(30px,3.5vw,50px)\/1.02 Georgia, serif;\n            letter-spacing: -.05em;\n            margin: 14px 0 20px;\n            border: none;\n            padding: 0;\n        }\n        .demo-standalone-shell .story-copy p, \n        .demo-standalone-shell .about p, \n        .demo-standalone-shell .contact p, \n        .demo-standalone-shell .tech-view p {\n            color: var(--muted);\n            font-size: 15px;\n        }\n\n        .demo-standalone-shell .feature-bar {\n            padding: 27px 6%;\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 22px;\n            border-bottom: 1px solid var(--line);\n        }\n        .demo-standalone-shell .feature-bar strong {\n            display: block;\n            font: 18px Georgia, serif;\n            margin-bottom: 4px;\n        }\n        .demo-standalone-shell .feature-bar span {\n            font-size: 13px;\n            color: var(--muted);\n        }\n\n        .demo-standalone-shell .about, \n        .demo-standalone-shell .contact, \n        .demo-standalone-shell .tech-view {\n            max-width: 960px;\n            margin: auto;\n            padding: 60px 6%;\n        }\n        .demo-standalone-shell .about-lead, \n        .demo-standalone-shell .contact-lead, \n        .demo-standalone-shell .tech-lead {\n            font-size: 19px;\n            color: #51666c;\n            max-width: 760px;\n        }\n        .demo-standalone-shell .about-grid, \n        .demo-standalone-shell .tech-grid {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 25px;\n            margin-top: 35px;\n        }\n        .demo-standalone-shell .about-card, \n        .demo-standalone-shell .tech-card {\n            background: #f4f0e9;\n            padding: 24px;\n        }\n        .demo-standalone-shell .about-card h3, \n        .demo-standalone-shell .tech-card h3 {\n            font: 400 22px Georgia, serif;\n            margin: 0 0 8px;\n        }\n        .demo-standalone-shell .tech-card ul {\n            margin: 12px 0 0;\n            padding-left: 18px;\n            color: var(--muted);\n            font-size: 13.5px;\n        }\n        .demo-standalone-shell .tech-card li { margin-bottom: 6px; }\n\n        .demo-standalone-shell .gateway-pills {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 10px;\n            margin-top: 16px;\n        }\n        .demo-standalone-shell .gateway-pill {\n            background: #fff;\n            border: 1px solid var(--line);\n            padding: 8px 14px;\n            font-size: 12px;\n            font-weight: 700;\n            letter-spacing: .05em;\n            color: var(--ink);\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n        }\n\n        .demo-standalone-shell .contact-layout {\n            display: grid;\n            grid-template-columns: 1fr .85fr;\n            gap: 45px;\n            margin-top: 35px;\n        }\n        .demo-standalone-shell .form { display: grid; gap: 14px; }\n        .demo-standalone-shell .form label {\n            font-size: 11px;\n            text-transform: uppercase;\n            letter-spacing: .12em;\n            font-weight: 800;\n        }\n        .demo-standalone-shell .form input, \n        .demo-standalone-shell .form textarea, \n        .demo-standalone-shell .form select {\n            border: 1px solid var(--line);\n            padding: 12px;\n            background: #fff;\n            color: var(--ink);\n            width: 100%;\n        }\n        .demo-standalone-shell .form textarea {\n            min-height: 120px;\n            resize: vertical;\n        }\n        .demo-standalone-shell .contact-card {\n            background: var(--dark);\n            color: #fff;\n            padding: 26px;\n        }\n        .demo-standalone-shell .contact-card h3 {\n            font: 400 26px Georgia, serif;\n            margin: 0 0 16px;\n            color: #fff;\n        }\n        .demo-standalone-shell .contact-card p { color: #dcebe9; }\n        .demo-standalone-shell .contact-card a {\n            display: block;\n            margin: 12px 0;\n            color: #fff;\n            text-decoration: underline;\n            text-underline-offset: 4px;\n        }\n\n        .demo-standalone-shell footer {\n            background: #f4f0e9;\n            padding: 35px 6%;\n            display: flex;\n            justify-content: space-between;\n            gap: 25px;\n            color: var(--muted);\n            font-size: 13px;\n        }\n        .demo-standalone-shell .footer-brand {\n            font: 400 24px Georgia, serif;\n            color: var(--ink);\n        }\n\n        \/* Standalone Toast Notice *\/\n        .demo-toast {\n            position: fixed;\n            z-index: 2000;\n            bottom: 25px;\n            left: 50%;\n            transform: translateX(-50%) translateY(20px);\n            background: var(--ink);\n            color: #fff;\n            padding: 12px 22px;\n            font-size: 13px;\n            opacity: 0;\n            pointer-events: none;\n            transition: .25s ease;\n            border-radius: 4px;\n            box-shadow: 0 4px 15px rgba(0,0,0,0.15);\n        }\n        .demo-toast.show {\n            opacity: 1;\n            transform: translateX(-50%) translateY(0);\n        }\n\n        @media(max-width: 900px) {\n            .demo-standalone-shell .product-grid { grid-template-columns: repeat(2, 1fr); }\n            .demo-standalone-shell .hero { grid-template-columns: 1fr; }\n            .demo-standalone-shell .hero-media { min-height: 380px; }\n            .demo-standalone-shell .story { grid-template-columns: 1fr; }\n            .demo-standalone-shell .story-image { min-height: 350px; }\n            .demo-standalone-shell .about-grid, \n            .demo-standalone-shell .tech-grid, \n            .demo-standalone-shell .contact-layout { grid-template-columns: 1fr; }\n            .demo-standalone-shell .feature-bar { grid-template-columns: 1fr; }\n            .sign-off-container { grid-template-columns: 1fr; }\n        }\n\t\t\n\t\t        .legal-bounds-block {\n            background-color: #f7fafc;\n            border-left: 4px solid #4a5568;\n            padding: 20px;\n            border-radius: 4px;\n            margin-top: 30px;\n        }\n\n        .legal-bounds-block ul {\n            padding-left: 20px;\n            font-size: 0.88rem;\n            color: #4a5568;\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n    <header>\n        <div class=\"proposal-meta\">Website Design & Infrastructure Proposal &middot; Ecommerce Model<\/div>\n        <h1>Butik Landing Page Luxury Boutique Storefront<\/h1>\n        <p style=\"color: var(--text-muted); max-width: 700px;\">A refined three-page storefront designed to turn editorial brand storytelling into effortless product discovery, cart building, and checkout\u2014powered by a complete, turn-key WordPress & WooCommerce plugin stack.<\/p>\n        \n        <div class=\"validity-badge\">\u23f3 Masa Berlaku Proposal: Dokumen penawaran harga & alokasi ini berlaku selama 14 hari kalender.<\/div>\n\n        <div class=\"meta-grid\">\n            <div class=\"meta-item\"><strong>Prepared for:<\/strong> Butik Landing Page<\/div>\n            <div class=\"meta-item\"><strong>Prepared by:<\/strong> ArK Solution<\/div>\n            <div class=\"meta-item\"><strong>Date Created:<\/strong> 08 Oktober 2026<\/div>\n        <\/div>\n    <\/header>\n\n    <nav class=\"nav-tabs\">\n        <button class=\"tab-btn active\" onclick=\"switchTab('direction')\">01 &middot; Direction<\/button>\n        <button class=\"tab-btn\" onclick=\"switchTab('architecture')\">02 &middot; Architecture<\/button>\n        <button class=\"tab-btn\" onclick=\"switchTab('plugins')\">03 &middot; Tech Stack<\/button>\n        <button class=\"tab-btn\" onclick=\"switchTab('scope')\">04 &middot; Scope & Grid<\/button>\n        <button class=\"tab-btn\" onclick=\"switchTab('timeline')\">05 &middot; Timeline<\/button>\n        <button class=\"tab-btn\" onclick=\"switchTab('commercial')\">06 &middot; Commercial & SLA<\/button>\n        <button class=\"tab-btn\" onclick=\"switchTab('nextsteps')\">07 &middot; Next Steps<\/button>\n        <button class=\"tab-btn\" onclick=\"switchTab('demo')\">08 &middot; Demo<\/button>\n    <\/nav>\n\n    <!-- SECTION 1: DIRECTION -->\n    <section id=\"direction\" class=\"proposal-section active\">\n        <h2>01 &middot; Direction<\/h2>\n        <h3>Designed to feel like a boutique, built to perform like a store.<\/h3>\n        <p class=\"section-intro\">This proposal combines luxury fashion copywriting, ecommerce information architecture, responsive product-grid design, and conversion pathways into one coherent website model. The experience is quiet, editorial, and tactile\u2014while still making variant selection, account access, cart, checkout, and customer support simple.<\/p>\n        \n        <table class=\"proposal-table\">\n            <thead>\n                <tr>\n                    <th style=\"width: 30%\">Pilar Strategi<\/th>\n                    <th>Deskripsi Penerapan Mandat<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody>\n                <tr>\n                    <td><strong>Editorial Confidence<\/strong><\/td>\n                    <td>Premium storytelling yang menjelaskan nilai seni, kurasi bahan premium, serta pengerjaan di balik setiap rilisan produk tanpa kesan padat.<\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Commercial Clarity<\/strong><\/td>\n                    <td>Tata letak kartu produk, harga, penanda varian warna\/ukuran, serta aksi keranjang belanja disajikan sangat bersih tanpa distraksi visual.<\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Complete Turn-key Stack<\/strong><\/td>\n                    <td>Konfigurasi terpadu antara modul premium dan kustomisasi kode tanpa ketergantungan teknis eksternal yang membingungkan bagi pengelola.<\/td>\n                <\/tr>\n            <\/tbody>\n        <\/table>\n    <\/section>\n\n    <!-- SECTION 2: ARCHITECTURE -->\n    <section id=\"architecture\" class=\"proposal-section\">\n        <h2>02 &middot; Architecture<\/h2>\n        <h3>Three pages, one connected customer journey.<\/h3>\n        <p class=\"section-intro\">Struktur ramping yang dirancang untuk meminimalkan hambatan navigasi konsumen, mengarahkan perhatian dari cerita produk langsung menuju alur pembelian.<\/p>\n        \n        <table class=\"proposal-table\">\n            <thead>\n                <tr>\n                    <th>Halaman<\/th>\n                    <th>Peran Strategis<\/th>\n                    <th>Komponen Inti Seksi<\/th>\n                    <th>Primary CTA<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody>\n                <tr>\n                    <td><strong>Home \/ Landing<\/strong><\/td>\n                    <td>Mengonversi perhatian menjadi eksplorasi koleksi produk fisik.<\/td>\n                    <td>Hero editorial, janji brand, koleksi pilihan, dashboard produk, bukti kerajinan, kepastian layanan, newsletter.<\/td>\n                    <td><em>Shop the collection<\/em><\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>About<\/strong><\/td>\n                    <td>Membangun kedekatan emosional & persepsi nilai eksklusif (premium-value).<\/td>\n                    <td>Kisah awal mula, filosofi slow-fashion, pelacakan asal kain, konstruksi etis, inspirasi kreatif harian.<\/td>\n                    <td><em>Discover our story<\/em><\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Contact<\/strong><\/td>\n                    <td>Menghilangkan kecemasan pembelian & mempermudah akses bantuan.<\/td>\n                    <td>Formulir elegan, jam operasional showroom, email layanan pelanggan, peta lokasi, chat langsung WhatsApp.<\/td>\n                    <td><em>Chat on WhatsApp<\/em><\/td>\n                <\/tr>\n            <\/tbody>\n        <\/table>\n    <\/section>\n\n    <!-- SECTION 3: TECH STACK -->\n    <section id=\"plugins\" class=\"proposal-section\">\n        <h2>03 &middot; WordPress & WooCommerce Requirements<\/h2>\n        <h3>Full production plugin stack \u2014 premium, custom, and core integrations.<\/h3>\n        <p class=\"section-intro\">Seluruh kebutuhan fungsional mulai dari visual tata letak, AJAX cart drawer, hingga pemrosesan transaksi otomatis dipetakan secara terpadu tanpa dependensi yang hilang.<\/p>\n        \n        <table class=\"proposal-table\">\n            <thead>\n                <tr>\n                    <th>Kategori Modul<\/th>\n                    <th>Nama Plugin & Sistem<\/th>\n                    <th>Tipe<\/th>\n                    <th>Peran Integrasi & Manfaat Utama<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody>\n                <tr>\n                    <td rowspan=\"2\"><strong>Core Engine & Builder<\/strong><\/td>\n                    <td>WooCommerce Core Engine<\/td>\n                    <td>Core<\/td>\n                    <td>Mengelola katalog produk, variasi produk, session keranjang, shipping, pajak, dan logika dasbor checkout.<\/td>\n                <\/tr>\n                <tr>\n                    <td>Elementor Pro \/ Custom Engine<\/td>\n                    <td>Premium<\/td>\n                    <td>Mengatur tata letak responsif, sticky header, multi-column editorial story, dan kustomisasi footer dinamis.<\/td>\n                <\/tr>\n                <tr>\n                    <td rowspan=\"2\"><strong>Ecommerce Enhancements<\/strong><\/td>\n                    <td>Variation Swatches Pro<\/td>\n                    <td>Premium<\/td>\n                    <td>Mengganti dropdown menu bawaan yang kaku dengan pilihan warna lingkaran estetik dan pil ukuran langsung di kartu produk.<\/td>\n                <\/tr>\n                <tr>\n                    <td>Side Cart WooCommerce Pro<\/td>\n                    <td>Premium<\/td>\n                    <td>Menjalankan fungsi AJAX panel laci keranjang dari sisi kanan secara instan lengkap dengan kalkulasi subtotal langsung.<\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Local Payment Gateway<\/strong><\/td>\n                    <td>Midtrans \/ Xendit Gateway<\/td>\n                    <td>Gateway Integration<\/td>\n                    <td>Menyediakan transaksi otomatis via QRIS instan, Virtual Account bank lokal (BCA, Mandiri, BRI), E-Wallet, dan Kartu Kredit aman.<\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Asset Optimization<\/strong><\/td>\n                    <td>Custom Image Compression Engine<\/td>\n                    <td>Custom Developed<\/td>\n                    <td>Mengompresi otomatis foto vertikal fashion (rasio 3:4 \/ 4:5) menjadi berkas WebP ultra ringan sesaat setelah diunggah ke server.<\/td>\n                <\/tr>\n            <\/tbody>\n        <\/table>\n    <\/section>\n\n    <!-- SECTION 4: SCOPE & INTERACTIVE GRID -->\n    <section id=\"scope\" class=\"proposal-section\">\n        <h2>04 &middot; Creative and Functional Scope<\/h2>\n        <p class=\"section-intro\">Di bawah ini adalah representasi dashboard grid produk interaktif. Anda dapat mencoba memilih variasi warna dan menekan tombol tambah ke keranjang untuk mensimulasikan performa arsitektur *AJAX Drawer* dan optimasi aset berkas gambar <code>.webp<\/code> yang kami tawarkan.<\/p>\n\n        <!-- INTERACTIVE LIVE DEMO WIDGET INTEGRATED -->\n        <div class=\"demo-showcase-container\">\n            <div class=\"demo-header\">\n                <div style=\"font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600;\">Simulasi Etalase Interaktif<\/div>\n                <button class=\"cart-trigger-btn\" onclick=\"toggleCart()\">\n                    \ud83d\udcbc Bag (<span id=\"cart-count-badge\">0<\/span>)\n                <\/button>\n            <\/div>\n\n            <div class=\"demo-grid\">\n                <!-- Product 1 -->\n                <div class=\"demo-product-card\" id=\"prod-1\">\n                    <div class=\"demo-img-placeholder\">\n                        <span class=\"webp-badge\">WEBP OPTIMIZED<\/span>\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"><\/path><\/svg>\n                        [ Foto Potret Model 3:4 ]\n                    <\/div>\n                    <div class=\"demo-prod-title\">Refined Silhouette Blouse<\/div>\n                    <div class=\"demo-prod-price\">IDR 849.000<\/div>\n                    <div class=\"swatch-group\">\n                        <div class=\"swatch-circle selected\" style=\"background: #e2dcd3;\" onclick=\"selectSwatch(this, 'Sand Beige')\" title=\"Sand Beige\"><\/div>\n                        <div class=\"swatch-circle\" style=\"background: #2b2e2a;\" onclick=\"selectSwatch(this, 'Olive Charcoal')\" title=\"Olive Charcoal\"><\/div>\n                    <\/div>\n                    <button class=\"btn-add-demo\" onclick=\"addToCart('Refined Silhouette Blouse', 849000, this)\">Add to Cart<\/button>\n                <\/div>\n\n                <!-- Product 2 -->\n                <div class=\"demo-product-card\" id=\"prod-2\">\n                    <div class=\"demo-img-placeholder\">\n                        <span class=\"webp-badge\">WEBP OPTIMIZED<\/span>\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"><\/path><\/svg>\n                        [ Foto Potret Model 3:4 ]\n                    <\/div>\n                    <div class=\"demo-prod-title\">Tailored Pleated Trouser<\/div>\n                    <div class=\"demo-prod-price\">IDR 1.150.000<\/div>\n                    <div class=\"swatch-group\">\n                        <div class=\"swatch-circle selected\" style=\"background: #1a1a1a;\" onclick=\"selectSwatch(this, 'Pure Black')\" title=\"Pure Black\"><\/div>\n                        <div class=\"swatch-circle\" style=\"background: #7d7568;\" onclick=\"selectSwatch(this, 'Warm Taupe')\" title=\"Warm Taupe\"><\/div>\n                    <\/div>\n                    <button class=\"btn-add-demo\" onclick=\"addToCart('Tailored Pleated Trouser', 1150000, this)\">Add to Cart<\/button>\n                <\/div>\n\n                <!-- Product 3 -->\n                <div class=\"demo-product-card\" id=\"prod-3\">\n                    <div class=\"demo-img-placeholder\">\n                        <span class=\"webp-badge\">WEBP OPTIMIZED<\/span>\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"><\/path><\/svg>\n                        [ Foto Potret Model 3:4 ]\n                    <\/div>\n                    <div class=\"demo-prod-title\">Minimalist Knit Cardigan<\/div>\n                    <div class=\"demo-prod-price\">IDR 980.000<\/div>\n                    <div class=\"swatch-group\">\n                        <div class=\"swatch-circle selected\" style=\"background: #efebe3;\" onclick=\"selectSwatch(this, 'Off White')\" title=\"Off White\"><\/div>\n                        <div class=\"swatch-circle\" style=\"background: #4a4743;\" onclick=\"selectSwatch(this, 'Slate Grey')\" title=\"Slate Grey\"><\/div>\n                    <\/div>\n                    <button class=\"btn-add-demo\" onclick=\"addToCart('Minimalist Knit Cardigan', 980000, this)\">Add to Cart<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- SECTION 5: TIMELINE -->\n    <section id=\"timeline\" class=\"proposal-section\">\n        <h2>05 &middot; Proposed Timeline<\/h2>\n        <h3>A focused 5\u20136 week delivery path.<\/h3>\n        <p class=\"section-intro\">Jadwal kerja terarah dengan gerbang persetujuan (approval gates) yang jelas guna melindungi ketepatan waktu peluncuran.<\/p>\n        \n        <table class=\"proposal-table\">\n            <thead>\n                <tr>\n                    <th style=\"width: 15%\">Waktu<\/th>\n                    <th style=\"width: 30%\">Fase Aktivitas<\/th>\n                    <th>Detail Pekerjaan Teknis & Output<\/th>\n                    <th>Gerbang Validasi<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody>\n                <tr>\n                    <td><strong>Week 1<\/strong><\/td>\n                    <td>Discovery & Alignment<\/td>\n                    <td>Pengisian kuesioner brand, penentuan target audiens, finalisasi katalog produk awal, konfirmasi penyiapan platform hosting.<\/td>\n                    <td>Direction Sign-off<\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Week 2<\/strong><\/td>\n                    <td>Content Architecture & Copy<\/td>\n                    <td>Penyusunan naskah copy halaman utama (Home, About, Contact), penentuan arsitektur metadata produk, dan kerangka dasar SEO.<\/td>\n                    <td>Copy Sign-off<\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Week 3<\/strong><\/td>\n                    <td>Visual Direction System<\/td>\n                    <td>Penentuan tipografi, palet warna luxury, pembuatan component system kartu produk, penentuan aturan tata letak responsif.<\/td>\n                    <td>Design Sign-off<\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Week 4<\/strong><\/td>\n                    <td>Page Build & Integrations<\/td>\n                    <td>Pembangunan 3 template utama, instalasi lisensi plugin stack, penyetelan AJAX drawer cart, konfigurasi sandbox payment gateway.<\/td>\n                    <td>Platform Access Ready<\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Week 5-6<\/strong><\/td>\n                    <td>QA, Optimization & Launch<\/td>\n                    <td>Pengujian lintas perangkat (mobile\/desktop), kompresi aset gambar ke WebP, aktivasi production key Midtrans\/Xendit, serah terima panduan.<\/td>\n                    <td>Launch-ready Package<\/td>\n                <\/tr>\n            <\/tbody>\n        <\/table>\n    <\/section>\n\n    <!-- SECTION 6: COMMERCIAL PROPOSAL -->\n    <section id=\"commercial\" class=\"proposal-section\">\n        <h2>06 &middot; Commercial Proposal<\/h2>\n        <p class=\"section-intro\">A transparent scope with flexible investment options. Web hosting costs are detailed separately as infrastructure foundational add-ons.<\/p>\n\n        <!-- 6.1 Development Packages -->\n        <h3>6.1 &middot; Development Packages<\/h3>\n        <table class=\"proposal-table\">\n            <thead>\n                <tr>\n                    <th style=\"width: 20%\">Package<\/th>\n                    <th style=\"width: 25%\">Best for<\/th>\n                    <th>Included Scope<\/th>\n                    <th style=\"width: 20%\">Indicative Fee<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody>\n                <tr>\n                    <td><strong>Foundation<\/strong><\/td>\n                    <td>Launch-ready boutique storefront<\/td>\n                    <td>Three page templates, core copy, responsive product grid, basic cart\/checkout pathway, standard plugin stack, SEO setup, handover guide.<\/td>\n                    <td>IDR 5.500.000<br><small>Estimated 4\u20135 weeks<\/small><\/td>\n                <\/tr>\n                <tr style=\"background: #fafaf7; border-left: 3px solid var(--accent-color);\">\n                    <td><strong>Signature \u2b50<\/strong><\/td>\n                    <td>Premium brand-led ecommerce launch<\/td>\n                    <td>Everything in Foundation plus full Premium Plugin Suite setup (Side Cart Pro, Swatches Pro, Midtrans\/Xendit gateway integration), custom CSS styling, advanced QA, analytics handoff, and launch support.<\/td>\n                    <td><strong>IDR 12.500.000<\/strong><br><small>Estimated 5\u20136 weeks<\/small><\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Atelier<\/strong><\/td>\n                    <td>High-touch custom storefront<\/td>\n                    <td>Everything in Signature plus custom plugin extensions, advanced filters, wishlist\/account refinement, additional product-entry support, and post-launch optimization.<\/td>\n                    <td>IDR 24.500.000<br><small>Estimated 6\u20138 weeks<\/small><\/td>\n                <\/tr>\n            <\/tbody>\n        <\/table>\n\n        <!-- 6.2 Recommended Web Hosting Infrastructure Add-on -->\n        <h3>6.2 &middot; Recommended Web Hosting Infrastructure (Annual Cost)<\/h3>\n        <p class=\"section-sub-intro\">Untuk mendukung WooCommerce dengan 200\u2013500 gambar WebP dan memastikan proses *checkout* pembeli stabil tanpa hambatan, kami mengurasi paket hosting dari entry hingga mid-level di Indonesia. <em>(Dipilih dan dibayarkan langsung oleh klien atau dimasukkan ke dalam invoice pertama kami)<\/em>.<\/p>\n        \n        <table class=\"proposal-table\">\n            <thead>\n                <tr>\n                    <th>Provider<\/th>\n                    <th>Recommended Plan<\/th>\n                    <th>Tier<\/th>\n                    <th>Est. Year 1 Cost<\/th>\n                    <th>Core Specs & Core Benefit<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody>\n                <!-- Entry Level -->\n                <tr>\n                    <td><strong>Biznet Gio<\/strong><\/td>\n                    <td>NEO Web Hosting Personal Small<\/td>\n                    <td><span class=\"badge badge-low\">Entry-Level<\/span><\/td>\n                    <td>\u00b1 Rp180.000<\/td>\n                    <td>2 GB SSD, Unlimited Bandwidth. Didukung jaringan infrastruktur Biznet yang kokoh. Paling hemat namun kapasitas terbatas.<\/td>\n                <\/tr>\n                <tr class=\"highlight-value\">\n                    <td><strong>Rumahweb<\/strong><\/td>\n                    <td>Hosting Small (Combo Promo)<\/td>\n                    <td><span class=\"badge badge-low\">Entry-Level<\/span><\/td>\n                    <td><strong>\u00b1 Rp212.000<\/strong><\/td>\n                    <td>Unlimited Storage (250k Inodes), 1 Core CPU, <strong>1 GB RAM<\/strong>. Termasuk gratis domain <code>.COM<\/code>. Paling bernilai di kelas dasar.<\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>DomaiNesia<\/strong><\/td>\n                    <td>Nimbus One<\/td>\n                    <td><span class=\"badge badge-low\">Entry-Level<\/span><\/td>\n                    <td>\u00b1 Rp216.000<\/td>\n                    <td>2 GB <strong>SSD NVMe<\/strong>, 1 Website. Kecepatan baca berkas foto sangat kencang berkat tipe penyimpanan NVMe. Belum termasuk domain gratis.<\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Jagoan Hosting<\/strong><\/td>\n                    <td>WordPress ICON<\/td>\n                    <td><span class=\"badge badge-low\">Entry-Level<\/span><\/td>\n                    <td>\u00b1 Rp300.000 <br><small>(Excl. PPN)<\/small><\/td>\n                    <td>5 GB SSD, 1 Core CPU, <strong>1 GB RAM<\/strong>. Lingkungan server terkonfigurasi khusus WordPress. Termasuk domain gratis <code>.my.id<\/code>.<\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Hostinger ID<\/strong><\/td>\n                    <td>Premium<\/td>\n                    <td><span class=\"badge badge-low\">Entry-Level<\/span><\/td>\n                    <td>\u00b1 Rp298.800<\/td>\n                    <td>20 GB SSD, Managed WordPress, LiteSpeed Web Server. Gratis domain <code>.COM<\/code>. *Membutuhkan komitmen promo jangka panjang.<\/td>\n                <\/tr>\n                \n                <!-- Mid Level (Recommended) -->\n                <tr class=\"highlight-recommend\">\n                    <td><strong>Rumahweb<\/strong> \u2b50<\/td>\n                    <td>Hosting Medium (Combo Promo)<\/td>\n                    <td><span class=\"badge badge-mid\">Mid-Level<\/span><\/td>\n                    <td><strong>\u00b1 Rp317.000<\/strong><\/td>\n                    <td><strong>Rekomendasi Utama Anggaran & Stabilitas.<\/strong> Unlimited Storage, 1.5 Core CPU, <strong>2 GB RAM<\/strong>, Turbo Booster. Gratis domain <code>.COM<\/code>. RAM besar menjamin proses checkout lancar.<\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Biznet Gio<\/strong><\/td>\n                    <td>NEO Web Hosting Medium<\/td>\n                    <td><span class=\"badge badge-mid\">Mid-Level<\/span><\/td>\n                    <td>\u00b1 Rp379.000<\/td>\n                    <td>20 GB SSD, <strong>1 GB RAM<\/strong>, Unlimited Inodes. Termasuk gratis domain <code>.COM<\/code>, proteksi backup otomatis Acronis, & anti-spam.<\/td>\n                <\/tr>\n                <tr class=\"highlight-speed\">\n                    <td><strong>DomaiNesia<\/strong> \u26a1<\/td>\n                    <td>Nimbus Go<\/td>\n                    <td><span class=\"badge badge-mid\">Mid-Level<\/span><\/td>\n                    <td><strong>\u00b1 Rp384.000<\/strong><\/td>\n                    <td><strong>Rekomendasi Utama Kecepatan Loading gambar.<\/strong> 15 GB <strong>SSD NVMe<\/strong>, Unlimited Websites. Termasuk gratis domain <code>.COM<\/code>. Transisi halaman instan.<\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Hostinger ID<\/strong><\/td>\n                    <td>Business<\/td>\n                    <td><span class=\"badge badge-mid\">Mid-Level<\/span><\/td>\n                    <td>\u00b1 Rp466.800<\/td>\n                    <td>50 GB NVMe SSD, Daily Automated Backup, CDN Global Gratis. Kapasitas sangat lega, infrastruktur prima untuk skalabilitas jangka panjang.<\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Jagoan Hosting<\/strong><\/td>\n                    <td>WordPress SUPERSTAR<\/td>\n                    <td><span class=\"badge badge-mid\">Mid-Level<\/span><\/td>\n                    <td>\u00b1 Rp540.000 <br><small>(Excl. PPN)<\/small><\/td>\n                    <td>15 GB SSD, <strong>2 Core CPU<\/strong>, 1 GB RAM. Peningkatan kekuatan pemrosesan CPU (2 Core) membantu menahan lonjakan pengunjung toko secara bersamaan. Gratis domain <code>.COM<\/code>.<\/td>\n                <\/tr>\n            <\/tbody>\n        <\/table>\n\n        <!-- 6.3 Payment Schedule -->\n        <h3>6.3 &middot; Recommended Payment Schedule<\/h3>\n        <table class=\"proposal-table\">\n            <thead>\n                <tr>\n                    <th>Milestone Pembayaran<\/th>\n                    <th>Persentase<\/th>\n                    <th>Pemicu Aktivitas (Trigger)<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody>\n                <tr>\n                    <td>Project Commencement<\/td>\n                    <td><strong>40%<\/strong><\/td>\n                    <td>Persetujuan dokumen proposal, penandatanganan SPK, dan kick-off.<\/td>\n                <\/tr>\n                <tr>\n                    <td>Design & Copy Approval<\/td>\n                    <td><strong>30%<\/strong><\/td>\n                    <td>Persetujuan final arah visual tata letak komponen dan arsitektur konten.<\/td>\n                <\/tr>\n                <tr>\n                    <td>Final QA \/ Launch Handover<\/td>\n                    <td><strong>30%<\/strong><\/td>\n                    <td>Penyelesaian seluruh deliverable pengujian akhir dan penyerahan kredensial.<\/td>\n                <\/tr>\n            <\/tbody>\n        <\/table>\n\n        <h3>6.4 \u00b7 Optional Monthly Support & SLA Maintenance Retainers<\/h3>\n        <p>Kerangka jangka waktu kerja pemeliharaan berkala pasca peluncuran situs. Bersifat langganan bulanan mengikat, waktu tidak diakumulasikan ke periode berikutnya demi efisiensi operasional:<\/p>\n        <table class=\"proposal-table\">\n            <thead>\n                <tr>\n                    <th>SLA Tier Paket<\/th>\n                    <th>Ruang Lingkup Dukungan Teknis Terproteksi<\/th>\n                    <th>Biaya Bulanan<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody>\n                <tr>\n                    <td><strong>Essentials Care<\/strong><\/td>\n                    <td>Core system monitoring, daily external backups, basic cloud security tracking, max. 5 technical support hours\/month. Exclusion applies to major template overrides.<\/td>\n                    <td>IDR 1.500.000 \/ bln<\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Growth Optimization<\/strong><\/td>\n                    <td>Everything in Essentials plus active WooCommerce checkout data cleanup, periodic image speed fine-tuning, up to 10 support hours\/month.<\/td>\n                    <td>IDR 3.500.000 \/ bln<\/td>\n                <\/tr>\n                <tr>\n                    <td><strong>Atelier Dedicated<\/strong><\/td>\n                    <td>24\/7 priority critical error response, dedicated resource testing updates, complete monthly funnel reports, continuous minor visual adjustments.<\/td>\n                    <td>IDR 6.000.000 \/ bln<\/td>\n                <\/tr>\n            <\/tbody>\n        <\/table>\n\n        <h3>6.5 \u00b7 Strict Out-of-Scope & Legal Boundaries (Batasan Penting Perjanjian)<\/h3>\n        <div class=\"legal-bounds-block\">\n            <p>Untuk memastikan transparansi dan mencegah kesalahpahaman pengerjaan di masa mendatang, seluruh klausul komersial tunduk pada batasan definitif berikut:<\/p>\n            <ul>\n                <li><strong>Di Luar Ruang Lingkup Jasa (Out-of-Scope):<\/strong> Biaya penawaran di atas tidak mencakup aktivitas pemotretan produk fisik (fotografi), penulisan deskripsi narasi katalog komoditas manual satu per satu, pembuatan kode ekstensi kustom gerbang pembayaran baru di luar standar bawaan developer aggregator, serta perbaikan malfungsi server\/infrastruktur eksternal yang diakibatkan kelalaian pihak provider hosting.<\/li>\n                <li><strong>Batasan Payment Gateway (Midtrans\/Xendit\/GoPay):<\/strong> Ruang lingkup pengerjaan ArK Solution terbatas pada integrasi kode pemrograman modul API sandbox dan konfigurasi Live Production Key. Seluruh proses pendaftaran legalitas merchant, proses Know-Your-Customer (KYC), verifikasi identitas badan usaha\/hukum, serta kewajiban potongan biaya per transaksi (MDR) adalah kontrak legal terpisah secara langsung antara pihak Klien dengan aggregator terkait.<\/li>\n                <li><strong>Batasan Akuntabilitas Server:<\/strong> Manajemen alokasi sumber daya sistem hardware, siklus masa kedaluwarsa kepemilikan nama domain, dan performa jaringan uptime 99.9% merupakan tanggung jawab mutlak dari pihak perusahaan hosting yang dipilih klien (*Rumahweb, DomaiNesia, dll.*). Pihak pengembang bebas dari tuntutan kerugian material akibat kegagalan server eksternal tersebut.<\/li>\n            <\/ul>\n        <\/div>  \n\n\t\t<div class=\"commercial-note\">\n            <strong>Commercial Note:<\/strong> Final pricing should be confirmed after the platform, number of products\/variants, payment gateway, shipping rules, third-party integrations, photography requirements, and required revision rounds are agreed. Premium plugin license fees are included in the Signature\/Atelier packages. Web hosting costs are separate infrastructure fees paid directly to the chosen provider.\n        <\/div>\n\n        <!-- IP Protection Clause -->\n        <div class=\"ip-protection-clause\">\n            <p style=\"font-size: 13px; color: #7b341e; margin: 0; line-height: 1.6;\">\n                <strong>\u26a0\ufe0f CONFIDENTIALITY & INTELLECTUAL PROPERTY NOTICE:<\/strong><br>\n                Seluruh konsep desain, arsitektur informasi, struktur stack plugin WooCommerce, dan metodologi kerja yang tercantum dalam dokumen proposal HTML ini adalah hak kekayaan intelektual milik <strong>[Nama Studio Anda]<\/strong>. Informasi ini bersifat rahasia dan hanya ditujukan untuk keperluan evaluasi internal oleh pihak <strong>[Nama Klien]<\/strong>. Penggandaan, penyebaran, atau penggunaan sebagian\/seluruh infrastruktur ini tanpa persetujuan tertulis dan ikatan kontrak resmi dengan kami akan dikenakan sanksi hukum yang berlaku.\n            <\/p>\n        <\/div>\n    <\/section>\n\n    <!-- SECTION 7: INPUTS & NEXT STEPS -->\n    <section id=\"nextsteps\" class=\"proposal-section\">\n        <h2>07 &middot; Inputs and Next Steps<\/h2>\n        <p class=\"section-intro\">What is needed to begin the project and establish your storefront's digital infrastructure.<\/p>\n\n        <div class=\"input-blocks-container\">\n            <!-- Card 1 -->\n            <div class=\"input-block-card\">\n                <h3 style=\"margin-top: 0; font-size: 1.3rem; color: #1a1a1a;\">7.1 &middot; Hosting & Infrastructure<\/h3>\n                <p style=\"font-size: 13px; color: var(--text-muted);\">Sebelum kick-off, klien wajib mengonfirmasi pilihan infrastruktur server:<\/p>\n                <ul>\n                    <li>Pilihan provider & tier hosting yang disepakati (misal: <em>Rumahweb Hosting Medium<\/em>).<\/li>\n                    <li>Data Legalitas Domain: Nama lengkap, email aktif, nomor HP, dan scan KTP untuk registrasi domain lokal\/internasional resmi PANDI\/ICANN.<\/li>\n                    <li>Metode Pembayaran: Dipandu transaksi mandiri atau dimasukkan sebagai biaya *pass-through* di invoice awal pengembang.<\/li>\n                <\/ul>\n            <\/div>\n\n            <!-- Card 2 -->\n            <div class=\"input-block-card\">\n                <h3 style=\"margin-top: 0; font-size: 1.3rem; color: #1a1a1a;\">7.2 &middot; Brand Assets & Content<\/h3>\n                <p style=\"font-size: 13px; color: var(--text-muted);\">Berkas konten yang dibutuhkan dari pihak klien untuk memperlancar linimasa dev:<\/p>\n                <ul>\n                    <li>Logo resolusi tinggi, nama brand final, kode hex palet warna khusus, preferensi font.<\/li>\n                    <li>Katalog produk awal: Nama item, variasi ukuran\/warna, panduan care kain, dan harga.<\/li>\n                    <li>Foto potret produk fashion berkualitas tinggi berorientasi vertikal.<\/li>\n                    <li>Alamat fisik showroom, jam operasional, kontak email cs, dan nomor WhatsApp Business.<\/li>\n                <\/ul>\n            <\/div>\n\n            <!-- Card 3 -->\n            <div class=\"input-block-card\">\n                <h3 style=\"margin-top: 0; font-size: 1.3rem; color: #1a1a1a;\">7.3 &middot; Project Kickoff Approval<\/h3>\n                <p style=\"font-size: 13px; color: var(--text-muted);\">Langkah formal untuk mengubah dokumen proposal menjadi pengerjaan aktif:<\/p>\n                <ol>\n                    <li>Konfirmasi paket pengerjaan terpilih (Foundation \/ Signature \/ Atelier) beserta pilihan hosting server.<\/li>\n                    <li>Penandatanganan lembar persetujuan komersial bersama.<\/li>\n                    <li>Penyelesaian deposit uang muka tahap pertama sebesar 40%.<\/li>\n                    <li>Penyerahan berkas administratif pada poin 7.1 & 7.2.<\/li>\n                <\/ol>\n            <\/div>\n        <\/div>\n\n        <h3 style=\"font-size: 1.5rem; margin-top: 30px;\">7.4 &middot; Approval & Sign-Off Authorization<\/h3>\n        <div class=\"sign-off-container\">\n            <div>\n              <p><strong>Client Authorization<\/strong><\/p>\n              <p style=\"font-size: 13px; color: var(--text-muted);\">Authorized Signature:<\/p>\n              <div class=\"sign-block\">\n                <p>Name \/ Title:<\/p>\n                <p>Date:<\/p>\n              <\/div>\n            <\/div>\n            <div>\n              <p><strong>Studio Authorization<\/strong><\/p>\n              <p style=\"font-size: 13px; color: var(--text-muted);\">Authorized Signature:<\/p>\n              <div class=\"sign-block\">\n                <p>Name \/ Title:<\/p>\n                <p>Date:<\/p>\n              <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"ready-to-build-cta\">\n            <h2>Ready to build a quieter, stronger storefront?<\/h2>\n            <p style=\"color: #aaa; margin-bottom: 20px; font-size: 14px;\">Confirm your choices, secure your hosting and domain, and let's turn this strategy into a stunning digital boutique.<\/p>\n            <a href=\"mailto:[Email]?subject=Proposal%20Approval%20-%20Luxury%20Boutique\" class=\"btn-primary\">Start the Conversation<\/a>\n            <p style=\"margin-top: 25px; font-size: 12px; color: #888;\"><strong>ArK Solution<\/strong> &middot; [Email] &middot; [Phone \/ WhatsApp] &middot; [Website]<\/p>\n        <\/div>\n    <\/section>\n\n    <!-- SECTION 8: FULL DEMO EMBEDDED -->\n    <section id=\"demo\" class=\"proposal-section\">\n        <h2>08 &middot; Interactive Boutique Demo<\/h2>\n        <p class=\"section-intro\">Di bawah ini adalah aplikasi toko *full-featured* yang terintegrasi secara utuh. Anda dapat menavigasi menu (Shop, About, Tech & Payments, Contact), memfilter katalog berdasarkan kategori produk, mengurutkan harga, memilih varian warna\/ukuran, serta mensimulasikan *cart drawer* hingga alur *checkout*.<\/p>\n\n        <div class=\"demo-standalone-shell\">\n            <div class=\"topline\">Complimentary delivery on orders over IDR 1.500.000 \u00b7 Private appointments available<\/div>\n            <header class=\"site-head\">\n                <a class=\"brand\" href=\"javascript:void(0)\" onclick=\"showDemoView('demo-home')\">Butik Landing Page<small>Quietly considered clothing<\/small><\/a>\n                <nav class=\"nav\" aria-label=\"Primary navigation\">\n                    <button onclick=\"showDemoView('demo-home')\">Shop<\/button>\n                    <button onclick=\"showDemoView('demo-about')\">About<\/button>\n                    <button onclick=\"showDemoView('demo-tech')\">Tech & Payments<\/button>\n                    <button onclick=\"showDemoView('demo-contact')\">Contact<\/button>\n                <\/nav>\n                <div class=\"utility\">\n                    <button aria-label=\"Search\" onclick=\"demoStandaloneToast('Pencarian instan siap diintegrasikan')\">\u2315<\/button>\n                    <button aria-label=\"Account\" onclick=\"demoStandaloneToast('Sistem Akun Pelanggan siap diintegrasikan')\">\u25ce<\/button>\n                    <button aria-label=\"Open shopping bag\" onclick=\"openCart()\">Bag <span class=\"cart-badge\" id=\"demoCartCount\">0<\/span><\/button>\n                <\/div>\n            <\/header>\n\n            <!-- DEMO VIEW: HOME \/ SHOP -->\n            <div id=\"demo-home\" class=\"view active\">\n                <section class=\"hero\">\n                    <div class=\"hero-copy\">\n                        <div class=\"eyebrow\">The quiet art of dressing well<\/div>\n                        <h1>Designed to be lived in.<br>Made to be remembered.<\/h1>\n                        <p>Discover a considered wardrobe of refined silhouettes, premium fabrics, and enduring details\u2014created for the everyday rituals that become your signature.<\/p>\n                        <div class=\"actions\">\n                            <button class=\"btn\" onclick=\"document.getElementById('demo-collection').scrollIntoView({behavior:'smooth'})\">Shop the collection<\/button>\n                            <button class=\"btn alt\" onclick=\"showDemoView('demo-about')\">Explore our story<\/button>\n                        <\/div>\n                    <\/div>\n                    <div class=\"hero-media\" role=\"img\" aria-label=\"Editorial fashion portrait in a neutral palette\"><\/div>\n                <\/section>\n                \n                <section class=\"feature-bar\">\n                    <div><strong>Thoughtful materials<\/strong><span>Fabrics selected for hand-feel, movement, and lasting wear.<\/span><\/div>\n                    <div><strong>Made in measured quantities<\/strong><span>Less noise, more attention to the pieces we release.<\/span><\/div>\n                    <div><strong>Care beyond checkout<\/strong><span>Personal support from first fit question to final delivery.<\/span><\/div>\n                <\/section>\n\n                <section class=\"wrap\" id=\"demo-collection\">\n                    <div class=\"section-head\">\n                        <div>\n                            <div class=\"label\">The collection<\/div>\n                            <h2>Pieces with presence.<br>Room to become yours.<\/h2>\n                        <\/div>\n                        <p>Build a wardrobe around tactile fabrics, generous proportions, and quiet details that reveal themselves over time.<\/p>\n                    <\/div>\n\n                    <!-- Filter and Sort Controls -->\n                    <div class=\"filter-bar\">\n                        <div class=\"filter-group\">\n                            <span class=\"filter-label\">Category:<\/span>\n                            <button class=\"filter-btn active\" onclick=\"setDemoCategory('all', this)\">All<\/button>\n                            <button class=\"filter-btn\" onclick=\"setDemoCategory('Tops', this)\">Tops<\/button>\n                            <button class=\"filter-btn\" onclick=\"setDemoCategory('Trousers', this)\">Trousers<\/button>\n                            <button class=\"filter-btn\" onclick=\"setDemoCategory('Outerwear', this)\">Outerwear<\/button>\n                            <button class=\"filter-btn\" onclick=\"setDemoCategory('Knitwear', this)\">Knitwear<\/button>\n                            <button class=\"filter-btn\" onclick=\"setDemoCategory('Dresses', this)\">Dresses<\/button>\n                        <\/div>\n                        <div class=\"filter-group\">\n                            <span class=\"filter-label\">Sort by:<\/span>\n                            <select class=\"sort-select\" onchange=\"setDemoSort(this.value)\">\n                                <option value=\"featured\">Featured<\/option>\n                                <option value=\"price-asc\">Price: Low to High<\/option>\n                                <option value=\"price-desc\">Price: High to Low<\/option>\n                            <\/select>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"product-grid\" id=\"demoProductGrid\"><\/div>\n                <\/section>\n\n                <section class=\"story\">\n                    <div class=\"story-image\" role=\"img\" aria-label=\"Neutral editorial fashion moodboard\"><\/div>\n                    <div class=\"story-copy\">\n                        <div class=\"label\">The ArK Solution note<\/div>\n                        <h2>Luxury is felt in the details.<\/h2>\n                        <p>We believe a garment earns its place through the weight of a fabric, the balance of a seam, and the way a silhouette moves with you. Our collections are created slowly and intentionally, with a focus on quality, versatility, and the pleasure of wearing something made with care.<\/p>\n                        <div class=\"actions\">\n                            <button class=\"btn\" onclick=\"showDemoView('demo-about')\">Read our story<\/button>\n                        <\/div>\n                    <\/div>\n                <\/section>\n            <\/div>\n\n            <!-- DEMO VIEW: ABOUT -->\n            <div id=\"demo-about\" class=\"view\">\n                <section class=\"about\">\n                    <div class=\"label\">About Butik Landing Page<\/div>\n                    <h2>Clothing for the space between occasions.<\/h2>\n                    <p class=\"about-lead\">We began with a simple question: what if getting dressed could feel slower, more personal, and more lasting?<\/p>\n                    <p>From that question came Butik Landing Page, a boutique built around thoughtful design rather than seasonal noise. We create clothes for the space between occasions\u2014the pieces that become part of a morning ritual, a long journey, a quiet dinner, and the many ordinary days that deserve to feel considered.<\/p>\n                    <p>Every collection begins with proportion, material, and movement. We look for silhouettes that give the wearer room to live, then refine them until every line feels purposeful. A collar should sit naturally. A sleeve should move without distraction. A seam should feel as good on the inside as it looks from the outside.<\/p>\n                    \n                    <div class=\"about-grid\">\n                        <article class=\"about-card\">\n                            <div class=\"label\">01 \u00b7 Made slowly<\/div>\n                            <h3>Fewer pieces. More attention.<\/h3>\n                            <p>Slow fashion is not simply a slower production calendar. It is a different way of deciding what deserves to be made. We release considered collections in measured quantities, develop styles with longevity in mind, and resist the pressure to replace good design with constant novelty.<\/p>\n                        <\/article>\n                        <article class=\"about-card\">\n                            <div class=\"label\">02 \u00b7 Material intelligence<\/div>\n                            <h3>Chosen for feel and function.<\/h3>\n                            <p>We source materials for hand-feel, drape, breathability, resilience, and suitability for the intended design\u2014not simply for a label or trend. Where supplier documentation is available, we seek greater visibility into fibre composition, mill standards, certifications, and production practices.<\/p>\n                        <\/article>\n                        <article class=\"about-card\">\n                            <div class=\"label\">03 \u00b7 Ethical construction<\/div>\n                            <h3>Considered from the inside out.<\/h3>\n                            <p>We work with making partners who understand the importance of clean construction, consistent finishing, and a respectful working process. Our quality checks look beyond the photograph: seam strength, alignment, pressing, hems, fastenings, lining, and the way the garment holds its shape.<\/p>\n                        <\/article>\n                        <article class=\"about-card\">\n                            <div class=\"label\">04 \u00b7 Everyday inspiration<\/div>\n                            <h3>Form, feeling, and daily life.<\/h3>\n                            <p>Our creative references come from quiet architecture, worn-in interiors, changing light, travel, art, and the rhythm of daily life. These observations become proportion, texture, palette, and mood\u2014clothes with enough presence to feel special, and enough ease to become yours.<\/p>\n                        <\/article>\n                    <\/div>\n\n                    <div class=\"actions\">\n                        <button class=\"btn\" onclick=\"showDemoView('demo-home')\">Shop the collection<\/button>\n                        <button class=\"btn alt\" onclick=\"showDemoView('demo-contact')\">Speak with the ArK Solution<\/button>\n                    <\/div>\n                <\/section>\n            <\/div>\n\n            <!-- DEMO VIEW: TECH & PAYMENTS -->\n            <div id=\"demo-tech\" class=\"view\">\n                <section class=\"tech-view\">\n                    <div class=\"label\">Architecture & Commerce<\/div>\n                    <h2>Engineered for seamless digital retail.<\/h2>\n                    <p class=\"tech-lead\">A high-performance luxury storefront architecture built for ultra-fast response times, modular backend integrations, and frictionless international checkout pipelines.<\/p>\n                    \n                    <div class=\"tech-grid\">\n                        <article class=\"tech-card\">\n                            <div class=\"label\">01 \u00b7 Platform & Architecture<\/div>\n                            <h3>Headless & Modular<\/h3>\n                            <p>Designed to decouple the frontend presentation layer from the commerce engine, enabling unmatched page-load performance, SEO excellence, and omni-channel scaling.<\/p>\n                            <ul>\n                                <li><strong>Frontend:<\/strong> Native Vanilla JS \/ Next.js \/ Vue.js<\/li>\n                                <li><strong>Styling:<\/strong> Zero-dependency CSSEngine & Custom Tokens<\/li>\n                                <li><strong>CMS \/ Engine:<\/strong> Shopify Plus \/ WooCommerce \/ Medusa.js<\/li>\n                                <li><strong>Hosting:<\/strong> Vercel \/ Cloudflare Edge CDN<\/li>\n                            <\/ul>\n                        <\/article>\n                        <article class=\"tech-card\">\n                            <div class=\"label\">02 \u00b7 Payment Gateways<\/div>\n                            <h3>Frictionless Global Checkout<\/h3>\n                            <p>Pre-configured integrations supporting multi-currency conversion, local payment methods, and bank-grade PCI-DSS compliant payment processing.<\/p>\n                            <div class=\"gateway-pills\">\n                                <span class=\"gateway-pill\">\ud83d\udcb3 Credit \/ Debit Cards<\/span>\n                                <span class=\"gateway-pill\">\uf8ff Apple Pay<\/span>\n                                <span class=\"gateway-pill\">G Pay Google Pay<\/span>\n                                <span class=\"gateway-pill\">\u26a1 Stripe Elements<\/span>\n                                <span class=\"gateway-pill\">\ud83d\udecd\ufe0f Klarna \/ Afterpay<\/span>\n                                <span class=\"gateway-pill\">\ud83c\udd7f\ufe0f PayPal Express<\/span>\n                            <\/div>\n                        <\/article>\n                        <article class=\"tech-card\">\n                            <div class=\"label\">03 \u00b7 Security & Compliance<\/div>\n                            <h3>Enterprise Protection<\/h3>\n                            <p>Built with privacy-first standards, end-to-end data encryption, and automatic fraud prevention to ensure quiet peace of mind for every transaction.<\/p>\n                            <ul>\n                                <li>PCI-DSS Level 1 Compliant Checkout<\/li>\n                                <li>256-bit SSL \/ TLS Encryption<\/li>\n                                <li>GDPR & CCPA Data Privacy Controls<\/li>\n                                <li>Automated AI Fraud Detection & 3D Secure 2.0<\/li>\n                            <\/ul>\n                        <\/article>\n                        <article class=\"tech-card\">\n                            <div class=\"label\">04 \u00b7 API & Ecosystem Integrations<\/div>\n                            <h3>Connected Commerce<\/h3>\n                            <p>Ready to sync seamlessly with your existing enterprise infrastructure, logistics partners, and customer relationship management platforms.<\/p>\n                            <ul>\n                                <li><strong>ERP \/ Inventory:<\/strong> Netsuite, Katana, Inventory Planner<\/li>\n                                <li><strong>CRM \/ Marketing:<\/strong> Klaviyo, Gorgias, Attentive<\/li>\n                                <li><strong>Logistics:<\/strong> ShipBob, DHL Express, FedEx API<\/li>\n                                <li><strong>Analytics:<\/strong> GA4, Triple Whale, PostHog<\/li>\n                            <\/ul>\n                        <\/article>\n                    <\/div>\n\n                    <div class=\"actions\">\n                        <button class=\"btn\" onclick=\"showDemoView('demo-home')\">Back to Shop<\/button>\n                        <button class=\"btn alt\" onclick=\"showDemoView('demo-contact')\">Technical Inquiry<\/button>\n                    <\/div>\n                <\/section>\n            <\/div>\n\n            <!-- DEMO VIEW: CONTACT -->\n            <div id=\"demo-contact\" class=\"view\">\n                <section class=\"contact\">\n                    <div class=\"label\">Customer care<\/div>\n                    <h2>Let us make the experience feel as considered as the collection.<\/h2>\n                    <p class=\"contact-lead\">Questions about fit, fabric, delivery, or the right piece for your wardrobe? Send us a note, visit the showroom, or begin a direct conversation on WhatsApp\u2014we will be pleased to help.<\/p>\n                    \n                    <div class=\"contact-layout\">\n                        <form class=\"form\" onsubmit=\"submitDemoContact(event)\">\n                            <label for=\"demo-name\">Your name<\/label>\n                            <input id=\"demo-name\" required placeholder=\"[Your name]\">\n                            \n                            <label for=\"demo-email\">Email address<\/label>\n                            <input id=\"demo-email\" type=\"email\" required placeholder=\"you@example.com\">\n                            \n                            <label for=\"demo-topic\">How can we help?<\/label>\n                            <select id=\"demo-topic\">\n                                <option>Fit and sizing<\/option>\n                                <option>Product availability<\/option>\n                                <option>Order support<\/option>\n                                <option>Wholesale \/ editorial<\/option>\n                            <\/select>\n                            \n                            <label for=\"demo-message\">Message<\/label>\n                            <textarea id=\"demo-message\" required placeholder=\"Tell us a little about what you are looking for.\"><\/textarea>\n                            \n                            <button class=\"btn\" type=\"submit\">Send message<\/button>\n                        <\/form>\n\n                        <aside class=\"contact-card\">\n                            <h3>Visit or write to us.<\/h3>\n                            <p>Our customer-care team usually replies within one business day.<\/p>\n                            <a href=\"mailto:care@branddomain.com\">care@branddomain.com<\/a>\n                            <a href=\"mailto:orders@branddomain.com\">orders@branddomain.com<\/a>\n                            <p><strong>Showroom<\/strong><br>[Full showroom address]<br>[City, Country]<\/p>\n                            <p><strong>Hours<\/strong><br>[Monday\u2013Friday, 10:00\u201318:00]<br>[Saturday, 10:00\u201316:00]<br>[Sunday \/ holiday policy]<\/p>\n                            <a class=\"btn light\" href=\"https:\/\/wa.me\/\" target=\"_blank\" rel=\"noopener\">Chat on WhatsApp<\/a>\n                        <\/aside>\n                    <\/div>\n                <\/section>\n            <\/div>\n\n            <footer>\n                <div>\n                    <div class=\"footer-brand\">Butik Landing Page<\/div>\n                    <div>Quietly considered clothing.<\/div>\n                <\/div>\n                <div>\n                    Shipping \u00b7 Returns \u00b7 Privacy \u00b7 Terms<br>\n                    <span>\u00a9 2026 Butik Landing Page. All rights reserved.<\/span>\n                <\/div>\n            <\/footer>\n        <\/div>\n    <\/section>\n<\/div>\n\n<!-- SHARED INTERACTIVE SIDE CART DRAWER ELEMENT -->\n<div class=\"cart-overlay\" id=\"cart-overlay\" onclick=\"toggleCart()\"><\/div>\n<div class=\"side-cart-drawer\" id=\"side-cart-drawer\">\n    <div class=\"cart-drawer-header\">\n        <span style=\"font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600;\">Your Bag<\/span>\n        <button class=\"cart-close-btn\" onclick=\"toggleCart()\">&times;<\/button>\n    <\/div>\n    <div class=\"cart-items-list\" id=\"cart-items-container\">\n        <!-- Dynamic simulated rows inject here via JS -->\n        <p style=\"color: #888; font-size: 13px; text-align: center; margin-top: 40px;\" id=\"empty-cart-msg\">Keranjang belanja Anda kosong.<\/p>\n    <\/div>\n    <div class=\"cart-footer-summary\">\n        <div class=\"cart-subtotal-line\">\n            <span>Subtotal<\/span>\n            <span id=\"cart-subtotal-amount\">IDR 0<\/span>\n        <\/div>\n        <button class=\"btn-checkout-demo\" onclick=\"simulateCheckout()\">Proceed to Checkout<\/button>\n        <p style=\"font-size: 10px; color: #888; text-align: center; margin-top: 10px;\">Secure Checkout &bull; Midtrans \/ Xendit Sandbox Active<\/p>\n    <\/div>\n<\/div>\n\n<!-- PAYMENTS GATEWAY SIMULATION MODAL -->\n<div class=\"gateway-modal\" id=\"gateway-modal\">\n    <div class=\"gateway-header\" id=\"gateway-header-bar\">\n        <div class=\"gateway-title\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"margin-top:2px;\"><rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"2\"><\/rect><line x1=\"2\" y1=\"10\" x2=\"22\" y2=\"10\"><\/line><\/svg>\n            <span id=\"gateway-provider-title\">Simulasi SandBox Midtrans System<\/span>\n        <\/div>\n        <button class=\"cart-close-btn\" style=\"color:#fff;\" onclick=\"closeGatewayModal()\">&times;<\/button>\n    <\/div>\n    <div class=\"gateway-body\">\n        <div class=\"sandbox-alert-badge\">\n            <strong>\ud83d\udd27 SIMULASI PEMBAYARAN OTOMATIS:<\/strong><br>\n            Ini adalah representasi integrasi payment gateway. Di situs produksi, modul ini memproses transaksi instan tanpa rekonsiliasi manual.\n        <\/div>\n        <div style=\"font-size: 13px; margin-bottom: 5px;\">Total Tagihan: <strong id=\"gateway-total-bill\">IDR 0<\/strong><\/div>\n        <div style=\"font-size: 12px; color: #555; margin-bottom: 15px;\">Pilih metode pembayaran simulasi di bawah:<\/div>\n        <div class=\"payment-methods-sim\">\n            <button class=\"pay-method-btn\" onclick=\"triggerPaymentSuccess('Virtual Account Bank (BCA\/Mandiri)')\">\ud83c\udfe6 Bank VA (BCA\/Mandiri)<\/button>\n            <button class=\"pay-method-btn\" onclick=\"triggerPaymentSuccess('QRIS \/ E-Wallet')\">\ud83d\udcf1 QRIS Instan \/ GoPay<\/button>\n            <button class=\"pay-method-btn\" onclick=\"triggerPaymentSuccess('Kartu Kredit (3D Secure)')\">\ud83d\udcb3 Credit Card (Visa\/MC)<\/button>\n            <button class=\"pay-method-btn\" onclick=\"triggerPaymentSuccess('PayLater \/ KlikBCA')\">\ud83d\udecd\ufe0f PayLater (Klarna\/Akulaku)<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Standalone Toast Element -->\n<div class=\"demo-toast\" id=\"demoToast\"><\/div>\n\n<script>\n    \/\/ Tab switching logic for Proposal\n    function switchTab(tabId) {\n        document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));\n        document.querySelectorAll('.proposal-section').forEach(sec => sec.classList.remove('active'));\n        \n        event.currentTarget.classList.add('active');\n        document.getElementById(tabId).classList.add('active');\n    }\n\n    \/\/ Swatch selection logic (Tab 04)\n    function selectSwatch(element, colorName) {\n        const parent = element.parentElement;\n        parent.querySelectorAll('.swatch-circle').forEach(sw => sw.classList.remove('selected'));\n        element.classList.add('selected');\n        element.setAttribute('data-selected-color', colorName);\n    }\n\n    \/\/ Cart data array\n    let cart = [];\n\n    function toggleCart() {\n        document.getElementById('side-cart-drawer').classList.toggle('open');\n        document.getElementById('cart-overlay').classList.toggle('open');\n    }\n\n    function addToCart(productName, price, btnElement) {\n        let color = 'Default Color';\n        if(btnElement) {\n            const cardElement = btnElement.parentElement;\n            const selectedSwatch = cardElement.querySelector('.swatch-circle.selected');\n            if(selectedSwatch) color = selectedSwatch.getAttribute('title') || 'Default Color';\n        }\n\n        cart.push({\n            name: productName,\n            price: price,\n            color: color\n        });\n\n        updateCartUI();\n        toggleCart();\n    }\n\n    function removeCartItem(index) {\n        cart.splice(index, 1);\n        updateCartUI();\n    }\n\n    function updateCartUI() {\n        const container = document.getElementById('cart-items-container');\n        const countBadge = document.getElementById('cart-count-badge');\n        const demoCountBadge = document.getElementById('demoCartCount');\n        const subtotalText = document.getElementById('cart-subtotal-amount');\n        const emptyMsg = document.getElementById('empty-cart-msg');\n\n        if(countBadge) countBadge.innerText = cart.length;\n        if(demoCountBadge) demoCountBadge.innerText = cart.length;\n\n        container.innerHTML = '';\n\n        if(cart.length === 0) {\n            container.appendChild(emptyMsg);\n            subtotalText.innerText = 'IDR 0';\n            return;\n        }\n\n        let total = 0;\n        cart.forEach((item, index) => {\n            total += item.price;\n            const row = document.createElement('div');\n            row.className = 'cart-item-row';\n            row.innerHTML = `\n                <div class=\"cart-item-details\">\n                    <h4>${item.name}<\/h4>\n                    <span class=\"cart-item-meta\">Varian: ${item.color}<\/span>\n                    <button class=\"cart-item-remove\" onclick=\"removeCartItem(${index})\">Hapus<\/button>\n                <\/div>\n                <div><strong>IDR ${item.price.toLocaleString('id-ID')}<\/strong><\/div>\n            `;\n            container.appendChild(row);\n        });\n\n        subtotalText.innerText = 'IDR ' + total.toLocaleString('id-ID');\n    }\n\n    \/\/ Checkout Simulation with Midtrans\/Xendit Sandbox Mock\n    function simulateCheckout() {\n        if(cart.length === 0) {\n            alert('Keranjang belanja kosong. Harap tambahkan produk terlebih dahulu.');\n            return;\n        }\n\n        let total = 0;\n        cart.forEach(item => total += item.price);\n\n        toggleCart();\n\n        document.getElementById('gateway-total-bill').innerText = 'IDR ' + total.toLocaleString('id-ID');\n        \n        const headerBar = document.getElementById('gateway-header-bar');\n        const providerTitle = document.getElementById('gateway-provider-title');\n        if(Math.random() > 0.5) {\n            headerBar.className = 'gateway-header';\n            providerTitle.innerText = 'Simulasi SandBox Midtrans Gateway';\n        } else {\n            headerBar.className = 'gateway-header xendit';\n            providerTitle.innerText = 'Simulasi SandBox Xendit Integration';\n        }\n\n        document.getElementById('gateway-modal').classList.add('open');\n        document.getElementById('cart-overlay').classList.add('open');\n    }\n\n    function closeGatewayModal() {\n        document.getElementById('gateway-modal').classList.remove('open');\n        document.getElementById('cart-overlay').classList.remove('open');\n    }\n\n    function triggerPaymentSuccess(methodName) {\n        alert('\ud83c\udf89 SUCCESS: Pembayaran sandbox via ' + methodName + ' berhasil diverifikasi! Sistem WooCommerce secara otomatis mengubah status pesanan dari \"Pending\" menjadi \"Processing\", meluncurkan push notification e-wallet, mengirimkan email invoice otomatis ke pembeli, dan mengurangi stok inventaris produk tanpa intervensi admin.');\n        cart = [];\n        updateCartUI();\n        closeGatewayModal();\n    }\n\n    \/* ========================================================= *\/\n    \/* STANDALONE BOUTIQUE DEMO LOGIC (TAB 08) *\/\n    \/* ========================================================= *\/\n    const demoProducts = [\n        {id:1, name:'The Atelier Shirt', category:'Tops', price:849000, image:'https:\/\/files.manuscdn.com\/search-media\/310519663976453077\/QPRA80MD6SHAckjZQYD4LO\/4mZH8gFfTSNMZYbVHMBPsB.jpg', colors:[['Oat','#d9c7ac'],['Ink','#25373b'],['Chalk','#f2efe8']], sizes:['XS','S','M','L']},\n        {id:2, name:'The Column Trouser', category:'Trousers', price:1150000, image:'https:\/\/files.manuscdn.com\/search-media\/310519663976453077\/QPRA80MD6SHAckjZQYD4LO\/VpkyV5hkrKkyB5t9TUkEHn.jpg', colors:[['Stone','#a99e8d'],['Black','#1d2528']], sizes:['S','M','L','XL']},\n        {id:3, name:'The Soft Structure Blazer', category:'Outerwear', price:1850000, image:'https:\/\/files.manuscdn.com\/search-media\/310519663976453077\/QPRA80MD6SHAckjZQYD4LO\/CFN5p76H92APZkJyqURysk.jpg', colors:[['Camel','#b98963'],['Ivory','#e9e1d4']], sizes:['XS','S','M','L']},\n        {id:4, name:'The Everyday Knit', category:'Knitwear', price:980000, image:'https:\/\/files.manuscdn.com\/search-media\/310519663976453077\/QPRA80MD6SHAckjZQYD4LO\/DGhPA7qn8m9ffTLD6W4d2m.jpg', colors:[['Ecru','#d7c9b4'],['Moss','#899083'],['Ink','#283337']], sizes:['S','M','L']},\n        {id:5, name:'The Longline Coat', category:'Outerwear', price:2450000, image:'https:\/\/files.manuscdn.com\/search-media\/310519663976453077\/QPRA80MD6SHAckjZQYD4LO\/dWJJYf52rmTreAz9CbMMGU.jpg', colors:[['Sand','#c9b49d'],['Espresso','#55443c']], sizes:['S','M','L']},\n        {id:6, name:'The Studio Dress', category:'Dresses', price:1280000, image:'https:\/\/files.manuscdn.com\/search-media\/310519663976453077\/QPRA80MD6SHAckjZQYD4LO\/aAtWMh4U55bsHXVgb5HmnR.jpg', colors:[['Pearl','#ded7cb'],['Olive','#7d8170']], sizes:['XS','S','M','L']}\n    ];\n\n    let currentDemoCategory = 'all';\n    let currentDemoSort = 'featured';\n\n    const formatMoney = n => `IDR ${n.toLocaleString('id-ID')}`;\n\n    function renderDemoProducts() {\n        let items = [...demoProducts];\n\n        if(currentDemoCategory !== 'all') {\n            items = items.filter(p => p.category === currentDemoCategory);\n        }\n\n        if(currentDemoSort === 'price-asc') {\n            items.sort((a,b) => a.price - b.price);\n        } else if(currentDemoSort === 'price-desc') {\n            items.sort((a,b) => b.price - a.price);\n        }\n\n        const container = document.getElementById('demoProductGrid');\n        if(!container) return;\n\n        if(!items.length) {\n            container.innerHTML = '<p class=\"muted\" style=\"grid-column: 1\/-1; padding: 40px 0;\">Tidak ada produk ditemukan di kategori ini.<\/p>';\n            return;\n        }\n\n        container.innerHTML = items.map(p => `\n            <article class=\"product-card\">\n                <div class=\"product-photo\">\n                    <img decoding=\"async\" src=\"${p.image}\" alt=\"${p.name}\" loading=\"lazy\">\n                    <button class=\"quick\" onclick=\"demoStandaloneToast('Tampilan Quick View siap diintegrasikan')\">Quick view<\/button>\n                <\/div>\n                <div class=\"product-info\">\n                    <h3 class=\"product-name\">${p.name}<\/h3>\n                    <div class=\"product-meta\">\n                        <span class=\"price\">${formatMoney(p.price)}<\/span>\n                        <span class=\"muted\">${p.category}<\/span>\n                    <\/div>\n                    <div class=\"swatches\" aria-label=\"Colour options\">\n                        ${p.colors.map((c,i)=>`<button class=\"swatch ${i===0?'selected':''}\" title=\"${c[0]}\" style=\"background:${c[1]}\" onclick=\"selectDemoSwatch(this)\"><\/button>`).join('')}\n                    <\/div>\n                    <div class=\"sizes\" aria-label=\"Size options\">\n                        ${p.sizes.map((s,i)=>`<button class=\"size ${i===1?'selected':''}\" onclick=\"selectDemoSize(this)\">${s}<\/button>`).join('')}\n                    <\/div>\n                    <button class=\"add\" onclick=\"addDemoItemToCart(${p.id})\">Add to cart<\/button>\n                <\/div>\n            <\/article>\n        `).join('');\n    }\n\n    function setDemoCategory(cat, btn) {\n        currentDemoCategory = cat;\n        const parent = btn.parentElement;\n        parent.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));\n        if(btn) btn.classList.add('active');\n        renderDemoProducts();\n    }\n\n    function setDemoSort(sortType) {\n        currentDemoSort = sortType;\n        renderDemoProducts();\n    }\n\n    function selectDemoSwatch(el) {\n        el.parentElement.querySelectorAll('.swatch').forEach(x => x.classList.remove('selected'));\n        el.classList.add('selected');\n    }\n\n    function selectDemoSize(el) {\n        el.parentElement.querySelectorAll('.size').forEach(x => x.classList.remove('selected'));\n        el.classList.add('selected');\n    }\n\n    function addDemoItemToCart(id) {\n        const item = demoProducts.find(x => x.id === id);\n        if(!item) return;\n\n        cart.push({\n            name: item.name,\n            price: item.price,\n            color: item.colors[0][0]\n        });\n\n        updateCartUI();\n        demoStandaloneToast(`${item.name} berhasil ditambahkan ke keranjang`);\n        toggleCart();\n    }\n\n    function showDemoView(viewId) {\n        document.querySelectorAll('.demo-standalone-shell .view').forEach(v => v.classList.remove('active'));\n        const target = document.getElementById(viewId);\n        if(target) target.classList.add('active');\n    }\n\n    function demoStandaloneToast(msg) {\n        const toast = document.getElementById('demoToast');\n        if(!toast) return;\n        toast.innerText = msg;\n        toast.classList.add('show');\n        setTimeout(() => toast.classList.remove('show'), 2400);\n    }\n\n    function submitDemoContact(e) {\n        e.preventDefault();\n        demoStandaloneToast('Pesan Anda telah siap dikirimkan.');\n        e.target.reset();\n    }\n\n    \/\/ Initialize standalone grid on ready\n    document.addEventListener('DOMContentLoaded', () => {\n        renderDemoProducts();\n    });\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Luxury Boutique Ecommerce Website Design &#038; Infrastructure Proposal Website Design &#038; Infrastructure Proposal &middot; Ecommerce Model Butik Landing Page Luxury [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":117,"parent":86,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-88","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.4 (Yoast SEO v28.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Luxury Boutique E-commerce Website Design &amp; Infrastructure<\/title>\n<meta name=\"description\" content=\"Explore our comprehensive web design &amp; technical infrastructure proposal for luxury fashion boutiques. Custom WooCommerce, high-speed UX, and localized payment gateways.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/intouch.my.id\/web\/proposal\/luxury-boutique-ecommerce-website-design-infrastructure\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Luxury Boutique Ecommerce Website Design &amp; Infrastructure\" \/>\n<meta property=\"og:description\" content=\"Explore our comprehensive web design &amp; technical infrastructure proposal for luxury fashion boutiques. Custom WooCommerce, high-speed UX, and localized payment gateways.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/intouch.my.id\/web\/proposal\/luxury-boutique-ecommerce-website-design-infrastructure\/\" \/>\n<meta property=\"og:site_name\" content=\"Intouch Software Solutions\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-08T09:18:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/intouch.my.id\/web\/wp-content\/uploads\/2026\/10\/luxury-boutique-ecommerce-demo-preview-final-1-scaled.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1176\" \/>\n\t<meta property=\"og:image:height\" content=\"2560\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\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=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/luxury-boutique-ecommerce-website-design-infrastructure\\\/\",\"url\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/luxury-boutique-ecommerce-website-design-infrastructure\\\/\",\"name\":\"Luxury Boutique E-commerce Website Design & Infrastructure\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/luxury-boutique-ecommerce-website-design-infrastructure\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/luxury-boutique-ecommerce-website-design-infrastructure\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/luxury-boutique-ecommerce-demo-preview-final-1-scaled.webp\",\"datePublished\":\"2026-10-08T07:59:43+00:00\",\"dateModified\":\"2026-10-08T09:18:35+00:00\",\"description\":\"Explore our comprehensive web design & technical infrastructure proposal for luxury fashion boutiques. Custom WooCommerce, high-speed UX, and localized payment gateways.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/luxury-boutique-ecommerce-website-design-infrastructure\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/luxury-boutique-ecommerce-website-design-infrastructure\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/luxury-boutique-ecommerce-website-design-infrastructure\\\/#primaryimage\",\"url\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/luxury-boutique-ecommerce-demo-preview-final-1-scaled.webp\",\"contentUrl\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/luxury-boutique-ecommerce-demo-preview-final-1-scaled.webp\",\"width\":1176,\"height\":2560},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/luxury-boutique-ecommerce-website-design-infrastructure\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Proposal\",\"item\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/proposal\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Luxury Boutique Ecommerce Website Design &#038; Infrastructure\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/#website\",\"url\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/\",\"name\":\"Intouch Software Solutions\",\"description\":\"Web design, AI-optimized SEO, and desktop software built around the way your business works.\",\"publisher\":{\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/#organization\",\"name\":\"Intouch Software Solutions\",\"url\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/cropped-Logo-Intouch.jpg\",\"contentUrl\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/cropped-Logo-Intouch.jpg\",\"width\":1149,\"height\":496,\"caption\":\"Intouch Software Solutions\"},\"image\":{\"@id\":\"https:\\\/\\\/intouch.my.id\\\/web\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/github.com\\\/adhitya1978\",\"https:\\\/\\\/www.instagram.com\\\/arksolution.id\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Luxury Boutique E-commerce Website Design & Infrastructure","description":"Explore our comprehensive web design & technical infrastructure proposal for luxury fashion boutiques. Custom WooCommerce, high-speed UX, and localized payment gateways.","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:\/\/intouch.my.id\/web\/proposal\/luxury-boutique-ecommerce-website-design-infrastructure\/","og_locale":"en_US","og_type":"article","og_title":"Luxury Boutique Ecommerce Website Design & Infrastructure","og_description":"Explore our comprehensive web design & technical infrastructure proposal for luxury fashion boutiques. Custom WooCommerce, high-speed UX, and localized payment gateways.","og_url":"https:\/\/intouch.my.id\/web\/proposal\/luxury-boutique-ecommerce-website-design-infrastructure\/","og_site_name":"Intouch Software Solutions","article_modified_time":"2026-10-08T09:18:35+00:00","og_image":[{"width":1176,"height":2560,"url":"https:\/\/intouch.my.id\/web\/wp-content\/uploads\/2026\/10\/luxury-boutique-ecommerce-demo-preview-final-1-scaled.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/intouch.my.id\/web\/proposal\/luxury-boutique-ecommerce-website-design-infrastructure\/","url":"https:\/\/intouch.my.id\/web\/proposal\/luxury-boutique-ecommerce-website-design-infrastructure\/","name":"Luxury Boutique E-commerce Website Design & Infrastructure","isPartOf":{"@id":"https:\/\/intouch.my.id\/web\/#website"},"primaryImageOfPage":{"@id":"https:\/\/intouch.my.id\/web\/proposal\/luxury-boutique-ecommerce-website-design-infrastructure\/#primaryimage"},"image":{"@id":"https:\/\/intouch.my.id\/web\/proposal\/luxury-boutique-ecommerce-website-design-infrastructure\/#primaryimage"},"thumbnailUrl":"https:\/\/intouch.my.id\/web\/wp-content\/uploads\/2026\/10\/luxury-boutique-ecommerce-demo-preview-final-1-scaled.webp","datePublished":"2026-10-08T07:59:43+00:00","dateModified":"2026-10-08T09:18:35+00:00","description":"Explore our comprehensive web design & technical infrastructure proposal for luxury fashion boutiques. Custom WooCommerce, high-speed UX, and localized payment gateways.","breadcrumb":{"@id":"https:\/\/intouch.my.id\/web\/proposal\/luxury-boutique-ecommerce-website-design-infrastructure\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/intouch.my.id\/web\/proposal\/luxury-boutique-ecommerce-website-design-infrastructure\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/intouch.my.id\/web\/proposal\/luxury-boutique-ecommerce-website-design-infrastructure\/#primaryimage","url":"https:\/\/intouch.my.id\/web\/wp-content\/uploads\/2026\/10\/luxury-boutique-ecommerce-demo-preview-final-1-scaled.webp","contentUrl":"https:\/\/intouch.my.id\/web\/wp-content\/uploads\/2026\/10\/luxury-boutique-ecommerce-demo-preview-final-1-scaled.webp","width":1176,"height":2560},{"@type":"BreadcrumbList","@id":"https:\/\/intouch.my.id\/web\/proposal\/luxury-boutique-ecommerce-website-design-infrastructure\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/intouch.my.id\/web\/"},{"@type":"ListItem","position":2,"name":"Proposal","item":"https:\/\/intouch.my.id\/web\/proposal\/"},{"@type":"ListItem","position":3,"name":"Luxury Boutique Ecommerce Website Design &#038; Infrastructure"}]},{"@type":"WebSite","@id":"https:\/\/intouch.my.id\/web\/#website","url":"https:\/\/intouch.my.id\/web\/","name":"Intouch Software Solutions","description":"Web design, AI-optimized SEO, and desktop software built around the way your business works.","publisher":{"@id":"https:\/\/intouch.my.id\/web\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/intouch.my.id\/web\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/intouch.my.id\/web\/#organization","name":"Intouch Software Solutions","url":"https:\/\/intouch.my.id\/web\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/intouch.my.id\/web\/#\/schema\/logo\/image\/","url":"https:\/\/intouch.my.id\/web\/wp-content\/uploads\/2026\/10\/cropped-Logo-Intouch.jpg","contentUrl":"https:\/\/intouch.my.id\/web\/wp-content\/uploads\/2026\/10\/cropped-Logo-Intouch.jpg","width":1149,"height":496,"caption":"Intouch Software Solutions"},"image":{"@id":"https:\/\/intouch.my.id\/web\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/adhitya1978","https:\/\/www.instagram.com\/arksolution.id\/"]}]}},"_links":{"self":[{"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/pages\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/comments?post=88"}],"version-history":[{"count":16,"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/pages\/88\/revisions"}],"predecessor-version":[{"id":126,"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/pages\/88\/revisions\/126"}],"up":[{"embeddable":true,"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/pages\/86"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/media\/117"}],"wp:attachment":[{"href":"https:\/\/intouch.my.id\/web\/wp-json\/wp\/v2\/media?parent=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}