made main page

src/pages/Layout/Layout.module.css

@@ -1,4 +1,4 @@
 .layout {
   min-height: 100vh;
-  padding-block: var(--space-8);
+  /*padding-block: var(--space-8);*/
 }

src/pages/Layout/Layout.tsx

@@ -1,5 +1,4 @@
-import { Navigate, Outlet } from "react-router-dom";
+import { Outlet } from "react-router-dom";
-import { useAppSelector } from "../../store/hooks";
 import styles from "./Layout.module.css";
 
 export default function Layout() {

src/pages/Main/Main.module.css

@@ -1,15 +1,48 @@
 .page {
   display: grid;
+  gap: var(--space-12);
+  min-height: 100vh;
+  padding: var(--space-10);
+  align-content: center;
+  background: var(--color-bg);
+}
+
+.hero {
+  display: grid;
+  justify-items: center;
   gap: var(--space-4);
+  text-align: center;
+}
+
+.logo {
+  width: min(540px, 86vw);
+  height: auto;
+  object-fit: contain;
+  filter: drop-shadow(0 24px 56px rgba(53, 216, 255, 0.2));
 }
 
 .title {
   margin: 0;
-  font-size: 32px;
+  font-size: clamp(40px, 8vw, 88px);
-  line-height: 1.15;
+  font-weight: 900;
+  line-height: 0.95;
+  color: var(--color-text);
+  text-shadow: 0 0 32px rgba(53, 216, 255, 0.28);
 }
 
-.text {
+.cards {
-  margin: 0;
+  display: grid;
-  color: var(--color-text-muted);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-6);
+}
+
+@media (max-width: 760px) {
+  .page {
+    gap: var(--space-8);
+    padding-block: var(--space-8);
+  }
+
+  .cards {
+    grid-template-columns: 1fr;
+  }
 }

src/pages/Main/Main.tsx

@@ -1,15 +1,42 @@
-import styles from "./Main.module.css";
 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";
 
 export default function Main() {
   const navigate = useNavigate();
 
   return (
     <main className={styles.page}>
-      <h1 className={styles.title}>Главная</h1>
+      <section className={styles.hero} aria-labelledby="main-title">
-      <p className={styles.text}>Базовая страница приложения готова.</p>
+        <img
-      <button onClick={() => navigate('/picture')}>Go to Picture</button>
+          className={styles.logo}
-      <button onClick={() => navigate('/video')}>Go to Video</button>
+          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>
   );
 }