Evandro Fonseca Junior
8987d06eb4
- Refactored the Contact component to improve form handling and user feedback, introducing a custom shimmer button and enhanced form validation. - Updated the Experience component to optimize rendering and improve data handling with memoization, ensuring efficient performance. - Enhanced the Projects component with a new layout and improved project filtering, utilizing memoization for better performance. - Refined the Skills component to streamline the display of technical skills, incorporating a loading state and error handling for better user experience. - Revamped the WorkModalities component to present service options more clearly, including a market comparison section for better user decision-making.
158 lines
7.5 KiB
TypeScript
158 lines
7.5 KiB
TypeScript
"use client"; // <--- DIRETIVA OBRIGATÓRIA NA PRIMEIRA LINHA
|
|
|
|
import React from "react";
|
|
import { motion } from "motion/react";
|
|
import {
|
|
Briefcase, Clock, HardHat, Lightbulb,
|
|
Building2, Users, User, Star, CheckCircle2
|
|
} from "lucide-react";
|
|
|
|
// --- 1. DATA (Definido aqui para evitar erros de serialização) ---
|
|
const WorkModalitiesData = [
|
|
{
|
|
title: "Consultoria por Hora",
|
|
value: "R$ 35 - 70/hora",
|
|
badge: "RECOMENDADO",
|
|
idealFor: "Empresas que buscam flexibilidade máxima e expertise especializada.",
|
|
description: "Transparência total: você paga apenas pelas horas trabalhadas. Ideal para resolver problemas específicos com expertise sênior.",
|
|
benefits: ["Transparência total", "Estimativas claras", "Flexibilidade total", "Custo-benefício otimizado", "Engenharia de Software Sênior"],
|
|
icon: Lightbulb,
|
|
color: "blue",
|
|
featured: true,
|
|
},
|
|
{
|
|
title: "Pacotes de Horas",
|
|
value: "Até 21% de Desconto",
|
|
idealFor: "Clientes que buscam economia com comprometimento antecipado e prioridade na agenda.",
|
|
description: "Invista antecipadamente e garanta preços fixos por 6 meses. Ideal para projetos recorrentes.",
|
|
benefits: ["10h: R$ 65/h (7% off)", "20h: R$ 60/h (14% off)", "40h+: R$ 55/h (21% off)", "Prioridade na agenda"],
|
|
icon: Briefcase,
|
|
color: "green",
|
|
},
|
|
{
|
|
title: "Retainer Mensal",
|
|
value: "A partir de R$ 2.800/mês",
|
|
idealFor: "Negócios que valorizam estabilidade e acesso prioritário a um especialista dedicado.",
|
|
description: "Parceria estratégica com suporte contínuo e manutenção preventiva. Transforme sua empresa em parceiro VIP.",
|
|
benefits: ["Acesso prioritário exclusivo", "Horas mensais inclusas", "Suporte preventivo", "Previsibilidade financeira"],
|
|
icon: Clock,
|
|
color: "purple",
|
|
},
|
|
{
|
|
title: "Desenvolvimento Sob Demanda",
|
|
value: "Estimativa em Horas",
|
|
idealFor: "Projetos específicos que precisam de controle total sobre investimento e escopo.",
|
|
description: "Projetos customizados com estimativas claras. Pague apenas pelo desenvolvimento necessário.",
|
|
benefits: ["Escopo ajustável", "Controle total de investimento", "Foco em performance", "Sem surpresas no valor"],
|
|
icon: HardHat,
|
|
color: "orange",
|
|
},
|
|
];
|
|
|
|
// --- 2. DESIGN TOKENS ---
|
|
const COLOR_VARIANTS: Record<string, string> = {
|
|
blue: "border-blue-500/30 bg-blue-500/5 text-blue-400 hover:border-blue-500/60 shadow-blue-500/5",
|
|
green: "border-green-500/30 bg-green-500/5 text-green-400 hover:border-green-500/60 shadow-green-500/5",
|
|
purple: "border-purple-500/30 bg-purple-500/5 text-purple-400 hover:border-purple-500/60 shadow-purple-500/5",
|
|
orange: "border-orange-500/30 bg-orange-500/5 text-orange-400 hover:border-orange-500/60 shadow-orange-500/5",
|
|
};
|
|
|
|
export function WorkModalities() {
|
|
return (
|
|
<section id="modalities" className="py-32 px-6 bg-[#030712] relative overflow-hidden">
|
|
<div className="max-w-7xl mx-auto relative z-10">
|
|
|
|
{/* Header Profissional */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
className="text-center mb-20"
|
|
>
|
|
<div className="inline-flex items-center gap-2 bg-blue-500/10 px-4 py-2 rounded-full mb-6 border border-blue-500/20">
|
|
<div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
|
|
<span className="text-xs font-bold text-blue-300 uppercase tracking-widest font-mono">Business_Architect</span>
|
|
</div>
|
|
<h2 className="text-5xl md:text-7xl font-black text-white tracking-tighter leading-none mb-6">
|
|
Flexibilidade <span className="text-slate-700 italic">Total</span>
|
|
</h2>
|
|
<p className="text-slate-400 max-w-2xl mx-auto text-lg">
|
|
Modelos de contratação adaptáveis para diferentes estágios de maturidade tecnológica.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Comparação de Mercado (Anchoring Effect) */}
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-20">
|
|
<MarketCard title="Agências" price="R$ 15k-50k" icon={Building2} color="text-red-400" />
|
|
<MarketCard title="Consultorias" price="R$ 150-300/h" icon={Users} color="text-orange-400" />
|
|
<MarketCard title="Freelancers" price="R$ 40-80/h" icon={User} color="text-yellow-400" />
|
|
<MarketCard title="Engenheiro" price="R$ 35-70/h" icon={Star} color="text-green-400" best />
|
|
</div>
|
|
|
|
{/* Grid de Modalidades */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{WorkModalitiesData.map((modality, index) => {
|
|
const style = COLOR_VARIANTS[modality.color] || COLOR_VARIANTS.blue;
|
|
const Icon = modality.icon;
|
|
|
|
return (
|
|
<motion.div
|
|
key={modality.title}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, amount: 0.2 }}
|
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
|
className={`relative p-8 rounded-[2.5rem] border-2 backdrop-blur-xl transition-all duration-500 shadow-xl ${style}`}
|
|
>
|
|
{modality.badge && (
|
|
<span className="absolute -top-3 right-8 bg-blue-600 text-white px-4 py-1 rounded-full text-[10px] font-black tracking-widest uppercase shadow-lg shadow-blue-600/20">
|
|
{modality.badge}
|
|
</span>
|
|
)}
|
|
|
|
<div className="flex items-center gap-6 mb-8">
|
|
<div className="p-4 rounded-2xl bg-slate-900 border border-slate-800 group-hover:scale-110 transition-transform">
|
|
<Icon className="w-8 h-8" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-2xl font-bold text-white tracking-tight">{modality.title}</h3>
|
|
<p className="text-xl font-mono font-bold opacity-80">{modality.value}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-slate-400 text-sm leading-relaxed mb-8 h-20 line-clamp-3">
|
|
{modality.description}
|
|
</p>
|
|
|
|
<div className="space-y-3 mb-8">
|
|
{modality.benefits.map((benefit, bIdx) => (
|
|
<div key={bIdx} className="flex items-center gap-3 text-slate-300 text-xs font-medium">
|
|
<CheckCircle2 className="w-4 h-4 text-green-500 flex-shrink-0" />
|
|
<span>{benefit}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="pt-6 border-t border-slate-800/50 mt-auto">
|
|
<p className="text-[11px] text-slate-500 leading-relaxed uppercase tracking-tighter">
|
|
<strong className="text-slate-400">Ideal para:</strong> {modality.idealFor}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function MarketCard({ title, price, icon: Icon, color, best }: any) {
|
|
return (
|
|
<div className={`p-6 rounded-3xl border transition-all duration-500 ${best ? 'bg-green-500/10 border-green-500/30 shadow-lg shadow-green-500/5' : 'bg-slate-900/40 border-slate-800'}`}>
|
|
<Icon className={`w-5 h-5 mb-4 ${color}`} />
|
|
<h4 className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">{title}</h4>
|
|
<p className={`text-lg font-black mt-1 ${best ? 'text-green-400' : 'text-slate-300'}`}>{price}</p>
|
|
</div>
|
|
);
|
|
} |