maro
45261a0461
- Next.js 16 App Router site with the ANOUMA design system - Payload CMS (PostgreSQL) for offers, events, posts and page content - WebRTC video-call system with custom signaling server - SMTP email reminders and booking-request notifications - Customer accounts, calendar-based availability, and booking workflow
54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import Link from "next/link";
|
|
import { ImagePlaceholder } from "@/components/ImagePlaceholder";
|
|
import type { ImageMood } from "@/lib/angebote";
|
|
|
|
type AngebotCardProps = {
|
|
href: string;
|
|
title: string;
|
|
tagline: string;
|
|
mood: ImageMood;
|
|
imageSrc?: string;
|
|
imageAlt?: string;
|
|
size?: "default" | "large";
|
|
};
|
|
|
|
export function AngebotCard({
|
|
href,
|
|
title,
|
|
tagline,
|
|
mood,
|
|
imageSrc,
|
|
imageAlt,
|
|
size = "default",
|
|
}: AngebotCardProps) {
|
|
return (
|
|
<Link href={href} className="group block">
|
|
<div
|
|
className={`relative overflow-hidden rounded-[2.5rem] ${
|
|
size === "large" ? "aspect-[4/3]" : "aspect-[4/5]"
|
|
}`}
|
|
>
|
|
<ImagePlaceholder
|
|
mood={mood}
|
|
label={title}
|
|
src={imageSrc}
|
|
alt={imageAlt}
|
|
shape="soft"
|
|
className="h-full w-full transition-transform duration-700 ease-out group-hover:scale-[1.04]"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-anouma-plum/70 via-anouma-plum/0 to-transparent" />
|
|
<div className="absolute inset-x-0 bottom-0 p-7">
|
|
<h3 className="font-serif text-2xl font-medium text-white">{title}</h3>
|
|
<p className="mt-2 text-sm leading-relaxed text-white/90">{tagline}</p>
|
|
<span className="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-white/95">
|
|
Mehr erfahren
|
|
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" aria-hidden="true" className="transition-transform duration-300 group-hover:translate-x-1">
|
|
<path d="M1 5h11.5M8 1l4.5 4L8 9" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|