71 lines
2.8 KiB
JavaScript
71 lines
2.8 KiB
JavaScript
import React from 'react'
|
|
|
|
const FALLBACK = 'https://files.skinbase.org/default/missing_lg.webp'
|
|
|
|
export default function HomeHero({ artwork }) {
|
|
if (!artwork) {
|
|
return (
|
|
<section className="relative flex min-h-[62vh] max-h-[420px] w-full items-end overflow-hidden bg-nova-900 md:min-h-[38vh] md:max-h-[460px]">
|
|
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-nova-900 via-nova-900/60 to-transparent" />
|
|
<div className="relative z-10 w-full px-6 pb-7 sm:px-10 lg:px-16">
|
|
<h1 className="text-2xl font-bold tracking-tight text-white sm:text-4xl">
|
|
Skinbase Nova
|
|
</h1>
|
|
<p className="mt-2 max-w-xl text-sm text-soft">
|
|
Discover. Create. Inspire.
|
|
</p>
|
|
<div className="mt-4 flex flex-wrap gap-3">
|
|
<a href="/discover/trending" className="rounded-xl bg-accent px-5 py-2 text-sm font-semibold text-white shadow-lg transition hover:brightness-110">Explore Trending</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
const src = artwork.thumb_lg || artwork.thumb || FALLBACK
|
|
|
|
return (
|
|
<section className="group relative flex min-h-[62vh] max-h-[420px] w-full items-end overflow-hidden bg-nova-900 md:min-h-[38vh] md:max-h-[460px]">
|
|
{/* Background image */}
|
|
<img
|
|
src={src}
|
|
alt={artwork.title}
|
|
className="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
|
|
fetchPriority="high"
|
|
decoding="async"
|
|
onError={(e) => { e.currentTarget.src = FALLBACK }}
|
|
/>
|
|
|
|
{/* Gradient overlay */}
|
|
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-nova-900 via-nova-900/55 to-transparent" />
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 w-full px-6 pb-7 sm:px-10 lg:px-16">
|
|
<p className="mb-1.5 text-xs font-semibold uppercase tracking-widest text-accent">
|
|
Featured Artwork
|
|
</p>
|
|
<h1 className="text-2xl font-bold tracking-tight text-white drop-shadow sm:text-4xl lg:text-5xl">
|
|
{artwork.title}
|
|
</h1>
|
|
<p className="mt-1.5 text-sm text-soft">
|
|
by <a href={artwork.url} className="text-nova-200 hover:text-white transition">{artwork.author}</a>
|
|
</p>
|
|
<div className="mt-4 flex flex-wrap gap-3">
|
|
<a
|
|
href="/discover/trending"
|
|
className="rounded-xl bg-accent px-5 py-2 text-sm font-semibold text-white shadow-lg transition hover:brightness-110"
|
|
>
|
|
Explore Trending
|
|
</a>
|
|
<a
|
|
href={artwork.url}
|
|
className="rounded-xl border border-nova-600 px-5 py-2 text-sm font-semibold text-nova-200 shadow transition hover:border-nova-400 hover:text-white"
|
|
>
|
|
View Artwork
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|