Evandro Fonseca Junior
6ec67c8f5a
Enhance the About page with new story sections detailing personal journey and core values, including icons and structured content for better user engagement and self-presentation.
370 lines
16 KiB
TypeScript
370 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "motion/react";
|
|
import {
|
|
Briefcase,
|
|
Clock,
|
|
DollarSign,
|
|
HardHat,
|
|
Lightbulb,
|
|
Building2,
|
|
Users,
|
|
User,
|
|
Star,
|
|
} from "lucide-react";
|
|
|
|
const WorkModalitiesData = [
|
|
{
|
|
title: "Consultoria por Hora",
|
|
value: "R$ 35 - 70/hora",
|
|
badge: "RECOMENDADO",
|
|
idealFor:
|
|
"Empresas que buscam flexibilidade máxima, startups testando soluções ou projetos que exigem expertise especializada sem compromissos longos.",
|
|
description:
|
|
"Transparência total: você paga apenas pelas horas efetivamente trabalhadas. Sem surpresas, com estimativas claras antes de iniciar. Ideal para testar soluções, resolver problemas específicos ou ter acesso a expertise sênior sem o custo de consultorias tradicionais (R$ 100-200/h).",
|
|
benefits: [
|
|
"✓ Transparência total - pague apenas pelo que usar",
|
|
"✓ Sem surpresas - estimativas claras antes de iniciar",
|
|
"✓ Flexibilidade - ajuste conforme sua necessidade evolui",
|
|
"✓ Melhor custo-benefício - 50% menos que consultorias tradicionais",
|
|
"✓ Experiência comprovada - 3+ anos + Eng. Computação",
|
|
],
|
|
icon: Lightbulb,
|
|
color: "blue",
|
|
featured: true,
|
|
},
|
|
{
|
|
title: "Pacotes de Horas",
|
|
value: "Descontos até 21%",
|
|
idealFor:
|
|
"Clientes que já testaram o serviço e querem economizar com comprometimento antecipado, garantindo disponibilidade e preços favoráveis.",
|
|
description:
|
|
"Invista antecipadamente e economize significativamente: 10h (R$ 65/h), 20h (R$ 60/h) ou 40h+ (R$ 55/h). Garanta prioridade na agenda e preços fixos por 6 meses, mesmo se o mercado subir.",
|
|
benefits: [
|
|
"✓ 10 horas: R$ 65/h (economia de 7%)",
|
|
"✓ 20 horas: R$ 60/h (economia de 14%)",
|
|
"✓ 40+ horas: R$ 55/h (economia de 21%)",
|
|
"✓ Preço fixo por 6 meses",
|
|
"✓ 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, crescimento planejado e acesso prioritário a um especialista dedicado para impulsionar sua inovação contínua.",
|
|
description:
|
|
"Parceria estratégica com acesso prioritário e horas incluídas. Ideal para empresas que precisam de suporte contínuo, manutenção preventiva e consultoria estratégica regular. Transforme sua empresa em parceiro VIP.",
|
|
benefits: [
|
|
"✓ Acesso prioritário e exclusivo",
|
|
"✓ Horas incluídas mensalmente",
|
|
"✓ Suporte preventivo e consultoria estratégica",
|
|
"✓ Relacionamento de longo prazo",
|
|
"✓ Previsibilidade financeira",
|
|
],
|
|
icon: Clock,
|
|
color: "purple",
|
|
},
|
|
{
|
|
title: "Desenvolvimento Sob Demanda",
|
|
value: "Estimativa em horas",
|
|
idealFor:
|
|
"Empreendedores e empresas com projetos específicos que precisam de estimativas transparentes e controle total sobre investimento e escopo.",
|
|
description:
|
|
"Projetos customizados com estimativas claras baseadas em horas. Da concepção à entrega, seu projeto ganha vida com transparência total. Pague apenas pelo desenvolvimento necessário, sem valores fixos surpresas.",
|
|
benefits: [
|
|
"✓ Estimativas transparentes em horas",
|
|
"✓ Controle total sobre investimento",
|
|
"✓ Sem valores fixos surpresas",
|
|
"✓ Escopo ajustável conforme evolução",
|
|
"✓ Foco em performance e escalabilidade",
|
|
],
|
|
icon: HardHat,
|
|
color: "orange",
|
|
},
|
|
];
|
|
|
|
export function WorkModalities() {
|
|
return (
|
|
<section className="py-20 px-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-12"
|
|
>
|
|
<div className="inline-flex items-center gap-2 bg-gradient-to-r from-cyan-400/10 to-blue-500/10 px-6 py-3 rounded-full mb-6 border border-cyan-400/20">
|
|
<div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
|
|
<span className="text-sm font-medium text-cyan-300">
|
|
Flexibilidade Total
|
|
</span>
|
|
</div>
|
|
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
|
Minhas Modalidades de Trabalho
|
|
</h2>
|
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
|
Escolha a opção que melhor se encaixa nas suas necessidades.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Seção de Comparação de Mercado Refinada */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="relative overflow-hidden bg-gradient-to-br from-gray-900/80 via-blue-900/30 to-purple-900/40 rounded-2xl p-8 mb-12 max-w-5xl mx-auto border border-blue-500/30 shadow-2xl"
|
|
>
|
|
{/* Background Pattern */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(59,130,246,0.1),transparent_50%)]"></div>
|
|
|
|
{/* Header */}
|
|
<div className="relative text-center mb-8">
|
|
<div className="inline-flex items-center gap-2 bg-blue-500/10 px-4 py-2 rounded-full mb-4">
|
|
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
|
<span className="text-sm font-medium text-blue-300">
|
|
Análise de Mercado 2025
|
|
</span>
|
|
</div>
|
|
<h3 className="text-3xl font-bold mb-2 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
|
Compare com o Mercado
|
|
</h3>
|
|
<p className="text-gray-300 text-lg">
|
|
Veja como nossa proposta se destaca da concorrência
|
|
</p>
|
|
</div>
|
|
|
|
{/* Comparison Grid */}
|
|
<div className="relative grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{/* Agências Tradicionais */}
|
|
<div className="group relative bg-red-500/5 border border-red-500/20 rounded-xl p-6 hover:border-red-400/40 transition-all duration-300">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 bg-red-500/20 rounded-lg flex items-center justify-center">
|
|
<Building2 className="w-6 h-6 text-red-500" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold text-red-300">
|
|
Agências Tradicionais
|
|
</h4>
|
|
<p className="text-xs text-red-400/70">Projetos fechados</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<p className="text-2xl font-bold text-red-400">R$ 15k - 50k</p>
|
|
<div className="space-y-1 text-xs text-gray-400">
|
|
<p>• Escopo fixo</p>
|
|
<p>• Sem flexibilidade</p>
|
|
<p>• Equipe grande</p>
|
|
<p>• Processo lento</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Consultorias Corporativas */}
|
|
<div className="group relative bg-orange-500/5 border border-orange-500/20 rounded-xl p-6 hover:border-orange-400/40 transition-all duration-300">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 bg-orange-500/20 rounded-lg flex items-center justify-center">
|
|
<Users className="w-6 h-6 text-orange-500" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold text-orange-300">
|
|
Consultorias Corporativas
|
|
</h4>
|
|
<p className="text-xs text-orange-400/70">Por hora</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<p className="text-2xl font-bold text-orange-400">
|
|
R$ 150 - 300/h
|
|
</p>
|
|
<div className="space-y-1 text-xs text-gray-400">
|
|
<p>• Apenas consultoria</p>
|
|
<p>• Sem desenvolvimento</p>
|
|
<p>• Muito caro</p>
|
|
<p>• Foco corporativo</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Freelancers Generalistas */}
|
|
<div className="group relative bg-yellow-500/5 border border-yellow-500/20 rounded-xl p-6 hover:border-yellow-400/40 transition-all duration-300">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 bg-yellow-500/20 rounded-lg flex items-center justify-center">
|
|
<User className="w-6 h-6 text-yellow-500" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold text-yellow-300">
|
|
Freelancers Generalistas
|
|
</h4>
|
|
<p className="text-xs text-yellow-400/70">Por hora</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<p className="text-2xl font-bold text-yellow-400">R$ 40 - 80/h</p>
|
|
<div className="space-y-1 text-xs text-gray-400">
|
|
<p>• Competitivo</p>
|
|
<p>• Sem especialização</p>
|
|
<p>• Qualidade variável</p>
|
|
<p>• Sem garantias</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Comigo - Evandro */}
|
|
<div className="group relative bg-gradient-to-br from-green-500/10 to-emerald-500/10 border-2 border-green-500/40 rounded-xl p-6 hover:border-green-400/60 transition-all duration-300 shadow-lg shadow-green-500/10">
|
|
<div className="absolute -top-2 -right-2">
|
|
<span className="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold shadow-lg">
|
|
RECOMENDADO
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
|
|
<Star className="w-6 h-6 text-green-400" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-green-300">Comigo</h4>
|
|
<p className="text-xs text-green-400/70">Evandro Fonseca</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<div className="flex items-baseline gap-2">
|
|
<p className="text-2xl font-bold text-green-400">
|
|
R$ 35 - 70/h
|
|
</p>
|
|
<span className="text-xs bg-green-500/20 text-green-300 px-2 py-1 rounded">
|
|
-50% vs mercado
|
|
</span>
|
|
</div>
|
|
<div className="space-y-1 text-xs text-gray-300">
|
|
<p className="flex items-center gap-2">
|
|
<span className="text-green-400">✓</span>
|
|
<span>Full-Stack + IoT + Cloud</span>
|
|
</p>
|
|
<p className="flex items-center gap-2">
|
|
<span className="text-green-400">✓</span>
|
|
<span>Transparência total</span>
|
|
</p>
|
|
<p className="flex items-center gap-2">
|
|
<span className="text-green-400">✓</span>
|
|
<span>Flexibilidade máxima</span>
|
|
</p>
|
|
<p className="flex items-center gap-2">
|
|
<span className="text-green-400">✓</span>
|
|
<span>Experiência comprovada</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Call to Action */}
|
|
<div className="mt-4 pt-3 border-t border-green-500/20">
|
|
<p className="text-xs text-green-300 font-medium text-center">
|
|
🎯 Melhor custo-benefício do mercado
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom CTA */}
|
|
<div className="relative mt-8 text-center">
|
|
<div className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-500/10 to-purple-500/10 px-6 py-3 rounded-full border border-blue-500/20">
|
|
<div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
|
|
<span className="text-sm text-blue-300 font-medium">
|
|
Economia média de R$ 15.000 por projeto vs agências tradicionais
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto justify-center">
|
|
{WorkModalitiesData.map((modality, index) => (
|
|
<motion.div
|
|
key={modality.title}
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
viewport={{ once: true }}
|
|
className={`relative bg-white/5 p-6 rounded-lg shadow-lg border-2 ${
|
|
modality.featured
|
|
? "border-blue-500/50 bg-blue-500/5"
|
|
: "border-white/10"
|
|
} ${modality.color === "blue" ? "hover:border-blue-500" : ""} ${
|
|
modality.color === "green" ? "hover:border-green-500" : ""
|
|
} ${modality.color === "purple" ? "hover:border-purple-500" : ""} ${
|
|
modality.color === "orange" ? "hover:border-orange-500" : ""
|
|
} ${
|
|
modality.color === "red" ? "hover:border-red-500" : ""
|
|
} transition-all duration-300 cursor-pointer`}
|
|
>
|
|
{modality.badge && (
|
|
<div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
|
|
<span className="bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-bold">
|
|
{modality.badge}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<div
|
|
className={`p-3 rounded-full ${
|
|
modality.color === "blue" ? "bg-blue-500/20" : ""
|
|
} ${modality.color === "green" ? "bg-green-500/20" : ""} ${
|
|
modality.color === "purple" ? "bg-purple-500/20" : ""
|
|
} ${modality.color === "orange" ? "bg-orange-500/20" : ""} ${
|
|
modality.color === "red" ? "bg-red-500/20" : ""
|
|
}`}
|
|
>
|
|
<modality.icon
|
|
className={`w-8 h-8 ${
|
|
modality.color === "blue" ? "text-blue-400" : ""
|
|
} ${modality.color === "green" ? "text-green-400" : ""} ${
|
|
modality.color === "purple" ? "text-purple-400" : ""
|
|
} ${modality.color === "orange" ? "text-orange-400" : ""} ${
|
|
modality.color === "red" ? "text-red-400" : ""
|
|
}`}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-2xl font-semibold mb-1">
|
|
{modality.title}
|
|
</h3>
|
|
<p
|
|
className={`text-lg font-bold ${
|
|
modality.featured ? "text-blue-400" : "text-gray-200"
|
|
}`}
|
|
>
|
|
{modality.value}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-gray-400 mb-4">{modality.description}</p>
|
|
|
|
{modality.benefits && (
|
|
<div className="space-y-2 mb-4">
|
|
{modality.benefits.map((benefit, idx) => (
|
|
<p
|
|
key={idx}
|
|
className="text-sm text-gray-300 flex items-start gap-2"
|
|
>
|
|
<span className="text-green-400 mt-0.5">✓</span>
|
|
<span>{benefit.replace("✓ ", "")}</span>
|
|
</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<p className="text-sm text-gray-500">
|
|
<span className="font-semibold">Ideal para:</span>{" "}
|
|
{modality.idealFor}
|
|
</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|