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.titleLogo} />
+                    <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,285 +39,346 @@ $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 {
-        max-width: 960px;
+        -webkit-user-drag: none;
-        margin: 0 auto;
+        user-select: none;
-        padding: 0 2rem;
     }
 
-    .colorSphere {
+    header.homepageHeader {
-        background: $gradient-conic;
+        display: flex;
-        position: absolute;
+        justify-content: center;
-        width: 100%;
+        padding: 16px;
-        aspect-ratio: 1 / 1;
-        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;
+        top: 0;
         z-index: 1000;
-        transition: all 0.3s ease;
-        border-radius: 30px;
 
-        .headerContent {
+        .headerInner {
-            display: flex;
+            max-width: 960px;
-            justify-content: space-between;
+            width: 100%;
-            align-items: center;
+            padding: 16px 24px;
+            background: rgba($color-dark-surface, 0.8);
+            backdrop-filter: blur(10px);
+            border-radius: 30px;
 
-            .logo {
+            .headerContent {
                 display: flex;
+                justify-content: space-between;
                 align-items: center;
-                gap: 10px;
 
-                .logoIcon {
+                .logo {
-                    width: 40px;
-                    height: 40px;
-                    background-image: url('../../images/logo_square.svg');
-                    background-size: cover;
-                    background-position: center;
-                    background-repeat: no-repeat;
-                    border-radius: 12px;
-                }
-
-                h1 {
-                    font-size: 2rem;
-                    font-weight: 700;
-                    margin: 0;
-                    @include gradient-text;
-                }
-            }
-
-            .headerCenterLinks {
-                display: flex;
-                align-items: center;
-                gap: 10px;
-
-                a {
                     display: flex;
                     align-items: center;
                     gap: 10px;
-                }
-            }
 
-            .headerButton {
+                    .logoIcon {
-                display: flex;
+                        width: 40px;
-                align-items: center;
+                        height: 40px;
-                justify-content: center;
+                        background-image: url('../../images/logo_square.svg');
-            }
+                        background-size: cover;
-        }
+                        background-position: center;
-    }
+                        background-repeat: no-repeat;
-
+                        border-radius: 12px;
-    .title {
-        padding: 60px 80px;
-        display: flex;
-        align-items: center;
-        margin-top: 0;
-        flex-direction: column;
-
-        .titleLogo {
-            width: 120px;
-            height: 120px;
-            background-image: url('../../images/logo_square.svg');
-            background-size: cover;
-            background-position: center;
-            background-repeat: no-repeat;
-            border-radius: 30px;
-        }
-
-        .titleContent {
-            font-size: 30pt;
-            font-weight: 700;
-            margin-top: 10px;
-            @include gradient-text;
-        }
-
-        .titleDesc {
-            font-size: 16pt;
-            opacity: 0.8;
-            margin-top: 10px;
-            text-align: center;
-        }
-
-        .titleButtons {
-            display: flex;
-            gap: 10px;
-            margin-top: 20px;
-        }
-    }
-
-    .features {
-        display: flex;
-        flex-direction: column;
-        gap: 50px;
-        overflow-x: clip;
-
-        .featureContainer {
-            display: flex;
-            flex-direction: row;
-            gap: 20px;
-            padding: 0 16px;
-            align-items: center;
-            margin-left: auto;
-            margin-right: auto;
-            max-width: 700px;
-
-            .featureText {
-                display: flex;
-                flex-direction: column;
-                gap: 10px;
-                flex-grow: 1;
-                flex-shrink: 1;
-
-                .featureTitle {
-                    font-size: 30pt;
-                    font-weight: 700;
-                    line-height: normal;
-                    @include gradient-text;
-                }
-
-                .featureDesc {
-                    text-align: left;
-                    font-size: 15pt;
-                }
-            }
-
-            .featureScreenshotOuter {
-                position: relative;
-
-                .featureScreenshotGlow {
-                    $size: 400px;
-
-                    @keyframes rotateGradient {
-                        from { transform: rotate(0deg); }
-                        to { transform: rotate(360deg); }
                     }
 
+                    h1 {
+                        font-size: 32px;
+                        font-weight: 700;
+                        margin: 0;
+                        @include gradient-text;
+                    }
+                }
+
+                .headerCenterLinks {
+                    display: flex;
+                    align-items: center;
+                    gap: 10px;
+
+                    @media (max-width: 730px) {
+                        display: none;
+                    }
+
+                    a {
+                        display: flex;
+                        align-items: center;
+                        gap: 10px;
+                    }
+                }
+
+                .headerButton {
+                    display: flex;
+                    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 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;
-                    top: calc(50% - ($size / 2));
+                    bottom: 0;
-                    opacity: 0.6;
+                    opacity: 0.3;
                     left: calc(50% - ($size / 2));
                     border-radius: 50%;
                     filter: blur(80px);
-                    z-index: 0;
-                    will-change: transform;
-                    animation: rotateGradient 8s linear infinite;
-                }
-
-                .featureScreenshot {
-                    max-width: 300px;
-                    z-index: 50;
-                    position: relative;
-                }
-            }
-        }
-    }
-
-    .download {
-        .downloadContent {
-            @include section-content;
-
-            h3 {
-                @include section-heading;
-            }
-
-            .downloadPlatforms {
-                display: flex;
-                gap: 1.5rem;
-                justify-content: center;
-                flex-wrap: wrap;
-            }
-
-            .downloadCard {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                gap: 0.75rem;
-                padding: 2rem 1.5rem;
-                min-width: 200px;
-                max-width: 260px;
-                background: rgba($color-dark-surface-container, 0.6);
-                border: 1px solid rgba($color-dark-outline, 0.3);
-                border-radius: $radius-card;
-                text-decoration: none;
-                color: inherit;
-                transition: all 0.3s ease;
-
-                &:hover {
-                    background: rgba($color-dark-surface-container-high, 0.8);
-                    border-color: rgba($color-dark-primary, 0.5);
-                    box-shadow: 0 0 24px rgba($color-dark-primary, 0.2);
                 }
             }
 
-            .downloadCardIcon {
+            .titleLogo {
-                width: 48px;
+                width: 120px;
-                height: 48px;
+                height: 120px;
-                color: $color-dark-primary;
+                background-image: url('../../images/logo_square.svg');
+                background-size: cover;
+                background-position: center;
+                background-repeat: no-repeat;
+                border-radius: 30px;
+                position: relative;
+                z-index: 1;
             }
 
-            .downloadCardTitle {
+            .titleContent {
-                font-size: 1.25rem;
+                font-size: 30pt;
-                font-weight: 600;
+                font-weight: 700;
+                margin-top: 10px;
+                padding: 0 80px;
                 @include gradient-text;
             }
 
-            .downloadCardDesc {
+            .titleDesc {
-                font-size: 0.9rem;
+                font-size: 16pt;
                 opacity: 0.8;
+                margin-top: 10px;
+                text-align: center;
+                padding: 0 80px;
             }
 
-            .downloadCardBtn {
+            .titleButtons {
-                margin-top: 0.5rem;
-            }
-        }
-    }
-
-    .cta {
-        padding-bottom: 128px;
-
-        .ctaContent {
-            @include section-content;
-
-            h3 {
-                @include section-heading;
-            }
-
-            .ctaActions {
                 display: flex;
-                gap: 1rem;
+                gap: 10px;
-                justify-content: center;
+                margin-top: 20px;
-                flex-wrap: wrap;
+                padding: 0 80px;
+            }
+        }
+
+        .features {
+            display: flex;
+            flex-direction: column;
+            gap: 50px;
+            overflow-x: clip;
+
+            .featureContainer {
+                display: flex;
+                flex-direction: row;
+                gap: 20px;
+                padding: 0 16px;
+                align-items: center;
+                margin-left: auto;
+                margin-right: auto;
+                max-width: 700px;
+
+                .featureText {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 10px;
+                    flex-grow: 1;
+                    flex-shrink: 1;
+
+                    .featureTitle {
+                        font-size: 30pt;
+                        font-weight: 700;
+                        line-height: normal;
+                        @include gradient-text;
+                    }
+
+                    .featureDesc {
+                        text-align: left;
+                        font-size: 15pt;
+                    }
+                }
+
+                .featureScreenshotOuter {
+                    position: relative;
+
+                    .featureScreenshotGlow {
+                        $size: 400px;
+
+                        @keyframes rotateGradient {
+                            from { transform: rotate(0deg); }
+                            to { transform: rotate(360deg); }
+                        }
+
+                        background: $gradient-conic;
+                        position: absolute;
+                        width: $size;
+                        height: $size;
+                        top: calc(50% - ($size / 2));
+                        opacity: 0.6;
+                        left: calc(50% - ($size / 2));
+                        border-radius: 50%;
+                        filter: blur(80px);
+                        z-index: 0;
+                        will-change: transform;
+                        animation: rotateGradient 8s linear infinite;
+                    }
+
+                    .featureScreenshot {
+                        max-width: 300px;
+                        z-index: 50;
+                        position: relative;
+                    }
+                }
+            }
+        }
+
+        .download {
+            .container {
+                @include container;
+            }
+
+            .downloadContent {
+                @include section-content;
+
+                h3 {
+                    @include section-heading;
+                }
+
+                .downloadPlatforms {
+                    display: flex;
+                    gap: 24px;
+                    justify-content: center;
+                    flex-wrap: wrap;
+                }
+
+                .downloadCard {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    gap: 12px;
+                    padding: 32px 24px;
+                    min-width: 200px;
+                    max-width: 260px;
+                    background: rgba($color-dark-surface-container, 0.6);
+                    border: 1px solid rgba($color-dark-outline, 0.3);
+                    border-radius: $radius-card;
+                    text-decoration: none;
+                    color: inherit;
+                    transition: all 0.3s ease;
+
+                    &:hover {
+                        background: rgba($color-dark-surface-container-high, 0.8);
+                        border-color: rgba($color-dark-primary, 0.5);
+                        box-shadow: 0 0 24px rgba($color-dark-primary, 0.2);
+                    }
+
+                    .downloadCardIcon {
+                        width: 48px;
+                        height: 48px;
+                        color: $color-dark-primary;
+                    }
+
+                    .downloadCardTitle {
+                        font-size: 20px;
+                        font-weight: 600;
+                        @include gradient-text;
+                    }
+
+                    .downloadCardDesc {
+                        font-size: 14px;
+                        opacity: 0.8;
+                    }
+
+                    .downloadCardBtn {
+                        margin-top: 8px;
+                    }
+                }
+            }
+        }
+
+        .cta {
+            padding-bottom: 128px;
+
+            .container {
+                @include container;
+            }
+
+            .ctaContent {
+                @include section-content;
+
+                h3 {
+                    @include section-heading;
+                }
+
+                .ctaActions {
+                    display: flex;
+                    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,9 +475,65 @@ $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;
+            }
+        }
     }
 }