79 lines
3.0 KiB
TypeScript
79 lines
3.0 KiB
TypeScript
import { ebookMeta } from "@/content/ebook";
|
|
|
|
export function BookCover({ className = "" }: { className?: string }) {
|
|
return (
|
|
<div
|
|
className={`cover-float relative w-full max-w-[min(100%,300px)] sm:max-w-[320px] ${className}`}
|
|
>
|
|
<div
|
|
className="absolute -inset-6 rounded-[2rem] bg-gradient-to-br from-teal-500/50 via-amber-400/40 to-sky-500/50 opacity-60 blur-2xl"
|
|
aria-hidden
|
|
/>
|
|
<div className="relative aspect-[3/4] overflow-hidden rounded-2xl shadow-2xl ring-1 ring-white/25">
|
|
<div
|
|
className="absolute inset-0 bg-gradient-to-br from-teal-800 via-teal-700 to-sky-900"
|
|
aria-hidden
|
|
/>
|
|
<div
|
|
className="absolute inset-0 opacity-30"
|
|
style={{
|
|
backgroundImage:
|
|
"repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(255,255,255,0.06) 24px)",
|
|
}}
|
|
aria-hidden
|
|
/>
|
|
<div
|
|
className="absolute inset-0 bg-[radial-gradient(ellipse_at_30%_12%,rgba(255,255,255,0.22),transparent_55%)]"
|
|
aria-hidden
|
|
/>
|
|
<div
|
|
className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-black/50 to-transparent"
|
|
aria-hidden
|
|
/>
|
|
<div
|
|
className="absolute left-0 top-0 h-full w-4 bg-gradient-to-r from-black/35 to-transparent"
|
|
aria-hidden
|
|
/>
|
|
<div className="absolute right-5 top-6 opacity-20" aria-hidden>
|
|
<GlobeMark className="h-24 w-24 text-white" />
|
|
</div>
|
|
<div className="relative flex h-full flex-col justify-between p-7 text-white sm:p-8">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<p className="text-[10px] font-bold uppercase tracking-[0.28em] text-teal-200/90">
|
|
Digital nomad
|
|
</p>
|
|
<span className="rounded-full border border-white/20 bg-white/10 px-2 py-0.5 font-mono text-[10px] text-white/80">
|
|
EN
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<h2 className="font-serif text-[1.7rem] font-medium leading-[1.1] tracking-tight sm:text-[1.9rem]">
|
|
{ebookMeta.title}
|
|
</h2>
|
|
<p className="mt-3 text-xs leading-relaxed text-teal-100/85 sm:text-sm">
|
|
{ebookMeta.subtitle}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="font-mono text-[10px] tracking-wider text-white/50">
|
|
48.8566° N · Work from anywhere
|
|
</p>
|
|
<p className="mt-2 text-xs font-medium text-white/70">
|
|
{ebookMeta.author}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function GlobeMark({ className }: { className?: string }) {
|
|
return (
|
|
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="0.75">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" />
|
|
</svg>
|
|
);
|
|
}
|