Migrate saju service UI

src/pages/saju/_shell/DesktopHero.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import Mascot from './Mascot';
+import OrnamentBloom from './OrnamentBloom';
+import { IconPaw } from './Icons';
+
+export default function DesktopHero({
+  title,
+  subtitle,
+  accent = '#D4AF37',
+  bubble,
+  mascotVariant = 'full',
+}) {
+  return (
+    <section className="mt-wash" style={{ position: 'relative', padding: '56px 36px 64px', overflow: 'hidden' }}>
+      <div style={{ maxWidth: 1400, margin: '0 auto', position: 'relative', zIndex: 2 }}>
+        <div style={{ textAlign: 'center' }}>
+          <div className="bloom-row" style={{ color: accent, display: 'inline-flex', alignItems: 'center', gap: 12 }}>
+            <svg width="60" height="6" viewBox="0 0 60 6">
+              <path d="M0 3 L56 3" stroke={accent} strokeWidth="1" />
+              <circle cx="58" cy="3" r="2" fill={accent} />
+            </svg>
+            <OrnamentBloom size={22} color={accent} />
+            <svg width="60" height="6" viewBox="0 0 60 6">
+              <circle cx="2" cy="3" r="2" fill={accent} />
+              <path d="M4 3 L60 3" stroke={accent} strokeWidth="1" />
+            </svg>
+          </div>
+          <h1 className="font-title" style={{
+            margin: '14px 0 0', fontSize: 72, color: '#1F2A44',
+            letterSpacing: '-0.04em', lineHeight: 1,
+          }}>{title}</h1>
+          <div style={{
+            marginTop: 18, fontSize: 16, color: '#6B6B6B',
+            letterSpacing: '-0.01em',
+          }}>{subtitle}</div>
+        </div>
+
+        {bubble && (
+          <div style={{ position: 'absolute', right: 220, top: 36, maxWidth: 210 }}>
+            <div style={{
+              background: '#FBF7EF', border: '1px solid rgba(31,42,68,0.12)',
+              borderRadius: 18, padding: '15px 17px',
+              fontSize: 13, color: '#1F2A44', lineHeight: 1.65, letterSpacing: '-0.01em',
+              boxShadow: '0 4px 14px rgba(31,42,68,0.08)', position: 'relative',
+            }}>
+              {bubble}
+              <div style={{
+                position: 'absolute', right: -7, bottom: 18,
+                width: 14, height: 14, background: '#FBF7EF',
+                borderRight: '1px solid rgba(31,42,68,0.12)',
+                borderBottom: '1px solid rgba(31,42,68,0.12)',
+                transform: 'rotate(-45deg)',
+              }} />
+              <div style={{ textAlign: 'right', marginTop: 4, color: '#B89530', opacity: 0.7 }}>
+                <IconPaw size={11} />
+              </div>
+            </div>
+          </div>
+        )}
+
+        <Mascot variant={mascotVariant} size={220} style={{
+          position: 'absolute', right: -10, top: -8, width: 220, pointerEvents: 'none',
+          filter: 'drop-shadow(0 8px 24px rgba(31,42,68,0.18))',
+        }} />
+      </div>
+    </section>
+  );
+}