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

apps/web/src/components/Effects/ArchitectureVisualizer.tsx

@@ -59,19 +59,24 @@ const Node: React.FC<{
 );
 
 const Connector: React.FC<{ active?: boolean }> = ({ active }) => (
-  <div className="flex-1 w-px md:w-auto h-8 md:h-[1px] bg-slate-100 relative min-h-[20px] md:min-w-[40px] shrink-0">
+  <div className="flex-1 w-px md:w-auto h-8 md:h-[1px] bg-slate-50 relative min-h-[24px] md:min-h-0 md:min-w-[40px] shrink-0">
     {active && (
       <motion.div
         initial={{ scaleX: 0, scaleY: 0 }}
         animate={{ scaleX: 1, scaleY: 1 }}
-        className="absolute inset-0 bg-blue-300 origin-top md:origin-left"
+        className="absolute inset-0 bg-blue-300/50 origin-top md:origin-left mix-blend-multiply"
+        style={{
+          // Visual correction to prevent sub-pixel rendering thickening
+          height: "100%",
+          width: "100%",
+        }}
       />
     )}
     <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
       <div
         className={cn(
-          "w-1 h-1 rounded-full",
-          active ? "bg-blue-300 animate-pulse" : "bg-slate-100",
+          "w-1 h-1 rounded-full border border-white", // Added border white to make it look smaller/cleaner
+          active ? "bg-blue-400 animate-pulse scale-75" : "bg-slate-100", // Reduced scale and deeper color
         )}
       />
     </div>

apps/web/src/components/Landing/ComparisonRow.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { ArrowRight } from "lucide-react";
 import { Reveal } from "../Reveal";
 import { Label, H3, LeadText } from "../Typography";
+import { Strikethrough } from "../Strikethrough";
 import { cn } from "../../utils/cn";
 
 interface ComparisonRowProps {
@@ -38,11 +39,11 @@ export const ComparisonRow: React.FC<ComparisonRowProps> = ({
           )}
         >
           <div className="flex-1 p-8 md:p-10 bg-slate-50/50 rounded-2xl text-slate-400 border border-transparent w-full">
-            <Label className="mb-4 line-through decoration-red-500">
-              {negativeLabel}
+            <Label className="mb-4">
+              <Strikethrough delay={delay + 0.2}>{negativeLabel}</Strikethrough>
             </Label>
-            <LeadText className="line-through decoration-red-500 leading-snug">
-              {negativeText}
+            <LeadText className="leading-snug">
+              <Strikethrough delay={delay + 0.3}>{negativeText}</Strikethrough>
             </LeadText>
           </div>
 

apps/web/src/components/Marker.tsx

@@ -1,14 +1,9 @@
 "use client";
 
-import React from "react";
+import React, { useId, useMemo } from "react";
 import { motion } from "framer-motion";
 import { cn } from "../utils/cn";
 
-/**
- * TECHNICAL MARKER COMPONENT
- * Implements the "hand-drawn marker" effect.
- * Animates in when entering the viewport.
- */
 interface MarkerProps {
   children: React.ReactNode;
   delay?: number;
@@ -16,74 +11,171 @@ interface MarkerProps {
   color?: string;
 }
 
+/**
+ * Copic Marker Component
+ *
+ * Uses hand-drawn filled polygon paths (NOT rects or strokes) for an
+ * organic, human feel. Each highlight band is a wobbly shape with
+ * bezier curves, not a perfect rectangle. Second strokes are offset
+ * to simulate imperfect re-highlighting.
+ */
+
+// Seeded PRNG for SSR-safe randomness
+function createRng(seed: string) {
+  let s = 0;
+  for (let i = 0; i < seed.length; i++) {
+    s = ((s << 5) - s + seed.charCodeAt(i)) | 0;
+  }
+  return () => {
+    s = (s * 16807 + 0) % 2147483647;
+    return (s & 0x7fffffff) / 0x7fffffff;
+  };
+}
+
+/**
+ * Generate a hand-drawn highlight band path.
+ * Instead of a rectangle, we trace an organic polygon with wobbly edges.
+ *
+ * The shape goes: left edge → top edge (left to right) → right edge → bottom edge (right to left)
+ * Each edge has 1-2 control points for subtle curves.
+ *
+ * ViewBox: 0 0 100 100 with preserveAspectRatio="none"
+ * So x=0..100 maps to text width, y=0..100 maps to text height.
+ */
+function generateBandPath(rng: () => number, bandIndex: number) {
+  // Vertical position: center band in the text height
+  // First band centered around y=50, second shifted up or down
+  const yOffset = bandIndex === 0 ? 0 : (rng() - 0.5) * 20; // -10 to +10 shift
+  const yCenter = 50 + yOffset;
+
+  // Band thickness: covers ~40-50% of text height
+  const halfHeight = 20 + rng() * 8; // 20-28 units (40-56% of viewBox)
+  const yTop = yCenter - halfHeight;
+  const yBottom = yCenter + halfHeight;
+
+  // Horizontal extent: slight random overshoot/undershoot
+  const xStart = -2 + rng() * 3; // -2 to 1
+  const xEnd = 99 + rng() * 3; // 99 to 102
+
+  // Generate wobbly top edge points (left to right)
+  const topWobble1 = yTop + (rng() - 0.5) * 6;
+  const topWobble2 = yTop + (rng() - 0.5) * 6;
+  const topWobble3 = yTop + (rng() - 0.5) * 6;
+
+  // Generate wobbly bottom edge points (right to left)
+  const botWobble1 = yBottom + (rng() - 0.5) * 6;
+  const botWobble2 = yBottom + (rng() - 0.5) * 6;
+  const botWobble3 = yBottom + (rng() - 0.5) * 6;
+
+  // Slight angle on left/right edges
+  const leftTopY = yTop + (rng() - 0.5) * 4;
+  const leftBotY = yBottom + (rng() - 0.5) * 4;
+  const rightTopY = yTop + (rng() - 0.5) * 4;
+  const rightBotY = yBottom + (rng() - 0.5) * 4;
+
+  // Build the path:
+  // Start at top-left, trace top edge with curves, down right edge,
+  // trace bottom edge with curves back left, close.
+  const path = [
+    // Start top-left
+    `M ${xStart},${leftTopY}`,
+    // Top edge: 3 curve segments left→right
+    `C ${xStart + 15},${topWobble1} ${xStart + 30},${topWobble1} ${33},${topWobble2}`,
+    `C ${45},${topWobble2} ${55},${topWobble3} ${67},${topWobble3}`,
+    `C ${78},${topWobble3} ${xEnd - 10},${rightTopY} ${xEnd},${rightTopY}`,
+    // Right edge down
+    `L ${xEnd + (rng() - 0.5) * 2},${rightBotY}`,
+    // Bottom edge: 3 curve segments right→left
+    `C ${xEnd - 10},${botWobble1} ${78},${botWobble1} ${67},${botWobble2}`,
+    `C ${55},${botWobble2} ${45},${botWobble3} ${33},${botWobble3}`,
+    `C ${xStart + 30},${botWobble3} ${xStart + 15},${leftBotY} ${xStart},${leftBotY}`,
+    // Close
+    `Z`,
+  ].join(" ");
+
+  return path;
+}
+
 export const Marker: React.FC<MarkerProps> = ({
   children,
   delay = 0,
   className = "",
-  color = "rgba(255,235,59,0.7)",
+  color = "rgba(250, 204, 21, 0.5)",
 }) => {
+  const id = useId();
+  const filterId = `marker-rough-${id.replace(/:/g, "")}`;
+
+  const bands = useMemo(() => {
+    const rng = createRng(id);
+    const numBands = rng() > 0.5 ? 2 : 1;
+    const result = [];
+
+    for (let i = 0; i < numBands; i++) {
+      result.push({
+        d: generateBandPath(rng, i),
+        delay: delay + i * 0.15,
+        duration: 0.4 + rng() * 0.15,
+      });
+    }
+    return result;
+  }, [id, delay]);
+
   return (
     <span className={cn("relative inline px-1", className)}>
       <svg
-        className="absolute inset-x-0 bottom-0 top-0 h-full w-full pointer-events-none z-[-1]"
+        className="absolute inset-0 h-full w-full pointer-events-none z-[-1] overflow-visible mix-blend-multiply"
         preserveAspectRatio="none"
         viewBox="0 0 100 100"
         xmlns="http://www.w3.org/2000/svg"
         aria-hidden="true"
       >
-        {/* Organic Stroke 1: Main body */}
-        <motion.path
-          d="M 0,85 C 10,87 25,82 40,84 C 55,86 75,81 90,83 C 95,84 100,85 100,85"
-          vectorEffect="non-scaling-stroke"
-          initial={{ pathLength: 0, opacity: 0 }}
-          whileInView={{ pathLength: 1, opacity: 1 }}
-          viewport={{ once: true, margin: "-5%" }}
-          transition={{
-            duration: 1.5,
-            delay: delay + 0.1,
-            ease: [0.23, 1, 0.32, 1],
-          }}
-          stroke={color}
-          strokeWidth="60"
-          strokeLinecap="round"
-          fill="none"
-        />
-        {/* Organic Stroke 2: Variation for overlap */}
-        <motion.path
-          d="M 5,82 C 20,80 40,85 60,82 C 80,79 95,84 100,83"
-          vectorEffect="non-scaling-stroke"
-          initial={{ pathLength: 0, opacity: 0 }}
-          whileInView={{ pathLength: 1, opacity: 0.6 }}
-          viewport={{ once: true, margin: "-5%" }}
-          transition={{
-            duration: 1.8,
-            delay: delay + 0.3,
-            ease: [0.23, 1, 0.32, 1],
-          }}
-          stroke={color}
-          strokeWidth="35"
-          strokeLinecap="round"
-          fill="none"
-        />
-        {/* Organic Stroke 3: Rough edge details */}
-        <motion.path
-          d="M 0,88 C 15,90 35,85 55,87 C 75,89 90,84 100,86"
-          vectorEffect="non-scaling-stroke"
-          initial={{ pathLength: 0, opacity: 0 }}
-          whileInView={{ pathLength: 1, opacity: 0.4 }}
-          viewport={{ once: true, margin: "-5%" }}
-          transition={{
-            duration: 1.2,
-            delay: delay + 0.2,
-            ease: [0.23, 1, 0.32, 1],
-          }}
-          stroke={color}
-          strokeWidth="15"
-          strokeLinecap="round"
-          fill="none"
-        />
+        <defs>
+          <filter id={filterId} x="-5%" y="-5%" width="110%" height="110%">
+            {/* Very subtle edge wobble — alcohol ink bleed, not brush fraying */}
+            <feTurbulence
+              type="fractalNoise"
+              baseFrequency="0.04 0.3"
+              numOctaves="2"
+              seed={Math.abs(id.charCodeAt(1) || 42)}
+              result="noise"
+            />
+            <feDisplacementMap
+              in="SourceGraphic"
+              in2="noise"
+              scale="1.5"
+              xChannelSelector="R"
+              yChannelSelector="G"
+            />
+          </filter>
+        </defs>
+
+        {bands.map((band, i) => (
+          <motion.path
+            key={i}
+            d={band.d}
+            fill={color}
+            filter={`url(#${filterId})`}
+            initial={{ scaleX: 0, opacity: 0 }}
+            whileInView={{ scaleX: 1, opacity: 1 }}
+            viewport={{ once: true, margin: "-10%" }}
+            transition={{
+              scaleX: {
+                duration: band.duration,
+                delay: band.delay,
+                ease: [0.4, 0, 0.2, 1],
+              },
+              opacity: {
+                duration: 0.1,
+                delay: band.delay,
+              },
+            }}
+            style={{ transformOrigin: "left center" }}
+          />
+        ))}
       </svg>
-      <span className="relative z-10 text-inherit">{children}</span>
+      <span className="relative z-10 font-semibold" style={{ color: "#000" }}>
+        {children}
+      </span>
     </span>
   );
 };

apps/web/src/components/PenCircle.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import React, { useId, useMemo } from "react";
+import { motion } from "framer-motion";
+import { cn } from "../utils/cn";
+
+interface PenCircleProps {
+  children: React.ReactNode;
+  delay?: number;
+  className?: string;
+  color?: string;
+}
+
+/**
+ * Ballpoint Pen Circle Component
+ *
+ * Draws a hand-drawn ellipse around children using SVG.
+ * Key: uses preserveAspectRatio="none" so the ellipse stretches
+ * to match the element dimensions regardless of text length.
+ */
+
+function createRng(seed: string) {
+  let s = 0;
+  for (let i = 0; i < seed.length; i++) {
+    s = ((s << 5) - s + seed.charCodeAt(i)) | 0;
+  }
+  return () => {
+    s = (s * 16807 + 0) % 2147483647;
+    return (s & 0x7fffffff) / 0x7fffffff;
+  };
+}
+
+function generateCirclePath(rng: () => number) {
+  // We draw an ellipse in a 0-100 x 0-100 viewBox.
+  // preserveAspectRatio="none" will stretch it to fit the element.
+  const cx = 50;
+  const cy = 50;
+
+  // Radii in viewBox units — will be stretched by the element
+  const rx = 50;
+  const ry = 50;
+
+  // Wobble for organic feel
+  const w = () => (rng() - 0.5) * 6;
+
+  const k = 0.5522847;
+  const kx = rx * k;
+  const ky = ry * k;
+
+  // 4 cardinal points with wobble
+  const top = { x: cx + w(), y: cy - ry + w() * 0.5 };
+  const right = { x: cx + rx + w() * 0.3, y: cy + w() };
+  const bottom = { x: cx + w(), y: cy + ry + w() * 0.5 };
+  const left = { x: cx - rx + w() * 0.3, y: cy + w() };
+
+  // End slightly offset from start for imperfect closure
+  const endOffX = (rng() - 0.5) * 8;
+  const endOffY = (rng() - 0.5) * 4;
+
+  return [
+    `M ${top.x},${top.y}`,
+    `C ${top.x + kx + w()},${top.y + w()} ${right.x + w()},${right.y - ky + w()} ${right.x},${right.y}`,
+    `C ${right.x + w()},${right.y + ky + w()} ${bottom.x + kx + w()},${bottom.y + w()} ${bottom.x},${bottom.y}`,
+    `C ${bottom.x - kx + w()},${bottom.y + w()} ${left.x + w()},${left.y + ky + w()} ${left.x},${left.y}`,
+    `C ${left.x + w()},${left.y - ky + w()} ${top.x - kx + w()},${top.y + w()} ${top.x + endOffX},${top.y + endOffY}`,
+  ].join(" ");
+}
+
+export const PenCircle: React.FC<PenCircleProps> = ({
+  children,
+  delay = 0,
+  className = "",
+  color = "rgba(37, 99, 235, 0.65)", // Blue ballpoint pen
+}) => {
+  const id = useId();
+
+  const path = useMemo(() => {
+    const rng = createRng(id);
+    return generateCirclePath(rng);
+  }, [id]);
+
+  return (
+    <span className={cn("relative inline-block px-2 py-1", className)}>
+      <svg
+        className="absolute pointer-events-none overflow-visible"
+        preserveAspectRatio="none"
+        viewBox="-5 -5 110 110"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        style={{
+          top: "-6px",
+          left: "-8px",
+          width: "calc(100% + 16px)",
+          height: "calc(100% + 12px)",
+          zIndex: 10,
+        }}
+      >
+        <motion.path
+          d={path}
+          initial={{ pathLength: 0, opacity: 0 }}
+          whileInView={{ pathLength: 1, opacity: 1 }}
+          viewport={{ once: true, margin: "-5%" }}
+          transition={{
+            pathLength: {
+              duration: 0.7,
+              delay: delay,
+              ease: [0.4, 0, 0.2, 1],
+            },
+            opacity: {
+              duration: 0.1,
+              delay: delay,
+            },
+          }}
+          stroke={color}
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          fill="none"
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+      {children}
+    </span>
+  );
+};

apps/web/src/components/Signature.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import { cn } from "../utils/cn";
+
+interface SignatureProps {
+  className?: string;
+  delay?: number;
+}
+
+export const Signature: React.FC<SignatureProps> = ({
+  className,
+  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"
+      >
+        {/* 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" }}
+        />
+        {/* 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>
+    </div>
+  );
+};

apps/web/src/components/Strikethrough.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import React, { useId, useMemo } from "react";
+import { motion } from "framer-motion";
+import { cn } from "../utils/cn";
+
+interface StrikethroughProps {
+  children: string; // Enforce string children for splitting
+  delay?: number;
+  className?: string;
+  color?: string;
+}
+
+/**
+ * Hand-drawn Strikethrough Component
+ *
+ * NOW SUPPORTS MULTI-LINE TEXT!
+ *
+ * Strategy: Splits the text into individual words. Each word is wrapped
+ * in a span with its own SVG strikethrough. This allows the text to
+ * wrap naturally across lines, and each word carries its strikethrough
+ * with it.
+ */
+
+function createRng(seed: string) {
+  let s = 0;
+  for (let i = 0; i < seed.length; i++) {
+    s = ((s << 5) - s + seed.charCodeAt(i)) | 0;
+  }
+  return () => {
+    s = (s * 16807 + 0) % 2147483647;
+    return (s & 0x7fffffff) / 0x7fffffff;
+  };
+}
+
+function generateStrikePath(rng: () => number) {
+  // Simple approach: just a slightly wobbly line from left to right
+  // through vertical center (y=50).
+  const points: { x: number; y: number }[] = [];
+  const numPoints = 4; // Fewer points for shorter word segments
+
+  for (let i = 0; i <= numPoints; i++) {
+    const x = (i / numPoints) * 100;
+    const y = 55 + (rng() - 0.5) * 15; // ±7.5 units wobble
+    points.push({ x, y });
+  }
+
+  // Build a smooth path through all points
+  let d = `M ${points[0].x},${points[0].y}`;
+  for (let i = 1; i < points.length - 1; i++) {
+    const midX = (points[i].x + points[i + 1].x) / 2;
+    const midY = (points[i].y + points[i + 1].y) / 2;
+    d += ` Q ${points[i].x},${points[i].y} ${midX},${midY}`;
+  }
+  const last = points[points.length - 1];
+  d += ` L ${last.x},${last.y}`;
+
+  return d;
+}
+
+const WordStrike: React.FC<{
+  word: string;
+  index: number;
+  baseDelay: number;
+  color: string;
+  seed: string;
+}> = ({ word, index, baseDelay, color, seed }) => {
+  // Unique seed per word so they look different
+  const uniqueSeed = `${seed}-${index}-${word}`;
+
+  const path = useMemo(() => {
+    const rng = createRng(uniqueSeed);
+    return generateStrikePath(rng);
+  }, [uniqueSeed]);
+
+  return (
+    <span className="relative inline-block whitespace-nowrap">
+      <svg
+        className="absolute inset-0 w-full h-full pointer-events-none overflow-visible"
+        preserveAspectRatio="none"
+        viewBox="0 0 100 100"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        style={{ zIndex: 10 }}
+      >
+        <motion.path
+          d={path}
+          initial={{ pathLength: 0, opacity: 0 }}
+          whileInView={{ pathLength: 1, opacity: 1 }}
+          viewport={{ once: true, margin: "-5%" }}
+          transition={{
+            pathLength: {
+              duration: 0.4,
+              // Stagger words slightly
+              delay: baseDelay + index * 0.05,
+              ease: "easeOut",
+            },
+            opacity: { duration: 0.1, delay: baseDelay + index * 0.05 },
+          }}
+          stroke={color}
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          fill="none"
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+      {word}
+    </span>
+  );
+};
+
+export const Strikethrough: React.FC<StrikethroughProps> = ({
+  children,
+  delay = 0,
+  className = "",
+  color = "rgba(220, 50, 50, 0.8)",
+}) => {
+  const id = useId();
+
+  // Split by spaces but preserve them as separate elements for spacing
+  // Actually, we can just split by space and rejoin with non-struck spaces
+  const words = children.split(" ");
+
+  return (
+    <span className={cn("relative inline", className)}>
+      {words.map((word, i) => (
+        <React.Fragment key={i}>
+          <WordStrike
+            word={word}
+            index={i}
+            baseDelay={delay}
+            color={color}
+            seed={id}
+          />
+          {i < words.length - 1 && " "}
+        </React.Fragment>
+      ))}
+    </span>
+  );
+};