atualizacao geral de funcionalidades
This commit is contained in:
eycksilva
parent
ffa0203ec0
commit
dd7086bf34
23 changed files with 2906 additions and 305 deletions
|
|
@ -121,6 +121,174 @@
|
||||||
"footer": {
|
"footer": {
|
||||||
"rights": "All rights reserved.",
|
"rights": "All rights reserved.",
|
||||||
"privacy": "Privacy",
|
"privacy": "Privacy",
|
||||||
"terms": "Terms of use"
|
"terms": "Terms of use",
|
||||||
|
"blog": "Blog",
|
||||||
|
"empresas": "Companies",
|
||||||
|
"login": "Login"
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"title": "Contact Us",
|
||||||
|
"subtitle": "We're here to help you",
|
||||||
|
"getInTouch": "Get in Touch",
|
||||||
|
"name": "Name",
|
||||||
|
"email": "Email",
|
||||||
|
"subject": "Subject",
|
||||||
|
"message": "Message",
|
||||||
|
"send": "Send Message",
|
||||||
|
"sending": "Sending...",
|
||||||
|
"success": "Message sent successfully!",
|
||||||
|
"error": "Error sending message",
|
||||||
|
"faq": "Frequently Asked Questions",
|
||||||
|
"resources": "Useful Resources"
|
||||||
|
},
|
||||||
|
"about": {
|
||||||
|
"title": "About Us",
|
||||||
|
"hero": {
|
||||||
|
"title": "The evolution of work begins with people and their culture",
|
||||||
|
"subtitle": "Every day we contribute to transform the way we think about work so that it is consistent with the way we want to live."
|
||||||
|
},
|
||||||
|
"whatWeDo": {
|
||||||
|
"title": "What do we do?",
|
||||||
|
"p1": "GoHorse Jobs connects companies to qualified talents to transform projects into real results, combining expertise, agility and innovation in each hire.",
|
||||||
|
"p2": "Our platform facilitates the meeting between those looking for prepared professionals and those looking for opportunities aligned with their profile, objectives and work style.",
|
||||||
|
"p3": "At the same time, we help professionals evolve in their careers, gain autonomy, expand their networking and achieve opportunities that really make sense for their professional growth."
|
||||||
|
},
|
||||||
|
"hybrid": {
|
||||||
|
"title": "We are hybrid, itinerant and diverse",
|
||||||
|
"stats": "70% of the GoHorse Jobs team works remotely. 100% work with autonomy.",
|
||||||
|
"agile": "+ Agile",
|
||||||
|
"agileDesc": "Our flexible work culture allows us to quickly respond to the needs of the market and our users.",
|
||||||
|
"productive": "+ Productive",
|
||||||
|
"productiveDesc": "Autonomy and flexibility result in a more motivated, engaged and productive team in their projects."
|
||||||
|
},
|
||||||
|
"purpose": {
|
||||||
|
"title": "The purpose that unites us",
|
||||||
|
"desc": "We work continuously to transform the world of work by promoting autonomy, talent development and equal opportunities for all, from wherever they are.",
|
||||||
|
"quote": "We are an innovative organization that seeks to empower people at work, positively impacting personal, family and social life.",
|
||||||
|
"believe": "We believe there is a new way to work."
|
||||||
|
},
|
||||||
|
"values": {
|
||||||
|
"title": "Our values",
|
||||||
|
"subtitle": "The principles that guide our daily lives and shape our organizational culture"
|
||||||
|
},
|
||||||
|
"cta": {
|
||||||
|
"title": "Be part of the work transformation",
|
||||||
|
"subtitle": "Join thousands of companies and professionals who already trust GoHorse Jobs to build the future of work.",
|
||||||
|
"findJobs": "Find Jobs",
|
||||||
|
"postJob": "Post Job"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"blog": {
|
||||||
|
"title": "GoHorse Jobs Blog",
|
||||||
|
"subtitle": "Content about career, recruitment, technology and the future of work",
|
||||||
|
"searchPlaceholder": "Search articles...",
|
||||||
|
"categories": {
|
||||||
|
"all": "All",
|
||||||
|
"recruitment": "Recruitment",
|
||||||
|
"career": "Career",
|
||||||
|
"technology": "Technology",
|
||||||
|
"development": "Development",
|
||||||
|
"culture": "Culture",
|
||||||
|
"market": "Market"
|
||||||
|
},
|
||||||
|
"readMore": "Read more",
|
||||||
|
"showing": "Showing",
|
||||||
|
"of": "of",
|
||||||
|
"articles": "articles",
|
||||||
|
"newsletter": {
|
||||||
|
"title": "Want to receive our content first hand?",
|
||||||
|
"subtitle": "Subscribe to our newsletter and stay up to date with the latest news from the job market",
|
||||||
|
"placeholder": "Your best email",
|
||||||
|
"subscribe": "Subscribe Newsletter"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"postJob": {
|
||||||
|
"sidebar": {
|
||||||
|
"title": "Post job openings quickly and efficiently",
|
||||||
|
"benefit1": "One of the largest communities of professionals in the market",
|
||||||
|
"benefit2": "Platform with high visibility and daily access",
|
||||||
|
"benefit3": "Great movement of applications every day",
|
||||||
|
"benefit4": "New talents registering constantly"
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"title": "Post your job opening for FREE!",
|
||||||
|
"subtitle": "More than",
|
||||||
|
"registeredCVs": "50 thousand registered resumes",
|
||||||
|
"jobTitle": "Job position",
|
||||||
|
"jobTitlePlaceholder": "Ex: Full Stack Developer",
|
||||||
|
"companyName": "Company Name",
|
||||||
|
"companyNamePlaceholder": "Ex: Tech Company Ltd",
|
||||||
|
"cnpj": "Company ID",
|
||||||
|
"cnpjPlaceholder": "00.000.000/0000-00",
|
||||||
|
"employees": "Number of employees at unit",
|
||||||
|
"employeesPlaceholder": "Ex: 50",
|
||||||
|
"zipCode": "ZIP Code",
|
||||||
|
"zipCodePlaceholder": "00000-000",
|
||||||
|
"firstName": "First Name",
|
||||||
|
"firstNamePlaceholder": "Your first name",
|
||||||
|
"lastName": "Last Name",
|
||||||
|
"lastNamePlaceholder": "Your last name",
|
||||||
|
"email": "Your corporate email",
|
||||||
|
"emailPlaceholder": "your.email@company.com",
|
||||||
|
"phone": "Your phone",
|
||||||
|
"phonePlaceholder": "(00) 0000-0000",
|
||||||
|
"mobile": "Your mobile",
|
||||||
|
"mobilePlaceholder": "(00) 00000-0000",
|
||||||
|
"acceptTermsPrefix": "I have read and accept the",
|
||||||
|
"termsLink": "Legal Conditions",
|
||||||
|
"acceptTermsAnd": "and the",
|
||||||
|
"privacyLink": "Privacy Policy",
|
||||||
|
"acceptTermsSuffix": "of GoHorse Jobs.",
|
||||||
|
"acceptMarketing": "I authorize GoHorse Jobs to send commercial communications about products, services and events from its partners and collaborators.",
|
||||||
|
"submitButton": "POST JOB FOR FREE",
|
||||||
|
"candidateQuestion": "Are you a candidate?",
|
||||||
|
"candidateLink": "Sign up for free here!"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"registerUser": {
|
||||||
|
"title": "Create User Account",
|
||||||
|
"subtitle": "Fill in the details below to register",
|
||||||
|
"hero": {
|
||||||
|
"title": "Start your professional journey",
|
||||||
|
"subtitle": "Create your account and get access to the best tech job opportunities.",
|
||||||
|
"profile": "Create your complete professional profile",
|
||||||
|
"apply": "Apply to the best companies",
|
||||||
|
"track": "Track your applications in real time"
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"name": "Full Name",
|
||||||
|
"namePlaceholder": "Your full name",
|
||||||
|
"email": "Email",
|
||||||
|
"emailPlaceholder": "your@email.com",
|
||||||
|
"phone": "Phone",
|
||||||
|
"phonePlaceholder": "(00) 00000-0000",
|
||||||
|
"password": "Password",
|
||||||
|
"passwordPlaceholder": "Minimum 6 characters",
|
||||||
|
"confirmPassword": "Confirm Password",
|
||||||
|
"confirmPasswordPlaceholder": "Enter password again",
|
||||||
|
"acceptTerms": "I accept the terms of use and privacy policy",
|
||||||
|
"submit": "Create Account",
|
||||||
|
"submitting": "Creating account...",
|
||||||
|
"hasAccount": "Already have an account?",
|
||||||
|
"login": "Sign in",
|
||||||
|
"backHome": "Back to home"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"companies": {
|
||||||
|
"hero": {
|
||||||
|
"title": "Discover the Best Companies",
|
||||||
|
"subtitle": "Meet amazing companies that are hiring now"
|
||||||
|
},
|
||||||
|
"searchPlaceholder": "Search companies by name or industry...",
|
||||||
|
"filters": "Filters",
|
||||||
|
"companiesFound": "companies found",
|
||||||
|
"featured": "Featured Companies",
|
||||||
|
"allCompanies": "All Companies",
|
||||||
|
"featuredBadge": "Featured",
|
||||||
|
"jobs": "jobs",
|
||||||
|
"viewProfile": "View profile",
|
||||||
|
"viewMore": "View more",
|
||||||
|
"noCompanies": "No companies found",
|
||||||
|
"adjustFilters": "Try adjusting your search filters"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -121,6 +121,174 @@
|
||||||
"footer": {
|
"footer": {
|
||||||
"rights": "Todos os direitos reservados.",
|
"rights": "Todos os direitos reservados.",
|
||||||
"privacy": "Privacidade",
|
"privacy": "Privacidade",
|
||||||
"terms": "Termos de uso"
|
"terms": "Termos de uso",
|
||||||
|
"blog": "Blog",
|
||||||
|
"empresas": "Empresas",
|
||||||
|
"login": "Login"
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"title": "Entre em Contato",
|
||||||
|
"subtitle": "Estamos aqui para ajudar você",
|
||||||
|
"getInTouch": "Fale Conosco",
|
||||||
|
"name": "Nome",
|
||||||
|
"email": "E-mail",
|
||||||
|
"subject": "Assunto",
|
||||||
|
"message": "Mensagem",
|
||||||
|
"send": "Enviar Mensagem",
|
||||||
|
"sending": "Enviando...",
|
||||||
|
"success": "Mensagem enviada com sucesso!",
|
||||||
|
"error": "Erro ao enviar mensagem",
|
||||||
|
"faq": "Perguntas Frequentes",
|
||||||
|
"resources": "Recursos Úteis"
|
||||||
|
},
|
||||||
|
"about": {
|
||||||
|
"title": "Sobre Nós",
|
||||||
|
"hero": {
|
||||||
|
"title": "A evolução do trabalho começa pelas pessoas e sua cultura",
|
||||||
|
"subtitle": "Todos os dias contribuímos para transformar a maneira como pensamos o trabalho para que seja coerente com a maneira como queremos viver."
|
||||||
|
},
|
||||||
|
"whatWeDo": {
|
||||||
|
"title": "O que fazemos?",
|
||||||
|
"p1": "O GoHorse Jobs conecta empresas a talentos qualificados para transformar projetos em resultados reais, unindo expertise, agilidade e inovação em cada contratação.",
|
||||||
|
"p2": "Nossa plataforma facilita o encontro entre quem busca profissionais preparados e quem deseja oportunidades alinhadas ao seu perfil, objetivos e estilo de trabalho.",
|
||||||
|
"p3": "Ao mesmo tempo, ajudamos profissionais a evoluírem em suas carreiras, ganharem autonomia, ampliarem seu networking e conquistarem oportunidades que realmente fazem sentido para seu crescimento profissional."
|
||||||
|
},
|
||||||
|
"hybrid": {
|
||||||
|
"title": "Somos híbridos, itinerantes e diversos",
|
||||||
|
"stats": "70% da equipe do GoHorse Jobs trabalha remotamente. 100% de trabalho com autonomia.",
|
||||||
|
"agile": "+ Ágil",
|
||||||
|
"agileDesc": "Nossa cultura de trabalho flexível nos permite responder rapidamente às necessidades do mercado e dos nossos usuários.",
|
||||||
|
"productive": "+ Produtiva",
|
||||||
|
"productiveDesc": "A autonomia e flexibilidade resultam em uma equipe mais motivada, engajada e produtiva em seus projetos."
|
||||||
|
},
|
||||||
|
"purpose": {
|
||||||
|
"title": "O propósito que nos une",
|
||||||
|
"desc": "Trabalhamos continuamente para transformar o mundo do trabalho promovendo a autonomia, o desenvolvimento de talentos e a igualdade de oportunidades para todos, de onde quer que seja.",
|
||||||
|
"quote": "Somos uma organização inovadora que busca potencializar as pessoas no trabalho, impactando positivamente na vida pessoal, familiar e social.",
|
||||||
|
"believe": "Acreditamos que há uma nova forma de trabalhar."
|
||||||
|
},
|
||||||
|
"values": {
|
||||||
|
"title": "Nossos valores",
|
||||||
|
"subtitle": "Os princípios que guiam nosso dia a dia e moldam nossa cultura organizacional"
|
||||||
|
},
|
||||||
|
"cta": {
|
||||||
|
"title": "Faça parte da transformação do trabalho",
|
||||||
|
"subtitle": "Junte-se a milhares de empresas e profissionais que já confiam no GoHorse Jobs para construir o futuro do trabalho.",
|
||||||
|
"findJobs": "Encontrar Vagas",
|
||||||
|
"postJob": "Publicar Vaga"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"blog": {
|
||||||
|
"title": "Blog GoHorse Jobs",
|
||||||
|
"subtitle": "Conteúdos sobre carreira, recrutamento, tecnologia e o futuro do trabalho",
|
||||||
|
"searchPlaceholder": "Buscar artigos...",
|
||||||
|
"categories": {
|
||||||
|
"all": "Todos",
|
||||||
|
"recruitment": "Recrutamento",
|
||||||
|
"career": "Carreira",
|
||||||
|
"technology": "Tecnologia",
|
||||||
|
"development": "Desenvolvimento",
|
||||||
|
"culture": "Cultura",
|
||||||
|
"market": "Mercado"
|
||||||
|
},
|
||||||
|
"readMore": "Ler mais",
|
||||||
|
"showing": "Mostrando",
|
||||||
|
"of": "de",
|
||||||
|
"articles": "artigos",
|
||||||
|
"newsletter": {
|
||||||
|
"title": "Quer receber nossos conteúdos em primeira mão?",
|
||||||
|
"subtitle": "Assine nossa newsletter e fique por dentro das novidades do mercado de trabalho",
|
||||||
|
"placeholder": "Seu melhor e-mail",
|
||||||
|
"subscribe": "Assinar Newsletter"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"postJob": {
|
||||||
|
"sidebar": {
|
||||||
|
"title": "Anuncie vagas de emprego de forma rápida e eficiente",
|
||||||
|
"benefit1": "Uma das maiores comunidades de profissionais do mercado",
|
||||||
|
"benefit2": "Plataforma com alta visibilidade e acesso diário",
|
||||||
|
"benefit3": "Grande movimentação de candidaturas todos os dias",
|
||||||
|
"benefit4": "Novos talentos se cadastrando constantemente"
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"title": "Anuncie a sua vaga de emprego GRÁTIS!",
|
||||||
|
"subtitle": "Mais de",
|
||||||
|
"registeredCVs": "50 mil currículos cadastrados",
|
||||||
|
"jobTitle": "Cargo da vaga",
|
||||||
|
"jobTitlePlaceholder": "Ex: Desenvolvedor Full Stack",
|
||||||
|
"companyName": "Nome da Empresa",
|
||||||
|
"companyNamePlaceholder": "Ex: Tech Company Ltda",
|
||||||
|
"cnpj": "CNPJ da Empresa",
|
||||||
|
"cnpjPlaceholder": "00.000.000/0000-00",
|
||||||
|
"employees": "Nº de funcionários da unidade",
|
||||||
|
"employeesPlaceholder": "Ex: 50",
|
||||||
|
"zipCode": "CEP",
|
||||||
|
"zipCodePlaceholder": "00000-000",
|
||||||
|
"firstName": "Nome",
|
||||||
|
"firstNamePlaceholder": "Seu nome",
|
||||||
|
"lastName": "Sobrenome",
|
||||||
|
"lastNamePlaceholder": "Seu sobrenome",
|
||||||
|
"email": "Seu e-mail corporativo",
|
||||||
|
"emailPlaceholder": "seu.email@empresa.com",
|
||||||
|
"phone": "Seu telefone fixo",
|
||||||
|
"phonePlaceholder": "(00) 0000-0000",
|
||||||
|
"mobile": "Seu celular",
|
||||||
|
"mobilePlaceholder": "(00) 00000-0000",
|
||||||
|
"acceptTermsPrefix": "Li e aceito as",
|
||||||
|
"termsLink": "Condições Legais",
|
||||||
|
"acceptTermsAnd": "e a",
|
||||||
|
"privacyLink": "Política de Privacidade",
|
||||||
|
"acceptTermsSuffix": "do GoHorse Jobs.",
|
||||||
|
"acceptMarketing": "Autorizo o GoHorse Jobs a enviar comunicações comerciais sobre produtos, serviços e eventos dos seus parceiros e colaboradores.",
|
||||||
|
"submitButton": "ANUNCIAR VAGA GRÁTIS",
|
||||||
|
"candidateQuestion": "Você é um candidato?",
|
||||||
|
"candidateLink": "Cadastre-se grátis aqui!"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"registerUser": {
|
||||||
|
"title": "Criar Conta de Usuário",
|
||||||
|
"subtitle": "Preencha os dados abaixo para se cadastrar",
|
||||||
|
"hero": {
|
||||||
|
"title": "Comece sua jornada profissional",
|
||||||
|
"subtitle": "Crie sua conta e tenha acesso às melhores oportunidades de emprego em tecnologia.",
|
||||||
|
"profile": "Crie seu perfil profissional completo",
|
||||||
|
"apply": "Candidate-se às melhores empresas",
|
||||||
|
"track": "Acompanhe suas candidaturas em tempo real"
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"name": "Nome Completo",
|
||||||
|
"namePlaceholder": "Seu nome completo",
|
||||||
|
"email": "E-mail",
|
||||||
|
"emailPlaceholder": "seu@email.com",
|
||||||
|
"phone": "Telefone",
|
||||||
|
"phonePlaceholder": "(00) 00000-0000",
|
||||||
|
"password": "Senha",
|
||||||
|
"passwordPlaceholder": "Mínimo 6 caracteres",
|
||||||
|
"confirmPassword": "Confirmar Senha",
|
||||||
|
"confirmPasswordPlaceholder": "Digite a senha novamente",
|
||||||
|
"acceptTerms": "Aceito os termos de uso e a política de privacidade",
|
||||||
|
"submit": "Criar Conta",
|
||||||
|
"submitting": "Criando conta...",
|
||||||
|
"hasAccount": "Já tem uma conta?",
|
||||||
|
"login": "Fazer login",
|
||||||
|
"backHome": "Voltar para o início"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"companies": {
|
||||||
|
"hero": {
|
||||||
|
"title": "Descubra as Melhores Empresas",
|
||||||
|
"subtitle": "Conheça empresas incríveis que estão contratando agora"
|
||||||
|
},
|
||||||
|
"searchPlaceholder": "Buscar empresas por nome ou setor...",
|
||||||
|
"filters": "Filtros",
|
||||||
|
"companiesFound": "empresas encontradas",
|
||||||
|
"featured": "Empresas em Destaque",
|
||||||
|
"allCompanies": "Todas as Empresas",
|
||||||
|
"featuredBadge": "Destaque",
|
||||||
|
"jobs": "vagas",
|
||||||
|
"viewProfile": "Ver perfil",
|
||||||
|
"viewMore": "Ver mais",
|
||||||
|
"noCompanies": "Nenhuma empresa encontrada",
|
||||||
|
"adjustFilters": "Tente ajustar seus filtros de busca"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
BIN
frontend/public/1.png
Normal file
BIN
frontend/public/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
frontend/public/2.png
Normal file
BIN
frontend/public/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
frontend/public/4.png
Normal file
BIN
frontend/public/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
BIN
frontend/public/6.png
Normal file
BIN
frontend/public/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2 MiB |
BIN
frontend/public/optr1.png
Normal file
BIN
frontend/public/optr1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 217 KiB |
BIN
frontend/public/vaga2.png
Normal file
BIN
frontend/public/vaga2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
frontend/public/vagamobile2.png
Normal file
BIN
frontend/public/vagamobile2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
|
|
@ -2,95 +2,253 @@
|
||||||
|
|
||||||
import { Navbar } from "@/components/navbar"
|
import { Navbar } from "@/components/navbar"
|
||||||
import { Footer } from "@/components/footer"
|
import { Footer } from "@/components/footer"
|
||||||
import { Card, CardContent } from "@/components/ui/card"
|
import { Heart, Users, Rocket, Lightbulb, Target, Globe, Handshake, Smile } from "lucide-react"
|
||||||
import { Target, Users, Zap, Shield } from "lucide-react"
|
import Image from "next/image"
|
||||||
import { useTranslation } from "@/lib/i18n"
|
|
||||||
|
|
||||||
export default function AboutPage() {
|
export default function AboutPage() {
|
||||||
const { t } = useTranslation()
|
|
||||||
const values = [
|
const values = [
|
||||||
{
|
{
|
||||||
icon: Target,
|
icon: Heart,
|
||||||
title: t("about.values.items.mission.title"),
|
title: "Paixão",
|
||||||
description: t("about.values.items.mission.description"),
|
description: "Amamos o que fazemos. Trabalhamos, compartilhamos e vivemos a missão do GoHorse Jobs e, por isso, queremos sempre fazer mais e fazer melhor."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Users,
|
icon: Users,
|
||||||
title: t("about.values.items.community.title"),
|
title: "Humildade",
|
||||||
description: t("about.values.items.community.description"),
|
description: "Somos parte de um todo. Por isso, compartilhamos informações, reconhecemos nossos erros e nos conhecemos a fundo para trazer o melhor de nós."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Zap,
|
icon: Rocket,
|
||||||
title: t("about.values.items.efficiency.title"),
|
title: "Autonomia",
|
||||||
description: t("about.values.items.efficiency.description"),
|
description: "Decidimos proativamente onde empregar nosso talento, como executá-lo e nos tornamos capitães das tarefas que priorizamos."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Shield,
|
icon: Lightbulb,
|
||||||
title: t("about.values.items.trust.title"),
|
title: "Criatividade",
|
||||||
description: t("about.values.items.trust.description"),
|
description: "Fazer sempre o mesmo? Não, obrigado. Buscamos alternativas criativas que nos permitam otimizar os resultados. A aprendizagem é contínua."
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
icon: Target,
|
||||||
|
title: "Flexibilidade",
|
||||||
|
description: "Não temos medo da mudança. Por isso, não entramos em crise quando a vivemos: reconhecemos os desafios e os transformamos em oportunidades."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Handshake,
|
||||||
|
title: "Honestidade",
|
||||||
|
description: "Valorizamos a sinceridade, a comunicação direta e o feedback. Há espaço para defender ideias no mesmo lugar onde os outros são ouvidos."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Smile,
|
||||||
|
title: "Respeito",
|
||||||
|
description: "Somos descontraídos, mas sempre nos dirigimos com respeito aos outros: há lugar e momento para tudo."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Globe,
|
||||||
|
title: "Diversidade",
|
||||||
|
description: "Trabalhamos de forma híbrida e itinerante, valorizando a diversidade de culturas, experiências e perspectivas que enriquecem nosso time."
|
||||||
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex flex-col">
|
<div className="min-h-screen flex flex-col bg-white">
|
||||||
<Navbar />
|
<Navbar />
|
||||||
|
|
||||||
<main className="flex-1">
|
<main className="flex-1">
|
||||||
{/* Hero Section */}
|
{/* Hero Section */}
|
||||||
<section className="bg-muted/30 py-16 md:py-24">
|
<section className="relative bg-white py-20 md:py-32 overflow-hidden">
|
||||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="max-w-3xl mx-auto text-center">
|
<div className="max-w-6xl mx-auto">
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-foreground mb-6 text-balance">
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
{t("about.hero.title")}
|
<div>
|
||||||
</h1>
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
|
||||||
<p className="text-lg text-muted-foreground leading-relaxed text-pretty">
|
A evolução do trabalho começa pelas pessoas e sua cultura
|
||||||
{t("about.hero.subtitle")}
|
</h1>
|
||||||
</p>
|
<p className="text-xl text-gray-600 leading-relaxed">
|
||||||
|
Todos os dias contribuímos para transformar a maneira como pensamos o trabalho para que seja coerente com a maneira como queremos viver.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="relative h-96 rounded-2xl overflow-hidden shadow-2xl bg-[#f0932b]">
|
||||||
|
<Image
|
||||||
|
src="/1.png"
|
||||||
|
alt="GoHorse Jobs Team"
|
||||||
|
fill
|
||||||
|
className="object-contain"
|
||||||
|
quality={100}
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* Decorative elements */}
|
||||||
|
<div className="absolute -top-6 -right-6 w-32 h-32 bg-primary/20 rounded-full blur-3xl"></div>
|
||||||
|
<div className="absolute -bottom-6 -left-6 w-40 h-40 bg-orange-200/30 rounded-full blur-3xl"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Story Section */}
|
{/* What We Do Section */}
|
||||||
<section className="py-16 md:py-24">
|
<section className="py-20 md:py-28 bg-white">
|
||||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="max-w-3xl mx-auto">
|
<div className="max-w-6xl mx-auto">
|
||||||
<h2 className="text-3xl font-bold text-foreground mb-6">{t("about.story.title")}</h2>
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||||
<div className="space-y-4 text-muted-foreground leading-relaxed">
|
<div className="order-2 lg:order-1">
|
||||||
<p>{t("about.story.paragraphs.first")}</p>
|
<div className="relative h-96 rounded-2xl overflow-hidden shadow-xl bg-[#f0932b]">
|
||||||
<p>{t("about.story.paragraphs.second")}</p>
|
<Image
|
||||||
<p>{t("about.story.paragraphs.third")}</p>
|
src="/2.png"
|
||||||
|
alt="O que fazemos"
|
||||||
|
fill
|
||||||
|
className="object-contain"
|
||||||
|
quality={100}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="order-1 lg:order-2">
|
||||||
|
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-12">
|
||||||
|
O que fazemos?
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-4 text-lg text-gray-700 leading-relaxed">
|
||||||
|
<p className="font-semibold text-xl">
|
||||||
|
O GoHorse Jobs conecta empresas a talentos qualificados para transformar projetos em resultados reais, unindo expertise, agilidade e inovação em cada contratação.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Nossa plataforma facilita o encontro entre quem busca profissionais preparados e quem deseja oportunidades alinhadas ao seu perfil, objetivos e estilo de trabalho.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Ao mesmo tempo, ajudamos profissionais a evoluírem em suas carreiras, ganharem autonomia, ampliarem seu networking e conquistarem oportunidades que realmente fazem sentido para seu crescimento profissional.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Hybrid Work Section */}
|
||||||
|
<section className="py-20 md:py-28 bg-white">
|
||||||
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="max-w-6xl mx-auto text-center">
|
||||||
|
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||||||
|
Somos híbridos, itinerantes e diversos
|
||||||
|
</h2>
|
||||||
|
<p className="text-2xl text-gray-700 mb-12 max-w-3xl mx-auto">
|
||||||
|
<span className="font-bold text-primary">70% da equipe do GoHorse Jobs</span> trabalha remotamente.{" "}
|
||||||
|
<span className="font-bold">100% de trabalho com autonomia.</span>
|
||||||
|
</p>
|
||||||
|
<div className="grid md:grid-cols-2 gap-8 mt-16">
|
||||||
|
<div className="bg-white p-8 rounded-2xl shadow-lg">
|
||||||
|
<div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<Users className="w-8 h-8 text-primary" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">+ Ágil</h3>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Nossa cultura de trabalho flexível nos permite responder rapidamente às necessidades do mercado e dos nossos usuários.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white p-8 rounded-2xl shadow-lg">
|
||||||
|
<div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<Rocket className="w-8 h-8 text-primary" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">+ Produtiva</h3>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
A autonomia e flexibilidade resultam em uma equipe mais motivada, engajada e produtiva em seus projetos.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Purpose Section */}
|
||||||
|
<section className="py-20 md:py-28 bg-white">
|
||||||
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="max-w-4xl mx-auto text-center">
|
||||||
|
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-8">
|
||||||
|
O propósito que nos une
|
||||||
|
</h2>
|
||||||
|
<p className="text-2xl text-gray-700 leading-relaxed font-medium">
|
||||||
|
Trabalhamos continuamente para transformar o mundo do trabalho promovendo a autonomia, o desenvolvimento de talentos e a igualdade de oportunidades para todos, de onde quer que seja.
|
||||||
|
</p>
|
||||||
|
<div className="mt-12 p-8 bg-white rounded-2xl shadow-xl">
|
||||||
|
<p className="text-xl text-gray-800 italic">
|
||||||
|
"Somos uma organização inovadora que busca potencializar as pessoas no trabalho, impactando positivamente na vida pessoal, familiar e social."
|
||||||
|
</p>
|
||||||
|
<p className="text-lg text-primary font-bold mt-6">
|
||||||
|
Acreditamos que há uma nova forma de trabalhar.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Values Section */}
|
{/* Values Section */}
|
||||||
<section className="py-16 md:py-24 bg-muted/30">
|
<section className="py-20 md:py-28 bg-white">
|
||||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="max-w-5xl mx-auto">
|
<div className="max-w-6xl mx-auto">
|
||||||
<h2 className="text-3xl font-bold text-foreground mb-12 text-center">
|
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 text-center">
|
||||||
{t("about.values.title")}
|
Nossos valores
|
||||||
</h2>
|
</h2>
|
||||||
<div className="grid md:grid-cols-2 gap-6">
|
<p className="text-xl text-gray-600 text-center mb-16 max-w-3xl mx-auto">
|
||||||
|
Os princípios que guiam nosso dia a dia e moldam nossa cultura organizacional
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
{values.map((value, index) => (
|
{values.map((value, index) => (
|
||||||
<Card key={index}>
|
<div
|
||||||
<CardContent className="pt-6">
|
key={index}
|
||||||
<div className="flex items-start gap-4">
|
className="group p-6 rounded-2xl bg-gray-50 hover:bg-primary/5 transition-all duration-300 hover:shadow-lg"
|
||||||
<div className="p-3 rounded-lg bg-primary/10">
|
>
|
||||||
<value.icon className="h-6 w-6 text-primary" />
|
<div className="w-14 h-14 bg-primary/10 group-hover:bg-primary group-hover:scale-110 rounded-xl flex items-center justify-center mb-4 transition-all duration-300">
|
||||||
</div>
|
<value.icon className="w-7 h-7 text-primary group-hover:text-white transition-colors" />
|
||||||
<div className="flex-1">
|
</div>
|
||||||
<h3 className="text-xl font-semibold mb-2">{value.title}</h3>
|
<h3 className="text-xl font-bold text-gray-900 mb-3">
|
||||||
<p className="text-muted-foreground leading-relaxed">{value.description}</p>
|
{value.title}
|
||||||
</div>
|
</h3>
|
||||||
</div>
|
<p className="text-gray-600 leading-relaxed text-sm">
|
||||||
</CardContent>
|
{value.description}
|
||||||
</Card>
|
</p>
|
||||||
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className="relative py-20 md:py-28 bg-[#f0932b] overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src="/4.png"
|
||||||
|
alt="Background"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
quality={100}
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
<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">
|
||||||
|
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||||||
|
Faça parte da transformação do trabalho
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl mb-10 opacity-95">
|
||||||
|
Junte-se a milhares de empresas e profissionais que já confiam no GoHorse Jobs para construir o futuro do trabalho.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
<a
|
||||||
|
href="/jobs"
|
||||||
|
className="inline-block bg-white text-primary hover:bg-gray-100 font-bold px-8 py-4 rounded-full text-lg transition-all shadow-lg hover:shadow-xl"
|
||||||
|
>
|
||||||
|
Encontrar Vagas
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/publicar-vaga"
|
||||||
|
className="inline-block bg-transparent border-2 border-white text-white hover:bg-white/10 font-bold px-8 py-4 rounded-full text-lg transition-all"
|
||||||
|
>
|
||||||
|
Publicar Vaga
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
|
||||||
476
frontend/src/app/blog/[slug]/page.tsx
Normal file
476
frontend/src/app/blog/[slug]/page.tsx
Normal file
|
|
@ -0,0 +1,476 @@
|
||||||
|
"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 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, index) => (
|
||||||
|
<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>
|
||||||
|
)
|
||||||
|
}
|
||||||
398
frontend/src/app/blog/page.tsx
Normal file
398
frontend/src/app/blog/page.tsx
Normal file
|
|
@ -0,0 +1,398 @@
|
||||||
|
"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>
|
||||||
|
)
|
||||||
|
}
|
||||||
389
frontend/src/app/companies/page.tsx
Normal file
389
frontend/src/app/companies/page.tsx
Normal file
|
|
@ -0,0 +1,389 @@
|
||||||
|
"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 bg-[#f0932b] py-20 md:py-28 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">
|
||||||
|
Descubra as Melhores Empresas
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl md:text-2xl mb-8 opacity-95">
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -1,182 +1,206 @@
|
||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import type React from "react"
|
|
||||||
|
|
||||||
import { useState } from "react"
|
import { useState } from "react"
|
||||||
import { Navbar } from "@/components/navbar"
|
import { Navbar } from "@/components/navbar"
|
||||||
import { Footer } from "@/components/footer"
|
import { Footer } from "@/components/footer"
|
||||||
import { Button } from "@/components/ui/button"
|
import { ChevronDown, Mail, Phone, HelpCircle, Briefcase, Users, FileText } from "lucide-react"
|
||||||
import { Input } from "@/components/ui/input"
|
import { motion, AnimatePresence } from "framer-motion"
|
||||||
import { Textarea } from "@/components/ui/textarea"
|
import Image from "next/image"
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
||||||
import { Label } from "@/components/ui/label"
|
|
||||||
import { Mail, MessageSquare, Phone, MapPin } from "lucide-react"
|
|
||||||
import { useTranslation } from "@/lib/i18n"
|
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
|
|
||||||
export default function ContactPage() {
|
const faqItems = [
|
||||||
const [submitted, setSubmitted] = useState(false)
|
{
|
||||||
const { t } = useTranslation()
|
question: "Como faço para criar uma conta no GoHorse Jobs?",
|
||||||
const [ticketId, setTicketId] = useState<string | null>(null)
|
answer: "Para criar uma conta, clique no botão 'Entrar' no canto superior direito e selecione 'Criar conta'. Você pode se registrar como candidato ou empresa, preenchendo as informações necessárias."
|
||||||
|
},
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
{
|
||||||
e.preventDefault()
|
question: "Como publico uma vaga no GoHorse Jobs?",
|
||||||
// Simulate API call
|
answer: "Após criar uma conta de empresa, acesse seu painel e clique em 'Publicar Vaga'. Preencha os detalhes da vaga, incluindo título, descrição, requisitos e benefícios. Após revisar, clique em 'Publicar' para tornar sua vaga visível aos candidatos."
|
||||||
setTimeout(() => {
|
},
|
||||||
const id = `TKT-${Math.floor(Math.random() * 9000) + 1000}`
|
{
|
||||||
setTicketId(id)
|
question: "Posso editar meu currículo depois de criá-lo?",
|
||||||
setSubmitted(true)
|
answer: "Sim! Você pode editar seu currículo a qualquer momento acessando seu perfil. Vá até 'Meu Perfil' e clique em 'Editar Informações'. Todas as alterações serão salvas automaticamente."
|
||||||
}, 1000)
|
},
|
||||||
|
{
|
||||||
|
question: "Como me candidato a uma vaga?",
|
||||||
|
answer: "Para se candidatar, navegue até a página da vaga desejada e clique no botão 'Candidatar-se'. Certifique-se de que seu perfil está completo antes de se candidatar, pois as empresas terão acesso às suas informações."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Como acompanho o status das minhas candidaturas?",
|
||||||
|
answer: "Acesse seu painel de candidato e clique em 'Minhas Candidaturas'. Lá você verá todas as vagas para as quais se candidatou e o status atual de cada uma (em análise, aceita, recusada)."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Quanto custa publicar uma vaga?",
|
||||||
|
answer: "O GoHorse Jobs oferece diferentes planos para empresas. Temos opções gratuitas com recursos básicos e planos premium com mais visibilidade e recursos avançados. Entre em contato conosco para mais informações sobre preços."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Posso salvar vagas para candidatar-me depois?",
|
||||||
|
answer: "Sim! Clique no ícone de coração em qualquer vaga para adicioná-la aos seus favoritos. Você pode acessar suas vagas favoritas no seu painel a qualquer momento."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Como entro em contato com o suporte?",
|
||||||
|
answer: "Você pode entrar em contato conosco através do email hello@gohorsejobs.com ou pelo telefone (11) 9999-9999. Nossa equipe está disponível de segunda a sexta, das 9h às 18h."
|
||||||
}
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function ContactPage() {
|
||||||
|
const [openFaq, setOpenFaq] = useState<number | null>(null)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex flex-col">
|
<div className="min-h-screen flex flex-col bg-gray-50">
|
||||||
<Navbar />
|
<Navbar />
|
||||||
|
|
||||||
<main className="flex-1">
|
<main className="flex-1 py-8 md:py-12">
|
||||||
{/* Hero Section */}
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl">
|
||||||
<section className="bg-muted/30 py-16 md:py-24">
|
{/* Header Section */}
|
||||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="bg-white rounded-2xl shadow-sm p-8 md:p-12 mb-8 text-center">
|
||||||
<div className="max-w-3xl mx-auto text-center">
|
<div className="flex justify-center mb-6">
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-foreground mb-6 text-balance">
|
<div className="w-24 h-24 bg-gradient-to-br from-primary/10 to-primary/5 rounded-full flex items-center justify-center">
|
||||||
{t("contact.hero.title")}
|
<Image
|
||||||
</h1>
|
src="/logohorse.png"
|
||||||
<p className="text-lg text-muted-foreground text-pretty">{t("contact.hero.subtitle")}</p>
|
alt="GoHorse Jobs"
|
||||||
|
width={64}
|
||||||
|
height={64}
|
||||||
|
className="object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||||
|
Entre em contato com GoHorse Jobs
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||||
|
Estamos aqui para ajudar! Encontre respostas para suas perguntas ou entre em contato com nossa equipe.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Contact Section */}
|
<div className="grid lg:grid-cols-3 gap-8">
|
||||||
<section className="py-16 md:py-24">
|
{/* FAQ Section - Main Column */}
|
||||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="lg:col-span-2">
|
||||||
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12">
|
<div className="bg-white rounded-2xl shadow-sm p-6 md:p-8">
|
||||||
{/* Contact Form */}
|
<div className="flex items-center gap-3 mb-6">
|
||||||
<Card>
|
<div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
|
||||||
<CardHeader>
|
<HelpCircle className="w-5 h-5 text-primary" />
|
||||||
<CardTitle>{t("contact.form.title")}</CardTitle>
|
|
||||||
<CardDescription>{t("contact.form.description")}</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{submitted ? (
|
|
||||||
<div className="text-center py-8 space-y-4 animate-in fade-in zoom-in">
|
|
||||||
<div className="mx-auto w-12 h-12 bg-green-100 text-green-600 rounded-full flex items-center justify-center">
|
|
||||||
<MessageSquare className="h-6 w-6" />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-xl font-bold">{t("contact.form.actions.success")}</h3>
|
|
||||||
<p className="text-muted-foreground">
|
|
||||||
{t("contact.form.ticket_label", { defaultValue: "Your Ticket ID:" })}
|
|
||||||
</p>
|
|
||||||
<div className="text-2xl font-mono font-bold text-primary bg-primary/10 py-2 rounded">
|
|
||||||
{ticketId}
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
{t("contact.form.ticket_desc", { defaultValue: "Save this ID for future reference." })}
|
|
||||||
</p>
|
|
||||||
<Button variant="outline" onClick={() => { setSubmitted(false); setTicketId(null); }}>
|
|
||||||
{t("contact.form.send_another", { defaultValue: "Send another message" })}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="name">{t("contact.form.fields.name.label")}</Label>
|
|
||||||
<Input id="name" placeholder={t("contact.form.fields.name.placeholder")} required />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="email">{t("contact.form.fields.email.label")}</Label>
|
|
||||||
<Input id="email" type="email" placeholder={t("contact.form.fields.email.placeholder")} required />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="subject">{t("contact.form.fields.subject.label")}</Label>
|
|
||||||
<Input id="subject" placeholder={t("contact.form.fields.subject.placeholder")} required />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="message">{t("contact.form.fields.message.label")}</Label>
|
|
||||||
<Textarea
|
|
||||||
id="message"
|
|
||||||
placeholder={t("contact.form.fields.message.placeholder")}
|
|
||||||
rows={5}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button type="submit" className="w-full cursor-pointer" disabled={submitted}>
|
|
||||||
{t("contact.form.actions.submit")}
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Contact Info */}
|
|
||||||
<div className="space-y-8">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold mb-6">{t("contact.info.title")}</h2>
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="flex items-start gap-4">
|
|
||||||
<div className="p-3 rounded-lg bg-primary/10">
|
|
||||||
<Mail className="h-5 w-5 text-primary" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold mb-1">{t("contact.info.email.title")}</h3>
|
|
||||||
<p className="text-sm text-muted-foreground">hello@gohorsejobs.com</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-start gap-4">
|
|
||||||
<div className="p-3 rounded-lg bg-primary/10">
|
|
||||||
<Phone className="h-5 w-5 text-primary" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold mb-1">{t("contact.info.phone.title")}</h3>
|
|
||||||
<p className="text-sm text-muted-foreground">(11) 9999-9999</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-start gap-4">
|
|
||||||
<div className="p-3 rounded-lg bg-primary/10">
|
|
||||||
<MapPin className="h-5 w-5 text-primary" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold mb-1">{t("contact.info.address.title")}</h3>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
1000 Paulista Ave
|
|
||||||
<br />
|
|
||||||
São Paulo, SP - 01310-100
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-start gap-4">
|
|
||||||
<div className="p-3 rounded-lg bg-primary/10">
|
|
||||||
<MessageSquare className="h-5 w-5 text-primary" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold mb-1">{t("contact.info.support.title")}</h3>
|
|
||||||
<p className="text-sm text-muted-foreground">{t("contact.info.support.description")}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900">Perguntas Frequentes</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Card className="bg-muted/50">
|
<div className="space-y-3">
|
||||||
<CardContent className="pt-6">
|
{faqItems.map((item, index) => (
|
||||||
<h3 className="font-semibold mb-2">{t("contact.faq.title")}</h3>
|
<div key={index} className="border border-gray-200 rounded-xl overflow-hidden">
|
||||||
<p className="text-sm text-muted-foreground mb-4">{t("contact.faq.description")}</p>
|
<button
|
||||||
<Link href="/faq">
|
onClick={() => setOpenFaq(openFaq === index ? null : index)}
|
||||||
<Button variant="outline" className="w-full cursor-pointer bg-transparent">
|
className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 transition-colors"
|
||||||
{t("contact.faq.button")}
|
>
|
||||||
</Button>
|
<span className="font-medium text-gray-900 pr-4">{item.question}</span>
|
||||||
</Link>
|
<motion.div
|
||||||
</CardContent>
|
animate={{ rotate: openFaq === index ? 180 : 0 }}
|
||||||
</Card>
|
transition={{ duration: 0.2 }}
|
||||||
|
>
|
||||||
|
<ChevronDown className="w-5 h-5 text-gray-500 flex-shrink-0" />
|
||||||
|
</motion.div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<AnimatePresence>
|
||||||
|
{openFaq === index && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ height: 0, opacity: 0 }}
|
||||||
|
animate={{ height: "auto", opacity: 1 }}
|
||||||
|
exit={{ height: 0, opacity: 0 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
className="overflow-hidden"
|
||||||
|
>
|
||||||
|
<div className="px-6 py-4 bg-gray-50 border-t border-gray-200">
|
||||||
|
<p className="text-gray-600 leading-relaxed">{item.answer}</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sidebar - Resources */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Contact Card */}
|
||||||
|
<div className="bg-white rounded-2xl shadow-sm p-6">
|
||||||
|
<h3 className="font-bold text-gray-900 mb-4 flex items-center gap-2">
|
||||||
|
<Mail className="w-5 h-5 text-primary" />
|
||||||
|
Fale Conosco
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500 mb-1">Email</p>
|
||||||
|
<a href="mailto:hello@gohorsejobs.com" className="text-primary hover:underline font-medium">
|
||||||
|
hello@gohorsejobs.com
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500 mb-1">Telefone</p>
|
||||||
|
<a href="tel:+551199999999" className="text-primary hover:underline font-medium">
|
||||||
|
(11) 9999-9999
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500 mb-1">Horário de Atendimento</p>
|
||||||
|
<p className="text-gray-700 text-sm">Seg - Sex: 9h às 18h</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Resources */}
|
||||||
|
<div className="bg-white rounded-2xl shadow-sm p-6">
|
||||||
|
<h3 className="font-bold text-gray-900 mb-4">Recursos Úteis</h3>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Link href="/jobs" className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors group">
|
||||||
|
<div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center group-hover:bg-primary/20 transition-colors">
|
||||||
|
<Briefcase className="w-5 h-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-gray-900">Buscar Vagas</p>
|
||||||
|
<p className="text-xs text-gray-500">Encontre oportunidades</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link href="/register/candidate" className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors group">
|
||||||
|
<div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center group-hover:bg-primary/20 transition-colors">
|
||||||
|
<Users className="w-5 h-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-gray-900">Criar Conta</p>
|
||||||
|
<p className="text-xs text-gray-500">Candidate-se a vagas</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link href="/post-job" className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors group">
|
||||||
|
<div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center group-hover:bg-primary/20 transition-colors">
|
||||||
|
<FileText className="w-5 h-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-gray-900">Publicar Vaga</p>
|
||||||
|
<p className="text-xs text-gray-500">Para empresas</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Help Center CTA */}
|
||||||
|
<div className="bg-gradient-to-br from-primary/10 to-primary/5 rounded-2xl p-6 border border-primary/20">
|
||||||
|
<h3 className="font-bold text-gray-900 mb-2">Precisa de mais ajuda?</h3>
|
||||||
|
<p className="text-sm text-gray-600 mb-4">
|
||||||
|
Nossa equipe de suporte está pronta para ajudar você.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="mailto:hello@gohorsejobs.com"
|
||||||
|
className="inline-block w-full text-center bg-primary hover:bg-primary/90 text-white font-medium px-4 py-2.5 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
Enviar Mensagem
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
|
||||||
|
|
@ -51,7 +51,7 @@
|
||||||
--card-foreground: oklch(0.145 0 0);
|
--card-foreground: oklch(0.145 0 0);
|
||||||
--popover: oklch(1 0 0);
|
--popover: oklch(1 0 0);
|
||||||
--popover-foreground: oklch(0.145 0 0);
|
--popover-foreground: oklch(0.145 0 0);
|
||||||
--primary: oklch(0.68 0.24 35); /* #FF6B2C Orange */
|
--primary: oklch(0.686 0.173 55); /* #f0932b Orange */
|
||||||
--primary-foreground: oklch(1 0 0);
|
--primary-foreground: oklch(1 0 0);
|
||||||
--secondary: oklch(0.97 0 0);
|
--secondary: oklch(0.97 0 0);
|
||||||
--secondary-foreground: oklch(0.205 0 0);
|
--secondary-foreground: oklch(0.205 0 0);
|
||||||
|
|
@ -62,20 +62,20 @@
|
||||||
--destructive: oklch(0.577 0.245 27.325);
|
--destructive: oklch(0.577 0.245 27.325);
|
||||||
--border: oklch(0.922 0 0);
|
--border: oklch(0.922 0 0);
|
||||||
--input: oklch(0.922 0 0);
|
--input: oklch(0.922 0 0);
|
||||||
--ring: oklch(0.68 0.24 35);
|
--ring: oklch(0.686 0.173 55);
|
||||||
--chart-1: oklch(0.68 0.24 35);
|
--chart-1: oklch(0.686 0.173 55);
|
||||||
--chart-2: oklch(0.6 0.118 184.704);
|
--chart-2: oklch(0.6 0.118 184.704);
|
||||||
--chart-3: oklch(0.398 0.07 227.392);
|
--chart-3: oklch(0.398 0.07 227.392);
|
||||||
--chart-4: oklch(0.828 0.189 84.429);
|
--chart-4: oklch(0.828 0.189 84.429);
|
||||||
--chart-5: oklch(0.769 0.188 70.08);
|
--chart-5: oklch(0.769 0.188 70.08);
|
||||||
--sidebar: oklch(0.985 0 0);
|
--sidebar: oklch(0.985 0 0);
|
||||||
--sidebar-foreground: oklch(0.145 0 0);
|
--sidebar-foreground: oklch(0.145 0 0);
|
||||||
--sidebar-primary: oklch(0.68 0.24 35);
|
--sidebar-primary: oklch(0.686 0.173 55);
|
||||||
--sidebar-primary-foreground: oklch(1 0 0);
|
--sidebar-primary-foreground: oklch(1 0 0);
|
||||||
--sidebar-accent: oklch(0.97 0 0);
|
--sidebar-accent: oklch(0.97 0 0);
|
||||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||||
--sidebar-border: oklch(0.922 0 0);
|
--sidebar-border: oklch(0.922 0 0);
|
||||||
--sidebar-ring: oklch(0.68 0.24 35);
|
--sidebar-ring: oklch(0.686 0.173 55);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
|
|
@ -85,7 +85,7 @@
|
||||||
--card-foreground: oklch(0.985 0 0);
|
--card-foreground: oklch(0.985 0 0);
|
||||||
--popover: oklch(0.205 0 0);
|
--popover: oklch(0.205 0 0);
|
||||||
--popover-foreground: oklch(0.985 0 0);
|
--popover-foreground: oklch(0.985 0 0);
|
||||||
--primary: oklch(0.68 0.24 35); /* #FF6B2C Orange */
|
--primary: oklch(0.686 0.173 55); /* #f0932b Orange */
|
||||||
--primary-foreground: oklch(1 0 0);
|
--primary-foreground: oklch(1 0 0);
|
||||||
--secondary: oklch(0.269 0 0);
|
--secondary: oklch(0.269 0 0);
|
||||||
--secondary-foreground: oklch(0.985 0 0);
|
--secondary-foreground: oklch(0.985 0 0);
|
||||||
|
|
@ -96,8 +96,8 @@
|
||||||
--destructive: oklch(0.704 0.191 22.216);
|
--destructive: oklch(0.704 0.191 22.216);
|
||||||
--border: oklch(1 0 0 / 10%);
|
--border: oklch(1 0 0 / 10%);
|
||||||
--input: oklch(1 0 0 / 15%);
|
--input: oklch(1 0 0 / 15%);
|
||||||
--ring: oklch(0.68 0.24 35);
|
--ring: oklch(0.686 0.173 55);
|
||||||
--chart-1: oklch(0.68 0.24 35);
|
--chart-1: oklch(0.686 0.173 55);
|
||||||
--chart-2: oklch(0.696 0.17 162.48);
|
--chart-2: oklch(0.696 0.17 162.48);
|
||||||
--chart-3: oklch(0.769 0.188 70.08);
|
--chart-3: oklch(0.769 0.188 70.08);
|
||||||
--chart-4: oklch(0.627 0.265 303.9);
|
--chart-4: oklch(0.627 0.265 303.9);
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ import { LoadingScreen } from "@/components/ui/loading-spinner"
|
||||||
import { AuthProvider } from "@/contexts/AuthContext"
|
import { AuthProvider } from "@/contexts/AuthContext"
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "GoHorseJobs - Find your next opportunity",
|
title: "GoHorseJobs",
|
||||||
description: "Connecting candidates and companies quickly and directly",
|
description: "Connecting candidates and companies quickly and directly",
|
||||||
generator: "v0.app",
|
generator: "v0.app",
|
||||||
icons: {
|
icons: {
|
||||||
|
|
|
||||||
|
|
@ -112,7 +112,7 @@ export default function LoginPage() {
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-center gap-3 mb-8">
|
<div className="flex items-center justify-center gap-3 mb-8">
|
||||||
<Image
|
<Image
|
||||||
src="/logohorseee.png"
|
src="/logohorse.png"
|
||||||
alt="GoHorseJobs"
|
alt="GoHorseJobs"
|
||||||
width={140}
|
width={140}
|
||||||
height={140}
|
height={140}
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button"
|
||||||
import { Card, CardContent } from "@/components/ui/card"
|
import { Card, CardContent } from "@/components/ui/card"
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||||
import { mockJobs, mockTestimonials } from "@/lib/mock-data"
|
import { mockJobs, mockTestimonials } from "@/lib/mock-data"
|
||||||
import { FileText, CheckCircle, ArrowRight, Building2, Users } from "lucide-react"
|
import { FileText, CheckCircle, ArrowRight, Building2, Users, ChevronLeft, ChevronRight } from "lucide-react"
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
import { motion } from "framer-motion"
|
import { motion } from "framer-motion"
|
||||||
import Image from "next/image"
|
import Image from "next/image"
|
||||||
|
|
@ -22,6 +22,8 @@ export default function HomePage() {
|
||||||
const config = useConfig()
|
const config = useConfig()
|
||||||
const [featuredJobs, setFeaturedJobs] = useState<Job[]>([])
|
const [featuredJobs, setFeaturedJobs] = useState<Job[]>([])
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [featuredIndex, setFeaturedIndex] = useState(0)
|
||||||
|
const [moreJobsIndex, setMoreJobsIndex] = useState(0)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function fetchFeaturedJobs() {
|
async function fetchFeaturedJobs() {
|
||||||
|
|
@ -101,15 +103,27 @@ export default function HomePage() {
|
||||||
|
|
||||||
<main className="flex-1">
|
<main className="flex-1">
|
||||||
{/* Hero Section */}
|
{/* Hero Section */}
|
||||||
<section className="bg-primary text-white relative overflow-hidden flex items-center min-h-[640px]">
|
<section className="bg-primary text-white relative overflow-hidden flex items-center min-h-[640px] mb-12">
|
||||||
<div className="absolute inset-0 z-0">
|
<div className="absolute inset-0 z-0">
|
||||||
|
{/* Desktop */}
|
||||||
<Image
|
<Image
|
||||||
src="/vaga1.png"
|
src="/vaga2.png"
|
||||||
alt="Background"
|
alt="Background"
|
||||||
fill
|
fill
|
||||||
className="object-center"
|
className="hidden md:block object-cover object-center"
|
||||||
quality={100}
|
quality={100}
|
||||||
priority
|
priority
|
||||||
|
sizes="100vw"
|
||||||
|
/>
|
||||||
|
{/* Mobile */}
|
||||||
|
<Image
|
||||||
|
src="/vagamobile2.png"
|
||||||
|
alt="Background"
|
||||||
|
fill
|
||||||
|
className="block md:hidden object-cover object-center"
|
||||||
|
quality={100}
|
||||||
|
priority
|
||||||
|
sizes="100vw"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 w-full relative z-10">
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 w-full relative z-10">
|
||||||
|
|
@ -135,9 +149,10 @@ export default function HomePage() {
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.5, delay: 0.2 }}
|
transition={{ duration: 0.5, delay: 0.2 }}
|
||||||
|
className="flex gap-4"
|
||||||
>
|
>
|
||||||
<Link href="/jobs">
|
<Link href="/jobs">
|
||||||
<Button size="lg" className="bg-white text-primary hover:bg-white/90 font-semibold px-12 py-6 text-base">
|
<Button size="lg" className="bg-white text-primary hover:bg-white/95 hover:shadow-lg font-semibold px-8 py-6 text-base rounded-lg transition-all duration-200">
|
||||||
{t('home.hero.cta')}
|
{t('home.hero.cta')}
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -248,42 +263,85 @@ export default function HomePage() {
|
||||||
{/* Featured Jobs */}
|
{/* Featured Jobs */}
|
||||||
<section className="bg-white py-12">
|
<section className="bg-white py-12">
|
||||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl">
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl">
|
||||||
<div className="mb-8">
|
<div className="flex justify-between items-center mb-8">
|
||||||
<h2 className="text-2xl font-bold text-gray-900">{t('home.featuredJobs.title')}</h2>
|
<h2 className="text-2xl font-bold text-gray-900">{t('home.featuredJobs.title')}</h2>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => setFeaturedIndex(Math.max(0, featuredIndex - 4))}
|
||||||
|
disabled={featuredIndex === 0}
|
||||||
|
className="h-10 w-10"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => {
|
||||||
|
const jobs = featuredJobs.length >= 8 ? featuredJobs.slice(0, 8) : mockJobs.slice(0, 8)
|
||||||
|
setFeaturedIndex(Math.min(jobs.length - 4, featuredIndex + 4))
|
||||||
|
}}
|
||||||
|
disabled={featuredIndex >= ((featuredJobs.length >= 8 ? featuredJobs.slice(0, 8) : mockJobs.slice(0, 8)).length - 4)}
|
||||||
|
className="h-10 w-10"
|
||||||
|
>
|
||||||
|
<ChevronRight className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
{(featuredJobs.length >= 8 ? featuredJobs.slice(0, 8) : mockJobs.slice(0, 8)).map((job, index) => (
|
{(featuredJobs.length >= 8 ? featuredJobs.slice(0, 8) : mockJobs.slice(0, 8))
|
||||||
<motion.div
|
.slice(featuredIndex, featuredIndex + 4)
|
||||||
key={job.id}
|
.map((job, index) => {
|
||||||
initial={{ opacity: 0, y: 20 }}
|
const dates = ['02/06', '05/06', '08/06', '11/06', '14/06', '17/06', '19/06', '20/06'];
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
const randomDate = dates[(featuredIndex + index) % dates.length];
|
||||||
viewport={{ once: true }}
|
return (
|
||||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
<motion.div
|
||||||
>
|
key={job.id}
|
||||||
<Card className="hover:shadow-md transition-shadow border border-gray-200">
|
initial={{ opacity: 0, y: 20 }}
|
||||||
<CardContent className="p-5">
|
animate={{ opacity: 1, y: 0 }}
|
||||||
<div className="bg-[#1a1f2e] rounded-lg p-8 mb-4 min-h-[160px] flex items-center justify-center">
|
transition={{ duration: 0.3 }}
|
||||||
<div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center">
|
>
|
||||||
<Building2 className="w-8 h-8 text-white" />
|
<Card className="hover:shadow-lg transition-shadow border-0 rounded-xl overflow-hidden bg-white">
|
||||||
|
<div className="bg-gradient-to-br from-gray-800 to-gray-900 p-8 flex items-center justify-center rounded-t-xl">
|
||||||
|
<div className="w-16 h-16 bg-white rounded-lg flex items-center justify-center">
|
||||||
|
<Building2 className="w-8 h-8 text-gray-900" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-4">
|
|
||||||
<h3 className="font-semibold text-base mb-1.5">{job.title}</h3>
|
{/* Conteúdo do card */}
|
||||||
<p className="text-xs text-gray-500">{job.company} · {job.location}</p>
|
<div className="p-4">
|
||||||
</div>
|
<h3 className="font-bold text-base mb-3 text-gray-900 line-clamp-2">{job.title}</h3>
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<span className="text-xs text-gray-400 flex items-center gap-1">📅 Ontem</span>
|
{/* Tags */}
|
||||||
</div>
|
<div className="flex flex-wrap gap-2 mb-4">
|
||||||
<Link href={`/jobs/${job.id}`}>
|
<span className="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded-md border border-blue-200">
|
||||||
<Button size="sm" className="w-full bg-primary hover:bg-primary/90 text-white rounded-md">
|
{job.company}
|
||||||
{t('home.featuredJobs.apply')}
|
</span>
|
||||||
</Button>
|
<span className="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded-md border border-blue-200">
|
||||||
</Link>
|
{job.location}
|
||||||
</CardContent>
|
</span>
|
||||||
</Card>
|
</div>
|
||||||
</motion.div>
|
|
||||||
))}
|
{/* Data */}
|
||||||
|
<div className="flex items-center gap-1 mb-4 text-gray-500">
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-xs">{randomDate}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Botão */}
|
||||||
|
<Link href={`/jobs/${job.id}`}>
|
||||||
|
<Button size="sm" className="w-full bg-primary hover:bg-primary/90 text-white rounded-md font-semibold">
|
||||||
|
{t('home.featuredJobs.apply')}
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
)})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -298,49 +356,74 @@ export default function HomePage() {
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
{(featuredJobs.length >= 12 ? featuredJobs.slice(8, 12) : mockJobs.slice(0, 4)).map((job, index) => (
|
{(featuredJobs.length >= 12 ? featuredJobs.slice(8, 12) : mockJobs.slice(0, 4))
|
||||||
<motion.div
|
.map((job, index) => {
|
||||||
key={job.id}
|
const dates = ['03/06', '07/06', '10/06', '13/06', '16/06', '18/06'];
|
||||||
initial={{ opacity: 0, y: 20 }}
|
const randomDate = dates[index % dates.length];
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
return (
|
||||||
viewport={{ once: true }}
|
<motion.div
|
||||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
key={job.id}
|
||||||
>
|
initial={{ opacity: 0, y: 20 }}
|
||||||
<Card className="hover:shadow-md transition-shadow border border-gray-200 bg-white">
|
animate={{ opacity: 1, y: 0 }}
|
||||||
<CardContent className="p-5">
|
transition={{ duration: 0.3 }}
|
||||||
<div className="bg-[#1a1f2e] rounded-lg p-8 mb-4 min-h-[160px] flex items-center justify-center">
|
>
|
||||||
<div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center">
|
<Card className="hover:shadow-md transition-shadow border border-gray-200 bg-white">
|
||||||
<Building2 className="w-8 h-8 text-white" />
|
<CardContent className="p-5">
|
||||||
|
<div className="flex gap-4">
|
||||||
|
{/* Logo da empresa */}
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<Building2 className="w-12 h-12 text-gray-900" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Informações da vaga */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-start justify-between mb-2">
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="font-semibold text-base mb-1 text-gray-900">{job.title}</h3>
|
||||||
|
<p className="text-sm text-gray-600 mb-2">{job.company}</p>
|
||||||
|
<div className="flex flex-wrap gap-2 mb-3">
|
||||||
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||||
|
{job.location}
|
||||||
|
</span>
|
||||||
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
||||||
|
{job.type}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ChevronRight className="w-5 h-5 text-gray-400 flex-shrink-0 ml-2" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-1 text-gray-500">
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-xs">{randomDate}</span>
|
||||||
|
</div>
|
||||||
|
<Link href={`/jobs/${job.id}`}>
|
||||||
|
<Button size="sm" className="bg-primary hover:bg-primary/90 text-white rounded-md">
|
||||||
|
{t('home.featuredJobs.apply')}
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</CardContent>
|
||||||
<div className="mb-4">
|
</Card>
|
||||||
<h3 className="font-semibold text-base mb-1.5">{job.title}</h3>
|
</motion.div>
|
||||||
<p className="text-xs text-gray-500">{job.company} · {job.location}</p>
|
)})}
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<span className="text-xs text-gray-400 flex items-center gap-1">📅 Ontem</span>
|
|
||||||
</div>
|
|
||||||
<Link href={`/jobs/${job.id}`}>
|
|
||||||
<Button size="sm" className="w-full bg-primary hover:bg-primary/90 text-white rounded-md">
|
|
||||||
{t('home.featuredJobs.apply')}
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* CTA Section */}
|
{/* CTA Section */}
|
||||||
<section className="py-12 bg-white">
|
<section className="py-12 bg-white">
|
||||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl">
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-8xl">
|
||||||
<div className="bg-primary rounded-2xl overflow-hidden shadow-lg relative">
|
<div className="bg-primary rounded-2xl overflow-hidden shadow-lg relative">
|
||||||
<div className="absolute inset-0 z-0">
|
<div className="absolute inset-0 z-0">
|
||||||
<Image
|
<Image
|
||||||
src="/optr.png"
|
src="/optr1.png"
|
||||||
alt="Background"
|
alt="Background"
|
||||||
fill
|
fill
|
||||||
className="object-cover object-right"
|
className="object-cover object-right"
|
||||||
|
|
@ -351,11 +434,7 @@ export default function HomePage() {
|
||||||
{/* Text Content */}
|
{/* Text Content */}
|
||||||
<div className="text-white">
|
<div className="text-white">
|
||||||
<div className="flex items-center gap-2 mb-6">
|
<div className="flex items-center gap-2 mb-6">
|
||||||
<svg className="w-6 h-6" viewBox="0 0 24 24" fill="none">
|
<Users className="w-6 h-6" />
|
||||||
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
||||||
<path d="M2 17L12 22L22 17" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
||||||
<path d="M2 12L12 17L22 12" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
<span className="font-medium text-sm">{t('home.cta.badge')}</span>
|
<span className="font-medium text-sm">{t('home.cta.badge')}</span>
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-3xl lg:text-4xl font-bold mb-4 leading-tight">
|
<h2 className="text-3xl lg:text-4xl font-bold mb-4 leading-tight">
|
||||||
|
|
|
||||||
357
frontend/src/app/publicar-vaga/page.tsx
Normal file
357
frontend/src/app/publicar-vaga/page.tsx
Normal file
|
|
@ -0,0 +1,357 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState } from "react"
|
||||||
|
import { Navbar } from "@/components/navbar"
|
||||||
|
import { Footer } from "@/components/footer"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Input } from "@/components/ui/input"
|
||||||
|
import { Textarea } from "@/components/ui/textarea"
|
||||||
|
import { Label } from "@/components/ui/label"
|
||||||
|
import { Check, Briefcase, Users, TrendingUp, Building2 } from "lucide-react"
|
||||||
|
import Image from "next/image"
|
||||||
|
import Link from "next/link"
|
||||||
|
|
||||||
|
export default function PublicarVagaPage() {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
cargoVaga: "",
|
||||||
|
nomeEmpresa: "",
|
||||||
|
cnpj: "",
|
||||||
|
numeroFuncionarios: "",
|
||||||
|
cep: "",
|
||||||
|
nome: "",
|
||||||
|
sobrenome: "",
|
||||||
|
email: "",
|
||||||
|
telefone: "",
|
||||||
|
celular: ""
|
||||||
|
})
|
||||||
|
|
||||||
|
const [acceptTerms, setAcceptTerms] = useState(false)
|
||||||
|
const [acceptMarketing, setAcceptMarketing] = useState(false)
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
console.log("Form submitted:", formData)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleInputChange = (field: string, value: string) => {
|
||||||
|
setFormData(prev => ({ ...prev, [field]: value }))
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col">
|
||||||
|
<Navbar />
|
||||||
|
|
||||||
|
<main className="flex-1 flex">
|
||||||
|
{/* Left Side - Brand Section */}
|
||||||
|
<div className="hidden lg:flex lg:w-2/5 bg-[#f0932b] relative overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src="/6.png"
|
||||||
|
alt="Background"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
quality={100}
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
{/* Background Pattern */}
|
||||||
|
<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.1)_0%,transparent_50%)]"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-10 flex flex-col justify-between p-12 text-white">
|
||||||
|
{/* Top Section */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-4xl md:text-5xl font-bold mb-6 leading-tight">
|
||||||
|
Anuncie vagas de emprego<br />
|
||||||
|
de forma rápida e eficiente
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="space-y-4 mb-8">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="mt-1">
|
||||||
|
<Check className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-semibold">Uma das maiores comunidades de profissionais do mercado</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="mt-1">
|
||||||
|
<Check className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-semibold">Plataforma com alta visibilidade e acesso diário</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="mt-1">
|
||||||
|
<Check className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-semibold">Grande movimentação de candidaturas todos os dias</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="mt-1">
|
||||||
|
<Check className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-semibold">Novos talentos se cadastrando constantemente</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Side - Form Section */}
|
||||||
|
<div className="flex-1 bg-gray-50 overflow-y-auto">
|
||||||
|
<div className="max-w-3xl mx-auto py-12 px-6 md:px-12">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-3">
|
||||||
|
Anuncie a sua vaga de emprego GRÁTIS!
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Mais de <span className="font-semibold text-primary">50 mil currículos cadastrados</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form */}
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-5">
|
||||||
|
{/* Row 1 */}
|
||||||
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="cargoVaga" className="text-gray-700 mb-1.5 block text-sm">
|
||||||
|
Cargo da vaga
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="cargoVaga"
|
||||||
|
placeholder="Ex: Desenvolvedor Full Stack"
|
||||||
|
value={formData.cargoVaga}
|
||||||
|
onChange={(e) => handleInputChange("cargoVaga", e.target.value)}
|
||||||
|
className="h-11 bg-white border-gray-300"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="nomeEmpresa" className="text-gray-700 mb-1.5 block text-sm">
|
||||||
|
Nome da Empresa
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="nomeEmpresa"
|
||||||
|
placeholder="Ex: Tech Company Ltda"
|
||||||
|
value={formData.nomeEmpresa}
|
||||||
|
onChange={(e) => handleInputChange("nomeEmpresa", e.target.value)}
|
||||||
|
className="h-11 bg-white border-gray-300"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Row 2 */}
|
||||||
|
<div className="grid md:grid-cols-3 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="cnpj" className="text-gray-700 mb-1.5 block text-sm">
|
||||||
|
CNPJ da Empresa
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="cnpj"
|
||||||
|
placeholder="00.000.000/0000-00"
|
||||||
|
value={formData.cnpj}
|
||||||
|
onChange={(e) => handleInputChange("cnpj", e.target.value)}
|
||||||
|
className="h-11 bg-white border-gray-300"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="numeroFuncionarios" className="text-gray-700 mb-1.5 block text-sm">
|
||||||
|
Nº de funcionários da unidade
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="numeroFuncionarios"
|
||||||
|
placeholder="Ex: 50"
|
||||||
|
type="number"
|
||||||
|
value={formData.numeroFuncionarios}
|
||||||
|
onChange={(e) => handleInputChange("numeroFuncionarios", e.target.value)}
|
||||||
|
className="h-11 bg-white border-gray-300"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="cep" className="text-gray-700 mb-1.5 block text-sm">
|
||||||
|
CEP
|
||||||
|
</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
id="cep"
|
||||||
|
placeholder="00000-000"
|
||||||
|
value={formData.cep}
|
||||||
|
onChange={(e) => handleInputChange("cep", e.target.value)}
|
||||||
|
className="h-11 bg-white border-gray-300"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="px-4 h-11 bg-gray-200 hover:bg-gray-300 rounded-md transition-colors flex-shrink-0"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Row 3 */}
|
||||||
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="nome" className="text-gray-700 mb-1.5 block text-sm">
|
||||||
|
Nome
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="nome"
|
||||||
|
placeholder="Seu nome"
|
||||||
|
value={formData.nome}
|
||||||
|
onChange={(e) => handleInputChange("nome", e.target.value)}
|
||||||
|
className="h-11 bg-white border-gray-300"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="sobrenome" className="text-gray-700 mb-1.5 block text-sm">
|
||||||
|
Sobrenome
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="sobrenome"
|
||||||
|
placeholder="Seu sobrenome"
|
||||||
|
value={formData.sobrenome}
|
||||||
|
onChange={(e) => handleInputChange("sobrenome", e.target.value)}
|
||||||
|
className="h-11 bg-white border-gray-300"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Row 4 */}
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="email" className="text-gray-700 mb-1.5 block text-sm">
|
||||||
|
Seu e-mail corporativo
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
placeholder="seu.email@empresa.com"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={(e) => handleInputChange("email", e.target.value)}
|
||||||
|
className="h-11 bg-white border-gray-300"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Row 5 */}
|
||||||
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="telefone" className="text-gray-700 mb-1.5 block text-sm">
|
||||||
|
Seu telefone fixo
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="telefone"
|
||||||
|
placeholder="(00) 0000-0000"
|
||||||
|
value={formData.telefone}
|
||||||
|
onChange={(e) => handleInputChange("telefone", e.target.value)}
|
||||||
|
className="h-11 bg-white border-gray-300"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="celular" className="text-gray-700 mb-1.5 block text-sm">
|
||||||
|
Seu celular
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="celular"
|
||||||
|
placeholder="(00) 00000-0000"
|
||||||
|
value={formData.celular}
|
||||||
|
onChange={(e) => handleInputChange("celular", e.target.value)}
|
||||||
|
className="h-11 bg-white border-gray-300"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Checkboxes */}
|
||||||
|
<div className="space-y-3 pt-2">
|
||||||
|
<label className="flex items-start gap-3 cursor-pointer group">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={acceptTerms}
|
||||||
|
onChange={(e) => setAcceptTerms(e.target.checked)}
|
||||||
|
className="mt-1 w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-700 leading-relaxed">
|
||||||
|
Li e aceito as{" "}
|
||||||
|
<Link href="/terms" className="text-primary hover:underline font-medium">
|
||||||
|
Condições Legais
|
||||||
|
</Link>{" "}
|
||||||
|
e a{" "}
|
||||||
|
<Link href="/privacy" className="text-primary hover:underline font-medium">
|
||||||
|
Política de Privacidade
|
||||||
|
</Link>{" "}
|
||||||
|
do GoHorse Jobs.
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label className="flex items-start gap-3 cursor-pointer group">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={acceptMarketing}
|
||||||
|
onChange={(e) => setAcceptMarketing(e.target.checked)}
|
||||||
|
className="mt-1 w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-700 leading-relaxed">
|
||||||
|
Autorizo o GoHorse Jobs a enviar comunicações comerciais sobre produtos, serviços e eventos dos seus parceiros e colaboradores.
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Submit Button */}
|
||||||
|
<div className="pt-4">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full bg-[#f0932b] hover:bg-[#e8871e] text-white font-bold py-4 rounded-full text-lg transition-colors shadow-lg hover:shadow-xl"
|
||||||
|
>
|
||||||
|
ANUNCIAR VAGA GRÁTIS
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom Link */}
|
||||||
|
<div className="text-center pt-4">
|
||||||
|
<p className="text-sm text-gray-600">
|
||||||
|
Você é um candidato?{" "}
|
||||||
|
<Link href="/register/user" className="text-primary hover:underline font-medium">
|
||||||
|
Cadastre-se grátis aqui!
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{/* Footer Note */}
|
||||||
|
<div className="text-center mt-8 pt-6 border-t border-gray-200">
|
||||||
|
<p className="text-xs text-gray-500">
|
||||||
|
© GoHorse Jobs Brasil. Todos os direitos reservados.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
362
frontend/src/app/register/user/page.tsx
Normal file
362
frontend/src/app/register/user/page.tsx
Normal file
|
|
@ -0,0 +1,362 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useMemo, useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import {
|
||||||
|
Briefcase,
|
||||||
|
AlertCircle,
|
||||||
|
Eye,
|
||||||
|
EyeOff,
|
||||||
|
User as UserIcon,
|
||||||
|
Lock,
|
||||||
|
Building2,
|
||||||
|
Mail,
|
||||||
|
Phone,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { useTranslation } from "@/lib/i18n";
|
||||||
|
|
||||||
|
type RegisterFormData = {
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
phone: string;
|
||||||
|
password: string;
|
||||||
|
confirmPassword: string;
|
||||||
|
acceptTerms: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RegisterUserPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
|
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||||
|
|
||||||
|
const registerSchema = useMemo(() => z.object({
|
||||||
|
name: z.string().min(3, "Nome deve ter no mínimo 3 caracteres"),
|
||||||
|
email: z.string().email("E-mail inválido"),
|
||||||
|
phone: z.string().min(10, "Telefone inválido"),
|
||||||
|
password: z.string().min(6, "Senha deve ter no mínimo 6 caracteres"),
|
||||||
|
confirmPassword: z.string().min(6, "Confirmação de senha obrigatória"),
|
||||||
|
acceptTerms: z.boolean().refine((val) => val === true, {
|
||||||
|
message: "Você deve aceitar os termos de uso"
|
||||||
|
}),
|
||||||
|
}).refine((data) => data.password === data.confirmPassword, {
|
||||||
|
message: "As senhas não coincidem",
|
||||||
|
path: ["confirmPassword"],
|
||||||
|
}), []);
|
||||||
|
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors },
|
||||||
|
} = useForm<RegisterFormData>({
|
||||||
|
resolver: zodResolver(registerSchema),
|
||||||
|
defaultValues: {
|
||||||
|
name: "",
|
||||||
|
email: "",
|
||||||
|
phone: "",
|
||||||
|
password: "",
|
||||||
|
confirmPassword: "",
|
||||||
|
acceptTerms: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleRegister = async (data: RegisterFormData) => {
|
||||||
|
setError("");
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Aqui você fará a chamada para a API de registro
|
||||||
|
console.log('🚀 [REGISTER FRONT] Tentando registrar usuário:', data.email);
|
||||||
|
|
||||||
|
// Simulação - substitua pela sua chamada real de API
|
||||||
|
// const response = await registerUser(data);
|
||||||
|
|
||||||
|
// Por enquanto, apenas redireciona
|
||||||
|
setTimeout(() => {
|
||||||
|
router.push("/login");
|
||||||
|
}, 2000);
|
||||||
|
|
||||||
|
} catch (err: any) {
|
||||||
|
console.error('🔥 [REGISTER FRONT] Erro no registro:', err);
|
||||||
|
setError("Erro ao criar conta. Tente novamente.");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = (data: RegisterFormData) => {
|
||||||
|
handleRegister(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col lg:flex-row">
|
||||||
|
{/* Left Side - Branding */}
|
||||||
|
<div className="lg:flex-1 bg-gradient-to-br from-primary to-primary/80 p-8 flex flex-col justify-center items-center text-primary-foreground">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="max-w-md text-center"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-center gap-3 mb-8">
|
||||||
|
<Image
|
||||||
|
src="/logohorse.png"
|
||||||
|
alt="GoHorseJobs"
|
||||||
|
width={140}
|
||||||
|
height={140}
|
||||||
|
className="rounded-lg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-4xl font-bold mb-4">
|
||||||
|
Comece sua jornada profissional
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-lg opacity-90 leading-relaxed">
|
||||||
|
Conecte-se com as melhores oportunidades do mercado. Cadastre-se gratuitamente e encontre a vaga ideal para você!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-8 space-y-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center">
|
||||||
|
<UserIcon className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<span>Crie seu perfil profissional completo</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center">
|
||||||
|
<Building2 className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<span>Candidate-se às melhores vagas do mercado</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center">
|
||||||
|
<Briefcase className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<span>Acompanhe suas candidaturas em tempo real</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Side - Register Form */}
|
||||||
|
<div className="lg:flex-1 flex items-center justify-center p-8 bg-background">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
className="w-full max-w-md space-y-6"
|
||||||
|
>
|
||||||
|
<div className="text-center space-y-2">
|
||||||
|
<h2 className="text-3xl font-bold">Criar Conta de Usuário</h2>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Preencha os dados abaixo para se cadastrar
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card className="border-0 shadow-lg">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||||
|
{error && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
>
|
||||||
|
<Alert variant="destructive">
|
||||||
|
<AlertCircle className="h-4 w-4" />
|
||||||
|
<AlertDescription>{error}</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="name">Nome Completo</Label>
|
||||||
|
<div className="relative">
|
||||||
|
<UserIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
id="name"
|
||||||
|
type="text"
|
||||||
|
placeholder="Seu nome completo"
|
||||||
|
className="pl-10"
|
||||||
|
{...register("name")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{errors.name && (
|
||||||
|
<p className="text-sm text-destructive">
|
||||||
|
{errors.name.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="email">E-mail</Label>
|
||||||
|
<div className="relative">
|
||||||
|
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
placeholder="seu@email.com"
|
||||||
|
className="pl-10"
|
||||||
|
{...register("email")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{errors.email && (
|
||||||
|
<p className="text-sm text-destructive">
|
||||||
|
{errors.email.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="phone">Telefone</Label>
|
||||||
|
<div className="relative">
|
||||||
|
<Phone className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
id="phone"
|
||||||
|
type="tel"
|
||||||
|
placeholder="(00) 00000-0000"
|
||||||
|
className="pl-10"
|
||||||
|
{...register("phone")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{errors.phone && (
|
||||||
|
<p className="text-sm text-destructive">
|
||||||
|
{errors.phone.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="password">Senha</Label>
|
||||||
|
<div className="relative">
|
||||||
|
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
id="password"
|
||||||
|
type={showPassword ? "text" : "password"}
|
||||||
|
placeholder="Mínimo 6 caracteres"
|
||||||
|
className="pl-10 pr-10"
|
||||||
|
{...register("password")}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
|
||||||
|
onClick={() => setShowPassword(!showPassword)}
|
||||||
|
>
|
||||||
|
{showPassword ? (
|
||||||
|
<EyeOff className="h-4 w-4 text-muted-foreground" />
|
||||||
|
) : (
|
||||||
|
<Eye className="h-4 w-4 text-muted-foreground" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{errors.password && (
|
||||||
|
<p className="text-sm text-destructive">
|
||||||
|
{errors.password.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="confirmPassword">Confirmar Senha</Label>
|
||||||
|
<div className="relative">
|
||||||
|
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
id="confirmPassword"
|
||||||
|
type={showConfirmPassword ? "text" : "password"}
|
||||||
|
placeholder="Digite a senha novamente"
|
||||||
|
className="pl-10 pr-10"
|
||||||
|
{...register("confirmPassword")}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
|
||||||
|
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||||
|
>
|
||||||
|
{showConfirmPassword ? (
|
||||||
|
<EyeOff className="h-4 w-4 text-muted-foreground" />
|
||||||
|
) : (
|
||||||
|
<Eye className="h-4 w-4 text-muted-foreground" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{errors.confirmPassword && (
|
||||||
|
<p className="text-sm text-destructive">
|
||||||
|
{errors.confirmPassword.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start space-x-2">
|
||||||
|
<Checkbox id="acceptTerms" {...register("acceptTerms")} className="mt-1" />
|
||||||
|
<Label
|
||||||
|
htmlFor="acceptTerms"
|
||||||
|
className="text-sm font-normal cursor-pointer leading-relaxed"
|
||||||
|
>
|
||||||
|
Aceito os{" "}
|
||||||
|
<Link href="/terms" className="text-primary hover:underline">
|
||||||
|
termos de uso
|
||||||
|
</Link>
|
||||||
|
{" "}e a{" "}
|
||||||
|
<Link href="/privacy" className="text-primary hover:underline">
|
||||||
|
política de privacidade
|
||||||
|
</Link>
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
{errors.acceptTerms && (
|
||||||
|
<p className="text-sm text-destructive">
|
||||||
|
{errors.acceptTerms.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="w-full h-11 cursor-pointer bg-[#f0932b] hover:bg-[#e8871e]"
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? "Criando conta..." : "Criar Conta"}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="mt-6 text-center">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Já tem uma conta?{" "}
|
||||||
|
<Link href="/login" className="text-primary hover:underline font-semibold">
|
||||||
|
Fazer login
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="text-sm text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-2"
|
||||||
|
>
|
||||||
|
Voltar para o início
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -36,7 +36,7 @@ export function Footer() {
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link href="/register/candidate" className="text-sm text-gray-600 hover:text-primary transition-colors">
|
<Link href="/register/user" className="text-sm text-gray-600 hover:text-primary transition-colors">
|
||||||
Criar Conta
|
Criar Conta
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -47,7 +47,7 @@ export function Footer() {
|
||||||
<h3 className="font-bold mb-4 text-gray-900">Para Empresas</h3>
|
<h3 className="font-bold mb-4 text-gray-900">Para Empresas</h3>
|
||||||
<ul className="space-y-3">
|
<ul className="space-y-3">
|
||||||
<li>
|
<li>
|
||||||
<Link href="/post-job" className="text-sm text-gray-600 hover:text-primary transition-colors">
|
<Link href="/publicar-vaga" className="text-sm text-gray-600 hover:text-primary transition-colors">
|
||||||
Publicar Vaga
|
Publicar Vaga
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -87,7 +87,7 @@ export function Footer() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-12 pt-8 border-t border-gray-200 text-center">
|
<div className="mt-12 pt-8 border-t border-gray-200 text-center">
|
||||||
<p className="text-sm text-gray-600">© {currentYear} Ghorse jobs. Todos os direitos reservados.</p>
|
<p className="text-sm text-gray-600">© {currentYear} GoHorse jobs. Todos os direitos reservados.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,13 @@ import Link from "next/link"
|
||||||
import Image from "next/image"
|
import Image from "next/image"
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button"
|
||||||
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
||||||
import { Menu, User, LogIn } from "lucide-react"
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu"
|
||||||
|
import { Menu, User, LogIn, Building2, UserPlus } from "lucide-react"
|
||||||
import { getCurrentUser } from "@/lib/auth"
|
import { getCurrentUser } from "@/lib/auth"
|
||||||
import { useTranslation } from "@/lib/i18n"
|
import { useTranslation } from "@/lib/i18n"
|
||||||
import { LanguageSwitcher } from "@/components/language-switcher"
|
import { LanguageSwitcher } from "@/components/language-switcher"
|
||||||
|
|
@ -27,8 +33,8 @@ export function Navbar() {
|
||||||
<div className="flex h-16 items-center justify-between">
|
<div className="flex h-16 items-center justify-between">
|
||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
<Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
|
<Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
|
||||||
<Image src="/logohorse1.png" alt="GoHorse Jobs" width={48} height={48} />
|
<Image src="/logohorse.png" alt="GoHorse Jobs" width={48} height={48} />
|
||||||
<span className="text-lg font-normal text-[#FF6200]">Gohorse <span className="font-semibold">Jobs</span></span>
|
<span className="text-lg font-bold text-black">GoHorse Jobs</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
{/* Desktop Navigation - moved to right side */}
|
{/* Desktop Navigation - moved to right side */}
|
||||||
|
|
@ -61,11 +67,27 @@ export function Navbar() {
|
||||||
{t('footer.login')}
|
{t('footer.login')}
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="/register">
|
<DropdownMenu>
|
||||||
<Button variant="ghost" size="icon" className="text-primary">
|
<DropdownMenuTrigger asChild>
|
||||||
<Menu className="w-5 h-5" />
|
<Button variant="ghost" size="icon" className="text-primary">
|
||||||
</Button>
|
<Menu className="w-5 h-5" />
|
||||||
</Link>
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end" className="w-56">
|
||||||
|
<DropdownMenuItem asChild>
|
||||||
|
<Link href="/register/user" className="flex items-center gap-2 cursor-pointer">
|
||||||
|
<UserPlus className="w-4 h-4" />
|
||||||
|
<span>Cadastrar Usuário</span>
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem asChild>
|
||||||
|
<Link href="/register" className="flex items-center gap-2 cursor-pointer">
|
||||||
|
<Building2 className="w-4 h-4" />
|
||||||
|
<span>Cadastrar Empresa</span>
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -80,7 +102,7 @@ export function Navbar() {
|
||||||
<SheetContent side="right" className="w-80">
|
<SheetContent side="right" className="w-80">
|
||||||
<div className="flex flex-col gap-4 mt-6">
|
<div className="flex flex-col gap-4 mt-6">
|
||||||
<div className="flex items-center gap-2 pb-4 border-b justify-center">
|
<div className="flex items-center gap-2 pb-4 border-b justify-center">
|
||||||
<Image src="/logohorse1.png" alt="GoHorse Jobs" width={48} height={48} />
|
<Image src="/logohorse.png" alt="GoHorse Jobs" width={48} height={48} />
|
||||||
<span className="text-lg font-bold">GoHorse Jobs</span>
|
<span className="text-lg font-bold">GoHorse Jobs</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue