frontPanel/src/pages/startPage/stepOne.tsx

import {Box, Button, Typography, useTheme} from "@mui/material";
import CreationCard from "@ui_kit/CreationCard";
import quizCreationImage1 from "../../assets/quiz-creation-1.png";
import quizCreationImage2 from "../../assets/quiz-creation-2.png";
import { useState } from "react";
export default function StepOne() {
    const theme = useTheme();
    return (
        <>
    <Box sx={{
        display: "flex",
        gap: "3.4%",
        mt: "60px",
    }}>
        <Button variant='text'>
            <CreationCard
                header="Создание квиз-опроса"
                text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
                image={quizCreationImage1}
            />
        </Button>
        <Button variant='text'>
            <CreationCard
                header="Создание анкеты"
                text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
                image={quizCreationImage2}
            />
        </Button>
    </Box>
    </>
    )
}