955 lines
40 KiB
HTML
955 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
|
|
<!-- Meta Description Otimizada (máximo 160 caracteres) -->
|
|
<meta name="description" content="Ferramentas reais para profissionais digitais. Convert-it, BCards, QRRápido, KVMote e n8ngo. Automação e infraestrutura sem mensalidades abusivas." />
|
|
|
|
<!-- Meta Keywords -->
|
|
<meta name="keywords" content="ferramentas para profissionais digitais, automação, n8n hospedagem, KVM software, conversão de dados, cartão digital, QR Code, JobMaker Labs" />
|
|
|
|
<!-- Open Graph para redes sociais -->
|
|
<meta property="og:title" content="JobMaker Labs - Ferramentas para Profissionais Digitais" />
|
|
<meta property="og:description" content="Automação, infraestrutura e IA para quem trabalha nos bastidores da tecnologia. Sem mensalidades abusivas, sem código inflado." />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://jobmaker.com.br" />
|
|
<meta property="og:image" content="https://jobmaker.com.br/assets/img/jobmaker-og-image.jpg" />
|
|
<meta property="og:locale" content="pt_BR" />
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="JobMaker Labs - Ferramentas para Profissionais Digitais" />
|
|
<meta name="twitter:description" content="Automação, infraestrutura e IA para quem trabalha nos bastidores da tecnologia. Sem mensalidades abusivas, sem código inflado." />
|
|
|
|
<!-- Canonical URL -->
|
|
<link rel="canonical" href="https://jobmaker.com.br" />
|
|
|
|
<meta name="author" content="JobMaker - Ricardo Carneiro" />
|
|
<meta name="robots" content="index, follow" />
|
|
|
|
<title>JobMaker Labs - Ferramentas para Profissionais Digitais | Automação & Infraestrutura</title>
|
|
|
|
<!-- Resto do head mantém igual... -->
|
|
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
|
|
|
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
|
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
|
|
<link href="css/styles.css" rel="stylesheet" />
|
|
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-L1GX4ZNZ5M"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-L1GX4ZNZ5M');
|
|
</script>
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Organization",
|
|
"name": "JobMaker Labs",
|
|
"description": "Estúdio de produtos digitais para profissionais de TI e criação de conteúdo. Ferramentas de automação, infraestrutura e produtividade com foco em pagamento justo e sem lock-in.",
|
|
"url": "https://jobmaker.com.br",
|
|
"address": {
|
|
"@type": "PostalAddress",
|
|
"addressLocality": "São Bernardo do Campo",
|
|
"addressRegion": "SP",
|
|
"addressCountry": "BR"
|
|
},
|
|
"areaServed": [
|
|
"Brasil", "São Paulo", "ABC Paulista", "Grande São Paulo"
|
|
],
|
|
"serviceType": [
|
|
"Ferramentas para Profissionais Digitais",
|
|
"Automação com n8n",
|
|
"Conversão de Dados",
|
|
"Cartão Digital",
|
|
"Controle KVM via Hardware"
|
|
],
|
|
"inLanguage": "pt-BR",
|
|
"sameAs": [
|
|
"https://linkedin.com/in/ricardo-carneiro"
|
|
]
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* CSS mantido igual - apenas ajustes de conteúdo */
|
|
:root {
|
|
--bs-primary: #667eea;
|
|
--bs-primary-rgb: 102, 126, 234;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Roboto Slab', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Navbar styles profissionais */
|
|
#mainNav {
|
|
background-color: #212529;
|
|
transition: all 0.3s;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
#mainNav .navbar-brand {
|
|
color: #ffc800;
|
|
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
font-weight: 700;
|
|
letter-spacing: 0.0625em;
|
|
text-transform: uppercase;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
#mainNav .navbar-brand:hover {
|
|
color: #ffc800;
|
|
}
|
|
|
|
#mainNav .navbar-nav .nav-item .nav-link {
|
|
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
font-size: 0.95rem;
|
|
color: #fff;
|
|
letter-spacing: 0.0625em;
|
|
font-weight: 400;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
#mainNav .navbar-nav .nav-item .nav-link.active,
|
|
#mainNav .navbar-nav .nav-item .nav-link:hover {
|
|
color: #ffc800;
|
|
}
|
|
|
|
#mainNav.navbar-shrink {
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
#mainNav.navbar-shrink .navbar-brand {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.masthead {
|
|
padding-top: 10.5rem;
|
|
padding-bottom: 6rem;
|
|
text-align: center;
|
|
color: #fff;
|
|
background: linear-gradient(to bottom, rgba(22, 22, 22, 0.3) 0%, rgba(22, 22, 22, 0.7) 75%, #161616 100%), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23667eea' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3Ccircle cx='0' cy='30' r='4'/%3E%3Ccircle cx='60' cy='30' r='4'/%3E%3Ccircle cx='30' cy='0' r='4'/%3E%3Ccircle cx='30' cy='60' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
|
background-attachment: scroll;
|
|
background-position: center center;
|
|
background-repeat: repeat;
|
|
background-size: 60px 60px;
|
|
}
|
|
|
|
.masthead .masthead-subheading {
|
|
font-size: 4rem;
|
|
font-style: normal;
|
|
line-height: 4rem;
|
|
margin-bottom: 25px;
|
|
color: #ffc800;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
|
|
font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.masthead .masthead-heading {
|
|
font-size: 1.8rem;
|
|
font-weight: 400;
|
|
line-height: 2.2rem;
|
|
margin-bottom: 2rem;
|
|
color: #ffc800;
|
|
text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
|
|
font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(45deg, #667eea, #764ba2);
|
|
border: none;
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
font-weight: 700;
|
|
letter-spacing: 0.0625em;
|
|
padding: 1.25rem 2.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
.btn-outline-light {
|
|
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
font-weight: 700;
|
|
letter-spacing: 0.0625em;
|
|
padding: 1.25rem 2.5rem;
|
|
font-size: 0.875rem;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.btn-outline-light:hover {
|
|
background-color: #ffc800;
|
|
border-color: #ffc800;
|
|
color: #212529;
|
|
}
|
|
|
|
.section-heading {
|
|
color: #333;
|
|
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
font-weight: 700;
|
|
}
|
|
.text-muted { color: #6c757d !important; }
|
|
|
|
/* Comparativo Integrações vs Desenvolvimento Tradicional */
|
|
.comparison-section {
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.comparison-table {
|
|
background: white;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
margin: 3rem 0;
|
|
}
|
|
|
|
.table-header {
|
|
background: linear-gradient(45deg, #667eea, #764ba2);
|
|
color: white;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.comparison-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 0;
|
|
}
|
|
|
|
.comparison-header {
|
|
background: #f8f9fa;
|
|
padding: 1rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
border-bottom: 2px solid #e9ecef;
|
|
}
|
|
|
|
.comparison-item {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid #e9ecef;
|
|
border-right: 1px solid #e9ecef;
|
|
text-align: center;
|
|
}
|
|
|
|
.comparison-item:nth-child(3n) { border-right: none; }
|
|
|
|
.advantage {
|
|
background: linear-gradient(45deg, #d4edda, #c3e6cb);
|
|
color: #155724;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cost-highlight {
|
|
background: linear-gradient(45deg, #fff3cd, #ffeaa7);
|
|
color: #856404;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Serviços com layout melhorado */
|
|
.page-section {
|
|
padding: 6rem 0;
|
|
}
|
|
|
|
.row.text-center {
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.service-col {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.service-card {
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
height: 100%;
|
|
border-left: 5px solid #667eea;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.service-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.service-card .service-icon {
|
|
font-size: 3rem;
|
|
color: #667eea;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.service-card ul {
|
|
text-align: left;
|
|
padding-left: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.service-card ul li {
|
|
margin-bottom: 0.5rem;
|
|
padding-left: 1.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.service-card ul li::before {
|
|
content: "✅";
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
.pricing-tier {
|
|
display: inline-block;
|
|
background: linear-gradient(45deg, #667eea, #764ba2);
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 20px;
|
|
font-size: 0.9rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
/* Timeline styles - mantidos iguais */
|
|
.timeline {
|
|
list-style: none;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.timeline:before {
|
|
top: 0;
|
|
bottom: 0;
|
|
position: absolute;
|
|
content: "";
|
|
width: 2px;
|
|
background-color: #e9ecef;
|
|
left: 40px;
|
|
margin-left: -1.5px;
|
|
}
|
|
|
|
.timeline > li {
|
|
margin-bottom: 50px;
|
|
position: relative;
|
|
min-height: 50px;
|
|
}
|
|
|
|
.timeline > li:after,
|
|
.timeline > li:before {
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
|
|
.timeline > li:after {
|
|
clear: both;
|
|
}
|
|
|
|
.timeline > li .timeline-panel {
|
|
width: 100%;
|
|
float: right;
|
|
padding: 0 20px 0 100px;
|
|
position: relative;
|
|
text-align: left;
|
|
}
|
|
|
|
.timeline > li .timeline-panel:before {
|
|
border-left-width: 0;
|
|
border-right-width: 15px;
|
|
left: -15px;
|
|
right: auto;
|
|
}
|
|
|
|
.timeline > li .timeline-panel:after {
|
|
border-left-width: 0;
|
|
border-right-width: 14px;
|
|
left: -14px;
|
|
right: auto;
|
|
}
|
|
|
|
.timeline > li .timeline-image {
|
|
left: 0;
|
|
margin-left: 0;
|
|
width: 80px;
|
|
height: 80px;
|
|
position: absolute;
|
|
z-index: 100;
|
|
background-color: #667eea;
|
|
color: white;
|
|
border-radius: 100%;
|
|
border: 7px solid #e9ecef;
|
|
text-align: center;
|
|
}
|
|
|
|
.timeline > li .timeline-image h4 {
|
|
font-size: 10px;
|
|
margin-top: 12px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.timeline > li .timeline-image {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.timeline > li.timeline-inverted > .timeline-panel {
|
|
float: right;
|
|
text-align: left;
|
|
padding: 0 20px 0 100px;
|
|
}
|
|
|
|
.timeline > li.timeline-inverted > .timeline-panel:before {
|
|
border-left-width: 0;
|
|
border-right-width: 15px;
|
|
left: -15px;
|
|
right: auto;
|
|
}
|
|
|
|
.timeline > li.timeline-inverted > .timeline-panel:after {
|
|
border-left-width: 0;
|
|
border-right-width: 14px;
|
|
left: -14px;
|
|
right: auto;
|
|
}
|
|
|
|
.timeline-heading h4 {
|
|
margin-top: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
.timeline-heading h4.subheading {
|
|
text-transform: none;
|
|
}
|
|
|
|
.timeline-body > p,
|
|
.timeline-body > ul {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* WhatsApp Button */
|
|
.whatsapp-float {
|
|
position: fixed;
|
|
width: 60px;
|
|
height: 60px;
|
|
bottom: 40px;
|
|
right: 40px;
|
|
background-color: #25d366;
|
|
color: #FFF;
|
|
border-radius: 50px;
|
|
text-align: center;
|
|
font-size: 30px;
|
|
box-shadow: 2px 2px 3px #999;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.masthead .masthead-subheading {
|
|
font-size: 2.5rem;
|
|
line-height: 2.5rem;
|
|
}
|
|
.masthead .masthead-heading {
|
|
font-size: 1.6rem;
|
|
line-height: 1.6rem;
|
|
}
|
|
}
|
|
|
|
.whatsapp-float:hover {
|
|
transform: scale(1.1);
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
background-color: #212529;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.comparison-grid { grid-template-columns: 1fr; }
|
|
.comparison-header { display: none; }
|
|
.masthead { min-height: 70vh; }
|
|
.masthead .masthead-heading { font-size: 2.25rem; line-height: 2.25rem; }
|
|
.masthead .masthead-subheading { font-size: 1.25rem; }
|
|
|
|
.timeline:before { left: 40px; }
|
|
.timeline > li > .timeline-panel { width: 100%; float: right; padding: 0 20px 0 100px; }
|
|
.timeline > li > .timeline-image { left: 0; width: 80px; height: 80px; }
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.timeline:before { left: 50%; }
|
|
.timeline > li { margin-bottom: 100px; min-height: 100px; }
|
|
.timeline > li > .timeline-panel { width: 41%; float: left; padding: 0 20px 20px 30px; text-align: right; }
|
|
.timeline > li > .timeline-image { width: 100px; height: 100px; left: 50%; margin-left: -50px; }
|
|
.timeline > li > .timeline-image h4 { font-size: 13px; margin-top: 16px; line-height: 18px; }
|
|
.timeline > li.timeline-inverted > .timeline-panel { float: right; text-align: left; padding: 0 30px 20px 20px; }
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.timeline > li { min-height: 150px; }
|
|
.timeline > li > .timeline-panel { padding: 0 20px 20px; }
|
|
.timeline > li > .timeline-image { width: 150px; height: 150px; margin-left: -75px; }
|
|
.timeline > li > .timeline-image h4 { font-size: 18px; margin-top: 30px; line-height: 26px; }
|
|
.timeline > li.timeline-inverted > .timeline-panel { padding: 0 20px 20px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body id="page-top">
|
|
<!-- Navigation-->
|
|
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#page-top"><img src="assets/img/jobmaker_logo.png" alt="..." /></a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
|
Menu
|
|
<i class="fas fa-bars ms-1"></i>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarResponsive">
|
|
<ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
|
|
<li class="nav-item"><a class="nav-link" href="#vantagens">Vantagens</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#services">Serviços</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#about">Expertise</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#contact">Contato</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- Masthead-->
|
|
<header class="masthead">
|
|
<div class="container">
|
|
<div class="masthead-subheading">Ferramentas Reais para Profissionais Digitais</div>
|
|
<div class="masthead-heading">Automação, infraestrutura e IA para quem trabalha nos bastidores da tecnologia.</div>
|
|
<p style="color: #fff; font-size: 1rem; margin-bottom: 2rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.7);">Desenvolvido por um técnico experiente. Sem mensalidades abusivas, sem código inflado.<br>Apenas o que funciona para o seu dia a dia.</p>
|
|
<a class="btn btn-primary btn-xl text-uppercase" href="#services">Explorar as Ferramentas</a>
|
|
</div>
|
|
</header>
|
|
<!-- Vantagens-->
|
|
<section class="page-section" id="vantagens">
|
|
<div class="container">
|
|
<div class="text-center">
|
|
<h2 class="section-heading text-uppercase">Por que usar nossos produtos?</h2>
|
|
<h3 class="section-subheading text-muted">Os pilares do JobMaker Labs.</h3>
|
|
</div>
|
|
<div class="row text-center mt-4">
|
|
<div class="col-md-4 service-col">
|
|
<div class="service-card">
|
|
<div class="service-icon"><i class="fas fa-tools"></i></div>
|
|
<h4>Feito para quem executa</h4>
|
|
<p>Soluções focadas na dor do profissional liberal e do técnico, não na burocracia corporativa. Menos reunião, mais entrega.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 service-col">
|
|
<div class="service-card">
|
|
<div class="service-icon"><i class="fas fa-unlock"></i></div>
|
|
<h4>Sem Lock-in</h4>
|
|
<p>Priorizamos pagamento único (pay-as-you-go) ou hospedagem com transparência total. Você não fica refém de mensalidade que cresce todo ano.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 service-col">
|
|
<div class="service-card">
|
|
<div class="service-icon"><i class="fas fa-flask"></i></div>
|
|
<h4>Validação Contínua</h4>
|
|
<p>Tudo começa como um laboratório. Nossos produtos são construídos e testados publicamente antes de irem para a sua mesa.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Produtos-->
|
|
<section class="page-section bg-light" id="services">
|
|
<div class="container">
|
|
<div class="text-center">
|
|
<h2 class="section-heading text-uppercase">JobMaker Labs: Nossos Produtos</h2>
|
|
<h3 class="section-subheading text-muted">Ferramentas construídas para resolver dores reais do profissional digital.</h3>
|
|
</div>
|
|
<div class="row text-center">
|
|
<div class="col-md-3 service-col">
|
|
<div class="service-card">
|
|
<div class="service-icon"><i class="fas fa-exchange-alt"></i></div>
|
|
<h4><a href="https://convert-it.online" target="_blank" style="color: inherit; text-decoration: none;">Convert-it</a></h4>
|
|
<div class="pricing-tier">Ativo</div>
|
|
<p>Conversão de dados no browser — CSV, JSON, XML e mais. Sem instalar nada, sem cadastro, sem assinatura.</p>
|
|
<ul>
|
|
<li>CSV ↔ JSON ↔ XML</li>
|
|
<li>Funciona no browser</li>
|
|
<li>Pagamento único</li>
|
|
<li>Sem dependência de servidor</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 service-col">
|
|
<div class="service-card">
|
|
<div class="service-icon"><i class="fas fa-id-card"></i></div>
|
|
<h4>BCards</h4>
|
|
<div class="pricing-tier">Em Testes</div>
|
|
<p>Cartão digital focado em nicho. Presença online sem depender de plataforma de terceiros que some ou muda os preços.</p>
|
|
<ul>
|
|
<li>Perfil focado no seu nicho</li>
|
|
<li>Sem plataforma intermediária</li>
|
|
<li>Link único e compartilhável</li>
|
|
<li>Controle total do conteúdo</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 service-col">
|
|
<div class="service-card">
|
|
<div class="service-icon"><i class="fas fa-qrcode"></i></div>
|
|
<h4><a href="https://qrrapido.site" target="_blank" style="color: inherit; text-decoration: none;">QRRápido</a></h4>
|
|
<div class="pricing-tier">Ativo</div>
|
|
<p>Geração rápida de QR Codes para uso profissional. Sem cadastro obrigatório, sem limite de scans, sem plano mensal.</p>
|
|
<ul>
|
|
<li>QR Code em segundos</li>
|
|
<li>Uso profissional</li>
|
|
<li>Sem cadastro</li>
|
|
<li>Download direto</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 service-col">
|
|
<div class="service-card">
|
|
<div class="service-icon"><i class="fas fa-layer-group"></i></div>
|
|
<h4>Em Desenvolvimento</h4>
|
|
<div class="pricing-tier">Próximos Lançamentos</div>
|
|
<p>Três produtos em construção: <strong>KVMote</strong> (controle KVM via hardware, sem software no cliente), <strong>n8ngo</strong> (hospedagem managed de n8n no Brasil, com backup e LGPD) e <strong>Living Books</strong> (manuais interativos com IA).</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- About-->
|
|
<section class="page-section" id="about">
|
|
<div class="container">
|
|
<div class="text-center">
|
|
<h2 class="section-heading text-uppercase">Roadmap dos Labs</h2>
|
|
<h3 class="section-subheading text-muted">Produtos construídos publicamente — da dor ao lançamento.</h3>
|
|
</div>
|
|
<ul class="timeline">
|
|
<li>
|
|
<div class="timeline-image">
|
|
<i class="fas fa-exchange-alt" style="font-size: 2rem;"></i>
|
|
</div>
|
|
<div class="timeline-panel">
|
|
<div class="timeline-heading">
|
|
<h4 class="subheading"><a href="https://convert-it.online" target="_blank" style="color: inherit; text-decoration: none;">Convert-it</a></h4>
|
|
<span class="pricing-tier">Ativo</span>
|
|
</div>
|
|
<div class="timeline-body">
|
|
<p class="text-muted">Converter CSV em JSON, ou reorganizar colunas de uma planilha, sempre exigiu uma ferramenta paga, uma macro quebrada ou um dev de plantão. Convert-it resolve isso no browser, sem cadastro, sem assinatura.</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="timeline-inverted">
|
|
<div class="timeline-image">
|
|
<i class="fas fa-id-card" style="font-size: 2rem;"></i>
|
|
</div>
|
|
<div class="timeline-panel">
|
|
<div class="timeline-heading">
|
|
<h4 class="subheading">BCards</h4>
|
|
<span class="pricing-tier">Em Testes</span>
|
|
</div>
|
|
<div class="timeline-body">
|
|
<p class="text-muted">Cartão de visita digital genérico não serve pra quem tem um nicho. Médico, fotógrafo, consultor — cada um precisa de uma apresentação diferente. BCards é presença digital focada, sem depender de plataforma de terceiros.</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="timeline-image">
|
|
<i class="fas fa-qrcode" style="font-size: 2rem;"></i>
|
|
</div>
|
|
<div class="timeline-panel">
|
|
<div class="timeline-heading">
|
|
<h4 class="subheading"><a href="https://qrrapido.site" target="_blank" style="color: inherit; text-decoration: none;">QRRápido</a></h4>
|
|
<span class="pricing-tier">Ativo</span>
|
|
</div>
|
|
<div class="timeline-body">
|
|
<p class="text-muted">Gerar um QR Code decente virou labirinto: cadastro obrigatório, limite de scans, plano mensal pra algo que deveria ser trivial. QRRápido é direto ao ponto — sem fricção.</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="timeline-inverted">
|
|
<div class="timeline-image">
|
|
<i class="fas fa-rocket" style="font-size: 2rem;"></i>
|
|
</div>
|
|
<div class="timeline-panel">
|
|
<div class="timeline-heading">
|
|
<h4 class="subheading">KVMote · n8ngo · Living Books</h4>
|
|
<span class="pricing-tier">Em Desenvolvimento</span>
|
|
</div>
|
|
<div class="timeline-body">
|
|
<p class="text-muted">Três dores distintas, mesma origem: soluções simples que o mercado transformou em produto caro ou complexo demais. Controlar múltiplos PCs sem software invasivo. Rodar n8n sem virar sysadmin de VPS. Transformar um manual em material vivo sem contratar um dev. Cada um desses vem a seguir.</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="timeline-image">
|
|
<h4>
|
|
E mais
|
|
<br />
|
|
por vir...
|
|
</h4>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
<!-- Credencial técnica-->
|
|
<section class="page-section bg-light" id="integracao">
|
|
<div class="container">
|
|
<div class="text-center">
|
|
<h3 class="section-subheading">A bagagem por trás dos produtos</h3>
|
|
<p class="text-muted">Mais de 20 anos na trincheira do software enterprise. Hoje, traduzo essa robustez técnica em ferramentas acessíveis e sem complicação.</p>
|
|
</div>
|
|
<div class="row text-center">
|
|
<div class="col-md-4">
|
|
<i class="fas fa-hospital fa-2x mb-3" style="color: #667eea;"></i>
|
|
<h5>UnitedHealth Group</h5>
|
|
<p><strong>Integração C# ↔ SAP</strong><br>Sistema de benefícios integrado com ERP corporativo. Base para entender o que "robusto de verdade" significa.</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<i class="fas fa-microscope fa-2x mb-3" style="color: #667eea;"></i>
|
|
<h5>Laboratório Especializado</h5>
|
|
<p><strong>Hardware ↔ Sistema</strong><br>Microscópio digital integrado ao sistema de laudos. A mesma lógica que está no KVMote — hardware obedece software.</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<i class="fas fa-chart-line fa-2x mb-3" style="color: #667eea;"></i>
|
|
<h5>Modernização Legada</h5>
|
|
<p><strong>ASP 3.0 → .NET Core</strong><br>Migração completa sem perder funcionalidade. Prova de que é possível evoluir sem jogar fora o que já funciona.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="page-section" id="contact">
|
|
<div class="row align-items-stretch">
|
|
<div class="col-lg-6">
|
|
<div class="d-flex flex-column justify-content-between h-100 text-center">
|
|
<div>
|
|
<h4 style="color: #667eea;">Ricardo Carneiro — JobMaker Labs</h4>
|
|
<p class="lead text-white">20+ anos de software enterprise</p>
|
|
<p class="text-white">Construindo ferramentas para profissionais digitais<br>
|
|
Automação · Infraestrutura · IA<br>
|
|
São Bernardo do Campo, SP</p>
|
|
<hr style="border-color: #667eea; margin: 1.5rem auto; width: 60%;">
|
|
<p class="text-white"><small>Precisa de uma integração de sistemas complexa ou modernização legada para sua empresa? Não fechei as portas para desafios corporativos. Vamos conversar.</small></p>
|
|
</div>
|
|
|
|
<div class="mt-auto">
|
|
<a href="https://www.linkedin.com/in/ricardo-carneiro" target="_blank" class="btn btn-outline-light me-3">
|
|
<i class="fab fa-linkedin-in me-2"></i>LinkedIn
|
|
</a>
|
|
<a id="btnEmail2" onclick="openEmail(); return false;" target="_blank" class="btn btn-outline-light me-3">
|
|
<i class="fas fa-envelope me-2"></i>E-mail
|
|
</a>
|
|
<a href="https://www.upwork.com/freelancers/~01aa5eed59c1535ac0?viewMode=1" target="_blank" class="btn btn-outline-light">
|
|
<i class="fas fa-globe me-2"></i>Upwork
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="d-flex flex-column justify-content-between h-100 text-center">
|
|
<div>
|
|
<h4 style="color: #667eea;">Acompanhe os Labs</h4>
|
|
<p class="text-white">Veja os produtos em ação e acompanhe os próximos lançamentos:</p>
|
|
</div>
|
|
|
|
<div class="mt-auto">
|
|
<p class="text-white"><small>Convert-it · BCards · QRRápido · KVMote · n8ngo · Living Books</small></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Footer-->
|
|
<footer class="footer py-4">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-4 text-lg-start" style="color: white;">
|
|
Copyright © 2024 JobMaker
|
|
</div>
|
|
<div class="col-lg-4 my-3 my-lg-0">
|
|
<a class="btn btn-dark btn-social mx-2" href="https://www.linkedin.com/in/ricardo-jobmaker" target="_blank">
|
|
<i class="fab fa-linkedin-in"></i>
|
|
</a>
|
|
<a class="btn btn-dark btn-social mx-2" id="btnEmail1" onclick="openEmail(); return false;" target="_blank">
|
|
<i class="fas fa-envelope"></i>
|
|
</a>
|
|
<a class="btn btn-dark btn-social mx-2" href="https://www.upwork.com/freelancers/ricardo-jobmaker" target="_blank">
|
|
<i class="fas fa-globe"></i>
|
|
</a>
|
|
</div>
|
|
<div class="col-lg-4 text-lg-end">
|
|
<span style="color: #adb5bd;">Ricardo Carneiro • JobMaker Labs • Automação & Infraestrutura</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content bg-dark text-light">
|
|
<div class="modal-header border-secondary">
|
|
<h5 class="modal-title" id="emailModalLabel">
|
|
<i class="fas fa-envelope me-2 text-primary"></i>Informações de Contato
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-6">
|
|
<label class="form-label fw-bold text-primary">
|
|
<i class="fas fa-at me-2"></i>Email:
|
|
</label>
|
|
<div class="input-group">
|
|
<input type="text" id="showEmail" class="form-control bg-secondary text-light border-secondary" id="emailAddress" readonly>
|
|
<button class="btn btn-outline-primary" type="button" onclick="copyEmail()">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer border-secondary">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
|
|
<small class="text-muted">
|
|
<i class="fas fa-info-circle me-1"></i>
|
|
Se o cliente de email não abriu automaticamente, use as informações acima para entrar em contato.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- Core theme JS-->
|
|
<script src="js/scripts.js"></script>
|
|
|
|
<!-- WhatsApp Float Button -->
|
|
<a href="#" onclick="openWhatsApp()" class="whatsapp-float" title="WhatsApp">
|
|
<i class="fab fa-whatsapp"></i>
|
|
</a>
|
|
|
|
<!-- Bootstrap core JS-->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script>
|
|
// Navbar shrink function
|
|
window.addEventListener('DOMContentLoaded', event => {
|
|
var navbarShrink = function () {
|
|
const navbarCollapsible = document.body.querySelector('#mainNav');
|
|
if (!navbarCollapsible) return;
|
|
|
|
if (window.scrollY === 0) {
|
|
navbarCollapsible.classList.remove('navbar-shrink')
|
|
} else {
|
|
navbarCollapsible.classList.add('navbar-shrink')
|
|
}
|
|
};
|
|
|
|
navbarShrink();
|
|
document.addEventListener('scroll', navbarShrink);
|
|
|
|
// Smooth scrolling
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Bootstrap ScrollSpy
|
|
const mainNav = document.body.querySelector('#mainNav');
|
|
if (mainNav) {
|
|
new bootstrap.ScrollSpy(document.body, {
|
|
target: '#mainNav',
|
|
rootMargin: '0px 0px -40%',
|
|
});
|
|
}
|
|
|
|
// Collapse responsive navbar when toggler is visible
|
|
const navbarToggler = document.body.querySelector('.navbar-toggler');
|
|
const responsiveNavItems = [].slice.call(
|
|
document.querySelectorAll('#navbarResponsive .nav-link')
|
|
);
|
|
responsiveNavItems.map(function (responsiveNavItem) {
|
|
responsiveNavItem.addEventListener('click', () => {
|
|
if (window.getComputedStyle(navbarToggler).display !== 'none') {
|
|
navbarToggler.click();
|
|
}
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
function openEmail() {
|
|
const parts = ['ricardo', '.carneiro', '@', 'jobmaker.com.br'];
|
|
const email = parts.join('');
|
|
const subject = 'Interesse nos produtos JobMaker Labs';
|
|
const body = 'Olá,\n\nTenho interesse em saber mais sobre os produtos e soluções do JobMaker Labs.\n\nAguardo seu contato.';
|
|
|
|
const mailto = `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
|
|
|
|
// Tenta abrir o cliente de email
|
|
const link = document.createElement('a');
|
|
link.href = mailto;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
|
|
const showText = document.getElementById('showEmail');
|
|
showText.setAttribute('value',email);
|
|
|
|
// Mostra o modal após 1.5 segundos
|
|
setTimeout(() => {
|
|
const modal = new bootstrap.Modal(document.getElementById('emailModal'));
|
|
modal.show();
|
|
}, 1500);
|
|
}
|
|
|
|
function openWhatsApp() {
|
|
const parts = ['5511', '9', '7079', '2602'];
|
|
const number = parts.join('');
|
|
const message = encodeURIComponent('Olá! Vi seu site e gostaria de conversar sobre integração de sistemas. Quando podemos agendar uma conversa?');
|
|
const url = `https://api.whatsapp.com/send?phone=${number}&text=${message}`;
|
|
window.open(url, '_blank');
|
|
}
|
|
|
|
function copyEmail() {
|
|
const emailField = document.getElementById('showEmail');
|
|
emailField.select();
|
|
emailField.setSelectionRange(0, 99999);
|
|
navigator.clipboard.writeText(emailField.value);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html> |