273 lines
9.0 KiB
TypeScript
273 lines
9.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import {
|
|
Briefcase,
|
|
Clock,
|
|
HardHat,
|
|
Lightbulb,
|
|
Building2,
|
|
Users,
|
|
User,
|
|
Star,
|
|
CheckCircle2,
|
|
Terminal,
|
|
ShieldCheck,
|
|
Zap,
|
|
} from "lucide-react";
|
|
|
|
// --- 1. DATA ---
|
|
const WorkModalitiesData = [
|
|
{
|
|
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.",
|
|
description:
|
|
"Engenharia sob demanda com foco em troubleshooting e otimização de performance. Rastreabilidade total via timesheet detalhado.",
|
|
benefits: [
|
|
"Diagnóstico Sênior Imediato",
|
|
"Sem Compromisso de Longo Prazo",
|
|
"Documentação de Alterações",
|
|
],
|
|
icon: Zap,
|
|
color: "blue",
|
|
featured: false,
|
|
},
|
|
{
|
|
title: "Alocação de Sprint",
|
|
value: "Eficiência Financeira",
|
|
badge: "MAIS ESCOLHIDO",
|
|
idealFor:
|
|
"Desenvolvimento contínuo de features com previsibilidade de budget e prioridade técnica.",
|
|
description:
|
|
"Pacotes de horas pré-pagas que garantem disponibilidade na agenda e redução do custo unitário por hora. Ideal para scaling.",
|
|
benefits: [
|
|
"Taxa horária reduzida (Lock-in)",
|
|
"Garantia de Disponibilidade",
|
|
"Prioridade em Critical Bugs",
|
|
],
|
|
icon: Briefcase,
|
|
color: "green",
|
|
featured: true,
|
|
},
|
|
{
|
|
title: "Engenheiro Dedicado",
|
|
value: "A partir de R$ 2.800/mês",
|
|
badge: "VIP & ESTRATÉGICO",
|
|
idealFor:
|
|
"Empresas que necessitam de um 'Fractional CTO' ou Lead Engineer para governança técnica.",
|
|
description:
|
|
"Parceria estratégica com foco em sustentabilidade do sistema, manutenção preventiva e evolução arquitetural contínua.",
|
|
benefits: [
|
|
"SLA de Resposta Prioritária",
|
|
"Gestão de Débito Técnico",
|
|
"Consultoria Estratégica",
|
|
],
|
|
icon: ShieldCheck,
|
|
color: "purple",
|
|
featured: false,
|
|
},
|
|
{
|
|
title: "Squad por Projeto",
|
|
value: "Escopo Fechado",
|
|
badge: "CONTROLE TOTAL",
|
|
idealFor:
|
|
"Produtos novos ou migrações de sistemas onde o orçamento é rigorosamente definido pelo escopo.",
|
|
description:
|
|
"Desenvolvimento orientado a entregáveis (milestones). Mitigação de riscos através de definições claras de 'Done'.",
|
|
benefits: [
|
|
"Estimativa de Riscos Inclusa",
|
|
"Cronograma de Entregas",
|
|
"Garantia Pós-Entrega",
|
|
],
|
|
icon: HardHat,
|
|
color: "orange",
|
|
featured: false,
|
|
},
|
|
];
|
|
|
|
// --- 2. COMPONENTS ---
|
|
|
|
export function WorkModalities() {
|
|
return (
|
|
<section
|
|
id="modalities"
|
|
className="py-32 px-6 relative"
|
|
>
|
|
{/* Background Decor handled globally now, avoiding overflow-hidden here allows bleed */}
|
|
|
|
<div className="max-w-7xl mx-auto relative z-10">
|
|
|
|
{/* Header Profissional */}
|
|
<div className="mb-24 text-center md:text-left">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-950/30 border border-blue-500/20 text-blue-400 font-mono text-xs tracking-wider mb-6"
|
|
>
|
|
<Terminal className="w-3 h-3" />
|
|
<span>CONTRACT_PROTOCOLS.sys</span>
|
|
</motion.div>
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.1 }}
|
|
className="text-4xl md:text-6xl font-black text-white tracking-tighter"
|
|
>
|
|
Flexibilidade <br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-cyan-400">Contratual</span>
|
|
</motion.h2>
|
|
<p className="mt-6 text-lg text-slate-400 max-w-2xl leading-relaxed font-light border-l-2 border-slate-800 pl-6">
|
|
Modelos de engajamento adaptáveis para diferentes estágios de maturidade tecnológica e orçamentária.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Comparação de Mercado (Anchoring Effect) */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-24">
|
|
<MarketCard
|
|
title="Agências Tradicionais"
|
|
price="Alto Overhead"
|
|
icon={Building2}
|
|
color="text-red-500"
|
|
delay={0}
|
|
best={false}
|
|
/>
|
|
<MarketCard
|
|
title="Consultorias Big Tech"
|
|
price="Custo Inflacionado"
|
|
icon={Users}
|
|
color="text-orange-500"
|
|
delay={0.1}
|
|
best={false}
|
|
/>
|
|
<MarketCard
|
|
title="Freelancers Generalistas"
|
|
price="Risco Técnico"
|
|
icon={User}
|
|
color="text-yellow-500"
|
|
delay={0.2}
|
|
best={false}
|
|
/>
|
|
<MarketCard
|
|
title="Engenheiro Especialista"
|
|
price="High ROI"
|
|
icon={Star}
|
|
color="text-emerald-400"
|
|
best={true}
|
|
delay={0.3}
|
|
/>
|
|
</div>
|
|
|
|
{/* Grid de Modalidades */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{WorkModalitiesData.map((modality, index) => (
|
|
<ModalityCard key={modality.title} modality={modality} index={index} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function MarketCard({ title, price, icon: Icon, color, best, delay }: any) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay }}
|
|
className={`p-6 rounded-2xl border backdrop-blur-sm transition-all duration-300 ${best
|
|
? "bg-emerald-500/5 border-emerald-500/20 shadow-[0_0_20px_rgba(16,185,129,0.1)]"
|
|
: "bg-zinc-900/40 border-white/5 opacity-70 hover:opacity-100"
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<Icon className={`w-4 h-4 ${color}`} />
|
|
<h4 className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
|
|
{title}
|
|
</h4>
|
|
</div>
|
|
<p className={`text-sm font-bold ${best ? "text-emerald-400" : "text-slate-500"}`}>
|
|
{price}
|
|
</p>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
function ModalityCard({ modality, index }: { modality: any; index: number }) {
|
|
const Icon = modality.icon;
|
|
const isFeatured = modality.featured;
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-50px" }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
className={`group relative flex flex-col p-8 rounded-3xl border transition-all duration-500 overflow-hidden ${isFeatured
|
|
? "bg-zinc-900/60 border-blue-500/30 shadow-2xl shadow-blue-900/10"
|
|
: "bg-zinc-900/40 border-white/5 hover:border-white/10"
|
|
}`}
|
|
>
|
|
{/* Hover Gradient */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
|
|
|
{/* Badge */}
|
|
{modality.badge && (
|
|
<div className="absolute top-6 right-6">
|
|
<span className={`px-3 py-1 rounded-full text-[10px] font-bold tracking-widest uppercase border ${isFeatured
|
|
? "bg-blue-500/10 border-blue-500/20 text-blue-300"
|
|
: "bg-slate-800/50 border-slate-700 text-slate-400"
|
|
}`}>
|
|
{modality.badge}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Header */}
|
|
<div className="relative z-10 mb-8">
|
|
<div className={`w-12 h-12 rounded-xl flex items-center justify-center mb-6 transition-transform group-hover:scale-110 ${isFeatured ? "bg-blue-500/10 text-blue-400" : "bg-slate-800/50 text-slate-400"
|
|
}`}>
|
|
<Icon className="w-6 h-6" />
|
|
</div>
|
|
|
|
<h3 className="text-2xl font-bold text-white mb-2 group-hover:text-blue-200 transition-colors">
|
|
{modality.title}
|
|
</h3>
|
|
<p className="font-mono text-sm text-slate-500">
|
|
{modality.value}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 flex-1">
|
|
<p className="text-slate-400 text-sm leading-relaxed mb-8">
|
|
{modality.description}
|
|
</p>
|
|
|
|
<ul className="space-y-3 mb-8">
|
|
{modality.benefits.map((benefit: string, i: number) => (
|
|
<li key={i} className="flex items-start gap-3 text-xs text-slate-300">
|
|
<CheckCircle2 className={`w-4 h-4 flex-shrink-0 mt-0.5 ${isFeatured ? "text-blue-400" : "text-slate-500"}`} />
|
|
<span>{benefit}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="relative z-10 pt-6 border-t border-white/5 mt-auto">
|
|
<p className="text-[10px] uppercase tracking-wider text-slate-500">
|
|
<span className="text-slate-600 font-bold mb-1 block">Ideal Para:</span>
|
|
{modality.idealFor}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|