Brand.tsx 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. export function Brand({ compact = false }: { compact?: boolean }) {
  2. return (
  3. <div className={`brand ${compact ? 'brand--compact' : ''}`} aria-label="星痕智能课程工坊">
  4. <span className="brand-mark" aria-hidden="true">
  5. <svg
  6. className="brand-mark-svg"
  7. viewBox="0 0 44 26"
  8. fill="none"
  9. xmlns="http://www.w3.org/2000/svg"
  10. >
  11. <defs>
  12. <linearGradient id="brandGoldDot" x1="0%" y1="0%" x2="100%" y2="100%">
  13. <stop offset="0%" stopColor="#deb66c" />
  14. <stop offset="100%" stopColor="#b58735" />
  15. </linearGradient>
  16. <linearGradient id="brandArcTrail" x1="0%" y1="0%" x2="100%" y2="0%">
  17. <stop offset="0%" stopColor="#8292a8" />
  18. <stop offset="60%" stopColor="#8fa0b5" />
  19. <stop offset="100%" stopColor="#a5b5cb" />
  20. </linearGradient>
  21. </defs>
  22. <circle cx="8" cy="18" r="3.6" fill="url(#brandGoldDot)" />
  23. <path
  24. d="M 14.2 14.2 C 20.2 7.2, 30.2 4.6, 41 10"
  25. stroke="url(#brandArcTrail)"
  26. strokeWidth="1.8"
  27. strokeLinecap="round"
  28. />
  29. </svg>
  30. </span>
  31. <span className="brand-text">
  32. <strong className="brand-title">星痕</strong>
  33. {!compact && <small className="brand-sub">XINGHEN</small>}
  34. </span>
  35. </div>
  36. )
  37. }