From 5c7b2c791cbd9f96a076ea40879133c03ae0d9d1 Mon Sep 17 00:00:00 2001
From: GoHorse Deploy <deploy@gohorse.com>
Date: Mon, 9 Feb 2026 11:10:59 +0000
Subject: [PATCH] feat(frontend): apply HML layout with carousel arrows to dev

---
 frontend/src/app/page.tsx | 347 +++++++++++++++++---------------------
 1 file changed, 154 insertions(+), 193 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 0606d76..4b8a7ae 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -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>