211 lines
9.9 KiB
TypeScript
211 lines
9.9 KiB
TypeScript
"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-[520px] 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-55 contrast-125"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-[#132131]/95 via-[#1F2F40]/90 to-[#1F2F40]/45" />
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4 sm:px-6 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-lg shadow-lg transition-transform hover:scale-105">
|
|
{t("home.hero.cta")}
|
|
</Button>
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Search Section */}
|
|
<section className="px-4 sm:px-6 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 sm:px-6">
|
|
<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 pb-1">
|
|
<JobCard job={job} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* More Jobs Section */}
|
|
<section className="py-12 bg-white">
|
|
<div className="container mx-auto px-4 sm:px-6">
|
|
<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 rounded-lg">
|
|
{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 sm:px-6">
|
|
<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-lg">
|
|
{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>
|
|
)
|
|
}
|