Improve styles, mobile adaptation, restructure code

frontend/src/pages/home/HomePage.tsx

@@ -2,26 +2,50 @@ import { Link, useNavigate } from "react-router-dom";
 import { useUserStore } from "@/state/user";
 import styles from "./home.module.scss";
 import useDownloadAppScreen from "@/core/hooks/useDownloadAppScreen";
-import { MaterialButton, MaterialIcon } from "@/utils/material";
+import { MaterialButton, MaterialIcon, MaterialIconButton } from "@/utils/material";
 import generalChatScreenshot from "../../images/screenshots/general-chat.png";
 import dmScreenshot from "../../images/screenshots/dm.png";
-import telegramIcon from "../../images/telegram.svg";
-import maxIcon from "../../images/max.svg";
 import type { ReactNode } from "react";
 
 const GITHUB_WEB = "https://github.com/fromchat-messenger/web";
 const GITHUB_APP = "https://github.com/fromchat-messenger/app";
 const GITHUB_LICENSE = `${GITHUB_WEB}/blob/main/LICENSE`;
 
-function GitHubLink({ children, className }: { children: React.ReactNode; className?: string }) {
+function GitHubLink({
+    children,
+    className,
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) {
     return (
-        <a href={`${GITHUB_WEB}/tree/main`} target="_blank" rel="noopener noreferrer" className={className}>{children}</a>
+        <a
+            href={`${GITHUB_WEB}/tree/main`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={className}
+        >
+            {children}
+        </a>
     );
 }
 
-function SupportLink({ children, className }: { children: React.ReactNode; className?: string }) {
+function SupportLink({
+    children,
+    className,
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) {
     return (
-        <a href="https://t.me/denis0001-dev" target="_blank" rel="noopener noreferrer" className={className}>{children}</a>
+        <a
+            href="https://t.me/denis0001-dev"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={className}
+        >
+            {children}
+        </a>
     );
 }
 
@@ -32,7 +56,12 @@ interface FeatureSectionProps {
     right?: boolean;
 }
 
-function FeatureSection({title, children, screenshot, right = false}: FeatureSectionProps) {
+function FeatureSection({
+    title,
+    children,
+    screenshot,
+    right = false,
+}: FeatureSectionProps) {
     const featureText = (
         <div className={styles.featureText}>
             <div className={styles.featureTitle}>{title}</div>
@@ -43,7 +72,7 @@ function FeatureSection({title, children, screenshot, right = false}: FeatureSec
     const featureScreenshot = (
         <div className={styles.featureScreenshotOuter}>
             <div className={styles.featureScreenshotGlow} />
-            <img src={screenshot} className={styles.featureScreenshot} />
+            <img src={screenshot} className={styles.featureScreenshot} draggable={false} />
         </div>
     )
 
@@ -71,16 +100,22 @@ export default function HomePage() {
     }
 
     const openBtn = (
-        <MaterialButton variant="filled" onClick={handleGetStarted} icon={isMobile ? "download" : isLoggedIn ? "open_in_new" : "login"}>
+        <MaterialButton
+            variant="filled"
+            onClick={handleGetStarted}
+            icon={
+                isMobile ? "download" : isLoggedIn ? "open_in_new" : "login"
+            }
+            className={styles.headerDownloadButton}
+        >
             {isMobile ? "Скачать" : isLoggedIn ? "Открыть" : "Войти"}
         </MaterialButton>
     );
 
     return (
         <div className={styles.homepage}>
-            <div className={styles.colorSphere} />
             <header className={styles.homepageHeader}>
-                <div className={styles.container}>
+                <div className={styles.headerInner}>
                     <div className={styles.headerContent}>
                         <div className={styles.logo}>
                             <div className={styles.logoIcon} />
@@ -96,6 +131,14 @@ export default function HomePage() {
                         </div>
                         <div className={styles.headerButton}>
                             {openBtn}
+                            {isMobile ? (
+                                <MaterialIconButton 
+                                    variant="filled" 
+                                    onClick={() => navigate("/download-app")} 
+                                    icon="download" 
+                                    className={styles.headerSmallButton} 
+                                />
+                            ) : null}
                         </div>
                     </div>
                 </div>
@@ -103,14 +146,30 @@ export default function HomePage() {
 
             <main>
                 <section className={styles.title}>
+                    <div className={styles.titleLogoWrapper}>
                         <div className={styles.titleLogo} />
+                    </div>
                     <div className={styles.titleContent}>FromChat</div>
                     <div className={styles.titleDesc}>
                         100% бесплатный и открытый мессенджер. Поддерживает self-hosted установку на своём сервере.
                     </div>
                     <div className={styles.titleButtons}>
-                        <MaterialButton variant="filled" onClick={() => navigate("/auth?mode=login")} icon="devices">Открыть веб-версию</MaterialButton>
+                        {isMobile ? null : (
-                        <MaterialButton variant="outlined" onClick={() => navigate("/download-app")} icon="download">Скачать приложение</MaterialButton>
+                            <MaterialButton 
+                                variant="filled" 
+                                onClick={() => navigate("/auth?mode=login")} 
+                                icon="devices"
+                            >
+                                Открыть веб-версию
+                            </MaterialButton>
+                        )}
+                        <MaterialButton
+                            variant={isMobile ? "filled" : "outlined"}
+                            onClick={() => navigate("/download-app")}
+                            icon="download"
+                        >
+                            Скачать приложение
+                        </MaterialButton>
                     </div>
                 </section>
 
@@ -169,10 +228,21 @@ export default function HomePage() {
                                             </MaterialButton>
                                         </a>
                                         <div className={styles.downloadCard}>
-                                            <MaterialIcon name="language" className={styles.downloadCardIcon} />
+                                            <MaterialIcon
-                                            <span className={styles.downloadCardTitle}>Веб-версия</span>
+                                                name="language"
-                                            <span className={styles.downloadCardDesc}>Без установки</span>
+                                                className={styles.downloadCardIcon}
-                                            <MaterialButton variant="outlined" className={styles.downloadCardBtn} onClick={() => navigate("/login")}>
+                                            />
+                                            <span className={styles.downloadCardTitle}>
+                                                Веб-версия
+                                            </span>
+                                            <span className={styles.downloadCardDesc}>
+                                                Без установки
+                                            </span>
+                                            <MaterialButton
+                                                variant="outlined"
+                                                className={styles.downloadCardBtn}
+                                                onClick={() => navigate("/login")}
+                                            >
                                                 <MaterialIcon name="open_in_new" slot="icon" />
                                                 Открыть
                                             </MaterialButton>
@@ -238,7 +308,7 @@ export default function HomePage() {
                         <div className={styles.footerLogo} />
                         <span className={styles.footerBrandName}>FromChat</span>
                     </div>
-                    <p className={styles.footerCopyright}>FromChat © 2025</p>
+                    <p className={styles.footerCopyright}>FromChat © 2026</p>
                 </div>
                 <div className={styles.footerLinks}>
                     <div className={styles.footerSection}>
@@ -250,9 +320,23 @@ export default function HomePage() {
                             <MaterialIcon name="language" className={styles.footerLinkIcon} />
                             Веб-версия
                         </Link>
+                        <a
+                            href={`${GITHUB_WEB}/actions/workflows/build.yml`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={styles.footerLink}
+                        >
+                            <MaterialIcon name="computer" className={styles.footerLinkIcon} />
+                            ПК-клиент
+                        </a>
                     </div>
                     <div className={styles.footerSection}>
-                        <a href={`${GITHUB_APP}/tree/main`} target="_blank" rel="noopener noreferrer" className={styles.footerLink}>
+                        <a
+                            href={`${GITHUB_APP}/tree/main`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={styles.footerLink}
+                        >
                             <MaterialIcon name="android" className={styles.footerLinkIcon} />
                             Исходный код приложения
                         </a>
@@ -260,18 +344,37 @@ export default function HomePage() {
                             <MaterialIcon name="code" className={styles.footerLinkIcon} />
                             Исходный код веб-версии
                         </GitHubLink>
-                        <a href={GITHUB_LICENSE} target="_blank" rel="noopener noreferrer" className={styles.footerLink}>
+                        <a
+                            href={GITHUB_LICENSE}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={styles.footerLink}
+                        >
                             <MaterialIcon name="description" className={styles.footerLinkIcon} />
                             Лицензия
                         </a>
                     </div>
                     <div className={styles.footerSection}>
-                        <a href="https://t.me/fromchat_ch" target="_blank" rel="noopener noreferrer" className={styles.footerLink}>
+                        <a
-                            <span className={`${styles.footerLinkIcon} ${styles.footerLinkIconSvg}`} style={{ maskImage: `url(${telegramIcon})`, WebkitMaskImage: `url(${telegramIcon})` }} />
+                            href="https://t.me/fromchat_ch"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={styles.footerLink}
+                        >
+                            <span
+                                className={`${styles.footerLinkIcon} ${styles.footerLinkIconSvg} ${styles.footerLinkIconSvgTelegram}`}
+                            />
                             Telegram
                         </a>
-                        <a href="https://max.ru/join/c5t6LfnCCPetQSAOshmouEvq9vsjHZT_Lt63kw8YCg0" target="_blank" rel="noopener noreferrer" className={styles.footerLink}>
+                        <a
-                            <span className={`${styles.footerLinkIcon} ${styles.footerLinkIconSvg}`} style={{ maskImage: `url(${maxIcon})`, WebkitMaskImage: `url(${maxIcon})` }} />
+                            href="https://max.ru/join/c5t6LfnCCPetQSAOshmouEvq9vsjHZT_Lt63kw8YCg0"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={styles.footerLink}
+                        >
+                            <span
+                                className={`${styles.footerLinkIcon} ${styles.footerLinkIconSvg} ${styles.footerLinkIconSvgMax}`}
+                            />
                             MAX
                         </a>
                     </div>

frontend/src/pages/home/home.module.scss

@@ -27,9 +27,9 @@ $radius-pill: 9999px;
 }
 
 @mixin section-heading {
-    font-size: 2.5rem;
+    font-size: 40px;
     font-weight: 700;
-    margin-bottom: 1.5rem;
+    margin-bottom: 24px;
     @include gradient-text;
 }
 
@@ -39,47 +39,47 @@ $radius-pill: 9999px;
     margin: 0 auto;
 
     p {
-        font-size: 1.25rem;
+        font-size: 20px;
         line-height: 1.6;
-        margin-bottom: 2.5rem;
+        margin-bottom: 40px;
         opacity: 0.9;
     }
 }
 
+@mixin container {
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 0 32px;
+}
+
 .homepage {
     min-height: 100vh;
     color: $color-dark-on-background;
     font-family: 'Montserrat', sans-serif;
     position: relative;
     background-color: $color-dark-surface;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-drag: none;
 
-    .container {
+    img {
+        -webkit-user-drag: none;
+        user-select: none;
+    }
+
+    header.homepageHeader {
+        display: flex;
+        justify-content: center;
+        padding: 16px;
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+
+        .headerInner {
             max-width: 960px;
-        margin: 0 auto;
-        padding: 0 2rem;
-    }
-
-    .colorSphere {
-        background: $gradient-conic;
-        position: absolute;
             width: 100%;
-        aspect-ratio: 1 / 1;
+            padding: 16px 24px;
-        top: -90vh;
-        opacity: 0.3;
-        left: 0;
-        border-radius: 50%;
-        filter: blur(80px);
-    }
-
-    .homepageHeader {
-        margin: 0 16px;
-        padding: 16px 5px;
             background: rgba($color-dark-surface, 0.8);
             backdrop-filter: blur(10px);
-        position: sticky;
-        top: 16px;
-        z-index: 1000;
-        transition: all 0.3s ease;
             border-radius: 30px;
 
             .headerContent {
@@ -103,7 +103,7 @@ $radius-pill: 9999px;
                     }
 
                     h1 {
-                    font-size: 2rem;
+                        font-size: 32px;
                         font-weight: 700;
                         margin: 0;
                         @include gradient-text;
@@ -115,6 +115,10 @@ $radius-pill: 9999px;
                     align-items: center;
                     gap: 10px;
 
+                    @media (max-width: 730px) {
+                        display: none;
+                    }
+
                     a {
                         display: flex;
                         align-items: center;
@@ -127,16 +131,59 @@ $radius-pill: 9999px;
                     align-items: center;
                     justify-content: center;
                 }
+
+                .headerDownloadButton {
+                    display: block;
+                }
+
+                .headerSmallButton {
+                    display: none;
+                }
+
+                @media (max-width: 450px) {
+                    .headerSmallButton {
+                        display: block;
+                    }
+
+                    .headerDownloadButton {
+                        display: none;
+                    }
+                }
+            }
         }
     }
 
+    main {
         .title {
-        padding: 60px 80px;
+            padding: 60px 0;
             display: flex;
             align-items: center;
             margin-top: 0;
             flex-direction: column;
 
+            .titleLogoWrapper {
+                position: relative;
+                width: 100%;
+                overflow-x: clip;
+                display: flex;
+                justify-content: center;
+
+                &::before {
+                    $size: 1200px;
+
+                    content: '';
+                    background: $gradient-conic;
+                    position: absolute;
+                    width: $size;
+                    height: $size;
+                    bottom: 0;
+                    opacity: 0.3;
+                    left: calc(50% - ($size / 2));
+                    border-radius: 50%;
+                    filter: blur(80px);
+                }
+            }
+
             .titleLogo {
                 width: 120px;
                 height: 120px;
@@ -145,12 +192,15 @@ $radius-pill: 9999px;
                 background-position: center;
                 background-repeat: no-repeat;
                 border-radius: 30px;
+                position: relative;
+                z-index: 1;
             }
 
             .titleContent {
                 font-size: 30pt;
                 font-weight: 700;
                 margin-top: 10px;
+                padding: 0 80px;
                 @include gradient-text;
             }
 
@@ -159,12 +209,14 @@ $radius-pill: 9999px;
                 opacity: 0.8;
                 margin-top: 10px;
                 text-align: center;
+                padding: 0 80px;
             }
 
             .titleButtons {
                 display: flex;
                 gap: 10px;
                 margin-top: 20px;
+                padding: 0 80px;
             }
         }
 
@@ -239,6 +291,10 @@ $radius-pill: 9999px;
         }
 
         .download {
+            .container {
+                @include container;
+            }
+
             .downloadContent {
                 @include section-content;
 
@@ -248,7 +304,7 @@ $radius-pill: 9999px;
 
                 .downloadPlatforms {
                     display: flex;
-                gap: 1.5rem;
+                    gap: 24px;
                     justify-content: center;
                     flex-wrap: wrap;
                 }
@@ -257,8 +313,8 @@ $radius-pill: 9999px;
                     display: flex;
                     flex-direction: column;
                     align-items: center;
-                gap: 0.75rem;
+                    gap: 12px;
-                padding: 2rem 1.5rem;
+                    padding: 32px 24px;
                     min-width: 200px;
                     max-width: 260px;
                     background: rgba($color-dark-surface-container, 0.6);
@@ -273,7 +329,6 @@ $radius-pill: 9999px;
                         border-color: rgba($color-dark-primary, 0.5);
                         box-shadow: 0 0 24px rgba($color-dark-primary, 0.2);
                     }
-            }
 
                     .downloadCardIcon {
                         width: 48px;
@@ -282,18 +337,19 @@ $radius-pill: 9999px;
                     }
 
                     .downloadCardTitle {
-                font-size: 1.25rem;
+                        font-size: 20px;
                         font-weight: 600;
                         @include gradient-text;
                     }
 
                     .downloadCardDesc {
-                font-size: 0.9rem;
+                        font-size: 14px;
                         opacity: 0.8;
                     }
 
                     .downloadCardBtn {
-                margin-top: 0.5rem;
+                        margin-top: 8px;
+                    }
                 }
             }
         }
@@ -301,6 +357,10 @@ $radius-pill: 9999px;
         .cta {
             padding-bottom: 128px;
 
+            .container {
+                @include container;
+            }
+
             .ctaContent {
                 @include section-content;
 
@@ -310,14 +370,15 @@ $radius-pill: 9999px;
 
                 .ctaActions {
                     display: flex;
-                gap: 1rem;
+                    gap: 16px;
                     justify-content: center;
                     flex-wrap: wrap;
                 }
             }
         }
+    }
 
-    .homepageFooter {
+    footer.homepageFooter {
         padding: 0 16px;
         background: $color-dark-surface;
         display: flex;
@@ -334,7 +395,7 @@ $radius-pill: 9999px;
             display: flex;
             flex-direction: column;
             align-items: flex-start;
-            gap: 0.75rem;
+            gap: 12px;
 
             .footerLogoRow {
                 display: flex;
@@ -353,13 +414,13 @@ $radius-pill: 9999px;
             }
 
             .footerBrandName {
-                font-size: 2rem;
+                font-size: 32px;
                 font-weight: 700;
                 @include gradient-text;
             }
 
             .footerCopyright {
-                font-size: 0.875rem;
+                font-size: 14px;
                 color: $color-dark-on-surface-variant;
                 opacity: 0.8;
                 margin: 0;
@@ -375,22 +436,28 @@ $radius-pill: 9999px;
                 display: flex;
                 flex-direction: column;
                 align-items: flex-start;
-                gap: 0.75rem;
+                gap: 12px;
 
                 .footerLink {
                     display: flex;
                     flex-direction: row;
                     align-items: center;
-                    gap: 0.5rem;
+                    gap: 8px;
                     color: $color-dark-on-surface-variant;
                     text-decoration: none;
-                    font-size: 0.95rem;
+                    font-size: 15px;
-                    transition: color 0.2s ease;
+                    transition: color 0.2s ease, transform 0.15s ease;
+                    -webkit-user-drag: none;
+                    user-select: none;
 
                     &:hover {
                         color: $color-dark-on-surface;
                     }
 
+                    &:active {
+                        transform: scale(0.92);
+                    }
+
                     .footerLinkIcon {
                         width: 24px;
                         height: 24px;
@@ -408,7 +475,63 @@ $radius-pill: 9999px;
                         -webkit-mask-repeat: no-repeat;
                         -webkit-mask-position: center;
                     }
+
+                    .footerLinkIconSvgTelegram {
+                        mask-image: url('../../images/telegram.svg');
+                        -webkit-mask-image: url('../../images/telegram.svg');
                     }
+
+                    .footerLinkIconSvgMax {
+                        mask-image: url('../../images/max.svg');
+                        -webkit-mask-image: url('../../images/max.svg');
+                    }
+                }
+            }
+        }
+
+        @media (max-width: 635px) {
+            flex-direction: column-reverse;
+            align-items: flex-start;
+            padding: 32px;
+        }
+    }
+
+    @media (max-width: 635px) {
+        main {
+            .title {
+                .titleContent,
+                .titleDesc,
+                .titleButtons {
+                    padding: 0 16px;
+                }
+            }
+
+            .features {
+                padding: 0 16px;
+
+                .featureContainer {
+                    flex-direction: column;
+                    align-items: center;
+                    padding: 0 16px;
+
+                    .featureText {
+                        order: 1;
+                        text-align: center;
+
+                        .featureDesc {
+                            text-align: center;
+                        }
+                    }
+
+                    .featureScreenshotOuter {
+                        order: 2;
+                    }
+                }
+            }
+
+            .download .container,
+            .cta .container {
+                padding: 0 16px;
             }
         }
     }