398 lines
16 KiB
TypeScript
398 lines
16 KiB
TypeScript
"use client"
|
|
|
|
import { Navbar } from "@/components/navbar"
|
|
import { Footer } from "@/components/footer"
|
|
import { Search, Calendar, Clock, ArrowRight, TrendingUp, Code, Briefcase, Users, Target, Lightbulb } from "lucide-react"
|
|
import Image from "next/image"
|
|
import Link from "next/link"
|
|
import { useState } from "react"
|
|
|
|
interface BlogPost {
|
|
id: string
|
|
slug: string
|
|
title: string
|
|
excerpt: string
|
|
category: string
|
|
date: string
|
|
readTime: string
|
|
image: string
|
|
author: {
|
|
name: string
|
|
avatar: string
|
|
}
|
|
featured?: boolean
|
|
}
|
|
|
|
export default function BlogPage() {
|
|
const [searchTerm, setSearchTerm] = useState("")
|
|
const [selectedCategory, setSelectedCategory] = useState("Todas")
|
|
|
|
const categories = [
|
|
"Todas",
|
|
"Carreira",
|
|
"Tecnologia",
|
|
"Entrevistas",
|
|
"Dicas",
|
|
"Mercado de Trabalho",
|
|
"Desenvolvimento"
|
|
]
|
|
|
|
const blogPosts: BlogPost[] = [
|
|
{
|
|
id: "1",
|
|
slug: "como-se-destacar-entrevistas-ti",
|
|
title: "Como se destacar em entrevistas de emprego na área de TI",
|
|
excerpt: "Dicas essenciais para profissionais de tecnologia que querem impressionar recrutadores e conquistar a vaga dos sonhos.",
|
|
category: "Entrevistas",
|
|
date: "15 de Janeiro, 2026",
|
|
readTime: "8 min",
|
|
image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=800&q=80",
|
|
author: {
|
|
name: "Carolina Santos",
|
|
avatar: "/logohorse.png"
|
|
},
|
|
featured: true
|
|
},
|
|
{
|
|
id: "2",
|
|
slug: "linguagens-programacao-2026",
|
|
title: "As 10 linguagens de programação mais procuradas em 2026",
|
|
excerpt: "Descubra quais são as tecnologias mais valorizadas pelo mercado e como se preparar para as oportunidades futuras.",
|
|
category: "Tecnologia",
|
|
date: "12 de Janeiro, 2026",
|
|
readTime: "10 min",
|
|
image: "https://images.unsplash.com/photo-1542831371-29b0f74f9713?w=800&q=80",
|
|
author: {
|
|
name: "Roberto Silva",
|
|
avatar: "/logohorse.png"
|
|
},
|
|
featured: true
|
|
},
|
|
{
|
|
id: "3",
|
|
slug: "salarios-desenvolvedores-brasil",
|
|
title: "Guia completo de salários para desenvolvedores no Brasil",
|
|
excerpt: "Análise detalhada sobre faixas salariais, benefícios e tendências do mercado de tecnologia brasileiro.",
|
|
category: "Mercado de Trabalho",
|
|
date: "10 de Janeiro, 2026",
|
|
readTime: "12 min",
|
|
image: "https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=800&q=80",
|
|
author: {
|
|
name: "Mariana Costa",
|
|
avatar: "/logohorse.png"
|
|
},
|
|
featured: true
|
|
},
|
|
{
|
|
id: "4",
|
|
slug: "transicao-carreira-tech",
|
|
title: "Transição de carreira para TI: Por onde começar?",
|
|
excerpt: "Um guia prático para profissionais que desejam migrar para a área de tecnologia, com dicas de cursos e certificações.",
|
|
category: "Carreira",
|
|
date: "8 de Janeiro, 2026",
|
|
readTime: "7 min",
|
|
image: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&q=80",
|
|
author: {
|
|
name: "Lucas Oliveira",
|
|
avatar: "/logohorse.png"
|
|
}
|
|
},
|
|
{
|
|
id: "5",
|
|
slug: "trabalho-remoto-produtividade",
|
|
title: "Como manter a produtividade trabalhando remotamente",
|
|
excerpt: "Estratégias comprovadas para equilibrar vida profissional e pessoal no modelo home office.",
|
|
category: "Dicas",
|
|
date: "5 de Janeiro, 2026",
|
|
readTime: "6 min",
|
|
image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80",
|
|
author: {
|
|
name: "Ana Paula Mendes",
|
|
avatar: "/logohorse.png"
|
|
}
|
|
},
|
|
{
|
|
id: "6",
|
|
slug: "soft-skills-desenvolvedor",
|
|
title: "Soft skills essenciais para desenvolvedores de sucesso",
|
|
excerpt: "Além do código: as habilidades comportamentais que fazem a diferença na carreira tech.",
|
|
category: "Desenvolvimento",
|
|
date: "2 de Janeiro, 2026",
|
|
readTime: "9 min",
|
|
image: "https://images.unsplash.com/photo-1531482615713-2afd69097998?w=800&q=80",
|
|
author: {
|
|
name: "Felipe Rodrigues",
|
|
avatar: "/logohorse.png"
|
|
}
|
|
},
|
|
{
|
|
id: "7",
|
|
slug: "portfolio-desenvolvedor-destaque",
|
|
title: "Como criar um portfólio que impressiona recrutadores",
|
|
excerpt: "Aprenda a estruturar seus projetos de forma profissional e aumentar suas chances de contratação.",
|
|
category: "Carreira",
|
|
date: "28 de Dezembro, 2025",
|
|
readTime: "11 min",
|
|
image: "https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?w=800&q=80",
|
|
author: {
|
|
name: "Juliana Ferreira",
|
|
avatar: "/logohorse.png"
|
|
}
|
|
},
|
|
{
|
|
id: "8",
|
|
slug: "inteligencia-artificial-empregos",
|
|
title: "IA e o futuro dos empregos em tecnologia",
|
|
excerpt: "Como a inteligência artificial está transformando o mercado de trabalho e criando novas oportunidades.",
|
|
category: "Tecnologia",
|
|
date: "25 de Dezembro, 2025",
|
|
readTime: "8 min",
|
|
image: "https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800&q=80",
|
|
author: {
|
|
name: "Pedro Almeida",
|
|
avatar: "/logohorse.png"
|
|
}
|
|
},
|
|
{
|
|
id: "9",
|
|
slug: "negociar-salario-tech",
|
|
title: "Guia definitivo para negociar salário na área de TI",
|
|
excerpt: "Técnicas e estratégias para conseguir a melhor proposta salarial possível em sua próxima oportunidade.",
|
|
category: "Carreira",
|
|
date: "22 de Dezembro, 2025",
|
|
readTime: "10 min",
|
|
image: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=800&q=80",
|
|
author: {
|
|
name: "Rodrigo Martins",
|
|
avatar: "/logohorse.png"
|
|
}
|
|
}
|
|
]
|
|
|
|
const filteredPosts = blogPosts.filter(post => {
|
|
const matchesSearch = post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
post.excerpt.toLowerCase().includes(searchTerm.toLowerCase())
|
|
const matchesCategory = selectedCategory === "Todas" || post.category === selectedCategory
|
|
|
|
return matchesSearch && matchesCategory
|
|
})
|
|
|
|
const featuredPosts = blogPosts.filter(p => p.featured)
|
|
const regularPosts = filteredPosts.filter(p => !p.featured)
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-white">
|
|
<Navbar />
|
|
|
|
<main className="flex-1">
|
|
{/* Hero Section */}
|
|
<section className="relative bg-[#f0932b] py-16 md:py-24 overflow-hidden">
|
|
<div className="absolute inset-0 opacity-10">
|
|
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.2)_0%,transparent_50%)]"></div>
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div className="max-w-4xl mx-auto text-center text-white">
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
|
|
Blog GoHorse Jobs
|
|
</h1>
|
|
<p className="text-xl md:text-2xl mb-8 opacity-95">
|
|
Insights, dicas e tendências para impulsionar sua carreira em tecnologia
|
|
</p>
|
|
|
|
{/* Search Bar */}
|
|
<div className="max-w-2xl mx-auto bg-white rounded-full p-2 shadow-lg">
|
|
<div className="relative">
|
|
<Search className="absolute left-6 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
|
|
<input
|
|
type="text"
|
|
placeholder="Buscar artigos..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full pl-14 pr-4 py-3 rounded-full text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#f0932b] text-lg bg-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Categories Filter */}
|
|
<section className="bg-white py-6 border-b border-gray-200 sticky top-16 z-20 shadow-sm">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center gap-3 overflow-x-auto pb-2 scrollbar-hide">
|
|
{categories.map(category => (
|
|
<button
|
|
key={category}
|
|
onClick={() => setSelectedCategory(category)}
|
|
className={`px-5 py-2 rounded-full font-medium whitespace-nowrap transition-all ${
|
|
selectedCategory === category
|
|
? 'bg-[#f0932b] text-white shadow-md'
|
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
{category}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Featured Posts */}
|
|
{selectedCategory === "Todas" && (
|
|
<section className="py-12 bg-gradient-to-b from-orange-50 to-white">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center gap-3 mb-8">
|
|
<TrendingUp className="w-7 h-7 text-[#f0932b]" />
|
|
<h2 className="text-3xl font-bold text-gray-900">Artigos em Destaque</h2>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{featuredPosts.map((post) => (
|
|
<Link
|
|
key={post.id}
|
|
href={`/blog/${post.slug}`}
|
|
className="group bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 border-2 border-[#f0932b]/20"
|
|
>
|
|
<div className="relative h-56 overflow-hidden">
|
|
<Image
|
|
src={post.image}
|
|
alt={post.title}
|
|
fill
|
|
className="object-cover group-hover:scale-110 transition-transform duration-300"
|
|
/>
|
|
<div className="absolute top-4 left-4">
|
|
<span className="bg-[#f0932b] text-white px-3 py-1 rounded-full text-xs font-semibold">
|
|
Destaque
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<span className="bg-[#f0932b]/10 text-[#f0932b] px-3 py-1 rounded-full text-xs font-semibold">
|
|
{post.category}
|
|
</span>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-[#f0932b] transition-colors line-clamp-2">
|
|
{post.title}
|
|
</h3>
|
|
<p className="text-gray-600 mb-4 line-clamp-2">
|
|
{post.excerpt}
|
|
</p>
|
|
<div className="flex items-center justify-between pt-4 border-t border-gray-100">
|
|
<div className="flex items-center gap-3 text-sm text-gray-500">
|
|
<div className="flex items-center gap-1">
|
|
<Calendar className="w-4 h-4" />
|
|
<span>{post.date}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Clock className="w-4 h-4" />
|
|
<span>{post.readTime}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* All Posts */}
|
|
<section className="py-16 bg-white">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between mb-8">
|
|
<h2 className="text-3xl font-bold text-gray-900">
|
|
{selectedCategory === "Todas" ? "Todos os Artigos" : `Categoria: ${selectedCategory}`}
|
|
</h2>
|
|
<p className="text-gray-600">
|
|
<span className="font-semibold text-[#f0932b]">{filteredPosts.length}</span> artigos encontrados
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{(selectedCategory === "Todas" ? regularPosts : filteredPosts).map((post) => (
|
|
<Link
|
|
key={post.id}
|
|
href={`/blog/${post.slug}`}
|
|
className="group bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 border border-gray-200 hover:border-[#f0932b]"
|
|
>
|
|
<div className="relative h-48 overflow-hidden">
|
|
<Image
|
|
src={post.image}
|
|
alt={post.title}
|
|
fill
|
|
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<span className="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs font-semibold">
|
|
{post.category}
|
|
</span>
|
|
</div>
|
|
<h3 className="text-lg font-bold text-gray-900 mb-2 group-hover:text-[#f0932b] transition-colors line-clamp-2">
|
|
{post.title}
|
|
</h3>
|
|
<p className="text-gray-600 text-sm mb-4 line-clamp-3">
|
|
{post.excerpt}
|
|
</p>
|
|
<div className="flex items-center justify-between pt-4 border-t border-gray-100">
|
|
<div className="flex items-center gap-2 text-xs text-gray-500">
|
|
<Clock className="w-3 h-3" />
|
|
<span>{post.readTime}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1 text-[#f0932b] font-semibold text-sm">
|
|
<span>Ler mais</span>
|
|
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{filteredPosts.length === 0 && (
|
|
<div className="text-center py-16">
|
|
<Search className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
|
<h3 className="text-xl font-semibold text-gray-900 mb-2">Nenhum artigo encontrado</h3>
|
|
<p className="text-gray-600">Tente ajustar sua busca ou filtros</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Newsletter CTA */}
|
|
<section className="bg-gradient-to-br from-[#f0932b] to-[#e67e22] py-16">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-3xl mx-auto text-center text-white">
|
|
<Lightbulb className="w-16 h-16 mx-auto mb-6" />
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
|
Fique por dentro das novidades
|
|
</h2>
|
|
<p className="text-lg mb-8 opacity-95">
|
|
Receba insights exclusivos sobre carreira, tecnologia e mercado de trabalho diretamente no seu e-mail
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-3 max-w-xl mx-auto">
|
|
<input
|
|
type="email"
|
|
placeholder="Seu melhor e-mail"
|
|
className="flex-1 px-6 py-4 rounded-full bg-white text-gray-900 placeholder:text-gray-400 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-colors whitespace-nowrap">
|
|
Assinar Newsletter
|
|
</button>
|
|
</div>
|
|
<p className="text-sm mt-4 opacity-75">
|
|
Sem spam. Cancele a qualquer momento.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|