Proposta Comercial - Manteigaria Nacional | Struxel<\/title>\n \n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n \n \n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\n\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n mono: ['JetBrains Mono', 'monospace'],\n },\n colors: {\n dark: {\n 900: '#05050A', \/\/ Fundo principal super escuro\n 800: '#0A0A14', \/\/ Fundo secund\u00e1rio\n 700: '#141424', \/\/ Cards\n },\n neon: {\n purple: '#8B5CF6',\n cyan: '#06B6D4',\n pink: '#EC4899'\n }\n },\n backgroundImage: {\n 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',\n 'hero-glow': 'conic-gradient(from 180deg at 50% 50%, #8B5CF620 0deg, #06B6D420 180deg, #8B5CF620 360deg)',\n }\n }\n }\n }\n <\/script>\n\n <style>\n \/* Estilos Base e Scrollbar *\/\n body {\n background-color: #05050A;\n color: #E2E8F0;\n overflow-x: hidden;\n }\n \n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #05050A;\n }\n ::-webkit-scrollbar-thumb {\n background: #1e1e38;\n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #8B5CF6;\n }\n\n \/* Efeitos Neon e Glassmorphism inspirados nas imagens *\/\n .glass-card {\n background: rgba(20, 20, 36, 0.6);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(139, 92, 246, 0.15);\n border-radius: 1rem;\n transition: all 0.3s ease;\n }\n \n .glass-card:hover {\n border-color: rgba(6, 182, 212, 0.4);\n box-shadow: 0 0 20px rgba(6, 182, 212, 0.1), inset 0 0 10px rgba(139, 92, 246, 0.05);\n transform: translateY(-5px);\n }\n\n .text-gradient {\n background: linear-gradient(135deg, #8B5CF6, #06B6D4);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .btn-neon {\n background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(6, 182, 212, 0.2));\n border: 1px solid rgba(139, 92, 246, 0.5);\n backdrop-filter: blur(4px);\n transition: all 0.3s ease;\n }\n .btn-neon:hover {\n background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(6, 182, 212, 0.4));\n box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);\n border-color: rgba(6, 182, 212, 0.8);\n }\n\n \/* Background animado da Hero Section *\/\n .bg-mesh {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n background-image: \n radial-gradient(at 0% 0%, rgba(139, 92, 246, 0.15) 0px, transparent 50%),\n radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.15) 0px, transparent 50%),\n radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.1) 0px, transparent 50%);\n z-index: -1;\n filter: blur(40px);\n }\n\n \/* Anima\u00e7\u00f5es de Scroll (Reveal) *\/\n .reveal {\n opacity: 0;\n transform: translateY(30px);\n transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);\n }\n .reveal.active {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* Delays para cards em sequ\u00eancia *\/\n .delay-100 { transition-delay: 100ms; }\n .delay-200 { transition-delay: 200ms; }\n .delay-300 { transition-delay: 300ms; }\n <\/style>\n<\/head>\n<body class=\"antialiased selection:bg-neon-purple selection:text-white\">\n\n <nav class=\"fixed w-full z-50 top-0 transition-all duration-300 bg-dark-900\/80 backdrop-blur-md border-b border-white\/5\" id=\"navbar\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between items-center h-20\">\n \n <div class=\"flex-shrink-0 flex items-center gap-2\">\n <div class=\"p-2 bg-gradient-to-br from-neon-purple\/20 to-neon-cyan\/20 rounded-lg border border-neon-purple\/30\">\n <i class=\"ph ph-code text-2xl text-neon-cyan\"><\/i>\n <\/div>\n <span class=\"font-mono font-bold text-xl tracking-tighter\">Struxel<span class=\"text-neon-purple\">.<\/span><\/span>\n <\/div>\n \n \n <div class=\"hidden md:flex space-x-8 items-center\">\n <a href=\"#objetivo\" class=\"text-sm font-medium text-slate-300 hover:text-white transition-colors\">Objetivo<\/a>\n <a href=\"#escopo\" class=\"text-sm font-medium text-slate-300 hover:text-white transition-colors\">Escopo<\/a>\n <a href=\"#investimento\" class=\"text-sm font-medium text-slate-300 hover:text-white transition-colors\">Investimento<\/a>\n <a href=\"#cronograma\" class=\"text-sm font-medium text-slate-300 hover:text-white transition-colors\">Cronograma<\/a>\n <a href=\"https:\/\/wa.me\/5561991207479\" target=\"_blank\" class=\"btn-neon px-5 py-2 rounded-full text-sm font-semibold text-white\">\n Aprovar Proposta\n <\/a>\n <\/div>\n\n \n <div class=\"md:hidden flex items-center\">\n <button id=\"mobile-menu-btn\" class=\"text-slate-300 hover:text-white focus:outline-none\">\n <i class=\"ph ph-list text-3xl\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"mobile-menu\" class=\"hidden md:hidden bg-dark-800 border-b border-white\/10 absolute w-full\">\n <div class=\"px-4 pt-2 pb-6 space-y-2\">\n <a href=\"#objetivo\" class=\"block px-3 py-2 text-base font-medium text-slate-300 hover:text-white hover:bg-dark-700 rounded-md\">Objetivo<\/a>\n <a href=\"#escopo\" class=\"block px-3 py-2 text-base font-medium text-slate-300 hover:text-white hover:bg-dark-700 rounded-md\">Escopo<\/a>\n <a href=\"#investimento\" class=\"block px-3 py-2 text-base font-medium text-slate-300 hover:text-white hover:bg-dark-700 rounded-md\">Investimento<\/a>\n <a href=\"#cronograma\" class=\"block px-3 py-2 text-base font-medium text-slate-300 hover:text-white hover:bg-dark-700 rounded-md\">Cronograma<\/a>\n <\/div>\n <\/div>\n <\/nav>\n\n <section class=\"relative min-h-screen flex items-center justify-center pt-20 overflow-hidden\">\n <div class=\"bg-mesh\"><\/div>\n \n <div class=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center reveal\">\n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full border border-white\/10 bg-white\/5 backdrop-blur-sm mb-8\">\n <span class=\"flex h-2 w-2 relative\">\n <span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-neon-cyan opacity-75\"><\/span>\n <span class=\"relative inline-flex rounded-full h-2 w-2 bg-neon-cyan\"><\/span>\n <\/span>\n <span class=\"text-xs font-medium text-slate-300 uppercase tracking-wider\">Proposta Comercial<\/span>\n <\/div>\n\n <h1 class=\"text-5xl md:text-7xl font-bold tracking-tight mb-6\">\n E-commerce de Alta Performance para <br class=\"hidden md:block\" \/>\n <span class=\"text-gradient\">Manteigaria Nacional<\/span>\n <\/h1>\n \n <p class=\"mt-4 text-xl text-slate-400 max-w-2xl mx-auto mb-10\">\n Apresentamos a solu\u00e7\u00e3o completa para digitalizar suas vendas com um design premium, tecnologia Nuvemshop e experi\u00eancia do usu\u00e1rio focada em convers\u00e3o.\n <\/p>\n\n <div class=\"flex flex-col sm:flex-row gap-4 justify-center\">\n <a href=\"#escopo\" class=\"btn-neon px-8 py-4 rounded-lg font-semibold text-white flex items-center justify-center gap-2\">\n Ver Entreg\u00e1veis <i class=\"ph ph-arrow-down-right\"><\/i>\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/manteigarianacional\/\" target=\"_blank\" class=\"px-8 py-4 rounded-lg font-semibold text-slate-300 bg-dark-700 hover:bg-dark-700\/80 border border-white\/5 transition-all flex items-center justify-center gap-2\">\n <i class=\"ph ph-instagram-logo\"><\/i> @manteigarianacional\n <\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"absolute bottom-10 left-1\/2 transform -translate-x-1\/2 animate-bounce\">\n <i class=\"ph ph-mouse text-3xl text-slate-500\"><\/i>\n <\/div>\n <\/section>\n\n <section id=\"objetivo\" class=\"py-24 relative\">\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center reveal\">\n <h2 class=\"text-sm font-mono text-neon-purple mb-2 uppercase tracking-widest\">O Desafio<\/h2>\n <h3 class=\"text-3xl md:text-4xl font-bold mb-8 text-white\">Transformar Visitas em <span class=\"text-neon-cyan\">Vendas<\/span><\/h3>\n \n <div class=\"glass-card p-8 md:p-12 text-left relative overflow-hidden\">\n <div class=\"absolute top-0 right-0 -mt-4 -mr-4 w-24 h-24 bg-neon-purple\/20 rounded-full blur-2xl\"><\/div>\n \n <p class=\"text-lg text-slate-300 leading-relaxed mb-6 relative z-10\">\n O objetivo principal deste projeto \u00e9 desenvolver uma loja virtual completa, moderna e otimizada para a <strong>Manteigaria Nacional<\/strong> utilizando a plataforma de ponta <strong>Nuvemshop<\/strong>.\n <\/p>\n <p class=\"text-lg text-slate-300 leading-relaxed relative z-10\">\n Vamos criar um ambiente de vendas seguro, com um design limpo e sofisticado que transmita a qualidade \u00edmpar dos seus produtos, oferecendo uma experi\u00eancia de compra fluida e intuitiva aos seus clientes, desde o acesso at\u00e9 o checkout.\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"escopo\" class=\"py-24 bg-dark-800\/50 border-y border-white\/5 relative\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16 reveal\">\n <h2 class=\"text-sm font-mono text-neon-purple mb-2 uppercase tracking-widest\">O que faremos<\/h2>\n <h3 class=\"text-3xl md:text-4xl font-bold text-white\">Escopo do Projeto & Entreg\u00e1veis<\/h3>\n <p class=\"mt-4 text-slate-400 max-w-2xl mx-auto\">Tudo que sua loja precisa para nascer profissional e pronta para faturar.<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8\">\n \n <div class=\"glass-card p-8 reveal delay-100 group\">\n <div class=\"h-12 w-12 rounded-lg bg-dark-800 border border-white\/10 flex items-center justify-center mb-6 group-hover:border-neon-purple\/50 transition-colors\">\n <i class=\"ph ph-hard-drives text-2xl text-neon-purple\"><\/i>\n <\/div>\n <h4 class=\"text-xl font-bold text-white mb-4\">Configura\u00e7\u00e3o e Estrutura<\/h4>\n <ul class=\"space-y-3 text-slate-400\">\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Abertura e setup completo na Nuvemshop.<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Apontamento de dom\u00ednio (manteigarianacional.com.br) e SSL.<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Integra\u00e7\u00e3o de Pagamento (Pix, Cart\u00e3o, Boleto via Nuvem Pago\/Mercado Pago).<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Configura\u00e7\u00e3o de Frete (Correios, Melhor Envio, Motoboy local).<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"glass-card p-8 reveal delay-200 group\">\n <div class=\"h-12 w-12 rounded-lg bg-dark-800 border border-white\/10 flex items-center justify-center mb-6 group-hover:border-neon-cyan\/50 transition-colors\">\n <i class=\"ph ph-paint-brush-broad text-2xl text-neon-cyan\"><\/i>\n <\/div>\n <h4 class=\"text-xl font-bold text-white mb-4\">Design e UX<\/h4>\n <ul class=\"space-y-3 text-slate-400\">\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Personaliza\u00e7\u00e3o de Layout Premium alinhado \u00e0 sua marca.<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Design 100% Responsivo (Mobile First).<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Cria\u00e7\u00e3o de Banners rotativos para a Home.<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Foco na jornada do cliente para facilitar o checkout.<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"glass-card p-8 reveal delay-100 group\">\n <div class=\"h-12 w-12 rounded-lg bg-dark-800 border border-white\/10 flex items-center justify-center mb-6 group-hover:border-neon-pink\/50 transition-colors\">\n <i class=\"ph ph-package text-2xl text-neon-pink\"><\/i>\n <\/div>\n <h4 class=\"text-xl font-bold text-white mb-4\">Cat\u00e1logo e Conte\u00fado<\/h4>\n <ul class=\"space-y-3 text-slate-400\">\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Cadastro de at\u00e9 <strong>20 produtos<\/strong> iniciais completos.<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Configura\u00e7\u00e3o de varia\u00e7\u00f5es (tamanhos, kits, pesos).<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Cria\u00e7\u00e3o de P\u00e1ginas Institucionais (Quem Somos, Contato).<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> P\u00e1ginas de Pol\u00edticas Jur\u00eddicas (Trocas, Privacidade).<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"glass-card p-8 reveal delay-200 group relative overflow-hidden\">\n <div class=\"absolute -right-10 -bottom-10 opacity-10\">\n <i class=\"ph ph-rocket text-9xl text-white\"><\/i>\n <\/div>\n <div class=\"h-12 w-12 rounded-lg bg-dark-800 border border-white\/10 flex items-center justify-center mb-6 group-hover:border-white\/50 transition-colors\">\n <i class=\"ph ph-star text-2xl text-white\"><\/i>\n <\/div>\n <h4 class=\"text-xl font-bold text-white mb-4 flex items-center gap-2\">\n Integra\u00e7\u00f5es B\u00f4nus <span class=\"text-xs bg-neon-purple\/20 text-neon-purple px-2 py-1 rounded-full uppercase tracking-wider font-bold\">Incluso<\/span>\n <\/h4>\n <ul class=\"space-y-3 text-slate-400 relative z-10\">\n <li class=\"flex gap-3\"><i class=\"ph ph-whatsapp-logo text-green-500 mt-1\"><\/i> Bot\u00e3o flutuante de atendimento via WhatsApp.<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-instagram-logo text-pink-500 mt-1\"><\/i> Vincula\u00e7\u00e3o com Instagram (Preparo para Sacolinha).<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-google-logo text-blue-400 mt-1\"><\/i> Otimiza\u00e7\u00e3o SEO B\u00e1sica (Meta tags e URLs amig\u00e1veis).<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"investimento\" class=\"py-24 relative\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16 reveal\">\n <h2 class=\"text-sm font-mono text-neon-purple mb-2 uppercase tracking-widest\">Transpar\u00eancia<\/h2>\n <h3 class=\"text-3xl md:text-4xl font-bold text-white\">Investimento Necess\u00e1rio<\/h3>\n <p class=\"mt-4 text-slate-400 max-w-2xl mx-auto\">Custos divididos de forma clara entre o desenvolvimento e a infraestrutura da loja.<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n \n \n <div class=\"glass-card p-8 reveal delay-100 flex flex-col h-full border-white\/5 hover:border-white\/20\">\n <div class=\"mb-4 text-slate-400\"><i class=\"ph ph-globe-hemisphere-west text-3xl\"><\/i><\/div>\n <h4 class=\"text-lg font-bold text-white\">Registro de Dom\u00ednio<\/h4>\n <p class=\"text-sm text-slate-400 mb-6\">O endere\u00e7o do seu site (manteigarianacional.com.br)<\/p>\n <div class=\"mt-auto\">\n <div class=\"text-3xl font-bold text-white mb-1\">R$ 40<span class=\"text-sm text-slate-500 font-normal\">\/ano<\/span><\/div>\n <p class=\"text-xs text-slate-500 font-mono\">Pagamento: Registro.br<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-card p-1 relative reveal delay-200 transform md:-translate-y-4\">\n \n <div class=\"absolute inset-0 bg-gradient-to-r from-neon-purple via-neon-cyan to-neon-purple rounded-xl opacity-50\"><\/div>\n \n <div class=\"bg-dark-800 rounded-lg p-8 relative h-full flex flex-col\">\n <div class=\"absolute top-0 right-0 bg-gradient-to-r from-neon-purple to-neon-cyan text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg uppercase tracking-wider\">\n Servi\u00e7o Struxel\n <\/div>\n <div class=\"mb-4 text-neon-cyan\"><i class=\"ph ph-code-block text-4xl\"><\/i><\/div>\n <h4 class=\"text-2xl font-bold text-white\">Desenvolvimento Completo<\/h4>\n <p class=\"text-sm text-slate-300 mb-6 mt-2\">Cria\u00e7\u00e3o, layout, configura\u00e7\u00f5es e cadastro de 20 produtos conforme escopo detalhado.<\/p>\n \n <div class=\"mt-auto pt-6 border-t border-white\/10\">\n <div class=\"text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-400 mb-1\">\n R$ 1.500<span class=\"text-lg text-slate-500 font-normal\">,00<\/span>\n <\/div>\n <p class=\"text-xs text-neon-purple font-mono uppercase tracking-widest mt-2\">Taxa \u00danica<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-card p-8 reveal delay-300 flex flex-col h-full border-white\/5 hover:border-white\/20\">\n <div class=\"mb-4 text-slate-400\"><i class=\"ph ph-cloud-arrow-up text-3xl\"><\/i><\/div>\n <h4 class=\"text-lg font-bold text-white\">Plataforma E-commerce<\/h4>\n <p class=\"text-sm text-slate-400 mb-6\">Mensalidade Nuvemshop (Hospedagem, sistema de carrinho e manuten\u00e7\u00e3o).<\/p>\n <div class=\"mt-auto\">\n <div class=\"text-3xl font-bold text-white mb-1\">R$ 69<span class=\"text-sm text-slate-500 font-normal\">\/m\u00eas<\/span><\/div>\n <p class=\"text-xs text-slate-500 font-mono\">Pagamento: Nuvemshop<\/p>\n <\/div>\n <\/div>\n\n <\/div>\n \n <p class=\"text-center text-xs text-slate-500 mt-8 font-mono reveal delay-300\">\n * Os valores da Nuvemshop e do dom\u00ednio s\u00e3o estimativas padr\u00e3o e repassados diretamente \u00e0s respectivas empresas.\n <\/p>\n <\/div>\n <\/section>\n\n <section id=\"cronograma\" class=\"py-24 bg-dark-800\/30 border-t border-white\/5 relative\">\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16 reveal\">\n <h2 class=\"text-sm font-mono text-neon-cyan mb-2 uppercase tracking-widest\">Pr\u00f3ximos Passos<\/h2>\n <h3 class=\"text-3xl font-bold text-white\">Cronograma & Execu\u00e7\u00e3o<\/h3>\n <p class=\"mt-4 text-slate-400\">Prazo estimado: <span class=\"text-white font-bold\">7 a 10 dias \u00fateis<\/span> ap\u00f3s entrega dos materiais.<\/p>\n <\/div>\n\n <div class=\"relative border-l border-white\/10 ml-3 md:ml-0 md:pl-0\">\n \n <div class=\"mb-10 ml-8 md:ml-0 md:flex md:items-center reveal delay-100\">\n <div class=\"absolute w-4 h-4 bg-dark-900 border-2 border-neon-purple rounded-full -left-2.5 md:left-1\/2 md:-ml-2 mt-1.5 md:mt-0\"><\/div>\n <div class=\"md:w-1\/2 md:pr-12 md:text-right\">\n <h4 class=\"text-lg font-bold text-white\">1. Alinhamento & Briefing<\/h4>\n <p class=\"text-sm text-slate-400 mt-2\">Aprova\u00e7\u00e3o da proposta, assinatura do contrato e envio de logotipos, fotos e textos por parte da Manteigaria Nacional.<\/p>\n <\/div>\n <div class=\"hidden md:block md:w-1\/2 md:pl-12\">\n <div class=\"inline-flex items-center justify-center p-3 glass-card rounded-lg\"><i class=\"ph ph-handshake text-2xl text-neon-purple\"><\/i><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"mb-10 ml-8 md:ml-0 md:flex md:items-center md:flex-row-reverse reveal delay-200\">\n <div class=\"absolute w-4 h-4 bg-dark-900 border-2 border-neon-cyan rounded-full -left-2.5 md:left-1\/2 md:-ml-2 mt-1.5 md:mt-0\"><\/div>\n <div class=\"md:w-1\/2 md:pl-12\">\n <h4 class=\"text-lg font-bold text-white\">2. Estrutura\u00e7\u00e3o T\u00e9cnica<\/h4>\n <p class=\"text-sm text-slate-400 mt-2\">Cria\u00e7\u00e3o da conta Nuvemshop, apontamento de dom\u00ednio, setup de fretes e gateways de pagamento.<\/p>\n <\/div>\n <div class=\"hidden md:block md:w-1\/2 md:pr-12 md:text-right\">\n <div class=\"inline-flex items-center justify-center p-3 glass-card rounded-lg\"><i class=\"ph ph-gears text-2xl text-neon-cyan\"><\/i><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"mb-10 ml-8 md:ml-0 md:flex md:items-center reveal delay-300\">\n <div class=\"absolute w-4 h-4 bg-dark-900 border-2 border-neon-pink rounded-full -left-2.5 md:left-1\/2 md:-ml-2 mt-1.5 md:mt-0\"><\/div>\n <div class=\"md:w-1\/2 md:pr-12 md:text-right\">\n <h4 class=\"text-lg font-bold text-white\">3. Design & Cadastro<\/h4>\n <p class=\"text-sm text-slate-400 mt-2\">Personaliza\u00e7\u00e3o visual do layout, cria\u00e7\u00e3o de banners e cadastro detalhado dos 20 produtos.<\/p>\n <\/div>\n <div class=\"hidden md:block md:w-1\/2 md:pl-12\">\n <div class=\"inline-flex items-center justify-center p-3 glass-card rounded-lg\"><i class=\"ph ph-bezier-curve text-2xl text-neon-pink\"><\/i><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"ml-8 md:ml-0 md:flex md:items-center md:flex-row-reverse reveal delay-300\">\n <div class=\"absolute w-4 h-4 bg-neon-purple shadow-[0_0_10px_#8b5cf6] rounded-full -left-2.5 md:left-1\/2 md:-ml-2 mt-1.5 md:mt-0\"><\/div>\n <div class=\"md:w-1\/2 md:pl-12\">\n <h4 class=\"text-lg font-bold text-white\">4. Revis\u00e3o & Lan\u00e7amento<\/h4>\n <p class=\"text-sm text-slate-400 mt-2\">Testes de compra simulada, revis\u00e3o final em conjunto e publica\u00e7\u00e3o oficial da loja.<\/p>\n <\/div>\n <div class=\"hidden md:block md:w-1\/2 md:pr-12 md:text-right\">\n <div class=\"inline-flex items-center justify-center p-3 glass-card rounded-lg border-neon-purple\"><i class=\"ph ph-rocket-launch text-2xl text-white\"><\/i><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <footer class=\"bg-dark-900 border-t border-white\/10 pt-16 pb-8 relative overflow-hidden\">\n <div class=\"absolute top-0 left-1\/2 transform -translate-x-1\/2 w-[800px] h-[1px] bg-gradient-to-r from-transparent via-neon-purple\/50 to-transparent\"><\/div>\n \n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-12\">\n <div>\n <h3 class=\"text-2xl font-bold text-white mb-4\">Pronto para come\u00e7ar?<\/h3>\n <p class=\"text-slate-400 mb-6\">Aprove esta proposta e vamos iniciar a transforma\u00e7\u00e3o digital da Manteigaria Nacional hoje mesmo.<\/p>\n <a href=\"https:\/\/wa.me\/5561991207479\" target=\"_blank\" class=\"inline-flex items-center gap-2 btn-neon px-6 py-3 rounded-lg font-semibold text-white\">\n <i class=\"ph ph-whatsapp-logo text-xl\"><\/i> Falar com o Desenvolvedor\n <\/a>\n <\/div>\n \n <div class=\"glass-card p-6 border-white\/5 flex flex-col md:items-end text-left md:text-right\">\n <div class=\"flex items-center gap-2 mb-4 md:flex-row-reverse\">\n <div class=\"p-2 bg-dark-800 rounded-lg border border-white\/10\">\n <i class=\"ph ph-code text-xl text-neon-cyan\"><\/i>\n <\/div>\n <span class=\"font-mono font-bold text-lg\">Struxel<span class=\"text-neon-purple\">.<\/span><\/span>\n <\/div>\n <p class=\"text-white font-medium\">Pedro Renato<\/p>\n <p class=\"text-sm text-slate-400\">Web Designer & Desenvolvedor<\/p>\n <div class=\"mt-4 flex flex-col md:items-end gap-2 text-sm text-slate-400\">\n <a href=\"https:\/\/struxel.com.br\/\" target=\"_blank\" class=\"hover:text-neon-cyan transition-colors flex items-center gap-2 md:flex-row-reverse\"><i class=\"ph ph-link\"><\/i> struxel.com.br<\/a>\n <a href=\"mailto:contato@struxel.com.br\" class=\"hover:text-neon-cyan transition-colors flex items-center gap-2 md:flex-row-reverse\"><i class=\"ph ph-envelope-simple\"><\/i> contato@struxel.com.br<\/a>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"border-t border-white\/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4\">\n <p class=\"text-xs text-slate-500 font-mono\">\n © 2026 Struxel - Solu\u00e7\u00f5es Web. Proposta gerada para Manteigaria Nacional.\n <\/p>\n <div class=\"flex gap-4\">\n <a href=\"#\" class=\"text-slate-500 hover:text-white transition-colors\"><i class=\"ph ph-instagram-logo text-xl\"><\/i><\/a>\n <a href=\"#\" class=\"text-slate-500 hover:text-white transition-colors\"><i class=\"ph ph-linkedin-logo text-xl\"><\/i><\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n <script>\n \/\/ L\u00f3gica do Menu Mobile\n const btn = document.getElementById('mobile-menu-btn');\n const menu = document.getElementById('mobile-menu');\n\n btn.addEventListener('click', () => {\n menu.classList.toggle('hidden');\n });\n\n \/\/ Fechar menu mobile ao clicar em um link\n const mobileLinks = menu.querySelectorAll('a');\n mobileLinks.forEach(link => {\n link.addEventListener('click', () => {\n menu.classList.add('hidden');\n });\n });\n\n \/\/ Efeito de sombra no Navbar ao scrollar\n window.addEventListener('scroll', () => {\n const nav = document.getElementById('navbar');\n if (window.scrollY > 10) {\n nav.classList.add('shadow-lg', 'shadow-neon-purple\/5');\n } else {\n nav.classList.remove('shadow-lg', 'shadow-neon-purple\/5');\n }\n });\n\n \/\/ Anima\u00e7\u00e3o de Reveal no Scroll (Intersection Observer)\n function reveal() {\n var reveals = document.querySelectorAll(\".reveal\");\n for (var i = 0; i < reveals.length; i++) {\n var windowHeight = window.innerHeight;\n var elementTop = reveals[i].getBoundingClientRect().top;\n var elementVisible = 100; \/\/ Qu\u00e3o cedo a anima\u00e7\u00e3o dispara\n\n if (elementTop < windowHeight - elementVisible) {\n reveals[i].classList.add(\"active\");\n }\n }\n }\n\n \/\/ Dispara ao carregar a p\u00e1gina e ao scrollar\n window.addEventListener(\"scroll\", reveal);\n reveal(); \/\/ Chamada inicial para elementos que j\u00e1 est\u00e3o na tela\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 – Manteigaria Nacional | Struxel Struxel. Objetivo Escopo Investimento Cronograma Aprovar Proposta Objetivo Escopo Investimento Cronograma Proposta Comercial E-commerce de Alta Performance para Manteigaria Nacional Apresentamos a solu\u00e7\u00e3o completa para digitalizar suas vendas com um design premium, tecnologia Nuvemshop e experi\u00eancia do usu\u00e1rio focada em convers\u00e3o. Ver Entreg\u00e1veis @manteigarianacional O Desafio Transformar Visitas […]<\/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-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/proposta.struxel.com.br\/index.php?rest_route=\/wp\/v2\/pages\/9","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=9"}],"version-history":[{"count":7,"href":"https:\/\/proposta.struxel.com.br\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/proposta.struxel.com.br\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/proposta.struxel.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\n\n\n \n \n Proposta Comercial - Manteigaria Nacional | Struxel<\/title>\n \n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n \n \n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\n\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n mono: ['JetBrains Mono', 'monospace'],\n },\n colors: {\n dark: {\n 900: '#05050A', \/\/ Fundo principal super escuro\n 800: '#0A0A14', \/\/ Fundo secund\u00e1rio\n 700: '#141424', \/\/ Cards\n },\n neon: {\n purple: '#8B5CF6',\n cyan: '#06B6D4',\n pink: '#EC4899'\n }\n },\n backgroundImage: {\n 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',\n 'hero-glow': 'conic-gradient(from 180deg at 50% 50%, #8B5CF620 0deg, #06B6D420 180deg, #8B5CF620 360deg)',\n }\n }\n }\n }\n <\/script>\n\n <style>\n \/* Estilos Base e Scrollbar *\/\n body {\n background-color: #05050A;\n color: #E2E8F0;\n overflow-x: hidden;\n }\n \n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #05050A;\n }\n ::-webkit-scrollbar-thumb {\n background: #1e1e38;\n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #8B5CF6;\n }\n\n \/* Efeitos Neon e Glassmorphism inspirados nas imagens *\/\n .glass-card {\n background: rgba(20, 20, 36, 0.6);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(139, 92, 246, 0.15);\n border-radius: 1rem;\n transition: all 0.3s ease;\n }\n \n .glass-card:hover {\n border-color: rgba(6, 182, 212, 0.4);\n box-shadow: 0 0 20px rgba(6, 182, 212, 0.1), inset 0 0 10px rgba(139, 92, 246, 0.05);\n transform: translateY(-5px);\n }\n\n .text-gradient {\n background: linear-gradient(135deg, #8B5CF6, #06B6D4);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .btn-neon {\n background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(6, 182, 212, 0.2));\n border: 1px solid rgba(139, 92, 246, 0.5);\n backdrop-filter: blur(4px);\n transition: all 0.3s ease;\n }\n .btn-neon:hover {\n background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(6, 182, 212, 0.4));\n box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);\n border-color: rgba(6, 182, 212, 0.8);\n }\n\n \/* Background animado da Hero Section *\/\n .bg-mesh {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n background-image: \n radial-gradient(at 0% 0%, rgba(139, 92, 246, 0.15) 0px, transparent 50%),\n radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.15) 0px, transparent 50%),\n radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.1) 0px, transparent 50%);\n z-index: -1;\n filter: blur(40px);\n }\n\n \/* Anima\u00e7\u00f5es de Scroll (Reveal) *\/\n .reveal {\n opacity: 0;\n transform: translateY(30px);\n transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);\n }\n .reveal.active {\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* Delays para cards em sequ\u00eancia *\/\n .delay-100 { transition-delay: 100ms; }\n .delay-200 { transition-delay: 200ms; }\n .delay-300 { transition-delay: 300ms; }\n <\/style>\n<\/head>\n<body class=\"antialiased selection:bg-neon-purple selection:text-white\">\n\n <nav class=\"fixed w-full z-50 top-0 transition-all duration-300 bg-dark-900\/80 backdrop-blur-md border-b border-white\/5\" id=\"navbar\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between items-center h-20\">\n \n <div class=\"flex-shrink-0 flex items-center gap-2\">\n <div class=\"p-2 bg-gradient-to-br from-neon-purple\/20 to-neon-cyan\/20 rounded-lg border border-neon-purple\/30\">\n <i class=\"ph ph-code text-2xl text-neon-cyan\"><\/i>\n <\/div>\n <span class=\"font-mono font-bold text-xl tracking-tighter\">Struxel<span class=\"text-neon-purple\">.<\/span><\/span>\n <\/div>\n \n \n <div class=\"hidden md:flex space-x-8 items-center\">\n <a href=\"#objetivo\" class=\"text-sm font-medium text-slate-300 hover:text-white transition-colors\">Objetivo<\/a>\n <a href=\"#escopo\" class=\"text-sm font-medium text-slate-300 hover:text-white transition-colors\">Escopo<\/a>\n <a href=\"#investimento\" class=\"text-sm font-medium text-slate-300 hover:text-white transition-colors\">Investimento<\/a>\n <a href=\"#cronograma\" class=\"text-sm font-medium text-slate-300 hover:text-white transition-colors\">Cronograma<\/a>\n <a href=\"https:\/\/wa.me\/5561991207479\" target=\"_blank\" class=\"btn-neon px-5 py-2 rounded-full text-sm font-semibold text-white\">\n Aprovar Proposta\n <\/a>\n <\/div>\n\n \n <div class=\"md:hidden flex items-center\">\n <button id=\"mobile-menu-btn\" class=\"text-slate-300 hover:text-white focus:outline-none\">\n <i class=\"ph ph-list text-3xl\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"mobile-menu\" class=\"hidden md:hidden bg-dark-800 border-b border-white\/10 absolute w-full\">\n <div class=\"px-4 pt-2 pb-6 space-y-2\">\n <a href=\"#objetivo\" class=\"block px-3 py-2 text-base font-medium text-slate-300 hover:text-white hover:bg-dark-700 rounded-md\">Objetivo<\/a>\n <a href=\"#escopo\" class=\"block px-3 py-2 text-base font-medium text-slate-300 hover:text-white hover:bg-dark-700 rounded-md\">Escopo<\/a>\n <a href=\"#investimento\" class=\"block px-3 py-2 text-base font-medium text-slate-300 hover:text-white hover:bg-dark-700 rounded-md\">Investimento<\/a>\n <a href=\"#cronograma\" class=\"block px-3 py-2 text-base font-medium text-slate-300 hover:text-white hover:bg-dark-700 rounded-md\">Cronograma<\/a>\n <\/div>\n <\/div>\n <\/nav>\n\n <section class=\"relative min-h-screen flex items-center justify-center pt-20 overflow-hidden\">\n <div class=\"bg-mesh\"><\/div>\n \n <div class=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center reveal\">\n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full border border-white\/10 bg-white\/5 backdrop-blur-sm mb-8\">\n <span class=\"flex h-2 w-2 relative\">\n <span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-neon-cyan opacity-75\"><\/span>\n <span class=\"relative inline-flex rounded-full h-2 w-2 bg-neon-cyan\"><\/span>\n <\/span>\n <span class=\"text-xs font-medium text-slate-300 uppercase tracking-wider\">Proposta Comercial<\/span>\n <\/div>\n\n <h1 class=\"text-5xl md:text-7xl font-bold tracking-tight mb-6\">\n E-commerce de Alta Performance para <br class=\"hidden md:block\" \/>\n <span class=\"text-gradient\">Manteigaria Nacional<\/span>\n <\/h1>\n \n <p class=\"mt-4 text-xl text-slate-400 max-w-2xl mx-auto mb-10\">\n Apresentamos a solu\u00e7\u00e3o completa para digitalizar suas vendas com um design premium, tecnologia Nuvemshop e experi\u00eancia do usu\u00e1rio focada em convers\u00e3o.\n <\/p>\n\n <div class=\"flex flex-col sm:flex-row gap-4 justify-center\">\n <a href=\"#escopo\" class=\"btn-neon px-8 py-4 rounded-lg font-semibold text-white flex items-center justify-center gap-2\">\n Ver Entreg\u00e1veis <i class=\"ph ph-arrow-down-right\"><\/i>\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/manteigarianacional\/\" target=\"_blank\" class=\"px-8 py-4 rounded-lg font-semibold text-slate-300 bg-dark-700 hover:bg-dark-700\/80 border border-white\/5 transition-all flex items-center justify-center gap-2\">\n <i class=\"ph ph-instagram-logo\"><\/i> @manteigarianacional\n <\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"absolute bottom-10 left-1\/2 transform -translate-x-1\/2 animate-bounce\">\n <i class=\"ph ph-mouse text-3xl text-slate-500\"><\/i>\n <\/div>\n <\/section>\n\n <section id=\"objetivo\" class=\"py-24 relative\">\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center reveal\">\n <h2 class=\"text-sm font-mono text-neon-purple mb-2 uppercase tracking-widest\">O Desafio<\/h2>\n <h3 class=\"text-3xl md:text-4xl font-bold mb-8 text-white\">Transformar Visitas em <span class=\"text-neon-cyan\">Vendas<\/span><\/h3>\n \n <div class=\"glass-card p-8 md:p-12 text-left relative overflow-hidden\">\n <div class=\"absolute top-0 right-0 -mt-4 -mr-4 w-24 h-24 bg-neon-purple\/20 rounded-full blur-2xl\"><\/div>\n \n <p class=\"text-lg text-slate-300 leading-relaxed mb-6 relative z-10\">\n O objetivo principal deste projeto \u00e9 desenvolver uma loja virtual completa, moderna e otimizada para a <strong>Manteigaria Nacional<\/strong> utilizando a plataforma de ponta <strong>Nuvemshop<\/strong>.\n <\/p>\n <p class=\"text-lg text-slate-300 leading-relaxed relative z-10\">\n Vamos criar um ambiente de vendas seguro, com um design limpo e sofisticado que transmita a qualidade \u00edmpar dos seus produtos, oferecendo uma experi\u00eancia de compra fluida e intuitiva aos seus clientes, desde o acesso at\u00e9 o checkout.\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"escopo\" class=\"py-24 bg-dark-800\/50 border-y border-white\/5 relative\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16 reveal\">\n <h2 class=\"text-sm font-mono text-neon-purple mb-2 uppercase tracking-widest\">O que faremos<\/h2>\n <h3 class=\"text-3xl md:text-4xl font-bold text-white\">Escopo do Projeto & Entreg\u00e1veis<\/h3>\n <p class=\"mt-4 text-slate-400 max-w-2xl mx-auto\">Tudo que sua loja precisa para nascer profissional e pronta para faturar.<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8\">\n \n <div class=\"glass-card p-8 reveal delay-100 group\">\n <div class=\"h-12 w-12 rounded-lg bg-dark-800 border border-white\/10 flex items-center justify-center mb-6 group-hover:border-neon-purple\/50 transition-colors\">\n <i class=\"ph ph-hard-drives text-2xl text-neon-purple\"><\/i>\n <\/div>\n <h4 class=\"text-xl font-bold text-white mb-4\">Configura\u00e7\u00e3o e Estrutura<\/h4>\n <ul class=\"space-y-3 text-slate-400\">\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Abertura e setup completo na Nuvemshop.<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Apontamento de dom\u00ednio (manteigarianacional.com.br) e SSL.<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Integra\u00e7\u00e3o de Pagamento (Pix, Cart\u00e3o, Boleto via Nuvem Pago\/Mercado Pago).<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Configura\u00e7\u00e3o de Frete (Correios, Melhor Envio, Motoboy local).<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"glass-card p-8 reveal delay-200 group\">\n <div class=\"h-12 w-12 rounded-lg bg-dark-800 border border-white\/10 flex items-center justify-center mb-6 group-hover:border-neon-cyan\/50 transition-colors\">\n <i class=\"ph ph-paint-brush-broad text-2xl text-neon-cyan\"><\/i>\n <\/div>\n <h4 class=\"text-xl font-bold text-white mb-4\">Design e UX<\/h4>\n <ul class=\"space-y-3 text-slate-400\">\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Personaliza\u00e7\u00e3o de Layout Premium alinhado \u00e0 sua marca.<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Design 100% Responsivo (Mobile First).<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Cria\u00e7\u00e3o de Banners rotativos para a Home.<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Foco na jornada do cliente para facilitar o checkout.<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"glass-card p-8 reveal delay-100 group\">\n <div class=\"h-12 w-12 rounded-lg bg-dark-800 border border-white\/10 flex items-center justify-center mb-6 group-hover:border-neon-pink\/50 transition-colors\">\n <i class=\"ph ph-package text-2xl text-neon-pink\"><\/i>\n <\/div>\n <h4 class=\"text-xl font-bold text-white mb-4\">Cat\u00e1logo e Conte\u00fado<\/h4>\n <ul class=\"space-y-3 text-slate-400\">\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Cadastro de at\u00e9 <strong>20 produtos<\/strong> iniciais completos.<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Configura\u00e7\u00e3o de varia\u00e7\u00f5es (tamanhos, kits, pesos).<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> Cria\u00e7\u00e3o de P\u00e1ginas Institucionais (Quem Somos, Contato).<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-check-circle text-neon-cyan mt-1\"><\/i> P\u00e1ginas de Pol\u00edticas Jur\u00eddicas (Trocas, Privacidade).<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"glass-card p-8 reveal delay-200 group relative overflow-hidden\">\n <div class=\"absolute -right-10 -bottom-10 opacity-10\">\n <i class=\"ph ph-rocket text-9xl text-white\"><\/i>\n <\/div>\n <div class=\"h-12 w-12 rounded-lg bg-dark-800 border border-white\/10 flex items-center justify-center mb-6 group-hover:border-white\/50 transition-colors\">\n <i class=\"ph ph-star text-2xl text-white\"><\/i>\n <\/div>\n <h4 class=\"text-xl font-bold text-white mb-4 flex items-center gap-2\">\n Integra\u00e7\u00f5es B\u00f4nus <span class=\"text-xs bg-neon-purple\/20 text-neon-purple px-2 py-1 rounded-full uppercase tracking-wider font-bold\">Incluso<\/span>\n <\/h4>\n <ul class=\"space-y-3 text-slate-400 relative z-10\">\n <li class=\"flex gap-3\"><i class=\"ph ph-whatsapp-logo text-green-500 mt-1\"><\/i> Bot\u00e3o flutuante de atendimento via WhatsApp.<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-instagram-logo text-pink-500 mt-1\"><\/i> Vincula\u00e7\u00e3o com Instagram (Preparo para Sacolinha).<\/li>\n <li class=\"flex gap-3\"><i class=\"ph ph-google-logo text-blue-400 mt-1\"><\/i> Otimiza\u00e7\u00e3o SEO B\u00e1sica (Meta tags e URLs amig\u00e1veis).<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"investimento\" class=\"py-24 relative\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16 reveal\">\n <h2 class=\"text-sm font-mono text-neon-purple mb-2 uppercase tracking-widest\">Transpar\u00eancia<\/h2>\n <h3 class=\"text-3xl md:text-4xl font-bold text-white\">Investimento Necess\u00e1rio<\/h3>\n <p class=\"mt-4 text-slate-400 max-w-2xl mx-auto\">Custos divididos de forma clara entre o desenvolvimento e a infraestrutura da loja.<\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n \n \n <div class=\"glass-card p-8 reveal delay-100 flex flex-col h-full border-white\/5 hover:border-white\/20\">\n <div class=\"mb-4 text-slate-400\"><i class=\"ph ph-globe-hemisphere-west text-3xl\"><\/i><\/div>\n <h4 class=\"text-lg font-bold text-white\">Registro de Dom\u00ednio<\/h4>\n <p class=\"text-sm text-slate-400 mb-6\">O endere\u00e7o do seu site (manteigarianacional.com.br)<\/p>\n <div class=\"mt-auto\">\n <div class=\"text-3xl font-bold text-white mb-1\">R$ 40<span class=\"text-sm text-slate-500 font-normal\">\/ano<\/span><\/div>\n <p class=\"text-xs text-slate-500 font-mono\">Pagamento: Registro.br<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-card p-1 relative reveal delay-200 transform md:-translate-y-4\">\n \n <div class=\"absolute inset-0 bg-gradient-to-r from-neon-purple via-neon-cyan to-neon-purple rounded-xl opacity-50\"><\/div>\n \n <div class=\"bg-dark-800 rounded-lg p-8 relative h-full flex flex-col\">\n <div class=\"absolute top-0 right-0 bg-gradient-to-r from-neon-purple to-neon-cyan text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg uppercase tracking-wider\">\n Servi\u00e7o Struxel\n <\/div>\n <div class=\"mb-4 text-neon-cyan\"><i class=\"ph ph-code-block text-4xl\"><\/i><\/div>\n <h4 class=\"text-2xl font-bold text-white\">Desenvolvimento Completo<\/h4>\n <p class=\"text-sm text-slate-300 mb-6 mt-2\">Cria\u00e7\u00e3o, layout, configura\u00e7\u00f5es e cadastro de 20 produtos conforme escopo detalhado.<\/p>\n \n <div class=\"mt-auto pt-6 border-t border-white\/10\">\n <div class=\"text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-400 mb-1\">\n R$ 1.500<span class=\"text-lg text-slate-500 font-normal\">,00<\/span>\n <\/div>\n <p class=\"text-xs text-neon-purple font-mono uppercase tracking-widest mt-2\">Taxa \u00danica<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-card p-8 reveal delay-300 flex flex-col h-full border-white\/5 hover:border-white\/20\">\n <div class=\"mb-4 text-slate-400\"><i class=\"ph ph-cloud-arrow-up text-3xl\"><\/i><\/div>\n <h4 class=\"text-lg font-bold text-white\">Plataforma E-commerce<\/h4>\n <p class=\"text-sm text-slate-400 mb-6\">Mensalidade Nuvemshop (Hospedagem, sistema de carrinho e manuten\u00e7\u00e3o).<\/p>\n <div class=\"mt-auto\">\n <div class=\"text-3xl font-bold text-white mb-1\">R$ 69<span class=\"text-sm text-slate-500 font-normal\">\/m\u00eas<\/span><\/div>\n <p class=\"text-xs text-slate-500 font-mono\">Pagamento: Nuvemshop<\/p>\n <\/div>\n <\/div>\n\n <\/div>\n \n <p class=\"text-center text-xs text-slate-500 mt-8 font-mono reveal delay-300\">\n * Os valores da Nuvemshop e do dom\u00ednio s\u00e3o estimativas padr\u00e3o e repassados diretamente \u00e0s respectivas empresas.\n <\/p>\n <\/div>\n <\/section>\n\n <section id=\"cronograma\" class=\"py-24 bg-dark-800\/30 border-t border-white\/5 relative\">\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16 reveal\">\n <h2 class=\"text-sm font-mono text-neon-cyan mb-2 uppercase tracking-widest\">Pr\u00f3ximos Passos<\/h2>\n <h3 class=\"text-3xl font-bold text-white\">Cronograma & Execu\u00e7\u00e3o<\/h3>\n <p class=\"mt-4 text-slate-400\">Prazo estimado: <span class=\"text-white font-bold\">7 a 10 dias \u00fateis<\/span> ap\u00f3s entrega dos materiais.<\/p>\n <\/div>\n\n <div class=\"relative border-l border-white\/10 ml-3 md:ml-0 md:pl-0\">\n \n <div class=\"mb-10 ml-8 md:ml-0 md:flex md:items-center reveal delay-100\">\n <div class=\"absolute w-4 h-4 bg-dark-900 border-2 border-neon-purple rounded-full -left-2.5 md:left-1\/2 md:-ml-2 mt-1.5 md:mt-0\"><\/div>\n <div class=\"md:w-1\/2 md:pr-12 md:text-right\">\n <h4 class=\"text-lg font-bold text-white\">1. Alinhamento & Briefing<\/h4>\n <p class=\"text-sm text-slate-400 mt-2\">Aprova\u00e7\u00e3o da proposta, assinatura do contrato e envio de logotipos, fotos e textos por parte da Manteigaria Nacional.<\/p>\n <\/div>\n <div class=\"hidden md:block md:w-1\/2 md:pl-12\">\n <div class=\"inline-flex items-center justify-center p-3 glass-card rounded-lg\"><i class=\"ph ph-handshake text-2xl text-neon-purple\"><\/i><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"mb-10 ml-8 md:ml-0 md:flex md:items-center md:flex-row-reverse reveal delay-200\">\n <div class=\"absolute w-4 h-4 bg-dark-900 border-2 border-neon-cyan rounded-full -left-2.5 md:left-1\/2 md:-ml-2 mt-1.5 md:mt-0\"><\/div>\n <div class=\"md:w-1\/2 md:pl-12\">\n <h4 class=\"text-lg font-bold text-white\">2. Estrutura\u00e7\u00e3o T\u00e9cnica<\/h4>\n <p class=\"text-sm text-slate-400 mt-2\">Cria\u00e7\u00e3o da conta Nuvemshop, apontamento de dom\u00ednio, setup de fretes e gateways de pagamento.<\/p>\n <\/div>\n <div class=\"hidden md:block md:w-1\/2 md:pr-12 md:text-right\">\n <div class=\"inline-flex items-center justify-center p-3 glass-card rounded-lg\"><i class=\"ph ph-gears text-2xl text-neon-cyan\"><\/i><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"mb-10 ml-8 md:ml-0 md:flex md:items-center reveal delay-300\">\n <div class=\"absolute w-4 h-4 bg-dark-900 border-2 border-neon-pink rounded-full -left-2.5 md:left-1\/2 md:-ml-2 mt-1.5 md:mt-0\"><\/div>\n <div class=\"md:w-1\/2 md:pr-12 md:text-right\">\n <h4 class=\"text-lg font-bold text-white\">3. Design & Cadastro<\/h4>\n <p class=\"text-sm text-slate-400 mt-2\">Personaliza\u00e7\u00e3o visual do layout, cria\u00e7\u00e3o de banners e cadastro detalhado dos 20 produtos.<\/p>\n <\/div>\n <div class=\"hidden md:block md:w-1\/2 md:pl-12\">\n <div class=\"inline-flex items-center justify-center p-3 glass-card rounded-lg\"><i class=\"ph ph-bezier-curve text-2xl text-neon-pink\"><\/i><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"ml-8 md:ml-0 md:flex md:items-center md:flex-row-reverse reveal delay-300\">\n <div class=\"absolute w-4 h-4 bg-neon-purple shadow-[0_0_10px_#8b5cf6] rounded-full -left-2.5 md:left-1\/2 md:-ml-2 mt-1.5 md:mt-0\"><\/div>\n <div class=\"md:w-1\/2 md:pl-12\">\n <h4 class=\"text-lg font-bold text-white\">4. Revis\u00e3o & Lan\u00e7amento<\/h4>\n <p class=\"text-sm text-slate-400 mt-2\">Testes de compra simulada, revis\u00e3o final em conjunto e publica\u00e7\u00e3o oficial da loja.<\/p>\n <\/div>\n <div class=\"hidden md:block md:w-1\/2 md:pr-12 md:text-right\">\n <div class=\"inline-flex items-center justify-center p-3 glass-card rounded-lg border-neon-purple\"><i class=\"ph ph-rocket-launch text-2xl text-white\"><\/i><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <footer class=\"bg-dark-900 border-t border-white\/10 pt-16 pb-8 relative overflow-hidden\">\n <div class=\"absolute top-0 left-1\/2 transform -translate-x-1\/2 w-[800px] h-[1px] bg-gradient-to-r from-transparent via-neon-purple\/50 to-transparent\"><\/div>\n \n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-12\">\n <div>\n <h3 class=\"text-2xl font-bold text-white mb-4\">Pronto para come\u00e7ar?<\/h3>\n <p class=\"text-slate-400 mb-6\">Aprove esta proposta e vamos iniciar a transforma\u00e7\u00e3o digital da Manteigaria Nacional hoje mesmo.<\/p>\n <a href=\"https:\/\/wa.me\/5561991207479\" target=\"_blank\" class=\"inline-flex items-center gap-2 btn-neon px-6 py-3 rounded-lg font-semibold text-white\">\n <i class=\"ph ph-whatsapp-logo text-xl\"><\/i> Falar com o Desenvolvedor\n <\/a>\n <\/div>\n \n <div class=\"glass-card p-6 border-white\/5 flex flex-col md:items-end text-left md:text-right\">\n <div class=\"flex items-center gap-2 mb-4 md:flex-row-reverse\">\n <div class=\"p-2 bg-dark-800 rounded-lg border border-white\/10\">\n <i class=\"ph ph-code text-xl text-neon-cyan\"><\/i>\n <\/div>\n <span class=\"font-mono font-bold text-lg\">Struxel<span class=\"text-neon-purple\">.<\/span><\/span>\n <\/div>\n <p class=\"text-white font-medium\">Pedro Renato<\/p>\n <p class=\"text-sm text-slate-400\">Web Designer & Desenvolvedor<\/p>\n <div class=\"mt-4 flex flex-col md:items-end gap-2 text-sm text-slate-400\">\n <a href=\"https:\/\/struxel.com.br\/\" target=\"_blank\" class=\"hover:text-neon-cyan transition-colors flex items-center gap-2 md:flex-row-reverse\"><i class=\"ph ph-link\"><\/i> struxel.com.br<\/a>\n <a href=\"mailto:contato@struxel.com.br\" class=\"hover:text-neon-cyan transition-colors flex items-center gap-2 md:flex-row-reverse\"><i class=\"ph ph-envelope-simple\"><\/i> contato@struxel.com.br<\/a>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"border-t border-white\/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4\">\n <p class=\"text-xs text-slate-500 font-mono\">\n © 2026 Struxel - Solu\u00e7\u00f5es Web. Proposta gerada para Manteigaria Nacional.\n <\/p>\n <div class=\"flex gap-4\">\n <a href=\"#\" class=\"text-slate-500 hover:text-white transition-colors\"><i class=\"ph ph-instagram-logo text-xl\"><\/i><\/a>\n <a href=\"#\" class=\"text-slate-500 hover:text-white transition-colors\"><i class=\"ph ph-linkedin-logo text-xl\"><\/i><\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n <script>\n \/\/ L\u00f3gica do Menu Mobile\n const btn = document.getElementById('mobile-menu-btn');\n const menu = document.getElementById('mobile-menu');\n\n btn.addEventListener('click', () => {\n menu.classList.toggle('hidden');\n });\n\n \/\/ Fechar menu mobile ao clicar em um link\n const mobileLinks = menu.querySelectorAll('a');\n mobileLinks.forEach(link => {\n link.addEventListener('click', () => {\n menu.classList.add('hidden');\n });\n });\n\n \/\/ Efeito de sombra no Navbar ao scrollar\n window.addEventListener('scroll', () => {\n const nav = document.getElementById('navbar');\n if (window.scrollY > 10) {\n nav.classList.add('shadow-lg', 'shadow-neon-purple\/5');\n } else {\n nav.classList.remove('shadow-lg', 'shadow-neon-purple\/5');\n }\n });\n\n \/\/ Anima\u00e7\u00e3o de Reveal no Scroll (Intersection Observer)\n function reveal() {\n var reveals = document.querySelectorAll(\".reveal\");\n for (var i = 0; i < reveals.length; i++) {\n var windowHeight = window.innerHeight;\n var elementTop = reveals[i].getBoundingClientRect().top;\n var elementVisible = 100; \/\/ Qu\u00e3o cedo a anima\u00e7\u00e3o dispara\n\n if (elementTop < windowHeight - elementVisible) {\n reveals[i].classList.add(\"active\");\n }\n }\n }\n\n \/\/ Dispara ao carregar a p\u00e1gina e ao scrollar\n window.addEventListener(\"scroll\", reveal);\n reveal(); \/\/ Chamada inicial para elementos que j\u00e1 est\u00e3o na tela\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 – Manteigaria Nacional | Struxel Struxel. Objetivo Escopo Investimento Cronograma Aprovar Proposta Objetivo Escopo Investimento Cronograma Proposta Comercial E-commerce de Alta Performance para Manteigaria Nacional Apresentamos a solu\u00e7\u00e3o completa para digitalizar suas vendas com um design premium, tecnologia Nuvemshop e experi\u00eancia do usu\u00e1rio focada em convers\u00e3o. Ver Entreg\u00e1veis @manteigarianacional O Desafio Transformar Visitas […]<\/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-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/proposta.struxel.com.br\/index.php?rest_route=\/wp\/v2\/pages\/9","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=9"}],"version-history":[{"count":7,"href":"https:\/\/proposta.struxel.com.br\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/proposta.struxel.com.br\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/proposta.struxel.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}