1a9081c534
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 3m29s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 52s
Deploy to Staging / Verify Staging (pull_request) Successful in 9s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 8s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
|
|
interface FeatureCardProps {
|
|
title: string;
|
|
description: string;
|
|
imageSrc: string;
|
|
imageAlt: string;
|
|
href: string;
|
|
}
|
|
|
|
export const FeatureCard = ({ title, description, imageSrc, imageAlt, href }: FeatureCardProps) => {
|
|
return (
|
|
<motion.div
|
|
className="group"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-50px' }}
|
|
transition={{ duration: 0.5 }}
|
|
whileHover={{ y: -5 }}
|
|
>
|
|
<a href={href} className="block">
|
|
<div className="overflow-hidden rounded-lg bg-white/5 border border-white/10 shadow-lg shadow-black/30 hover:border-white/20 hover:shadow-xl hover:shadow-black/40 transition-all duration-300">
|
|
<div className="relative h-56 overflow-hidden">
|
|
<img
|
|
src={imageSrc}
|
|
alt={imageAlt}
|
|
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
|
/>
|
|
</div>
|
|
<div className="p-6">
|
|
<h3 className="text-xl font-bold text-avus mb-2">{title}</h3>
|
|
<p className="text-titanio leading-relaxed">{description}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</motion.div>
|
|
);
|
|
};
|