erik/octto-engenharia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: cards de projetos totalmente clicaveis com cursor-pointer

Browse Source
This commit is contained in:
Erik
2025-11-27 17:54:56 -03:00
parent 61d8f707dc
commit 7fb9d88b5b
4 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/(public)/page.tsx
View File

@@ -287,7 +287,7 @@ export default function Home() {
}))
: FALLBACK_PROJECTS
).map((project) => (
<div key={project.id} className="group relative overflow-hidden rounded-xl h-[400px] cursor-pointer">
<Link key={project.id} href={`/projetos/${project.id}`} className="group relative overflow-hidden rounded-xl h-[400px] cursor-pointer block">
<div className="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-110" style={{ backgroundImage: `url('${project.image}')` }}></div>
<div className="absolute inset-0 bg-linear-to-t from-black/90 via-black/20 to-transparent opacity-80 group-hover:opacity-90 transition-opacity"></div>
<div className="absolute bottom-0 left-0 p-8 w-full transform translate-y-4 group-hover:translate-y-0 transition-transform">
@@ -299,7 +299,7 @@ export default function Home() {
</span>
</div>
</div>
</div>
</Link>
))}
</div>
</div>

8
frontend/src/app/(public)/projetos/page.tsx
View File

@@ -168,7 +168,7 @@ export default function ProjetosPage() {
{!loading && filteredProjects.length > 0 && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{filteredProjects.map((project) => (
<div key={project.id} className="group bg-white dark:bg-secondary rounded-xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-white/10 flex flex-col">
<Link key={project.id} href={`/projetos/${project.id}`} className="group bg-white dark:bg-secondary rounded-xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-white/10 flex flex-col cursor-pointer">
<div className="relative h-64 overflow-hidden">
<div
className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
@@ -196,11 +196,11 @@ export default function ProjetosPage() {
{project.description}
</p>
)}
<Link href={`/projetos/${project.id}`} className="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all mt-auto">
<span className="inline-flex items-center gap-2 text-primary font-bold group-hover:gap-3 transition-all mt-auto">
<T>Ver Detalhes</T> <i className="ri-arrow-right-line"></i>
</Link>
</span>
</div>
</div>
</Link>
))}
</div>
)}

4
frontend/src/app/[locale]/page.tsx
View File

@@ -281,7 +281,7 @@ export default function Home() {
}))
: FALLBACK_PROJECTS
).map((project) => (
<div key={project.id} className="group relative overflow-hidden rounded-xl h-[400px] cursor-pointer">
<Link key={project.id} href={`${prefix}/projetos/${project.id}`} className="group relative overflow-hidden rounded-xl h-[400px] cursor-pointer block">
<div className="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-110" style={{ backgroundImage: `url('${project.image}')` }}></div>
<div className="absolute inset-0 bg-linear-to-t from-black/90 via-black/20 to-transparent opacity-80 group-hover:opacity-90 transition-opacity"></div>
<div className="absolute bottom-0 left-0 p-8 w-full transform translate-y-4 group-hover:translate-y-0 transition-transform">
@@ -293,7 +293,7 @@ export default function Home() {
</span>
</div>
</div>
</div>
</Link>
))}
</div>
</div>

8
frontend/src/app/[locale]/projetos/page.tsx
View File

@@ -195,7 +195,7 @@ export default function ProjetosPage() {
const description = project.description || (locale === 'pt' ? 'Descrição disponível em breve.' : locale === 'es' ? 'Descripción disponible pronto.' : 'Description coming soon.');
return (
<div key={project.id} className="group bg-white dark:bg-secondary rounded-xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-white/10 flex flex-col">
<Link key={project.id} href={`${prefix}/projetos/${project.id}`} className="group bg-white dark:bg-secondary rounded-xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 dark:border-white/10 flex flex-col cursor-pointer">
<div className="relative h-64 overflow-hidden">
<div className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110" style={{ backgroundImage: `url('${image}')` }}></div>
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/0 transition-colors"></div>
@@ -212,11 +212,11 @@ export default function ProjetosPage() {
<p className="text-gray-600 dark:text-gray-400 text-sm mb-6 line-clamp-3 grow">
{description}
</p>
<Link href={`${prefix}/projetos/${project.id}`} className="inline-flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all mt-auto">
<span className="inline-flex items-center gap-2 text-primary font-bold group-hover:gap-3 transition-all mt-auto">
{t('projects.viewDetails')} <i className="ri-arrow-right-line"></i>
</Link>
</span>
</div>
</div>
</Link>
);
})}
</div>