Update infrastructure and frontend configuration
This commit is contained in:
GoHorse Deploy
parent
2649e48a8b
commit
1569deb1ce
13 changed files with 764 additions and 772 deletions
|
|
@ -1,19 +1,16 @@
|
|||
services:
|
||||
frontend:
|
||||
image: node:20-alpine
|
||||
working_dir: /app
|
||||
volumes:
|
||||
- ./frontend:/app
|
||||
command: sh -c "npm install && npm run dev -- -p 3000"
|
||||
ports:
|
||||
- "3005:3000"
|
||||
environment:
|
||||
- NEXT_PUBLIC_API_URL=http://gohorse-backend.dokku.rede5.com.br
|
||||
- HOST=0.0.0.0
|
||||
- HOSTNAME=0.0.0.0
|
||||
labels:
|
||||
- "traefik.enable=true"
|
||||
- "traefik.http.routers.gohorse-frontend.rule=Host(`dev.gohorsejobs.com`)"
|
||||
- "traefik.http.services.gohorse-frontend.loadbalancer.server.port=3000"
|
||||
- "traefik.http.routers.gohorse-frontend.entrypoints=web"
|
||||
restart: always
|
||||
services:
|
||||
frontend:
|
||||
image: node:20-alpine
|
||||
working_dir: /app
|
||||
volumes:
|
||||
- ./frontend:/app
|
||||
command: sh -c "npm install && npm run dev -- -p 3000"
|
||||
ports:
|
||||
- "3000:3000"
|
||||
environment:
|
||||
- NEXT_PUBLIC_API_URL=https://api-local.gohorsejobs.com
|
||||
- API_URL=https://api-local.gohorsejobs.com
|
||||
- BACKOFFICE_URL=https://b-local.gohorsejobs.com
|
||||
- SEEDER_API_URL=https://s-local.gohorsejobs.com
|
||||
- HOST=0.0.0.0
|
||||
restart: always
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ FROM base AS deps
|
|||
WORKDIR /app
|
||||
COPY package.json package-lock.json ./
|
||||
# Install dependencies using npm
|
||||
RUN npm ci
|
||||
RUN npm install
|
||||
|
||||
# Stage 3: Builder
|
||||
FROM base AS builder
|
||||
|
|
|
|||
|
|
@ -1,23 +1,25 @@
|
|||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
// Use standalone output for Docker (smaller image)
|
||||
output: "standalone",
|
||||
|
||||
// Performance optimizations
|
||||
poweredByHeader: false, // Remove X-Powered-By header (security)
|
||||
compress: true, // Enable gzip compression
|
||||
|
||||
// Optional: Configure allowed image domains
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "**",
|
||||
},
|
||||
],
|
||||
qualities: [25, 50, 75, 80, 90, 100],
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
output: "standalone",
|
||||
|
||||
// Performance optimizations
|
||||
poweredByHeader: false,
|
||||
compress: true,
|
||||
|
||||
// Allow dev server behind proxy
|
||||
allowedDevOrigins: ["https://dev.gohorsejobs.com"],
|
||||
|
||||
// Optional: Configure allowed image domains
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "**",
|
||||
},
|
||||
],
|
||||
qualities: [25, 50, 75, 80, 90, 100],
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ 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"
|
||||
import { useTranslation } from "@/lib/i18n"
|
||||
|
||||
interface Company {
|
||||
id: number
|
||||
|
|
@ -22,6 +23,7 @@ interface Company {
|
|||
}
|
||||
|
||||
export default function CompaniesPage() {
|
||||
const { t } = useTranslation()
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [selectedIndustry, setSelectedIndustry] = useState("Todas")
|
||||
const [selectedSize, setSelectedSize] = useState("Todos")
|
||||
|
|
@ -158,7 +160,7 @@ export default function CompaniesPage() {
|
|||
company.description.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
const matchesIndustry = selectedIndustry === "Todas" || company.industry === selectedIndustry
|
||||
const matchesSize = selectedSize === "Todos" || company.employees === selectedSize
|
||||
|
||||
|
||||
return matchesSearch && matchesIndustry && matchesSize
|
||||
})
|
||||
|
||||
|
|
@ -171,7 +173,6 @@ export default function CompaniesPage() {
|
|||
<main className="flex-1">
|
||||
{/* Hero Section */}
|
||||
<section className="relative py-20 md:py-28 overflow-hidden">
|
||||
{/* Imagem de fundo empresas.jpg sem overlay laranja */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/empresas.jpg"
|
||||
|
|
@ -182,33 +183,30 @@ export default function CompaniesPage() {
|
|||
priority
|
||||
/>
|
||||
</div>
|
||||
{/* Overlay preto com opacidade 20% */}
|
||||
<div className="absolute inset-0 z-10 bg-black opacity-20"></div>
|
||||
<div className="absolute inset-0 opacity-10 z-20">
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.2)_0%,transparent_50%)]"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center text-white">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 drop-shadow-[0_2px_8px_rgba(0,0,0,0.9)]">
|
||||
Descubra as Melhores Empresas
|
||||
{t("companiesPage.hero.title")}
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl mb-8 opacity-95 drop-shadow-[0_2px_8px_rgba(0,0,0,0.9)]">
|
||||
Conheça empresas incríveis que estão contratando agora
|
||||
{t("companiesPage.hero.subtitle")}
|
||||
</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..."
|
||||
placeholder={t("companiesPage.hero.searchPlaceholder")}
|
||||
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>
|
||||
|
|
@ -221,9 +219,9 @@ export default function CompaniesPage() {
|
|||
<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>
|
||||
<span className="font-semibold">{t("companiesPage.filters.label")}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<select
|
||||
value={selectedIndustry}
|
||||
onChange={(e) => setSelectedIndustry(e.target.value)}
|
||||
|
|
@ -245,7 +243,7 @@ export default function CompaniesPage() {
|
|||
</select>
|
||||
|
||||
<div className="ml-auto text-sm text-gray-600">
|
||||
<span className="font-semibold text-[#F0932B]">{filteredCompanies.length}</span> empresas encontradas
|
||||
<span className="font-semibold text-[#F0932B]">{filteredCompanies.length}</span> {t("companiesPage.filters.companiesFound")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -257,7 +255,7 @@ export default function CompaniesPage() {
|
|||
<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>
|
||||
<h2 className="text-3xl font-bold text-gray-900">{t("companiesPage.featured.title")}</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
|
|
@ -307,13 +305,13 @@ export default function CompaniesPage() {
|
|||
<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>
|
||||
<span>{company.openJobs} {t("companiesPage.featured.openJobs")}</span>
|
||||
</div>
|
||||
<Link
|
||||
href={`/companies/${company.id}`}
|
||||
className="text-[#F0932B] hover:underline font-semibold"
|
||||
>
|
||||
Ver perfil →
|
||||
{t("companiesPage.featured.viewProfile")} →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -326,7 +324,7 @@ export default function CompaniesPage() {
|
|||
{/* 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>
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-8">{t("companiesPage.all.title")}</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredCompanies.map((company) => (
|
||||
|
|
@ -340,13 +338,13 @@ export default function CompaniesPage() {
|
|||
</div>
|
||||
{company.featured && (
|
||||
<span className="bg-yellow-100 text-yellow-700 text-xs font-semibold px-2 py-1 rounded-full">
|
||||
Destaque
|
||||
{t("companiesPage.all.featured")}
|
||||
</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}
|
||||
|
|
@ -372,13 +370,13 @@ export default function CompaniesPage() {
|
|||
|
||||
<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
|
||||
{company.openJobs} {t("companiesPage.all.positions")}
|
||||
</span>
|
||||
<Link
|
||||
href={`/companies/${company.id}`}
|
||||
className="text-gray-600 hover:text-[#F0932B] font-semibold text-sm transition-colors"
|
||||
>
|
||||
Ver mais →
|
||||
{t("companiesPage.all.viewMore")} →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -388,8 +386,8 @@ export default function CompaniesPage() {
|
|||
{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>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">{t("companiesPage.empty.title")}</h3>
|
||||
<p className="text-gray-600">{t("companiesPage.empty.subtitle")}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,219 +1,211 @@
|
|||
"use client"
|
||||
|
||||
import { useState, useCallback, useEffect } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { mockJobs } from "@/lib/mock-data"
|
||||
import Link from "next/link"
|
||||
import { ArrowRight, CheckCircle2, ChevronLeft, ChevronRight } from 'lucide-react'
|
||||
import Image from "next/image"
|
||||
import { motion } from "framer-motion"
|
||||
import { useTranslation } from "@/lib/i18n"
|
||||
import { Navbar } from "@/components/navbar"
|
||||
import { Footer } from "@/components/footer"
|
||||
import { HomeSearch } from "@/components/home-search"
|
||||
import { JobCard } from "@/components/job-card"
|
||||
import useEmblaCarousel from 'embla-carousel-react'
|
||||
|
||||
export default function Home() {
|
||||
const { t } = useTranslation()
|
||||
|
||||
// Embla Carousel for Latest Jobs
|
||||
const [emblaRef, emblaApi] = useEmblaCarousel({
|
||||
align: 'start',
|
||||
loop: false,
|
||||
skipSnaps: false,
|
||||
dragFree: true
|
||||
})
|
||||
|
||||
const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
|
||||
const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
|
||||
|
||||
const scrollPrev = useCallback(() => {
|
||||
if (emblaApi) emblaApi.scrollPrev()
|
||||
}, [emblaApi])
|
||||
|
||||
const scrollNext = useCallback(() => {
|
||||
if (emblaApi) emblaApi.scrollNext()
|
||||
}, [emblaApi])
|
||||
|
||||
const onSelect = useCallback((emblaApi: any) => {
|
||||
setPrevBtnDisabled(!emblaApi.canScrollPrev())
|
||||
setNextBtnDisabled(!emblaApi.canScrollNext())
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) return
|
||||
|
||||
onSelect(emblaApi)
|
||||
emblaApi.on('reInit', onSelect)
|
||||
emblaApi.on('select', onSelect)
|
||||
}, [emblaApi, onSelect])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex flex-col font-sans">
|
||||
<Navbar />
|
||||
|
||||
<main className="flex-grow">
|
||||
{/* Hero Section */}
|
||||
<section className="relative h-[500px] flex items-center justify-center bg-[#1F2F40]">
|
||||
{/* Background Image with Overlay */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/10.png"
|
||||
alt="Background"
|
||||
fill
|
||||
className="object-cover opacity-60 contrast-125"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-[#1F2F40] via-[#1F2F40]/90 to-transparent" />
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10 text-center sm:text-left">
|
||||
<div className="max-w-3xl">
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight tracking-tight"
|
||||
>
|
||||
Encontre a Vaga de TI <br className="hidden sm:block" />
|
||||
dos Seus Sonhos.
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
className="text-lg md:text-xl text-gray-300 mb-8 max-w-xl leading-relaxed"
|
||||
>
|
||||
Conectamos você com as melhores empresas e techs.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
<Link href="/jobs">
|
||||
<Button className="h-12 px-8 bg-orange-500 hover:bg-orange-600 text-white font-bold text-lg rounded-md shadow-lg transition-transform hover:scale-105">
|
||||
Buscar Vagas
|
||||
</Button>
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Search Section */}
|
||||
<section className="px-4 mb-16">
|
||||
<div className="container mx-auto">
|
||||
<HomeSearch />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Latest Jobs Section - WITH CAROUSEL */}
|
||||
<section className="py-12 bg-gray-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-gray-900">
|
||||
Últimas Vagas Cadastradas
|
||||
</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="rounded-full border-gray-300 hover:border-orange-500 hover:text-orange-500 transition-all w-10 h-10"
|
||||
onClick={scrollPrev}
|
||||
disabled={prevBtnDisabled}
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="rounded-full border-gray-300 hover:border-orange-500 hover:text-orange-500 transition-all w-10 h-10"
|
||||
onClick={scrollNext}
|
||||
disabled={nextBtnDisabled}
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden" ref={emblaRef}>
|
||||
<div className="flex gap-6">
|
||||
{mockJobs.slice(0, 8).map((job, index) => (
|
||||
<div key={`latest-${job.id}-${index}`} className="flex-[0_0_100%] sm:flex-[0_0_50%] lg:flex-[0_0_25%] min-w-0">
|
||||
<JobCard job={job} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* More Jobs Section */}
|
||||
<section className="py-12 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-gray-900">
|
||||
Mais Vagas
|
||||
</h2>
|
||||
<Link href="/jobs">
|
||||
<Button className="bg-orange-500 hover:bg-orange-600 text-white font-bold">
|
||||
Ver Todas Vagas
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{mockJobs.slice(0, 8).map((job, index) => (
|
||||
<JobCard key={`more-${job.id}-${index}`} job={job} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
{/* Bottom CTA Section */}
|
||||
<section className="py-16 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="bg-[#1F2F40] rounded-[2rem] p-8 md:p-16 relative overflow-hidden text-center md:text-left flex flex-col md:flex-row items-center justify-between min-h-[400px]">
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 max-w-xl">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4 leading-tight">
|
||||
Milhares de oportunidades <br /> esperam você.
|
||||
</h2>
|
||||
<p className="text-base text-gray-300 mb-8">
|
||||
Conecte cargos, talentos, tomada de ações de vagas.
|
||||
</p>
|
||||
<Link href="/register/user">
|
||||
<Button className="h-12 px-8 bg-white text-gray-900 hover:bg-gray-100 font-bold text-lg rounded-md">
|
||||
Cadastre-se
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Image Background for CTA */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<div className="absolute right-0 top-0 h-full w-full md:w-2/3 lg:w-1/2">
|
||||
<Image
|
||||
src="/muie.jpeg"
|
||||
alt="Professional"
|
||||
fill
|
||||
className="object-cover object-center md:object-right opacity-40 md:opacity-100"
|
||||
/>
|
||||
{/* Gradient Overlay to blend with dark background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t md:bg-gradient-to-r from-[#1F2F40] via-[#1F2F40]/30 to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
"use client"
|
||||
|
||||
import { useState, useCallback, useEffect } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { mockJobs } from "@/lib/mock-data"
|
||||
import Link from "next/link"
|
||||
import { ArrowRight, CheckCircle2, ChevronLeft, ChevronRight } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
import { motion } from "framer-motion"
|
||||
import { useTranslation } from "@/lib/i18n"
|
||||
import { Navbar } from "@/components/navbar"
|
||||
import { Footer } from "@/components/footer"
|
||||
import { HomeSearch } from "@/components/home-search"
|
||||
import { JobCard } from "@/components/job-card"
|
||||
import useEmblaCarousel from "embla-carousel-react"
|
||||
|
||||
export default function Home() {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const [emblaRef, emblaApi] = useEmblaCarousel({
|
||||
align: "start",
|
||||
loop: false,
|
||||
skipSnaps: false,
|
||||
dragFree: true
|
||||
})
|
||||
|
||||
const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
|
||||
const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
|
||||
|
||||
const scrollPrev = useCallback(() => {
|
||||
if (emblaApi) emblaApi.scrollPrev()
|
||||
}, [emblaApi])
|
||||
|
||||
const scrollNext = useCallback(() => {
|
||||
if (emblaApi) emblaApi.scrollNext()
|
||||
}, [emblaApi])
|
||||
|
||||
const onSelect = useCallback((emblaApi: any) => {
|
||||
setPrevBtnDisabled(!emblaApi.canScrollPrev())
|
||||
setNextBtnDisabled(!emblaApi.canScrollNext())
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) return
|
||||
onSelect(emblaApi)
|
||||
emblaApi.on("reInit", onSelect)
|
||||
emblaApi.on("select", onSelect)
|
||||
}, [emblaApi, onSelect])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex flex-col font-sans">
|
||||
<Navbar />
|
||||
|
||||
<main className="flex-grow">
|
||||
{/* Hero Section */}
|
||||
<section className="relative h-[500px] flex items-center justify-center bg-[#1F2F40]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/10.png"
|
||||
alt="Background"
|
||||
fill
|
||||
className="object-cover opacity-60 contrast-125"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-[#1F2F40] via-[#1F2F40]/90 to-transparent" />
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10 text-center sm:text-left">
|
||||
<div className="max-w-3xl">
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight tracking-tight"
|
||||
>
|
||||
{t("home.hero.title")} <br className="hidden sm:block" />
|
||||
{t("home.hero.titleLine2")}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
className="text-lg md:text-xl text-gray-300 mb-8 max-w-xl leading-relaxed"
|
||||
>
|
||||
{t("home.hero.subtitle")}
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
<Link href="/jobs">
|
||||
<Button className="h-12 px-8 bg-orange-500 hover:bg-orange-600 text-white font-bold text-lg rounded-md shadow-lg transition-transform hover:scale-105">
|
||||
{t("home.hero.cta")}
|
||||
</Button>
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Search Section */}
|
||||
<section className="px-4 mb-16">
|
||||
<div className="container mx-auto">
|
||||
<HomeSearch />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Latest Jobs Section */}
|
||||
<section className="py-12 bg-gray-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-gray-900">
|
||||
{t("home.featuredJobs.title")}
|
||||
</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="rounded-full border-gray-300 hover:border-orange-500 hover:text-orange-500 transition-all w-10 h-10"
|
||||
onClick={scrollPrev}
|
||||
disabled={prevBtnDisabled}
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="rounded-full border-gray-300 hover:border-orange-500 hover:text-orange-500 transition-all w-10 h-10"
|
||||
onClick={scrollNext}
|
||||
disabled={nextBtnDisabled}
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden" ref={emblaRef}>
|
||||
<div className="flex gap-6">
|
||||
{mockJobs.slice(0, 8).map((job, index) => (
|
||||
<div key={`latest-${job.id}-${index}`} className="flex-[0_0_100%] sm:flex-[0_0_50%] lg:flex-[0_0_25%] min-w-0">
|
||||
<JobCard job={job} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* More Jobs Section */}
|
||||
<section className="py-12 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-gray-900">
|
||||
{t("home.moreJobs.title")}
|
||||
</h2>
|
||||
<Link href="/jobs">
|
||||
<Button className="bg-orange-500 hover:bg-orange-600 text-white font-bold">
|
||||
{t("home.moreJobs.viewAll")}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{mockJobs.slice(0, 8).map((job, index) => (
|
||||
<JobCard key={`more-${job.id}-${index}`} job={job} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Bottom CTA Section */}
|
||||
<section className="py-16 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="bg-[#1F2F40] rounded-[2rem] p-8 md:p-16 relative overflow-hidden text-center md:text-left flex flex-col md:flex-row items-center justify-between min-h-[400px]">
|
||||
<div className="relative z-10 max-w-xl">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4 leading-tight">
|
||||
{t("home.cta.title")}
|
||||
</h2>
|
||||
<p className="text-base text-gray-300 mb-8">
|
||||
{t("home.cta.subtitle")}
|
||||
</p>
|
||||
<Link href="/register/user">
|
||||
<Button className="h-12 px-8 bg-white text-gray-900 hover:bg-gray-100 font-bold text-lg rounded-md">
|
||||
{t("home.cta.button")}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-0 z-0">
|
||||
<div className="absolute right-0 top-0 h-full w-full md:w-2/3 lg:w-1/2">
|
||||
<Image
|
||||
src="/muie.jpeg"
|
||||
alt="Professional"
|
||||
fill
|
||||
className="object-cover object-center md:object-right opacity-40 md:opacity-100"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t md:bg-gradient-to-r from-[#1F2F40] via-[#1F2F40]/30 to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,55 +12,55 @@ export function Footer() {
|
|||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-8xl">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 className="font-bold mb-4 text-gray-900 text-lg">Informações</h3>
|
||||
<h3 className="font-bold mb-4 text-gray-900 text-lg">{t("footerMain.info.title")}</h3>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-gray-400 rounded-full inline-block"></span>
|
||||
<Link href="/about" className="text-sm text-gray-600 hover:text-primary transition-colors">
|
||||
Sobre nós
|
||||
{t("footerMain.info.about")}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-gray-400 rounded-full inline-block"></span>
|
||||
<Link href="/contact" className="text-sm text-gray-600 hover:text-primary transition-colors">
|
||||
Contato
|
||||
{t("footerMain.info.contact")}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-bold mb-4 text-gray-900 text-lg">Para Candidatos</h3>
|
||||
<h3 className="font-bold mb-4 text-gray-900 text-lg">{t("footerMain.candidates.title")}</h3>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-gray-400 rounded-full inline-block"></span>
|
||||
<Link href="/jobs" className="text-sm text-gray-600 hover:text-primary transition-colors">
|
||||
Buscar Vagas
|
||||
{t("footerMain.candidates.searchJobs")}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-gray-400 rounded-full inline-block"></span>
|
||||
<Link href="/register/user" className="text-sm text-gray-600 hover:text-primary transition-colors">
|
||||
Criar Conta
|
||||
{t("footerMain.candidates.createAccount")}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-bold mb-4 text-gray-900 text-lg">Para Empresas</h3>
|
||||
<h3 className="font-bold mb-4 text-gray-900 text-lg">{t("footerMain.companies.title")}</h3>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-gray-400 rounded-full inline-block"></span>
|
||||
<Link href="/publicar-vaga" className="text-sm text-gray-600 hover:text-primary transition-colors">
|
||||
Publicar Vaga
|
||||
{t("footerMain.companies.postJob")}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-bold mb-4 text-gray-900 text-lg">Redes Sociais</h3>
|
||||
<h3 className="font-bold mb-4 text-gray-900 text-lg">{t("footerMain.social.title")}</h3>
|
||||
<div className="flex gap-3">
|
||||
<a href="#" className="w-10 h-10 rounded-lg border-2 border-gray-300 hover:bg-gray-50 text-[#1F2F40] flex items-center justify-center transition-colors">
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
|
|
@ -92,7 +92,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} GoHorse jobs. Todos os direitos reservados.</p>
|
||||
<p className="text-sm text-gray-600">© {currentYear} {t("footerMain.copyright")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,117 +1,117 @@
|
|||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Search, MapPin, DollarSign, Briefcase } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useTranslation } from "@/lib/i18n"
|
||||
|
||||
export function HomeSearch() {
|
||||
const router = useRouter()
|
||||
const { t } = useTranslation()
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [location, setLocation] = useState("")
|
||||
const [type, setType] = useState("")
|
||||
const [workMode, setWorkMode] = useState("")
|
||||
const [salary, setSalary] = useState("")
|
||||
|
||||
const handleSearch = () => {
|
||||
const params = new URLSearchParams()
|
||||
if (searchTerm) params.set("q", searchTerm)
|
||||
if (location) params.set("location", location)
|
||||
if (type && type !== "all") params.set("type", type)
|
||||
if (workMode && workMode !== "all") params.set("mode", workMode)
|
||||
if (salary) params.set("salary", salary)
|
||||
|
||||
router.push(`/jobs?${params.toString()}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-lg p-6 max-w-5xl mx-auto -mt-24 relative z-20 border border-gray-100">
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-3 h-5 w-5 text-gray-400" />
|
||||
<Input
|
||||
placeholder="Digite cargo, empresa ou palavra-chave"
|
||||
className="pl-10 h-12 bg-gray-50 border-gray-200"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-5 gap-4">
|
||||
{/* Contract Type */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-semibold text-gray-700 uppercase tracking-wide">Tipo de contratação</label>
|
||||
<Select value={type} onValueChange={setType}>
|
||||
<SelectTrigger className="!h-12 bg-gray-50 border-gray-200 w-full">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Todos</SelectItem>
|
||||
<SelectItem value="contract">PJ</SelectItem>
|
||||
<SelectItem value="full-time">CLT</SelectItem>
|
||||
<SelectItem value="freelance">Freelancer</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Work Mode */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-semibold text-gray-700 uppercase tracking-wide">Regime de Trabalho</label>
|
||||
<Select value={workMode} onValueChange={setWorkMode}>
|
||||
<SelectTrigger className="!h-12 bg-gray-50 border-gray-200 w-full">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Todos</SelectItem>
|
||||
<SelectItem value="remote">Remoto</SelectItem>
|
||||
<SelectItem value="hybrid">Híbrido</SelectItem>
|
||||
<SelectItem value="onsite">Presencial</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Location */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-semibold text-gray-700 uppercase tracking-wide">Cidade e estado</label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
placeholder="Cidade e estado"
|
||||
className="h-12 bg-gray-50 border-gray-200"
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Salary */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-semibold text-gray-700 uppercase tracking-wide">Pretensão salarial</label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
placeholder="R$ 0,00"
|
||||
className="h-12 bg-gray-50 border-gray-200"
|
||||
value={salary}
|
||||
onChange={(e) => setSalary(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Button */}
|
||||
<div className="flex items-end">
|
||||
<Button
|
||||
onClick={handleSearch}
|
||||
className="w-full h-12 bg-orange-500 hover:bg-orange-600 text-white font-bold text-lg shadow-md transition-all active:scale-95"
|
||||
>
|
||||
<Search className="w-5 h-5 mr-2" />
|
||||
Filtrar Vagas
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Search, MapPin, DollarSign, Briefcase } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useTranslation } from "@/lib/i18n"
|
||||
|
||||
export function HomeSearch() {
|
||||
const router = useRouter()
|
||||
const { t } = useTranslation()
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [location, setLocation] = useState("")
|
||||
const [type, setType] = useState("")
|
||||
const [workMode, setWorkMode] = useState("")
|
||||
const [salary, setSalary] = useState("")
|
||||
|
||||
const handleSearch = () => {
|
||||
const params = new URLSearchParams()
|
||||
if (searchTerm) params.set("q", searchTerm)
|
||||
if (location) params.set("location", location)
|
||||
if (type && type !== "all") params.set("type", type)
|
||||
if (workMode && workMode !== "all") params.set("mode", workMode)
|
||||
if (salary) params.set("salary", salary)
|
||||
|
||||
router.push(`/jobs?${params.toString()}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-lg p-6 max-w-5xl mx-auto -mt-24 relative z-20 border border-gray-100">
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-3 h-5 w-5 text-gray-400" />
|
||||
<Input
|
||||
placeholder={t("home.search.placeholder")}
|
||||
className="pl-10 h-12 bg-gray-50 border-gray-200"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-5 gap-4">
|
||||
{/* Contract Type */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-semibold text-gray-700 uppercase tracking-wide">{t("home.search.contractType")}</label>
|
||||
<Select value={type} onValueChange={setType}>
|
||||
<SelectTrigger className="!h-12 bg-gray-50 border-gray-200 w-full">
|
||||
<SelectValue placeholder={t("home.search.select")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">{t("jobs.filters.all")}</SelectItem>
|
||||
<SelectItem value="contract">{t("home.search.pj")}</SelectItem>
|
||||
<SelectItem value="full-time">{t("home.search.clt")}</SelectItem>
|
||||
<SelectItem value="freelance">{t("home.search.freelancer")}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Work Mode */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-semibold text-gray-700 uppercase tracking-wide">{t("home.search.workMode")}</label>
|
||||
<Select value={workMode} onValueChange={setWorkMode}>
|
||||
<SelectTrigger className="!h-12 bg-gray-50 border-gray-200 w-full">
|
||||
<SelectValue placeholder={t("home.search.select")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">{t("jobs.filters.all")}</SelectItem>
|
||||
<SelectItem value="remote">{t("home.search.homeOffice")}</SelectItem>
|
||||
<SelectItem value="hybrid">{t("home.search.hybrid")}</SelectItem>
|
||||
<SelectItem value="onsite">{t("home.search.presencial")}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Location */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-semibold text-gray-700 uppercase tracking-wide">{t("home.search.location")}</label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
placeholder={t("home.search.location")}
|
||||
className="h-12 bg-gray-50 border-gray-200"
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Salary */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-semibold text-gray-700 uppercase tracking-wide">{t("home.search.salary")}</label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
placeholder="R$ 0,00"
|
||||
className="h-12 bg-gray-50 border-gray-200"
|
||||
value={salary}
|
||||
onChange={(e) => setSalary(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Button */}
|
||||
<div className="flex items-end">
|
||||
<Button
|
||||
onClick={handleSearch}
|
||||
className="w-full h-12 bg-orange-500 hover:bg-orange-600 text-white font-bold text-lg shadow-md transition-all active:scale-95"
|
||||
>
|
||||
<Search className="w-5 h-5 mr-2" />
|
||||
{t("home.search.filter")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,8 +33,8 @@ export function LanguageSwitcher() {
|
|||
{locales.map((l) => (
|
||||
<DropdownMenuItem
|
||||
key={l.code}
|
||||
onClick={() => {
|
||||
console.log(`[LanguageSwitcher] Clicking ${l.code}`);
|
||||
onSelect={() => {
|
||||
console.log(`[LanguageSwitcher] Selecting ${l.code}`);
|
||||
setLocale(l.code);
|
||||
}}
|
||||
className="flex items-center gap-2 cursor-pointer focus:outline-none focus:bg-accent focus:text-accent-foreground"
|
||||
|
|
|
|||
|
|
@ -21,6 +21,10 @@ export function Navbar() {
|
|||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
if (!mounted) {
|
||||
return null; // Or a loading skeleton to avoid mismatch
|
||||
}
|
||||
|
||||
// Static labels for SSR, translated labels for client
|
||||
const navigationItems = [
|
||||
{ href: "/jobs", label: mounted ? t('nav.jobs') : "Vagas" },
|
||||
|
|
|
|||
|
|
@ -211,41 +211,47 @@
|
|||
},
|
||||
"home": {
|
||||
"hero": {
|
||||
"title": "Find the right job, the simple way",
|
||||
"subtitle": "Connecting candidates and companies quickly and directly",
|
||||
"searchJobs": "Search jobs",
|
||||
"imCompany": "I'm a company",
|
||||
"postJob": "Post a job"
|
||||
"title": "Find Your Dream IT Job.",
|
||||
"titleLine2": "",
|
||||
"subtitle": "We connect you with the best companies and tech opportunities.",
|
||||
"cta": "Search Jobs"
|
||||
},
|
||||
"featured": {
|
||||
"title": "Featured Jobs",
|
||||
"subtitle": "Selected opportunities for you",
|
||||
"viewAll": "View all jobs"
|
||||
"search": {
|
||||
"placeholder": "Enter keywords",
|
||||
"filter": "Filter Jobs",
|
||||
"contractType": "Contract Type",
|
||||
"workMode": "Work Mode",
|
||||
"location": "City and State",
|
||||
"salary": "Salary Expectation",
|
||||
"select": "Select",
|
||||
"pj": "Contractor",
|
||||
"clt": "Full-time",
|
||||
"freelancer": "Freelancer",
|
||||
"homeOffice": "Remote",
|
||||
"presencial": "On-site",
|
||||
"hybrid": "Hybrid"
|
||||
},
|
||||
"howItWorks": {
|
||||
"title": "How it works?",
|
||||
"subtitle": "Three simple steps to your next opportunity",
|
||||
"step1": {
|
||||
"title": "1. Sign up",
|
||||
"description": "Create your free profile in just a few minutes"
|
||||
},
|
||||
"step2": {
|
||||
"title": "2. Send your resume",
|
||||
"description": "Add your experiences and skills"
|
||||
},
|
||||
"step3": {
|
||||
"title": "3. Get found",
|
||||
"description": "Receive offers from interested companies"
|
||||
}
|
||||
"featuredJobs": {
|
||||
"title": "Latest Registered Jobs",
|
||||
"yesterday": "Yesterday",
|
||||
"apply": "Apply now",
|
||||
"viewJob": "View Job",
|
||||
"favorite": "Favorite"
|
||||
},
|
||||
"testimonials": {
|
||||
"title": "What our users say?",
|
||||
"subtitle": "Success stories from those who found their opportunity"
|
||||
"levels": {
|
||||
"junior": "Junior",
|
||||
"mid": "Mid-level",
|
||||
"senior": "Senior"
|
||||
},
|
||||
"moreJobs": {
|
||||
"title": "More Jobs",
|
||||
"viewAll": "View All Jobs"
|
||||
},
|
||||
"cta": {
|
||||
"title": "Ready to start?",
|
||||
"subtitle": "Create your free profile and start receiving job offers today!",
|
||||
"button": "Create free profile"
|
||||
"badge": "Social Networks",
|
||||
"title": "Thousands of opportunities await you.",
|
||||
"subtitle": "Connect positions, talents, and job actions.",
|
||||
"button": "Sign up"
|
||||
}
|
||||
},
|
||||
"jobs": {
|
||||
|
|
@ -320,14 +326,11 @@
|
|||
"remote": "Remote"
|
||||
},
|
||||
"footer": {
|
||||
"company": "Company",
|
||||
"about": "About",
|
||||
"careers": "Careers",
|
||||
"jobsByTech": "Jobs by Technology",
|
||||
"legal": "Legal",
|
||||
"privacy": "Privacy Policy",
|
||||
"terms": "Terms of Use",
|
||||
"copyright": "© {year} GoHorse Jobs. All rights reserved."
|
||||
"vagas": "Jobs",
|
||||
"empresas": "Companies",
|
||||
"blog": "Blog",
|
||||
"login": "Login",
|
||||
"copyright": "Ghorse jobs. All rights reserved."
|
||||
},
|
||||
"auth": {
|
||||
"login": {
|
||||
|
|
@ -1295,56 +1298,52 @@
|
|||
"subjectRequired": "Subject is required"
|
||||
}
|
||||
},
|
||||
"home": {
|
||||
"companiesPage": {
|
||||
"hero": {
|
||||
"title": "Find Your Dream IT Job.",
|
||||
"titleLine2": "",
|
||||
"subtitle": "We connect you with the best companies and tech opportunities.",
|
||||
"cta": "Search Jobs"
|
||||
"title": "Discover the Best Companies",
|
||||
"subtitle": "Meet amazing companies that are hiring now",
|
||||
"searchPlaceholder": "Search companies by name or industry..."
|
||||
},
|
||||
"search": {
|
||||
"placeholder": "Enter keywords",
|
||||
"filter": "Filter Jobs",
|
||||
"contractType": "Contract Type",
|
||||
"workMode": "Work Mode",
|
||||
"location": "City and State",
|
||||
"salary": "Salary Expectation",
|
||||
"select": "Select",
|
||||
"pj": "Contractor",
|
||||
"clt": "Full-time",
|
||||
"freelancer": "Freelancer",
|
||||
"homeOffice": "Remote",
|
||||
"presencial": "On-site",
|
||||
"hybrid": "Hybrid"
|
||||
"filters": {
|
||||
"label": "Filters:",
|
||||
"allIndustries": "All",
|
||||
"allSizes": "All",
|
||||
"companiesFound": "companies found"
|
||||
},
|
||||
"featuredJobs": {
|
||||
"title": "Latest Registered Jobs",
|
||||
"yesterday": "Yesterday",
|
||||
"apply": "Apply now",
|
||||
"viewJob": "View Job",
|
||||
"favorite": "Favorite"
|
||||
"featured": {
|
||||
"title": "Featured Companies",
|
||||
"openJobs": "open positions",
|
||||
"viewProfile": "View profile"
|
||||
},
|
||||
"levels": {
|
||||
"junior": "Junior",
|
||||
"mid": "Mid-level",
|
||||
"senior": "Senior"
|
||||
"all": {
|
||||
"title": "All Companies",
|
||||
"featured": "Featured",
|
||||
"positions": "positions",
|
||||
"viewMore": "View more"
|
||||
},
|
||||
"moreJobs": {
|
||||
"title": "More Jobs",
|
||||
"viewAll": "View All Jobs"
|
||||
},
|
||||
"cta": {
|
||||
"badge": "Social Networks",
|
||||
"title": "Thousands of opportunities await you.",
|
||||
"subtitle": "Connect positions, talents, and job actions.",
|
||||
"button": "Sign up"
|
||||
"empty": {
|
||||
"title": "No companies found",
|
||||
"subtitle": "Try adjusting your search filters"
|
||||
}
|
||||
},
|
||||
"footer": {
|
||||
"vagas": "Jobs",
|
||||
"empresas": "Companies",
|
||||
"blog": "Blog",
|
||||
"login": "Login",
|
||||
"copyright": "Ghorse jobs. All rights reserved."
|
||||
"footerMain": {
|
||||
"info": {
|
||||
"title": "Information",
|
||||
"about": "About Us",
|
||||
"contact": "Contact"
|
||||
},
|
||||
"candidates": {
|
||||
"title": "For Candidates",
|
||||
"searchJobs": "Search Jobs",
|
||||
"createAccount": "Create Account"
|
||||
},
|
||||
"companies": {
|
||||
"title": "For Companies",
|
||||
"postJob": "Post a Job"
|
||||
},
|
||||
"social": {
|
||||
"title": "Social Media"
|
||||
},
|
||||
"copyright": "GoHorse Jobs. All rights reserved."
|
||||
}
|
||||
}
|
||||
|
|
@ -211,41 +211,47 @@
|
|||
},
|
||||
"home": {
|
||||
"hero": {
|
||||
"title": "Encuentra el empleo correcto, de forma sencilla",
|
||||
"subtitle": "Conectamos candidatos y empresas de forma rápida y directa",
|
||||
"searchJobs": "Buscar empleos",
|
||||
"imCompany": "Soy empresa",
|
||||
"postJob": "Publicar vacante"
|
||||
"title": "Encuentra el Trabajo de TI",
|
||||
"titleLine2": "de Tus Sueños.",
|
||||
"subtitle": "Te conectamos con las mejores empresas y tecnologías.",
|
||||
"cta": "Buscar Empleos"
|
||||
},
|
||||
"featured": {
|
||||
"title": "Empleos Destacados",
|
||||
"subtitle": "Oportunidades seleccionadas para ti",
|
||||
"viewAll": "Ver todos los empleos"
|
||||
"search": {
|
||||
"placeholder": "Ingresa palabras clave",
|
||||
"filter": "Filtrar Empleos",
|
||||
"contractType": "Tipo de contratación",
|
||||
"workMode": "Régimen de Trabajo",
|
||||
"location": "Ciudad y estado",
|
||||
"salary": "Expectativa salarial",
|
||||
"select": "Seleccione",
|
||||
"pj": "Contratista",
|
||||
"clt": "Tiempo completo",
|
||||
"freelancer": "Freelancer",
|
||||
"homeOffice": "Remoto",
|
||||
"presencial": "Presencial",
|
||||
"hybrid": "Híbrido"
|
||||
},
|
||||
"howItWorks": {
|
||||
"title": "¿Cómo funciona?",
|
||||
"subtitle": "Tres pasos sencillos para tu próxima oportunidad",
|
||||
"step1": {
|
||||
"title": "1. Regístrate",
|
||||
"description": "Crea tu perfil gratis en pocos minutos"
|
||||
},
|
||||
"step2": {
|
||||
"title": "2. Envía tu currículum",
|
||||
"description": "Agrega tus experiencias y habilidades"
|
||||
},
|
||||
"step3": {
|
||||
"title": "3. Sé encontrado",
|
||||
"description": "Recibe ofertas de empresas interesadas"
|
||||
}
|
||||
"featuredJobs": {
|
||||
"title": "Últimos Empleos Registrados",
|
||||
"yesterday": "Ayer",
|
||||
"apply": "Aplicar ahora",
|
||||
"viewJob": "Ver Empleo",
|
||||
"favorite": "Favorito"
|
||||
},
|
||||
"testimonials": {
|
||||
"title": "¿Qué dicen nuestros usuarios?",
|
||||
"subtitle": "Historias de éxito de quienes encontraron su oportunidad"
|
||||
"levels": {
|
||||
"junior": "Junior",
|
||||
"mid": "Semi-senior",
|
||||
"senior": "Senior"
|
||||
},
|
||||
"moreJobs": {
|
||||
"title": "Más Empleos",
|
||||
"viewAll": "Ver Todos los Empleos"
|
||||
},
|
||||
"cta": {
|
||||
"title": "¿Listo para empezar?",
|
||||
"subtitle": "¡Crea tu perfil gratis y comienza a recibir ofertas de empleo hoy!",
|
||||
"button": "Crear perfil gratis"
|
||||
"badge": "Redes Sociales",
|
||||
"title": "Miles de oportunidades te esperan.",
|
||||
"subtitle": "Conecta posiciones, talentos, acciones de empleos.",
|
||||
"button": "Regístrate"
|
||||
}
|
||||
},
|
||||
"jobs": {
|
||||
|
|
@ -320,14 +326,11 @@
|
|||
"remote": "Remoto"
|
||||
},
|
||||
"footer": {
|
||||
"company": "Empresa",
|
||||
"about": "Sobre",
|
||||
"careers": "Carreras",
|
||||
"jobsByTech": "Empleos por Tecnología",
|
||||
"legal": "Legal",
|
||||
"privacy": "Política de Privacidad",
|
||||
"terms": "Términos de Uso",
|
||||
"copyright": "© {year} GoHorse Jobs. Todos los derechos reservados."
|
||||
"vagas": "Empleos",
|
||||
"empresas": "Empresas",
|
||||
"blog": "Blog",
|
||||
"login": "Iniciar sesión",
|
||||
"copyright": "Ghorse jobs. Todos los derechos reservados."
|
||||
},
|
||||
"auth": {
|
||||
"login": {
|
||||
|
|
@ -1296,56 +1299,52 @@
|
|||
"subjectRequired": "El asunto es requerido"
|
||||
}
|
||||
},
|
||||
"home": {
|
||||
"companiesPage": {
|
||||
"hero": {
|
||||
"title": "Encuentra el Trabajo de TI",
|
||||
"titleLine2": "de Tus Sueños.",
|
||||
"subtitle": "Te conectamos con las mejores empresas y tecnologías.",
|
||||
"cta": "Buscar Empleos"
|
||||
"title": "Descubre las Mejores Empresas",
|
||||
"subtitle": "Conoce empresas increíbles que están contratando ahora",
|
||||
"searchPlaceholder": "Buscar empresas por nombre o sector..."
|
||||
},
|
||||
"search": {
|
||||
"placeholder": "Ingresa palabras clave",
|
||||
"filter": "Filtrar Empleos",
|
||||
"contractType": "Tipo de contratación",
|
||||
"workMode": "Régimen de Trabajo",
|
||||
"location": "Ciudad y estado",
|
||||
"salary": "Expectativa salarial",
|
||||
"select": "Seleccione",
|
||||
"pj": "Contratista",
|
||||
"clt": "Tiempo completo",
|
||||
"freelancer": "Freelancer",
|
||||
"homeOffice": "Remoto",
|
||||
"presencial": "Presencial",
|
||||
"hybrid": "Híbrido"
|
||||
"filters": {
|
||||
"label": "Filtros:",
|
||||
"allIndustries": "Todas",
|
||||
"allSizes": "Todos",
|
||||
"companiesFound": "empresas encontradas"
|
||||
},
|
||||
"featuredJobs": {
|
||||
"title": "Últimos Empleos Registrados",
|
||||
"yesterday": "Ayer",
|
||||
"apply": "Aplicar ahora",
|
||||
"viewJob": "Ver Empleo",
|
||||
"favorite": "Favorito"
|
||||
"featured": {
|
||||
"title": "Empresas Destacadas",
|
||||
"openJobs": "vacantes abiertas",
|
||||
"viewProfile": "Ver perfil"
|
||||
},
|
||||
"levels": {
|
||||
"junior": "Junior",
|
||||
"mid": "Semi-senior",
|
||||
"senior": "Senior"
|
||||
"all": {
|
||||
"title": "Todas las Empresas",
|
||||
"featured": "Destacada",
|
||||
"positions": "vacantes",
|
||||
"viewMore": "Ver más"
|
||||
},
|
||||
"moreJobs": {
|
||||
"title": "Más Empleos",
|
||||
"viewAll": "Ver Todos los Empleos"
|
||||
},
|
||||
"cta": {
|
||||
"badge": "Redes Sociales",
|
||||
"title": "Miles de oportunidades te esperan.",
|
||||
"subtitle": "Conecta posiciones, talentos, acciones de empleos.",
|
||||
"button": "Regístrate"
|
||||
"empty": {
|
||||
"title": "No se encontraron empresas",
|
||||
"subtitle": "Intenta ajustar tus filtros de búsqueda"
|
||||
}
|
||||
},
|
||||
"footer": {
|
||||
"vagas": "Empleos",
|
||||
"empresas": "Empresas",
|
||||
"blog": "Blog",
|
||||
"login": "Iniciar sesión",
|
||||
"copyright": "Ghorse jobs. Todos los derechos reservados."
|
||||
"footerMain": {
|
||||
"info": {
|
||||
"title": "Información",
|
||||
"about": "Sobre nosotros",
|
||||
"contact": "Contacto"
|
||||
},
|
||||
"candidates": {
|
||||
"title": "Para Candidatos",
|
||||
"searchJobs": "Buscar Empleos",
|
||||
"createAccount": "Crear Cuenta"
|
||||
},
|
||||
"companies": {
|
||||
"title": "Para Empresas",
|
||||
"postJob": "Publicar Empleo"
|
||||
},
|
||||
"social": {
|
||||
"title": "Redes Sociales"
|
||||
},
|
||||
"copyright": "GoHorse Jobs. Todos los derechos reservados."
|
||||
}
|
||||
}
|
||||
|
|
@ -252,39 +252,46 @@
|
|||
"home": {
|
||||
"hero": {
|
||||
"title": "Encontre a Vaga de TI",
|
||||
"titleLine2": "dos Seus Sonhos",
|
||||
"titleLine2": "dos Seus Sonhos.",
|
||||
"subtitle": "Conectamos você com as melhores empresas e techs.",
|
||||
"cta": "Buscar Vagas"
|
||||
},
|
||||
"featured": {
|
||||
"title": "Vagas em Destaque",
|
||||
"subtitle": "Oportunidades selecionadas para você",
|
||||
"viewAll": "Ver todas as vagas"
|
||||
"search": {
|
||||
"placeholder": "Digite as palavras-chave",
|
||||
"filter": "Filtrar Vagas",
|
||||
"contractType": "Tipo de contratação",
|
||||
"workMode": "Regime de Trabalho",
|
||||
"location": "Cidade e estado",
|
||||
"salary": "Pretensão salarial",
|
||||
"select": "Selecione",
|
||||
"pj": "PJ",
|
||||
"clt": "CLT",
|
||||
"freelancer": "Freelancer",
|
||||
"homeOffice": "Home-Office",
|
||||
"presencial": "Presencial",
|
||||
"hybrid": "Híbrido"
|
||||
},
|
||||
"howItWorks": {
|
||||
"title": "Como Funciona?",
|
||||
"subtitle": "Três passos simples para sua próxima oportunidade",
|
||||
"step1": {
|
||||
"title": "1. Cadastre-se",
|
||||
"description": "Crie seu perfil gratuitamente em poucos minutos"
|
||||
},
|
||||
"step2": {
|
||||
"title": "2. Envie seu currículo",
|
||||
"description": "Adicione suas experiências e habilidades"
|
||||
},
|
||||
"step3": {
|
||||
"title": "3. Seja encontrado",
|
||||
"description": "Receba ofertas de empresas interessadas"
|
||||
}
|
||||
"featuredJobs": {
|
||||
"title": "Últimas Vagas Cadastradas",
|
||||
"yesterday": "Ontem",
|
||||
"apply": "Aplicar agora",
|
||||
"viewJob": "Ver Vaga",
|
||||
"favorite": "Favoritar"
|
||||
},
|
||||
"testimonials": {
|
||||
"title": "O que nossos usuários dizem?",
|
||||
"subtitle": "Histórias de sucesso de quem encontrou sua oportunidade"
|
||||
"levels": {
|
||||
"junior": "Júnior",
|
||||
"mid": "Pleno",
|
||||
"senior": "Sênior"
|
||||
},
|
||||
"moreJobs": {
|
||||
"title": "Mais Vagas",
|
||||
"viewAll": "Ver Todas Vagas"
|
||||
},
|
||||
"cta": {
|
||||
"title": "Pronto para começar?",
|
||||
"subtitle": "Crie seu perfil gratuito e comece a receber ofertas de emprego hoje mesmo!",
|
||||
"button": "Criar perfil gratuito"
|
||||
"badge": "Redes Sociais",
|
||||
"title": "Milhares de oportunidades esperam você.",
|
||||
"subtitle": "Conecte cargos, talentos, tomada de ações de vagas.",
|
||||
"button": "Cadastre-se"
|
||||
}
|
||||
},
|
||||
"jobs": {
|
||||
|
|
@ -386,14 +393,11 @@
|
|||
"remote": "Remoto"
|
||||
},
|
||||
"footer": {
|
||||
"company": "Empresa",
|
||||
"about": "Sobre",
|
||||
"careers": "Carreiras",
|
||||
"jobsByTech": "Vagas por Tecnologia",
|
||||
"legal": "Legal",
|
||||
"privacy": "Política de Privacidade",
|
||||
"terms": "Termos de Uso",
|
||||
"copyright": "© {year} GoHorse Jobs. Todos os direitos reservados."
|
||||
"vagas": "Vagas",
|
||||
"empresas": "Empresas",
|
||||
"blog": "Blog",
|
||||
"login": "Login",
|
||||
"copyright": "Ghorse jobs. Todos os direitos reservados."
|
||||
},
|
||||
"auth": {
|
||||
"login": {
|
||||
|
|
@ -1329,56 +1333,52 @@
|
|||
"subjectRequired": "O assunto é obrigatório"
|
||||
}
|
||||
},
|
||||
"home": {
|
||||
"companiesPage": {
|
||||
"hero": {
|
||||
"title": "Encontre a Vaga de TI",
|
||||
"titleLine2": "dos Seus Sonhos.",
|
||||
"subtitle": "Conectamos você com as melhores empresas e techs.",
|
||||
"cta": "Buscar Vagas"
|
||||
"title": "Descubra as Melhores Empresas",
|
||||
"subtitle": "Conheça empresas incríveis que estão contratando agora",
|
||||
"searchPlaceholder": "Buscar empresas por nome ou setor..."
|
||||
},
|
||||
"search": {
|
||||
"placeholder": "Digite as palavras-chave",
|
||||
"filter": "Filtrar Vagas",
|
||||
"contractType": "Tipo de contratação",
|
||||
"workMode": "Regime de Trabalho",
|
||||
"location": "Cidade e estado",
|
||||
"salary": "Pretensão salarial",
|
||||
"select": "Selecione",
|
||||
"pj": "PJ",
|
||||
"clt": "CLT",
|
||||
"freelancer": "Freelancer",
|
||||
"homeOffice": "Home-Office",
|
||||
"presencial": "Presencial",
|
||||
"hybrid": "Híbrido"
|
||||
"filters": {
|
||||
"label": "Filtros:",
|
||||
"allIndustries": "Todas",
|
||||
"allSizes": "Todos",
|
||||
"companiesFound": "empresas encontradas"
|
||||
},
|
||||
"featuredJobs": {
|
||||
"title": "Últimas Vagas Cadastradas",
|
||||
"yesterday": "Ontem",
|
||||
"apply": "Aplicar agora",
|
||||
"viewJob": "Ver Vaga",
|
||||
"favorite": "Favoritar"
|
||||
"featured": {
|
||||
"title": "Empresas em Destaque",
|
||||
"openJobs": "vagas abertas",
|
||||
"viewProfile": "Ver perfil"
|
||||
},
|
||||
"levels": {
|
||||
"junior": "Júnior",
|
||||
"mid": "Pleno",
|
||||
"senior": "Sênior"
|
||||
"all": {
|
||||
"title": "Todas as Empresas",
|
||||
"featured": "Destaque",
|
||||
"positions": "vagas",
|
||||
"viewMore": "Ver mais"
|
||||
},
|
||||
"moreJobs": {
|
||||
"title": "Mais Vagas",
|
||||
"viewAll": "Ver Todas Vagas"
|
||||
},
|
||||
"cta": {
|
||||
"badge": "Redes Sociais",
|
||||
"title": "Milhares de oportunidades esperam você.",
|
||||
"subtitle": "Conecte cargos, talentos, tomada de ações de vagas.",
|
||||
"button": "Cadastre-se"
|
||||
"empty": {
|
||||
"title": "Nenhuma empresa encontrada",
|
||||
"subtitle": "Tente ajustar seus filtros de busca"
|
||||
}
|
||||
},
|
||||
"footer": {
|
||||
"vagas": "Vagas",
|
||||
"empresas": "Empresas",
|
||||
"blog": "Blog",
|
||||
"login": "Login",
|
||||
"copyright": "Ghorse jobs. Todos os direitos reservados."
|
||||
"footerMain": {
|
||||
"info": {
|
||||
"title": "Informações",
|
||||
"about": "Sobre nós",
|
||||
"contact": "Contato"
|
||||
},
|
||||
"candidates": {
|
||||
"title": "Para Candidatos",
|
||||
"searchJobs": "Buscar Vagas",
|
||||
"createAccount": "Criar Conta"
|
||||
},
|
||||
"companies": {
|
||||
"title": "Para Empresas",
|
||||
"postJob": "Publicar Vaga"
|
||||
},
|
||||
"social": {
|
||||
"title": "Redes Sociais"
|
||||
},
|
||||
"copyright": "GoHorse Jobs. Todos os direitos reservados."
|
||||
}
|
||||
}
|
||||
|
|
@ -1,116 +1,117 @@
|
|||
'use client';
|
||||
|
||||
import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react';
|
||||
import en from '@/i18n/en.json';
|
||||
import es from '@/i18n/es.json';
|
||||
import ptBR from '@/i18n/pt-BR.json';
|
||||
|
||||
type Locale = 'en' | 'es' | 'pt-BR';
|
||||
|
||||
interface I18nContextType {
|
||||
locale: Locale;
|
||||
setLocale: (locale: Locale) => void;
|
||||
t: (key: string, params?: Record<string, string | number>) => string;
|
||||
}
|
||||
|
||||
const dictionaries: Record<Locale, typeof en> = {
|
||||
en,
|
||||
es,
|
||||
'pt-BR': ptBR,
|
||||
};
|
||||
|
||||
const I18nContext = createContext<I18nContextType | null>(null);
|
||||
|
||||
const localeStorageKey = 'locale';
|
||||
|
||||
const normalizeLocale = (language: string): Locale => {
|
||||
if (language.startsWith('pt')) return 'pt-BR';
|
||||
if (language.startsWith('es')) return 'es';
|
||||
return 'en';
|
||||
};
|
||||
|
||||
const getInitialLocale = (): Locale => {
|
||||
if (typeof window === 'undefined') return 'en';
|
||||
const storedLocale = localStorage.getItem(localeStorageKey);
|
||||
if (storedLocale && storedLocale in dictionaries) {
|
||||
return storedLocale as Locale;
|
||||
}
|
||||
// Default to English instead of browser language for consistency
|
||||
return 'en';
|
||||
};
|
||||
|
||||
export function I18nProvider({ children }: { children: ReactNode }) {
|
||||
// FIX: Initialize with 'en' to match Server-Side Rendering (SSR)
|
||||
// This prevents hydration mismatch errors.
|
||||
const [locale, setLocaleState] = useState<Locale>('en');
|
||||
|
||||
const setLocale = (newLocale: Locale) => {
|
||||
console.log(`[I18n] Setting locale to: ${newLocale}`);
|
||||
setLocaleState(newLocale);
|
||||
};
|
||||
|
||||
const t = useCallback((key: string, params?: Record<string, string | number>) => {
|
||||
const keys = key.split('.');
|
||||
let value: unknown = dictionaries[locale];
|
||||
|
||||
for (const k of keys) {
|
||||
if (value && typeof value === 'object' && value !== null && k in value) {
|
||||
value = (value as Record<string, unknown>)[k];
|
||||
} else {
|
||||
return key; // Return key if not found
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof value !== 'string') return key;
|
||||
|
||||
// Replace parameters like {count}, {time}, {year}
|
||||
if (params) {
|
||||
return Object.entries(params).reduce(
|
||||
(str, [paramKey, paramValue]) => str.replace(`{${paramKey}}`, String(paramValue)),
|
||||
value
|
||||
);
|
||||
}
|
||||
|
||||
return value;
|
||||
}, [locale]);
|
||||
|
||||
// Sync from localStorage on mount (Client-side only)
|
||||
useEffect(() => {
|
||||
const stored = getInitialLocale();
|
||||
if (stored !== 'en') {
|
||||
console.log('[I18n] Restoring locale from storage on client:', stored);
|
||||
setLocaleState(stored);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined') return;
|
||||
localStorage.setItem(localeStorageKey, locale);
|
||||
document.documentElement.lang = locale;
|
||||
}, [locale]);
|
||||
|
||||
return (
|
||||
<I18nContext.Provider value={{ locale, setLocale, t }}>
|
||||
{children}
|
||||
</I18nContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useI18n() {
|
||||
const context = useContext(I18nContext);
|
||||
if (!context) {
|
||||
throw new Error('useI18n must be used within an I18nProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
export function useTranslation() {
|
||||
const { t, locale, setLocale } = useI18n();
|
||||
return { t, locale, setLocale };
|
||||
}
|
||||
|
||||
export const locales: { code: Locale; name: string; flag: string }[] = [
|
||||
{ code: 'en', name: 'English', flag: '🇺🇸' },
|
||||
{ code: 'es', name: 'Español', flag: '🇪🇸' },
|
||||
{ code: 'pt-BR', name: 'Português', flag: '🇧🇷' },
|
||||
];
|
||||
'use client';
|
||||
|
||||
import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect, startTransition } from 'react';
|
||||
import en from '@/i18n/en.json';
|
||||
import es from '@/i18n/es.json';
|
||||
import ptBR from '@/i18n/pt-BR.json';
|
||||
|
||||
type Locale = 'en' | 'es' | 'pt-BR';
|
||||
|
||||
interface I18nContextType {
|
||||
locale: Locale;
|
||||
setLocale: (locale: Locale) => void;
|
||||
t: (key: string, params?: Record<string, string | number>) => string;
|
||||
}
|
||||
|
||||
const dictionaries: Record<Locale, typeof en> = {
|
||||
en,
|
||||
es,
|
||||
'pt-BR': ptBR,
|
||||
};
|
||||
|
||||
const I18nContext = createContext<I18nContextType | null>(null);
|
||||
|
||||
const localeStorageKey = 'locale';
|
||||
|
||||
const normalizeLocale = (language: string): Locale => {
|
||||
if (language.startsWith('pt')) return 'pt-BR';
|
||||
if (language.startsWith('es')) return 'es';
|
||||
return 'en';
|
||||
};
|
||||
|
||||
const getInitialLocale = (): Locale => {
|
||||
if (typeof window === 'undefined') return 'en';
|
||||
const storedLocale = localStorage.getItem(localeStorageKey);
|
||||
if (storedLocale && Object.keys(dictionaries).includes(storedLocale)) {
|
||||
return storedLocale as Locale;
|
||||
}
|
||||
if (typeof navigator !== 'undefined' && navigator.language) {
|
||||
return normalizeLocale(navigator.language);
|
||||
}
|
||||
return 'en';
|
||||
};
|
||||
|
||||
export function I18nProvider({ children }: { children: ReactNode }) {
|
||||
const [locale, setLocaleState] = useState<Locale>('en');
|
||||
|
||||
const setLocale = (newLocale: Locale) => {
|
||||
setLocaleState(newLocale);
|
||||
};
|
||||
|
||||
const t = useCallback((key: string, params?: Record<string, string | number>) => {
|
||||
const keys = key.split('.');
|
||||
let value: unknown = dictionaries[locale];
|
||||
|
||||
for (const k of keys) {
|
||||
if (value && typeof value === 'object' && value !== null && k in value) {
|
||||
value = (value as Record<string, unknown>)[k];
|
||||
} else {
|
||||
return key;
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof value !== 'string') return key;
|
||||
|
||||
if (params) {
|
||||
return Object.entries(params).reduce(
|
||||
(str, [paramKey, paramValue]) => str.replace(`{${paramKey}}`, String(paramValue)),
|
||||
value
|
||||
);
|
||||
}
|
||||
|
||||
return value;
|
||||
}, [locale]);
|
||||
|
||||
// Restore locale from localStorage after hydration completes.
|
||||
// Using startTransition to mark this as non-urgent so React
|
||||
// finishes hydration before re-rendering with the stored locale.
|
||||
useEffect(() => {
|
||||
const stored = getInitialLocale();
|
||||
if (stored !== 'en') {
|
||||
startTransition(() => {
|
||||
setLocaleState(stored);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined') return;
|
||||
localStorage.setItem(localeStorageKey, locale);
|
||||
document.documentElement.lang = locale;
|
||||
}, [locale]);
|
||||
|
||||
return (
|
||||
<I18nContext.Provider value={{ locale, setLocale, t }}>
|
||||
{children}
|
||||
</I18nContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useI18n() {
|
||||
const context = useContext(I18nContext);
|
||||
if (!context) {
|
||||
throw new Error('useI18n must be used within an I18nProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
export function useTranslation() {
|
||||
const { t, locale, setLocale } = useI18n();
|
||||
return { t, locale, setLocale };
|
||||
}
|
||||
|
||||
export const locales: { code: Locale; name: string; flag: string }[] = [
|
||||
{ code: 'en', name: 'English', flag: '🇺🇸' },
|
||||
{ code: 'es', name: 'Español', flag: '🇪🇸' },
|
||||
{ code: 'pt-BR', name: 'Português', flag: '🇧🇷' },
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in a new issue