feat: implement industrial optimizations, hybrid dev workflow, and simplified reveal animations

apps/web/src/components/Marker.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+
+/**
+ * TECHNICAL MARKER COMPONENT
+ * Implements the "hand-drawn marker" effect.
+ * Animates in when entering the viewport.
+ */
+interface MarkerProps {
+  children: React.ReactNode;
+  delay?: number;
+  className?: string;
+  color?: string;
+}
+
+export const Marker: React.FC<MarkerProps> = ({
+  children,
+  delay = 0,
+  className = "",
+  color = "rgba(255,235,59,0.95)",
+}) => {
+  return (
+    <span className={`relative inline-block px-1 ${className}`}>
+      <motion.span
+        initial={{ scaleX: 0, opacity: 0 }}
+        whileInView={{ scaleX: 1, opacity: 1 }}
+        viewport={{ once: true, margin: "-5%" }}
+        transition={{
+          duration: 1.2,
+          delay: delay + 0.1,
+          ease: [0.23, 1, 0.32, 1],
+        }}
+        className="absolute inset-0 z-[-1] -skew-x-6 rotate-[-1deg] translate-y-1 transform-gpu origin-left"
+        style={{ backgroundColor: color }}
+        aria-hidden="true"
+      />
+      {children}
+    </span>
+  );
+};