rede5/gohorsejobs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(frontend): improve home visual hierarchy and responsiveness

Browse source
This commit is contained in:
Tiago Yamamoto 2026-02-12 20:24:54 -03:00
parent a85068ea86
commit 5884148f9f
3 changed files with 29 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/app/page.tsx
View file

@ -53,19 +53,19 @@ export default function Home() {
<main className="flex-grow"> <main className="flex-grow">
{/* Hero Section */} {/* Hero Section */}
<section className="relative h-[500px] flex items-center justify-center bg-[#1F2F40]"> <section className="relative h-[520px] flex items-center justify-center bg-[#1F2F40]">
<div className="absolute inset-0 z-0"> <div className="absolute inset-0 z-0">
<Image <Image
src="/10.png" src="/10.png"
alt="Background" alt="Background"
fill fill
className="object-cover opacity-60 contrast-125" className="object-cover opacity-55 contrast-125"
priority priority
/> />
<div className="absolute inset-0 bg-gradient-to-r from-[#1F2F40] via-[#1F2F40]/90 to-transparent" /> <div className="absolute inset-0 bg-gradient-to-r from-[#132131]/95 via-[#1F2F40]/90 to-[#1F2F40]/45" />
</div> </div>
<div className="container mx-auto px-4 relative z-10 text-center sm:text-left"> <div className="container mx-auto px-4 sm:px-6 relative z-10 text-center sm:text-left">
<div className="max-w-3xl"> <div className="max-w-3xl">
<motion.h1 <motion.h1
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@ -92,7 +92,7 @@ export default function Home() {
transition={{ duration: 0.5, delay: 0.2 }} transition={{ duration: 0.5, delay: 0.2 }}
> >
<Link href="/jobs"> <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"> <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")} {t("home.hero.cta")}
</Button> </Button>
</Link> </Link>
@ -102,7 +102,7 @@ export default function Home() {
</section> </section>
{/* Search Section */} {/* Search Section */}
<section className="px-4 mb-16"> <section className="px-4 sm:px-6 mb-16">
<div className="container mx-auto"> <div className="container mx-auto">
<HomeSearch /> <HomeSearch />
</div> </div>
@ -110,7 +110,7 @@ export default function Home() {
{/* Latest Jobs Section */} {/* Latest Jobs Section */}
<section className="py-12 bg-gray-50"> <section className="py-12 bg-gray-50">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4 sm:px-6">
<div className="flex items-center justify-between mb-8"> <div className="flex items-center justify-between mb-8">
<h2 className="text-2xl md:text-3xl font-bold text-gray-900"> <h2 className="text-2xl md:text-3xl font-bold text-gray-900">
{t("home.featuredJobs.title")} {t("home.featuredJobs.title")}
@ -140,7 +140,7 @@ export default function Home() {
<div className="overflow-hidden" ref={emblaRef}> <div className="overflow-hidden" ref={emblaRef}>
<div className="flex gap-6"> <div className="flex gap-6">
{mockJobs.slice(0, 8).map((job, index) => ( {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"> <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} /> <JobCard job={job} />
</div> </div>
))} ))}
@ -151,13 +151,13 @@ export default function Home() {
{/* More Jobs Section */} {/* More Jobs Section */}
<section className="py-12 bg-white"> <section className="py-12 bg-white">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4 sm:px-6">
<div className="flex items-center justify-between mb-8"> <div className="flex items-center justify-between mb-8">
<h2 className="text-2xl md:text-3xl font-bold text-gray-900"> <h2 className="text-2xl md:text-3xl font-bold text-gray-900">
{t("home.moreJobs.title")} {t("home.moreJobs.title")}
</h2> </h2>
<Link href="/jobs"> <Link href="/jobs">
<Button className="bg-orange-500 hover:bg-orange-600 text-white font-bold"> <Button className="bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-lg">
{t("home.moreJobs.viewAll")} {t("home.moreJobs.viewAll")}
</Button> </Button>
</Link> </Link>
@ -173,7 +173,7 @@ export default function Home() {
{/* Bottom CTA Section */} {/* Bottom CTA Section */}
<section className="py-16 bg-white"> <section className="py-16 bg-white">
<div className="container mx-auto px-4"> <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="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"> <div className="relative z-10 max-w-xl">
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4 leading-tight"> <h2 className="text-3xl md:text-4xl font-bold text-white mb-4 leading-tight">
@ -183,7 +183,7 @@ export default function Home() {
{t("home.cta.subtitle")} {t("home.cta.subtitle")}
</p> </p>
<Link href="/register/user"> <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"> <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")} {t("home.cta.button")}
</Button> </Button>
</Link> </Link>

10
frontend/src/components/home-search.tsx
View file

@ -1,7 +1,7 @@
"use client" "use client"
import { useState } from "react" import { useState } from "react"
import { Search, MapPin, DollarSign, Briefcase } from "lucide-react" import { Search } from "lucide-react"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
@ -29,7 +29,7 @@ export function HomeSearch() {
} }
return ( return (
<div className="bg-white rounded-lg shadow-lg p-6 max-w-5xl mx-auto -mt-24 relative z-20 border border-gray-100"> <div className="bg-white rounded-2xl shadow-lg p-4 sm:p-6 max-w-6xl mx-auto -mt-24 relative z-20 border border-gray-200 w-full">
<div className="mb-4"> <div className="mb-4">
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-3 h-5 w-5 text-gray-400" /> <Search className="absolute left-3 top-3 h-5 w-5 text-gray-400" />
@ -42,7 +42,7 @@ export function HomeSearch() {
</div> </div>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-5 gap-4"> <div className="grid grid-cols-1 md:grid-cols-5 gap-4 items-end">
{/* Contract Type */} {/* Contract Type */}
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs font-semibold text-gray-700 uppercase tracking-wide">{t("home.search.contractType")}</label> <label className="text-xs font-semibold text-gray-700 uppercase tracking-wide">{t("home.search.contractType")}</label>
@ -102,10 +102,10 @@ export function HomeSearch() {
</div> </div>
{/* Search Button */} {/* Search Button */}
<div className="flex items-end"> <div className="flex items-end h-full">
<Button <Button
onClick={handleSearch} onClick={handleSearch}
className="w-full h-12 bg-orange-500 hover:bg-orange-600 text-white font-bold text-lg shadow-md transition-all active:scale-95" className="w-full h-12 bg-orange-500 hover:bg-orange-600 text-white font-bold text-lg shadow-md transition-all active:scale-95 rounded-lg"
> >
<Search className="w-5 h-5 mr-2" /> <Search className="w-5 h-5 mr-2" />
{t("home.search.filter")} {t("home.search.filter")}

24
frontend/src/components/job-card.tsx
View file

@ -13,7 +13,6 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { import {
MapPin, MapPin,
Briefcase, Briefcase,
DollarSign,
Clock, Clock,
Building2, Building2,
Heart, Heart,
@ -95,9 +94,10 @@ export function JobCard({ job, isApplied, applicationStatus }: JobCardProps) {
<motion.div <motion.div
whileHover={{ y: -2 }} whileHover={{ y: -2 }}
transition={{ type: "spring", stiffness: 300, damping: 20 }} transition={{ type: "spring", stiffness: 300, damping: 20 }}
className="h-full"
> >
<Card className={`relative hover:shadow-lg transition-all duration-300 border-l-4 h-full flex flex-col ${job.isFeatured <Card className={`relative h-full flex flex-col border-l-4 rounded-xl bg-white shadow-sm hover:shadow-md transition-all duration-300 ${job.isFeatured
? "border-l-amber-500 border-amber-200 shadow-md bg-amber-50/10" ? "border-l-amber-500 border-amber-200 bg-amber-50/10"
: "border-l-primary/20 hover:border-l-primary" : "border-l-primary/20 hover:border-l-primary"
}`}> }`}>
<CardHeader className="pb-4"> <CardHeader className="pb-4">
@ -149,7 +149,7 @@ export function JobCard({ job, isApplied, applicationStatus }: JobCardProps) {
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="space-y-4 flex-1"> <CardContent className="space-y-4 flex-1 flex flex-col">
{/* Job Meta Information */} {/* Job Meta Information */}
{/* Job Meta Information */} {/* Job Meta Information */}
<div className="flex flex-col gap-2 text-sm"> <div className="flex flex-col gap-2 text-sm">
@ -163,7 +163,7 @@ export function JobCard({ job, isApplied, applicationStatus }: JobCardProps) {
<Briefcase className="h-4 w-4 shrink-0 text-muted-foreground" /> <Briefcase className="h-4 w-4 shrink-0 text-muted-foreground" />
<Badge <Badge
variant={getTypeBadgeVariant(job.type)} variant={getTypeBadgeVariant(job.type)}
className="text-xs" className="text-xs font-semibold text-white bg-orange-500 border-transparent"
> >
{getTypeLabel(job.type)} {getTypeLabel(job.type)}
</Badge> </Badge>
@ -178,8 +178,8 @@ export function JobCard({ job, isApplied, applicationStatus }: JobCardProps) {
</div> </div>
{/* Job Description Preview */} {/* Job Description Preview */}
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground leading-relaxed">
<p className="line-clamp-2">{job.description}</p> <p className="line-clamp-3">{job.description}</p>
</div> </div>
{/* Skills/Requirements Preview */} {/* Skills/Requirements Preview */}
@ -202,21 +202,21 @@ export function JobCard({ job, isApplied, applicationStatus }: JobCardProps) {
)} )}
{/* Time Posted */} {/* Time Posted */}
<div className="flex items-center gap-2 text-xs text-muted-foreground"> <div className="flex items-center gap-2 text-xs text-muted-foreground mt-auto">
<Clock className="h-3 w-3" /> <Clock className="h-3 w-3" />
<span>{formatTimeAgo(job.postedAt)}</span> <span>{formatTimeAgo(job.postedAt)}</span>
</div> </div>
</CardContent> </CardContent>
<CardFooter className="pt-4 border-t"> <CardFooter className="pt-4 border-t mt-auto">
<div className="flex gap-2 w-full"> <div className="flex gap-2 w-full">
<Link href={`/jobs/${job.id}`} className="flex-1"> <Link href={`/jobs/${job.id}`} className="flex-1">
<Button variant="outline" className="w-full cursor-pointer"> <Button variant="outline" className="w-full cursor-pointer rounded-lg">
{t('jobs.card.viewDetails')} {t('jobs.card.viewDetails')}
</Button> </Button>
</Link> </Link>
{isApplied ? ( {isApplied ? (
<Button className="flex-1 w-full cursor-default bg-emerald-600 hover:bg-emerald-700 text-white" variant="secondary"> <Button className="flex-1 w-full cursor-default bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg" variant="secondary">
{applicationStatus === 'pending' ? t('jobs.card.applied') : {applicationStatus === 'pending' ? t('jobs.card.applied') :
applicationStatus === 'reviewing' ? t('jobs.card.reviewing') : applicationStatus === 'reviewing' ? t('jobs.card.reviewing') :
applicationStatus === 'interview' ? t('jobs.card.interview') : applicationStatus === 'interview' ? t('jobs.card.interview') :
@ -224,7 +224,7 @@ export function JobCard({ job, isApplied, applicationStatus }: JobCardProps) {
</Button> </Button>
) : ( ) : (
<Link href={`/jobs/${job.id}/apply`} className="flex-1"> <Link href={`/jobs/${job.id}/apply`} className="flex-1">
<Button className="w-full cursor-pointer">{t('jobs.card.apply')}</Button> <Button className="w-full cursor-pointer rounded-lg">{t('jobs.card.apply')}</Button>
</Link> </Link>
)} )}
</div> </div>