{"id":3866,"date":"2026-02-09T18:18:25","date_gmt":"2026-02-09T11:18:25","guid":{"rendered":"https:\/\/makmuramanah.co.id\/?page_id=3866"},"modified":"2026-02-09T18:18:25","modified_gmt":"2026-02-09T11:18:25","slug":"our-catalogue","status":"publish","type":"page","link":"https:\/\/makmuramanah.co.id\/ar\/our-catalogue\/","title":{"rendered":"Our Catalogue"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<!-- \r\n    MAS Group - Products Catalog Page (Static Design + Dynamic Grid)\r\n    \r\n    INSTRUCTIONS:\r\n    1. Copy this code.\r\n    2. Go to Pages -> Products -> Edit with WPBakery.\r\n    3. Replace the content of your \"Raw HTML\" block with this.\r\n-->\r\n\r\n<div class=\"bg-background-light dark:bg-background-dark min-h-screen pt-44 pb-12\">\r\n    <div class=\"container mx-auto px-6 flex flex-col lg:flex-row gap-8\">\r\n        <!-- Sidebar -->\r\n        <aside class=\"w-full lg:w-64 flex-shrink-0 space-y-8\">\r\n            <div class=\"relative\">\r\n                <input id=\"product-search\"\r\n                    class=\"w-full pl-10 pr-4 py-3 bg-white dark:bg-surface-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm shadow-sm\"\r\n                    placeholder=\"Search products...\" type=\"text\" \/>\r\n                <span class=\"material-icons-outlined absolute left-3 top-3 text-gray-400\">search<\/span>\r\n            <\/div>\r\n            <div\r\n                class=\"bg-white dark:bg-surface-dark p-6 rounded-xl shadow-sm border border-gray-100 dark:border-gray-800\">\r\n                <h3 class=\"font-semibold text-lg mb-4 text-text-light dark:text-white border-b pb-2\">Categories<\/h3>\r\n                <div class=\"space-y-3\" id=\"category-filters\">\r\n                    <label class=\"flex items-center gap-3 cursor-pointer\"><input checked value=\"all\"\r\n                            class=\"form-checkbox h-4 w-4 text-primary rounded category-filter\" type=\"checkbox\" \/><span\r\n                            class=\"text-gray-600 dark:text-gray-300\">All Products<\/span><\/label>\r\n                    <label class=\"flex items-center gap-3 cursor-pointer\"><input value=\"raw-material\"\r\n                            class=\"form-checkbox h-4 w-4 text-primary rounded category-filter\" type=\"checkbox\" \/><span\r\n                            class=\"text-gray-600 dark:text-gray-300\">Raw Materials<\/span><\/label>\r\n                    <label class=\"flex items-center gap-3 cursor-pointer\"><input value=\"animal-feed\"\r\n                            class=\"form-checkbox h-4 w-4 text-primary rounded category-filter\" type=\"checkbox\" \/><span\r\n                            class=\"text-gray-600 dark:text-gray-300\">Animal Feed<\/span><\/label>\r\n                    <label class=\"flex items-center gap-3 cursor-pointer\"><input value=\"bio-energy\"\r\n                            class=\"form-checkbox h-4 w-4 text-primary rounded category-filter\" type=\"checkbox\" \/><span\r\n                            class=\"text-gray-600 dark:text-gray-300\">Bio Energy<\/span><\/label>\r\n                    <label class=\"flex items-center gap-3 cursor-pointer\"><input value=\"other\"\r\n                            class=\"form-checkbox h-4 w-4 text-primary rounded category-filter\" type=\"checkbox\" \/><span\r\n                            class=\"text-gray-600 dark:text-gray-300\">Other<\/span><\/label>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"bg-gradient-to-br from-primary to-primary-dark rounded-xl p-6 text-white shadow-lg\">\r\n                <h4 class=\"font-semibold text-xl mb-2\">Product Catalog<\/h4>\r\n                <p class=\"text-white\/80 text-sm mb-4\">Download our complete specification sheet.<\/p>\r\n                <button id=\"download-catalog\"\r\n                    class=\"w-full bg-white text-primary font-semibold py-2.5 px-4 rounded-lg flex items-center justify-center gap-2 hover:bg-gray-50 transition\">\r\n                    <span class=\"material-icons-outlined text-lg\">download<\/span> Download PDF\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <!-- Need Assistance Widget -->\r\n            <div\r\n                class=\"bg-white dark:bg-surface-dark p-6 rounded-xl shadow-sm border border-gray-100 dark:border-gray-800\">\r\n                <h4 class=\"font-bold text-sm uppercase tracking-wider text-gray-500 mb-4\">Need Assistance?<\/h4>\r\n                <ul class=\"space-y-3\">\r\n                    <li class=\"flex items-center gap-3\">\r\n                        <div class=\"w-8 h-8 rounded-full bg-green-50 flex items-center justify-center text-primary\">\r\n                            <span class=\"material-icons-outlined text-sm\">call<\/span>\r\n                        <\/div>\r\n                        <span class=\"text-sm font-semibold text-gray-700 dark:text-gray-200\">+62 821-4000-2198<\/span>\r\n                    <\/li>\r\n                    <li class=\"flex items-center gap-3\">\r\n                        <div class=\"w-8 h-8 rounded-full bg-green-50 flex items-center justify-center text-primary\">\r\n                            <span class=\"material-icons-outlined text-sm\">email<\/span>\r\n                        <\/div>\r\n                        <span class=\"text-sm font-semibold text-gray-700 dark:text-gray-200\">sales@masgroup.com<\/span>\r\n                    <\/li>\r\n                <\/ul>\r\n            <\/div>\r\n        <\/aside>\r\n\r\n        <!-- Main Content -->\r\n        <section class=\"flex-1\">\r\n            <div class=\"flex flex-col md:flex-row md:items-end justify-between mb-8 gap-4\">\r\n                <div>\r\n                    <h1 class=\"text-4xl font-bold text-text-light dark:text-white mb-2\">Our Products<\/h1>\r\n                    <p class=\"text-text-muted-light dark:text-text-muted-dark max-w-xl\">Premium quality palm derivatives\r\n                        for global industries.<\/p>\r\n                <\/div>\r\n                <select id=\"product-sort\"\r\n                    class=\"bg-white dark:bg-surface-dark border rounded-lg py-2 px-3 text-sm focus:ring-primary focus:border-primary\">\r\n                    <option value=\"featured\">Featured<\/option>\r\n                    <option value=\"name\">Name (A-Z)<\/option>\r\n                <\/select>\r\n            <\/div>\r\n\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\" id=\"products-grid\">\r\n                <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 items-start relative z-20\">            <div class=\"group relative h-[500px] rounded-2xl overflow-hidden cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300\">\r\n                <img decoding=\"async\" src=\"https:\/\/makmuramanah.co.id\/wp-content\/uploads\/2026\/02\/RBD-Palm-Oil-3-1-1024x559.png\"\r\n                    class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-700\">\r\n                <div class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/40 to-transparent\"><\/div>\r\n                <div class=\"absolute bottom-0 left-0 p-8 w-full\">\r\n                    <h3 class=\"text-3xl font-display font-bold text-white mb-1\">\r\n                        RBD CP8                    <\/h3>\r\n                                        <a href=\"https:\/\/makmuramanah.co.id\/ar\/products\/rbd-cp8\/\"\r\n                        class=\"inline-flex items-center gap-2 bg-primary hover:bg-white hover:text-primary text-white font-bold py-2 px-6 rounded-full transition-colors text-sm mt-4\">Learn\r\n                        More <span class=\"material-icons-outlined text-sm\">arrow_forward<\/span><\/a>\r\n                <\/div>\r\n            <\/div>\r\n                        <div class=\"group relative h-[500px] rounded-2xl overflow-hidden cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300\">\r\n                <img decoding=\"async\" src=\"\"\r\n                    class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-700\">\r\n                <div class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/40 to-transparent\"><\/div>\r\n                <div class=\"absolute bottom-0 left-0 p-8 w-full\">\r\n                    <h3 class=\"text-3xl font-display font-bold text-white mb-1\">\r\n                        Calcium salts of palm oil fatty acids (CSPFA)                    <\/h3>\r\n                                        <a href=\"https:\/\/makmuramanah.co.id\/ar\/products\/calcium-salts-of-palm-oil-fatty-acids\/\"\r\n                        class=\"inline-flex items-center gap-2 bg-primary hover:bg-white hover:text-primary text-white font-bold py-2 px-6 rounded-full transition-colors text-sm mt-4\">Learn\r\n                        More <span class=\"material-icons-outlined text-sm\">arrow_forward<\/span><\/a>\r\n                <\/div>\r\n            <\/div>\r\n                        <div class=\"group relative h-[500px] rounded-2xl overflow-hidden cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300\">\r\n                <img decoding=\"async\" src=\"https:\/\/makmuramanah.co.id\/wp-content\/uploads\/2026\/02\/Cocopeat-1-1-1024x559.png\"\r\n                    class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-700\">\r\n                <div class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/40 to-transparent\"><\/div>\r\n                <div class=\"absolute bottom-0 left-0 p-8 w-full\">\r\n                    <h3 class=\"text-3xl font-display font-bold text-white mb-1\">\r\n                        Cocopeat                    <\/h3>\r\n                                        <a href=\"https:\/\/makmuramanah.co.id\/ar\/products\/cocopeat\/\"\r\n                        class=\"inline-flex items-center gap-2 bg-primary hover:bg-white hover:text-primary text-white font-bold py-2 px-6 rounded-full transition-colors text-sm mt-4\">Learn\r\n                        More <span class=\"material-icons-outlined text-sm\">arrow_forward<\/span><\/a>\r\n                <\/div>\r\n            <\/div>\r\n            <\/div>\r\n            <\/div>\r\n\r\n            <!-- Pagination (Visual Only for now) -->\r\n            <div class=\"mt-12 flex justify-center\">\r\n                <nav class=\"inline-flex rounded-md shadow-sm\">\r\n                    <a class=\"px-4 py-2 text-sm font-semibold text-gray-500 border rounded-l-md hover:bg-gray-50\"\r\n                        href=\"#\">&lt; Previous<\/a>\r\n                    <a class=\"px-4 py-2 text-sm font-semibold text-white bg-primary\" href=\"#\">1<\/a>\r\n                    <a class=\"px-4 py-2 text-sm font-semibold text-gray-900 border hover:bg-gray-50\" href=\"#\">2<\/a>\r\n                    <a class=\"px-4 py-2 text-sm font-semibold text-gray-500 border rounded-r-md hover:bg-gray-50\"\r\n                        href=\"#\">Next &gt;<\/a>\r\n                <\/nav>\r\n            <\/div>\r\n        <\/section>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', function () {\r\n        const searchInput = document.getElementById('product-search');\r\n        const filters = document.querySelectorAll('.category-filter');\r\n        const sortSelect = document.getElementById('product-sort');\r\n        const grid = document.getElementById('products-grid');\r\n        const downloadBtn = document.getElementById('download-catalog');\r\n\r\n        function getItems() {\r\n            return document.querySelectorAll('.product-item');\r\n        }\r\n\r\n        \/\/ Store original order for 'featured' sort if possible, \r\n        \/\/ but items are dynamic, so we just grab them on load.\r\n        let originalOrder = [];\r\n\r\n        \/\/ Wait a tick for shortcode to render if needed (usually synchronous in PHP output)\r\n        if (grid) {\r\n            originalOrder = Array.from(grid.children);\r\n        }\r\n\r\n        function filterProducts() {\r\n            const items = getItems();\r\n            const searchTerm = searchInput.value.toLowerCase();\r\n            const checkedCategories = Array.from(filters)\r\n                .filter(f => f.checked && f.value !== 'all')\r\n                .map(f => f.value);\r\n\r\n            const showAll = Array.from(filters).find(f => f.value === 'all').checked;\r\n\r\n            items.forEach(item => {\r\n                const title = item.getAttribute('data-title').toLowerCase();\r\n                const category = item.getAttribute('data-category');\r\n\r\n                const matchesSearch = title.includes(searchTerm);\r\n                const matchesCategory = showAll || checkedCategories.length === 0 || checkedCategories.includes(category);\r\n\r\n                if (matchesSearch && matchesCategory) {\r\n                    item.style.display = '';\r\n                } else {\r\n                    item.style.display = 'none';\r\n                }\r\n            });\r\n        }\r\n\r\n        function sortProducts() {\r\n            const items = Array.from(grid.children); \/\/ Get current children (some might be hidden)\r\n            const sortValue = sortSelect.value;\r\n\r\n            items.sort((a, b) => {\r\n                if (sortValue === 'name') {\r\n                    const titleA = a.getAttribute('data-title').toLowerCase();\r\n                    const titleB = b.getAttribute('data-title').toLowerCase();\r\n                    return titleA.localeCompare(titleB);\r\n                } else {\r\n                    \/\/ Featured - Restore original index if we can find it\r\n                    const indexA = originalOrder.indexOf(a);\r\n                    const indexB = originalOrder.indexOf(b);\r\n                    return indexA - indexB;\r\n                }\r\n            });\r\n\r\n            items.forEach(item => grid.appendChild(item));\r\n        }\r\n\r\n        if (searchInput) searchInput.addEventListener('input', filterProducts);\r\n\r\n        if (filters.length > 0) {\r\n            filters.forEach(filter => {\r\n                filter.addEventListener('change', function (e) {\r\n                    if (e.target.value === 'all' && e.target.checked) {\r\n                        filters.forEach(f => { if (f !== e.target) f.checked = false; });\r\n                    } else if (e.target.checked) {\r\n                        const allCheckbox = Array.from(filters).find(f => f.value === 'all');\r\n                        if (allCheckbox) allCheckbox.checked = false;\r\n                    }\r\n                    const anyChecked = Array.from(filters).some(f => f.checked);\r\n                    if (!anyChecked) {\r\n                        const allCheckbox = Array.from(filters).find(f => f.value === 'all');\r\n                        if (allCheckbox) allCheckbox.checked = true;\r\n                    }\r\n                    filterProducts();\r\n                });\r\n            });\r\n        }\r\n\r\n        if (sortSelect) sortSelect.addEventListener('change', sortProducts);\r\n\r\n        if (downloadBtn) {\r\n            downloadBtn.addEventListener('click', function () {\r\n                alert('Thank you! The catalog PDF is downloading...');\r\n            });\r\n        }\r\n    });\r\n<\/script>\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"&#x1f4d1; Table of Contents What Is Cocopeat? How Is Cocopeat Made? Production Process Explained Cocopeat Specifications &amp; Quality Parameters 12 Amazing Benefits of Cocopeat for Plants &amp; Agriculture Cocopeat vs. Peat Moss vs. Perlite: Which Is Best? Applications: From Horticulture to Industrial Uses Global Cocopeat Market Overview 2026 How to Choose a Reliable Cocopeat Supplier [...]","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","_joinchat":[],"footnotes":""},"class_list":["post-3866","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/makmuramanah.co.id\/ar\/wp-json\/wp\/v2\/pages\/3866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/makmuramanah.co.id\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/makmuramanah.co.id\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/makmuramanah.co.id\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/makmuramanah.co.id\/ar\/wp-json\/wp\/v2\/comments?post=3866"}],"version-history":[{"count":2,"href":"https:\/\/makmuramanah.co.id\/ar\/wp-json\/wp\/v2\/pages\/3866\/revisions"}],"predecessor-version":[{"id":3868,"href":"https:\/\/makmuramanah.co.id\/ar\/wp-json\/wp\/v2\/pages\/3866\/revisions\/3868"}],"wp:attachment":[{"href":"https:\/\/makmuramanah.co.id\/ar\/wp-json\/wp\/v2\/media?parent=3866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}