feat(frontend): apply HML layout with carousel arrows to dev
This commit is contained in:
GoHorse Deploy
parent
0df21b5dae
commit
5c7b2c791c
1 changed files with 154 additions and 193 deletions
|
|
@ -1,79 +1,23 @@
|
|||
'use client'
|
||||
"use client"
|
||||
|
||||
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 { 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'
|
||||
|
||||
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 Home() {
|
||||
const { t } = useTranslation()
|
||||
|
||||
// Embla Carousel for Latest Jobs
|
||||
const [emblaRef, emblaApi] = useEmblaCarousel({
|
||||
align: 'start',
|
||||
loop: false,
|
||||
|
|
@ -106,146 +50,163 @@ export default function Home() {
|
|||
}, [emblaApi, onSelect])
|
||||
|
||||
return (
|
||||
<div className='min-h-screen bg-slate-50 flex flex-col'>
|
||||
<div className="min-h-screen bg-gray-50 flex flex-col font-sans">
|
||||
<Navbar />
|
||||
<main className='flex-grow'>
|
||||
|
||||
<main className="flex-grow">
|
||||
{/* Hero Section */}
|
||||
<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 />
|
||||
<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 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="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>
|
||||
|
||||
<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
|
||||
<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>
|
||||
<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>
|
||||
))}
|
||||
</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>
|
||||
<span className='text-slate-400 text-sm'>
|
||||
<span className='text-white font-bold'>+500</span> talentos já contratados
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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='flex items-center gap-4'>
|
||||
<div className='flex gap-2'>
|
||||
<Button
|
||||
variant='outline'
|
||||
size='icon'
|
||||
className='rounded-full border-slate-200 hover:border-primary hover:text-primary transition-all'
|
||||
onClick={scrollPrev}
|
||||
disabled={prevBtnDisabled}
|
||||
>
|
||||
<ChevronLeft className='w-5 h-5' />
|
||||
</Button>
|
||||
<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>
|
||||
{/* 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='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="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>
|
||||
|
||||
<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>
|
||||
{/* 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]">
|
||||
|
||||
<p className='text-sm text-slate-500 line-clamp-2 mb-6'>
|
||||
{job.description}
|
||||
</p>
|
||||
{/* 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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue