{"id":21,"date":"2026-09-21T13:50:34","date_gmt":"2026-09-21T13:50:34","guid":{"rendered":"https:\/\/proposta.struxel.com.br\/?page_id=21"},"modified":"2026-09-21T13:53:47","modified_gmt":"2026-09-21T13:53:47","slug":"proposta-clube-de-assinatura","status":"publish","type":"page","link":"https:\/\/proposta.struxel.com.br\/","title":{"rendered":"Proposta Clube De Assinatura"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"21\" class=\"elementor elementor-21\">\n\t\t\t\t<div class=\"elementor-element elementor-element-824a665 e-con e-atomic-element e-flexbox-base e-76e9568 \" data-id=\"824a665\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"824a665\">\n    \t\t<div class=\"elementor-element elementor-element-8f066e6 elementor-widget elementor-widget-html\" data-id=\"8f066e6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"pt-BR\" class=\"scroll-smooth\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Proposta Comercial \u2014 Clube de Assinatura Nuvemshop<\/title>\n\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n\n    <script>\n        tailwind.config = {\n            darkMode: 'class',\n            theme: {\n                extend: {\n                    colors: {\n                        brand: {\n                            50: '#eef2ff',\n                            100: '#e0e7ff',\n                            500: '#6366f1',\n                            600: '#4f46e5',\n                            700: '#4338ca',\n                            900: '#1e1b4b',\n                            accent: '#06b6d4',\n                            nuvem: '#2b5bfd'\n                        }\n                    },\n                    fontFamily: {\n                        sans: ['Inter', 'system-ui', 'sans-serif'],\n                    }\n                }\n            }\n        }\n    <\/script>\n\n    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\n        \n        body {\n            font-family: 'Inter', sans-serif;\n            background-color: #0b0f17;\n            color: #f3f4f6;\n            overflow-x: hidden;\n        }\n\n        \/* Gradient animations *\/\n        .glow-effect {\n            background: radial-gradient(circle at 50% 50%, rgba(79, 70, 229, 0.15), transparent 70%);\n        }\n\n        .glass-card {\n            background: rgba(17, 24, 39, 0.7);\n            backdrop-filter: blur(12px);\n            border: 1px solid rgba(255, 255, 255, 0.08);\n        }\n\n        .glass-card-hover:hover {\n            border-color: rgba(99, 102, 241, 0.4);\n            box-shadow: 0 10px 30px -10px rgba(79, 70, 229, 0.3);\n            transform: translateY(-2px);\n            transition: all 0.3s ease;\n        }\n\n        \/* Custom scrollbar *\/\n        ::-webkit-scrollbar {\n            width: 8px;\n        }\n        ::-webkit-scrollbar-track {\n            background: #0b0f17;\n        }\n        ::-webkit-scrollbar-thumb {\n            background: #1f2937;\n            border-radius: 4px;\n        }\n        ::-webkit-scrollbar-thumb:hover {\n            background: #4f46e5;\n        }\n\n        \/* Scroll Snap Container for Slides presentation *\/\n        .slides-container {\n            scroll-snap-type: y mandatory;\n            overflow-y: scroll;\n            height: 100vh;\n        }\n\n        .slide-section {\n            scroll-snap-align: start;\n            min-height: 100vh;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            position: relative;\n        }\n\n        \/* Hide scrollbar for clean presentation look *\/\n        .no-scrollbar::-webkit-scrollbar {\n            display: none;\n        }\n        .no-scrollbar {\n            -ms-overflow-style: none;\n            scrollbar-width: none;\n        }\n    <\/style>\n<\/head>\n<body class=\"bg-gray-950 text-gray-100 antialiased selection:bg-brand-500 selection:text-white\">\n\n    <!-- Top Progress Bar -->\n    <div class=\"fixed top-0 left-0 w-full h-1 bg-gray-800 z-50\">\n        <div id=\"scroll-progress\" class=\"h-full bg-gradient-to-r from-brand-nuvem via-brand-500 to-brand-accent w-0 transition-all duration-150\"><\/div>\n    <\/div>\n\n    <!-- Header \/ Navbar -->\n    <header class=\"fixed top-2 left-0 right-0 z-40 px-4 md:px-8 max-w-7xl mx-auto\">\n        <nav class=\"glass-card rounded-2xl px-5 py-3 flex items-center justify-between shadow-2xl\">\n            <div class=\"flex items-center space-x-3\">\n                <div class=\"w-9 h-9 rounded-xl bg-gradient-to-tr from-brand-nuvem to-brand-500 flex items-center justify-center font-bold text-white shadow-lg\">\n                    <i data-lucide=\"repeat\" class=\"w-5 h-5\"><\/i>\n                <\/div>\n                <div>\n                    <span class=\"text-xs uppercase tracking-wider text-brand-400 font-semibold block leading-none\">Proposta Comercial<\/span>\n                    <span class=\"text-sm font-bold text-white tracking-wide\">Clube Nuvemshop<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- Desktop Nav Items -->\n            <div class=\"hidden md:flex items-center space-x-6 text-sm text-gray-300 font-medium\">\n                <a href=\"#inicio\" class=\"hover:text-brand-400 transition-colors\">In\u00edcio<\/a>\n                <a href=\"#escopo\" class=\"hover:text-brand-400 transition-colors\">Escopo<\/a>\n                <a href=\"#escopo-nao\" class=\"hover:text-brand-400 transition-colors\">Nenhum Excesso<\/a>\n                <a href=\"#cronograma\" class=\"hover:text-brand-400 transition-colors\">Prazo<\/a>\n                <a href=\"#investimento\" class=\"hover:text-brand-400 transition-colors\">Investimento<\/a>\n            <\/div>\n\n            <div class=\"flex items-center space-x-3\">\n                <a href=\"#investimento\" class=\"bg-brand-600 hover:bg-brand-500 text-white text-xs md:text-sm font-semibold px-4 py-2 rounded-xl transition-all shadow-lg hover:shadow-brand-500\/20\">\n                    Aprovar Proposta\n                <\/a>\n            <\/div>\n        <\/nav>\n    <\/header>\n\n    <!-- Side Navigation Dots -->\n    <div class=\"fixed right-4 md:right-8 top-1\/2 transform -translate-y-1\/2 z-40 hidden sm:flex flex-col space-y-3\">\n        <a href=\"#inicio\" title=\"In\u00edcio\" class=\"dot-nav w-3 h-3 rounded-full bg-brand-500 ring-4 ring-brand-500\/20 transition-all\"><\/a>\n        <a href=\"#escopo\" title=\"Escopo do Projeto\" class=\"dot-nav w-3 h-3 rounded-full bg-gray-600 hover:bg-brand-400 transition-all\"><\/a>\n        <a href=\"#escopo-nao\" title=\"O que n\u00e3o est\u00e1 incluso\" class=\"dot-nav w-3 h-3 rounded-full bg-gray-600 hover:bg-brand-400 transition-all\"><\/a>\n        <a href=\"#cronograma\" title=\"Cronograma de Entrega\" class=\"dot-nav w-3 h-3 rounded-full bg-gray-600 hover:bg-brand-400 transition-all\"><\/a>\n        <a href=\"#investimento\" title=\"Investimento\" class=\"dot-nav w-3 h-3 rounded-full bg-gray-600 hover:bg-brand-400 transition-all\"><\/a>\n    <\/div>\n\n    <!-- Main Slides Container -->\n    <main class=\"slides-container no-scrollbar\">\n\n        <!-- SLIDE 1: Hero Section -->\n        <section id=\"inicio\" class=\"slide-section px-4 md:px-8 py-20 relative overflow-hidden\">\n            <div class=\"absolute inset-0 glow-effect pointer-events-none\"><\/div>\n            \n            <div class=\"max-w-5xl mx-auto w-full z-10 text-center\">\n                <div class=\"inline-flex items-center space-x-2 px-4 py-1.5 rounded-full bg-brand-500\/10 border border-brand-500\/30 text-brand-300 text-xs md:text-sm font-medium mb-6\">\n                    <span class=\"w-2 h-2 rounded-full bg-brand-400 animate-pulse\"><\/span>\n                    <span>Proposta de Servi\u00e7os Profissionais<\/span>\n                <\/div>\n\n                <h1 class=\"text-4xl md:text-6xl lg:text-7xl font-black text-white tracking-tight leading-tight mb-6\">\n                    Configura\u00e7\u00e3o do <br class=\"hidden sm:inline\"\/>\n                    <span class=\"bg-gradient-to-r from-blue-400 via-brand-500 to-indigo-400 bg-clip-text text-transparent\">\n                        Clube de Assinatura\n                    <\/span>\n                <\/h1>\n\n                <p class=\"text-gray-400 text-base md:text-xl max-w-2xl mx-auto font-normal leading-relaxed mb-10\">\n                    Transforme sua loja Nuvemshop em uma m\u00e1quina de receita recorrente previs\u00edvel com a implementa\u00e7\u00e3o completa do seu Clube de Assinaturas.\n                <\/p>\n\n                <!-- Value Highlights Cards -->\n                <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 max-w-3xl mx-auto mb-12\">\n                    <div class=\"glass-card rounded-2xl p-5 text-center\">\n                        <div class=\"text-xs uppercase text-gray-400 font-semibold mb-1\">Prazo Recorde<\/div>\n                        <div class=\"text-xl font-bold text-white flex items-center justify-center space-x-2\">\n                            <i data-lucide=\"clock\" class=\"w-5 h-5 text-brand-400\"><\/i>\n                            <span>At\u00e9 3 dias \u00fateis<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"glass-card rounded-2xl p-5 text-center border-brand-500\/40\">\n                        <div class=\"text-xs uppercase text-brand-400 font-semibold mb-1\">Investimento \u00danico<\/div>\n                        <div class=\"text-2xl font-black text-white\">R$ 800,00<\/div>\n                    <\/div>\n                    <div class=\"glass-card rounded-2xl p-5 text-center\">\n                        <div class=\"text-xs uppercase text-gray-400 font-semibold mb-1\">Plataforma<\/div>\n                        <div class=\"text-xl font-bold text-white flex items-center justify-center space-x-2\">\n                            <i data-lucide=\"shopping-bag\" class=\"w-5 h-5 text-blue-400\"><\/i>\n                            <span>Nuvemshop<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Call to Action -->\n                <div class=\"flex flex-col sm:flex-row items-center justify-center gap-4\">\n                    <a href=\"#escopo\" class=\"w-full sm:w-auto bg-gradient-to-r from-brand-nuvem to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white font-semibold px-8 py-4 rounded-2xl transition-all shadow-xl hover:shadow-brand-500\/25 flex items-center justify-center space-x-2 group\">\n                        <span>Ver O que Est\u00e1 Incluso<\/span>\n                        <i data-lucide=\"arrow-down\" class=\"w-5 h-5 group-hover:translate-y-1 transition-transform\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div>\n\n            <!-- Scroll Indicator -->\n            <div class=\"absolute bottom-6 left-1\/2 transform -translate-x-1\/2 flex flex-col items-center space-y-2 opacity-60\">\n                <span class=\"text-xs text-gray-400 uppercase tracking-widest\">Role para explorar<\/span>\n                <div class=\"w-6 h-10 border-2 border-gray-500 rounded-full flex justify-center p-1\">\n                    <div class=\"w-1.5 h-3 bg-brand-400 rounded-full animate-bounce\"><\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n\n        <!-- SLIDE 2: Escopo do Projeto -->\n        <section id=\"escopo\" class=\"slide-section px-4 md:px-8 py-20 bg-gray-900\/50\">\n            <div class=\"max-w-6xl mx-auto w-full\">\n                \n                <div class=\"text-center mb-10\">\n                    <span class=\"text-brand-400 text-xs md:text-sm font-bold uppercase tracking-widest block mb-2\">Entreg\u00e1veis do Projeto<\/span>\n                    <h2 class=\"text-3xl md:text-5xl font-black text-white tracking-tight\">O que est\u00e1 incluso na configura\u00e7\u00e3o<\/h2>\n                    <p class=\"text-gray-400 text-sm md:text-base mt-2 max-w-xl mx-auto\">Sua loja preparada de ponta a ponta para vender por assinatura de forma totalmente funcional e testada.<\/p>\n                <\/div>\n\n                <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n                    \n                    <!-- Item 1 -->\n                    <div class=\"glass-card glass-card-hover rounded-2xl p-5 flex items-start space-x-4\">\n                        <div class=\"p-3 rounded-xl bg-brand-500\/10 text-brand-400 shrink-0\">\n                            <i data-lucide=\"sliders\" class=\"w-6 h-6\"><\/i>\n                        <\/div>\n                        <div>\n                            <h3 class=\"font-bold text-white text-base\">Planos de Assinatura<\/h3>\n                            <p class=\"text-gray-400 text-sm mt-1\">Configura\u00e7\u00e3o completa de todos os planos oferecidos no seu clube.<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Item 2 -->\n                    <div class=\"glass-card glass-card-hover rounded-2xl p-5 flex items-start space-x-4\">\n                        <div class=\"p-3 rounded-xl bg-blue-500\/10 text-blue-400 shrink-0\">\n                            <i data-lucide=\"calendar-repeat\" class=\"w-6 h-6\"><\/i>\n                        <\/div>\n                        <div>\n                            <h3 class=\"font-bold text-white text-base\">Frequ\u00eancia de Recorr\u00eancia<\/h3>\n                            <p class=\"text-gray-400 text-sm mt-1\">Defini\u00e7\u00e3o dos ciclos de cobran\u00e7a e entrega (mensal, trimestral, semestral, etc.).<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Item 3 -->\n                    <div class=\"glass-card glass-card-hover rounded-2xl p-5 flex items-start space-x-4\">\n                        <div class=\"p-3 rounded-xl bg-emerald-500\/10 text-emerald-400 shrink-0\">\n                            <i data-lucide=\"package-check\" class=\"w-6 h-6\"><\/i>\n                        <\/div>\n                        <div>\n                            <h3 class=\"font-bold text-white text-base\">Produtos Participantes<\/h3>\n                            <p class=\"text-gray-400 text-sm mt-1\">Vincular os produtos do cat\u00e1logo eleg\u00edveis \u00e0 modalidade de assinatura.<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Item 5 -->\n                    <div class=\"glass-card glass-card-hover rounded-2xl p-5 flex items-start space-x-4\">\n                        <div class=\"p-3 rounded-xl bg-amber-500\/10 text-amber-400 shrink-0\">\n                            <i data-lucide=\"layout\" class=\"w-6 h-6\"><\/i>\n                        <\/div>\n                        <div>\n                            <h3 class=\"font-bold text-white text-base\">Ajustes Visuais na Loja<\/h3>\n                            <p class=\"text-gray-400 text-sm mt-1\">Ajustes necess\u00e1rios na apresenta\u00e7\u00e3o dos bot\u00f5es e blocos da assinatura no tema.<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Item 6 -->\n                    <div class=\"glass-card glass-card-hover rounded-2xl p-5 flex items-start space-x-4 border-brand-500\/30\">\n                        <div class=\"p-3 rounded-xl bg-pink-500\/10 text-pink-400 shrink-0\">\n                            <i data-lucide=\"image\" class=\"w-6 h-6\"><\/i>\n                        <\/div>\n                        <div>\n                            <h3 class=\"font-bold text-white text-base\">At\u00e9 3 Banners Exclusivos<\/h3>\n                            <p class=\"text-gray-400 text-sm mt-1\">Cria\u00e7\u00e3o e inser\u00e7\u00e3o estrat\u00e9gica de at\u00e9 3 banners comunicando a assinatura.<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Item 7 -->\n                    <div class=\"glass-card glass-card-hover rounded-2xl p-5 flex items-start space-x-4\">\n                        <div class=\"p-3 rounded-xl bg-cyan-500\/10 text-cyan-400 shrink-0\">\n                            <i data-lucide=\"shopping-cart\" class=\"w-6 h-6\"><\/i>\n                        <\/div>\n                        <div>\n                            <h3 class=\"font-bold text-white text-base\">Experi\u00eancia do Cliente<\/h3>\n                            <p class=\"text-gray-400 text-sm mt-1\">Otimiza\u00e7\u00e3o da jornada de compra do assinante para m\u00e1xima convers\u00e3o.<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Item 8 -->\n                    <div class=\"glass-card glass-card-hover rounded-2xl p-5 flex items-start space-x-4\">\n                        <div class=\"p-3 rounded-xl bg-indigo-500\/10 text-indigo-400 shrink-0\">\n                            <i data-lucide=\"credit-card\" class=\"w-6 h-6\"><\/i>\n                        <\/div>\n                        <div>\n                            <h3 class=\"font-bold text-white text-base\">Testes de Cobran\u00e7a Recorrente<\/h3>\n                            <p class=\"text-gray-400 text-sm mt-1\">Homologa\u00e7\u00e3o pr\u00e1tica do fluxo de checkout e processamento recorrente.<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Item 9 -->\n                    <div class=\"glass-card glass-card-hover rounded-2xl p-5 flex items-start space-x-4\">\n                        <div class=\"p-3 rounded-xl bg-teal-500\/10 text-teal-400 shrink-0\">\n                            <i data-lucide=\"user-check\" class=\"w-6 h-6\"><\/i>\n                        <\/div>\n                        <div>\n                            <h3 class=\"font-bold text-white text-base\">Valida\u00e7\u00e3o & Treinamento<\/h3>\n                            <p class=\"text-gray-400 text-sm mt-1\">Valida\u00e7\u00e3o de pedidos gerados + Orienta\u00e7\u00e3o b\u00e1sica para gest\u00e3o no painel.<\/p>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n            <\/div>\n        <\/section>\n\n\n        <!-- SLIDE 3: N\u00e3o Inclusos (Transpar\u00eancia total) -->\n        <section id=\"escopo-nao\" class=\"slide-section px-4 md:px-8 py-20 bg-gray-900\/40\">\n            <div class=\"max-w-5xl mx-auto w-full\">\n                \n                <div class=\"text-center mb-12\">\n                    <span class=\"text-amber-400 text-xs md:text-sm font-bold uppercase tracking-widest block mb-2\">Clareza & Alinhamento<\/span>\n                    <h2 class=\"text-3xl md:text-5xl font-black text-white tracking-tight\">O que N\u00c3O est\u00e1 incluso<\/h2>\n                    <p class=\"text-gray-400 text-sm md:text-base mt-2 max-w-lg mx-auto\">Para garantir a m\u00e1xima transpar\u00eancia e cumprimento rigoroso do prazo de 3 dias.<\/p>\n                <\/div>\n\n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                    \n                    <div class=\"glass-card rounded-2xl p-6 border-amber-500\/20 flex space-x-4 items-start\">\n                        <div class=\"p-2.5 bg-amber-500\/10 text-amber-400 rounded-xl shrink-0\">\n                            <i data-lucide=\"x-circle\" class=\"w-6 h-6\"><\/i>\n                        <\/div>\n                        <div>\n                            <h3 class=\"font-bold text-white text-base\">Layouts Completo de Loja<\/h3>\n                            <p class=\"text-gray-400 text-sm mt-1\">N\u00e3o inclui reformula\u00e7\u00e3o total do visual da sua loja Nuvemshop nem cria\u00e7\u00e3o de novos temas do zero.<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"glass-card rounded-2xl p-6 border-amber-500\/20 flex space-x-4 items-start\">\n                        <div class=\"p-2.5 bg-amber-500\/10 text-amber-400 rounded-xl shrink-0\">\n                            <i data-lucide=\"image-off\" class=\"w-6 h-6\"><\/i>\n                        <\/div>\n                        <div>\n                            <h3 class=\"font-bold text-white text-base\">Banners Adicionais (+ de 3)<\/h3>\n                            <p class=\"text-gray-400 text-sm mt-1\">A proposta contempla at\u00e9 3 banners focados na comunica\u00e7\u00e3o do Clube de Assinaturas.<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"glass-card rounded-2xl p-6 border-amber-500\/20 flex space-x-4 items-start\">\n                        <div class=\"p-2.5 bg-amber-500\/10 text-amber-400 rounded-xl shrink-0\">\n                            <i data-lucide=\"code\" class=\"w-6 h-6\"><\/i>\n                        <\/div>\n                        <div>\n                            <h3 class=\"font-bold text-white text-base\">Funcionalidades Customizadas<\/h3>\n                            <p class=\"text-gray-400 text-sm mt-1\">N\u00e3o contempla programa\u00e7\u00e3o de fun\u00e7\u00f5es sob medida fora do padr\u00e3o do app\/recurso oficial de assinatura.<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"glass-card rounded-2xl p-6 border-amber-500\/20 flex space-x-4 items-start\">\n                        <div class=\"p-2.5 bg-amber-500\/10 text-amber-400 rounded-xl shrink-0\">\n                            <i data-lucide=\"link-2-off\" class=\"w-6 h-6\"><\/i>\n                        <\/div>\n                        <div>\n                            <h3 class=\"font-bold text-white text-base\">Sistemas Externos & ERPs<\/h3>\n                            <p class=\"text-gray-400 text-sm mt-1\">N\u00e3o inclusas integra\u00e7\u00f5es complexas com ERPs externos ou sistemas que n\u00e3o sejam nativos\/compat\u00edveis diretos.<\/p>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n\n                <div class=\"mt-8 bg-gray-900 border border-gray-800 rounded-2xl p-4 text-center text-xs text-gray-400\">\n                    \u2139\ufe0f Caso precise de demandas adicionais de design ou desenvolvimento fora deste escopo, podemos cotar um aditivo de forma r\u00e1pida e simplificada.\n                <\/div>\n\n            <\/div>\n        <\/section>\n\n\n        <!-- SLIDE 5: Cronograma de Execu\u00e7\u00e3o -->\n        <section id=\"cronograma\" class=\"slide-section px-4 md:px-8 py-20 relative\">\n            <div class=\"max-w-5xl mx-auto w-full\">\n                \n                <div class=\"text-center mb-14\">\n                    <span class=\"text-brand-accent text-xs md:text-sm font-bold uppercase tracking-widest block mb-2\">Agilidade de Entrega<\/span>\n                    <h2 class=\"text-3xl md:text-5xl font-black text-white tracking-tight\">Prazo de Execu\u00e7\u00e3o: 3 Dias \u00dateis<\/h2>\n                    <p class=\"text-gray-400 text-sm md:text-base mt-2\">O prazo inicia imediatamente ap\u00f3s o envio das informa\u00e7\u00f5es necess\u00e1rias do seu e-commerce.<\/p>\n                <\/div>\n\n                <!-- Step Timeline -->\n                <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 relative\">\n                    \n                    <!-- Step 1 -->\n                    <div class=\"glass-card rounded-3xl p-6 relative flex flex-col justify-between\">\n                        <div>\n                            <div class=\"flex items-center justify-between mb-4\">\n                                <span class=\"text-xs font-black px-3 py-1 rounded-full bg-brand-500\/20 text-brand-300 border border-brand-500\/30\">DIA 1<\/span>\n                                <i data-lucide=\"file-check-2\" class=\"w-6 h-6 text-brand-400\"><\/i>\n                            <\/div>\n                            <h3 class=\"text-xl font-bold text-white mb-2\">Alinhamento & Design<\/h3>\n                            <ul class=\"text-gray-400 text-sm space-y-2\">\n                                <li class=\"flex items-center space-x-2\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-400 shrink-0\"><\/i> <span>Coleta do briefing e imagens<\/span><\/li>\n                                <li class=\"flex items-center space-x-2\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-400 shrink-0\"><\/i> <span>Cria\u00e7\u00e3o dos 3 banners promocionais<\/span><\/li>\n                                <li class=\"flex items-center space-x-2\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-400 shrink-0\"><\/i> <span>Estrutura\u00e7\u00e3o dos planos e regras<\/span><\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Step 2 -->\n                    <div class=\"glass-card rounded-3xl p-6 relative flex flex-col justify-between border-brand-500\/40\">\n                        <div>\n                            <div class=\"flex items-center justify-between mb-4\">\n                                <span class=\"text-xs font-black px-3 py-1 rounded-full bg-blue-500\/20 text-blue-300 border border-blue-500\/30\">DIA 2<\/span>\n                                <i data-lucide=\"settings\" class=\"w-6 h-6 text-blue-400\"><\/i>\n                            <\/div>\n                            <h3 class=\"text-xl font-bold text-white mb-2\">Configura\u00e7\u00e3o T\u00e9cnica<\/h3>\n                            <ul class=\"text-gray-400 text-sm space-y-2\">\n                                <li class=\"flex items-center space-x-2\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-400 shrink-0\"><\/i> <span>Configura\u00e7\u00e3o do app de assinatura<\/span><\/li>\n                                <li class=\"flex items-center space-x-2\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-400 shrink-0\"><\/i> <span>V\u00ednculo com produtos e descontos<\/span><\/li>\n                                <li class=\"flex items-center space-x-2\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-400 shrink-0\"><\/i> <span>Ajustes no layout do checkout\/loja<\/span><\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Step 3 -->\n                    <div class=\"glass-card rounded-3xl p-6 relative flex flex-col justify-between\">\n                        <div>\n                            <div class=\"flex items-center justify-between mb-4\">\n                                <span class=\"text-xs font-black px-3 py-1 rounded-full bg-emerald-500\/20 text-emerald-300 border border-emerald-500\/30\">DIA 3<\/span>\n                                <i data-lucide=\"rocket\" class=\"w-6 h-6 text-emerald-400\"><\/i>\n                            <\/div>\n                            <h3 class=\"text-xl font-bold text-white mb-2\">Testes, Valida\u00e7\u00e3o & Entrega<\/h3>\n                            <ul class=\"text-gray-400 text-sm space-y-2\">\n                                <li class=\"flex items-center space-x-2\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-400 shrink-0\"><\/i> <span>Testes pr\u00e1ticos de cobran\u00e7a recorrente<\/span><\/li>\n                                <li class=\"flex items-center space-x-2\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-400 shrink-0\"><\/i> <span>Valida\u00e7\u00e3o do fluxo completo de compra<\/span><\/li>\n                                <li class=\"flex items-center space-x-2\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-400 shrink-0\"><\/i> <span>Orienta\u00e7\u00e3o b\u00e1sica para o lojista<\/span><\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n        <\/section>\n\n\n        <!-- SLIDE 6: Investimento e Aceite -->\n        <section id=\"investimento\" class=\"slide-section px-4 md:px-8 py-20 relative\">\n            <div class=\"max-w-4xl mx-auto w-full\">\n                \n                <div class=\"glass-card rounded-3xl p-8 md:p-12 border-2 border-brand-500\/50 shadow-2xl relative overflow-hidden text-center\">\n                    \n                    <div class=\"inline-flex items-center space-x-2 px-4 py-1.5 rounded-full bg-emerald-500\/10 border border-emerald-500\/30 text-emerald-400 text-xs font-bold uppercase tracking-wider mb-6\">\n                        <i data-lucide=\"shield-check\" class=\"w-4 h-4\"><\/i>\n                        <span>Proposta V\u00e1lida por 10 dias<\/span>\n                    <\/div>\n\n                    <h2 class=\"text-3xl md:text-5xl font-black text-white tracking-tight mb-2\">Investimento do Projeto<\/h2>\n                    <p class=\"text-gray-400 text-base max-w-md mx-auto mb-8\">Implementa\u00e7\u00e3o completa do Clube de Assinatura na Nuvemshop.<\/p>\n\n                    <!-- Price Display -->\n                    <div class=\"my-6\">\n                        <div class=\"text-gray-400 text-xs uppercase tracking-widest font-semibold\">Valor Total do Servi\u00e7o<\/div>\n                        <div class=\"text-5xl md:text-7xl font-black text-white tracking-tight my-2\">\n                            <span class=\"text-3xl font-bold text-brand-400\">R$<\/span> 800<span class=\"text-3xl text-gray-400 font-semibold\">,00<\/span>\n                        <\/div>\n                        <div class=\"text-xs text-gray-400\">Pagamento facilitado no PIX ou Cart\u00e3o de Cr\u00e9dito<\/div>\n                    <\/div>\n\n                    <!-- Main CTA Button -->\n                    <div class=\"mt-8 max-w-md mx-auto space-y-4\">\n                        <button onclick=\"openApprovalModal()\" class=\"w-full bg-gradient-to-r from-emerald-500 via-brand-500 to-brand-nuvem hover:opacity-95 text-white font-black text-lg py-5 px-8 rounded-2xl transition-all shadow-2xl hover:shadow-emerald-500\/25 flex items-center justify-center space-x-3 transform hover:-translate-y-0.5\">\n                            <i data-lucide=\"check-circle-2\" class=\"w-6 h-6\"><\/i>\n                            <span>ACEITAR PROPOSTA AGORA<\/span>\n                        <\/button>\n\n                        <a href=\"https:\/\/wa.me\/?text=Ol\u00e1!%20Tenho%20d\u00favidas%20sobre%20a%20proposta%20do%20Clube%20de%20Assinatura%20Nuvemshop\" target=\"_blank\" class=\"block text-xs text-gray-400 hover:text-white transition-colors\">\n                            Possui d\u00favidas antes de aprovar? <span class=\"underline text-brand-400\">Fale pelo WhatsApp<\/span>\n                        <\/a>\n                    <\/div>\n\n                    <div class=\"mt-10 pt-6 border-t border-gray-800\/80 text-xs text-gray-500 flex flex-wrap justify-center gap-6\">\n                        <span class=\"flex items-center space-x-1.5\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-400\"><\/i><span>Sem taxas ocultas<\/span><\/span>\n                        <span class=\"flex items-center space-x-1.5\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-400\"><\/i><span>Prazo de 3 dias \u00fateis<\/span><\/span>\n                        <span class=\"flex items-center space-x-1.5\"><i data-lucide=\"check\" class=\"w-4 h-4 text-emerald-400\"><\/i><span>Suporte p\u00f3s-entrega<\/span><\/span>\n                    <\/div>\n\n                <\/div>\n\n                <!-- Footer copyright -->\n                <div class=\"text-center mt-12 text-xs text-gray-600\">\n                    Proposta comercial personalizada \u2022 Nuvemshop Clube de Assinatura\n                <\/div>\n\n            <\/div>\n        <\/section>\n\n    <\/main>\n\n    <!-- Modal de Aceite da Proposta -->\n    <div id=\"approval-modal\" class=\"fixed inset-0 bg-black\/80 backdrop-blur-md z-50 flex items-center justify-center p-4 hidden\">\n        <div class=\"glass-card rounded-3xl p-6 md:p-8 max-w-md w-full border border-brand-500\/40 relative shadow-2xl\">\n            \n            <button onclick=\"closeApprovalModal()\" class=\"absolute top-4 right-4 text-gray-400 hover:text-white p-2\">\n                <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n            <\/button>\n\n            <div class=\"text-center mb-6\">\n                <div class=\"w-12 h-12 rounded-2xl bg-emerald-500\/20 text-emerald-400 flex items-center justify-center mx-auto mb-3\">\n                    <i data-lucide=\"file-signature\" class=\"w-6 h-6\"><\/i>\n                <\/div>\n                <h3 class=\"text-xl font-bold text-white\">Aprovar Proposta Comercial<\/h3>\n                <p class=\"text-xs text-gray-400 mt-1\">Preencha os dados da sua loja para confirmarmos o in\u00edcio.<\/p>\n            <\/div>\n\n            <form id=\"approval-form\" onsubmit=\"handleFormSubmit(event)\" class=\"space-y-4\">\n                <div>\n                    <label class=\"block text-xs font-semibold text-gray-300 mb-1\">Seu Nome \/ Respons\u00e1vel<\/label>\n                    <input type=\"text\" id=\"client-name\" required placeholder=\"Ex: Maria Silva\" \n                        class=\"w-full bg-gray-900 border border-gray-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-brand-500\">\n                <\/div>\n\n                <div>\n                    <label class=\"block text-xs font-semibold text-gray-300 mb-1\">Nome ou URL da Loja Nuvemshop<\/label>\n                    <input type=\"text\" id=\"store-name\" required placeholder=\"Ex: minhaloja.nuvemshop.com.br\" \n                        class=\"w-full bg-gray-900 border border-gray-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-brand-500\">\n                <\/div>\n\n                <div>\n                    <label class=\"block text-xs font-semibold text-gray-300 mb-1\">WhatsApp de Contato<\/label>\n                    <input type=\"tel\" id=\"client-phone\" required placeholder=\"(00) 99999-9999\" \n                        class=\"w-full bg-gray-900 border border-gray-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-brand-500\">\n                <\/div>\n\n                <div class=\"pt-2\">\n                    <button type=\"submit\" class=\"w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold py-3.5 rounded-xl text-sm transition-all shadow-lg flex items-center justify-center space-x-2\">\n                        <i data-lucide=\"send\" class=\"w-4 h-4\"><\/i>\n                        <span>CONFIRMAR ACEITE VIA WHATSAPP<\/span>\n                    <\/button>\n                <\/div>\n            <\/form>\n\n        <\/div>\n    <\/div>\n\n\n    <script>\n        \/\/ Initialize Lucide Icons\n        lucide.createIcons();\n\n        \/\/ Modal Handlers\n        function openApprovalModal() {\n            document.getElementById('approval-modal').classList.remove('hidden');\n        }\n\n        function closeApprovalModal() {\n            document.getElementById('approval-modal').classList.add('hidden');\n        }\n\n        \/\/ Form Submission to WhatsApp\n        function handleFormSubmit(e) {\n            e.preventDefault();\n            \n            const name = document.getElementById('client-name').value;\n            const store = document.getElementById('store-name').value;\n            const phone = document.getElementById('client-phone').value;\n\n            const text = `*ACEITE DE PROPOSTA COMERCIAL*%0A%0A` +\n                         `*Servi\u00e7o:* Configura\u00e7\u00e3o Clube de Assinatura Nuvemshop%0A` +\n                         `*Valor:* R$ 800,00%0A` +\n                         `*Cliente:* ${encodeURIComponent(name)}%0A` +\n                         `*Loja:* ${encodeURIComponent(store)}%0A` +\n                         `*WhatsApp:* ${encodeURIComponent(phone)}%0A%0A` +\n                         `Ol\u00e1! Li a proposta e gostaria de confirmar o aceite para darmos in\u00edcio!`;\n\n            window.open(`https:\/\/wa.me\/?text=${text}`, '_blank');\n            closeApprovalModal();\n        }\n\n        \/\/ Scroll Progress Bar & Nav Highlights\n        const container = document.querySelector('.slides-container');\n        const progressBar = document.getElementById('scroll-progress');\n        const sections = document.querySelectorAll('.slide-section');\n        const navDots = document.querySelectorAll('.dot-nav');\n\n        container.addEventListener('scroll', () => {\n            const scrollTop = container.scrollTop;\n            const scrollHeight = container.scrollHeight - container.clientHeight;\n            const scrollPercent = (scrollTop \/ scrollHeight) * 100;\n            progressBar.style.width = scrollPercent + '%';\n\n            \/\/ Active section indicator\n            sections.forEach((section, index) => {\n                const rect = section.getBoundingClientRect();\n                if (rect.top >= -100 && rect.top <= window.innerHeight \/ 2) {\n                    navDots.forEach(dot => dot.classList.remove('bg-brand-500', 'ring-4', 'ring-brand-500\/20'));\n                    navDots.forEach(dot => dot.classList.add('bg-gray-600'));\n                    if (navDots[index]) {\n                        navDots[index].classList.remove('bg-gray-600');\n                        navDots[index].classList.add('bg-brand-500', 'ring-4', 'ring-brand-500\/20');\n                    }\n                }\n            });\n        });\n    <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Proposta Comercial \u2014 Clube de Assinatura Nuvemshop Proposta Comercial Clube Nuvemshop In\u00edcio Escopo Nenhum Excesso Prazo Investimento Aprovar Proposta Proposta de Servi\u00e7os Profissionais Configura\u00e7\u00e3o do Clube de Assinatura Transforme sua loja Nuvemshop em uma m\u00e1quina de receita recorrente previs\u00edvel com a implementa\u00e7\u00e3o completa do seu Clube de Assinaturas. Prazo Recorde At\u00e9 3 dias \u00fateis Investimento [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/proposta.struxel.com.br\/index.php?rest_route=\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proposta.struxel.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/proposta.struxel.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/proposta.struxel.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/proposta.struxel.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=21"}],"version-history":[{"count":10,"href":"https:\/\/proposta.struxel.com.br\/index.php?rest_route=\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":32,"href":"https:\/\/proposta.struxel.com.br\/index.php?rest_route=\/wp\/v2\/pages\/21\/revisions\/32"}],"wp:attachment":[{"href":"https:\/\/proposta.struxel.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}