feat(ui): complete structural rewrite of content components to strict engineering blueprint aesthetic

apps/web/src/components/ArticleBlockquote.tsx

@@ -20,9 +20,16 @@ interface BlockquoteProps {
 }
 
 export const ArticleBlockquote: React.FC<BlockquoteProps> = ({ children, className = '' }) => (
-  <blockquote className={`not-prose border-l-4 border-slate-900 pl-6 italic text-slate-700 my-10 text-xl md:text-2xl font-serif ${className}`}>
-    {children}
-  </blockquote>
+  <div className={`not-prose my-16 py-8 border-y-2 border-slate-900 grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8 ${className}`}>
+    <div className="md:col-span-1 flex md:items-start md:justify-end pt-2">
+      <svg className="w-8 h-8 md:w-10 md:h-10 text-emerald-500" viewBox="0 0 24 24" fill="currentColor"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" /></svg>
+    </div>
+    <blockquote className="md:col-span-11 relative flex items-center">
+      <div className="text-2xl md:text-3xl font-serif text-slate-900 italic leading-[1.4] md:leading-snug tracking-tight m-0">
+        {children}
+      </div>
+    </blockquote>
+  </div>
 );
 
 interface CodeBlockProps {