diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 487fee4..70bfb59 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -80,6 +80,11 @@ const config: Config = {
           position: 'left',
           label: 'Tutorial',
         },
+        { 
+          to: '/servicos',  // Novo item - Serviços
+          label: 'Serviços',
+          position: 'left'
+        },
         { to: '/blog', label: 'Blog', position: 'left' },
         {
           href: 'https://github.com/facebook/docusaurus',
diff --git a/package-lock.json b/package-lock.json
index 915a177..22b269e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "takeode",
+  "name": "takeode.com",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "takeode",
+      "name": "takeode.com",
       "version": "0.0.0",
       "dependencies": {
         "@docusaurus/core": "3.7.0",
diff --git a/src/ChatWidget/ChatWidget.tsx b/src/ChatWidget/ChatWidget.tsx
new file mode 100644
index 0000000..06759f5
--- /dev/null
+++ b/src/ChatWidget/ChatWidget.tsx
@@ -0,0 +1,175 @@
+import React, { useState } from 'react';
+import styles from './styles.module.css';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+type ChatOption = 'whatsapp' | 'messenger' | 'internal';
+
+interface ChatWidgetProps {
+  whatsappNumber?: string;
+  messengerPageId?: string;
+  initialMessage?: string;
+}
+
+const ChatWidget: React.FC<ChatWidgetProps> = ({
+  whatsappNumber = '5562996641935', // Substitua pelo número real de WhatsApp
+  messengerPageId = '123456789', // Substitua pelo ID da página do Facebook
+  initialMessage = 'Olá! Como posso ajudar você hoje?',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [chatOption, setChatOption] = useState<ChatOption | null>(null);
+  const [message, setMessage] = useState('');
+  const [chatHistory, setChatHistory] = useState<Array<{text: string; isUser: boolean}>>([
+    { text: initialMessage, isUser: false }
+  ]);
+  
+  const { siteConfig } = useDocusaurusContext();
+  const siteName = siteConfig.title;
+
+  const toggleChat = () => {
+    setIsOpen(!isOpen);
+    if (!isOpen) {
+      setChatOption(null);
+    }
+  };
+
+  const selectChatOption = (option: ChatOption) => {
+    setChatOption(option);
+    
+    if (option === 'whatsapp') {
+      // Abrir WhatsApp em uma nova aba
+      window.open(`https://wa.me/${whatsappNumber}?text=Olá! Estou entrando em contato pelo site ${siteName}`, '_blank');
+      setIsOpen(false);
+    } else if (option === 'messenger') {
+      // Abrir Messenger em uma nova aba
+      window.open(`https://m.me/${messengerPageId}`, '_blank');
+      setIsOpen(false);
+    }
+    // Para a opção 'internal', mantemos o chat aberto e mostramos a interface
+  };
+
+  const sendMessage = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!message.trim()) return;
+
+    // Adicionar mensagem do usuário ao histórico
+    setChatHistory([...chatHistory, { text: message, isUser: true }]);
+    
+    // Simular resposta automática após 1 segundo
+    setTimeout(() => {
+      setChatHistory(prev => [
+        ...prev, 
+        { 
+          text: `Obrigado por sua mensagem! Um de nossos atendentes entrará em contato em breve.`, 
+          isUser: false 
+        }
+      ]);
+    }, 1000);
+    
+    setMessage('');
+  };
+
+  return (
+    <div className={styles.chatWidgetContainer}>
+      {isOpen && (
+        <div className={styles.chatWindow}>
+          {!chatOption ? (
+            <div className={styles.chatOptions}>
+              <h3>Como podemos ajudar?</h3>
+              <button 
+                className={styles.optionButton} 
+                onClick={() => selectChatOption('whatsapp')}
+              >
+                <img 
+                  src="/img/whatsapp-icon.png" 
+                  alt="WhatsApp" 
+                  className={styles.optionIcon}
+                  onError={handleImageError} 
+                />
+                WhatsApp
+              </button>
+              <button 
+                className={styles.optionButton} 
+                onClick={() => selectChatOption('messenger')}
+              >
+                <img 
+                  src="/img/messenger-icon.png" 
+                  alt="Messenger" 
+                  className={styles.optionIcon}
+                  onError={(e) => {
+                    const target = e.target as HTMLImageElement;
+                    target.onerror = null;
+                    target.style.display = 'none';
+                  }} 
+                />
+                Messenger
+              </button>
+              <button 
+                className={styles.optionButton} 
+                onClick={() => selectChatOption('internal')}
+              >
+                <img 
+                  src="/img/chat-icon.png" 
+                  alt="Chat" 
+                  className={styles.optionIcon}
+                  onError={(e) => {
+                    const target = e.target as HTMLImageElement;
+                    target.onerror = null;
+                    target.style.display = 'none';
+                  }}
+                />
+                Chat
+              </button>
+            </div>
+          ) : chatOption === 'internal' && (
+            <div className={styles.internalChat}>
+              <div className={styles.chatHeader}>
+                <h3>Chat de Suporte</h3>
+                <button 
+                  className={styles.backButton}
+                  onClick={() => setChatOption(null)}
+                >
+                  Voltar
+                </button>
+              </div>
+              <div className={styles.chatMessages}>
+                {chatHistory.map((msg, index) => (
+                  <div 
+                    key={index} 
+                    className={`${styles.message} ${msg.isUser ? styles.userMessage : styles.botMessage}`}
+                  >
+                    {msg.text}
+                  </div>
+                ))}
+              </div>
+              <form onSubmit={sendMessage} className={styles.chatInputForm}>
+                <input
+                  type="text"
+                  value={message}
+                  onChange={(e) => setMessage(e.target.value)}
+                  placeholder="Digite sua mensagem..."
+                  className={styles.chatInput}
+                />
+                <button type="submit" className={styles.sendButton}>
+                  Enviar
+                </button>
+              </form>
+            </div>
+          )}
+        </div>
+      )}
+      <button 
+        className={styles.chatToggleButton} 
+        onClick={toggleChat}
+        aria-label="Abrir chat de suporte"
+      >
+        {isOpen ? (
+          <span className={styles.closeIcon}>×</span>
+        ) : (
+          <span className={styles.chatIcon}>💬</span>
+        )}
+      </button>
+    </div>
+  );
+};
+
+export default ChatWidget;
\ No newline at end of file
diff --git a/src/ChatWidget/index.ts b/src/ChatWidget/index.ts
new file mode 100644
index 0000000..3114c39
--- /dev/null
+++ b/src/ChatWidget/index.ts
@@ -0,0 +1 @@
+export { default } from './ChatWidget';
\ No newline at end of file
diff --git a/src/ChatWidget/styles.module.css b/src/ChatWidget/styles.module.css
new file mode 100644
index 0000000..c91eb83
--- /dev/null
+++ b/src/ChatWidget/styles.module.css
@@ -0,0 +1,186 @@
+/* Contêiner principal do widget de chat */
+.chatWidgetContainer {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+  
+  /* Botão de alternância do chat */
+  .chatToggleButton {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: #4a86e8;
+    color: white;
+    border: none;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+  }
+  
+  .chatToggleButton:hover {
+    transform: scale(1.1);
+    background-color: #3b78e7;
+  }
+  
+  .chatIcon {
+    font-size: 28px;
+  }
+  
+  .closeIcon {
+    font-size: 36px;
+  }
+  
+  /* Janela de chat principal */
+  .chatWindow {
+    position: absolute;
+    bottom: 80px;
+    right: 0;
+    width: 320px;
+    max-height: 450px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* Opções de chat */
+  .chatOptions {
+    padding: 16px;
+  }
+  
+  .chatOptions h3 {
+    margin-top: 0;
+    margin-bottom: 16px;
+    text-align: center;
+    color: #333;
+  }
+  
+  .optionButton {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 12px 16px;
+    margin-bottom: 10px;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    background-color: #f8f8f8;
+    cursor: pointer;
+    font-size: 16px;
+    transition: all 0.2s ease;
+  }
+  
+  .optionButton:hover {
+    background-color: #f0f0f0;
+    border-color: #d0d0d0;
+  }
+  
+  .optionIcon {
+    width: 24px;
+    height: 24px;
+    margin-right: 10px;
+  }
+  
+  /* Chat interno */
+  .internalChat {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: 450px;
+  }
+  
+  .chatHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background-color: #4a86e8;
+    color: white;
+  }
+  
+  .chatHeader h3 {
+    margin: 0;
+    font-size: 16px;
+  }
+  
+  .backButton {
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 14px;
+    text-decoration: underline;
+    padding: 0;
+  }
+  
+  .chatMessages {
+    flex: 1;
+    padding: 16px;
+    overflow-y: auto;
+    max-height: 300px;
+  }
+  
+  .message {
+    margin-bottom: 12px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    max-width: 80%;
+    word-wrap: break-word;
+  }
+  
+  .userMessage {
+    background-color: #e3f2fd;
+    margin-left: auto;
+    text-align: right;
+  }
+  
+  .botMessage {
+    background-color: #f1f1f1;
+  }
+  
+  .chatInputForm {
+    display: flex;
+    padding: 12px;
+    border-top: 1px solid #e0e0e0;
+  }
+  
+  .chatInput {
+    flex: 1;
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    outline: none;
+    font-size: 14px;
+  }
+  
+  .sendButton {
+    background-color: #4a86e8;
+    color: white;
+    border: none;
+    border-radius: 20px;
+    padding: 8px 16px;
+    margin-left: 8px;
+    cursor: pointer;
+    font-size: 14px;
+  }
+  
+  .sendButton:hover {
+    background-color: #3b78e7;
+  }
+  
+  /* Responsividade para dispositivos móveis */
+  @media (max-width: 480px) {
+    .chatWindow {
+      width: 300px;
+      max-width: calc(100vw - 40px);
+      right: 0;
+    }
+  }
\ No newline at end of file
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 9f71a5d..9476f2d 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -16,6 +16,8 @@
   }
 }
 
