From cf761a70e4289e4c36a8cbd28815071504d615ae Mon Sep 17 00:00:00 2001
From: Tiago Yamamoto <japa@rede5.com.br>
Date: Mon, 23 Feb 2026 20:50:19 -0600
Subject: [PATCH] feat: move homepage carousel arrows to the sides of job
 container

---
 frontend/src/app/page.tsx | 60 ++++++++++++++++++++-------------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 7d08a12..f4946d4 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -149,38 +149,40 @@ export default function Home() {
                             <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">
-                                {loading ? (
-                                    <div className="flex-[0_0_100%] text-center py-8">Carregando vagas...</div>
-                                ) : jobs.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_50%] xl:flex-[0_0_33.333%] 2xl:flex-[0_0_25%] min-w-0 pb-1">
-                                        <JobCard job={job} />
-                                    </div>
-                                ))}
+                        <div className="relative group">
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                className="absolute left-0 top-1/2 -translate-y-1/2 -ml-4 md:-ml-6 z-10 bg-white shadow-md rounded-full border-gray-300 hover:border-orange-500 hover:text-orange-500 transition-all w-10 h-10 lg:w-12 lg:h-12 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
+                                onClick={scrollPrev}
+                                disabled={prevBtnDisabled}
+                            >
+                                <ChevronLeft className="w-5 h-5 lg:w-6 lg:h-6" />
+                            </Button>
+
+                            <div className="overflow-hidden px-1 py-4" ref={emblaRef}>
+                                <div className="flex gap-6">
+                                    {loading ? (
+                                        <div className="flex-[0_0_100%] text-center py-8">Carregando vagas...</div>
+                                    ) : jobs.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_50%] xl:flex-[0_0_33.333%] 2xl:flex-[0_0_25%] min-w-0 pb-1">
+                                            <JobCard job={job} />
+                                        </div>
+                                    ))}
+                                </div>
                             </div>
+
+                            <Button
+                                variant="outline"
+                                size="icon"
+                                className="absolute right-0 top-1/2 -translate-y-1/2 -mr-4 md:-mr-6 z-10 bg-white shadow-md rounded-full border-gray-300 hover:border-orange-500 hover:text-orange-500 transition-all w-10 h-10 lg:w-12 lg:h-12 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
+                                onClick={scrollNext}
+                                disabled={nextBtnDisabled}
+                            >
+                                <ChevronRight className="w-5 h-5 lg:w-6 lg:h-6" />
+                            </Button>
                         </div>
                     </div>
                 </section>