{"id":29171,"date":"2026-01-14T00:03:15","date_gmt":"2026-01-14T00:03:15","guid":{"rendered":"https:\/\/ploko.nl\/?page_id=29171"},"modified":"2026-02-11T17:07:33","modified_gmt":"2026-02-11T17:07:33","slug":"platform-demo","status":"publish","type":"page","link":"https:\/\/staging.ploko.nl\/en\/platform-demo\/","title":{"rendered":"Platform demo"},"content":{"rendered":"\n<!-- \n    PLOKO DEMO PAGE\n    Plaats deze content in een Elementor HTML widget of custom page\n-->\n\n<style>\n\/* ============================================\n   SCOPED STYLES - Alleen binnen .ploko-demo\n   Geen invloed op Elementor elementen\n   ============================================ *\/\n\n\/* Container reset - NIET global *\/\n.ploko-demo {\n    all: initial !important;\n    display: block !important;\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;\n    background: linear-gradient(135deg, #0a0118 0%, #1a0a2e 50%, #2d1b4e 100%) !important;\n    color: #fff !important;\n    padding: 60px 20px !important;\n    position: relative !important;\n    overflow: hidden !important;\n    line-height: 1.5 !important;\n}\n\n\/* Reset alleen children van .ploko-demo *\/\n.ploko-demo *,\n.ploko-demo *::before,\n.ploko-demo *::after {\n    box-sizing: border-box !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    font-family: inherit !important;\n    line-height: inherit !important;\n}\n\n\/* Variables *\/\n.ploko-demo { --p: #8b5cf6; --p2: #7c3aed; --a: #ec4899; --g: #10b981; --w: #f59e0b; }\n\n\/* Glow effects *\/\n.ploko-demo::before { content: '' !important; position: absolute !important; top: -200px !important; right: -200px !important; width: 500px !important; height: 500px !important; background: radial-gradient(circle, rgba(139,92,246,0.3), transparent 70%) !important; pointer-events: none !important; z-index: 0 !important; }\n.ploko-demo::after { content: '' !important; position: absolute !important; bottom: -200px !important; left: -200px !important; width: 400px !important; height: 400px !important; background: radial-gradient(circle, rgba(236,72,153,0.2), transparent 70%) !important; pointer-events: none !important; z-index: 0 !important; }\n\n.ploko-demo .pd-wrap { max-width: 1200px !important; margin: 0 auto !important; position: relative !important; z-index: 1 !important; }\n\n\/* ============ HERO ============ *\/\n.ploko-demo .pd-hero { text-align: center !important; margin-bottom: 60px !important; }\n.ploko-demo .pd-hero h1 { \n    font-size: clamp(32px, 5vw, 56px) !important; \n    font-weight: 800 !important; \n    line-height: 1.1 !important; \n    margin-bottom: 20px !important; \n    background: linear-gradient(135deg, #fff 0%, #c4b5fd 100%) !important; \n    -webkit-background-clip: text !important; \n    -webkit-text-fill-color: transparent !important;\n    background-clip: text !important;\n}\n.ploko-demo .pd-hero p { font-size: 18px !important; color: rgba(255,255,255,0.7) !important; max-width: 600px !important; margin: 0 auto 30px !important; line-height: 1.6 !important; }\n.ploko-demo .pd-cta { \n    display: inline-flex !important; \n    align-items: center !important; \n    gap: 10px !important; \n    background: linear-gradient(135deg, var(--p), var(--p2)) !important; \n    color: #fff !important; \n    padding: 16px 32px !important; \n    border-radius: 12px !important; \n    font-weight: 700 !important; \n    font-size: 16px !important; \n    text-decoration: none !important; \n    box-shadow: 0 4px 20px rgba(139,92,246,0.4) !important; \n    transition: transform 0.2s, box-shadow 0.2s !important; \n    cursor: pointer !important; \n    border: none !important; \n}\n.ploko-demo .pd-cta:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 30px rgba(139,92,246,0.5) !important; }\n\n\/* ============ DASHBOARD ============ *\/\n.ploko-demo .pd-dashboard { background: rgba(255,255,255,0.02) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important; }\n\n\/* Browser bar *\/\n.ploko-demo .pd-browser { background: rgba(0,0,0,0.3) !important; padding: 12px 16px !important; display: flex !important; align-items: center !important; gap: 12px !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }\n.ploko-demo .pd-dots { display: flex !important; gap: 6px !important; }\n.ploko-demo .pd-dot { width: 10px !important; height: 10px !important; border-radius: 50% !important; }\n.ploko-demo .pd-dot.r { background: #ff5f57 !important; }\n.ploko-demo .pd-dot.y { background: #febc2e !important; }\n.ploko-demo .pd-dot.g { background: #28c840 !important; }\n.ploko-demo .pd-url { flex: 1 !important; background: rgba(255,255,255,0.05) !important; padding: 6px 14px !important; border-radius: 6px !important; font-size: 12px !important; color: rgba(255,255,255,0.5) !important; font-family: monospace !important; }\n\n\/* Dashboard content *\/\n.ploko-demo .pd-content { padding: 20px !important; }\n\n\/* Tabs *\/\n.ploko-demo .pd-tabs { display: flex !important; gap: 4px !important; margin-bottom: 20px !important; background: rgba(255,255,255,0.03) !important; padding: 4px !important; border-radius: 10px !important; overflow-x: auto !important; }\n.ploko-demo .pd-tab { \n    padding: 10px 14px !important; \n    border-radius: 8px !important; \n    font-size: 13px !important; \n    font-weight: 600 !important; \n    color: rgba(255,255,255,0.5) !important; \n    cursor: pointer !important; \n    white-space: nowrap !important; \n    transition: all 0.2s !important; \n    background: transparent !important; \n    border: none !important; \n}\n.ploko-demo .pd-tab:hover { color: rgba(255,255,255,0.8) !important; background: rgba(255,255,255,0.03) !important; }\n.ploko-demo .pd-tab.active { background: linear-gradient(135deg, var(--p), var(--p2)) !important; color: #fff !important; }\n\n\/* Tab Panels *\/\n.ploko-demo .pd-panel { display: none !important; animation: pdFadeIn 0.3s ease !important; }\n.ploko-demo .pd-panel.active { display: block !important; }\n@keyframes pdFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n\n\/* Stats *\/\n.ploko-demo .pd-stats { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; margin-bottom: 20px !important; }\n.ploko-demo .pd-stat { background: rgba(255,255,255,0.02) !important; border: 1px solid rgba(255,255,255,0.05) !important; border-radius: 12px !important; padding: 16px !important; text-align: center !important; transition: all 0.2s !important; }\n.ploko-demo .pd-stat:hover { transform: translateY(-2px) !important; border-color: rgba(139,92,246,0.3) !important; }\n.ploko-demo .pd-stat-val { font-size: 28px !important; font-weight: 800 !important; margin-bottom: 4px !important; color: #fff !important; }\n.ploko-demo .pd-stat-val.purple { color: var(--p) !important; }\n.ploko-demo .pd-stat-val.orange { color: var(--w) !important; }\n.ploko-demo .pd-stat-val.green { color: var(--g) !important; }\n.ploko-demo .pd-stat-label { font-size: 11px !important; color: rgba(255,255,255,0.5) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }\n\n\/* Items *\/\n.ploko-demo .pd-items { display: flex !important; flex-direction: column !important; gap: 10px !important; }\n.ploko-demo .pd-item { \n    background: rgba(255,255,255,0.02) !important; \n    border: 1px solid rgba(255,255,255,0.05) !important; \n    border-radius: 12px !important; \n    padding: 14px 16px !important; \n    display: flex !important; \n    align-items: center !important; \n    gap: 12px !important; \n    cursor: pointer !important; \n    transition: all 0.2s !important; \n}\n.ploko-demo .pd-item:hover { background: rgba(255,255,255,0.04) !important; border-color: rgba(139,92,246,0.3) !important; transform: translateX(4px) !important; }\n.ploko-demo .pd-item.selected { border-color: var(--p) !important; background: rgba(139,92,246,0.1) !important; }\n.ploko-demo .pd-icon { width: 40px !important; height: 40px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; flex-shrink: 0 !important; }\n.ploko-demo .pd-icon.ig { background: linear-gradient(135deg, #833AB4, #E1306C, #F77737) !important; }\n.ploko-demo .pd-icon.li { background: #0077B5 !important; }\n.ploko-demo .pd-icon.web { background: linear-gradient(135deg, #667eea, #764ba2) !important; }\n.ploko-demo .pd-icon.topic { background: linear-gradient(135deg, var(--p), var(--a)) !important; }\n.ploko-demo .pd-item-info { flex: 1 !important; min-width: 0 !important; }\n.ploko-demo .pd-item-title { font-size: 14px !important; font-weight: 600 !important; color: #fff !important; margin-bottom: 2px !important; }\n.ploko-demo .pd-item-meta { font-size: 12px !important; color: rgba(255,255,255,0.5) !important; }\n.ploko-demo .pd-status { padding: 4px 10px !important; border-radius: 20px !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; }\n.ploko-demo .pd-status.ready { background: rgba(16,185,129,0.2) !important; color: #34d399 !important; }\n.ploko-demo .pd-status.planned { background: rgba(59,130,246,0.2) !important; color: #60a5fa !important; }\n.ploko-demo .pd-status.live { background: rgba(139,92,246,0.2) !important; color: #a78bfa !important; }\n.ploko-demo .pd-status.active { background: rgba(16,185,129,0.2) !important; color: #34d399 !important; }\n\n\/* Preview Panel *\/\n.ploko-demo .pd-preview { display: none !important; margin-top: 16px !important; background: rgba(0,0,0,0.2) !important; border-radius: 12px !important; padding: 16px !important; animation: pdFadeIn 0.3s ease !important; }\n.ploko-demo .pd-preview.show { display: block !important; }\n.ploko-demo .pd-preview-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 12px !important; padding-bottom: 12px !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }\n.ploko-demo .pd-preview-title { font-size: 14px !important; font-weight: 600 !important; color: #fff !important; }\n.ploko-demo .pd-preview-close { background: none !important; border: none !important; color: rgba(255,255,255,0.5) !important; cursor: pointer !important; font-size: 18px !important; padding: 4px !important; }\n.ploko-demo .pd-preview-body { font-size: 13px !important; color: rgba(255,255,255,0.7) !important; line-height: 1.6 !important; }\n.ploko-demo .pd-preview-actions { display: flex !important; gap: 8px !important; margin-top: 12px !important; }\n.ploko-demo .pd-btn { padding: 8px 16px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 600 !important; border: none !important; cursor: pointer !important; transition: all 0.2s !important; }\n.ploko-demo .pd-btn-primary { background: var(--p) !important; color: #fff !important; }\n.ploko-demo .pd-btn-primary:hover { background: var(--p2) !important; }\n.ploko-demo .pd-btn-secondary { background: rgba(255,255,255,0.1) !important; color: #fff !important; }\n.ploko-demo .pd-btn-secondary:hover { background: rgba(255,255,255,0.15) !important; }\n\n\/* Topic form *\/\n.ploko-demo .pd-form { background: rgba(255,255,255,0.02) !important; border: 1px solid rgba(255,255,255,0.05) !important; border-radius: 12px !important; padding: 16px !important; margin-bottom: 16px !important; }\n.ploko-demo .pd-form-row { display: flex !important; gap: 10px !important; }\n.ploko-demo .pd-input { flex: 1 !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 8px !important; padding: 12px 14px !important; color: #fff !important; font-size: 14px !important; outline: none !important; }\n.ploko-demo .pd-input::placeholder { color: rgba(255,255,255,0.4) !important; }\n.ploko-demo .pd-input:focus { border-color: var(--p) !important; }\n\n\/* Calendar grid *\/\n.ploko-demo .pd-calendar { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 4px !important; }\n.ploko-demo .pd-cal-header { font-size: 11px !important; font-weight: 600 !important; color: rgba(255,255,255,0.5) !important; text-align: center !important; padding: 8px 0 !important; }\n.ploko-demo .pd-cal-day { background: rgba(255,255,255,0.02) !important; border: 1px solid rgba(255,255,255,0.05) !important; border-radius: 8px !important; padding: 8px !important; min-height: 60px !important; font-size: 12px !important; color: rgba(255,255,255,0.6) !important; }\n.ploko-demo .pd-cal-day.has-content { border-color: var(--p) !important; }\n.ploko-demo .pd-cal-day.has-content::after { content: '\u2022' !important; color: var(--p) !important; font-size: 18px !important; display: block !important; text-align: center !important; margin-top: 4px !important; }\n.ploko-demo .pd-cal-day.today { background: rgba(139,92,246,0.1) !important; border-color: var(--p) !important; }\n\n\/* Media grid *\/\n.ploko-demo .pd-media-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; }\n.ploko-demo .pd-media-item { aspect-ratio: 1 !important; background: rgba(255,255,255,0.05) !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 24px !important; cursor: pointer !important; transition: all 0.2s !important; border: 2px solid transparent !important; }\n.ploko-demo .pd-media-item:hover { border-color: var(--p) !important; transform: scale(1.02) !important; }\n.ploko-demo .pd-media-item.selected { border-color: var(--g) !important; }\n.ploko-demo .pd-media-item.selected::after { content: '\u2713' !important; position: absolute !important; background: var(--g) !important; color: #fff !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; font-size: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; top: 4px !important; right: 4px !important; }\n.ploko-demo .pd-media-item { position: relative !important; }\n\n\/* Publish list *\/\n.ploko-demo .pd-publish-item { display: flex !important; align-items: center !important; gap: 12px !important; background: rgba(255,255,255,0.02) !important; border: 1px solid rgba(255,255,255,0.05) !important; border-radius: 12px !important; padding: 14px !important; margin-bottom: 10px !important; }\n.ploko-demo .pd-checkbox { width: 20px !important; height: 20px !important; border: 2px solid rgba(255,255,255,0.3) !important; border-radius: 6px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; transition: all 0.2s !important; background: transparent !important; }\n.ploko-demo .pd-checkbox.checked { background: var(--g) !important; border-color: var(--g) !important; color: #fff !important; }\n\n\/* ============ FEATURES ============ *\/\n.ploko-demo .pd-features { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; margin-top: 60px !important; }\n.ploko-demo .pd-feature { background: rgba(255,255,255,0.02) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 16px !important; padding: 24px !important; transition: all 0.3s !important; }\n.ploko-demo .pd-feature:hover { transform: translateY(-4px) !important; border-color: rgba(139,92,246,0.3) !important; }\n.ploko-demo .pd-feature-icon { font-size: 32px !important; margin-bottom: 12px !important; }\n.ploko-demo .pd-feature h3 { font-size: 16px !important; font-weight: 700 !important; margin-bottom: 8px !important; color: #fff !important; }\n.ploko-demo .pd-feature p { font-size: 14px !important; color: rgba(255,255,255,0.6) !important; line-height: 1.5 !important; }\n\n\/* ============ WORKFLOW ============ *\/\n.ploko-demo .pd-workflow { margin-top: 60px !important; text-align: center !important; }\n.ploko-demo .pd-workflow h2 { font-size: 28px !important; font-weight: 800 !important; margin-bottom: 40px !important; color: #fff !important; }\n.ploko-demo .pd-steps { display: flex !important; justify-content: center !important; gap: 24px !important; flex-wrap: wrap !important; }\n.ploko-demo .pd-step { flex: 1 !important; min-width: 200px !important; max-width: 280px !important; }\n.ploko-demo .pd-step-num { width: 48px !important; height: 48px !important; background: linear-gradient(135deg, var(--p), var(--a)) !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 20px !important; font-weight: 800 !important; margin: 0 auto 16px !important; color: #fff !important; }\n.ploko-demo .pd-step h4 { font-size: 16px !important; font-weight: 700 !important; margin-bottom: 8px !important; color: #fff !important; }\n.ploko-demo .pd-step p { font-size: 13px !important; color: rgba(255,255,255,0.6) !important; line-height: 1.5 !important; }\n\n\/* ============ FINAL CTA ============ *\/\n.ploko-demo .pd-final-cta { margin-top: 60px !important; text-align: center !important; padding: 40px !important; background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(236,72,153,0.1)) !important; border-radius: 20px !important; border: 1px solid rgba(139,92,246,0.2) !important; }\n.ploko-demo .pd-final-cta h2 { font-size: 24px !important; font-weight: 800 !important; margin-bottom: 12px !important; color: #fff !important; }\n.ploko-demo .pd-final-cta p { color: rgba(255,255,255,0.7) !important; margin-bottom: 24px !important; }\n\n\/* ============ RESPONSIVE ============ *\/\n@media (max-width: 768px) {\n    .ploko-demo .pd-stats { grid-template-columns: repeat(2, 1fr) !important; }\n    .ploko-demo .pd-features { grid-template-columns: 1fr !important; }\n    .ploko-demo .pd-steps { flex-direction: column !important; align-items: center !important; }\n    .ploko-demo .pd-stat-val { font-size: 22px !important; }\n    .ploko-demo .pd-media-grid { grid-template-columns: repeat(3, 1fr) !important; }\n    .ploko-demo .pd-calendar { grid-template-columns: repeat(7, 1fr) !important; }\n    .ploko-demo .pd-cal-day { min-height: 40px !important; padding: 4px !important; }\n}\n<\/style>\n\n<div class=\"ploko-demo\">\n    <div class=\"pd-wrap\">\n        <!-- Hero -->\n        <div class=\"pd-hero\">\n            <h1>Automatische content<br>voor al je kanalen<\/h1>\n            <p>Kies je onderwerpen, en Ploko genereert automatisch blog artikelen, Instagram posts en LinkedIn content. Alles SEO-geoptimaliseerd.<\/p>\n            <a href=\"https:\/\/app.ploko.nl\/login\" class=\"pd-cta\">\ud83d\ude80 Gratis starten<\/a>\n        <\/div>\n\n        <!-- Interactive Dashboard Preview -->\n        <div class=\"pd-dashboard\">\n            <div class=\"pd-browser\">\n                <div class=\"pd-dots\">\n                    <div class=\"pd-dot r\"><\/div>\n                    <div class=\"pd-dot y\"><\/div>\n                    <div class=\"pd-dot g\"><\/div>\n                <\/div>\n                <div class=\"pd-url\">app.ploko.nl\/dashboard<\/div>\n            <\/div>\n            <div class=\"pd-content\">\n                <!-- Tabs -->\n                <div class=\"pd-tabs\">\n                    <button class=\"pd-tab active\" data-tab=\"overzicht\">\ud83d\udcca Overzicht<\/button>\n                    <button class=\"pd-tab\" data-tab=\"onderwerpen\">\ud83d\udca1 Onderwerpen<\/button>\n                    <button class=\"pd-tab\" data-tab=\"content\">\ud83d\udcdd Content<\/button>\n                    <button class=\"pd-tab\" data-tab=\"planning\">\ud83d\udcc5 Planning<\/button>\n                    <button class=\"pd-tab\" data-tab=\"media\">\ud83d\uddbc\ufe0f Media<\/button>\n                    <button class=\"pd-tab\" data-tab=\"publiceren\">\ud83d\ude80 Publiceren<\/button>\n                <\/div>\n\n                <!-- Panel: Overzicht -->\n                <div class=\"pd-panel active\" data-panel=\"overzicht\">\n                    <div class=\"pd-stats\">\n                        <div class=\"pd-stat\">\n                            <div class=\"pd-stat-val purple\" id=\"stat1\">0<\/div>\n                            <div class=\"pd-stat-label\">Ingepland<\/div>\n                        <\/div>\n                        <div class=\"pd-stat\">\n                            <div class=\"pd-stat-val orange\" id=\"stat2\">0<\/div>\n                            <div class=\"pd-stat-label\">In productie<\/div>\n                        <\/div>\n                        <div class=\"pd-stat\">\n                            <div class=\"pd-stat-val green\" id=\"stat3\">0<\/div>\n                            <div class=\"pd-stat-label\">Klaar<\/div>\n                        <\/div>\n                        <div class=\"pd-stat\">\n                            <div class=\"pd-stat-val\" id=\"stat4\">0<\/div>\n                            <div class=\"pd-stat-label\">Gepubliceerd<\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"pd-items\">\n                        <div class=\"pd-item\" data-preview=\"ig\">\n                            <div class=\"pd-icon ig\">\ud83d\udcf8<\/div>\n                            <div class=\"pd-item-info\">\n                                <div class=\"pd-item-title\">5 tips voor meer website bezoekers<\/div>\n                                <div class=\"pd-item-meta\">Instagram \u2022 Carousel \u2022 Vandaag 14:00<\/div>\n                            <\/div>\n                            <div class=\"pd-status ready\">Klaar<\/div>\n                        <\/div>\n                        <div class=\"pd-item\" data-preview=\"web\">\n                            <div class=\"pd-icon web\">\ud83c\udf10<\/div>\n                            <div class=\"pd-item-info\">\n                                <div class=\"pd-item-title\">Complete gids: Zonnepanelen in 2024<\/div>\n                                <div class=\"pd-item-meta\">Website \u2022 Blog \u2022 2.450 woorden<\/div>\n                            <\/div>\n                            <div class=\"pd-status planned\">Gepland<\/div>\n                        <\/div>\n                        <div class=\"pd-item\" data-preview=\"li\">\n                            <div class=\"pd-icon li\">\ud83d\udcbc<\/div>\n                            <div class=\"pd-item-info\">\n                                <div class=\"pd-item-title\">Waarom duurzaamheid loont voor je bedrijf<\/div>\n                                <div class=\"pd-item-meta\">LinkedIn \u2022 Artikel \u2022 Gisteren<\/div>\n                            <\/div>\n                            <div class=\"pd-status live\">Live<\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"pd-preview\" id=\"preview\">\n                        <div class=\"pd-preview-header\">\n                            <span class=\"pd-preview-title\">\ud83d\udcf8 Instagram Preview<\/span>\n                            <button class=\"pd-preview-close\" data-close-preview>\u2715<\/button>\n                        <\/div>\n                        <div class=\"pd-preview-body\" id=\"preview-body\"><\/div>\n                        <div class=\"pd-preview-actions\">\n                            <button class=\"pd-btn pd-btn-primary\">\ud83d\ude80 Publiceer nu<\/button>\n                            <button class=\"pd-btn pd-btn-secondary\">\u270f\ufe0f Bewerken<\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Panel: Onderwerpen -->\n                <div class=\"pd-panel\" data-panel=\"onderwerpen\">\n                    <div class=\"pd-form\">\n                        <div class=\"pd-form-row\">\n                            <input type=\"text\" class=\"pd-input\" placeholder=\"Nieuw onderwerp toevoegen, bijv: Duurzame energie\" id=\"topicInput\">\n                            <button class=\"pd-btn pd-btn-primary\" id=\"addTopicBtn\">+ Toevoegen<\/button>\n                        <\/div>\n                    <\/div>\n                    <div class=\"pd-items\" id=\"topicsList\">\n                        <div class=\"pd-item\">\n                            <div class=\"pd-icon topic\">\ud83d\udca1<\/div>\n                            <div class=\"pd-item-info\">\n                                <div class=\"pd-item-title\">Zonnepanelen installatie<\/div>\n                                <div class=\"pd-item-meta\">12 keywords \u2022 8 artikelen \u2022 24 social posts<\/div>\n                            <\/div>\n                            <div class=\"pd-status active\">Actief<\/div>\n                        <\/div>\n                        <div class=\"pd-item\">\n                            <div class=\"pd-icon topic\">\ud83d\udca1<\/div>\n                            <div class=\"pd-item-info\">\n                                <div class=\"pd-item-title\">SEO optimalisatie<\/div>\n                                <div class=\"pd-item-meta\">18 keywords \u2022 5 artikelen \u2022 15 social posts<\/div>\n                            <\/div>\n                            <div class=\"pd-status active\">Actief<\/div>\n                        <\/div>\n                        <div class=\"pd-item\">\n                            <div class=\"pd-icon topic\">\ud83d\udca1<\/div>\n                            <div class=\"pd-item-info\">\n                                <div class=\"pd-item-title\">Email marketing<\/div>\n                                <div class=\"pd-item-meta\">9 keywords \u2022 3 artikelen \u2022 12 social posts<\/div>\n                            <\/div>\n                            <div class=\"pd-status active\">Actief<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Panel: Content -->\n                <div class=\"pd-panel\" data-panel=\"content\">\n                    <div class=\"pd-items\">\n                        <div class=\"pd-item\">\n                            <div class=\"pd-icon web\">\ud83c\udf10<\/div>\n                            <div class=\"pd-item-info\">\n                                <div class=\"pd-item-title\">10 voordelen van zonnepanelen voor particulieren<\/div>\n                                <div class=\"pd-item-meta\">Blog artikel \u2022 1.850 woorden \u2022 SEO score: 92%<\/div>\n                            <\/div>\n                            <div class=\"pd-status ready\">Klaar<\/div>\n                        <\/div>\n                        <div class=\"pd-item\">\n                            <div class=\"pd-icon ig\">\ud83d\udcf8<\/div>\n                            <div class=\"pd-item-info\">\n                                <div class=\"pd-item-title\">Carrousel: Energiebesparing in 5 stappen<\/div>\n                                <div class=\"pd-item-meta\">Instagram \u2022 5 slides \u2022 Afbeeldingen klaar<\/div>\n                            <\/div>\n                            <div class=\"pd-status ready\">Klaar<\/div>\n                        <\/div>\n                        <div class=\"pd-item\">\n                            <div class=\"pd-icon li\">\ud83d\udcbc<\/div>\n                            <div class=\"pd-item-info\">\n                                <div class=\"pd-item-title\">Thought leadership: De toekomst van duurzaam ondernemen<\/div>\n                                <div class=\"pd-item-meta\">LinkedIn \u2022 Long-form \u2022 1.200 woorden<\/div>\n                            <\/div>\n                            <div class=\"pd-status planned\">In productie<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Panel: Planning -->\n                <div class=\"pd-panel\" data-panel=\"planning\">\n                    <div class=\"pd-calendar\">\n                        <div class=\"pd-cal-header\">Ma<\/div>\n                        <div class=\"pd-cal-header\">Di<\/div>\n                        <div class=\"pd-cal-header\">Wo<\/div>\n                        <div class=\"pd-cal-header\">Do<\/div>\n                        <div class=\"pd-cal-header\">Vr<\/div>\n                        <div class=\"pd-cal-header\">Za<\/div>\n                        <div class=\"pd-cal-header\">Zo<\/div>\n                        <div class=\"pd-cal-day\">3<\/div>\n                        <div class=\"pd-cal-day today has-content\">4<\/div>\n                        <div class=\"pd-cal-day has-content\">5<\/div>\n                        <div class=\"pd-cal-day\">6<\/div>\n                        <div class=\"pd-cal-day has-content\">7<\/div>\n                        <div class=\"pd-cal-day\">8<\/div>\n                        <div class=\"pd-cal-day\">9<\/div>\n                        <div class=\"pd-cal-day has-content\">10<\/div>\n                        <div class=\"pd-cal-day\">11<\/div>\n                        <div class=\"pd-cal-day has-content\">12<\/div>\n                        <div class=\"pd-cal-day\">13<\/div>\n                        <div class=\"pd-cal-day\">14<\/div>\n                        <div class=\"pd-cal-day has-content\">15<\/div>\n                        <div class=\"pd-cal-day\">16<\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Panel: Media -->\n                <div class=\"pd-panel\" data-panel=\"media\">\n                    <div class=\"pd-media-grid\">\n                        <div class=\"pd-media-item\">\ud83c\udfe0<\/div>\n                        <div class=\"pd-media-item selected\">\u2600\ufe0f<\/div>\n                        <div class=\"pd-media-item\">\ud83d\udcca<\/div>\n                        <div class=\"pd-media-item\">\ud83d\udcbc<\/div>\n                        <div class=\"pd-media-item\">\ud83c\udf31<\/div>\n                        <div class=\"pd-media-item selected\">\u26a1<\/div>\n                        <div class=\"pd-media-item\">\ud83d\udcf1<\/div>\n                        <div class=\"pd-media-item\">\ud83c\udfaf<\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Panel: Publiceren -->\n                <div class=\"pd-panel\" data-panel=\"publiceren\">\n                    <div class=\"pd-publish-item\">\n                        <div class=\"pd-checkbox checked\" data-checkbox>\u2713<\/div>\n                        <div class=\"pd-icon web\">\ud83c\udf10<\/div>\n                        <div class=\"pd-item-info\">\n                            <div class=\"pd-item-title\">Blog: 10 voordelen van zonnepanelen<\/div>\n                            <div class=\"pd-item-meta\">WordPress \u2022 Publiceer naar website<\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"pd-publish-item\">\n                        <div class=\"pd-checkbox checked\" data-checkbox>\u2713<\/div>\n                        <div class=\"pd-icon ig\">\ud83d\udcf8<\/div>\n                        <div class=\"pd-item-info\">\n                            <div class=\"pd-item-title\">Carrousel: Energiebesparing in 5 stappen<\/div>\n                            <div class=\"pd-item-meta\">Instagram \u2022 Publiceer carousel<\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"pd-publish-item\">\n                        <div class=\"pd-checkbox\" data-checkbox><\/div>\n                        <div class=\"pd-icon li\">\ud83d\udcbc<\/div>\n                        <div class=\"pd-item-info\">\n                            <div class=\"pd-item-title\">LinkedIn artikel nog niet klaar<\/div>\n                            <div class=\"pd-item-meta\">LinkedIn \u2022 Nog in productie<\/div>\n                        <\/div>\n                    <\/div>\n                    <div style=\"margin-top: 16px !important;\">\n                        <button class=\"pd-btn pd-btn-primary\" style=\"width: 100% !important; padding: 14px !important; font-size: 14px !important;\">\ud83d\ude80 Publiceer 2 geselecteerde items<\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Features -->\n        <div class=\"pd-features\">\n            <div class=\"pd-feature\">\n                <div class=\"pd-feature-icon\">\ud83e\udd16<\/div>\n                <h3>AI Content Generatie<\/h3>\n                <p>Professionele teksten op basis van jouw onderwerpen. Blog artikelen, social posts, alles in jouw tone of voice.<\/p>\n            <\/div>\n            <div class=\"pd-feature\">\n                <div class=\"pd-feature-icon\">\ud83d\udcc5<\/div>\n                <h3>Automatische Planning<\/h3>\n                <p>Stel je schema in en laat Ploko automatisch content maken en inplannen. Dagelijks, wekelijks of maandelijks.<\/p>\n            <\/div>\n            <div class=\"pd-feature\">\n                <div class=\"pd-feature-icon\">\ud83d\udd17<\/div>\n                <h3>Direct Publiceren<\/h3>\n                <p>Publiceer met \u00e9\u00e9n klik naar WordPress, Instagram, LinkedIn en meer. Geen copy-paste meer nodig.<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- How it works -->\n        <div class=\"pd-workflow\">\n            <h2>Hoe het werkt<\/h2>\n            <div class=\"pd-steps\">\n                <div class=\"pd-step\">\n                    <div class=\"pd-step-num\">1<\/div>\n                    <h4>Kies onderwerpen<\/h4>\n                    <p>Voeg onderwerpen toe die bij jouw expertise passen. Bijv: &#8220;Zonnepanelen&#8221; of &#8220;SEO tips&#8221;.<\/p>\n                <\/div>\n                <div class=\"pd-step\">\n                    <div class=\"pd-step-num\">2<\/div>\n                    <h4>AI genereert content<\/h4>\n                    <p>De AI maakt automatisch zoekwoorden, artikelen en social posts op basis van je onderwerpen.<\/p>\n                <\/div>\n                <div class=\"pd-step\">\n                    <div class=\"pd-step-num\">3<\/div>\n                    <h4>Publiceer overal<\/h4>\n                    <p>Bekijk de preview en publiceer direct naar je website en social media kanalen.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Final CTA -->\n        <div class=\"pd-final-cta\">\n            <h2>Start vandaag nog<\/h2>\n            <p>Geen creditcard nodig. Direct aan de slag met automatische content.<\/p>\n            <a href=\"\/registreren\" class=\"pd-cta\">\ud83d\ude80 Gratis account aanmaken<\/a>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    const demo = document.querySelector('.ploko-demo');\n    if (!demo) return;\n\n    \/\/ Animate stats on scroll\n    let animated = false;\n    const animateStats = () => {\n        if (animated) return;\n        const rect = demo.getBoundingClientRect();\n        if (rect.top < window.innerHeight * 0.8) {\n            animated = true;\n            animateValue('stat1', 12, 1200);\n            animateValue('stat2', 5, 1400);\n            animateValue('stat3', 8, 1600);\n            animateValue('stat4', 47, 1800);\n        }\n    };\n    \n    function animateValue(id, end, duration) {\n        const el = document.getElementById(id);\n        if (!el) return;\n        const startTime = performance.now();\n        const update = (now) => {\n            const progress = Math.min((now - startTime) \/ duration, 1);\n            const ease = 1 - Math.pow(1 - progress, 3);\n            el.textContent = Math.round(end * ease);\n            if (progress < 1) requestAnimationFrame(update);\n        };\n        requestAnimationFrame(update);\n    }\n\n    window.addEventListener('scroll', animateStats);\n    animateStats();\n\n    \/\/ Tab switching with panels\n    demo.querySelectorAll('.pd-tab').forEach(tab => {\n        tab.addEventListener('click', function() {\n            const tabId = this.dataset.tab;\n            \n            \/\/ Update tabs\n            demo.querySelectorAll('.pd-tab').forEach(t => t.classList.remove('active'));\n            this.classList.add('active');\n            \n            \/\/ Update panels\n            demo.querySelectorAll('.pd-panel').forEach(p => p.classList.remove('active'));\n            const panel = demo.querySelector(`[data-panel=\"${tabId}\"]`);\n            if (panel) panel.classList.add('active');\n        });\n    });\n\n    \/\/ Preview for content items\n    const previews = {\n        ig: { title: '\ud83d\udcf8 Instagram Preview', body: '<strong>5 tips voor meer website bezoekers<\/strong><br><br>\ud83d\udca1 Wist je dat 90% van de online ervaringen begint met een zoekopdracht?<br><br>Swipe voor 5 bewezen tips \u2192<br><br>#marketing #seo #ondernemen' },\n        web: { title: '\ud83c\udf10 Blog Preview', body: '<strong>Complete gids: Zonnepanelen in 2024<\/strong><br><br>Alles over zonnepanelen: kosten, subsidies, installatie en opbrengst.<br><br>\u2713 SEO-geoptimaliseerd<br>\u2713 2.450 woorden' },\n        li: { title: '\ud83d\udcbc LinkedIn Preview', body: '<strong>Waarom duurzaamheid loont<\/strong><br><br>Duurzaam ondernemen is een investering die zich terugbetaalt.<br><br>\ud83d\udfe2 Gepubliceerd<br>\ud83d\udcca 127 weergaven \u2022 23 likes' }\n    };\n\n    demo.querySelectorAll('.pd-item[data-preview]').forEach(item => {\n        item.addEventListener('click', function() {\n            demo.querySelectorAll('.pd-item').forEach(i => i.classList.remove('selected'));\n            this.classList.add('selected');\n            \n            const key = this.dataset.preview;\n            const data = previews[key];\n            if (data) {\n                demo.querySelector('.pd-preview-title').innerHTML = data.title;\n                demo.querySelector('#preview-body').innerHTML = data.body;\n                demo.querySelector('#preview').classList.add('show');\n            }\n        });\n    });\n\n    \/\/ Close preview\n    demo.querySelector('[data-close-preview]')?.addEventListener('click', () => {\n        demo.querySelector('#preview').classList.remove('show');\n        demo.querySelectorAll('.pd-item').forEach(i => i.classList.remove('selected'));\n    });\n\n    \/\/ Add topic\n    const addTopicBtn = demo.querySelector('#addTopicBtn');\n    const topicInput = demo.querySelector('#topicInput');\n    const topicsList = demo.querySelector('#topicsList');\n    \n    if (addTopicBtn && topicInput && topicsList) {\n        addTopicBtn.addEventListener('click', () => {\n            const value = topicInput.value.trim();\n            if (!value) return;\n            \n            const newItem = document.createElement('div');\n            newItem.className = 'pd-item';\n            newItem.innerHTML = `\n                <div class=\"pd-icon topic\">\ud83d\udca1<\/div>\n                <div class=\"pd-item-info\">\n                    <div class=\"pd-item-title\">${value}<\/div>\n                    <div class=\"pd-item-meta\">0 keywords \u2022 AI genereert content...<\/div>\n                <\/div>\n                <div class=\"pd-status planned\">Nieuw<\/div>\n            `;\n            topicsList.insertBefore(newItem, topicsList.firstChild);\n            topicInput.value = '';\n            \n            \/\/ Simulate AI generating\n            setTimeout(() => {\n                newItem.querySelector('.pd-item-meta').textContent = '6 keywords \u2022 2 artikelen \u2022 8 social posts';\n                newItem.querySelector('.pd-status').textContent = 'Actief';\n                newItem.querySelector('.pd-status').className = 'pd-status active';\n            }, 2000);\n        });\n        \n        topicInput.addEventListener('keypress', (e) => {\n            if (e.key === 'Enter') addTopicBtn.click();\n        });\n    }\n\n    \/\/ Checkbox toggle\n    demo.querySelectorAll('[data-checkbox]').forEach(cb => {\n        cb.addEventListener('click', function() {\n            this.classList.toggle('checked');\n            this.textContent = this.classList.contains('checked') ? '\u2713' : '';\n        });\n    });\n\n    \/\/ Media item selection\n    demo.querySelectorAll('.pd-media-item').forEach(item => {\n        item.addEventListener('click', function() {\n            this.classList.toggle('selected');\n        });\n    });\n})();\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Automatische contentvoor al je kanalen Kies je onderwerpen, en Ploko genereert automatisch blog artikelen, Instagram posts en LinkedIn content. Alles SEO-geoptimaliseerd. \ud83d\ude80 Gratis starten app.ploko.nl\/dashboard \ud83d\udcca Overzicht \ud83d\udca1 Onderwerpen \ud83d\udcdd Content \ud83d\udcc5 Planning \ud83d\uddbc\ufe0f Media \ud83d\ude80 Publiceren 0 Ingepland 0 In productie 0 Klaar 0 Gepubliceerd \ud83d\udcf8 5 tips voor meer website bezoekers Instagram \u2022 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_wds_title":"","_wds_metadesc":"","footnotes":""},"class_list":["post-29171","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/staging.ploko.nl\/en\/wp-json\/wp\/v2\/pages\/29171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.ploko.nl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.ploko.nl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.ploko.nl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.ploko.nl\/en\/wp-json\/wp\/v2\/comments?post=29171"}],"version-history":[{"count":28,"href":"https:\/\/staging.ploko.nl\/en\/wp-json\/wp\/v2\/pages\/29171\/revisions"}],"predecessor-version":[{"id":30054,"href":"https:\/\/staging.ploko.nl\/en\/wp-json\/wp\/v2\/pages\/29171\/revisions\/30054"}],"wp:attachment":[{"href":"https:\/\/staging.ploko.nl\/en\/wp-json\/wp\/v2\/media?parent=29171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}