286 lines
8.0 KiB
TypeScript
286 lines
8.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Section } from "./Section";
|
|
|
|
interface Tier {
|
|
id: string;
|
|
badge: string;
|
|
level: string;
|
|
title: string;
|
|
tagline: string;
|
|
description: string;
|
|
deliverables: string[];
|
|
pricing: string;
|
|
pricingNote: string;
|
|
featured?: boolean;
|
|
ctaLabel: string;
|
|
ctaHref: string;
|
|
}
|
|
|
|
const TIERS: Tier[] = [
|
|
{
|
|
id: "discovery",
|
|
badge: "Entrada / Baixo Risco",
|
|
level: "01",
|
|
title: "Auditoria & Diagnóstico Técnico",
|
|
tagline: "Fotografia clara do problema antes de qualquer comprometimento.",
|
|
description:
|
|
"Análise profunda de arquitetura, performance ou segurança com entrega de um plano de ação executável. Ideal para quem precisa de direção antes de contratar execução.",
|
|
deliverables: [
|
|
"Relatório de gargalos e dívida técnica",
|
|
"Mapeamento de riscos e dependências",
|
|
"Sugestão de stack e cronograma de mitigação",
|
|
"Plano de ação priorizado",
|
|
],
|
|
pricing: "Valor Fixo",
|
|
pricingNote: "Contrato único. Entrega em até 5 dias úteis.",
|
|
featured: false,
|
|
ctaLabel: "Solicitar diagnóstico",
|
|
ctaHref: "#contact",
|
|
},
|
|
{
|
|
id: "cycles",
|
|
badge: "Mais Escolhido",
|
|
level: "02",
|
|
title: "Ciclos de Engenharia",
|
|
tagline: "Capacidade produtiva garantida. Entrega a cada 2 semanas.",
|
|
description:
|
|
"Desenvolvimento contínuo com a previsibilidade de orçamento do escopo fechado e a agilidade de sprints. Milestones claros, sem amarras de contrato longo.",
|
|
deliverables: [
|
|
"Features em produção a cada ciclo",
|
|
"Refatoração iterativa com rastreabilidade",
|
|
"Documentação técnica atualizada",
|
|
"Capacidade de pivotar prioridades no início de cada sprint",
|
|
],
|
|
pricing: "Fixo por Ciclo",
|
|
pricingNote: "Assinatura quinzenal ou mensal. Cancele a qualquer ciclo.",
|
|
featured: true,
|
|
ctaLabel: "Iniciar ciclo de engenharia",
|
|
ctaHref: "#contact",
|
|
},
|
|
{
|
|
id: "fractional",
|
|
badge: "Premium / High-Ticket",
|
|
level: "03",
|
|
title: "Fractional Tech Lead",
|
|
tagline: "Liderança técnica senior. Sem o custo de um CTO full-time.",
|
|
description:
|
|
"Direção arquitetural, gestão de risco e sustentação de operações críticas. Para empresas que precisam de decisões de alto impacto com responsabilidade contínua.",
|
|
deliverables: [
|
|
"SLA prioritário Zero-Risk",
|
|
"Code review e liderança do time interno",
|
|
"Decisões de infra: Cloud, VPS, CI/CD",
|
|
"Consultoria estratégica recorrente",
|
|
],
|
|
pricing: "Retainer Mensal",
|
|
pricingNote: "Renovação mensal. Vagas limitadas.",
|
|
featured: false,
|
|
ctaLabel: "Agendar conversa estratégica",
|
|
ctaHref: "#contact",
|
|
},
|
|
];
|
|
|
|
function TierCard({ tier }: { tier: Tier }) {
|
|
const [hovered, setHovered] = useState(false);
|
|
|
|
return (
|
|
<article
|
|
onMouseEnter={() => setHovered(true)}
|
|
onMouseLeave={() => setHovered(false)}
|
|
onFocus={() => setHovered(true)}
|
|
onBlur={() => setHovered(false)}
|
|
tabIndex={0}
|
|
style={{
|
|
border: tier.featured
|
|
? "2px solid #0A0A0A"
|
|
: "1px solid rgba(10,10,10,0.1)",
|
|
background: tier.featured ? "#0A0A0A" : "#fff",
|
|
padding: "var(--sp-6)",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "var(--sp-4)",
|
|
position: "relative",
|
|
transition: "border-color 0.3s ease, box-shadow 0.3s ease",
|
|
outline: "none",
|
|
cursor: "default",
|
|
boxShadow: hovered
|
|
? "0 8px 32px rgba(10,10,10,0.1)"
|
|
: "0 1px 4px rgba(10,10,10,0.04)",
|
|
}}
|
|
>
|
|
{/* Top row */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "flex-start",
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
fontSize: "9px",
|
|
letterSpacing: "0.16em",
|
|
textTransform: "uppercase",
|
|
color: tier.featured ? "#E8FF00" : "rgba(10,10,10,0.4)",
|
|
}}
|
|
>
|
|
{tier.badge}
|
|
</span>
|
|
<span
|
|
style={{
|
|
fontFamily: "var(--font-display)",
|
|
fontSize: "11px",
|
|
color: tier.featured
|
|
? "rgba(255,255,255,0.15)"
|
|
: "rgba(10,10,10,0.12)",
|
|
fontWeight: 800,
|
|
letterSpacing: "0.04em",
|
|
}}
|
|
>
|
|
{tier.level}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<div>
|
|
<h3
|
|
style={{
|
|
fontFamily: "var(--font-display)",
|
|
fontSize: "clamp(18px, 2.2vw, 26px)",
|
|
lineHeight: 1.1,
|
|
letterSpacing: "-0.02em",
|
|
fontWeight: 800,
|
|
color: tier.featured ? "#fff" : "#0A0A0A",
|
|
}}
|
|
>
|
|
{tier.title}
|
|
</h3>
|
|
<p
|
|
style={{
|
|
marginTop: "var(--sp-2)",
|
|
fontSize: "11px",
|
|
color: tier.featured
|
|
? "rgba(232,255,0,0.85)"
|
|
: "rgba(10,10,10,0.5)",
|
|
lineHeight: 1.6,
|
|
}}
|
|
>
|
|
{tier.tagline}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<p
|
|
style={{
|
|
fontSize: "12px",
|
|
color: tier.featured
|
|
? "rgba(255,255,255,0.7)"
|
|
: "rgba(10,10,10,0.65)",
|
|
lineHeight: 1.8,
|
|
}}
|
|
>
|
|
{tier.description}
|
|
</p>
|
|
|
|
{/* Deliverables */}
|
|
<ul
|
|
style={{
|
|
paddingLeft: "var(--sp-5)",
|
|
fontSize: "12px",
|
|
color: tier.featured ? "rgba(255,255,255,0.6)" : "rgba(10,10,10,0.6)",
|
|
lineHeight: 1.9,
|
|
flexGrow: 1,
|
|
}}
|
|
>
|
|
{tier.deliverables.map((d) => (
|
|
<li key={d} style={{ listStyleType: "disc" }}>
|
|
{d}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* Pricing */}
|
|
<div
|
|
style={{
|
|
borderTop: tier.featured
|
|
? "1px solid rgba(255,255,255,0.1)"
|
|
: "1px solid rgba(10,10,10,0.08)",
|
|
paddingTop: "var(--sp-4)",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
fontFamily: "var(--font-display)",
|
|
fontSize: "clamp(14px, 1.5vw, 18px)",
|
|
fontWeight: 800,
|
|
color: tier.featured ? "#E8FF00" : "#0A0A0A",
|
|
letterSpacing: "-0.01em",
|
|
}}
|
|
>
|
|
{tier.pricing}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: "10px",
|
|
color: tier.featured
|
|
? "rgba(255,255,255,0.3)"
|
|
: "rgba(10,10,10,0.35)",
|
|
marginTop: "4px",
|
|
letterSpacing: "0.06em",
|
|
}}
|
|
>
|
|
{tier.pricingNote}
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA — reveals on hover/focus */}
|
|
<a
|
|
href={tier.ctaHref}
|
|
style={{
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
padding: "12px 18px",
|
|
fontSize: "10px",
|
|
letterSpacing: "0.12em",
|
|
textTransform: "uppercase",
|
|
textDecoration: "none",
|
|
fontWeight: 700,
|
|
background: tier.featured ? "#E8FF00" : "#0A0A0A",
|
|
color: tier.featured ? "#0A0A0A" : "#fff",
|
|
transition: "opacity 0.25s ease, transform 0.25s ease",
|
|
opacity: hovered ? 1 : 0,
|
|
transform: hovered ? "translateY(0)" : "translateY(6px)",
|
|
pointerEvents: hovered ? "auto" : "none",
|
|
}}
|
|
>
|
|
{tier.ctaLabel} →
|
|
</a>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
export function WorkModalities() {
|
|
return (
|
|
<Section
|
|
id="modalities"
|
|
eyebrow="CONTRACT_PROTOCOLS.sys"
|
|
title="Engenharia sob demanda. Previsibilidade de entrega sem overhead."
|
|
description="Três níveis de contratação desenhados como uma esteira de valor — do diagnóstico rápido à parceria estratégica de longo prazo."
|
|
>
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
|
|
gap: "var(--sp-6)",
|
|
}}
|
|
>
|
|
{TIERS.map((tier) => (
|
|
<TierCard key={tier.id} tier={tier} />
|
|
))}
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|