feat(branding): implement hand-drawn Copic marker, strikethrough, and pen circle effects; redesign guarantee section with logo animation

apps/web/src/components/Signature.tsx

@@ -3,6 +3,8 @@
 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;
@@ -14,52 +16,21 @@ export const Signature: React.FC<SignatureProps> = ({
   delay = 0,
 }) => {
   return (
-    <div className={cn("relative text-slate-900", className)}>
+    <div className={cn("relative", className)}>
-      <svg
+      <motion.div
-        width="200"
+        initial={{ clipPath: "polygon(0 0, 0 0, 0 100%, 0% 100%)" }}
-        height="100"
+        whileInView={{ clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)" }}
-        viewBox="0 0 200 100"
+        viewport={{ once: true }}
-        fill="none"
+        transition={{ duration: 2.5, delay: delay, ease: "easeInOut" }}
-        xmlns="http://www.w3.org/2000/svg"
+        className="relative"
-        className="w-full h-auto"
       >
-        {/* M */}
+        <Image
-        <motion.path
+          src={LogoBlack}
-          d="M20 50 C 25 30, 30 20, 40 25 C 45 35, 30 60, 25 70 C 20 80, 40 50, 50 40 C 60 30, 70 30, 60 55 C 55 65, 50 75, 65 70"
+          alt="Marc Mintel Signature"
-          stroke="currentColor"
+          className="w-full h-auto opacity-90"
-          strokeWidth="2"
+          priority
-          strokeLinecap="round"
-          initial={{ pathLength: 0, opacity: 0 }}
-          whileInView={{ pathLength: 1, opacity: 1 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.8, delay: delay, ease: "easeInOut" }}
         />
-        {/* a r c (scribble) */}
+      </motion.div>
-        <motion.path
-          d="M65 70 C 75 65, 80 60, 90 70 C 95 75, 85 80, 80 75 C 75 70, 95 65, 100 70 C 105 75, 110 70, 120 65"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          initial={{ pathLength: 0, opacity: 0 }}
-          whileInView={{ pathLength: 1, opacity: 1 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.6, delay: delay + 0.6, ease: "easeInOut" }}
-        />
-        {/* Mintel (scribble + underline) */}
-        <motion.path
-          d="M130 50 C 135 40, 140 30, 150 40 C 160 50, 140 80, 130 90 C 120 100, 180 80, 190 75"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          initial={{ pathLength: 0, opacity: 0 }}
-          whileInView={{ pathLength: 1, opacity: 1 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.8, delay: delay + 1.0, ease: "easeInOut" }}
-        />
-      </svg>
-      <div className="mt-2 font-serif italic text-sm text-slate-500">
-        Marc Mintel
-      </div>
     </div>
   );
 };