StickerAI-Front/src/screens/onboarding/OnboardingWelcome.tsx

import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { images } from '../../assets';
import customAnalyticsService from '../../services/customAnalyticsService';
import { getCurrentUserId } from '../../constants/user';
import { getTranslation } from '../../constants/translations';
import styles from './OnboardingWelcome.module.css';

const OnboardingWelcome: React.FC = () => {
  const navigate = useNavigate();

  useEffect(() => {
    customAnalyticsService.trackEvent({
      telegram_id: getCurrentUserId(),
      event_category: 'navigation',
      event_name: 'view_onboarding_welcome'
    });
  }, []);

  const handleNext = () => {
    customAnalyticsService.trackEvent({
      telegram_id: getCurrentUserId(),
      event_category: 'onboarding',
      event_name: 'welcome_next_click'
    });
    navigate('/onboarding/how-to');
  };

  return (
    <div className={styles.root}>
      <div className={styles.imageBlock}>
        <img
          src={images.onboardingWelcome}
          alt="Онбординг"
          className={styles.image}
          draggable={false}
        />
      </div>
      <div className={styles.contentWrapper}>
        <div className={styles.textContent}>
          <h1 className={styles.title}>
            Добро пожаловать<br />в Sticker Generator
          </h1>
          <div className={styles.description}>
            Создавайте уникальные стикеры<br />
            из фотографий с помощью<br />
            искусственного интеллекта
          </div>
        </div>
        <div className={styles.bottomContent}>
          <div className={styles.progress}>
            <span className={`${styles.dot} ${styles.dotActive}`}></span>
            <span className={styles.dot}></span>
            <span className={styles.dot}></span>
          </div>
          <button className={styles.button} onClick={handleNext}>
            Дальше
          </button>
        </div>
      </div>
    </div>
  );
};

export default OnboardingWelcome;