From 7fd0c447bc8c438a92970965096ee83dcdfa126b Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Mon, 16 Feb 2026 21:31:53 +0100
Subject: [PATCH] feat(branding): implement hand-drawn Copic marker,
 strikethrough, and pen circle effects; redesign guarantee section with logo
 animation

---
 apps/web/src/components/Signature.tsx | 59 +++++++--------------------
 1 file changed, 15 insertions(+), 44 deletions(-)

diff --git a/apps/web/src/components/Signature.tsx b/apps/web/src/components/Signature.tsx
index 240f176..47d59f7 100644
--- a/apps/web/src/components/Signature.tsx
+++ b/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)}>
-      <svg
-        width="200"
-        height="100"
-        viewBox="0 0 200 100"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className="w-full h-auto"
+    <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"
       >
-        {/* M */}
-        <motion.path
-          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"
-          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, ease: "easeInOut" }}
+        <Image
+          src={LogoBlack}
+          alt="Marc Mintel Signature"
+          className="w-full h-auto opacity-90"
+          priority
         />
-        {/* a r c (scribble) */}
-        <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>
+      </motion.div>
     </div>
   );
 };