Initial commit: ANOUMA website with Payload CMS, WebRTC meetings, and booking system
- 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
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user