feat(frontend): turn more jobs section into carousel

frontend/src/app/page.tsx

@@ -27,8 +27,17 @@ export default function Home() {
         dragFree: true
     })
 
+    const [moreJobsEmblaRef, moreJobsEmblaApi] = useEmblaCarousel({
+        align: "start",
+        loop: false,
+        skipSnaps: false,
+        dragFree: true
+    })
+
     const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
     const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
+    const [moreJobsPrevBtnDisabled, setMoreJobsPrevBtnDisabled] = useState(true)
+    const [moreJobsNextBtnDisabled, setMoreJobsNextBtnDisabled] = useState(true)
 
     useEffect(() => {
         async function fetchJobs() {
@@ -54,11 +63,24 @@ export default function Home() {
         if (emblaApi) emblaApi.scrollNext()
     }, [emblaApi])
 
+    const scrollMoreJobsPrev = useCallback(() => {
+        if (moreJobsEmblaApi) moreJobsEmblaApi.scrollPrev()
+    }, [moreJobsEmblaApi])
+
+    const scrollMoreJobsNext = useCallback(() => {
+        if (moreJobsEmblaApi) moreJobsEmblaApi.scrollNext()
+    }, [moreJobsEmblaApi])
+
     const onSelect = useCallback((emblaApi: any) => {
         setPrevBtnDisabled(!emblaApi.canScrollPrev())
         setNextBtnDisabled(!emblaApi.canScrollNext())
     }, [])
 
+    const onMoreJobsSelect = useCallback((emblaApi: any) => {
+        setMoreJobsPrevBtnDisabled(!emblaApi.canScrollPrev())
+        setMoreJobsNextBtnDisabled(!emblaApi.canScrollNext())
+    }, [])
+
     useEffect(() => {
         if (!emblaApi) return
         onSelect(emblaApi)
@@ -66,6 +88,13 @@ export default function Home() {
         emblaApi.on("select", onSelect)
     }, [emblaApi, onSelect])
 
+    useEffect(() => {
+        if (!moreJobsEmblaApi) return
+        onMoreJobsSelect(moreJobsEmblaApi)
+        moreJobsEmblaApi.on("reInit", onMoreJobsSelect)
+        moreJobsEmblaApi.on("select", onMoreJobsSelect)
+    }, [moreJobsEmblaApi, onMoreJobsSelect])
+
     return (
         <div className="min-h-screen bg-gray-50 flex flex-col font-sans">
             <Navbar />
@@ -177,19 +206,43 @@ export default function Home() {
                             <h2 className="text-2xl md:text-3xl font-bold text-gray-900">
                                 {t("home.moreJobs.title")}
                             </h2>
-                            <Link href="/jobs">
+                            <div className="flex items-center gap-3">
-                                <Button className="bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-lg">
+                                <Button
-                                    {t("home.moreJobs.viewAll")}
+                                    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={scrollMoreJobsPrev}
+                                    disabled={moreJobsPrevBtnDisabled}
+                                >
+                                    <ChevronLeft className="w-5 h-5" />
                                 </Button>
-                            </Link>
+                                <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={scrollMoreJobsNext}
+                                    disabled={moreJobsNextBtnDisabled}
+                                >
+                                    <ChevronRight className="w-5 h-5" />
+                                </Button>
+                                <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>
 
-                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
+                        <div className="overflow-hidden" ref={moreJobsEmblaRef}>
-                            {loading ? (
+                            <div className="flex gap-6">
-                                <div className="col-span-full text-center py-8">Carregando vagas...</div>
+                                {loading ? (
-                            ) : jobs.slice(0, 8).map((job, index) => (
+                                    <div className="flex-[0_0_100%] text-center py-8">Carregando vagas...</div>
-                                <JobCard key={`more-${job.id}-${index}`} job={job} />
+                                ) : jobs.slice(0, 8).map((job, index) => (
-                            ))}
+                                    <div key={`more-${job.id}-${index}`} className="flex-[0_0_100%] sm:flex-[0_0_50%] lg:flex-[0_0_50%] xl:flex-[0_0_33.333%] 2xl:flex-[0_0_25%] min-w-0 pb-1">
+                                        <JobCard job={job} />
+                                    </div>
+                                ))}
+                            </div>
                         </div>
                     </div>
                 </section>