gohorsejobs/frontend/src/app/about/page.tsx
2026-01-21 12:33:57 -03:00

257 lines
12 KiB
TypeScript

"use client"
import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { Heart, Users, Rocket, Lightbulb, Target, Globe, Handshake, Smile } from "lucide-react"
import Image from "next/image"
export default function AboutPage() {
const values = [
{
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: "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: Rocket,
title: "Autonomia",
description: "Decidimos proativamente onde empregar nosso talento, como executá-lo e nos tornamos capitães das tarefas que priorizamos."
},
{
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 bg-white">
<Navbar />
<main className="flex-1">
{/* Hero Section */}
<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-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>
{/* 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-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 uma nova forma de trabalhar.
</p>
</div>
</div>
</div>
</section>
{/* Values 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">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 text-center">
Nossos valores
</h2>
<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) => (
<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 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 />
</div>
)
}