{"id":97,"date":"2025-06-12T15:49:48","date_gmt":"2025-06-12T14:49:48","guid":{"rendered":"https:\/\/sa.ib6.pt\/?page_id=97"},"modified":"2025-06-13T12:33:09","modified_gmt":"2025-06-13T11:33:09","slug":"meusservicos","status":"publish","type":"page","link":"https:\/\/sa.ib6.pt\/?page_id=97","title":{"rendered":"Meus Servi\u00e7os"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"97\" class=\"elementor elementor-97\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-247cc08 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"247cc08\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c9f38e1 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"c9f38e1\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"services-section\">\r\n  <!-- Canvas para as part\u00edculas -->\r\n  <canvas id=\"services-particles\" class=\"particles-background\"><\/canvas>\r\n  \r\n  <div class=\"services-container\">\r\n    <h1 class=\"services-title\">Meus Servi\u00e7os<\/h1>\r\n    \r\n    <div class=\"services-grid\">\r\n      <!-- Desenvolvimento Web -->\r\n      <div class=\"service-card\">\r\n        <div class=\"service-icon\">\r\n          <i class=\"fas fa-code\"><\/i>\r\n        <\/div>\r\n        <h2 class=\"service-name\">Desenvolvimento Web<\/h2>\r\n        <p class=\"service-description\">\r\n          Cria\u00e7\u00e3o de sites e aplica\u00e7\u00f5es modernas, r\u00e1pidos e responsivos. Do front-end ao back-end tudo com foco em performance e experi\u00eancia do usu\u00e1rio.\r\n        <\/p>\r\n        <div class=\"service-skills\">\r\n          <div class=\"skill-category\">\r\n            <h3 class=\"skill-title\">FRONT-END<\/h3>\r\n            <p class=\"skill-items\">HTML, CSS, JavaScript<\/p>\r\n          <\/div>\r\n          <div class=\"skill-category\">\r\n            <h3 class=\"skill-title\">BACK-END<\/h3>\r\n            <p class=\"skill-items\">Banco de Dados<\/p>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"service-hover-effect\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Design de Interfaces -->\r\n      <div class=\"service-card\">\r\n        <div class=\"service-icon\">\r\n          <i class=\"fas fa-paint-brush\"><\/i>\r\n        <\/div>\r\n        <h2 class=\"service-name\">Design de Interfaces<\/h2>\r\n        <p class=\"service-description\">\r\n          Projetos visuais funcionais, com foco em usabilidade e est\u00e9tica, para oferecer experi\u00eancias digitais envolventes.\r\n        <\/p>\r\n        <div class=\"service-skills\">\r\n          <div class=\"skill-category\">\r\n            <h3 class=\"skill-title\">UI DESIGN<\/h3>\r\n            <p class=\"skill-items\">Identidade visual, tipografia, cores<\/p>\r\n          <\/div>\r\n          <div class=\"skill-category\">\r\n            <h3 class=\"skill-title\">UX DESIGN<\/h3>\r\n            <p class=\"skill-items\">Web Design<\/p>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"service-hover-effect\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Desenvolvimento de Jogos -->\r\n      <div class=\"service-card\">\r\n        <div class=\"service-icon\">\r\n          <i class=\"fas fa-gamepad\"><\/i>\r\n        <\/div>\r\n        <h2 class=\"service-name\">Desenvolvimento de Jogos<\/h2>\r\n        <p class=\"service-description\">\r\n          Cria\u00e7\u00e3o de jogos interativos com programa\u00e7\u00e3o s\u00f3lida e mec\u00e2nicas bem definidas. Ideal para projetos educacionais, prot\u00f3tipos ou games independentes.\r\n        <\/p>\r\n        <div class=\"service-skills\">\r\n          <div class=\"skill-category\">\r\n            <h3 class=\"skill-title\">ENGINES<\/h3>\r\n            <p class=\"skill-items\">Unity (C#), Unreal<\/p>\r\n          <\/div>\r\n          <div class=\"skill-category\">\r\n            <h3 class=\"skill-title\">TIPOS DE JOGOS<\/h3>\r\n            <p class=\"skill-items\">2D, Desktop<\/p>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"service-hover-effect\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Manuten\u00e7\u00e3o e Suporte -->\r\n      <div class=\"service-card\">\r\n        <div class=\"service-icon\">\r\n          <i class=\"fas fa-tools\"><\/i>\r\n        <\/div>\r\n        <h2 class=\"service-name\">Manuten\u00e7\u00e3o e Suporte<\/h2>\r\n        <p class=\"service-description\">\r\n          Servi\u00e7os cont\u00ednuos para garantir que seu site ou sistema continue funcionando perfeitamente.\r\n        <\/p>\r\n        <div class=\"service-skills\">\r\n          <div class=\"skill-category\">\r\n            <h3 class=\"skill-title\">ATUALIZA\u00c7\u00d5ES<\/h3>\r\n            <p class=\"skill-items\">Corre\u00e7\u00f5es de bugs, melhorias<\/p>\r\n          <\/div>\r\n          <div class=\"skill-category\">\r\n            <h3 class=\"skill-title\">SUPORTE<\/h3>\r\n            <p class=\"skill-items\">Monitoramento, backup, seguran\u00e7a<\/p>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"service-hover-effect\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700&display=swap');\r\n  @import url('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css');\r\n  \r\n  :root {\r\n    --dark: #0e0e0e;\r\n    --light: #ffffff;\r\n    --medium-gray: #7a7a7a;\r\n    --accent: #00a8ff;\r\n    --card-bg: rgba(26, 26, 26, 0.7); \/* Fundo mais transparente *\/\r\n  }\r\n  \r\n  .services-section {\r\n    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;\r\n    color: var(--light);\r\n    padding: 80px 20px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    background: transparent !important; \/* Fundo totalmente transparente *\/\r\n  }\r\n  \r\n  .particles-background {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 0;\r\n    pointer-events: none;\r\n  }\r\n  \r\n  .services-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n  \r\n  .services-title {\r\n    font-size: 42px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.5px;\r\n    margin-bottom: 60px;\r\n    text-align: center;\r\n    text-transform: uppercase;\r\n    position: relative;\r\n  }\r\n  \r\n  .services-title::after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: -20px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 80px;\r\n    height: 3px;\r\n    background: var(--light);\r\n    opacity: 0.3;\r\n  }\r\n  \r\n  .services-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\r\n    gap: 30px;\r\n  }\r\n  \r\n  .service-card {\r\n    background: var(--card-bg);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    border-radius: 12px;\r\n    padding: 40px;\r\n    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    position: relative;\r\n    overflow: hidden;\r\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\r\n    backdrop-filter: blur(10px); \/* Aumentei o blur para melhor efeito de vidro *\/\r\n  }\r\n  \r\n  .service-card:hover {\r\n    transform: translateY(-10px);\r\n    box-shadow: 0 15px 30px rgba(0, 168, 255, 0.2);\r\n    border-color: rgba(0, 168, 255, 0.3);\r\n    background: rgba(30, 30, 30, 0.8);\r\n  }\r\n  \r\n  \/* Restante do CSS permanece igual *\/\r\n  .service-icon {\r\n    font-size: 32px;\r\n    color: var(--accent);\r\n    margin-bottom: 20px;\r\n    transition: all 0.3s ease;\r\n  }\r\n  \r\n  .service-card:hover .service-icon {\r\n    transform: scale(1.2) rotate(10deg);\r\n  }\r\n  \r\n  .service-name {\r\n    font-size: 24px;\r\n    font-weight: 600;\r\n    margin-bottom: 20px;\r\n    color: var(--light);\r\n    transition: all 0.3s ease;\r\n  }\r\n  \r\n  .service-card:hover .service-name {\r\n    color: var(--accent);\r\n  }\r\n  \r\n  .service-description {\r\n    font-size: 16px;\r\n    font-weight: 300;\r\n    line-height: 1.6;\r\n    margin-bottom: 30px;\r\n    color: var(--medium-gray);\r\n    transition: all 0.3s ease;\r\n  }\r\n  \r\n  .service-card:hover .service-description {\r\n    color: rgba(255, 255, 255, 0.9);\r\n  }\r\n  \r\n  .service-skills {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 15px;\r\n  }\r\n  \r\n  .skill-category {\r\n    margin-bottom: 10px;\r\n  }\r\n  \r\n  .skill-title {\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    margin-bottom: 5px;\r\n    color: var(--light);\r\n    transition: all 0.3s ease;\r\n  }\r\n  \r\n  .service-card:hover .skill-title {\r\n    color: var(--accent);\r\n  }\r\n  \r\n  .skill-items {\r\n    font-size: 14px;\r\n    font-weight: 300;\r\n    color: var(--medium-gray);\r\n    transition: all 0.3s ease;\r\n  }\r\n  \r\n  .service-card:hover .skill-items {\r\n    color: rgba(255, 255, 255, 0.8);\r\n  }\r\n  \r\n  .service-hover-effect {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: radial-gradient(\r\n      circle at var(--mouse-x) var(--mouse-y),\r\n      rgba(0, 168, 255, 0.05),\r\n      transparent 80%\r\n    );\r\n    opacity: 0;\r\n    transition: opacity 0.3s ease;\r\n    pointer-events: none;\r\n    z-index: 0;\r\n  }\r\n  \r\n  .service-card:hover .service-hover-effect {\r\n    opacity: 1;\r\n  }\r\n  \r\n  \/* Efeito de brilho no card *\/\r\n  .service-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -50%;\r\n    left: -50%;\r\n    width: 200%;\r\n    height: 200%;\r\n    background: linear-gradient(\r\n      to bottom right,\r\n      transparent,\r\n      rgba(255, 255, 255, 0.03),\r\n      transparent\r\n    );\r\n    transform: rotate(30deg);\r\n    opacity: 0;\r\n    transition: opacity 0.5s ease;\r\n    pointer-events: none;\r\n  }\r\n  \r\n  .service-card:hover::before {\r\n    opacity: 1;\r\n    animation: shine 1.5s ease infinite;\r\n  }\r\n  \r\n  @keyframes shine {\r\n    from { transform: rotate(30deg) translateX(-100%); }\r\n    to { transform: rotate(30deg) translateX(100%); }\r\n  }\r\n  \r\n  \/* Responsivo *\/\r\n  @media (max-width: 768px) {\r\n    .services-grid {\r\n      grid-template-columns: 1fr;\r\n    }\r\n    \r\n    .service-card {\r\n      padding: 30px;\r\n    }\r\n    \r\n    .services-title {\r\n      font-size: 36px;\r\n      margin-bottom: 40px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n    \/\/ Configura\u00e7\u00e3o das part\u00edculas\r\n    const canvas = document.getElementById('services-particles');\r\n    const ctx = canvas.getContext('2d');\r\n    \r\n    \/\/ Ajustar tamanho do canvas\r\n    function resizeCanvas() {\r\n      canvas.width = canvas.offsetWidth;\r\n      canvas.height = canvas.offsetHeight;\r\n    }\r\n    \r\n    window.addEventListener('resize', resizeCanvas);\r\n    resizeCanvas();\r\n    \r\n    \/\/ Criar part\u00edculas\r\n    const particles = [];\r\n    const particleCount = Math.floor(window.innerWidth \/ 10); \/\/ Ajusta quantidade pelo tamanho da tela\r\n    \r\n    for (let i = 0; i < particleCount; i++) {\r\n      particles.push({\r\n        x: Math.random() * canvas.width,\r\n        y: Math.random() * canvas.height,\r\n        size: Math.random() * 2 + 1,\r\n        speedX: (Math.random() - 0.5) * 0.5,\r\n        speedY: (Math.random() - 0.5) * 0.5,\r\n        color: `rgba(255, 255, 255, ${Math.random() * 0.1 + 0.05})` \/\/ Part\u00edculas mais sutis\r\n      });\r\n    }\r\n    \r\n    \/\/ Animar part\u00edculas\r\n    function animateParticles() {\r\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n      \r\n      \/\/ Atualizar e desenhar part\u00edculas\r\n      for (let i = 0; i < particles.length; i++) {\r\n        const p = particles[i];\r\n        \r\n        \/\/ Mover part\u00edculas\r\n        p.x += p.speedX;\r\n        p.y += p.speedY;\r\n        \r\n        \/\/ Rebater nas bordas\r\n        if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;\r\n        if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;\r\n        \r\n        \/\/ Desenhar part\u00edcula\r\n        ctx.beginPath();\r\n        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\r\n        ctx.fillStyle = p.color;\r\n        ctx.fill();\r\n        \r\n        \/\/ Conectar part\u00edculas pr\u00f3ximas\r\n        for (let j = i + 1; j < particles.length; j++) {\r\n          const p2 = particles[j];\r\n          const distance = Math.sqrt(\r\n            Math.pow(p.x - p2.x, 2) + \r\n            Math.pow(p.y - p2.y, 2)\r\n          );\r\n          \r\n          if (distance < 100) {\r\n            ctx.beginPath();\r\n            ctx.strokeStyle = `rgba(255, 255, 255, ${0.05 - distance\/2000})`; \/\/ Conex\u00f5es mais sutis\r\n            ctx.lineWidth = 0.3;\r\n            ctx.moveTo(p.x, p.y);\r\n            ctx.lineTo(p2.x, p2.y);\r\n            ctx.stroke();\r\n          }\r\n        }\r\n      }\r\n      \r\n      requestAnimationFrame(animateParticles);\r\n    }\r\n    \r\n    animateParticles();\r\n    \r\n    \/\/ Efeito de seguir mouse nos cards\r\n    const cards = document.querySelectorAll('.service-card');\r\n    \r\n    cards.forEach(card => {\r\n      card.addEventListener('mousemove', (e) => {\r\n        const rect = card.getBoundingClientRect();\r\n        const x = e.clientX - rect.left;\r\n        const y = e.clientY - rect.top;\r\n        \r\n        card.style.setProperty('--mouse-x', `${x}px`);\r\n        card.style.setProperty('--mouse-y', `${y}px`);\r\n      });\r\n      \r\n      \/\/ Efeito de clique\r\n      card.addEventListener('click', function() {\r\n        \/\/ Adicionar efeito de pulso\r\n        const pulse = document.createElement('div');\r\n        pulse.style.position = 'absolute';\r\n        pulse.style.borderRadius = '12px';\r\n        pulse.style.backgroundColor = 'rgba(0, 168, 255, 0.2)';\r\n        pulse.style.pointerEvents = 'none';\r\n        pulse.style.zIndex = '10';\r\n        pulse.style.top = '0';\r\n        pulse.style.left = '0';\r\n        pulse.style.width = '100%';\r\n        pulse.style.height = '100%';\r\n        pulse.style.animation = 'pulse 0.6s ease-out forwards';\r\n        \r\n        this.appendChild(pulse);\r\n        \r\n        \/\/ Remover ap\u00f3s anima\u00e7\u00e3o\r\n        setTimeout(() => {\r\n          pulse.remove();\r\n        }, 600);\r\n      });\r\n    });\r\n    \r\n    \/\/ Adicionar anima\u00e7\u00e3o de pulso\r\n    const style = document.createElement('style');\r\n    style.textContent = `\r\n      @keyframes pulse {\r\n        0% { transform: scale(1); opacity: 1; }\r\n        100% { transform: scale(1.05); opacity: 0; }\r\n      }\r\n    `;\r\n    document.head.appendChild(style);\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Meus Servi\u00e7os Desenvolvimento Web Cria\u00e7\u00e3o de sites e aplica\u00e7\u00f5es modernas, r\u00e1pidos e responsivos. Do front-end ao back-end tudo com foco em performance e experi\u00eancia do usu\u00e1rio. FRONT-END HTML, CSS, JavaScript BACK-END Banco de Dados Design de Interfaces Projetos visuais funcionais, com foco em usabilidade e est\u00e9tica, para oferecer experi\u00eancias digitais envolventes. UI DESIGN Identidade visual, tipografia, cores UX DESIGN Web Design Desenvolvimento de Jogos Cria\u00e7\u00e3o de jogos interativos com programa\u00e7\u00e3o s\u00f3lida e mec\u00e2nicas bem definidas. Ideal para projetos educacionais, prot\u00f3tipos ou games independentes. ENGINES Unity (C#), Unreal TIPOS DE JOGOS 2D, Desktop Manuten\u00e7\u00e3o e Suporte Servi\u00e7os cont\u00ednuos para garantir que seu site ou sistema continue funcionando perfeitamente. ATUALIZA\u00c7\u00d5ES Corre\u00e7\u00f5es de bugs, melhorias SUPORTE Monitoramento, backup, seguran\u00e7a<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-97","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/pages\/97","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=97"}],"version-history":[{"count":21,"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/pages\/97\/revisions"}],"predecessor-version":[{"id":466,"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=\/wp\/v2\/pages\/97\/revisions\/466"}],"wp:attachment":[{"href":"https:\/\/sa.ib6.pt\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}