478 lines
21 KiB
TypeScript
478 lines
21 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Navbar } from "@/components/navbar"
|
|
import { Footer } from "@/components/footer"
|
|
import { Calendar, Clock, User, Share2, Facebook, Twitter, Linkedin, Link as LinkIcon, ArrowLeft, Tag } from "lucide-react"
|
|
import Image from "next/image"
|
|
import Link from "next/link"
|
|
import { useParams } from "next/navigation"
|
|
|
|
export const runtime = 'edge';
|
|
|
|
export default function BlogPostPage() {
|
|
const params = useParams()
|
|
const [copied, setCopied] = useState(false)
|
|
|
|
const copyLink = () => {
|
|
navigator.clipboard.writeText(window.location.href)
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 2000)
|
|
}
|
|
|
|
// Mapeamento de posts com suas respectivas imagens
|
|
const postsData: Record<string, any> = {
|
|
"como-se-destacar-entrevistas-ti": {
|
|
title: "Como se destacar em entrevistas de emprego na área de TI",
|
|
author: "Carolina Santos",
|
|
date: "15 Jan 2026",
|
|
readTime: "8 min",
|
|
category: "Entrevistas",
|
|
image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=1200&q=80",
|
|
tags: ["Entrevistas", "Tecnologia", "Carreira", "Dicas"]
|
|
},
|
|
"linguagens-programacao-2026": {
|
|
title: "As 10 linguagens de programação mais procuradas em 2026",
|
|
author: "Roberto Silva",
|
|
date: "12 Jan 2026",
|
|
readTime: "10 min",
|
|
category: "Tecnologia",
|
|
image: "https://images.unsplash.com/photo-1542831371-29b0f74f9713?w=1200&q=80",
|
|
tags: ["Programação", "Tecnologia", "Mercado", "Linguagens"]
|
|
},
|
|
"salarios-desenvolvedores-brasil": {
|
|
title: "Guia completo de salários para desenvolvedores no Brasil",
|
|
author: "Mariana Costa",
|
|
date: "10 Jan 2026",
|
|
readTime: "12 min",
|
|
category: "Mercado de Trabalho",
|
|
image: "https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=1200&q=80",
|
|
tags: ["Salários", "Desenvolvedores", "Brasil", "Carreira"]
|
|
},
|
|
"transicao-carreira-tech": {
|
|
title: "Transição de carreira para TI: Por onde começar?",
|
|
author: "Lucas Oliveira",
|
|
date: "8 Jan 2026",
|
|
readTime: "7 min",
|
|
category: "Carreira",
|
|
image: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1200&q=80",
|
|
tags: ["Transição", "Carreira", "TI", "Iniciantes"]
|
|
},
|
|
"trabalho-remoto-produtividade": {
|
|
title: "Como manter a produtividade trabalhando remotamente",
|
|
author: "Ana Paula Mendes",
|
|
date: "5 Jan 2026",
|
|
readTime: "6 min",
|
|
category: "Dicas",
|
|
image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1200&q=80",
|
|
tags: ["Home Office", "Produtividade", "Trabalho Remoto", "Dicas"]
|
|
},
|
|
"soft-skills-desenvolvedor": {
|
|
title: "Soft skills essenciais para desenvolvedores de sucesso",
|
|
author: "Felipe Rodrigues",
|
|
date: "2 Jan 2026",
|
|
readTime: "9 min",
|
|
category: "Desenvolvimento",
|
|
image: "https://images.unsplash.com/photo-1531482615713-2afd69097998?w=1200&q=80",
|
|
tags: ["Soft Skills", "Desenvolvimento", "Carreira", "Competências"]
|
|
},
|
|
"portfolio-desenvolvedor-destaque": {
|
|
title: "Como criar um portfólio que impressiona recrutadores",
|
|
author: "Juliana Ferreira",
|
|
date: "28 Dez 2025",
|
|
readTime: "11 min",
|
|
category: "Carreira",
|
|
image: "https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?w=1200&q=80",
|
|
tags: ["Portfólio", "GitHub", "Projetos", "Carreira"]
|
|
},
|
|
"inteligencia-artificial-empregos": {
|
|
title: "IA e o futuro dos empregos em tecnologia",
|
|
author: "Pedro Almeida",
|
|
date: "25 Dez 2025",
|
|
readTime: "8 min",
|
|
category: "Tecnologia",
|
|
image: "https://images.unsplash.com/photo-1677442136019-21780ecad995?w=1200&q=80",
|
|
tags: ["IA", "Inteligência Artificial", "Futuro", "Tecnologia"]
|
|
},
|
|
"negociar-salario-tech": {
|
|
title: "Guia definitivo para negociar salário na área de TI",
|
|
author: "Rodrigo Martins",
|
|
date: "22 Dez 2025",
|
|
readTime: "10 min",
|
|
category: "Carreira",
|
|
image: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1200&q=80",
|
|
tags: ["Salário", "Negociação", "Carreira", "TI"]
|
|
}
|
|
}
|
|
|
|
const slug = params.slug as string
|
|
const postInfo = postsData[slug] || postsData["como-se-destacar-entrevistas-ti"]
|
|
|
|
// Post de exemplo baseado em conteúdo real de sites de emprego
|
|
const post = {
|
|
...postInfo,
|
|
content: `
|
|
<p class="text-lg font-semibold text-gray-900 mb-6">
|
|
O mercado de tecnologia está cada vez mais competitivo. Saber se destacar em uma entrevista pode ser o diferencial entre conseguir a vaga dos sonhos ou ficar para trás.
|
|
</p>
|
|
|
|
<p class="mb-4">
|
|
Em 2026, a maioria dos conflitos entre freelancers e clientes não são sobre a qualidade técnica do trabalho, mas sim sobre comunicação. Mal-entendidos, mudanças de escopo e expectativas pouco claras continuam sendo as principais causas de projetos frustrados.
|
|
</p>
|
|
|
|
<p class="mb-6">
|
|
Aprender a melhorar a comunicação com o cliente como freelancer em 2026 não só reduz o atrito, como também permite trabalhar com mais clareza, cobrar preços melhores e construir relacionamentos de longo prazo dentro do ecossistema freelancer.
|
|
</p>
|
|
|
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">1. Prepare-se profundamente sobre a empresa</h2>
|
|
|
|
<p class="mb-4">
|
|
Antes de qualquer entrevista, dedique tempo para pesquisar a fundo sobre a empresa. Visite o site oficial, leia sobre a cultura organizacional, entenda os produtos e serviços oferecidos e acompanhe as notícias recentes.
|
|
</p>
|
|
|
|
<p class="mb-4">
|
|
Demonstrar conhecimento sobre a empresa não apenas impressiona os entrevistadores, mas também mostra seu genuíno interesse pela vaga e pela organização.
|
|
</p>
|
|
|
|
<div class="bg-orange-50 border-l-4 border-[#f0932b] p-6 my-8">
|
|
<p class="text-gray-800 italic">
|
|
💡 <strong>Dica profissional:</strong> Prepare perguntas inteligentes sobre a empresa. Isso demonstra proatividade e interesse real pela posição.
|
|
</p>
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">2. Domine as competências técnicas exigidas</h2>
|
|
|
|
<p class="mb-4">
|
|
Na área de TI, as habilidades técnicas são fundamentais. Certifique-se de que você domina as tecnologias e ferramentas mencionadas na descrição da vaga.
|
|
</p>
|
|
|
|
<ul class="list-disc pl-6 mb-6 space-y-2">
|
|
<li>Revise conceitos fundamentais da sua área de atuação</li>
|
|
<li>Pratique exercícios de código e desafios técnicos</li>
|
|
<li>Prepare-se para demonstrar projetos anteriores</li>
|
|
<li>Esteja atualizado sobre as últimas tendências tecnológicas</li>
|
|
</ul>
|
|
|
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">3. Desenvolva suas soft skills</h2>
|
|
|
|
<p class="mb-4">
|
|
Além das habilidades técnicas, as empresas valorizam cada vez mais as soft skills. Capacidades como comunicação, trabalho em equipe, resolução de problemas e adaptabilidade são essenciais.
|
|
</p>
|
|
|
|
<p class="mb-4">
|
|
Durante a entrevista, busque exemplos concretos de situações onde você demonstrou essas competências. Use a técnica STAR (Situação, Tarefa, Ação, Resultado) para estruturar suas respostas.
|
|
</p>
|
|
|
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">4. Cuide da sua apresentação pessoal</h2>
|
|
|
|
<p class="mb-4">
|
|
A primeira impressão conta muito. Vista-se de forma apropriada para a cultura da empresa - mesmo em entrevistas remotas, apresente-se de forma profissional.
|
|
</p>
|
|
|
|
<p class="mb-4">
|
|
Em entrevistas presenciais, chegue com 10-15 minutos de antecedência. Em entrevistas online, teste sua conexão, câmera e microfone antecipadamente.
|
|
</p>
|
|
|
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">5. Prepare respostas para perguntas comuns</h2>
|
|
|
|
<p class="mb-4">
|
|
Algumas perguntas são frequentes em entrevistas de TI. Prepare respostas autênticas e bem estruturadas para questões como:
|
|
</p>
|
|
|
|
<ul class="list-disc pl-6 mb-6 space-y-2">
|
|
<li>"Conte-me sobre você e sua trajetória profissional"</li>
|
|
<li>"Quais são seus pontos fortes e fracos?"</li>
|
|
<li>"Por que você quer trabalhar nesta empresa?"</li>
|
|
<li>"Onde você se vê daqui a 5 anos?"</li>
|
|
<li>"Descreva um desafio técnico que você superou"</li>
|
|
</ul>
|
|
|
|
<div class="bg-gray-100 p-6 rounded-lg my-8">
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Checklist para entrevistas de TI:</h3>
|
|
<ul class="space-y-2">
|
|
<li class="flex items-start gap-2">
|
|
<span class="text-[#f0932b] mt-1">✓</span>
|
|
<span>Pesquisar a empresa e entender sua cultura</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="text-[#f0932b] mt-1">✓</span>
|
|
<span>Revisar tecnologias mencionadas na vaga</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="text-[#f0932b] mt-1">✓</span>
|
|
<span>Preparar portfólio de projetos</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="text-[#f0932b] mt-1">✓</span>
|
|
<span>Praticar perguntas comportamentais</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="text-[#f0932b] mt-1">✓</span>
|
|
<span>Testar equipamento (para entrevistas remotas)</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">6. Demonstre entusiasmo e motivação</h2>
|
|
|
|
<p class="mb-4">
|
|
Mostre que você está genuinamente interessado na oportunidade. Fale com energia sobre seus projetos, demonstre curiosidade sobre o trabalho e mantenha uma postura positiva durante toda a entrevista.
|
|
</p>
|
|
|
|
<p class="mb-4">
|
|
O entusiasmo é contagiante e pode fazer toda a diferença na decisão final dos recrutadores.
|
|
</p>
|
|
|
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">7. Faça um follow-up após a entrevista</h2>
|
|
|
|
<p class="mb-4">
|
|
Dentro de 24 horas após a entrevista, envie um e-mail de agradecimento. Reitere seu interesse pela vaga e destaque brevemente por que você seria um bom fit para a posição.
|
|
</p>
|
|
|
|
<p class="mb-6">
|
|
Esse pequeno gesto demonstra profissionalismo e pode deixar uma última impressão positiva nos recrutadores.
|
|
</p>
|
|
|
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">Conclusão</h2>
|
|
|
|
<p class="mb-4">
|
|
Se destacar em entrevistas de emprego na área de TI requer preparação, conhecimento técnico e desenvolvimento de habilidades interpessoais. Ao seguir essas dicas e investir tempo em sua preparação, você aumentará significativamente suas chances de sucesso.
|
|
</p>
|
|
|
|
<p class="mb-4">
|
|
Lembre-se: cada entrevista é uma oportunidade de aprendizado. Mesmo que não consiga a vaga, reflita sobre a experiência e identifique pontos de melhoria para as próximas oportunidades.
|
|
</p>
|
|
|
|
<p class="font-semibold text-gray-900">
|
|
Boa sorte em suas entrevistas! 🚀
|
|
</p>
|
|
`
|
|
}
|
|
|
|
const relatedPosts = [
|
|
{
|
|
id: 1,
|
|
title: "10 tendências de recrutamento para 2026",
|
|
category: "Recrutamento",
|
|
image: "/1.png",
|
|
slug: "tendencias-recrutamento-2026"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Soft skills mais valorizadas pelas empresas",
|
|
category: "Desenvolvimento",
|
|
image: "/4.png",
|
|
slug: "soft-skills-2026"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Como negociar salário: estratégias que funcionam",
|
|
category: "Carreira",
|
|
image: "/6.png",
|
|
slug: "negociar-salario"
|
|
}
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-white">
|
|
<Navbar />
|
|
|
|
<main className="flex-1">
|
|
{/* Breadcrumb */}
|
|
<div className="bg-gray-50 border-b border-gray-200">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<Link href="/" className="text-gray-600 hover:text-[#f0932b]">Início</Link>
|
|
<span className="text-gray-400">/</span>
|
|
<Link href="/blog" className="text-gray-600 hover:text-[#f0932b]">Blog</Link>
|
|
<span className="text-gray-400">/</span>
|
|
<span className="text-gray-900 font-medium">{post.category}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Article Header */}
|
|
<article className="py-12">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-4xl mx-auto">
|
|
{/* Back Button */}
|
|
<Link
|
|
href="/blog"
|
|
className="inline-flex items-center gap-2 text-[#f0932b] hover:underline mb-8"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
Voltar para o blog
|
|
</Link>
|
|
|
|
{/* Category Badge */}
|
|
<div className="mb-4">
|
|
<span className="inline-block bg-[#f0932b] text-white px-4 py-1 rounded-full text-sm font-semibold">
|
|
{post.category}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight">
|
|
{post.title}
|
|
</h1>
|
|
|
|
{/* Meta Info */}
|
|
<div className="flex flex-wrap items-center gap-6 text-gray-600 mb-8 pb-8 border-b border-gray-200">
|
|
<div className="flex items-center gap-2">
|
|
<User className="w-5 h-5" />
|
|
<span>{post.author}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Calendar className="w-5 h-5" />
|
|
<span>{post.date}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Clock className="w-5 h-5" />
|
|
<span>{post.readTime} de leitura</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Featured Image */}
|
|
<div className="relative h-96 rounded-2xl overflow-hidden mb-12 bg-[#f0932b]">
|
|
<Image
|
|
src={post.image}
|
|
alt={post.title}
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
{/* Share Buttons */}
|
|
<div className="flex items-center gap-4 mb-12 pb-8 border-b border-gray-200">
|
|
<span className="text-gray-600 font-semibold">Compartilhar:</span>
|
|
<div className="flex gap-2">
|
|
<button className="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700 transition-colors">
|
|
<Facebook className="w-5 h-5" />
|
|
</button>
|
|
<button className="w-10 h-10 rounded-full bg-sky-500 text-white flex items-center justify-center hover:bg-sky-600 transition-colors">
|
|
<Twitter className="w-5 h-5" />
|
|
</button>
|
|
<button className="w-10 h-10 rounded-full bg-blue-700 text-white flex items-center justify-center hover:bg-blue-800 transition-colors">
|
|
<Linkedin className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
onClick={copyLink}
|
|
className="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 transition-colors relative"
|
|
>
|
|
<LinkIcon className="w-5 h-5" />
|
|
{copied && (
|
|
<span className="absolute -top-10 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
|
|
Link copiado!
|
|
</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Article Content */}
|
|
<div
|
|
className="prose prose-lg max-w-none prose-headings:text-gray-900 prose-p:text-gray-700 prose-a:text-[#f0932b] prose-strong:text-gray-900"
|
|
dangerouslySetInnerHTML={{ __html: post.content }}
|
|
/>
|
|
|
|
{/* Tags */}
|
|
<div className="mt-12 pt-8 border-t border-gray-200">
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<Tag className="w-5 h-5 text-gray-600" />
|
|
{post.tags.map((tag: string, index: number) => (
|
|
<span
|
|
key={index}
|
|
className="inline-block bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm cursor-pointer transition-colors"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Author Bio */}
|
|
<div className="mt-12 p-8 bg-gray-50 rounded-2xl">
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-20 h-20 rounded-full bg-[#f0932b] flex items-center justify-center text-white text-2xl font-bold flex-shrink-0">
|
|
{post.author.charAt(0)}
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-bold text-gray-900 mb-2">{post.author}</h3>
|
|
<p className="text-gray-600">
|
|
Especialista em carreira e recrutamento com mais de 10 anos de experiência ajudando profissionais a alcançarem seus objetivos no mercado de tecnologia.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
{/* Related Posts */}
|
|
<section className="py-16 bg-gray-50">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-6xl mx-auto">
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-8">Artigos Relacionados</h2>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{relatedPosts.map((relatedPost) => (
|
|
<Link
|
|
key={relatedPost.id}
|
|
href={`/blog/${relatedPost.slug}`}
|
|
className="group bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300"
|
|
>
|
|
<div className="relative h-48 overflow-hidden bg-[#f0932b]">
|
|
<Image
|
|
src={relatedPost.image}
|
|
alt={relatedPost.title}
|
|
fill
|
|
className="object-cover group-hover:scale-110 transition-transform duration-300"
|
|
/>
|
|
<div className="absolute top-4 left-4">
|
|
<span className="bg-white text-[#f0932b] px-3 py-1 rounded-full text-xs font-bold">
|
|
{relatedPost.category}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="p-6">
|
|
<h3 className="text-xl font-bold text-gray-900 group-hover:text-[#f0932b] transition-colors line-clamp-2">
|
|
{relatedPost.title}
|
|
</h3>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Newsletter CTA */}
|
|
<section className="bg-[#f0932b] py-16">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-4xl mx-auto text-center text-white">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
|
Gostou deste conteúdo?
|
|
</h2>
|
|
<p className="text-lg mb-8 opacity-95">
|
|
Receba mais artigos como este direto no seu e-mail
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center max-w-xl mx-auto">
|
|
<input
|
|
type="email"
|
|
placeholder="Seu melhor e-mail"
|
|
className="flex-1 px-6 py-4 rounded-full text-gray-900 focus:outline-none focus:ring-2 focus:ring-white"
|
|
/>
|
|
<button className="bg-white text-[#f0932b] hover:bg-gray-100 font-bold px-8 py-4 rounded-full transition-all shadow-lg">
|
|
Assinar Newsletter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|