1276 lines
28 KiB
Svelte
1276 lines
28 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { fly, fade } from 'svelte/transition';
|
|
import {
|
|
ArrowRight,
|
|
Code,
|
|
Zap,
|
|
TestTube,
|
|
Key,
|
|
ExternalLink
|
|
} from 'lucide-svelte';
|
|
|
|
import Header from '$lib/components/Header.svelte';
|
|
import Footer from '$lib/components/Footer.svelte';
|
|
import Modal from '$lib/components/Modal.svelte';
|
|
|
|
import cubesPlus from '$lib/assets/cubes-plus.svg';
|
|
import case1 from '$lib/assets/case-1.webp';
|
|
import case2 from '$lib/assets/case-2.webp';
|
|
import case3 from '$lib/assets/case-3.webp';
|
|
import case4 from '$lib/assets/case-4.webp';
|
|
import case5 from '$lib/assets/case-5.webp';
|
|
import case6 from '$lib/assets/case-6.webp';
|
|
import pixCinza from '$lib/assets/pix-cinza.svg';
|
|
import pagamentosCinza from '$lib/assets/pagamentos-cinza.svg';
|
|
import adquirenciaCinza from '$lib/assets/adquirencia-cinza.svg';
|
|
import cartoesCinza from '$lib/assets/cartoes-cinza.svg';
|
|
import iconSlimBasspago from '$lib/assets/icon-slim-basspago.svg';
|
|
|
|
let showModal = false;
|
|
|
|
function openCreateAccountModal() {
|
|
showModal = true;
|
|
}
|
|
|
|
function closeModal() {
|
|
showModal = false;
|
|
}
|
|
|
|
const steps = [
|
|
{
|
|
step: 'Passo 1',
|
|
title: 'Solicite acesso',
|
|
description: 'Fale com nossos especialistas e solicite acesso a nossa apis e credenciais.',
|
|
link: '#embreve',
|
|
linkText: 'Comece aqui →'
|
|
},
|
|
{
|
|
step: 'Passo 2',
|
|
title: 'Integre rápido',
|
|
description: 'Conecte seu negócio às nossas APIs de forma rápida e sem complicações.',
|
|
link: '#embreve',
|
|
linkText: 'Comece a desenvolver →'
|
|
},
|
|
{
|
|
step: 'Passo 3',
|
|
title: 'Go-live',
|
|
description: 'Pronto! Seu negócio já pode processar pagamentos com segurança.',
|
|
link: '#embreve',
|
|
linkText: 'Produção →'
|
|
}
|
|
];
|
|
|
|
const useCases = [
|
|
{
|
|
title: 'Para e-commerce',
|
|
description: 'Impulsione sua loja virtual com pagamentos integrados, checkouts mais rápidos e controle total das transações em tempo real.',
|
|
image: case1
|
|
},
|
|
{
|
|
title: 'Para SaaS',
|
|
description: 'Automatize cobranças, reduza churn e escale seu modelo recorrente com uma infraestrutura de pagamentos feita para produtos digitais.',
|
|
image: case2
|
|
},
|
|
{
|
|
title: 'Para ERP',
|
|
description: 'Integre pagamentos diretamente ao seu sistema de gestão, oferecendo aos seus clientes uma experiência financeira fluida e sem fricções',
|
|
image: case3
|
|
},
|
|
{
|
|
title: 'Para Satartups',
|
|
description: 'Soluções escaláveis que crescem junto com seu negócio. Receba, concilie e monitore transações sem precisar migrar de plataforma.',
|
|
image: case4
|
|
},
|
|
{
|
|
title: 'Para B2B',
|
|
description: 'Solução B2B completa que permite receber pagamentos e criar cobranças recorrentes de forma segura e ágil.',
|
|
image: case5
|
|
},
|
|
{
|
|
title: 'Para Sistemas corporativos',
|
|
description: 'Simplifique faturamento corporativo com pagamentos digitais, monitoramento de recebíveis e controle total de cada transação.',
|
|
image: case6
|
|
}
|
|
];
|
|
|
|
const features = [
|
|
{
|
|
icon: pixCinza,
|
|
label: 'Cobrança'
|
|
},
|
|
{
|
|
icon: pagamentosCinza,
|
|
label: 'Pagamentos'
|
|
},
|
|
{
|
|
icon: adquirenciaCinza,
|
|
label: 'Webhooks'
|
|
},
|
|
];
|
|
|
|
onMount(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.1 }
|
|
);
|
|
|
|
const elements = document.querySelectorAll('.fade-up');
|
|
elements.forEach((el) => observer.observe(el));
|
|
|
|
return () => observer.disconnect();
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Desenvolvedores - BassPago</title>
|
|
<meta name="description" content="Construa com Bass Pago. Soluções integradas de pagamento e banking para atender diversos modelos de negócios." />
|
|
</svelte:head>
|
|
|
|
<Header />
|
|
|
|
<!-- Build With Section -->
|
|
<section class="build-with fade-in">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="content fade-up">
|
|
<h1>Construa com <br />Bass Pago</h1>
|
|
|
|
<div class="mobile">
|
|
<div class="image fade-up">
|
|
<img src={cubesPlus} alt="Cubes" />
|
|
</div>
|
|
</div>
|
|
|
|
<p class="lead">Sua empresa pronta para crescer com uma integração descomplicada</p>
|
|
|
|
<button
|
|
class="link-cta"
|
|
on:click={openCreateAccountModal}
|
|
>
|
|
Abrir conta →
|
|
</button>
|
|
</div>
|
|
|
|
<div class="desktop">
|
|
<div class="image fade-up">
|
|
<img src={cubesPlus} alt="Cubes" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="steps fade-up">
|
|
{#each steps as step, index}
|
|
<div class="step">
|
|
<small>{step.step}</small>
|
|
<strong>{step.title}</strong>
|
|
<p>{step.description}</p>
|
|
<a href={step.link}>{step.linkText}</a>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Glow effects -->
|
|
<div class="glow-left"></div>
|
|
<div class="glow-right"></div>
|
|
</section>
|
|
|
|
<!-- Use Cases Section -->
|
|
<section id="use-cases" class="fade-in">
|
|
<div class="container">
|
|
<div class="use-cases-header">
|
|
<h2 class="fade-up">Casos de uso</h2>
|
|
<a href="#embreve" class="btn-ver-todos hidden">Ver todos</a>
|
|
</div>
|
|
|
|
<div class="use-cases-grid">
|
|
{#each useCases as useCase, index}
|
|
<div
|
|
class="use-case-card fade-up"
|
|
style="background-image: url('{useCase.image}'); background-size: cover"
|
|
>
|
|
<h3>{useCase.title}</h3>
|
|
<p>{useCase.description}</p>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Dev Tools Section -->
|
|
<section id="dev-tools">
|
|
<div class="container fade-up">
|
|
<div class="dev-content-wrapper">
|
|
<div class="dev-text-box">
|
|
<h2>Ferramentas para desenvolvedores</h2>
|
|
<p>
|
|
APIs desenhadas para acelerar seu time-to-market,
|
|
mantendo controle e segurança em cada transação.
|
|
</p>
|
|
<a href="https://developers.onz.software/" class="btn-ghost">
|
|
Referências de API
|
|
</a>
|
|
</div>
|
|
|
|
<div class="dev-feature-box">
|
|
<h3>Recursos</h3>
|
|
<div class="feature-grid">
|
|
<div class="icons">
|
|
{#each features as feature}
|
|
<div class="bar">
|
|
<img src={feature.icon} alt={feature.label} />
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<div class="labels">
|
|
{#each features as feature}
|
|
<div>
|
|
{feature.label}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Integration Section -->
|
|
<section id="integration-easly">
|
|
<div class="integration-wrapper">
|
|
<div class="integration-text">
|
|
<h2 class="fade-up">
|
|
Sua empresa pronta para crescer com uma integração descomplicada
|
|
</h2>
|
|
|
|
<p class="fade-up">
|
|
Personalize suas cobranças: restrinja ao mesmo CPF, bloqueie
|
|
CNPJs ou crie regras de recebimento sob medida.
|
|
</p>
|
|
|
|
<div class="integration-benefits">
|
|
<span class="fade-up">Integração simples</span>
|
|
<span class="fade-up">Documentação clara</span>
|
|
<span class="fade-up">Time to market ágil</span>
|
|
</div>
|
|
|
|
<div class="integration-buttons fade-up">
|
|
<a href="https://developers.onz.software/" class="link-cta white">
|
|
<span>Acesse a documentação →</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="integration-graphic fade-up">
|
|
<img src={iconSlimBasspago} alt="Bass Pago Icon" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Modal
|
|
bind:isOpen={showModal}
|
|
on:close={closeModal}
|
|
>
|
|
</Modal>
|
|
|
|
<Footer />
|
|
|
|
<style>
|
|
/* =========================
|
|
DEVELOPERS PAGE STYLES
|
|
========================= */
|
|
|
|
.modal-content-custom {
|
|
color: #333;
|
|
line-height: 1.6;
|
|
text-align: center;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
margin: 0 0 16px 0;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.modal-description {
|
|
margin: 0 0 20px 0;
|
|
color: #666;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.modal-features {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 0 24px 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.modal-features li {
|
|
padding: 8px 0;
|
|
font-size: 0.95rem;
|
|
color: #555;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.modal-button {
|
|
padding: 14px 24px;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.modal-button.primary {
|
|
background: #41FE95;
|
|
color: #000;
|
|
}
|
|
|
|
.modal-button.primary:hover {
|
|
background: #35e085;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Build With Section */
|
|
.build-with {
|
|
position: relative;
|
|
height: 100dvh;
|
|
padding: 120px 20px 60px;
|
|
overflow: hidden;
|
|
background: black;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.build-with .container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 100px;
|
|
}
|
|
|
|
.build-with .container > .row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 40px;
|
|
}
|
|
|
|
.build-with .content {
|
|
flex: 1;
|
|
}
|
|
|
|
.build-with .content h1 {
|
|
color: white;
|
|
margin-bottom: 20px;
|
|
width: 80%;
|
|
font-weight: 400;
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
}
|
|
|
|
.build-with .content p {
|
|
font-size: 1.25rem;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
margin-bottom: 30px;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.build-with .content .link-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: white;
|
|
color: black;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
border: none;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.build-with .content .link-cta:hover {
|
|
background: #41FE95;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 25px rgba(65, 254, 149, 0.3);
|
|
}
|
|
|
|
.build-with .image {
|
|
width: 365px;
|
|
height: 394px;
|
|
flex-shrink: 0;
|
|
min-width: 280px;
|
|
max-width: 100vw;
|
|
overflow: visible;
|
|
display: block;
|
|
}
|
|
|
|
.build-with .image img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.build-with .mobile {
|
|
display: none;
|
|
}
|
|
|
|
.build-with .desktop {
|
|
display: block;
|
|
}
|
|
|
|
.build-with .steps {
|
|
display: flex;
|
|
gap: clamp(16px, 2vw, 34px);
|
|
justify-content: center;
|
|
align-items: stretch;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.build-with .step {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: 15px;
|
|
padding: clamp(22px, 4vw, 25px) clamp(16px, 2vw, 25px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 18px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-width: clamp(240px, 23vw, 330px);
|
|
max-width: 370px;
|
|
flex: 1;
|
|
transition: box-shadow .2s;
|
|
}
|
|
|
|
.build-with .step small {
|
|
color: #41FE95;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.build-with .step strong {
|
|
color: white;
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.build-with .step p {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
font-weight: 400;
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.build-with .step a {
|
|
color: #41FE95;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.build-with .step a:hover {
|
|
color: white;
|
|
}
|
|
|
|
/* Glow effects */
|
|
.build-with .glow-left,
|
|
.build-with .glow-right {
|
|
position: absolute;
|
|
width: 300px;
|
|
height: 300px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(65, 254, 149, 0.1) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.build-with .glow-left {
|
|
top: 20%;
|
|
left: -150px;
|
|
}
|
|
|
|
.build-with .glow-right {
|
|
bottom: 20%;
|
|
right: -150px;
|
|
}
|
|
|
|
/* Use Cases Section */
|
|
#use-cases {
|
|
width: 100%;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 80px 0;
|
|
}
|
|
|
|
#use-cases .container {
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: clamp(18px, 4vw, 60px);
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.use-cases-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.use-cases-header h2 {
|
|
text-align: left;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
color: #111;
|
|
font-size: clamp(1.7rem, 3vw, 2.4rem);
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
}
|
|
|
|
.use-cases-grid {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: clamp(16px, 2vw, 24px);
|
|
justify-content: center;
|
|
}
|
|
|
|
.use-case-card {
|
|
background: #f6f7ff;
|
|
border-radius: 15px;
|
|
padding: clamp(22px, 4vw, 30px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 18px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-height: 200px;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.use-case-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
z-index: 1;
|
|
}
|
|
|
|
.use-case-card h3,
|
|
.use-case-card p {
|
|
position: relative;
|
|
z-index: 2;
|
|
color: white;
|
|
}
|
|
|
|
.use-case-card h3 {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 500;
|
|
margin: 0;
|
|
letter-spacing: -0.02em;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.use-case-card p {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.use-case-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
/* Dev Tools Section */
|
|
#dev-tools {
|
|
background: #000;
|
|
padding: 80px 20px;
|
|
}
|
|
|
|
#dev-tools .container {
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.dev-content-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: stretch;
|
|
gap: 40px;
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
background: linear-gradient(244deg, #41FE95 -49.78%, #00F 137.84%);
|
|
min-height: 300px;
|
|
}
|
|
|
|
.dev-text-box {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 25px;
|
|
min-width: 0; /* Permite que o flex item encolha */
|
|
}
|
|
|
|
.dev-text-box h2 {
|
|
font-family: "Space Grotesk", sans-serif;
|
|
font-size: clamp(1.1rem, 2.5vw, 1.25rem);
|
|
font-weight: 700;
|
|
margin: 0;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.dev-text-box p {
|
|
font-family: "Space Grotesk", sans-serif;
|
|
font-size: clamp(0.95rem, 2vw, 1.1rem);
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
flex: 1;
|
|
}
|
|
|
|
.dev-text-box .btn-ghost {
|
|
display: inline-block;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
font-size: clamp(0.9rem, 1.8vw, 1rem);
|
|
font-weight: 500;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dev-text-box .btn-ghost:hover {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
transform: translateY(-2px);
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.dev-feature-box {
|
|
flex: 0 0 auto;
|
|
width: clamp(280px, 35vw, 360px);
|
|
padding: 30px;
|
|
background: rgba(0, 0, 0, 0.15);
|
|
border-radius: 15px;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-family: "Space Grotesk", sans-serif;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.dev-feature-box h3 {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: clamp(1rem, 2vw, 1.1rem);
|
|
font-weight: 600;
|
|
margin: 0 0 25px 0;
|
|
}
|
|
|
|
.feature-grid {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
}
|
|
|
|
.feature-grid .icons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.feature-grid .bar {
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 50%;
|
|
background: rgba(122, 122, 122, 0.9);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.feature-grid .bar:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.feature-grid .bar img {
|
|
width: 20px;
|
|
height: 20px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.feature-grid .labels {
|
|
font-size: clamp(0.95rem, 1.8vw, 1.05rem);
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
flex: 1;
|
|
}
|
|
|
|
.feature-grid .labels div {
|
|
height: 35px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Responsive para Dev Tools */
|
|
@media (max-width: 1024px) {
|
|
.dev-content-wrapper {
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
padding: 30px;
|
|
}
|
|
|
|
.dev-feature-box {
|
|
width: 100%;
|
|
padding: 25px;
|
|
}
|
|
|
|
.dev-text-box {
|
|
gap: 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#dev-tools {
|
|
padding: 60px 15px;
|
|
}
|
|
|
|
.dev-content-wrapper {
|
|
flex-direction: column;
|
|
gap: 25px;
|
|
padding: 25px 20px;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.dev-text-box {
|
|
gap: 18px;
|
|
text-align: center;
|
|
}
|
|
|
|
.dev-text-box h2 {
|
|
font-size: clamp(1.2rem, 4vw, 1.4rem);
|
|
text-align: center;
|
|
}
|
|
|
|
.dev-text-box p {
|
|
font-size: clamp(1rem, 3vw, 1.1rem);
|
|
text-align: center;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.dev-text-box .btn-ghost {
|
|
align-self: center;
|
|
padding: 10px 20px;
|
|
font-size: clamp(0.9rem, 2.5vw, 1rem);
|
|
}
|
|
|
|
.dev-feature-box {
|
|
width: 100%;
|
|
padding: 20px;
|
|
}
|
|
|
|
.dev-feature-box h3 {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.feature-grid {
|
|
justify-content: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.feature-grid .icons {
|
|
gap: 10px;
|
|
}
|
|
|
|
.feature-grid .bar {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.feature-grid .bar img {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.feature-grid .labels {
|
|
text-align: left;
|
|
}
|
|
|
|
.feature-grid .labels div {
|
|
height: 32px;
|
|
margin-bottom: 10px;
|
|
font-size: clamp(0.9rem, 2.5vw, 1rem);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
#dev-tools {
|
|
padding: 50px 10px;
|
|
}
|
|
|
|
.dev-content-wrapper {
|
|
padding: 20px 15px;
|
|
gap: 20px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.dev-text-box {
|
|
gap: 15px;
|
|
}
|
|
|
|
.dev-text-box h2 {
|
|
font-size: clamp(1.1rem, 5vw, 1.3rem);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.dev-text-box p {
|
|
font-size: clamp(0.9rem, 3.5vw, 1rem);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.dev-text-box .btn-ghost {
|
|
padding: 8px 16px;
|
|
font-size: 0.9rem;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.dev-feature-box {
|
|
padding: 18px;
|
|
}
|
|
|
|
.dev-feature-box h3 {
|
|
font-size: 1rem;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.feature-grid {
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.feature-grid .icons {
|
|
flex-direction: row;
|
|
gap: 12px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.feature-grid .labels {
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.feature-grid .labels div {
|
|
height: auto;
|
|
margin-bottom: 8px;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Ajuste para telas muito pequenas */
|
|
@media (max-width: 320px) {
|
|
.dev-content-wrapper {
|
|
padding: 15px 10px;
|
|
}
|
|
|
|
.dev-text-box h2 {
|
|
font-size: 1.1rem;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.dev-text-box p {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.dev-feature-box {
|
|
padding: 15px;
|
|
}
|
|
|
|
.feature-grid .bar {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.feature-grid .bar img {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
/* Integration Section */
|
|
#integration-easly {
|
|
width: 100%;
|
|
padding: 120px 90px;
|
|
background-color: #000;
|
|
color: #fff;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.integration-wrapper {
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 60px;
|
|
}
|
|
|
|
.integration-text {
|
|
flex: 1;
|
|
min-width: 300px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 53px;
|
|
}
|
|
|
|
.integration-text h2 {
|
|
line-height: 1.2;
|
|
max-width: 600px;
|
|
color: #fff;
|
|
font-weight: 400;
|
|
margin-bottom: 24px;
|
|
font-size: clamp(2rem, 4vw, 2.75rem);
|
|
}
|
|
|
|
.integration-text p {
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
max-width: 597px;
|
|
margin-bottom: 40px;
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.integration-benefits {
|
|
display: flex;
|
|
gap: 10px 30px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.integration-benefits span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
.integration-benefits span::before {
|
|
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2341FE95" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20,6 9,17 4,12"></polyline></svg>');
|
|
}
|
|
|
|
.integration-buttons {
|
|
display: flex;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.integration-buttons .link-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.integration-buttons .link-cta.white {
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
.integration-buttons .link-cta.white:hover {
|
|
background: #41FE95;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 25px rgba(65, 254, 149, 0.3);
|
|
}
|
|
|
|
.integration-buttons .link-cta:not(.white) {
|
|
background: transparent;
|
|
color: #fff;
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.integration-buttons .link-cta:not(.white):hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.integration-graphic {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
|
|
.integration-graphic img {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
}
|
|
|
|
/* Fade animations */
|
|
.fade-in {
|
|
opacity: 0;
|
|
animation: fadeIn 1s ease forwards;
|
|
}
|
|
|
|
.fade-up {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.8s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Responsive Styles */
|
|
@media (max-width: 768px) {
|
|
.build-with {
|
|
height: auto;
|
|
min-height: 100vh;
|
|
padding: clamp(140px, 20vw, 160px) clamp(15px, 5vw, 20px) clamp(60px, 15vw, 80px); /* Aumentado o padding-top */
|
|
}
|
|
|
|
.build-with .container {
|
|
gap: clamp(40px, 10vw, 60px);
|
|
}
|
|
|
|
.build-with .container > .row {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: clamp(30px, 8vw, 40px);
|
|
text-align: center;
|
|
}
|
|
|
|
.build-with .content {
|
|
order: 2;
|
|
}
|
|
|
|
.build-with .content h1 {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: clamp(1.75rem, 8vw, 3rem);
|
|
margin-bottom: clamp(15px, 4vw, 20px);
|
|
line-height: 1.1; /* Melhor espaçamento */
|
|
padding-top: 20px; /* Espaçamento extra */
|
|
}
|
|
|
|
.build-with .content p {
|
|
text-align: center;
|
|
margin-bottom: clamp(20px, 6vw, 30px);
|
|
max-width: 100%;
|
|
}
|
|
|
|
.build-with .mobile {
|
|
display: block;
|
|
order: 1;
|
|
text-align: center;
|
|
max-width: 100%;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.build-with .desktop {
|
|
display: none;
|
|
}
|
|
|
|
.build-with .steps {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.build-with .step {
|
|
width: 100%;
|
|
max-width: 99vw;
|
|
min-width: 0;
|
|
padding: 20px;
|
|
border-radius: 14px;
|
|
gap: 14px;
|
|
}
|
|
|
|
.use-cases-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 14px;
|
|
}
|
|
|
|
.use-case-card {
|
|
max-width: 99vw;
|
|
min-width: 0;
|
|
padding: 20px;
|
|
border-radius: 14px;
|
|
gap: 14px;
|
|
}
|
|
|
|
.dev-content-wrapper {
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
}
|
|
|
|
.dev-feature-box {
|
|
width: 100%;
|
|
padding: 24px;
|
|
margin: 0;
|
|
}
|
|
|
|
.dev-text-box {
|
|
width: 100%;
|
|
margin: 0;
|
|
height: auto;
|
|
}
|
|
|
|
.feature-grid {
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.feature-grid .labels {
|
|
text-align: left;
|
|
}
|
|
|
|
#integration-easly {
|
|
padding: 60px 20px;
|
|
}
|
|
|
|
.integration-wrapper {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.integration-graphic {
|
|
order: -1;
|
|
width: 70%;
|
|
max-width: 70%;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.integration-text {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
gap: 30px;
|
|
}
|
|
|
|
.integration-buttons {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.integration-buttons .link-cta {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.build-with {
|
|
padding: 160px 15px 60px; /* Padding-top ainda maior para telas pequenas */
|
|
}
|
|
|
|
.build-with .content h1 {
|
|
font-size: clamp(1.5rem, 9vw, 2.5rem);
|
|
padding-top: 30px; /* Mais espaçamento */
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.build-with .container {
|
|
gap: 30px;
|
|
}
|
|
|
|
.build-with .container > .row {
|
|
gap: 25px;
|
|
}
|
|
}
|
|
|
|
/* Ajuste para telas muito pequenas */
|
|
@media (max-width: 360px) {
|
|
.build-with {
|
|
padding: 180px 10px 50px; /* Padding máximo para telas muito pequenas */
|
|
}
|
|
|
|
.build-with .content h1 {
|
|
padding-top: 40px;
|
|
font-size: clamp(1.4rem, 10vw, 2.2rem);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.integration-wrapper {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.integration-text {
|
|
max-width: 600px;
|
|
}
|
|
|
|
.integration-graphic {
|
|
width: 100%;
|
|
text-align: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
/* Utility classes */
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
</style> |