260 lines
10 KiB
TypeScript
260 lines
10 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"
|
|
import { useTranslation } from "@/lib/i18n"
|
|
|
|
export default function AboutPage() {
|
|
const { t } = useTranslation()
|
|
|
|
const values = [
|
|
{
|
|
icon: Heart,
|
|
title: t('about.values.passion.title'),
|
|
description: t('about.values.passion.description')
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: t('about.values.humility.title'),
|
|
description: t('about.values.humility.description')
|
|
},
|
|
{
|
|
icon: Rocket,
|
|
title: t('about.values.autonomy.title'),
|
|
description: t('about.values.autonomy.description')
|
|
},
|
|
{
|
|
icon: Lightbulb,
|
|
title: t('about.values.creativity.title'),
|
|
description: t('about.values.creativity.description')
|
|
},
|
|
{
|
|
icon: Target,
|
|
title: t('about.values.flexibility.title'),
|
|
description: t('about.values.flexibility.description')
|
|
},
|
|
{
|
|
icon: Handshake,
|
|
title: t('about.values.honesty.title'),
|
|
description: t('about.values.honesty.description')
|
|
},
|
|
{
|
|
icon: Smile,
|
|
title: t('about.values.respect.title'),
|
|
description: t('about.values.respect.description')
|
|
},
|
|
{
|
|
icon: Globe,
|
|
title: t('about.values.diversity.title'),
|
|
description: t('about.values.diversity.description')
|
|
}
|
|
]
|
|
|
|
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">
|
|
{t('about.hero.title')}
|
|
</h1>
|
|
<p className="text-xl text-gray-600 leading-relaxed">
|
|
{t('about.hero.subtitle')}
|
|
</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">
|
|
{t('about.whatWeDo.title')}
|
|
</h2>
|
|
<div className="space-y-4 text-lg text-gray-700 leading-relaxed">
|
|
<p className="font-semibold text-xl">
|
|
{t('about.whatWeDo.paragraph1')}
|
|
</p>
|
|
<p>
|
|
{t('about.whatWeDo.paragraph2')}
|
|
</p>
|
|
<p>
|
|
{t('about.whatWeDo.paragraph3')}
|
|
</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">
|
|
{t('about.hybrid.title')}
|
|
</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">{t('about.hybrid.agile.title')}</h3>
|
|
<p className="text-gray-600">
|
|
{t('about.hybrid.agile.description')}
|
|
</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">{t('about.hybrid.productive.title')}</h3>
|
|
<p className="text-gray-600">
|
|
{t('about.hybrid.productive.description')}
|
|
</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">
|
|
{t('about.purpose.title')}
|
|
</h2>
|
|
<p className="text-2xl text-gray-700 leading-relaxed font-medium">
|
|
{t('about.purpose.description')}
|
|
</p>
|
|
<div className="mt-12 p-8 bg-white rounded-2xl shadow-xl">
|
|
<p className="text-xl text-gray-800 italic">
|
|
"{t('about.purpose.quote')}"
|
|
</p>
|
|
<p className="text-lg text-primary font-bold mt-6">
|
|
{t('about.purpose.belief')}
|
|
</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">
|
|
{t('about.values.title')}
|
|
</h2>
|
|
<p className="text-xl text-gray-600 text-center mb-16 max-w-3xl mx-auto">
|
|
{t('about.values.subtitle')}
|
|
</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">
|
|
{t('about.cta.title')}
|
|
</h2>
|
|
<p className="text-xl mb-10 opacity-95">
|
|
{t('about.cta.subtitle')}
|
|
</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"
|
|
>
|
|
{t('about.cta.findJobs')}
|
|
</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"
|
|
>
|
|
{t('about.cta.postJob')}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|