35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { motion } from "framer-motion";
|
|
|
|
interface ExampleCardProps {
|
|
title: string;
|
|
company: string;
|
|
image: string;
|
|
}
|
|
|
|
function ExampleCard({ title, company, image }: ExampleCardProps) {
|
|
return (
|
|
<div className="flex flex-col gap-4 xl:mb-16 sm:mb-10 mb-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, translateY: 64 }}
|
|
whileInView={{ opacity: 1, translateY: 0 }}
|
|
viewport={{ once: true, margin: "-10%" }}
|
|
transition={{ duration: 1, ease: [0.58, 0.12, 0.27, 0.98] }}
|
|
className="aspect-video bg-cover bg-center bg-no-repeat"
|
|
style={{ backgroundImage: `url('${image}')` }}
|
|
></motion.div>
|
|
<motion.div
|
|
initial={{ opacity: 0, translateY: 64 }}
|
|
whileInView={{ opacity: 1, translateY: 0 }}
|
|
viewport={{ once: true, margin: "-10%" }}
|
|
transition={{ duration: 1, ease: [0.58, 0.12, 0.27, 0.98], delay: 0.2 }}
|
|
className="flex flex-col gap-1"
|
|
>
|
|
<p className="font-medium xl:text-xl text-base font-gilroy">{title}</p>
|
|
<p className="xl:text-sm text-xs">{company}</p>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ExampleCard;
|