evandro/portifolio-evandrodevbr
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(about): add story sections and core values to About component

Browse Source 
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.
This commit is contained in:
Evandro Fonseca Junior committed 2025-10-11 18:25:41 -03:00
1 parent 367ca8f495
commit 6ec67c8f5a
11 files changed
+1540 -464
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/About.tsx
+235 -85
View File
@@ -3,108 +3,258 @@
import { motion } from "motion/react";
import { MagicCard } from "@/components/magicui/magic-card";
import { TextReveal } from "@/components/magicui/text-reveal";
import {
Brain,
Zap,
Target,
Rocket,
Users,
Lightbulb,
Code,
Shield,
} from "lucide-react";
export default function About() {
const storySections = [
{
icon: Brain,
title: "A Curiosidade que Me Define",
content:
"Sempre fui fascinado por problemas que outros consideravam 'complicados demais'. Essa curiosidade me levou ao desenvolvimento web, onde descobri meu superpoder: transformar complexidade em clareza, caos em sistemas elegantes.",
color: "from-blue-500 to-purple-600",
bgColor: "bg-blue-500/10",
iconColor: "text-blue-400",
},
{
icon: Zap,
title: "Três Anos de Transformação",
content:
"Nos últimos três anos, enfrentei dezenas de desafios técnicos que pareciam impossíveis no início: arquiteturas que precisavam escalar, integrações que ninguém conseguia fazer funcionar, prazos que pareciam irreais. Cada batalha me transformou. Cada projeto me tornou mais forte.",
color: "from-purple-500 to-pink-600",
bgColor: "bg-purple-500/10",
iconColor: "text-purple-400",
},
{
icon: Target,
title: "Fundamentação + Experiência",
content:
"Hoje, como estudante de Engenharia da Computação, combino fundamentação acadêmica rigorosa com experiência real de mercado. Domino o arsenal completo do desenvolvimento full-stack moderno — computação em nuvem, IA, arquiteturas escaláveis — mas minha verdadeira expertise está em escolher a ferramenta certa para cada missão.",
color: "from-pink-500 to-red-600",
bgColor: "bg-pink-500/10",
iconColor: "text-pink-400",
},
{
icon: Rocket,
title: "Soluções que Fazem Diferença",
content:
"Não entrego apenas código; entrego soluções que fazem diferença mensurável. Procuro meu próximo grande desafio: um time onde colaboração, ética e inovação não sejam buzzwords, mas valores praticados diariamente.",
color: "from-red-500 to-orange-600",
bgColor: "bg-red-500/10",
iconColor: "text-red-400",
},
{
icon: Lightbulb,
title: "Construindo Legados",
content:
"Onde minha dedicação à excelência técnica e aprendizado constante possam gerar impacto real. Porque tecnologia sem propósito é apenas sintaxe — e eu construo legados.",
color: "from-orange-500 to-yellow-600",
bgColor: "bg-orange-500/10",
iconColor: "text-orange-400",
},
];
const coreValues = [
{
icon: Code,
title: "Excelência Técnica",
description: "Código limpo, arquiteturas escaláveis e soluções elegantes",
},
{
icon: Brain,
title: "Aprendizado Constante",
description: "Sempre evoluindo, sempre buscando o próximo desafio",
},
{
icon: Users,
title: "Colaboração Genuína",
description: "Trabalho em equipe baseado em respeito e propósito comum",
},
{
icon: Shield,
title: "Ética Profissional",
description: "Valores sólidos que guiam cada decisão técnica",
},
];
return (
<section id="about" className="py-20 px-4">
<div className="max-w-6xl mx-auto">
<section id="about" className="py-20 px-4 relative">
<div className="max-w-7xl mx-auto relative z-10">
{/* Header */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-center mb-16"
className="text-center mb-20"
>
<h2 className="text-4xl md:text-5xl font-bold mb-6">Sobre Mim</h2>
<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">
Minha Jornada
</span>
</div>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-gradient-to-r from-cyan-400 via-blue-400 to-blue-500 bg-clip-text text-transparent">
Sobre Mim
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Uma jornada de transformação através da tecnologia, onde cada
desafio se tornou uma oportunidade de crescimento e inovação
</p>
</motion.div>
<div className="grid md:grid-cols-2 gap-12 items-center">
{/* Main Description */}
<motion.div
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
viewport={{ once: true }}
>
<div className="p-8 space-y-6">
<TextReveal>
Desenvolvedor Full-Stack com 3+ anos de experiência,
especializado em soluções web modernas e inovadoras. Cursando
Engenharia da Computação, com conhecimentos em computação em
nuvem e inteligência artificial. Busco constantemente novos
desafios onde possa aplicar minha paixão por tecnologia e
resolver problemas de forma criativa.
</TextReveal>
{/* Story Timeline */}
<div className="space-y-12 mb-20">
{storySections.map((section, index) => {
const IconComponent = section.icon;
const isEven = index % 2 === 0;
<TextReveal>
Meu objetivo é entregar soluções de alta qualidade, sempre
priorizando colaboração, ética e inovação. Acredito no poder da
tecnologia para fazer a diferença e estou comprometido com o
aprendizado contínuo e a excelência técnica.
</TextReveal>
</div>
</motion.div>
{/* Soft Skills */}
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
viewport={{ once: true }}
className="space-y-6"
>
<h3 className="text-2xl font-semibold mb-6 text-cyan-400">
Soft Skills
</h3>
<div className="space-y-4">
{[
{ skill: "Comunicação", level: 90 },
{ skill: "Trabalho em Equipe", level: 85 },
// { skill: "Resolução de Problemas", level: 95 },
{ skill: "Aprendizado Contínuo", level: 90 },
{ skill: "Adaptabilidade", level: 85 },
].map((item) => (
<div key={item.skill} className="space-y-2">
<div className="flex justify-between text-sm">
<span className="text-gray-300">{item.skill}</span>
<span className="text-cyan-400">{item.level}%</span>
</div>
<div className="w-full bg-white/10 rounded-full h-2">
return (
<motion.div
key={index}
initial={{ opacity: 0, x: isEven ? -50 : 50 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }}
className={`flex flex-col ${
isEven ? "md:flex-row" : "md:flex-row-reverse"
} items-center gap-8`}
>
{/* Content */}
<div className={`flex-1 ${isEven ? "md:pr-12" : "md:pl-12"}`}>
<div className="relative">
<div
className="bg-gradient-to-r from-cyan-400 to-blue-500 h-2 rounded-full transition-all duration-1000"
style={{ width: `${item.level}%` }}
/>
className={`absolute inset-0 bg-gradient-to-r ${section.color} opacity-10 rounded-2xl blur-xl`}
></div>
<div className="relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8">
<div className="flex items-center gap-4 mb-6">
<div className={`p-4 rounded-xl ${section.bgColor}`}>
<IconComponent
className={`w-8 h-8 ${section.iconColor}`}
/>
</div>
<h3 className="text-2xl font-bold text-white">
{section.title}
</h3>
</div>
<p className="text-gray-300 leading-relaxed text-lg">
{section.content}
</p>
</div>
</div>
</div>
))}
</div>
<div className="mt-8">
<h4 className="text-lg font-semibold mb-4 text-blue-400">
Destaques
</h4>
<ul className="space-y-2 text-gray-300">
<li className="flex items-center gap-2">
<div className="w-2 h-2 bg-blue-400 rounded-full" />
3+ anos de experiência
</li>
<li className="flex items-center gap-2">
<div className="w-2 h-2 bg-blue-400 rounded-full" />
Engenheiro da Computação
</li>
<li className="flex items-center gap-2">
<div className="w-2 h-2 bg-blue-400 rounded-full" />
Conhecimento em Cloud e IA
</li>
<li className="flex items-center gap-2">
<div className="w-2 h-2 bg-blue-400 rounded-full" />
Ampla gama de conhecimentos
</li>
</ul>
</div>
</motion.div>
{/* Timeline Indicator */}
<div className="flex flex-col items-center">
<div
className={`w-16 h-16 rounded-full ${section.bgColor} border-4 border-white/20 flex items-center justify-center`}
>
<span className="text-2xl font-bold text-white">
{index + 1}
</span>
</div>
{index < storySections.length - 1 && (
<div className="w-1 h-16 bg-gradient-to-b from-white/20 to-transparent mt-4"></div>
)}
</div>
{/* Spacer */}
<div className="flex-1 hidden md:block"></div>
</motion.div>
);
})}
</div>
{/* Core Values */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
viewport={{ once: true }}
className="mb-16"
>
<div className="text-center mb-12">
<h3 className="text-3xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
Meus Valores Fundamentais
</h3>
<p className="text-gray-400 text-lg">
Os princípios que guiam cada decisão e projeto
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
{coreValues.map((value, index) => {
const IconComponent = value.icon;
return (
<motion.div
key={value.title}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: index * 0.1 }}
viewport={{ once: true }}
className="group"
>
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 h-full hover:border-cyan-500/30 transition-all duration-300 hover:scale-105">
<div className="p-3 rounded-lg bg-blue-500/20 w-fit mb-4 group-hover:bg-blue-500/30 transition-colors">
<IconComponent className="w-6 h-6 text-blue-400" />
</div>
<h4 className="text-lg font-semibold text-white mb-3">
{value.title}
</h4>
<p className="text-gray-400 text-sm leading-relaxed">
{value.description}
</p>
</div>
</motion.div>
);
})}
</div>
</motion.div>
{/* Call to Action */}
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
viewport={{ once: true }}
className="text-center"
>
<div className="relative max-w-4xl mx-auto">
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 rounded-2xl blur-xl"></div>
<div className="relative bg-gradient-to-r from-blue-500/5 to-purple-500/5 border border-blue-500/20 rounded-2xl p-8 backdrop-blur-sm">
<h4 className="text-2xl font-bold text-white mb-4">
Pronto para o Próximo Grande Desafio
</h4>
<p className="text-gray-300 text-lg mb-6">
Busco uma equipe onde posso aplicar toda essa experiência e
paixão para criar soluções que realmente importam
</p>
<div className="flex flex-wrap justify-center gap-4">
<span className="px-4 py-2 bg-blue-500/20 text-blue-400 rounded-full text-sm font-medium border border-blue-500/30">
🚀 Inovação Contínua
</span>
<span className="px-4 py-2 bg-purple-500/20 text-purple-400 rounded-full text-sm font-medium border border-purple-500/30">
🤝 Colaboração Genuína
</span>
<span className="px-4 py-2 bg-pink-500/20 text-pink-400 rounded-full text-sm font-medium border border-pink-500/30">
⚡ Excelência Técnica
</span>
<span className="px-4 py-2 bg-green-500/20 text-green-400 rounded-full text-sm font-medium border border-green-500/30">
🎯 Impacto Real
</span>
</div>
</div>
</div>
</motion.div>
</div>
</section>
);
app/components/Contact.tsx
+8 -2
View File
@@ -43,7 +43,13 @@ export default function Contact() {
viewport={{ once: true }}
className="text-center mb-16"
>
<h2 className="text-4xl md:text-5xl font-bold mb-6">
<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">
Vamos Conversar
</span>
</div>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
Vamos Conversar
</h2>
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
@@ -72,7 +78,7 @@ export default function Contact() {
</h3>
<div className="overflow-hidden rounded-lg shadow-lg">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3557.1999999999996!2d-48.77891484804123!3d-26.087801635807004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjbCsDA1JzE2LjEiUyA0OMKwNDYnNDQuMSJX!5e0!3m2!1spt-BR!2sbr!4v1700000000000!5m2!1spt-BR!2sbr"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d41412.34944306462!2d-48.8485392!3d-26.0388466!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94dc04ecd7709991%3A0x91fa53b8c6ced1e0!2sGaruva%2C%20SC%2C%2089248-000!5e1!3m2!1spt-BR!2sbr!4v1760215413380!5m2!1spt-BR!2sbr"
width="100%"
height="450"
style={{ border: 0 }}
app/components/ContactForm.tsx
+201 -73
View File
@@ -297,73 +297,81 @@ ${userName}`;
};
const getEstimatedValue = () => {
let value = 0;
// Lógica de estimativa baseada nas respostas
let hours = 0;
let hourlyRate = 55; // Taxa base R$ 55/h
// Estimativa de horas baseada no tipo de projeto
switch (projectType) {
case "web-app":
value += 10000;
hours += 80; // Aplicação web completa
break;
case "landing-page":
value += 2000;
hours += 16; // Landing page simples
break;
case "mvp":
value += 5000;
hours += 40; // MVP básico
break;
case "iot-app":
value += 15000;
hours += 120; // Aplicação IoT complexa
break;
case "integracao":
value += 7000;
hours += 32; // Integração de sistemas
break;
case "manutencao":
value += 1000;
hours += 8; // Manutenção pontual
break;
case "consultoria":
value += 500;
hours += 4; // Consultoria inicial
break;
default:
break;
}
// Ajuste de horas baseado no prazo
switch (desiredDeadline) {
case "1-3-weeks":
value *= 1.2; // Urgência aumenta o valor
hours *= 1.3; // Urgência aumenta horas
break;
case "1-2-months":
value *= 1.1;
hours *= 1.1;
break;
case "6-plus-months":
value *= 0.9; // Prazo longo pode reduzir o valor
hours *= 0.9; // Prazo longo pode reduzir horas
break;
default:
break;
}
// Ajuste de horas baseado na complexidade
switch (technicalComplexity) {
case "alta":
value *= 1.3;
hours *= 1.4;
hourlyRate = 65; // Taxa maior para alta complexidade
break;
case "muito-alta":
value *= 1.5;
hours *= 1.7;
hourlyRate = 70; // Taxa máxima para muito alta complexidade
break;
case "media":
hourlyRate = 50; // Taxa média
break;
default:
break;
}
if (hasInternalTeam === "nao") {
value *= 1.1; // Sem equipe interna pode indicar mais trabalho
hours *= 1.2; // Sem equipe interna = mais horas necessárias
}
// Ajustar pelo valor do orçamento, se aplicável
if (budgetValue) {
const parsedBudget = parseFloat(budgetValue.replace(/\D/g, ""));
if (!isNaN(parsedBudget)) {
// Se o valor estimado for maior que o orçamento fornecido, ajusta para o orçamento
value = Math.min(value, parsedBudget);
}
const totalValue = hours * hourlyRate;
if (totalValue > 0) {
return `Estimativa: ${Math.round(
hours
)}h × R$ ${hourlyRate}/h = R$ ${totalValue.toFixed(0)}`;
}
return value > 0 ? `Estimativa: R$ ${value.toFixed(2)}` : "Estimativa: N/A";
return "Estimativa: Solicite orçamento personalizado";
};
return (
@@ -374,7 +382,7 @@ ${userName}`;
viewport={{ once: true }}
className="space-y-4"
>
<h3 className="text-2xl font-semibold mb-6 text-blue-primary">
<h3 className="text-2xl font-semibold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
Preencha o Formulário
</h3>
@@ -384,8 +392,8 @@ ${userName}`;
onClick={() => setFormType("simple")}
className={`py-2 px-4 rounded-lg font-semibold transition-all duration-300 ${
formType === "simple"
? "bg-blue-primary text-white shadow-lg shadow-blue-primary/25 border-2 border-blue-500"
: "bg-gray-700 text-gray-300 opacity-50 cursor-pointer"
? "bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-lg shadow-cyan-500/25 border-2 border-cyan-500"
: "bg-gray-700 text-gray-300 hover:bg-gray-600 cursor-pointer"
}`}
>
Formulário Simples
@@ -395,8 +403,8 @@ ${userName}`;
onClick={() => setFormType("advanced")}
className={`py-2 px-4 rounded-lg font-semibold transition-all duration-300 ${
formType === "advanced"
? "bg-blue-primary text-white shadow-lg shadow-blue-primary/25 border-2 border-blue-500"
: "bg-gray-700 text-gray-300 opacity-50 cursor-pointer"
? "bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-lg shadow-cyan-500/25 border-2 border-cyan-500"
: "bg-gray-700 text-gray-300 hover:bg-gray-600 cursor-pointer"
}`}
>
Formulário Avançado
@@ -430,7 +438,7 @@ ${userName}`;
id="simple-user-name"
className={`w-full p-3 rounded-lg bg-white/5 border ${
nameError ? "border-red-500" : "border-white/10"
} text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent`}
} text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent`}
placeholder="Seu nome"
value={userName}
onChange={handleNameChange}
@@ -485,7 +493,7 @@ ${userName}`;
id="user-name"
className={`w-full p-3 rounded-lg bg-white/5 border ${
nameError ? "border-red-500" : "border-white/10"
} text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent`}
} text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent`}
placeholder="Seu nome completo"
value={userName}
onChange={handleNameChange}
@@ -508,7 +516,7 @@ ${userName}`;
id="user-email"
className={`w-full p-3 rounded-lg bg-white/5 border ${
emailError ? "border-red-500" : "border-white/10"
} text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent`}
} text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent`}
placeholder="[email protected]"
value={userEmail}
onChange={handleEmailChange}
@@ -531,7 +539,7 @@ ${userName}`;
id="user-phone"
className={`w-full p-3 rounded-lg bg-white/5 border ${
phoneError ? "border-red-500" : "border-white/10"
} text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent`}
} text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent`}
placeholder="(XX) XXXXX-XXXX"
value={userPhone}
onChange={handlePhoneChange}
@@ -552,7 +560,7 @@ ${userName}`;
<input
type="text"
id="user-company"
className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent"
className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
placeholder="Nome da empresa, sua posição"
value={userCompany}
onChange={handleCompanyChange}
@@ -567,16 +575,34 @@ ${userName}`;
</label>
<select
id="how-found"
className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-blue-primary focus:border-transparent"
className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent appearance-none"
style={{
backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
backgroundPosition: "right 12px center",
backgroundRepeat: "no-repeat",
backgroundSize: "16px",
}}
value={howFound}
onChange={handleHowFoundChange}
>
<option value="">Selecione uma opção</option>
<option value="linkedin">LinkedIn</option>
<option value="github">GitHub</option>
<option value="indicacao">Indicação</option>
<option value="pesquisa">Pesquisa Online</option>
<option value="outro">Outro</option>
<option value="" className="bg-gray-800 text-white">
Selecione uma opção
</option>
<option value="linkedin" className="bg-gray-800 text-white">
LinkedIn
</option>
<option value="github" className="bg-gray-800 text-white">
GitHub
</option>
<option value="indicacao" className="bg-gray-800 text-white">
Indicação
</option>
<option value="pesquisa" className="bg-gray-800 text-white">
Pesquisa Online
</option>
<option value="outro" className="bg-gray-800 text-white">
Outro
</option>
</select>
</div>
</div>
@@ -631,19 +657,55 @@ ${userName}`;
</label>
<select
id="project-type"
className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-blue-primary focus:border-transparent"
className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent appearance-none"
style={{
backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
backgroundPosition: "right 12px center",
backgroundRepeat: "no-repeat",
backgroundSize: "16px",
}}
value={projectType}
onChange={handleProjectTypeChange}
>
<option value="">Selecione o tipo</option>
<option value="web-app">Aplicação Web Completa</option>
<option value="landing-page">Landing Page</option>
<option value="mvp">MVP (Produto Mínimo Viável)</option>
<option value="iot-app">Aplicação IoT</option>
<option value="integracao">Integração de Sistemas</option>
<option value="manutencao">Manutenção/Ajustes</option>
<option value="consultoria">Consultoria/Mentoria</option>
<option value="outro">Outro</option>
<option value="" className="bg-gray-800 text-white">
Selecione o tipo
</option>
<option value="web-app" className="bg-gray-800 text-white">
Aplicação Web Completa
</option>
<option
value="landing-page"
className="bg-gray-800 text-white"
>
Landing Page
</option>
<option value="mvp" className="bg-gray-800 text-white">
MVP (Produto Mínimo Viável)
</option>
<option value="iot-app" className="bg-gray-800 text-white">
Aplicação IoT
</option>
<option
value="integracao"
className="bg-gray-800 text-white"
>
Integração de Sistemas
</option>
<option
value="manutencao"
className="bg-gray-800 text-white"
>
Manutenção/Ajustes
</option>
<option
value="consultoria"
className="bg-gray-800 text-white"
>
Consultoria/Mentoria
</option>
<option value="outro" className="bg-gray-800 text-white">
Outro
</option>
</select>
</div>
{projectType === "outro" && (
@@ -661,7 +723,7 @@ ${userName}`;
otherProjectTypeError
? "border-red-500"
: "border-white/10"
} text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent`}
} text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent`}
placeholder="Ex: Desenvolvimento de Plugin, Automação de Processos"
value={otherProjectType}
onChange={(e) => {
@@ -687,16 +749,49 @@ ${userName}`;
</label>
<select
id="desired-deadline"
className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-blue-primary focus:border-transparent"
className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent appearance-none"
style={{
backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
backgroundPosition: "right 12px center",
backgroundRepeat: "no-repeat",
backgroundSize: "16px",
}}
value={desiredDeadline}
onChange={handleDesiredDeadlineChange}
>
<option value="">Selecione o prazo</option>
<option value="1-3-weeks">1-3 Semanas</option>
<option value="1-2-months">1-2 Meses</option>
<option value="2-4-months">2-4 Meses</option>
<option value="4-6-months">4-6 Meses</option>
<option value="6-plus-months">Mais de 6 Meses</option>
<option value="" className="bg-gray-800 text-white">
Selecione o prazo
</option>
<option
value="1-3-weeks"
className="bg-gray-800 text-white"
>
1-3 Semanas
</option>
<option
value="1-2-months"
className="bg-gray-800 text-white"
>
1-2 Meses
</option>
<option
value="2-4-months"
className="bg-gray-800 text-white"
>
2-4 Meses
</option>
<option
value="4-6-months"
className="bg-gray-800 text-white"
>
4-6 Meses
</option>
<option
value="6-plus-months"
className="bg-gray-800 text-white"
>
Mais de 6 Meses
</option>
</select>
</div>
<div>
@@ -709,7 +804,7 @@ ${userName}`;
<input
type="text"
id="budget-value"
className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent"
className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
placeholder="Ex: 5000, 10000, A Combinar"
value={budgetValue}
onChange={handleBudgetValueChange}
@@ -724,15 +819,34 @@ ${userName}`;
</label>
<select
id="technical-complexity"
className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-blue-primary focus:border-transparent"
className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent appearance-none"
style={{
backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
backgroundPosition: "right 12px center",
backgroundRepeat: "no-repeat",
backgroundSize: "16px",
}}
value={technicalComplexity}
onChange={handleTechnicalComplexityChange}
>
<option value="">Selecione a complexidade</option>
<option value="baixa">Baixa</option>
<option value="media">Média</option>
<option value="alta">Alta</option>
<option value="muito-alta">Muito Alta</option>
<option value="" className="bg-gray-800 text-white">
Selecione a complexidade
</option>
<option value="baixa" className="bg-gray-800 text-white">
Baixa
</option>
<option value="media" className="bg-gray-800 text-white">
Média
</option>
<option value="alta" className="bg-gray-800 text-white">
Alta
</option>
<option
value="muito-alta"
className="bg-gray-800 text-white"
>
Muito Alta
</option>
</select>
</div>
<div>
@@ -744,14 +858,28 @@ ${userName}`;
</label>
<select
id="has-internal-team"
className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-blue-primary focus:border-transparent"
className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent appearance-none"
style={{
backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
backgroundPosition: "right 12px center",
backgroundRepeat: "no-repeat",
backgroundSize: "16px",
}}
value={hasInternalTeam}
onChange={handleHasInternalTeamChange}
>
<option value="">Selecione</option>
<option value="sim">Sim</option>
<option value="nao">Não</option>
<option value="parcial">Parcialmente</option>
<option value="" className="bg-gray-800 text-white">
Selecione
</option>
<option value="sim" className="bg-gray-800 text-white">
Sim
</option>
<option value="nao" className="bg-gray-800 text-white">
Não
</option>
<option value="parcial" className="bg-gray-800 text-white">
Parcialmente
</option>
</select>
</div>
</div>
@@ -768,7 +896,7 @@ ${userName}`;
<textarea
id="custom-message"
rows={4}
className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
placeholder="Descreva seu projeto ou suas necessidades aqui..."
value={customMessage}
onChange={handleMessageChange}
@@ -780,13 +908,13 @@ ${userName}`;
<motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
<button
type="submit"
className="w-full py-4 px-6 rounded-lg font-semibold text-lg transition-all duration-300 bg-blue-primary hover:bg-blue-primary/90 text-white shadow-lg shadow-blue-primary/25 border-2 border-blue-500"
className="w-full py-4 px-6 rounded-lg font-semibold text-lg transition-all duration-300 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25 border-2 border-cyan-500"
>
{getCtaMessage()}
</button>
</motion.div>
{projectType && desiredDeadline && budgetValue && (
<p className="text-center text-lg font-semibold text-blue-400 mt-4">
<p className="text-center text-lg font-semibold text-cyan-400 mt-4">
{getEstimatedValue()}
</p>
)}
app/components/Experience.tsx
+270 -68
View File
@@ -1,8 +1,16 @@
"use client";
import { motion } from "motion/react";
import { BentoGrid, BentoGridItem } from "@/components/magicui/bento-grid";
import { Calendar, MapPin, Briefcase } from "lucide-react";
import {
Calendar,
MapPin,
Briefcase,
Zap,
TrendingUp,
Users,
Award,
ExternalLink,
} from "lucide-react";
import { usePortfolioData } from "@/lib/usePortfolioData";
export default function Experience() {
@@ -11,7 +19,7 @@ export default function Experience() {
if (loading) {
return (
<section id="experience" className="py-20 px-4">
<div className="max-w-6xl mx-auto text-center">
<div className="max-w-7xl mx-auto text-center">
<div className="animate-pulse">
<div className="h-8 bg-gray-700 rounded w-1/3 mx-auto mb-4"></div>
<div className="h-4 bg-gray-700 rounded w-1/2 mx-auto"></div>
@@ -24,99 +32,293 @@ export default function Experience() {
if (error || !data) {
return (
<section id="experience" className="py-20 px-4">
<div className="max-w-6xl mx-auto text-center">
<div className="max-w-7xl mx-auto text-center">
<p className="text-red-400">Erro ao carregar dados de experiência.</p>
</div>
</section>
);
}
const experiences = data.experiences.filter((exp) => exp.featured);
const experiences = data.experiences
.filter((exp) => exp.featured)
.sort((a, b) => {
// Extrair ano de início de cada experiência
const getStartYear = (period: string) => {
const yearMatch = period.match(/(\d{4})/);
return yearMatch ? parseInt(yearMatch[1]) : 0;
};
const yearA = getStartYear(a.period);
const yearB = getStartYear(b.period);
// Ordenar da mais antiga para a mais nova
return yearA - yearB;
});
// Configuração de cores por empresa/tipo
const experienceConfig = {
"innovo-tecnologia": {
color: "from-blue-500 to-cyan-600",
bgColor: "bg-blue-500/10",
borderColor: "border-blue-500/20",
iconColor: "text-blue-400",
accent: "blue",
},
"apolo-energia": {
color: "from-green-500 to-emerald-600",
bgColor: "bg-green-500/10",
borderColor: "border-green-500/20",
iconColor: "text-green-400",
accent: "green",
},
};
const getExperienceConfig = (company: string) => {
const key = company
.toLowerCase()
.replace(/\s+/g, "-")
.replace(/[^a-z0-9-]/g, "");
return (
experienceConfig[key as keyof typeof experienceConfig] ||
experienceConfig["innovo-tecnologia"]
);
};
const formatDuration = (period: string) => {
// Extrair meses da string de período (ex: "3 meses")
const monthsMatch = period.match(/(\d+)\s*meses?/i);
if (monthsMatch) {
const months = parseInt(monthsMatch[1]);
if (months < 12) {
return `${months} ${months === 1 ? "mês" : "meses"}`;
} else {
const years = Math.floor(months / 12);
const remainingMonths = months % 12;
if (remainingMonths === 0) {
return `${years} ${years === 1 ? "ano" : "anos"}`;
} else {
return `${years} ${
years === 1 ? "ano" : "anos"
} e ${remainingMonths} ${remainingMonths === 1 ? "mês" : "meses"}`;
}
}
}
// Extrair anos da string de período (ex: "3 anos 5 meses")
const yearsMatch = period.match(/(\d+)\s*anos?/i);
if (yearsMatch) {
const years = parseInt(yearsMatch[1]);
return `${years}+ ${years === 1 ? "ano" : "anos"}`;
}
return "Experiência relevante";
};
return (
<section
id="experience"
className="py-20 px-4 bg-gradient-to-b from-transparent to-black/20 mx-auto"
>
<div className="max-w-6xl mx-auto">
<section id="experience" className="py-20 px-4 relative">
<div className="max-w-7xl mx-auto">
{/* Header */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-center mb-16"
className="text-center mb-20"
>
<h2 className="text-4xl md:text-5xl font-bold mb-6">
<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">
Jornada Profissional
</span>
</div>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
Experiência Profissional
</h2>
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
Minha jornada profissional em desenvolvimento de software e soluções
tecnológicas
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Uma trajetória de crescimento técnico e impacto real, onde cada
projeto representou um novo nível de desafio e aprendizado
</p>
</motion.div>
<BentoGrid className="gap-6">
{experiences.map((exp, index) => (
<BentoGridItem
key={exp.id}
colSpan={index === 0 ? 2 : 1}
className="group hover:scale-[1.02] transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/10"
>
<div className="space-y-4">
{/* Header */}
<div className="flex items-start justify-between">
<div className="flex-1">
<h3 className="text-xl font-semibold text-white mb-1">
{exp.title}
</h3>
<p className="text-blue-400 font-medium">{exp.company}</p>
<div className="flex flex-wrap items-center gap-2 text-sm text-gray-400 mt-2">
<div className="flex items-center gap-1">
<Calendar className="w-4 h-4" />
{exp.period}
{/* Experience Cards Grid */}
<div className="grid lg:grid-cols-2 gap-8">
{experiences.map((exp, index) => {
const config = getExperienceConfig(exp.company);
return (
<motion.div
key={exp.id}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }}
className="relative"
>
{/* Content Card */}
<div className="h-full">
<div className="relative group">
{/* Background Glow */}
<div
className={`absolute inset-0 bg-gradient-to-r ${config.color} opacity-10 rounded-2xl blur-xl group-hover:opacity-20 transition-opacity duration-500`}
></div>
{/* Main Card */}
<div className="relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 hover:border-cyan-500/30 transition-all duration-300 hover:scale-105">
{/* Header */}
<div className="flex items-start justify-between mb-6">
<div className="flex-1">
<div className="flex items-center gap-3 mb-3">
<div className={`p-3 rounded-xl ${config.bgColor}`}>
<Briefcase
className={`w-6 h-6 ${config.iconColor}`}
/>
</div>
<div>
<h3 className="text-2xl font-bold text-white mb-1">
{exp.title}
</h3>
<p
className={`text-lg font-semibold ${config.iconColor}`}
>
{exp.company}
</p>
</div>
</div>
{/* Meta Info */}
<div className="flex flex-wrap gap-4 text-sm text-gray-400 mb-4">
<div className="flex items-center gap-2">
<Calendar className="w-4 h-4" />
<span>{exp.period}</span>
</div>
{exp.location && (
<div className="flex items-center gap-2">
<MapPin className="w-4 h-4" />
<span>{exp.location}</span>
</div>
)}
<div className="flex items-center gap-2">
<Users className="w-4 h-4" />
<span>{exp.type}</span>
</div>
</div>
</div>
{/* Duration Badge */}
<div
className={`px-4 py-2 rounded-full ${config.bgColor} border ${config.borderColor}`}
>
<span
className={`text-sm font-bold ${config.iconColor}`}
>
{formatDuration(exp.period)}
</span>
</div>
</div>
{exp.location && (
<div className="flex items-center gap-1">
<MapPin className="w-4 h-4" />
{exp.location}
{/* Description */}
<p className="text-gray-300 leading-relaxed mb-6 text-lg">
{exp.description}
</p>
{/* Achievements */}
{exp.achievements && exp.achievements.length > 0 && (
<div className="mb-6">
<h4 className="text-sm font-semibold text-gray-400 mb-4 uppercase tracking-wide flex items-center gap-2">
<Award className="w-4 h-4 text-yellow-400" />
Principais Conquistas
</h4>
<div className="grid gap-3">
{exp.achievements.map((achievement, idx) => (
<div
key={idx}
className="flex items-start gap-3 p-3 rounded-lg bg-white/5 border border-white/5 hover:border-blue-500/20 transition-colors"
>
<div className="w-2 h-2 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full mt-2 flex-shrink-0"></div>
<span className="text-gray-300 text-sm leading-relaxed">
{achievement}
</span>
</div>
))}
</div>
</div>
)}
{/* Technologies */}
{exp.technologies && exp.technologies.length > 0 && (
<div>
<h4 className="text-sm font-semibold text-gray-400 mb-3 uppercase tracking-wide flex items-center gap-2">
<Zap className="w-4 h-4 text-orange-400" />
Stack Tecnológica
</h4>
<div className="flex flex-wrap gap-2">
{exp.technologies.slice(0, 6).map((tech) => (
<span
key={tech}
className="px-3 py-1 bg-gray-800/50 text-gray-300 text-xs rounded-full border border-gray-700/50 hover:border-blue-500/30 transition-colors"
>
{tech}
</span>
))}
{exp.technologies.length > 6 && (
<span className="px-3 py-1 bg-gray-800/30 text-gray-500 text-xs rounded-full">
+{exp.technologies.length - 6}
</span>
)}
</div>
</div>
)}
<div className="flex items-center gap-1">
<Briefcase className="w-4 h-4" />
{exp.type}
</div>
</div>
</div>
</div>
</motion.div>
);
})}
</div>
{/* Description */}
<p className="text-gray-300 leading-relaxed">
{exp.description}
</p>
{/* Achievements */}
{exp.achievements.length > 0 && (
<div>
<h4 className="text-sm font-semibold text-blue-400 mb-2">
Principais Conquistas:
</h4>
<ul className="space-y-1">
{exp.achievements.map((achievement, idx) => (
<li
key={idx}
className="text-sm text-gray-400 flex items-center gap-2"
>
<div className="w-1.5 h-1.5 bg-blue-400 rounded-full" />
{achievement}
</li>
))}
</ul>
{/* Summary Stats */}
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
viewport={{ once: true }}
className="mt-20"
>
<div className="relative max-w-4xl mx-auto">
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-green-500/10 rounded-2xl blur-xl"></div>
<div className="relative bg-gradient-to-r from-blue-500/5 to-green-500/5 border border-blue-500/20 rounded-2xl p-8 backdrop-blur-sm">
<h4 className="text-2xl font-bold text-white mb-6 text-center">
Impacto e Crescimento
</h4>
<div className="grid md:grid-cols-3 gap-6">
<div className="text-center">
<div className="text-3xl font-bold text-blue-400 mb-2">
3+
</div>
)}
<div className="text-gray-400 text-sm">
Anos de Experiência
</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-purple-400 mb-2">
2
</div>
<div className="text-gray-400 text-sm">
Empresas Diferentes
</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-green-400 mb-2">
10+
</div>
<div className="text-gray-400 text-sm">
Tecnologias Dominadas
</div>
</div>
</div>
</BentoGridItem>
))}
</BentoGrid>
</div>
</div>
</motion.div>
</div>
</section>
);
app/components/Hero.tsx
+46 -18
View File
@@ -5,7 +5,7 @@ import Image from "next/image";
import { AuroraText } from "@/components/magicui/aurora-text";
import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
import { useEffect } from "react";
import { RotatingText } from "@/components/RotatingText";
import TextType from "@/components/TextType";
export default function Hero() {
const getGreetingMessage = () => {
@@ -50,17 +50,40 @@ export default function Hero() {
className="mb-8"
>
<div className="relative w-48 h-48 mx-auto mb-8 mt-10">
<Image
src="/edev.jpeg"
alt="Evandro Fonseca Junior - Desenvolvedor Full-Stack"
fill
className="rounded-lg object-cover"
priority
sizes="(max-width: 768px) 192px, 192px"
quality={85}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R+IRjWjBqO6O2mhP//Z"
/>
{/* Glow Effect */}
<div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-blue-500 opacity-20 rounded-lg blur-xl animate-pulse"></div>
{/* Gradient Border */}
<div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-lg p-1">
<div className="w-full h-full bg-black rounded-lg">
<Image
src="/edev.jpeg"
alt="Evandro Fonseca Junior - Desenvolvedor Full-Stack"
fill
className="rounded-lg object-cover"
priority
sizes="(max-width: 768px) 192px, 192px"
quality={85}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R+IRjWjBqO6O2mhP//Z"
/>
</div>
</div>
</div>
</motion.div>
{/* Badge */}
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.1 }}
className="mb-8"
>
<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">
Disponível para Trabalho
</span>
</div>
</motion.div>
@@ -71,18 +94,23 @@ export default function Hero() {
transition={{ duration: 0.8, delay: 0.2 }}
className="mb-8"
>
<h1 className="text-3xl md:text-5xl lg:text-6xl font-black mb-1 leading-tight text-gray-300">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-black mb-1 leading-tight text-gray-300">
Evandro Fonseca Junior
</h1>
<RotatingText
words={[
<TextType
text={[
"Full-Stack Developer",
"Cloud Solutions",
"UI/UX Focused",
"Performance Focused",
]}
className="text-xl md:text-2xl lg:text-3xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent"
interval={4000}
className="text-xl md:text-2xl lg:text-3xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent"
typingSpeed={80}
deletingSpeed={50}
pauseDuration={2000}
loop={true}
showCursor={true}
cursorCharacter="|"
/>
</motion.div>
@@ -184,7 +212,7 @@ export default function Hero() {
>
<a
href="#contact"
className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors"
className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-all duration-300 hover:scale-105 shadow-lg shadow-cyan-500/25"
>
Vamos Trabalhar Juntos
</a>
app/components/Projects.tsx
+239 -72
View File
@@ -2,16 +2,100 @@
import { motion } from "motion/react";
import { BentoGrid, BentoGridItem } from "@/components/magicui/bento-grid";
import { ExternalLink, Github } from "lucide-react";
import {
ExternalLink,
Github,
Star,
Zap,
Globe,
Cpu,
Code2,
} from "lucide-react";
import { usePortfolioData } from "@/lib/usePortfolioData";
// Configuração de cores e ícones por categoria
const categoryConfig = {
"full-stack": {
color: "from-blue-500 to-blue-600",
bgColor: "bg-blue-500/10",
borderColor: "border-blue-500/20",
icon: Globe,
iconColor: "text-blue-400",
},
iot: {
color: "from-purple-500 to-purple-600",
bgColor: "bg-purple-500/10",
borderColor: "border-purple-500/20",
icon: Cpu,
iconColor: "text-purple-400",
},
api: {
color: "from-orange-500 to-orange-600",
bgColor: "bg-orange-500/10",
borderColor: "border-orange-500/20",
icon: Code2,
iconColor: "text-orange-400",
},
web: {
color: "from-green-500 to-green-600",
bgColor: "bg-green-500/10",
borderColor: "border-green-500/20",
icon: Globe,
iconColor: "text-green-400",
},
desktop: {
color: "from-emerald-500 to-emerald-600",
bgColor: "bg-emerald-500/10",
borderColor: "border-emerald-500/20",
icon: Code2,
iconColor: "text-emerald-400",
},
};
// Função para gerar estrelas de complexidade
const ComplexityStars = ({ complexity }: { complexity: number }) => {
return (
<div className="flex items-center gap-1">
{[...Array(5)].map((_, i) => (
<Star
key={i}
className={`w-3 h-3 ${
i < complexity ? "text-yellow-400 fill-yellow-400" : "text-gray-600"
}`}
/>
))}
</div>
);
};
// Componente de Badge
const ProjectBadge = ({ badge, index }: { badge: string; index: number }) => {
const badgeColors = [
"bg-blue-500/20 text-blue-400 border-blue-500/30",
"bg-green-500/20 text-green-400 border-green-500/30",
"bg-purple-500/20 text-purple-400 border-purple-500/30",
"bg-orange-500/20 text-orange-400 border-orange-500/30",
"bg-red-500/20 text-red-400 border-red-500/30",
];
return (
<span
className={`px-2 py-1 text-xs font-medium rounded-full border ${
badgeColors[index % badgeColors.length]
}`}
>
{badge}
</span>
);
};
export default function Projects() {
const { data, loading, error } = usePortfolioData();
if (loading) {
return (
<section id="projects" className="py-20 px-4">
<div className="max-w-6xl mx-auto text-center">
<div className="max-w-7xl mx-auto text-center">
<div className="animate-pulse">
<div className="h-8 bg-gray-700 rounded w-1/3 mx-auto mb-4"></div>
<div className="h-4 bg-gray-700 rounded w-1/2 mx-auto"></div>
@@ -24,7 +108,7 @@ export default function Projects() {
if (error || !data) {
return (
<section id="projects" className="py-20 px-4">
<div className="max-w-6xl mx-auto text-center">
<div className="max-w-7xl mx-auto text-center">
<p className="text-red-400">Erro ao carregar dados de projetos.</p>
</div>
</section>
@@ -35,7 +119,7 @@ export default function Projects() {
return (
<section id="projects" className="py-20 px-4 mx-auto">
<div className="max-w-6xl mx-auto">
<div className="max-w-7xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -43,91 +127,174 @@ export default function Projects() {
viewport={{ once: true }}
className="text-center mb-16"
>
<h2 className="text-4xl md:text-5xl font-bold mb-6">
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
Projetos em Destaque
</h2>
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
Alguns dos projetos que desenvolvi, demonstrando minhas habilidades
e paixão por tecnologia
<p className="text-xl text-gray-300 max-w-3xl mx-auto">
Uma seleção dos projetos que desenvolvi, demonstrando minha evolução
técnica e capacidade de entregar soluções completas em diferentes
domínios
</p>
</motion.div>
<BentoGrid className="gap-6">
{projects.map((project, index) => (
<BentoGridItem
key={project.id}
colSpan={index === 0 ? 2 : 1}
className="group hover:scale-[1.02] transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/10"
>
<div className="space-y-4">
{/* Header */}
<div className="flex items-start justify-between">
<div className="flex-1">
<h3 className="text-xl font-semibold text-white mb-2">
{project.title}
</h3>
<div className="flex flex-wrap gap-2 mb-3">
{project.technologies.map((tech) => (
{projects.map((project, index) => {
const config =
categoryConfig[project.category as keyof typeof categoryConfig] ||
categoryConfig["web"];
const IconComponent = config.icon;
return (
<BentoGridItem
key={project.id}
colSpan={index <= 1 ? 2 : 1} // NutriScan e Twins Lab em destaque
className={`group hover:scale-105 transition-all duration-300 hover:shadow-2xl ${config.borderColor} border-2 bg-white/5 backdrop-blur-sm`}
>
<motion.div
className="space-y-5 h-full"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: index * 0.1 }}
viewport={{ once: true }}
>
{/* Header com ícone e badges */}
<div className="flex items-start justify-between">
<div className="flex items-center gap-3">
<div className={`p-3 rounded-xl ${config.bgColor}`}>
<IconComponent
className={`w-6 h-6 ${config.iconColor}`}
/>
</div>
<div>
<h3 className="text-xl font-bold text-white mb-1">
{project.title}
</h3>
<p className="text-sm text-gray-400 font-medium">
{project.subtitle}
</p>
</div>
</div>
<div className="flex gap-2">
{project.demoUrl && (
<a
href={project.demoUrl}
target="_blank"
rel="noopener noreferrer"
className="p-2 rounded-lg bg-green-500/20 text-green-400 hover:bg-green-500/30 transition-all duration-300 hover:scale-110"
aria-label="Ver demo"
>
<ExternalLink className="w-4 h-4" />
</a>
)}
{project.githubUrl && (
<a
href={project.githubUrl}
target="_blank"
rel="noopener noreferrer"
className="p-2 rounded-lg bg-gray-500/20 text-gray-400 hover:bg-gray-500/30 transition-all duration-300 hover:scale-110"
aria-label="Ver código"
>
<Github className="w-4 h-4" />
</a>
)}
</div>
</div>
{/* Badges */}
<div className="flex flex-wrap gap-2">
{project.badges.map((badge, idx) => (
<ProjectBadge key={badge} badge={badge} index={idx} />
))}
</div>
{/* Description */}
<p className="text-gray-300 leading-relaxed text-sm">
{project.description}
</p>
{/* Tecnologias principais */}
<div>
<h4 className="text-xs font-semibold text-gray-400 mb-2 uppercase tracking-wide">
Stack Principal
</h4>
<div className="flex flex-wrap gap-1">
{project.technologies.slice(0, 4).map((tech) => (
<span
key={tech}
className="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full border border-blue-500/30"
className="px-2 py-1 bg-gray-800/50 text-gray-300 text-xs rounded border border-gray-700/50"
>
{tech}
</span>
))}
{project.technologies.length > 4 && (
<span className="px-2 py-1 bg-gray-800/30 text-gray-500 text-xs rounded">
+{project.technologies.length - 4}
</span>
)}
</div>
</div>
<div className="flex gap-2">
<a
href={project.demoUrl}
className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
aria-label="Ver demo"
>
<ExternalLink className="w-4 h-4" />
</a>
<a
href={project.githubUrl}
className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
aria-label="Ver código"
>
<Github className="w-4 h-4" />
</a>
{/* Features principais */}
<div>
<h4 className="text-xs font-semibold text-gray-400 mb-2 uppercase tracking-wide">
Destaques
</h4>
<ul className="space-y-1">
{project.features.slice(0, 3).map((feature, idx) => (
<li
key={idx}
className="text-xs text-gray-400 flex items-start gap-2"
>
<Zap className="w-3 h-3 text-yellow-400 mt-0.5 flex-shrink-0" />
<span>{feature}</span>
</li>
))}
</ul>
</div>
</div>
{/* Description */}
<p className="text-gray-300 leading-relaxed">
{project.description}
</p>
{/* Features */}
<div>
<h4 className="text-sm font-semibold text-blue-400 mb-2">
Funcionalidades:
</h4>
<ul className="space-y-1">
{project.features.map((feature, idx) => (
<li
key={idx}
className="text-sm text-gray-400 flex items-center gap-2"
>
<div className="w-1.5 h-1.5 bg-blue-400 rounded-full" />
{feature}
</li>
))}
</ul>
</div>
{/* Status */}
<div className="pt-2 border-t border-white/10">
<span className="text-xs text-blue-400 font-medium">
{project.status}
</span>
</div>
</div>
</BentoGridItem>
))}
{/* Footer com complexidade e status */}
<div className="pt-4 border-t border-white/10 flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="text-xs text-gray-500">
Complexidade:
</span>
<ComplexityStars
complexity={project.metrics?.complexity || 3}
/>
</div>
<span
className={`text-xs font-medium px-2 py-1 rounded-full ${
project.status === "Em Produção"
? "bg-green-500/20 text-green-400 border border-green-500/30"
: "bg-blue-500/20 text-blue-400 border border-blue-500/30"
}`}
>
{project.status}
</span>
</div>
</motion.div>
</BentoGridItem>
);
})}
</BentoGrid>
{/* Call to Action */}
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.5 }}
viewport={{ once: true }}
className="text-center mt-16"
>
<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">
Todos os projetos são desenvolvidos individualmente, demonstrando
capacidade full-stack completa
</span>
</div>
</motion.div>
</div>
</section>
);
app/components/Skills.tsx
+8 -2
View File
@@ -76,7 +76,13 @@ export default function Skills() {
viewport={{ once: true }}
className="text-center mb-16"
>
<h2 className="text-4xl md:text-5xl font-bold mb-6">
<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">
Tecnologias Dominadas
</span>
</div>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
Habilidades Técnicas
</h2>
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
@@ -96,7 +102,7 @@ export default function Skills() {
transition={{ duration: 0.8, delay: index * 0.1 }}
viewport={{ once: true }}
>
<div className="p-6 space-y-4">
<div className="p-6 space-y-4 bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl hover:border-cyan-500/30 transition-all duration-300 hover:scale-105">
{/* Header */}
<div className="flex items-center gap-3">
<div className={`p-3 rounded-lg ${category.bgColor}`}>
app/components/WorkModalities.tsx
+301 -58
View File
@@ -1,64 +1,94 @@
"use client";
import { motion } from "motion/react";
import { Briefcase, Clock, DollarSign, HardHat, Lightbulb } from "lucide-react";
import {
Briefcase,
Clock,
DollarSign,
HardHat,
Lightbulb,
Building2,
Users,
User,
Star,
} from "lucide-react";
const WorkModalitiesData = [
{
title: "Desenvolvimento por Demanda",
value: "A partir de R$ 50/hora",
title: "Consultoria por Hora",
value: "R$ 35 - 70/hora",
badge: "RECOMENDADO",
idealFor:
"Empresas que buscam otimização rápida, startups com necessidades urgentes ou projetos que exigem intervenção especializada e focada.",
"Empresas que buscam flexibilidade máxima, startups testando soluções ou projetos que exigem expertise especializada sem compromissos longos.",
description:
"Soluções ágeis e focadas para desafios específicos. Ideal para otimizar recursos e obter resultados rápidos sem compromissos de longo prazo. Sua visão, minha expertise, entregas pontuais.",
icon: Clock,
"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: "Retainer Mensal",
value: "Sob consulta (pacotes personalizados)",
title: "Pacotes de Horas",
value: "Descontos até 21%",
idealFor:
"Negócios que valorizam estabilidade, crescimento planejado e acesso contínuo a um especialista dedicado para impulsionar sua inovação.",
"Clientes que já testaram o serviço e querem economizar com comprometimento antecipado, garantindo disponibilidade e preços favoráveis.",
description:
"Parceria estratégica para evolução contínua e suporte prioritário. Garanta acesso exclusivo à minha expertise para manutenção, novas funcionalidades e consultoria estratégica, com um compromisso de longo prazo que otimiza seu investimento.",
"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: "Consultoria Especializada",
value: "Sob consulta (projetos de alto impacto)",
title: "Retainer Mensal",
value: "A partir de R$ 2.800/mês",
idealFor:
"Líderes de tecnologia e empresas visionárias que enfrentam gargalos técnicos ou buscam validação e aprimoramento de suas estratégias de desenvolvimento.",
"Negócios que valorizam estabilidade, crescimento planejado e acesso prioritário a um especialista dedicado para impulsionar sua inovação contínua.",
description:
"Direcionamento estratégico e técnico para desafios complexos. Minha experiência em arquitetura de sistemas, IoT e otimização de performance é o diferencial para transformar suas ideias em soluções robustas e escaláveis. Ideal para quem busca excelência e inovação.",
icon: Lightbulb,
"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 Completo",
value: "A partir de R$ 5.000 (investimento inicial)",
title: "Desenvolvimento Sob Demanda",
value: "Estimativa em horas",
idealFor:
"Empreendedores e empresas que precisam de um parceiro para construir soluções digitais do zero, com a garantia de um produto de alta qualidade e impacto.",
"Empreendedores e empresas com projetos específicos que precisam de estimativas transparentes e controle total sobre investimento e escopo.",
description:
"Da concepção à entrega, seu projeto ganha vida com uma solução completa e personalizada. Garanto um processo transparente, com foco em performance, segurança e escalabilidade, para que você tenha um produto final que realmente se destaque no mercado.",
"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",
},
{
title: "Projetos Fechados",
value: "A partir de R$ 5.000 (soluções sob medida)",
idealFor:
"Clientes com necessidades claras e orçamentos específicos, que buscam uma entrega eficiente e sem surpresas para projetos de médio porte.",
description:
"Soluções com escopo e prazo definidos para resultados previsíveis. Ideal para quem busca agilidade e clareza no investimento, com a certeza de uma entrega que atende exatamente às suas expectativas e impulsiona seus objetivos.",
icon: DollarSign,
color: "red",
},
];
export function WorkModalities() {
return (
<section className="py-16 px-4">
<section className="py-20 px-4">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -66,7 +96,13 @@ export function WorkModalities() {
viewport={{ once: true }}
className="text-center mb-12"
>
<h2 className="text-4xl md:text-5xl font-bold mb-4">
<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">
@@ -74,7 +110,176 @@ export function WorkModalities() {
</p>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto justify-center">
{/* 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}
@@ -82,38 +287,76 @@ export function WorkModalities() {
whileInView={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: index * 0.1 }}
viewport={{ once: true }}
className={`bg-white/5 p-6 rounded-lg shadow-lg border 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" : ""} ${
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`}
>
<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" : ""
} inline-block mb-4`}
>
<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" : ""
{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>
<h3 className="text-2xl font-semibold mb-2">{modality.title}</h3>
<p className="text-lg font-medium text-gray-200 mb-2">
{modality.value}
</p>
<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}