a954575397
* [#858,site][xl]: add Examples to the Navbar, rename gallery to showcases, remove examples from showcases, move github stars to the navbar, add view on github button to the hero section, reduce padding on buttons, add RHS image to the hero * [#858,site][xl]: make sidebar consistent on all pages * [site][xs]: fix ts error on GitHub button component * [site][xs]: fix external links on navbar needing two clicks to open * [site, hero][xs]: align RHS image to the top
25 lines
980 B
TypeScript
25 lines
980 B
TypeScript
export default function ShowcasesItem({ item }) {
|
|
return (
|
|
<a
|
|
className="rounded overflow-hidden group relative border-1 shadow-lg"
|
|
target="_blank"
|
|
href={item.href}
|
|
>
|
|
<div
|
|
className="bg-cover bg-no-repeat bg-top aspect-video w-full group-hover:blur-sm group-hover:scale-105 transition-all duration-200"
|
|
style={{ backgroundImage: `url(${item.image})` }}
|
|
>
|
|
<div className="w-full h-full bg-black opacity-0 group-hover:opacity-50 transition-all duration-200"></div>
|
|
</div>
|
|
<div>
|
|
<div className="opacity-0 group-hover:opacity-100 absolute top-0 bottom-0 right-0 left-0 transition-all duration-200 px-2 flex items-center justify-center">
|
|
<div className="text-center text-primary-dark">
|
|
<span className="text-xl font-semibold">{item.title}</span>
|
|
<p className="text-base font-medium">{item.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
);
|
|
}
|