feat: Initialize portfolio project with core pages, UI components, and configuration files.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
aa07d6faeb
commit
0523052864
38 files changed
+1165
-460
No files matched your search
@@ -1,108 +1,252 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Section } from "./Section";
|
||||
|
||||
const WorkModalitiesData = [
|
||||
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[] = [
|
||||
{
|
||||
title: "Intervenção Ad-hoc",
|
||||
value: "R$ 35 - 70/hora",
|
||||
badge: "Agilidade",
|
||||
idealFor:
|
||||
"Resolução de gargalos técnicos específicos e consultoria de arquitetura imediata.",
|
||||
id: "discovery",
|
||||
badge: "Entrada / Baixo Risco",
|
||||
level: "01",
|
||||
title: "Auditoria & Diagnóstico Técnico",
|
||||
tagline: "Fotografia clara do problema antes de qualquer comprometimento.",
|
||||
description:
|
||||
"Engenharia sob demanda com foco em troubleshooting, performance e decisões rápidas com rastreabilidade.",
|
||||
benefits: [
|
||||
"Diagnóstico sênior imediato",
|
||||
"Sem compromisso de longo prazo",
|
||||
"Documentação de alterações",
|
||||
"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",
|
||||
},
|
||||
{
|
||||
title: "Alocação de sprint",
|
||||
value: "Eficiência financeira",
|
||||
badge: "Mais escolhido",
|
||||
idealFor:
|
||||
"Times que precisam de entrega contínua com previsibilidade de orçamento e prioridade técnica.",
|
||||
id: "cycles",
|
||||
badge: "Mais Escolhido",
|
||||
level: "02",
|
||||
title: "Ciclos de Engenharia",
|
||||
tagline: "Capacidade produtiva garantida. Entrega a cada 2 semanas.",
|
||||
description:
|
||||
"Pacotes de horas pré-pagas com redução de custo unitário e espaço reservado na agenda para evolução constante.",
|
||||
benefits: [
|
||||
"Taxa horária reduzida",
|
||||
"Garantia de disponibilidade",
|
||||
"Prioridade em bugs críticos",
|
||||
"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",
|
||||
},
|
||||
{
|
||||
title: "Engenheiro dedicado",
|
||||
value: "A partir de R$ 2.800/mês",
|
||||
badge: "Estratégico",
|
||||
idealFor:
|
||||
"Empresas que precisam de liderança técnica contínua, coordenação de backlog e direção arquitetural.",
|
||||
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:
|
||||
"Parceria recorrente para sustentação, evolução de sistema, revisão de dívida técnica e tomada de decisão.",
|
||||
benefits: [
|
||||
"SLA prioritário",
|
||||
"Gestão de débito técnico",
|
||||
"Consultoria estratégica",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Squad por projeto",
|
||||
value: "Escopo fechado",
|
||||
badge: "Controle total",
|
||||
idealFor:
|
||||
"Produtos novos, replatforming ou migrações com orçamento definido por entregáveis e marcos claros.",
|
||||
description:
|
||||
"Execução orientada a milestones com redução de risco através de definição objetiva de escopo e critérios de done.",
|
||||
benefits: [
|
||||
"Estimativa de riscos inclusa",
|
||||
"Cronograma de entregas",
|
||||
"Garantia pós-entrega",
|
||||
"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="Formatos de contratação para contextos técnicos distintos"
|
||||
description="Modelos pensados para reduzir overhead, preservar velocidade de decisão e manter previsibilidade."
|
||||
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 className="ds-grid-4 mb-sp-6">
|
||||
{[
|
||||
["Agências tradicionais", "Alto overhead"],
|
||||
["Consultorias big tech", "Custo inflacionado"],
|
||||
["Freelancers generalistas", "Risco técnico"],
|
||||
["Engenheiro especialista", "High ROI"],
|
||||
].map(([label, value]) => (
|
||||
<div key={label} className="ds-panel">
|
||||
<div className="ds-kicker">{label}</div>
|
||||
<div className="mt-sp-3 font-display text-2xl font-extrabold tracking-[-0.02em]">
|
||||
{value}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="ds-grid-2">
|
||||
{WorkModalitiesData.map((modality) => (
|
||||
<article key={modality.title} className="ds-card">
|
||||
<div className="flex items-center justify-between gap-sp-4">
|
||||
<span className="ds-kicker">{modality.badge}</span>
|
||||
<span className="ds-tag">{modality.value}</span>
|
||||
</div>
|
||||
<h3 className="ds-card-title">{modality.title}</h3>
|
||||
<p className="ds-copy">{modality.description}</p>
|
||||
<div className="mt-sp-5 rounded-[var(--r-md)] bg-[rgba(10,10,10,.03)] p-sp-4 text-[11px] leading-7 text-ink-80">
|
||||
Ideal para: {modality.idealFor}
|
||||
</div>
|
||||
<ul className="ds-list">
|
||||
{modality.benefits.map((benefit) => (
|
||||
<li key={benefit}>{benefit}</li>
|
||||
))}
|
||||
</ul>
|
||||
</article>
|
||||
<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>
|
||||
|
||||
Reference in new issue
Block a user