Nós somos a
Devark
|
Empresa de
Devark | Desenvolvimento de Sites e Sistemas Web | Sorocaba/SP focada em criar experiências digitais que
<strong>resolvem problemas reais</strong> e geram resultados para empresas.
</p>
<div class="hero-buttons">
<a href="#projects" class="btn btn-primary">Ver Projetos</a>
<a href="#contact" class="btn btn-outline">Vamos Conversar</a>
</div>
<div class="hero-socials">
<a href="#" aria-label="Instagram" title="Instagram">
<svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.31-1.46.72-2.12 1.38A5.9 5.9 0 0 0 .63 4.14C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.79.72 1.46 1.38 2.12.66.66 1.33 1.07 2.12 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.9 5.9 0 0 0 2.12-1.38 5.9 5.9 0 0 0 1.38-2.12c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.9 5.9 0 0 0-1.38-2.12A5.9 5.9 0 0 0 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zm0 10.16A4 4 0 1 1 16 12a4 4 0 0 1-4 4zm6.41-10.4a1.44 1.44 0 1 0 1.44 1.44 1.44 1.44 0 0 0-1.44-1.44z"/></svg>
</a>
<a href="#" aria-label="LinkedIn" title="LinkedIn">
<svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/></svg>
</a>
<a href="#" aria-label="GitHub" title="GitHub">
<svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.26.8-.58v-2c-3.3.72-4-1.6-4-1.6-.55-1.4-1.34-1.77-1.34-1.77-1.08-.74.08-.73.08-.73 1.2.08 1.84 1.24 1.84 1.24 1.07 1.84 2.8 1.3 3.5 1 .1-.78.42-1.3.76-1.6-2.66-.3-5.47-1.33-5.47-5.93 0-1.3.47-2.38 1.24-3.22-.13-.3-.54-1.52.1-3.18 0 0 1.02-.32 3.33 1.23a11.5 11.5 0 0 1 6 0c2.3-1.55 3.33-1.23 3.33-1.23.66 1.66.25 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.6-2.8 5.62-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.2.7.8.58A12 12 0 0 0 12 .3"/></svg>
</a>
</div>
</div>
<div class="hero-visual">
<div class="code-window">
<div class="code-window-header">
<span class="dot red"></span>
<span class="dot yellow"></span>
<span class="dot green"></span>
<span class="code-title">developer.js</span>
</div>
<pre class="code-content"><code><span class="code-keyword">const</span> <span class="code-var">empresa</span> = {
<span class="code-prop">name</span>: <span class="code-string">'Devark'</span>,
<span class="code-prop">type</span>: <span class="code-string">'Pessoa Jurídica'</span>,
<span class="code-prop">skills</span>: [<span class="code-string">'Sites'</span>, <span class="code-string">'Sistemas'</span>, <span class="code-string">'Apps'</span>],
<span class="code-prop">available</span>: <span class="code-bool">true</span>,
<span class="code-func">solveProblem</span>(<span class="code-param">idea</span>) {
<span class="code-keyword">return</span> <span class="code-func">buildSolution</span>(idea);
}
};</code></pre>
</div>
</div>
</div>
<a href="#about" class="scroll-down" aria-label="Rolar para baixo">
<span></span>
</a>
</section>
<!-- Stats Section -->
<section class="stats">
<div class="container stats-grid">
<div class="stat-item">
<h3 class="stat-number" data-target="48">0</h3>
<p class="stat-label">Projetos Concluídos</p>
</div>
<div class="stat-item">
<h3 class="stat-number" data-target="6">0</h3>
<p class="stat-label">Clientes Satisfeitos</p>
</div>
<div class="stat-item">
<h3 class="stat-number" data-target="6">0</h3>
<p class="stat-label">Anos de Experiência</p>
</div>
<div class="stat-item">
<h3 class="stat-number" data-target="100">0</h3>
<p class="stat-label">% Comprometimento</p>
</div>
</div>
</section>
<!-- About Section -->
<section class="about section" id="about">
<div class="container">
<div class="section-header">
<span class="section-tag">01. Sobre</span>
<h2 class="section-title">Quem somos</h2>
</div>
<div class="about-grid">
<div class="about-text">
<p>
Somos uma empresa de<title>Devark | Desenvolvimento de Sites e Sistemas Web | Sorocaba/SP apaixonada por transformar ideias em produtos digitais
que <strong>geram valor real</strong> para empresas. Acreditamos que tecnologia
bem aplicada resolve problemas, economiza tempo e aumenta lucros.
</p>
<p>
Trabalhamos com empresas e empreendedores que precisam de presença digital
profissional — seja um site institucional, uma loja virtual, um sistema
interno ou uma landing page que converte visitantes em clientes.
</p>
<p>
Nosso foco é entregar <strong>soluções completas</strong>: do design ao deploy,
com código limpo, performance e experiência do usuário em primeiro lugar.
</p>
<div class="about-skills">
<h3>Tecnologias que dominamos</h3>
<div class="skills-tags">
<span class="skill-tag">HTML5</span>
<span class="skill-tag">CSS3</span>
<span class="skill-tag">JavaScript</span>
<span class="skill-tag">React</span>
<span class="skill-tag">Node.js</span>
<span class="skill-tag">Python</span>
<span class="skill-tag">SQL</span>
<span class="skill-tag">Git</span>
<span class="skill-tag">Responsive Design</span>
<span class="skill-tag">UI/UX</span>
</div>
</div>
</div>
<div class="about-card">
<div class="card-glow"></div>
<div class="card-content">
<div class="card-header">
<div class="card-avatar">NX</div>
<div>
<h4>Devark</h4>
<p>Desenvolvimento Web & Soluções Digitais</p>
</div>
</div>
<div class="card-info">
<div class="info-row">
<span class="info-label">📍 Localização</span>
<span class="info-value">Brasil (Remoto)</span>
</div>
<div class="info-row">
<span class="info-label">💼 Tipo</span>
<span class="info-value">Pessoa Jurídica</span>
</div>
<div class="info-row">
<span class="info-label">⚡ Foco</span>
<span class="info-value">Resultados</span>
</div>
<div class="info-row">
<span class="info-label">🎯 Especialidade</span>
<span class="info-value">Web & Apps</span>
</div>
</div>
<a href="#contact" class="btn btn-primary btn-full">Solicitar Orçamento</a>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="services section" id="services">
<div class="container">
<div class="section-header">
<span class="section-tag">02. Serviços</span>
<h2 class="section-title">Como podemos ajudar</h2>
<p class="section-subtitle">Soluções sob medida para os desafios do seu negócio</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 24 24" width="40" height="40"><path fill="currentColor" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>
</div>
<h3>Sites Institucionais</h3>
<p>Sites profissionais que representam sua marca, transmitem credibilidade e convertem visitantes em clientes.</p>
<ul class="service-features">
<li>Design moderno e responsivo</li>
<li>Otimização para SEO</li>
<li>Performance otimizada</li>
</ul>
</div>
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 24 24" width="40" height="40"><path fill="currentColor" d="M7 18a5 5 0 0 1-1-9.9V7a6 6 0 0 1 11.74-1.7A4.5 4.5 0 0 1 17 15h-1.1a5 5 0 0 1-1.9 3zM7 16a3 3 0 0 0 3 3h6a2.5 2.5 0 0 0 .5-5 3.5 3.5 0 0 0-3.5-3.5 4 4 0 0 0-7.5 1A3 3 0 0 0 7 16z"/></svg>
</div>
<h3>Aplicações Web</h3>
<p>Sistemas e plataformas sob medida que automatizam processos e resolvem problemas do seu dia a dia.</p>
<ul class="service-features">
<li>Painéis administrativos</li>
<li>Sistemas de gestão</li>
<li>Integração com APIs</li>
</ul>
</div>
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 24 24" width="40" height="40"><path fill="currentColor" d="M7 18a5 5 0 0 1-1-9.9V7a6 6 0 0 1 11.74-1.7A4.5 4.5 0 0 1 17 15h-1.1a5 5 0 0 1-1.9 3zM7 16a3 3 0 0 0 3 3h6a2.5 2.5 0 0 0 .5-5 3.5 3.5 0 0 0-3.5-3.5 4 4 0 0 0-7.5 1A3 3 0 0 0 7 16z"/></svg>
</div>
<h3>Landing Pages</h3>
<p>Páginas de conversão focadas em transformar visitantes em leads qualificados para seu negócio.</p>
<ul class="service-features">
<li>Copywriting persuasivo</li>
<li>A/B testing</li>
<li>Análise de métricas</li>
</ul>
</div>
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 24 24" width="40" height="40"><path fill="currentColor" d="M12 2 2 7v10l10 5 10-5V7L12 2zm0 2.2L19.5 8 12 11.8 4.5 8 12 4.2zM4 9.3l7 3.5v7.4l-7-3.5V9.3zm9 10.9v-7.4l7-3.5v7.4l-7 3.5z"/></svg>
</div>
<h3>E-commerce</h3>
<p>Lojas virtuais completas com gestão de produtos, pagamentos e integrações logísticas.</p>
<ul class="service-features">
<li>Gestão de produtos</li>
<li>Pagamentos online</li>
<li>Dashboard de vendas</li>
</ul>
</div>
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 24 24" width="40" height="40"><path fill="currentColor" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm5.6 5.6L14 14l-6.4 3.6L11 11l6.6-3.4z"/></svg>
</div>
<h3>Otimização & SEO</h3>
<p>Melhore o posicionamento do seu site no Google e atraia mais clientes organicamente.</p>
<ul class="service-features">
<li>Auditoria técnica</li>
<li>Otimização on-page</li>
<li>Performance Core Web Vitals</li>
</ul>
</div>
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 24 24" width="40" height="40"><path fill="currentColor" d="M12 1 3 5v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V5l-9-4zm-2 16-4-4 1.4-1.4L10 14.2l6.6-6.6L18 9l-8 8z"/></svg>
</div>
<h3>Manutenção & Suporte</h3>
<p>Cuidamos do seu site existente com atualizações, correções e melhorias contínuas.</p>
<ul class="service-features">
<li>Correção de bugs</li>
<li>Atualizações de conteúdo</li>
<li>Monitoramento 24/7</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section class="projects section" id="projects">
<div class="container">
<div class="section-header">
<span class="section-tag">03. Projetos</span>
<h2 class="section-title">Trabalhos recentes</h2>
<p class="section-subtitle">Uma seleção de projetos que entregaram resultados reais</p>
</div>
<div class="projects-grid">
<!-- Site Institucional 1: VRC Construções -->
<article class="project-card">
<div class="project-image">
<div class="project-preview">
<iframe src="projetos/vrc-construcoes.html" loading="lazy" scrolling="no"></iframe>
</div>
<div class="project-overlay">
<button class="project-link" data-project="projetos/vrc-construcoes.html" data-title="VRC Construções LTDA">Ver Projeto →</button>
</div>
</div>
<div class="project-info">
<span class="project-category">Site Institucional</span>
<h3>VRC Construções LTDA</h3>
<p>Site institucional moderno com portfólio de obras, formulário de orçamento e integração com WhatsApp.</p>
<div class="project-tech">
<span>HTML5</span>
<span>CSS3</span>
<span>JavaScript</span>
</div>
</div>
</article>
<!-- Site Institucional 2: Agile Construtora -->
<article class="project-card">
<div class="project-image">
<div class="project-preview">
<iframe src="projetos/agile-construtora.html" loading="lazy" scrolling="no"></iframe>
</div>
<div class="project-overlay">
<button class="project-link" data-project="projetos/agile-construtora.html" data-title="Agile Construtora">Ver Projeto →</button>
</div>
</div>
<div class="project-info">
<span class="project-category">Site Institucional</span>
<h3>Agile Construtora</h3>
<p>Site institucional com showcase de obras concluídas, depoimentos e formulário de contato integrado.</p>
<div class="project-tech">
<span>HTML5</span>
<span>CSS3</span>
<span>JavaScript</span>
</div>
</div>
</article>
<!-- Sistema de Gestão 1: Matrecon -->
<article class="project-card">
<div class="project-image">
<div class="project-preview">
<iframe src="projetos/matrecon-sistema.html" loading="lazy" scrolling="no"></iframe>
</div>
<div class="project-overlay">
<button class="project-link" data-project="projetos/matrecon-sistema.html" data-title="Matrecon Construtora">Ver Projeto →</button>
</div>
</div>
<div class="project-info">
<span class="project-category">Sistema de Gestão</span>
<h3>Matrecon Construtora</h3>
<p>Sistema de gestão de obras com controle de orçamento, cronograma, fornecedores e relatórios em tempo real.</p>
<div class="project-tech">
<span>React</span>
<span>Node.js</span>
<span>PostgreSQL</span>
</div>
</div>
</article>
<!-- Sistema de Gestão 2: ERP Empresarial -->
<article class="project-card">
<div class="project-image">
<div class="project-preview">
<iframe src="projetos/erp-empresarial.html" loading="lazy" scrolling="no"></iframe>
</div>
<div class="project-overlay">
<button class="project-link" data-project="projetos/erp-empresarial.html" data-title="ERP Empresarial">Ver Projeto →</button>
</div>
</div>
<div class="project-info">
<span class="project-category">Sistema de Gestão</span>
<h3>ERP Empresarial</h3>
<p>Sistema integrado de gestão com controle financeiro, estoque, vendas e relatórios gerenciais.</p>
<div class="project-tech">
<span>Vue.js</span>
<span>Python</span>
<span>Chart.js</span>
</div>
</div>
</article>
<!-- App Web 1: FitTracker -->
<article class="project-card">
<div class="project-image">
<div class="project-preview">
<iframe src="projetos/fittracker.html" loading="lazy" scrolling="no"></iframe>
</div>
<div class="project-overlay">
<button class="project-link" data-project="projetos/fittracker.html" data-title="FitTracker - Academia">Ver Projeto →</button>
</div>
</div>
<div class="project-info">
<span class="project-category">App Web</span>
<h3>FitTracker - Academia</h3>
<p>App de gestão para academias com controle de alunos, planos, treinos, pagamentos e relatórios.</p>
<div class="project-tech">
<span>React</span>
<span>Node.js</span>
<span>PostgreSQL</span>
</div>
</div>
</article>
<!-- Site Institucional 3: GSA Engenharia -->
<article class="project-card">
<div class="project-image">
<div class="project-preview">
<iframe src="projetos/gsa-engenharia.html" loading="lazy" scrolling="no"></iframe>
</div>
<div class="project-overlay">
<button class="project-link" data-project="projetos/gsa-engenharia.html" data-title="GSA Engenharia e Construções">Ver Projeto →</button>
</div>
</div>
<div class="project-info">
<span class="project-category">Site Institucional</span>
<h3>GSA Engenharia e Construções</h3>
<p>Site profissional com galeria de projetos, área de clientes e captação de leads qualificados.</p>
<div class="project-tech">
<span>HTML5</span>
<span>CSS3</span>
<span>JavaScript</span>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- Process Section -->
<section class="process section">
<div class="container">
<div class="section-header">
<span class="section-tag">04. Processo</span>
<h2 class="section-title">Como trabalhamos juntos</h2>
</div>
<div class="process-grid">
<div class="process-step">
<div class="step-number">01</div>
<h3>Conversa Inicial</h3>
<p>Entendemos seu negócio, seus objetivos e os problemas que precisa resolver.</p>
</div>
<div class="process-step">
<div class="step-number">02</div>
<h3>Proposta & Planejamento</h3>
<p>Definimos escopo, prazos e investimento. Tudo transparente, sem surpresas.</p>
</div>
<div class="process-step">
<div class="step-number">03</div>
<h3>Desenvolvimento</h3>
<p>Construímos sua solução com atualizações frequentes e feedback contínuo.</p>
</div>
<div class="process-step">
<div class="step-number">04</div>
<h3>Entrega & Suporte</h3>
<p>Entregamos o projeto finalizado e oferecemos suporte para garantir tudo funcionando.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="testimonials section">
<div class="container">
<div class="section-header">
<span class="section-tag">05. Depoimentos</span>
<h2 class="section-title">O que dizem sobre nosso trabalho</h2>
</div>
<div class="testimonials-grid">
<div class="testimonial-card">
<div class="testimonial-stars">★★★★★</div>
<p class="testimonial-text">"Profissionalismo excepcional! Entregaram nosso site institucional antes do prazo, com design moderno e funcional. Nossos clientes elogiam todos os dias. Recomendo demais!"</p>
<div class="testimonial-author">
<div class="author-avatar" style="background: linear-gradient(135deg, #1e3c72, #2a5298);">VC</div>
<div>
<h4>Valdir Ramos de Carvalho</h4>
<p>Dono, VRC Construções LTDA</p>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-stars">★★★★★</div>
<p class="testimonial-text">"A Agile Construtora precisava de um site que transmitisse profissionalismo. O resultado superou todas as expectativas! Captação de clientes aumentou significativamente. Parceria de confiança."</p>
<div class="testimonial-author">
<div class="author-avatar" style="background: linear-gradient(135deg, #134e5e, #71b280);">FA</div>
<div>
<h4>Franklin</h4>
<p>Dono, Agile Construtora</p>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-stars">★★★★★</div>
<p class="testimonial-text">"O sistema de gestão de obras desenvolvido para a Matrecon transformou nossa operação. Controle total de cronograma, orçamento e fornecedores em um só lugar. Investimento que se pagou em semanas!"</p>
<div class="testimonial-author">
<div class="author-avatar" style="background: linear-gradient(135deg, #4b6cb7, #182848);">WR</div>
<div>
<h4>Willian Renó</h4>
<p>Dono, Matrecon Construtora</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact section" id="contact">
<div class="container">
<div class="section-header">
<span class="section-tag">06. Contato</span>
<h2 class="section-title">Vamos trabalhar juntos</h2>
<p class="section-subtitle">Conte sobre seu projeto. Respondemos em até 24h.</p>
</div>
<div class="contact-grid">
<div class="contact-info">
<h3>Vamos conversar</h3>
<p>Tem uma ideia ou problema que precisa de uma solução digital?
Estamos prontos para ajudar. Preencha o formulário ou nos encontre nas redes sociais.</p>
<div class="contact-methods">
<a href="mailto:contato@devark.com.br" class="contact-method">
<span class="method-icon">✉️</span>
<div>
<span class="method-label">Email</span>
<span class="method-value">contato@devark.com.br</span>
</div>
</a>
<a href="https://wa.me/5515997039112" class="contact-method" target="_blank">
<span class="method-icon">💬</span>
<div>
<span class="method-label">WhatsApp</span>
<span class="method-value">(15) 99703-9112</span>
</div>
</a>
<a href="#" class="contact-method">
<span class="method-icon">📷</span>
<div>
<span class="method-label">Instagram</span>
<span class="method-value">@devark</span>
</div>
</a>
</div>
</div>
<form class="contact-form" id="contact-form">
<div class="form-group">
<label for="name">Nome *</label>
<input type="text" id="name" name="name" required placeholder="Seu nome">
</div>
<div class="form-group">
<label for="email">Email *</label>
<input type="email" id="email" name="email" required placeholder="contato@devark.com.br">
</div>
<div class="form-group">
<label for="subject">Tipo de projeto</label>
<select id="subject" name="subject">
<option value="">Selecione...</option>
<option value="site">Site Institucional</option>
<option value="app">Aplicação Web</option>
<option value="ecommerce">E-commerce</option>
<option value="landing">Landing Page</option>
<option value="other">Outro</option>
</select>
</div>
<div class="form-group">
<label for="message">Mensagem *</label>
<textarea id="message" name="message" rows="5" required placeholder="Conte sobre seu projeto, prazos e objetivos..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-full">Enviar via WhatsApp</button>
<p class="form-success" id="form-success">✓ Redirecionando para o WhatsApp...</p>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<a href="#home" class="logo">
<span class="logo-bracket"><</span>Devark<span class="logo-bracket">/></span>
</a>
<p>Empresa de<title>Devark | Desenvolvimento de Sites e Sistemas Web | Sorocaba/SP criando soluções digitais que geram resultados.</p>
</div>
<div class="footer-links">
<h4>Navegação</h4>
<a href="#home">Início</a>
<a href="#about">Sobre</a>
<a href="#services">Serviços</a>
<a href="#projects">Projetos</a>
<a href="#contact">Contato</a>
</div>
<div class="footer-social">
<h4>Redes</h4>
<div class="social-links">
<a href="https://instagram.com/devark" aria-label="Instagram" target="_blank">Instagram</a>
<a href="#" aria-label="LinkedIn">LinkedIn</a>
<a href="#" aria-label="GitHub">GitHub</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© <span id="year"></span> Devark. Todos os direitos reservados.</p>
</div>
</div>
</footer>
<!-- Back to top -->
<button class="back-to-top" id="back-to-top" aria-label="Voltar ao topo">
<svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12 8l-6 6 1.4 1.4L12 10.8l4.6 4.6L18 14z"/></svg>
</button>
<!-- Project Modal -->
<div class="project-modal" id="project-modal">
<div class="project-modal-content">
<div class="project-modal-header">
<span class="project-modal-title" id="modal-title">Projeto</span>
<button class="project-modal-close" id="modal-close" aria-label="Fechar">✕</button>
</div>
<div class="project-modal-body">
<iframe id="modal-iframe" src="" title="Demonstração do projeto"></iframe>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>