ourworld_web/www_mycelium_cloud2
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add hover opacity transitions and bottom margin to bento grid components

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-18 18:17:19 +02:00
parent 204625b9a8
commit 2fdcb3697d
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/BentoReviews.tsx
View File

@@ -71,7 +71,7 @@ export function BentoReviews() {
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.8, delay: 0.2 }} transition={{ duration: 0.8, delay: 0.2 }}
className="mx-auto max-w-4xl mt-6 " className="mx-auto max-w-4xl mt-6 mb-8"
> >
<P className="text-center" color="primary"> <P className="text-center" color="primary">
A robust infrastructure layer for autonomous AI agents, our technology stack A robust infrastructure layer for autonomous AI agents, our technology stack

4
src/components/ui/bento-grid.tsx
View File

@@ -51,10 +51,10 @@ export const BentoGridItem = ({
loop loop
muted muted
playsInline playsInline
className="w-full h-full object-cover" className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
/> />
) : img ? ( ) : img ? (
<Image src={img} alt={title as string} width={300} height={300} className="w-full h-full object-cover" /> <Image src={img} alt={title as string} width={300} height={300} className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300" />
) : null} ) : null}
</div> </div>
<div className="p-4 transition duration-200 group-hover/bento:translate-x-2"> <div className="p-4 transition duration-200 group-hover/bento:translate-x-2">