402 lines
16 KiB
TypeScript
402 lines
16 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Navbar } from "@/components/navbar"
|
|
import { Footer } from "@/components/footer"
|
|
import { Search, MapPin, Users, Briefcase, Star, TrendingUp, Building2, Globe, Heart, Filter } from "lucide-react"
|
|
import Image from "next/image"
|
|
import Link from "next/link"
|
|
|
|
interface Company {
|
|
id: number
|
|
name: string
|
|
logo: string
|
|
industry: string
|
|
location: string
|
|
employees: string
|
|
openJobs: number
|
|
description: string
|
|
rating: number
|
|
featured: boolean
|
|
benefits: string[]
|
|
}
|
|
|
|
export default function CompaniesPage() {
|
|
const [searchTerm, setSearchTerm] = useState("")
|
|
const [selectedIndustry, setSelectedIndustry] = useState("Todas")
|
|
const [selectedSize, setSelectedSize] = useState("Todos")
|
|
|
|
const industries = [
|
|
"Todas",
|
|
"Tecnologia",
|
|
"Fintech",
|
|
"E-commerce",
|
|
"Saúde",
|
|
"Educação",
|
|
"Consultoria",
|
|
"Agronegócio"
|
|
]
|
|
|
|
const companySizes = [
|
|
"Todos",
|
|
"1-10 funcionários",
|
|
"11-50 funcionários",
|
|
"51-200 funcionários",
|
|
"201-500 funcionários",
|
|
"500+ funcionários"
|
|
]
|
|
|
|
const companies: Company[] = [
|
|
{
|
|
id: 1,
|
|
name: "TechCorp Brasil",
|
|
logo: "/logohorse.png",
|
|
industry: "Tecnologia",
|
|
location: "São Paulo, SP",
|
|
employees: "201-500 funcionários",
|
|
openJobs: 15,
|
|
description: "Líder em soluções de software e transformação digital, ajudando empresas a inovarem através da tecnologia.",
|
|
rating: 4.8,
|
|
featured: true,
|
|
benefits: ["Home Office", "Vale Refeição", "Plano de Saúde", "Gympass"]
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "FinanceHub",
|
|
logo: "/logohorse.png",
|
|
industry: "Fintech",
|
|
location: "Rio de Janeiro, RJ",
|
|
employees: "51-200 funcionários",
|
|
openJobs: 8,
|
|
description: "Revolucionando o mercado financeiro com soluções inovadoras de pagamentos e investimentos.",
|
|
rating: 4.6,
|
|
featured: true,
|
|
benefits: ["PLR", "Stock Options", "Auxílio Educação", "Day Off Aniversário"]
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "EduTech Solutions",
|
|
logo: "/logohorse.png",
|
|
industry: "Educação",
|
|
location: "Belo Horizonte, MG",
|
|
employees: "11-50 funcionários",
|
|
openJobs: 6,
|
|
description: "Plataforma de educação online que conecta alunos e professores através da tecnologia.",
|
|
rating: 4.7,
|
|
featured: false,
|
|
benefits: ["Horário Flexível", "Cursos Gratuitos", "Home Office", "Vale Transporte"]
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "HealthTech Plus",
|
|
logo: "/logohorse.png",
|
|
industry: "Saúde",
|
|
location: "Porto Alegre, RS",
|
|
employees: "201-500 funcionários",
|
|
openJobs: 12,
|
|
description: "Inovação em saúde digital, oferecendo telemedicina e gestão de prontuários eletrônicos.",
|
|
rating: 4.9,
|
|
featured: true,
|
|
benefits: ["Plano Odontológico", "Seguro de Vida", "Assistência Psicológica", "Convênio Farmácia"]
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "AgriSmart",
|
|
logo: "/logohorse.png",
|
|
industry: "Agronegócio",
|
|
location: "Cuiabá, MT",
|
|
employees: "51-200 funcionários",
|
|
openJobs: 5,
|
|
description: "Tecnologia aplicada ao agronegócio, otimizando processos e aumentando produtividade.",
|
|
rating: 4.5,
|
|
featured: false,
|
|
benefits: ["Participação nos Lucros", "Carro da Empresa", "Notebook", "Seguro de Vida"]
|
|
},
|
|
{
|
|
id: 6,
|
|
name: "ShopNext",
|
|
logo: "/logohorse.png",
|
|
industry: "E-commerce",
|
|
location: "São Paulo, SP",
|
|
employees: "500+ funcionários",
|
|
openJobs: 23,
|
|
description: "Marketplace líder em vendas online com logística integrada e experiência omnichannel.",
|
|
rating: 4.4,
|
|
featured: false,
|
|
benefits: ["Desconto em Produtos", "Vale Alimentação", "Plano de Carreira", "Previdência Privada"]
|
|
},
|
|
{
|
|
id: 7,
|
|
name: "ConsultPro",
|
|
logo: "/logohorse.png",
|
|
industry: "Consultoria",
|
|
location: "Brasília, DF",
|
|
employees: "11-50 funcionários",
|
|
openJobs: 4,
|
|
description: "Consultoria estratégica focada em transformação digital e otimização de processos.",
|
|
rating: 4.6,
|
|
featured: false,
|
|
benefits: ["Bônus por Projeto", "Trabalho Remoto", "Equipamentos Top", "Capacitação"]
|
|
},
|
|
{
|
|
id: 8,
|
|
name: "DataLabs",
|
|
logo: "/logohorse.png",
|
|
industry: "Tecnologia",
|
|
location: "Florianópolis, SC",
|
|
employees: "51-200 funcionários",
|
|
openJobs: 11,
|
|
description: "Especialistas em Big Data e Inteligência Artificial, transformando dados em insights.",
|
|
rating: 4.8,
|
|
featured: true,
|
|
benefits: ["Ambiente Descontraído", "Frutas e Snacks", "Games Room", "Pet Friendly"]
|
|
}
|
|
]
|
|
|
|
const filteredCompanies = companies.filter(company => {
|
|
const matchesSearch = company.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
company.description.toLowerCase().includes(searchTerm.toLowerCase())
|
|
const matchesIndustry = selectedIndustry === "Todas" || company.industry === selectedIndustry
|
|
const matchesSize = selectedSize === "Todos" || company.employees === selectedSize
|
|
|
|
return matchesSearch && matchesIndustry && matchesSize
|
|
})
|
|
|
|
const featuredCompanies = companies.filter(c => c.featured)
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-white">
|
|
<Navbar />
|
|
|
|
<main className="flex-1">
|
|
{/* Hero Section */}
|
|
<section className="relative py-20 md:py-28 overflow-hidden">
|
|
{/* Imagem de fundo empresas.jpg sem overlay laranja */}
|
|
<div className="absolute inset-0 z-0">
|
|
<Image
|
|
src="/empresas.jpg"
|
|
alt="Empresas"
|
|
fill
|
|
className="object-cover object-center"
|
|
quality={100}
|
|
priority
|
|
/>
|
|
</div>
|
|
{/* Overlay preto com opacidade 20% */}
|
|
<div className="absolute inset-0 z-10 bg-black opacity-20"></div>
|
|
<div className="absolute inset-0 opacity-10 z-20">
|
|
<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 drop-shadow-[0_2px_8px_rgba(0,0,0,0.9)]">
|
|
Descubra as Melhores Empresas
|
|
</h1>
|
|
<p className="text-xl md:text-2xl mb-8 opacity-95 drop-shadow-[0_2px_8px_rgba(0,0,0,0.9)]">
|
|
Conheça empresas incríveis que estão contratando agora
|
|
</p>
|
|
|
|
{/* Search Bar */}
|
|
<div className="max-w-3xl 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 empresas por nome ou setor..."
|
|
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>
|
|
|
|
{/* Filters */}
|
|
<section className="bg-white py-8 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 flex-wrap gap-4 items-center">
|
|
<div className="flex items-center gap-2 text-gray-700">
|
|
<Filter className="w-5 h-5" />
|
|
<span className="font-semibold">Filtros:</span>
|
|
</div>
|
|
|
|
<select
|
|
value={selectedIndustry}
|
|
onChange={(e) => setSelectedIndustry(e.target.value)}
|
|
className="px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#F0932B] bg-white"
|
|
>
|
|
{industries.map(industry => (
|
|
<option key={industry} value={industry}>{industry}</option>
|
|
))}
|
|
</select>
|
|
|
|
<select
|
|
value={selectedSize}
|
|
onChange={(e) => setSelectedSize(e.target.value)}
|
|
className="px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#F0932B] bg-white"
|
|
>
|
|
{companySizes.map(size => (
|
|
<option key={size} value={size}>{size}</option>
|
|
))}
|
|
</select>
|
|
|
|
<div className="ml-auto text-sm text-gray-600">
|
|
<span className="font-semibold text-[#F0932B]">{filteredCompanies.length}</span> empresas encontradas
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Featured Companies */}
|
|
{featuredCompanies.length > 0 && (
|
|
<section className="py-16 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">
|
|
<Star className="w-6 h-6 text-[#F0932B]" />
|
|
<h2 className="text-3xl font-bold text-gray-900">Empresas em Destaque</h2>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
{featuredCompanies.map((company) => (
|
|
<div
|
|
key={company.id}
|
|
className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border-2 border-[#F0932B]/20"
|
|
>
|
|
<div className="flex items-start gap-4 mb-4">
|
|
<div className="w-16 h-16 rounded-xl bg-[#F0932B]/10 flex items-center justify-center flex-shrink-0">
|
|
<Building2 className="w-8 h-8 text-[#F0932B]" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="flex items-start justify-between mb-2">
|
|
<h3 className="text-xl font-bold text-gray-900">{company.name}</h3>
|
|
<div className="flex items-center gap-1 bg-yellow-100 px-2 py-1 rounded-full">
|
|
<Star className="w-4 h-4 text-yellow-600 fill-yellow-600" />
|
|
<span className="text-sm font-semibold text-yellow-700">{company.rating}</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4 text-sm text-gray-600 mb-2">
|
|
<span className="flex items-center gap-1">
|
|
<MapPin className="w-4 h-4" />
|
|
{company.location}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Users className="w-4 h-4" />
|
|
{company.employees}
|
|
</span>
|
|
</div>
|
|
<span className="inline-block bg-[#F0932B]/10 text-[#F0932B] px-3 py-1 rounded-full text-xs font-semibold">
|
|
{company.industry}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-gray-700 mb-4 line-clamp-2">{company.description}</p>
|
|
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{company.benefits.slice(0, 3).map((benefit, index) => (
|
|
<span key={index} className="text-xs bg-gray-100 text-gray-700 px-3 py-1 rounded-full">
|
|
{benefit}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between pt-4 border-t border-gray-100">
|
|
<div className="flex items-center gap-2 text-[#F0932B] font-semibold">
|
|
<Briefcase className="w-5 h-5" />
|
|
<span>{company.openJobs} vagas abertas</span>
|
|
</div>
|
|
<Link
|
|
href={`/companies/${company.id}`}
|
|
className="text-[#F0932B] hover:underline font-semibold"
|
|
>
|
|
Ver perfil →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* All Companies Grid */}
|
|
<section className="py-16 bg-white">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-8">Todas as Empresas</h2>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{filteredCompanies.map((company) => (
|
|
<div
|
|
key={company.id}
|
|
className="bg-white rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-300 border border-gray-200 hover:border-[#F0932B]"
|
|
>
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="w-14 h-14 rounded-lg bg-gray-100 flex items-center justify-center">
|
|
<Building2 className="w-7 h-7 text-[#F0932B]" />
|
|
</div>
|
|
{company.featured && (
|
|
<span className="bg-yellow-100 text-yellow-700 text-xs font-semibold px-2 py-1 rounded-full">
|
|
Destaque
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<h3 className="text-xl font-bold text-gray-900 mb-2">{company.name}</h3>
|
|
|
|
<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">
|
|
{company.industry}
|
|
</span>
|
|
<div className="flex items-center gap-1">
|
|
<Star className="w-4 h-4 text-yellow-500 fill-yellow-500" />
|
|
<span className="text-sm font-semibold text-gray-700">{company.rating}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-gray-600 text-sm mb-4 line-clamp-2">{company.description}</p>
|
|
|
|
<div className="space-y-2 text-sm text-gray-600 mb-4">
|
|
<div className="flex items-center gap-2">
|
|
<MapPin className="w-4 h-4" />
|
|
<span>{company.location}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Users className="w-4 h-4" />
|
|
<span>{company.employees}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<span className="text-[#F0932B] font-semibold text-sm">
|
|
{company.openJobs} vagas
|
|
</span>
|
|
<Link
|
|
href={`/companies/${company.id}`}
|
|
className="text-gray-600 hover:text-[#F0932B] font-semibold text-sm transition-colors"
|
|
>
|
|
Ver mais →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{filteredCompanies.length === 0 && (
|
|
<div className="text-center py-16">
|
|
<Building2 className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
|
<h3 className="text-xl font-semibold text-gray-900 mb-2">Nenhuma empresa encontrada</h3>
|
|
<p className="text-gray-600">Tente ajustar seus filtros de busca</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|