Marc Mintel
103d71851c
Some checks failed
🧪 CI (QA) / 🧪 Quality Assurance (push) Failing after 1m3s
- Restructure to pnpm monorepo (site moved to apps/web) - Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config - Implement Docker service architecture (Varnish, Directus, Gatekeeper) - Setup environment-aware Gitea Actions deployment
51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
import * as React from 'react';
|
|
import Link from 'next/link';
|
|
import { Reveal } from '../Reveal';
|
|
|
|
interface ServiceCardProps {
|
|
title: string;
|
|
description: string;
|
|
linkHref?: string;
|
|
linkLabel?: string;
|
|
delay?: number;
|
|
}
|
|
|
|
export const ServiceCard: React.FC<ServiceCardProps> = ({
|
|
title,
|
|
description,
|
|
linkHref,
|
|
linkLabel,
|
|
delay = 0,
|
|
}) => {
|
|
return (
|
|
<Reveal delay={delay}>
|
|
<div className="group relative p-10 md:p-12 border border-slate-100 rounded-3xl hover:border-slate-900 transition-all duration-700 bg-white hover:shadow-2xl hover:shadow-slate-100/50 overflow-hidden">
|
|
{/* Decorative Corner */}
|
|
<div className="absolute top-0 right-0 w-32 h-32 border-t border-r border-slate-100 rounded-tr-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
|
|
<div className="absolute top-8 right-8 w-2 h-2 bg-slate-900 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-700 delay-100"></div>
|
|
|
|
{/* Decorative background text */}
|
|
<div className="absolute -right-4 -bottom-4 text-8xl md:text-9xl font-bold text-slate-50 select-none group-hover:text-slate-100 transition-colors duration-700 -z-10">
|
|
{title.charAt(0)}
|
|
</div>
|
|
|
|
<h3 className="text-4xl md:text-6xl font-bold text-slate-900 mb-6 tracking-tighter group-hover:tracking-tight transition-all duration-700">
|
|
{title}
|
|
</h3>
|
|
<p className="text-xl md:text-2xl text-slate-500 font-serif italic mb-10 leading-tight max-w-3xl group-hover:text-slate-700 transition-colors duration-700">
|
|
{description}
|
|
</p>
|
|
{linkHref && linkLabel && (
|
|
<Link
|
|
href={linkHref}
|
|
className="inline-flex items-center gap-4 text-slate-900 font-bold text-[10px] uppercase tracking-[0.2em] group/link"
|
|
>
|
|
{linkLabel}
|
|
<div className="w-8 h-px bg-slate-200 group-hover/link:bg-slate-900 group-hover/link:w-16 transition-all duration-500"></div>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</Reveal>
|
|
);
|
|
};
|