Files
mintel.me/apps/web/src/components/Signature.tsx

37 lines
937 B
TypeScript

"use client";
import React from "react";
import { motion } from "framer-motion";
import { cn } from "../utils/cn";
import Image from "next/image";
import LogoBlack from "../assets/logo/Logo Black Transparent.svg";
interface SignatureProps {
className?: string;
delay?: number;
}
export const Signature: React.FC<SignatureProps> = ({
className,
delay = 0,
}) => {
return (
<div className={cn("relative", className)}>
<motion.div
initial={{ clipPath: "polygon(0 0, 0 0, 0 100%, 0% 100%)" }}
whileInView={{ clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)" }}
viewport={{ once: true }}
transition={{ duration: 2.5, delay: delay, ease: "easeInOut" }}
className="relative"
>
<Image
src={LogoBlack}
alt="Marc Mintel Signature"
className="w-full h-auto opacity-90"
priority
/>
</motion.div>
</div>
);
};