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": {
|
||||
"rights": "All rights reserved.",
|
||||
"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": {
|
||||
"rights": "Todos os direitos reservados.",
|
||||
"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 { Footer } from "@/components/footer"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Target, Users, Zap, Shield } from "lucide-react"
|
||||
import { useTranslation } from "@/lib/i18n"
|
||||
import { Heart, Users, Rocket, Lightbulb, Target, Globe, Handshake, Smile } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
|
||||
export default function AboutPage() {
|
||||
const { t } = useTranslation()
|
||||
const values = [
|
||||
{
|
||||
icon: Target,
|
||||
title: t("about.values.items.mission.title"),
|
||||
description: t("about.values.items.mission.description"),
|
||||
icon: Heart,
|
||||
title: "Paixão",
|
||||
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,
|
||||
title: t("about.values.items.community.title"),
|
||||
description: t("about.values.items.community.description"),
|
||||
title: "Humildade",
|
||||
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,
|
||||
title: t("about.values.items.efficiency.title"),
|
||||
description: t("about.values.items.efficiency.description"),
|
||||
icon: Rocket,
|
||||
title: "Autonomia",
|
||||
description: "Decidimos proativamente onde empregar nosso talento, como executá-lo e nos tornamos capitães das tarefas que priorizamos."
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: t("about.values.items.trust.title"),
|
||||
description: t("about.values.items.trust.description"),
|
||||
icon: Lightbulb,
|
||||
title: "Criatividade",
|
||||
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 (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<div className="min-h-screen flex flex-col bg-white">
|
||||
<Navbar />
|
||||
|
||||
<main className="flex-1">
|
||||
{/* 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="max-w-3xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-foreground mb-6 text-balance">
|
||||
{t("about.hero.title")}
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground leading-relaxed text-pretty">
|
||||
{t("about.hero.subtitle")}
|
||||
</p>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
|
||||
A evolução do trabalho começa pelas pessoas e sua cultura
|
||||
</h1>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* Story Section */}
|
||||
<section className="py-16 md:py-24">
|
||||
{/* What We Do 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-3xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-foreground mb-6">{t("about.story.title")}</h2>
|
||||
<div className="space-y-4 text-muted-foreground leading-relaxed">
|
||||
<p>{t("about.story.paragraphs.first")}</p>
|
||||
<p>{t("about.story.paragraphs.second")}</p>
|
||||
<p>{t("about.story.paragraphs.third")}</p>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="order-2 lg:order-1">
|
||||
<div className="relative h-96 rounded-2xl overflow-hidden shadow-xl bg-[#f0932b]">
|
||||
<Image
|
||||
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>
|
||||
</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="max-w-5xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-foreground mb-12 text-center">
|
||||
{t("about.values.title")}
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 text-center">
|
||||
Nossos valores
|
||||
</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) => (
|
||||
<Card key={index}>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 rounded-lg bg-primary/10">
|
||||
<value.icon className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold mb-2">{value.title}</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">{value.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div
|
||||
key={index}
|
||||
className="group p-6 rounded-2xl bg-gray-50 hover:bg-primary/5 transition-all duration-300 hover:shadow-lg"
|
||||
>
|
||||
<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">
|
||||
<value.icon className="w-7 h-7 text-primary group-hover:text-white transition-colors" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-3">
|
||||
{value.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed text-sm">
|
||||
{value.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<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"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
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 { 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 { ChevronDown, Mail, Phone, HelpCircle, Briefcase, Users, FileText } from "lucide-react"
|
||||
import { motion, AnimatePresence } from "framer-motion"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
|
||||
export default function ContactPage() {
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
const { t } = useTranslation()
|
||||
const [ticketId, setTicketId] = useState<string | null>(null)
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
// Simulate API call
|
||||
setTimeout(() => {
|
||||
const id = `TKT-${Math.floor(Math.random() * 9000) + 1000}`
|
||||
setTicketId(id)
|
||||
setSubmitted(true)
|
||||
}, 1000)
|
||||
const faqItems = [
|
||||
{
|
||||
question: "Como faço para criar uma conta no GoHorse Jobs?",
|
||||
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."
|
||||
},
|
||||
{
|
||||
question: "Como publico uma vaga no GoHorse Jobs?",
|
||||
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."
|
||||
},
|
||||
{
|
||||
question: "Posso editar meu currículo depois de criá-lo?",
|
||||
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."
|
||||
},
|
||||
{
|
||||
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 (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<div className="min-h-screen flex flex-col bg-gray-50">
|
||||
<Navbar />
|
||||
|
||||
<main className="flex-1">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-muted/30 py-16 md:py-24">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-foreground mb-6 text-balance">
|
||||
{t("contact.hero.title")}
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground text-pretty">{t("contact.hero.subtitle")}</p>
|
||||
<main className="flex-1 py-8 md:py-12">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl">
|
||||
{/* Header Section */}
|
||||
<div className="bg-white rounded-2xl shadow-sm p-8 md:p-12 mb-8 text-center">
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="w-24 h-24 bg-gradient-to-br from-primary/10 to-primary/5 rounded-full flex items-center justify-center">
|
||||
<Image
|
||||
src="/logohorse.png"
|
||||
alt="GoHorse Jobs"
|
||||
width={64}
|
||||
height={64}
|
||||
className="object-contain"
|
||||
/>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
{/* Contact Section */}
|
||||
<section className="py-16 md:py-24">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12">
|
||||
{/* Contact Form */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<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 className="grid lg:grid-cols-3 gap-8">
|
||||
{/* FAQ Section - Main Column */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="bg-white rounded-2xl shadow-sm p-6 md:p-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
|
||||
<HelpCircle className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">Perguntas Frequentes</h2>
|
||||
</div>
|
||||
|
||||
<Card className="bg-muted/50">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-semibold mb-2">{t("contact.faq.title")}</h3>
|
||||
<p className="text-sm text-muted-foreground mb-4">{t("contact.faq.description")}</p>
|
||||
<Link href="/faq">
|
||||
<Button variant="outline" className="w-full cursor-pointer bg-transparent">
|
||||
{t("contact.faq.button")}
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="space-y-3">
|
||||
{faqItems.map((item, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button
|
||||
onClick={() => setOpenFaq(openFaq === index ? null : index)}
|
||||
className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<span className="font-medium text-gray-900 pr-4">{item.question}</span>
|
||||
<motion.div
|
||||
animate={{ rotate: openFaq === index ? 180 : 0 }}
|
||||
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>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 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);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
|
|
@ -62,20 +62,20 @@
|
|||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.68 0.24 35);
|
||||
--chart-1: oklch(0.68 0.24 35);
|
||||
--ring: oklch(0.686 0.173 55);
|
||||
--chart-1: oklch(0.686 0.173 55);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 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-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 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 {
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 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);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
|
|
@ -96,8 +96,8 @@
|
|||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.68 0.24 35);
|
||||
--chart-1: oklch(0.68 0.24 35);
|
||||
--ring: oklch(0.686 0.173 55);
|
||||
--chart-1: oklch(0.686 0.173 55);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--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"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "GoHorseJobs - Find your next opportunity",
|
||||
title: "GoHorseJobs",
|
||||
description: "Connecting candidates and companies quickly and directly",
|
||||
generator: "v0.app",
|
||||
icons: {
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ export default function LoginPage() {
|
|||
>
|
||||
<div className="flex items-center justify-center gap-3 mb-8">
|
||||
<Image
|
||||
src="/logohorseee.png"
|
||||
src="/logohorse.png"
|
||||
alt="GoHorseJobs"
|
||||
width={140}
|
||||
height={140}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button"
|
|||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
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 { motion } from "framer-motion"
|
||||
import Image from "next/image"
|
||||
|
|
@ -22,6 +22,8 @@ export default function HomePage() {
|
|||
const config = useConfig()
|
||||
const [featuredJobs, setFeaturedJobs] = useState<Job[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [featuredIndex, setFeaturedIndex] = useState(0)
|
||||
const [moreJobsIndex, setMoreJobsIndex] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchFeaturedJobs() {
|
||||
|
|
@ -101,15 +103,27 @@ export default function HomePage() {
|
|||
|
||||
<main className="flex-1">
|
||||
{/* 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">
|
||||
{/* Desktop */}
|
||||
<Image
|
||||
src="/vaga1.png"
|
||||
src="/vaga2.png"
|
||||
alt="Background"
|
||||
fill
|
||||
className="object-center"
|
||||
className="hidden md:block object-cover object-center"
|
||||
quality={100}
|
||||
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 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 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="flex gap-4"
|
||||
>
|
||||
<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')}
|
||||
</Button>
|
||||
</Link>
|
||||
|
|
@ -248,42 +263,85 @@ export default function HomePage() {
|
|||
{/* Featured Jobs */}
|
||||
<section className="bg-white py-12">
|
||||
<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>
|
||||
<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 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) => (
|
||||
<motion.div
|
||||
key={job.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
>
|
||||
<Card className="hover:shadow-md transition-shadow border border-gray-200">
|
||||
<CardContent className="p-5">
|
||||
<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">
|
||||
<Building2 className="w-8 h-8 text-white" />
|
||||
{(featuredJobs.length >= 8 ? featuredJobs.slice(0, 8) : mockJobs.slice(0, 8))
|
||||
.slice(featuredIndex, featuredIndex + 4)
|
||||
.map((job, index) => {
|
||||
const dates = ['02/06', '05/06', '08/06', '11/06', '14/06', '17/06', '19/06', '20/06'];
|
||||
const randomDate = dates[(featuredIndex + index) % dates.length];
|
||||
return (
|
||||
<motion.div
|
||||
key={job.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<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 className="mb-4">
|
||||
<h3 className="font-semibold text-base mb-1.5">{job.title}</h3>
|
||||
<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>
|
||||
))}
|
||||
|
||||
{/* Conteúdo do card */}
|
||||
<div className="p-4">
|
||||
<h3 className="font-bold text-base mb-3 text-gray-900 line-clamp-2">{job.title}</h3>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
<span className="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded-md border border-blue-200">
|
||||
{job.company}
|
||||
</span>
|
||||
<span className="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded-md border border-blue-200">
|
||||
{job.location}
|
||||
</span>
|
||||
</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>
|
||||
</section>
|
||||
|
|
@ -298,49 +356,74 @@ export default function HomePage() {
|
|||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{(featuredJobs.length >= 12 ? featuredJobs.slice(8, 12) : mockJobs.slice(0, 4)).map((job, index) => (
|
||||
<motion.div
|
||||
key={job.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
>
|
||||
<Card className="hover:shadow-md transition-shadow border border-gray-200 bg-white">
|
||||
<CardContent className="p-5">
|
||||
<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">
|
||||
<Building2 className="w-8 h-8 text-white" />
|
||||
<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) => {
|
||||
const dates = ['03/06', '07/06', '10/06', '13/06', '16/06', '18/06'];
|
||||
const randomDate = dates[index % dates.length];
|
||||
return (
|
||||
<motion.div
|
||||
key={job.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<Card className="hover:shadow-md transition-shadow border border-gray-200 bg-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 className="mb-4">
|
||||
<h3 className="font-semibold text-base mb-1.5">{job.title}</h3>
|
||||
<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>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
)})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<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="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/optr.png"
|
||||
src="/optr1.png"
|
||||
alt="Background"
|
||||
fill
|
||||
className="object-cover object-right"
|
||||
|
|
@ -351,11 +434,7 @@ export default function HomePage() {
|
|||
{/* Text Content */}
|
||||
<div className="text-white">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<svg className="w-6 h-6" viewBox="0 0 24 24" fill="none">
|
||||
<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>
|
||||
<Users className="w-6 h-6" />
|
||||
<span className="font-medium text-sm">{t('home.cta.badge')}</span>
|
||||
</div>
|
||||
<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>
|
||||
</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
|
||||
</Link>
|
||||
</li>
|
||||
|
|
@ -47,7 +47,7 @@ export function Footer() {
|
|||
<h3 className="font-bold mb-4 text-gray-900">Para Empresas</h3>
|
||||
<ul className="space-y-3">
|
||||
<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
|
||||
</Link>
|
||||
</li>
|
||||
|
|
@ -87,7 +87,7 @@ export function Footer() {
|
|||
</div>
|
||||
|
||||
<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>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,13 @@ import Link from "next/link"
|
|||
import Image from "next/image"
|
||||
import { Button } from "@/components/ui/button"
|
||||
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 { useTranslation } from "@/lib/i18n"
|
||||
import { LanguageSwitcher } from "@/components/language-switcher"
|
||||
|
|
@ -27,8 +33,8 @@ export function Navbar() {
|
|||
<div className="flex h-16 items-center justify-between">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
|
||||
<Image src="/logohorse1.png" alt="GoHorse Jobs" width={48} height={48} />
|
||||
<span className="text-lg font-normal text-[#FF6200]">Gohorse <span className="font-semibold">Jobs</span></span>
|
||||
<Image src="/logohorse.png" alt="GoHorse Jobs" width={48} height={48} />
|
||||
<span className="text-lg font-bold text-black">GoHorse Jobs</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation - moved to right side */}
|
||||
|
|
@ -61,11 +67,27 @@ export function Navbar() {
|
|||
{t('footer.login')}
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/register">
|
||||
<Button variant="ghost" size="icon" className="text-primary">
|
||||
<Menu className="w-5 h-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="text-primary">
|
||||
<Menu className="w-5 h-5" />
|
||||
</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>
|
||||
|
|
@ -80,7 +102,7 @@ export function Navbar() {
|
|||
<SheetContent side="right" className="w-80">
|
||||
<div className="flex flex-col gap-4 mt-6">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue