feat(desktop): add welcome page to onboarding flow

- Add Welcome step before the 4-step onboarding flow
- Welcome page introduces Multica with brand title (Playfair Display font)
- Display three core principles: Your AI, Your Machine, Your Control
- Add entrance spin animation to MulticaIcon component
- Welcome page has no stepper, only shown after clicking "Start Exploring"

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Naiyuan Qing 2026-02-11 13:46:21 +08:00
parent 4961604f31
commit 22db61876b
11 changed files with 209 additions and 95 deletions

View file

@ -1,5 +1,12 @@
import { cn } from "@multica/ui/lib/utils";
interface MulticaIconProps extends React.ComponentProps<"span"> {
/**
* If true, play a one-time entrance spin animation (2 seconds).
*/
animate?: boolean;
}
/**
* Pure CSS 8-pointed asterisk icon matching the Multica logo.
* Uses currentColor so it adapts to light/dark themes automatically.
@ -7,11 +14,16 @@ import { cn } from "@multica/ui/lib/utils";
*/
export function MulticaIcon({
className,
animate = false,
...props
}: React.ComponentProps<"span">) {
}: MulticaIconProps) {
return (
<span
className={cn("inline-block size-[1em] hover:animate-spin", className)}
className={cn(
"inline-block size-[1em] hover:animate-spin",
animate && "animate-welcome-spin",
className
)}
aria-hidden="true"
{...props}
>