From 2048c17eeeff54c2a31bd8592e1f503f6c0a49ae Mon Sep 17 00:00:00 2001
From: Oleg Urin <olegurin76@mail.ru>
Date: Fri, 25 Sep 2026 12:33:07 +0300
Subject: [PATCH] made main page

---
 src/pages/Layout/Layout.module.css |  2 +-
 src/pages/Layout/Layout.tsx        |  3 +--
 src/pages/Main/Main.module.css     | 43 ++++++++++++++++++++++++++----
 src/pages/Main/Main.tsx            | 37 +++++++++++++++++++++----
 4 files changed, 72 insertions(+), 13 deletions(-)

diff --git a/src/pages/Layout/Layout.module.css b/src/pages/Layout/Layout.module.css
index fa93146..5e4bcb9 100644
--- a/src/pages/Layout/Layout.module.css
+++ b/src/pages/Layout/Layout.module.css
@@ -1,4 +1,4 @@
 .layout {
   min-height: 100vh;
-  padding-block: var(--space-8);
+  /*padding-block: var(--space-8);*/
 }
diff --git a/src/pages/Layout/Layout.tsx b/src/pages/Layout/Layout.tsx
index 99cd0d0..ff6955d 100644
--- a/src/pages/Layout/Layout.tsx
+++ b/src/pages/Layout/Layout.tsx
@@ -1,5 +1,4 @@
-import { Navigate, Outlet } from "react-router-dom";
-import { useAppSelector } from "../../store/hooks";
+import { Outlet } from "react-router-dom";
 import styles from "./Layout.module.css";
 
 export default function Layout() {
diff --git a/src/pages/Main/Main.module.css b/src/pages/Main/Main.module.css
index bcfecc7..67889cd 100644
--- a/src/pages/Main/Main.module.css
+++ b/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;
-  line-height: 1.15;
+  font-size: clamp(40px, 8vw, 88px);
+  font-weight: 900;
+  line-height: 0.95;
+  color: var(--color-text);
+  text-shadow: 0 0 32px rgba(53, 216, 255, 0.28);
 }
 
-.text {
-  margin: 0;
-  color: var(--color-text-muted);
+.cards {
+  display: grid;
+  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;
+  }
 }
diff --git a/src/pages/Main/Main.tsx b/src/pages/Main/Main.tsx
index d8c4a25..68f27fc 100644
--- a/src/pages/Main/Main.tsx
+++ b/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>
   );
 }