+
+
 .buttons {
   display: flex;
   align-items: center;
diff --git a/src/pages/servicos.module.css b/src/pages/servicos.module.css
new file mode 100644
index 0000000..d7d086b
--- /dev/null
+++ b/src/pages/servicos.module.css
@@ -0,0 +1,97 @@
+/* Container principal */
+.servicesContainer {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    padding: 2rem 0;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  
+  /* Cards de serviço */
+  .serviceSection {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 1.5rem;
+    border-radius: 8px;
+    background-color: var(--ifm-color-emphasis-100);
+    transition: all 0.3s ease;
+    height: 100%;
+  }
+  
+  .serviceImageContainer {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    border-radius: 6px;
+    margin-bottom: 1.5rem;
+  }
+  
+  .serviceImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+  }
+  
+  .serviceTitle {
+    color: var(--ifm-color-primary);
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+    text-align: center;
+  }
+  
+  .serviceDescription {
+    font-size: 1rem;
+    line-height: 1.6;
+    color: var(--ifm-font-color-base);
+    margin-bottom: 1rem;
+    flex-grow: 1;
+  }
+  
+  .serviceFeatures ul {
+    padding-left: 1.25rem;
+    margin: 0.5rem 0;
+  }
+  
+  .serviceFeatures li {
+    margin-bottom: 0.25rem;
+    font-size: 0.9rem;
+  }
+  
+  /* Efeitos hover */
+  .serviceSection:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  }
+  
+  .serviceSection:hover .serviceImage {
+    transform: scale(1.05);
+  }
+
+  .heroBanner {
+    padding: 4rem 0;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    background: linear-gradient(135deg, var(--ifm-color-primary) 0%, #1a1a1a 100%);
+  }
+  
+  /* Responsividade */
+  @media (max-width: 768px) {
+    .servicesContainer {
+      grid-template-columns: 1fr;
+      padding: 1rem;
+    }
+    
+    .serviceSection {
+      margin-bottom: 1.5rem;
+    }
+  }
+  
+  @media (min-width: 1200px) {
+    .servicesContainer {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
\ No newline at end of file
diff --git a/src/pages/servicos.tsx b/src/pages/servicos.tsx
new file mode 100644
index 0000000..d4114fe
--- /dev/null
+++ b/src/pages/servicos.tsx
@@ -0,0 +1,105 @@
+// src/pages/servicos.tsx
+import React, { JSX } from 'react';
+import Layout from '@theme/Layout';
+import clsx from 'clsx';
+import styles from './servicos.module.css'; // Mantenha seus estilos
+import Link from '@docusaurus/Link'; // Importe o componente Link
+
+// Mantenha a importação das imagens se quiser usá-las na visão geral
+const WebDevImg = require('@site/static/img/web-development.jpg').default;
+const MvpAppsImg = require('@site/static/img/mvp-apps.png').default;
+const DesignImg = require('@site/static/img/design-uxui.jpg').default; // Corrigido 'desing' para 'design' no nome da variável, se o arquivo for 'design'
+
+// O cabeçalho pode continuar o mesmo
+function ServicesHeader() {
+  return (
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <div className={clsx('container', styles.headerContainer)}>
+        <h1 className={clsx('hero__title', styles.headerTitle)}>Serviços</h1>
+        <p className={clsx('hero__subtitle', styles.headerSubtitle)}>Nossas soluções profissionais</p>
+      </div>
+    </header>
+  );
+}
+
+// --- Componente para o Card de Serviço ---
+//    (Opcional, mas ajuda a organizar)
+interface ServiceCardProps {
+  title: string;
+  description: string;
+  imageUrl: string;
+  linkTo: string; // URL da página de detalhes
+  altText: string;
+}
+
+function ServiceCard({ title, description, imageUrl, linkTo, altText }: ServiceCardProps) {
+  return (
+    <section className={clsx(styles.serviceSection, styles.serviceCard)}> {/* Adicione uma classe 'serviceCard' se quiser estilizar diferente */}
+      <div className={styles.serviceImageContainer}>
+        <img
+          src={imageUrl}
+          alt={altText}
+          className={styles.serviceImage}
+          loading="lazy"
+        />
+      </div>
+      <h2 className={styles.serviceTitle}>{title}</h2>
+      <p className={styles.serviceDescription}>
+        {description}
+      </p>
+      {/* Adiciona o Link/Botão */}
+      <div className={styles.serviceLinkContainer}>
+        <Link
+          className={clsx('button button--secondary button--md', styles.serviceButton)} // Use classes de botão do Docusaurus
+          to={linkTo}>
+          Saiba Mais
+        </Link>
+      </div>
+    </section>
+  );
+}
+
+
+// --- Componente Principal da Página ---
+export default function ServicesOverview(): JSX.Element { // Renomeado para ServicesOverview para clareza
+  return (
+    <Layout
+      title="Nossos Serviços"
+      description="Conheça os serviços oferecidos pela Takeode">
+
+      <ServicesHeader />
+
+      <main className={clsx('container', styles.mainContainer)}>
+        {/* Usar a classe 'servicesContainer' que você já tinha */}
+        <div className={styles.servicesContainer}>
+
+          {/* Usar o componente ServiceCard para cada serviço */}
+          <ServiceCard
+            title="Desenvolvimento Web"
+            description="Criação de sites e aplicações web sob medida para seu negócio."
+            imageUrl={WebDevImg} // Usando a variável importada
+            altText="Desenvolvimento Web"
+            linkTo="/servicos/desenvolvimento-web" // Link para a página de detalhes
+          />
+
+          <ServiceCard
+            title="MVP de Apps"
+            description="Desenvolvimento rápido de aplicativos mínimos viáveis para validar sua ideia no mercado."
+            imageUrl={MvpAppsImg} // Usando a variável importada
+            altText="MVP de Aplicativos"
+            linkTo="/servicos/mvp-apps" // Link para a página de detalhes
+          />
+
+          <ServiceCard
+            title="Design UX/UI"
+            description="Interfaces intuitivas e agradáveis para melhor experiência do usuário."
+            imageUrl={DesignImg} // Usando a variável importada
+            altText="Design UX/UI"
+            linkTo="/servicos/design-ux-ui" // Link para a página de detalhes
+          />
+
+        </div>
+      </main>
+    </Layout>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/servicos/desenvolvimento-web.tsx b/src/pages/servicos/desenvolvimento-web.tsx
new file mode 100644
index 0000000..324ed60
--- /dev/null
+++ b/src/pages/servicos/desenvolvimento-web.tsx
@@ -0,0 +1,82 @@
+// src/pages/servicos/desenvolvimento-web.tsx
+import React, { JSX } from 'react';
+import Layout from '@theme/Layout';
+// Se você criar um CSS Module específico para detalhes:
+// import styles from './servico-detalhe.module.css';
+// Se for usar libs de galeria, importe aqui:
+// import ImageGallery from 'react-image-gallery';
+// import 'react-image-gallery/styles/css/image-gallery.css';
+
+// Exemplo de dados para a galeria (coloque suas imagens reais)
+const images = [
+  {
+    original: '/img/servicos/desenvolvimento-web/imagem1.jpg', // Crie esta pasta e adicione imagens
+    thumbnail: '/img/servicos/desenvolvimento-web/thumb1.jpg',
+  },
+  // Adicione mais imagens...
+];
+
+export default function ServicoDesenvolvimentoWeb(): JSX.Element {
+  return (
+    <Layout
+      title="Desenvolvimento Web" // Título específico do serviço
+      description="Detalhes sobre nosso serviço de Desenvolvimento Web. Criação de sites e aplicações web."> {/* Descrição SEO específica */}
+
+      {/* Você pode reutilizar o componente de header se quiser um banner */}
+      {/* <ServicesHeader /> */}
+
+      {/* Use a classe do CSS Module se criou um */}
+      <main className="container margin-vert--lg"> {/* Layout básico do Docusaurus */}
+        <h1>Desenvolvimento Web</h1>
+        <p>Aqui vai a introdução sobre o serviço de Desenvolvimento Web.</p>
+
+        {/* --- Seção de Descrição Completa --- */}
+        <section className="margin-vert--xl">
+          <h2>Descrição Completa</h2>
+          <p>
+            Detalhe aqui tudo sobre o desenvolvimento web: tecnologias usadas (React, Node, etc.),
+            tipos de projetos (sites institucionais, e-commerce, sistemas internos),
+            metodologia de trabalho, etc. Seja bem específico!
+          </p>
+          {/* Mais parágrafos, listas, etc. */}
+        </section>
+
+        {/* --- Seção da Galeria de Imagens --- */}
+        <section className="margin-vert--xl">
+          <h2>Galeria / Exemplos de Projetos</h2>
+          <div>
+            {/* <ImageGallery items={images} /> */}
+             <p><i>(Componente da galeria de imagens será adicionado aqui)</i></p>
+             {/* Exemplo com imagens estáticas por enquanto */}
+             <img src="/img/servicos/desenvolvimento-web/imagem1.jpg" alt="Exemplo Projeto Web 1" style={{maxWidth: '300px', margin: '10px'}}/>
+             {/* Adicione mais imagens ou a galeria */}
+          </div>
+        </section>
+
+        {/* --- Seção de Benefícios --- */}
+        <section className="margin-vert--xl">
+          <h2>Benefícios</h2>
+          <ul>
+            <li>Sites responsivos e otimizados para performance.</li>
+            <li>Design moderno e alinhado com sua marca.</li>
+            <li>Segurança e escalabilidade.</li>
+            <li>Integração com outras ferramentas.</li>
+            {/* Adicione mais benefícios */}
+          </ul>
+        </section>
+
+        {/* --- Seção Call-to-Action (CTA) --- */}
+        <section className="margin-vert--xl" style={{textAlign: 'center', backgroundColor: '#f0f0f0', padding: '2rem', borderRadius: '8px'}}>
+          <h2>Pronto para começar seu projeto web?</h2>
+          <p>
+            Solicite um orçamento sem compromisso e veja como podemos transformar sua presença online.
+          </p>
+          <a href="/contato" className="button button--primary button--lg">
+            Solicitar Orçamento Agora
+          </a>
+        </section>
+
+      </main>
+    </Layout>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/servicos/design-ux-ui.tsx b/src/pages/servicos/design-ux-ui.tsx
new file mode 100644
index 0000000..cab259d
--- /dev/null
+++ b/src/pages/servicos/design-ux-ui.tsx
@@ -0,0 +1,92 @@
+// src/pages/servicos/design-ux-ui.tsx
+import React, { JSX } from 'react';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+// Se for usar libs de galeria, importe aqui:
+// import ImageGallery from 'react-image-gallery';
+// import 'react-image-gallery/styles/css/image-gallery.css';
+
+// Exemplo de dados para a galeria (coloque suas imagens reais)
+const images = [
+  {
+    original: '/img/servicos/design-uxui/ui-mockup.jpg', // Crie esta pasta e adicione imagens
+    thumbnail: '/img/servicos/design-uxui/thumb-mockup.jpg',
+  },
+  {
+    original: '/img/servicos/design-uxui/wireframe.png',
+    thumbnail: '/img/servicos/design-uxui/thumb-wireframe.png',
+  },
+   {
+    original: '/img/servicos/design-uxui/user-journey.png',
+    thumbnail: '/img/servicos/design-uxui/thumb-journey.png',
+  },
+  // Adicione mais imagens...
+];
+
+export default function ServicoDesignUxUi(): JSX.Element {
+  return (
+    <Layout
+      title="Design UX/UI" // Título específico do serviço
+      description="Criação de interfaces intuitivas e experiências de usuário memoráveis para sites e aplicativos."> {/* Descrição SEO específica */}
+
+      <main className="container margin-vert--lg"> {/* Layout básico do Docusaurus */}
+        <h1>Design UX/UI</h1>
+        <p>Criamos interfaces que não são apenas bonitas, mas também funcionais, intuitivas e focadas em proporcionar a melhor experiência para o seu usuário final.</p>
+
+        {/* --- Seção de Descrição Completa --- */}
+        <section className="margin-vert--xl">
+          <h2>A Importância do UX e UI Design</h2>
+          <p>
+            **UX (User Experience) Design** foca na jornada completa do usuário ao interagir com seu produto ou serviço. Envolve pesquisa, entendimento das necessidades do usuário, arquitetura da informação, fluxos de navegação e testes para garantir que a experiência seja lógica, fácil e satisfatória.
+          </p>
+          <p>
+            **UI (User Interface) Design** é a parte visual e interativa. Cuida da aparência da interface (cores, tipografia, ícones, layouts) e como os elementos interativos se comportam, garantindo que seja esteticamente agradável, consistente com a marca e fácil de usar.
+          </p>
+          <p>
+            Nosso processo combina UX e UI para entregar soluções digitais que engajam usuários e alcançam os objetivos do seu negócio. Utilizamos ferramentas como Figma, Sketch e Adobe XD para criar wireframes, protótipos interativos e designs finais de alta fidelidade.
+          </p>
+          {/* Adicione mais detalhes sobre o processo, entregáveis, ferramentas, etc. */}
+        </section>
+
+        {/* --- Seção da Galeria de Imagens --- */}
+        <section className="margin-vert--xl">
+          <h2>Exemplos / Processo de Design</h2>
+          <div>
+            {/* <ImageGallery items={images} /> */}
+             <p><i>(Componente da galeria de imagens com exemplos de wireframes, mockups, protótipos, user flows)</i></p>
+             {/* Exemplo com imagens estáticas por enquanto */}
+             <img src="/img/servicos/design-uxui/wireframe.png" alt="Exemplo Wireframe" style={{maxWidth: '300px', margin: '10px'}}/>
+             <img src="/img/servicos/design-uxui/ui-mockup.jpg" alt="Exemplo Mockup UI" style={{maxWidth: '300px', margin: '10px'}}/>
+             <img src="/img/servicos/design-uxui/user-journey.png" alt="Exemplo Jornada do Usuário" style={{maxWidth: '300px', margin: '10px'}}/>
+             {/* Adicione mais imagens ou a galeria */}
+          </div>
+        </section>
+
+        {/* --- Seção de Benefícios --- */}
+        <section className="margin-vert--xl">
+          <h2>Benefícios de um Bom Design UX/UI</h2>
+          <ul>
+            <li>**Maior Engajamento:** Usuários permanecem mais tempo e interagem mais.</li>
+            <li>**Aumento da Conversão:** Facilita a jornada do usuário até a ação desejada.</li>
+            <li>**Redução de Custos:** Menos necessidade de retrabalho e suporte.</li>
+            <li>**Fortalecimento da Marca:** Transmite profissionalismo e confiança.</li>
+            <li>**Melhor Usabilidade:** Torna seu produto acessível e fácil de usar.</li>
+            {/* Adicione mais benefícios específicos da Takeode */}
+          </ul>
+        </section>
+
+        {/* --- Seção Call-to-Action (CTA) --- */}
+        <section className="margin-vert--xl" style={{textAlign: 'center', backgroundColor: '#f0f0f0', padding: '2rem', borderRadius: '8px'}}>
+          <h2>Quer melhorar a experiência dos seus usuários?</h2>
+          <p>
+            Entre em contato para discutir como nosso serviço de Design UX/UI pode elevar o nível do seu site ou aplicativo.
+          </p>
+          <Link href="/contato" className="button button--primary button--lg">
+            Otimizar Minha Interface
+          </Link>
+        </section>
+
+      </main>
+    </Layout>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/servicos/mvp-apps.tsx b/src/pages/servicos/mvp-apps.tsx
new file mode 100644
index 0000000..dc01da2
--- /dev/null
+++ b/src/pages/servicos/mvp-apps.tsx
@@ -0,0 +1,90 @@
+// src/pages/servicos/mvp-de-apps.tsx
+import React, { JSX } from 'react';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link'; // Importar Link se ainda não estiver lá
+// Se for usar libs de galeria, importe aqui:
+// import ImageGallery from 'react-image-gallery';
+// import 'react-image-gallery/styles/css/image-gallery.css';
+
+// Exemplo de dados para a galeria (coloque suas imagens reais)
+const images = [
+  {
+    original: '/img/servicos/mvp-apps/app-tela1.jpg', // Crie esta pasta e adicione imagens
+    thumbnail: '/img/servicos/mvp-apps/thumb-app1.jpg',
+  },
+  {
+    original: '/img/servicos/mvp-apps/app-fluxo.png',
+    thumbnail: '/img/servicos/mvp-apps/thumb-fluxo.png',
+  },
+  // Adicione mais imagens...
+];
+
+export default function ServicoMvpDeApps(): JSX.Element {
+  return (
+    <Layout
+      title="MVP de Apps" // Título específico do serviço
+      description="Desenvolvimento ágil de MVPs (Minimum Viable Product) para validar sua ideia de aplicativo rapidamente."> {/* Descrição SEO específica */}
+
+      <main className="container margin-vert--lg"> {/* Layout básico do Docusaurus */}
+        <h1>MVP de Apps</h1>
+        <p>Transforme sua ideia inovadora em um aplicativo funcional rapidamente com nosso serviço de desenvolvimento de MVP (Produto Mínimo Viável).</p>
+
+        {/* --- Seção de Descrição Completa --- */}
+        <section className="margin-vert--xl">
+          <h2>O que é um MVP e por que começar com um?</h2>
+          <p>
+            Um MVP é a versão mais simples do seu aplicativo, contendo apenas as funcionalidades essenciais para resolver o problema principal do seu público-alvo. Lançar um MVP permite:
+          </p>
+          <ul>
+            <li>Validar sua ideia no mercado real com baixo investimento inicial.</li>
+            <li>Coletar feedback valioso de usuários reais (early adopters).</li>
+            <li>Iterar e adicionar novas funcionalidades de forma mais assertiva.</li>
+            <li>Reduzir riscos e tempo de desenvolvimento.</li>
+          </ul>
+          <p>
+            Utilizamos metodologias ágeis e tecnologias modernas (como React Native, Flutter, ou desenvolvimento nativo focado) para entregar seu MVP com qualidade e velocidade. Analisamos sua ideia, definimos o escopo essencial e partimos para o desenvolvimento focado no valor central.
+          </p>
+          {/* Adicione mais detalhes sobre o processo, tecnologias, etc. */}
+        </section>
+
+        {/* --- Seção da Galeria de Imagens --- */}
+        <section className="margin-vert--xl">
+          <h2>Exemplos / Processo</h2>
+          <div>
+            {/* <ImageGallery items={images} /> */}
+             <p><i>(Componente da galeria de imagens com exemplos de telas de MVPs, fluxos, etc.)</i></p>
+             {/* Exemplo com imagens estáticas por enquanto */}
+             <img src="/img/servicos/mvp-apps/app-tela1.jpg" alt="Exemplo Tela MVP" style={{maxWidth: '250px', margin: '10px'}}/>
+             <img src="/img/servicos/mvp-apps/app-fluxo.png" alt="Exemplo Fluxo App" style={{maxWidth: '400px', margin: '10px'}}/>
+             {/* Adicione mais imagens ou a galeria */}
+          </div>
+        </section>
+
+        {/* --- Seção de Benefícios --- */}
+        <section className="margin-vert--xl">
+          <h2>Benefícios de Desenvolver seu MVP Conosco</h2>
+          <ul>
+            <li>**Velocidade:** Lançamento rápido para validação ágil.</li>
+            <li>**Custo-Efetivo:** Foco no essencial, otimizando seu investimento.</li>
+            <li>**Validação de Mercado:** Teste sua ideia antes de grandes aportes.</li>
+            <li>**Flexibilidade:** Adapte o produto com base em feedback real.</li>
+            <li>**Foco no Usuário:** Desenvolvimento centrado nas necessidades principais.</li>
+            {/* Adicione mais benefícios específicos da Takeode */}
+          </ul>
+        </section>
+
+        {/* --- Seção Call-to-Action (CTA) --- */}
+        <section className="margin-vert--xl" style={{textAlign: 'center', backgroundColor: '#f0f0f0', padding: '2rem', borderRadius: '8px'}}>
+          <h2>Tem uma ideia de aplicativo?</h2>
+          <p>
+            Vamos conversar sobre como um MVP pode ser o primeiro passo para o sucesso. Peça um orçamento!
+          </p>
+          <Link href="/contato" className="button button--primary button--lg">
+            Validar Minha Ideia
+          </Link>
+        </section>
+
+      </main>
+    </Layout>
+  );
+}
\ No newline at end of file
diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx
new file mode 100644
index 0000000..629a46e
--- /dev/null
+++ b/src/theme/Root.tsx
@@ -0,0 +1,16 @@
+import React, { JSX, ReactNode } from 'react';
+import ChatWidget from '../ChatWidget';
+
+// Componente Root que envolve toda a aplicação Docusaurus
+export default function Root({ children }: { children: ReactNode }): JSX.Element {
+  return (
+    <>
+      {children}
+      <ChatWidget 
+        whatsappNumber="5562996641935" // Substitua pelo número real
+        messengerPageId="123456789"     // Substitua pelo ID da página do Facebook
+        initialMessage="Olá! Como posso ajudar você hoje?"
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/static/img/chat-icon.png b/static/img/chat-icon.png
new file mode 100644
index 0000000..ac86671
Binary files /dev/null and b/static/img/chat-icon.png differ
diff --git a/static/img/desing-uxui.jpg b/static/img/desing-uxui.jpg
new file mode 100644
index 0000000..8d16985
Binary files /dev/null and b/static/img/desing-uxui.jpg differ
diff --git a/static/img/mvp-apps.png b/static/img/mvp-apps.png
new file mode 100644
index 0000000..eaae792
Binary files /dev/null and b/static/img/mvp-apps.png differ
diff --git a/static/img/web-development.jpg b/static/img/web-development.jpg
new file mode 100644
index 0000000..4e8c901
Binary files /dev/null and b/static/img/web-development.jpg differ
diff --git a/static/img/whatsapp-icon.png b/static/img/whatsapp-icon.png
new file mode 100644
index 0000000..984a501
Binary files /dev/null and b/static/img/whatsapp-icon.png differ