Implement screenshots in features

frontend/src/pages/home/HomePage.tsx

@@ -3,6 +3,9 @@ import { useUserStore } from "@/state/user";
 import styles from "./home.module.scss";
 import useDownloadAppScreen from "@/core/hooks/useDownloadAppScreen";
 import { MaterialButton, MaterialIcon } from "@/utils/material";
+import generalChatScreenshot from "../../images/screenshots/general-chat.png";
+import dmScreenshot from "../../images/screenshots/dm.png";
+import type { ReactNode } from "react";
 
 function GitHubLink({ children }: { children: React.ReactNode }) {
     return (
@@ -16,6 +19,35 @@ function SupportLink({ children }: { children: React.ReactNode }) {
     );
 }
 
+interface FeatureSectionProps {
+    title: ReactNode;
+    children: ReactNode;
+    screenshot: string;
+    right?: boolean;
+}
+
+function FeatureSection({title, children, screenshot, right = false}: FeatureSectionProps) {
+    const featureText = (
+        <div className={styles.featureText}>
+            <div className={styles.featureTitle}>{title}</div>
+            <div className={styles.featureDesc}>{children}</div>
+        </div>
+    );
+
+    const featureScreenshot = (
+        <div className={styles.featureScreenshotOuter}>
+            <div className={styles.featureScreenshotGlow} />
+            <img src={screenshot} className={styles.featureScreenshot} />
+        </div>
+    )
+
+    return (
+        <div className={`${styles.featureContainer}`}>
+            {right ? <>{featureText}{featureScreenshot}</> : <>{featureScreenshot}{featureText}</>}
+        </div>
+    )
+}
+
 export default function HomePage() {
     const navigate = useNavigate();
     const { user } = useUserStore();
@@ -75,76 +107,18 @@ export default function HomePage() {
                 </section>
 
                 <section className={styles.features}>
-                    <div className={styles.container}>
-                        <h3 className={styles.sectionTitle}>Возможности</h3>
-                        <div className={styles.featuresGrid}>
-                            <div className={styles.featureCard}>
-                                <div className={styles.featureIcon}>
-                                    <MaterialIcon name="security" />
-                                </div>
-                                <h4>End-to-End Шифрование</h4>
-                                <p>
-                                    Ваши личные сообщения защищены современным шифрованием X25519 + AES-GCM.
-                                    Только вы и получатель можете прочитать сообщения.
-                                </p>
-                            </div>
-
-                            <div className={styles.featureCard}>
-                                <div className={styles.featureIcon}>
-                                    <MaterialIcon name="code" />
-                                </div>
-                                <h4>100% открытый код</h4>
-                                <p>
-                                    Весь исходный код доступен на <GitHubLink>GitHub</GitHubLink>. Вы можете проверить безопасность,
-                                    внести изменения или развернуть свой сервер.
-                                </p>
-                            </div>
-
-                            <div className={styles.featureCard}>
-                                <div className={styles.featureIcon}>
-                                    <MaterialIcon name="attach_file" />
-                                </div>
-                                <h4>Обмен Файлами</h4>
-                                <p>
-                                    Отправляйте файлы до 4 ГБ. Файлы в личных сообщениях шифруются.
-                                    В общем чате шифрования нет, так как ваши сообщения могут читать все пользователи FromChat.
-                                </p>
-                            </div>
-
-                            <div className={styles.featureCard}>
-                                <div className={styles.featureIcon}>
-                                    <MaterialIcon name="notifications" />
-                                </div>
-                                <h4>Уведомления</h4>
-                                <p>
-                                    Получайте push-уведомления в браузере и настольном приложении.
-                                    Никогда не пропустите важное сообщение.
-                                </p>
-                            </div>
-
-                            <div className={styles.featureCard}>
-                                <div className={styles.featureIcon}>
-                                    <MaterialIcon name="edit" />
-                                </div>
-                                <h4>Редактирование</h4>
-                                <p>
-                                    Редактируйте и удаляйте свои сообщения. Отвечайте на сообщения
-                                    для лучшего контекста общения.
-                                </p>
-                            </div>
-
-                            <div className={styles.featureCard}>
-                                <div className={styles.featureIcon}>
-                                    <MaterialIcon name="computer" />
-                                </div>
-                                <h4>Кроссплатформенность</h4>
-                                <p>
-                                    Работает в браузере и как настольное приложение для Windows,
-                                    macOS и Linux. Единый интерфейс везде.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
+                    <FeatureSection
+                        title={<>Общий чат</>}
+                        screenshot={generalChatScreenshot}
+                        right
+                    >
+                        Общайтесь со всеми пользователями этого сервера FromChat.
+                    </FeatureSection>
+                    <FeatureSection
+                        title={<>Личные сообщения</>}
+                        screenshot={dmScreenshot}>
+                        Общайтесь с одним человеком.
+                    </FeatureSection>
                 </section>
 
                 <section className={styles.download}>