feat: add AuthBranding and OAuthButtons components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/web/src/components/AuthBranding.tsx

@@ -0,0 +1,49 @@
+import { useI18n } from '../lib/i18n';
+
+export default function AuthBranding() {
+  const { t } = useI18n();
+
+  return (
+    <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden items-center justify-center p-12"
+      style={{ background: 'linear-gradient(135deg, var(--fox-amber), var(--fox-orange))' }}>
+      {/* Decorative circles */}
+      <div className="absolute -top-24 -left-24 w-96 h-96 rounded-full opacity-10 bg-white" />
+      <div className="absolute -bottom-32 -right-32 w-[500px] h-[500px] rounded-full opacity-10 bg-white" />
+
+      <div className="relative z-10 max-w-md text-white">
+        {/* Logo */}
+        <div className="w-20 h-20 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center mb-8 shadow-lg">
+          <svg className="w-10 h-10 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M12 2L2 7l10 5 10-5-10-5z" />
+            <path d="M2 17l10 5 10-5" />
+            <path d="M2 12l10 5 10-5" />
+          </svg>
+        </div>
+
+        {/* Product name */}
+        <h1 className="text-4xl font-bold tracking-tight mb-3">
+          {t('auth.productName')}
+        </h1>
+
+        {/* Slogan */}
+        <p className="text-xl text-white/90 mb-10 leading-relaxed">
+          {t('auth.slogan')}
+        </p>
+
+        {/* Feature highlights */}
+        <div className="space-y-4">
+          {['auth.feature1', 'auth.feature2', 'auth.feature3'].map((key) => (
+            <div key={key} className="flex items-start gap-3">
+              <div className="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
+                <svg className="w-3 h-3 text-white" viewBox="0 0 20 20" fill="currentColor">
+                  <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                </svg>
+              </div>
+              <span className="text-white/90 text-[15px] leading-snug">{t(key)}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}