From 9588f36f6aec5ba4f1b91812035c4bdaa3ec4c2b Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Thu, 19 Mar 2026 15:03:45 +0300
Subject: [PATCH] Implement unified scroll to download section

---
 frontend/src/pages/home/HomeFooter.tsx        | 14 ++++++--
 frontend/src/pages/home/HomeHeader.tsx        | 16 ++++++---
 frontend/src/pages/home/HomePage.tsx          | 18 +++++++---
 .../src/pages/home/home-footer.module.scss    | 36 +++++++++++++++++++
 4 files changed, 73 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/home/HomeFooter.tsx b/frontend/src/pages/home/HomeFooter.tsx
index 5e6de13..95d487d 100644
--- a/frontend/src/pages/home/HomeFooter.tsx
+++ b/frontend/src/pages/home/HomeFooter.tsx
@@ -3,7 +3,11 @@ import { MaterialIcon } from "@/utils/material";
 import { GitHubLink, GITHUB_WEB, GITHUB_APP, GITHUB_LICENSE } from "@/pages/home/homeLinks";
 import styles from "@/pages/home/home-footer.module.scss";
 
-export function HomeFooter() {
+interface HomeFooterProps {
+    onScrollToDownload?: () => void;
+}
+
+export function HomeFooter({ onScrollToDownload }: HomeFooterProps) {
     return (
         <footer className={styles.homepageFooter}>
             <div className={styles.footerBrand}>
@@ -15,10 +19,14 @@ export function HomeFooter() {
             </div>
             <div className={styles.footerLinks}>
                 <div className={styles.footerSection}>
-                    <Link to="/#download" className={styles.footerLink}>
+                    <button
+                        type="button"
+                        onClick={onScrollToDownload}
+                        className={styles.footerLink}
+                    >
                         <MaterialIcon name="download" className={styles.footerLinkIcon} />
                         Скачать приложение
-                    </Link>
+                    </button>
                     <Link to="/login" className={styles.footerLink}>
                         <MaterialIcon name="language" className={styles.footerLinkIcon} />
                         Веб-версия
diff --git a/frontend/src/pages/home/HomeHeader.tsx b/frontend/src/pages/home/HomeHeader.tsx
index 2dc1391..20990df 100644
--- a/frontend/src/pages/home/HomeHeader.tsx
+++ b/frontend/src/pages/home/HomeHeader.tsx
@@ -5,15 +5,23 @@ import { MaterialButton, MaterialIconButton } from "@/utils/material";
 import { GitHubLink, SupportLink } from "@/pages/home/homeLinks";
 import styles from "@/pages/home/home-header.module.scss";
 
-export function HomeHeader() {
+interface HomeHeaderProps {
+    onScrollToDownload?: () => void;
+}
+
+export function HomeHeader({ onScrollToDownload }: HomeHeaderProps) {
     const navigate = useNavigate();
     const { user } = useUserStore();
     const { isMobile } = useDownloadAppScreen();
     const isLoggedIn = user.authToken && user.currentUser;
 
+    const handleMobileDownload = () => {
+        onScrollToDownload?.();
+    };
+
     function handleGetStarted() {
         if (isMobile) {
-            navigate("/download-app");
+            handleMobileDownload();
         } else if (isLoggedIn) {
             navigate("/chat");
         } else {
@@ -35,7 +43,7 @@ export function HomeHeader() {
     );
 
     return (
-        <header className={styles.homepageHeader}>
+        <header className={styles.homepageHeader} data-home-header>
             <div className={styles.headerInner}>
                 <div className={styles.headerContent}>
                     <div className={styles.logo}>
@@ -55,7 +63,7 @@ export function HomeHeader() {
                         {isMobile ? (
                             <MaterialIconButton
                                 variant="filled"
-                                onClick={() => navigate("/download-app")}
+                                onClick={handleMobileDownload}
                                 icon="download"
                                 className={styles.headerSmallButton}
                             />
diff --git a/frontend/src/pages/home/HomePage.tsx b/frontend/src/pages/home/HomePage.tsx
index 4d2d9b3..3d57772 100644
--- a/frontend/src/pages/home/HomePage.tsx
+++ b/frontend/src/pages/home/HomePage.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { useState, type ReactNode } from "react";
+import { useRef, useState, type ReactNode } from "react";
 import styles from "@/pages/home/home.module.scss";
 import useDownloadAppScreen from "@/core/hooks/useDownloadAppScreen";
 import { MaterialButton, MaterialIcon, MaterialIconButton, MaterialList, MaterialListItem } from "@/utils/material";
@@ -55,6 +55,16 @@ export default function HomePage() {
     const [dialogOpen, setDialogOpen] = useState(false);
     const [dialogOs, setDialogOs] = useState<DownloadOs>(() => detectOs());
     const [menuOpen, setMenuOpen] = useState(false);
+    const downloadSectionRef = useRef<HTMLElement>(null);
+
+    const scrollToDownload = () => {
+        const section = downloadSectionRef.current;
+        const header = document.querySelector<HTMLElement>("[data-home-header]");
+        if (!section) return;
+        const headerHeight = header?.getBoundingClientRect().height ?? 0;
+        const targetY = section.getBoundingClientRect().top + window.scrollY - headerHeight;
+        window.scrollTo({ top: targetY, behavior: "smooth" });
+    };
 
     const triggerDownload = (os: DownloadOs): boolean => {
         if (typeof document === "undefined") {
@@ -84,7 +94,7 @@ export default function HomePage() {
 
     return (
         <div className={styles.homepage}>
-            <HomeHeader />
+            <HomeHeader onScrollToDownload={scrollToDownload} />
 
             <main>
                 <section className={styles.title}>
@@ -156,7 +166,7 @@ export default function HomePage() {
                     </FeatureSection>
                 </section>
 
-                <section id="download" className={styles.download}>
+                <section ref={downloadSectionRef} className={styles.download}>
                     <div className={styles.container}>
                         <div className={styles.downloadContent}>
                             <h3>Скачайте приложение</h3>
@@ -259,7 +269,7 @@ export default function HomePage() {
             </main>
 
             <DownloadDialog open={dialogOpen} onOpenChange={setDialogOpen} os={dialogOs} />
-            <HomeFooter />
+            <HomeFooter onScrollToDownload={scrollToDownload} />
         </div>
     );
 }
diff --git a/frontend/src/pages/home/home-footer.module.scss b/frontend/src/pages/home/home-footer.module.scss
index 59c49b3..fb337d0 100644
--- a/frontend/src/pages/home/home-footer.module.scss
+++ b/frontend/src/pages/home/home-footer.module.scss
@@ -79,6 +79,11 @@
     color: $color-dark-on-surface-variant;
     text-decoration: none;
     font-size: 15px;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    font-family: inherit;
     transition: color 0.2s ease, transform 0.15s ease;
     -webkit-user-drag: none;
     user-select: none;
@@ -86,6 +91,37 @@
     &:hover {
         color: $color-dark-on-surface;
     }
+}
+
+button.footerLink {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    font: inherit;
+}
+
+button.footerLink {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    font: inherit;
+}
+
+button.footerLink {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    &:is(button) {
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        font: inherit;
+    }
 
     &:active {
         transform: scale(0.92);