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

"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>
  );
};