feat(ui): implement jobs carousel and clean registration links
This commit is contained in:
GoHorse Deploy
parent
9f0b6ca809
commit
0df21b5dae
1 changed files with 258 additions and 471 deletions
|
|
@ -1,454 +1,251 @@
|
|||
"use client"
|
||||
'use client'
|
||||
|
||||
import { Navbar } from "@/components/navbar"
|
||||
import { Footer } from "@/components/footer"
|
||||
import { JobCard } from "@/components/job-card"
|
||||
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, ChevronLeft, ChevronRight, Eye } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { motion } from "framer-motion"
|
||||
import Image from "next/image"
|
||||
import { useTranslation } from "@/lib/i18n"
|
||||
import { useConfig } from "@/contexts/ConfigContext"
|
||||
import { useState, useCallback, useEffect } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Search, MapPin, Briefcase, TrendingUp, ChevronLeft, ChevronRight, Star, Globe, Zap, Users, Heart } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import { Footer } from '@/components/footer'
|
||||
import { Navbar } from '@/components/navbar'
|
||||
import useEmblaCarousel from 'embla-carousel-react'
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import type { Job } from "@/lib/types"
|
||||
const mockJobs = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Senior Full Stack Developer',
|
||||
company: 'TechCorp',
|
||||
location: 'São Paulo, SP',
|
||||
type: 'Tiempo completo',
|
||||
salary: 'R$ 12,000 - R$ 18,000',
|
||||
description: 'We are looking for an experienced full stack developer to lead...',
|
||||
tags: ['React', 'Node.js', 'TypeScript'],
|
||||
logo: 'https://api.dicebear.com/7.x/initials/svg?seed=TC',
|
||||
posted: 'hace 3 meses'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'UX/UI Designer',
|
||||
company: 'DesignHub',
|
||||
location: 'São Paulo, SP',
|
||||
type: 'Remoto',
|
||||
salary: 'R$ 8,000 - R$ 12,000',
|
||||
description: 'We are looking for a creative designer to craft incredible...',
|
||||
tags: ['Figma', 'Adobe XD', 'Strong portfolio'],
|
||||
logo: 'https://api.dicebear.com/7.x/initials/svg?seed=DH',
|
||||
posted: 'hace 3 meses'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Data Engineer',
|
||||
company: 'DataFlow',
|
||||
location: 'Rio de Janeiro, RJ',
|
||||
type: 'Tiempo completo',
|
||||
salary: 'R$ 15,000 - R$ 22,000',
|
||||
description: 'Opportunity to work with big data and machine learning.',
|
||||
tags: ['Python', 'SQL', 'Spark'],
|
||||
logo: 'https://api.dicebear.com/7.x/initials/svg?seed=DF',
|
||||
posted: 'hace 3 meses'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Product Manager',
|
||||
company: 'InnovateLab',
|
||||
location: 'Belo Horizonte, MG',
|
||||
type: 'Tiempo completo',
|
||||
salary: 'R$ 10,000 - R$ 16,000',
|
||||
description: 'Lead the development of innovative digital products.',
|
||||
tags: ['Product management', 'Agile', 'Data analysis'],
|
||||
logo: 'https://api.dicebear.com/7.x/initials/svg?seed=IL',
|
||||
posted: 'hace 3 meses'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Backend Developer',
|
||||
company: 'CloudScale',
|
||||
location: 'Florianópolis, SC',
|
||||
type: 'Remoto',
|
||||
salary: 'R$ 11,000 - R$ 17,000',
|
||||
description: 'Scale our cloud infrastructure to millions of users.',
|
||||
tags: ['Go', 'Kubernetes', 'AWS'],
|
||||
logo: 'https://api.dicebear.com/7.x/initials/svg?seed=CS',
|
||||
posted: 'hace 2 meses'
|
||||
}
|
||||
]
|
||||
|
||||
export default function HomePage() {
|
||||
const { t } = useTranslation()
|
||||
const config = useConfig()
|
||||
const [featuredJobs, setFeaturedJobs] = useState<Job[]>(mockJobs.slice(0, 31))
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [featuredIndex, setFeaturedIndex] = useState(0)
|
||||
const [moreJobsIndex, setMoreJobsIndex] = useState(0)
|
||||
const [openFilters, setOpenFilters] = useState({
|
||||
contractType: false,
|
||||
workMode: false,
|
||||
location: false,
|
||||
salary: false
|
||||
export default function Home() {
|
||||
const [emblaRef, emblaApi] = useEmblaCarousel({
|
||||
align: 'start',
|
||||
loop: false,
|
||||
skipSnaps: false,
|
||||
dragFree: true
|
||||
})
|
||||
|
||||
const toggleFilter = (filterName: keyof typeof openFilters) => {
|
||||
setOpenFilters(prev => ({
|
||||
contractType: false,
|
||||
workMode: false,
|
||||
location: false,
|
||||
salary: false,
|
||||
[filterName]: !prev[filterName]
|
||||
}))
|
||||
}
|
||||
const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
|
||||
const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchFeaturedJobs() {
|
||||
try {
|
||||
const apiBase = config.apiUrl
|
||||
console.log("[DEBUG] API Base URL:", apiBase)
|
||||
const scrollPrev = useCallback(() => {
|
||||
if (emblaApi) emblaApi.scrollPrev()
|
||||
}, [emblaApi])
|
||||
|
||||
const mapJobs = (jobs: any[]): Job[] =>
|
||||
jobs.map((j: any) => ({
|
||||
id: String(j.id),
|
||||
title: j.title,
|
||||
company: j.companyName || t("jobs.confidential"),
|
||||
location: j.location || t("workMode.remote"),
|
||||
type: j.employmentType || "full-time",
|
||||
salary: j.salaryMin ? `R$ ${j.salaryMin}` : t("jobs.salary.negotiable"),
|
||||
description: j.description,
|
||||
requirements: j.requirements || [],
|
||||
postedAt: j.createdAt,
|
||||
isFeatured: j.isFeatured
|
||||
}))
|
||||
const scrollNext = useCallback(() => {
|
||||
if (emblaApi) emblaApi.scrollNext()
|
||||
}, [emblaApi])
|
||||
|
||||
console.log("[DEBUG] Fetching featured jobs from:", `${apiBase}/api/v1/jobs?featured=true&limit=31`)
|
||||
const featuredRes = await fetch(`${apiBase}/api/v1/jobs?featured=true&limit=31`)
|
||||
console.log("[DEBUG] Featured response status:", featuredRes.status)
|
||||
|
||||
if (!featuredRes.ok) throw new Error("Failed to fetch featured jobs")
|
||||
const featuredData = await featuredRes.json()
|
||||
console.log("[DEBUG] Featured data from API:", featuredData)
|
||||
|
||||
const featuredList = featuredData.data ? mapJobs(featuredData.data) : []
|
||||
console.log("[DEBUG] Mapped featured jobs:", featuredList.length, "jobs")
|
||||
|
||||
if (featuredList.length >= 24) {
|
||||
console.log("[DEBUG] Using featured/API jobs")
|
||||
setFeaturedJobs(featuredList.slice(0, 31))
|
||||
return
|
||||
}
|
||||
|
||||
console.log("[DEBUG] Fetching fallback jobs from:", `${apiBase}/api/v1/jobs?limit=31`)
|
||||
const fallbackRes = await fetch(`${apiBase}/api/v1/jobs?limit=31`)
|
||||
console.log("[DEBUG] Fallback response status:", fallbackRes.status)
|
||||
|
||||
if (!fallbackRes.ok) throw new Error("Failed to fetch fallback jobs")
|
||||
const fallbackData = await fallbackRes.json()
|
||||
console.log("[DEBUG] Fallback data from API:", fallbackData)
|
||||
|
||||
const fallbackList = fallbackData.data ? mapJobs(fallbackData.data) : []
|
||||
console.log("[DEBUG] Mapped fallback jobs:", fallbackList.length, "jobs")
|
||||
|
||||
const combined = [...featuredList, ...fallbackList].slice(0, 31)
|
||||
console.log("[DEBUG] Combined jobs:", combined.length, "jobs")
|
||||
|
||||
if (combined.length >= 24) {
|
||||
console.log("[DEBUG] Using combined jobs")
|
||||
setFeaturedJobs(combined)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("[DEBUG] ❌ Error fetching featured jobs:", error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
fetchFeaturedJobs()
|
||||
const onSelect = useCallback((emblaApi: any) => {
|
||||
setPrevBtnDisabled(!emblaApi.canScrollPrev())
|
||||
setNextBtnDisabled(!emblaApi.canScrollNext())
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<Navbar />
|
||||
useEffect(() => {
|
||||
if (!emblaApi) return
|
||||
|
||||
<main className="flex-1">
|
||||
onSelect(emblaApi)
|
||||
emblaApi.on('reInit', onSelect)
|
||||
emblaApi.on('select', onSelect)
|
||||
}, [emblaApi, onSelect])
|
||||
|
||||
return (
|
||||
<div className='min-h-screen bg-slate-50 flex flex-col'>
|
||||
<Navbar />
|
||||
<main className='flex-grow'>
|
||||
{/* Hero Section */}
|
||||
<section className="bg-primary text-white relative overflow-hidden flex items-center min-h-[500px]">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/10.png"
|
||||
alt="Background"
|
||||
fill
|
||||
className="object-cover object-center"
|
||||
quality={100}
|
||||
priority
|
||||
sizes="100vw"
|
||||
/>
|
||||
<section className='relative bg-[#1F2F40] py-20 overflow-hidden'>
|
||||
<div className='absolute inset-0'>
|
||||
<div className='absolute inset-0 bg-gradient-to-r from-[#1F2F40] via-[#1F2F40]/90 to-transparent z-10' />
|
||||
<Image src='/hero-bg.jpg' alt='Hero Background' fill className='object-cover opacity-20' priority />
|
||||
</div>
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 w-full relative z-10">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-left max-w-2xl py-12">
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-5xl sm:text-6xl lg:text-6xl font-bold mb-6 text-white leading-tight"
|
||||
>
|
||||
{t('home.hero.title')}<br />{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-2xl mb-10 leading-relaxed text-white"
|
||||
>
|
||||
{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 }}
|
||||
className="flex gap-4"
|
||||
>
|
||||
<Link href="/jobs">
|
||||
<Button size="lg" className="bg-primary hover:bg-primary/90 text-white hover:shadow-lg font-bold px-10 py-6 text-lg rounded-lg transition-all duration-200 border-0">
|
||||
{t('home.hero.cta')}
|
||||
|
||||
<div className='container mx-auto px-4 sm:px-6 lg:px-8 relative z-20'>
|
||||
<div className='max-w-3xl'>
|
||||
<h1 className='text-4xl md:text-6xl font-extrabold text-white mb-6 leading-tight'>
|
||||
Encontre seu <span className='text-primary'>próximo desafio</span> na tecnologia
|
||||
</h1>
|
||||
<p className='text-xl text-slate-300 mb-8 max-w-2xl'>
|
||||
Conectamos os melhores talentos às empresas mais inovadoras do Brasil e do exterior.
|
||||
</p>
|
||||
|
||||
<div className='flex flex-col md:flex-row gap-4'>
|
||||
<Link href='/jobs'>
|
||||
<Button size='lg' className='h-14 px-8 text-lg bg-primary hover:bg-primary/90'>
|
||||
Explorar Vagas
|
||||
</Button>
|
||||
</Link>
|
||||
</motion.div>
|
||||
<div className='flex items-center gap-4'>
|
||||
<div className='flex -space-x-3'>
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className='w-10 h-10 rounded-full border-2 border-[#1F2F40] overflow-hidden bg-slate-800'>
|
||||
<Image src={`https://api.dicebear.com/7.x/avataaars/svg?seed=User${i}`} alt='Avatar' width={40} height={40} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Search Bar Section */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-8xl">
|
||||
<div className="mb-8">
|
||||
<div className="mb-6 relative">
|
||||
<svg className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" 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>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('home.search.placeholder')}
|
||||
className="w-full h-14 pl-12 pr-4 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-base bg-white shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 items-stretch">
|
||||
{/* Contract Type - Static Expanded */}
|
||||
<div className="bg-white border-2 border-gray-200 rounded-xl shadow-sm hover:border-primary/30 transition-colors relative h-full flex flex-col">
|
||||
<div className="flex items-center justify-between w-full p-5 pb-2">
|
||||
<span className="text-base font-bold text-gray-900">{t('home.search.contractType')}</span>
|
||||
</div>
|
||||
<div className="space-y-3 px-5 pb-5 pt-2 flex-1">
|
||||
<label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
|
||||
<input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
|
||||
<span>{t('home.search.pj')}</span>
|
||||
</label>
|
||||
<label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
|
||||
<input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
|
||||
<span>{t('home.search.clt')}</span>
|
||||
</label>
|
||||
<label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
|
||||
<input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
|
||||
<span>{t('home.search.freelancer')}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Work Mode - Static Expanded */}
|
||||
<div className="bg-white border-2 border-gray-200 rounded-xl shadow-sm hover:border-primary/30 transition-colors relative h-full flex flex-col">
|
||||
<div className="flex items-center justify-between w-full p-5 pb-2">
|
||||
<span className="text-base font-bold text-gray-900">{t('home.search.workMode')}</span>
|
||||
</div>
|
||||
<div className="space-y-3 px-5 pb-5 pt-2 flex-1">
|
||||
<label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
|
||||
<input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
|
||||
<span>{t('home.search.homeOffice')}</span>
|
||||
</label>
|
||||
<label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
|
||||
<input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
|
||||
<span>{t('home.search.presencial')}</span>
|
||||
</label>
|
||||
<label className="flex items-center text-sm text-gray-700 cursor-pointer hover:text-gray-900 transition-colors">
|
||||
<input type="checkbox" className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary mr-3" />
|
||||
<span>{t('home.search.hybrid')}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Location - Static Expanded */}
|
||||
<div className="bg-white border-2 border-gray-200 rounded-xl shadow-sm hover:border-primary/30 transition-colors relative h-full flex flex-col">
|
||||
<div className="flex items-center justify-between w-full p-5 pb-2">
|
||||
<span className="text-base font-bold text-gray-900">{t('home.search.location')}</span>
|
||||
</div>
|
||||
<div className="px-5 pb-5 pt-2 flex-1 flex items-center">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Cidade e estado"
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary h-12"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Salary - Static Expanded */}
|
||||
<div className="bg-white border-2 border-gray-200 rounded-xl shadow-sm hover:border-primary/30 transition-colors relative h-full flex flex-col">
|
||||
<div className="flex items-center justify-between w-full p-5 pb-2">
|
||||
<span className="text-base font-bold text-gray-900">{t('home.search.salary')}</span>
|
||||
</div>
|
||||
<div className="px-5 pb-5 pt-2 flex-1 flex items-center">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="R$ 0,00"
|
||||
className="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary h-12"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Button - Unified */}
|
||||
<Button className="bg-primary hover:bg-primary/90 text-white h-full min-h-[200px] lg:min-h-0 rounded-xl font-bold text-3xl shadow-md hover:shadow-lg transition-all flex flex-col gap-3 items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={3} stroke="currentColor" className="size-12">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
|
||||
</svg>
|
||||
{t('home.search.filter')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Jobs */}
|
||||
<section className="py-12">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-8xl">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900">{t('home.featuredJobs.title')}</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{(featuredJobs.length >= 4 ? featuredJobs.slice(0, 4) : mockJobs.slice(0, 4))
|
||||
.map((job, index) => {
|
||||
const dates = ['02/06', '05/06', '08/06', '11/06'];
|
||||
const randomDate = dates[index % dates.length];
|
||||
const levels = [t('home.levels.mid'), t('home.levels.junior'), t('home.levels.senior'), t('home.levels.mid')];
|
||||
const level = levels[index % levels.length];
|
||||
const statusLabels = [t('workMode.remote'), t('workMode.hybrid'), t('workMode.onsite'), t('workMode.remote')];
|
||||
const statusLabel = statusLabels[index % statusLabels.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-all border border-gray-200 rounded-2xl overflow-hidden bg-white h-full group cursor-pointer flex flex-col">
|
||||
<div className="p-5 flex flex-col flex-1">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-gray-50 rounded-lg flex items-center justify-center border border-gray-100">
|
||||
<Building2 className="w-5 h-5 text-gray-700" />
|
||||
</div>
|
||||
<span className="text-sm font-bold text-gray-900 line-clamp-1">{job.company}</span>
|
||||
</div>
|
||||
<span className="text-[10px] px-2.5 py-1 bg-gray-900 text-white rounded-md font-bold uppercase tracking-wide">
|
||||
{statusLabel}
|
||||
<span className='text-slate-400 text-sm'>
|
||||
<span className='text-white font-bold'>+500</span> talentos já contratados
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold text-lg text-gray-900 mb-3 leading-tight line-clamp-2 pb-3 border-b border-gray-100">{job.title}</h3>
|
||||
<div className="relative w-full h-32 mb-4 flex items-center justify-center bg-gray-50/50 rounded-lg border border-gray-50">
|
||||
<Image
|
||||
src="/111.png"
|
||||
alt="Job Illustration"
|
||||
fill
|
||||
className="object-contain p-2"
|
||||
quality={100}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Section with Separator */}
|
||||
<div className="px-5 pb-5 pt-0 mt-auto">
|
||||
<div className="border-t border-gray-200 pt-4 mb-4">
|
||||
<p className="text-sm text-gray-500 font-medium flex items-center gap-2">
|
||||
<span className="text-gray-900 font-bold">{level}</span>
|
||||
<span className="w-1 h-1 rounded-full bg-gray-300"></span>
|
||||
{job.location}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex-1 border-gray-200 text-gray-700 hover:bg-gray-50 hover:text-gray-900 rounded-lg font-bold h-10 text-xs uppercase tracking-wide"
|
||||
>
|
||||
{t('home.featuredJobs.viewJob')}
|
||||
</Button>
|
||||
<Link href={`/jobs/${job.id}`} className="flex-1">
|
||||
<Button className="w-full bg-gray-900 hover:bg-gray-800 text-white rounded-lg font-bold h-10 text-xs uppercase tracking-wide">
|
||||
{t('home.featuredJobs.apply')}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* More Jobs Section */}
|
||||
<section className="py-12">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-8xl">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900">{t('home.moreJobs.title')}</h2>
|
||||
<Link href="/jobs">
|
||||
<Button className="bg-primary hover:bg-primary/90 text-white rounded-lg px-10 py-4 font-bold text-lg min-w-[220px]">
|
||||
{t('home.moreJobs.viewAll')}
|
||||
</Button>
|
||||
</Link>
|
||||
{/* Latest Jobs Section */}
|
||||
<section className='py-20 bg-white overflow-hidden'>
|
||||
<div className='container mx-auto px-4 sm:px-6 lg:px-8'>
|
||||
<div className='flex items-center justify-between mb-12'>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<h2 className='text-3xl font-bold text-[#1F2F40]'>Últimas Vagas Cadastradas</h2>
|
||||
<div className='h-1.5 w-20 bg-primary rounded-full' />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{mockJobs.slice(0, 8)
|
||||
.map((job, index) => {
|
||||
const colors = [
|
||||
'bg-cyan-500', 'bg-blue-500', 'bg-indigo-500', 'bg-gray-500',
|
||||
'bg-teal-500', 'bg-sky-500', 'bg-orange-500', 'bg-purple-500'
|
||||
];
|
||||
const bgColor = colors[index % colors.length];
|
||||
const icons = ['💻', '🎨', '📊', '🚀', '⚙️', '🔧', '📱', '🎯'];
|
||||
const icon = icons[index % icons.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-all border border-gray-200 bg-white rounded-xl overflow-hidden group cursor-pointer h-full">
|
||||
<CardContent className="p-5">
|
||||
{/* Cabeçalho com logo e seta */}
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-start gap-3 flex-1">
|
||||
<div className={`w-12 h-12 ${bgColor} rounded-full flex items-center justify-center text-white text-xl flex-shrink-0`}>
|
||||
{icon}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-bold text-base text-gray-900 line-clamp-1 mb-1">{job.title}</h3>
|
||||
<p className="text-sm text-gray-600 line-clamp-1">{job.company}</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-gray-400 group-hover:text-gray-600 transition-colors flex-shrink-0 ml-2" />
|
||||
</div>
|
||||
|
||||
{/* Rodapé com botões */}
|
||||
<div className="pt-4 mt-4 border-t border-gray-200">
|
||||
<div className="flex gap-3">
|
||||
<div className='flex items-center gap-4'>
|
||||
<div className='flex gap-2'>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex-1 border-gray-200 text-gray-700 hover:bg-gray-50 hover:text-gray-900 rounded-lg font-bold h-9 text-xs uppercase tracking-wide"
|
||||
variant='outline'
|
||||
size='icon'
|
||||
className='rounded-full border-slate-200 hover:border-primary hover:text-primary transition-all'
|
||||
onClick={scrollPrev}
|
||||
disabled={prevBtnDisabled}
|
||||
>
|
||||
{t('home.featuredJobs.viewJob')}
|
||||
<ChevronLeft className='w-5 h-5' />
|
||||
</Button>
|
||||
<Link href={`/jobs/${job.id}`} className="flex-1">
|
||||
<Button className="w-full bg-gray-900 hover:bg-gray-800 text-white rounded-lg font-bold h-9 text-xs uppercase tracking-wide">
|
||||
{t('home.featuredJobs.apply')}
|
||||
<Button
|
||||
variant='outline'
|
||||
size='icon'
|
||||
className='rounded-full border-slate-200 hover:border-primary hover:text-primary transition-all'
|
||||
onClick={scrollNext}
|
||||
disabled={nextBtnDisabled}
|
||||
>
|
||||
<ChevronRight className='w-5 h-5' />
|
||||
</Button>
|
||||
</div>
|
||||
<Link href='/jobs' className='text-primary font-semibold hidden md:flex items-center gap-1 hover:gap-2 transition-all ml-4'>
|
||||
Ver todas <ChevronRight className='w-4 h-4' />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='embla overflow-hidden' ref={emblaRef}>
|
||||
<div className='embla__container flex gap-6 px-1'>
|
||||
{mockJobs.map((job, index) => (
|
||||
<div key={`${job.id}-${index}`} className='embla__slide flex-[0_0_100%] sm:flex-[0_0_50%] lg:flex-[0_0_25%] min-w-0'>
|
||||
<div className='group relative flex flex-col bg-white rounded-2xl border border-slate-200 hover:border-primary/50 hover:shadow-xl hover:shadow-primary/5 transition-all duration-300 p-6 h-full'>
|
||||
<div className='flex items-start justify-between mb-4'>
|
||||
<div className='w-12 h-12 rounded-xl bg-slate-50 flex items-center justify-center border border-slate-100 group-hover:bg-white transition-colors'>
|
||||
<Image src={job.logo} alt={job.company} width={32} height={32} />
|
||||
</div>
|
||||
<button className='text-slate-400 hover:text-red-500 transition-colors'>
|
||||
<Heart className='w-5 h-5' />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='flex-grow'>
|
||||
<h3 className='text-lg font-bold text-[#1F2F40] mb-1 group-hover:text-primary transition-colors'>
|
||||
{job.title}
|
||||
</h3>
|
||||
<div className='flex items-center gap-2 text-sm text-slate-500 mb-4'>
|
||||
<Briefcase className='w-4 h-4' />
|
||||
<span>{job.company}</span>
|
||||
</div>
|
||||
|
||||
<div className='space-y-2 mb-6'>
|
||||
<div className='flex items-center gap-2 text-sm text-slate-600'>
|
||||
<MapPin className='w-4 h-4 text-primary' />
|
||||
<span>{job.location}</span>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className='px-2 py-0.5 rounded bg-orange-100 text-orange-700 text-[10px] font-bold uppercase tracking-wider'>
|
||||
{job.type}
|
||||
</div>
|
||||
<span className='text-sm font-semibold text-[#1F2F40]'>{job.salary}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className='text-sm text-slate-500 line-clamp-2 mb-6'>
|
||||
{job.description}
|
||||
</p>
|
||||
|
||||
<div className='flex flex-wrap gap-2 mb-6'>
|
||||
{job.tags.map((tag) => (
|
||||
<span key={tag} className='px-3 py-1 rounded-full bg-slate-50 text-slate-600 text-xs font-medium border border-slate-100'>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex items-center justify-between pt-6 border-t border-slate-100'>
|
||||
<div className='flex items-center gap-1.5 text-xs text-slate-400'>
|
||||
<TrendingUp className='w-3 h-3' />
|
||||
<span>{job.posted}</span>
|
||||
</div>
|
||||
<Link href={`/jobs/${job.id}`}>
|
||||
<Button variant='ghost' size='sm' className='text-primary hover:text-primary hover:bg-primary/5 font-semibold text-xs gap-1 p-0'>
|
||||
Ver Vaga <ChevronRight className='w-3 h-3' />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-12">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-8xl">
|
||||
<div className="bg-gray-900 rounded-2xl overflow-hidden shadow-lg relative min-h-[500px] flex items-center">
|
||||
{/* Image Layer: Single Image with Seamless Gradient Overlay */}
|
||||
<div className="absolute inset-y-0 right-0 w-full md:w-3/4 z-0">
|
||||
<Image
|
||||
src="/muie.jpeg"
|
||||
alt="Woman with Notebook"
|
||||
fill
|
||||
className="object-contain object-right"
|
||||
quality={100}
|
||||
priority
|
||||
/>
|
||||
{/*
|
||||
Seamless Blend Gradient:
|
||||
Starts solid gray-900 (matching, container) on left.
|
||||
Fades gradually to transparent on right.
|
||||
This "dyes" the dark background of the photo to match the container.
|
||||
*/}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-gray-900 from-20% via-gray-900/80 via-50% to-transparent to-100%" />
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-8 items-center p-8 lg:p-12 relative z-10">
|
||||
{/* Text Content */}
|
||||
<div className="text-white max-w-lg">
|
||||
<h2 className="text-3xl lg:text-4xl font-bold mb-4 leading-tight">
|
||||
{t('home.cta.title')}
|
||||
</h2>
|
||||
<p className="mb-6 text-white/90 text-lg">
|
||||
{t('home.cta.subtitle')}
|
||||
</p>
|
||||
<Button size="lg" className="bg-white text-primary hover:bg-white/90 font-bold px-12 py-7 text-xl rounded-lg">
|
||||
{t('home.cta.button')}
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -459,13 +256,3 @@ export default function HomePage() {
|
|||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FilterIcon() {
|
||||
return (
|
||||
<svg width="44" height="44" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-11 h-11">
|
||||
<rect x="4" y="7" width="16" height="3" rx="1.5" fill="white" />
|
||||
<rect x="7" y="12" width="10" height="3" rx="1.5" fill="white" />
|
||||
<rect x="10" y="17" width="4" height="3" rx="1.5" fill="white" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue