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 : FALLBACK_PROJECTS
).map((project) => ( ).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-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 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"> <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> </span>
</div> </div>
</div> </div>
</div> </Link>
))} ))}
</div> </div>
</div> </div>

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

@@ -168,7 +168,7 @@ export default function ProjetosPage() {
{!loading && filteredProjects.length > 0 && ( {!loading && filteredProjects.length > 0 && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{filteredProjects.map((project) => ( {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="relative h-64 overflow-hidden">
<div <div
className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110" 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} {project.description}
</p> </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> <T>Ver Detalhes</T> <i className="ri-arrow-right-line"></i>
</span>
</div>
</Link> </Link>
</div>
</div>
))} ))}
</div> </div>
)} )}

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

@@ -281,7 +281,7 @@ export default function Home() {
})) }))
: FALLBACK_PROJECTS : FALLBACK_PROJECTS
).map((project) => ( ).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-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 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"> <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> </span>
</div> </div>
</div> </div>
</div> </Link>
))} ))}
</div> </div>
</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.'); const description = project.description || (locale === 'pt' ? 'Descrição disponível em breve.' : locale === 'es' ? 'Descripción disponible pronto.' : 'Description coming soon.');
return ( 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="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-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> <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"> <p className="text-gray-600 dark:text-gray-400 text-sm mb-6 line-clamp-3 grow">
{description} {description}
</p> </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> {t('projects.viewDetails')} <i className="ri-arrow-right-line"></i>
</span>
</div>
</Link> </Link>
</div>
</div>
); );
})} })}
</div> </div>