30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import { StepButton } from '@/components/onboarding/step-button';
|
|
import { StepHeader } from '@/components/onboarding/step-header';
|
|
import { Bird } from 'lucide-react';
|
|
|
|
interface StepWelcomeProps {
|
|
onContinue: () => void;
|
|
}
|
|
|
|
export function StepWelcome({ onContinue }: StepWelcomeProps) {
|
|
return (
|
|
<div className="flex animate-in flex-col items-center text-center duration-500 fade-in slide-in-from-bottom-4">
|
|
<StepHeader
|
|
icon={Bird}
|
|
iconContainerClassName="bg-gradient-to-br from-black to-zinc-700"
|
|
title="Welcome to</br>Whisper Money"
|
|
description="Take control of your finances with privacy-first money tracking. Let's set up your account in just a few minutes."
|
|
large
|
|
/>
|
|
|
|
<div className="flex w-full flex-col gap-4 sm:w-auto">
|
|
<StepButton text="Let's Get Started" onClick={onContinue} />
|
|
|
|
<p className="text-sm text-muted-foreground">
|
|
This will take less than 5 minutes
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|