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
34 lines
1.5 KiB
TypeScript
34 lines
1.5 KiB
TypeScript
import * as React from 'react';
|
|
import { Reveal } from '../Reveal';
|
|
|
|
interface HeroItemProps {
|
|
number: string;
|
|
title: string;
|
|
description: string;
|
|
delay?: number;
|
|
}
|
|
|
|
export const HeroItem: React.FC<HeroItemProps> = ({ number, title, description, delay = 0 }) => {
|
|
return (
|
|
<Reveal delay={delay}>
|
|
<div className="group flex gap-6 md:gap-8 p-6 md:p-8 border border-transparent hover:border-slate-100 rounded-2xl transition-all duration-500 hover:bg-slate-50/50 relative overflow-hidden">
|
|
{/* Animated Bottom Line */}
|
|
<div className="absolute bottom-0 left-8 right-8 h-px bg-slate-200 scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left"></div>
|
|
|
|
<div className="absolute inset-0 bg-gradient-to-r from-slate-50/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
<span className="text-xs font-bold uppercase tracking-[0.2em] text-slate-300 group-hover:text-slate-900 transition-colors pt-1.5 relative z-10">
|
|
{number}
|
|
</span>
|
|
<div className="space-y-2 relative z-10">
|
|
<h3 className="text-2xl md:text-4xl font-bold text-slate-900 tracking-tight group-hover:tracking-tighter transition-all duration-500">
|
|
{title}
|
|
</h3>
|
|
<p className="text-lg md:text-xl text-slate-400 font-serif italic leading-snug group-hover:text-slate-600 transition-colors duration-500">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
);
|
|
};
|