made main page

src/pages/Main/Main.tsx

@@ -1,15 +1,42 @@
+import { useNavigate } from "react-router-dom";
+import GeneratorCard from "../../components/GeneratorCard/GeneratorCard";
+import logo from "../../assets/common/HITGENERATOR-Logo.png";
 import styles from "./Main.module.css";
-import {useNavigate} from "react-router-dom";
 
 export default function Main() {
   const navigate = useNavigate();
 
   return (
     <main className={styles.page}>
-      <h1 className={styles.title}>Главная</h1>
-      <p className={styles.text}>Базовая страница приложения готова.</p>
-      <button onClick={() => navigate('/picture')}>Go to Picture</button>
-      <button onClick={() => navigate('/video')}>Go to Video</button>
+      <section className={styles.hero} aria-labelledby="main-title">
+        <img
+          className={styles.logo}
+          src={logo}
+          alt="ShitGenerator"
+          width="1080"
+          height="608"
+        />
+        <h1 className={styles.title} id="main-title">
+          ShitGenerator
+        </h1>
+      </section>
+
+      <section className={styles.cards} aria-label="Выбор генератора">
+        <GeneratorCard
+          title="Генерация видео"
+          description="Собирай видеоролики из идеи, промпта и нужного визуального направления."
+          label="Видео"
+          accent="cyan"
+          onClick={() => navigate("/video")}
+        />
+        <GeneratorCard
+          title="Генерация картинок"
+          description="Создавай изображения под задачу, стиль и настроение за пару кликов."
+          label="Картинки"
+          accent="violet"
+          onClick={() => navigate("/picture")}
+        />
+      </section>
     </main>
   );
 }