36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import { StepButton } from '@/components/onboarding/step-button';
|
|
import { StepHeader } from '@/components/onboarding/step-header';
|
|
import { __ } from '@/utils/i18n';
|
|
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>
|
|
);
|
|
}
|