diff --git a/medcenter/src/App.tsx b/medcenter/src/App.tsx index 5acd51b..efcadc9 100644 --- a/medcenter/src/App.tsx +++ b/medcenter/src/App.tsx @@ -2,6 +2,7 @@ import { EquipmentSection } from './components/EquipmentSection' import { Hero } from './components/Hero' import { LaunchSection } from './components/LaunchSection' import { LossEconomySection } from './components/LossEconomySection' +import { MobileActionBar } from './components/MobileActionBar' import { MarketSection } from './components/MarketSection' import { ProgramsSection } from './components/ProgramsSection' import { ProjectSection } from './components/ProjectSection' @@ -32,6 +33,8 @@ export default function App() { + + ) } diff --git a/medcenter/src/components/EquipmentSection.tsx b/medcenter/src/components/EquipmentSection.tsx index b4ce0fa..abfffd8 100644 --- a/medcenter/src/components/EquipmentSection.tsx +++ b/medcenter/src/components/EquipmentSection.tsx @@ -33,7 +33,7 @@ export function EquipmentSection() {
{devices.map((device) => (
{formats.map((format) => (
{timeline.map((step) => (
diff --git a/medcenter/src/components/MarketSection.tsx b/medcenter/src/components/MarketSection.tsx index 91081da..6f248b3 100644 --- a/medcenter/src/components/MarketSection.tsx +++ b/medcenter/src/components/MarketSection.tsx @@ -28,25 +28,28 @@ export function MarketSection() {
{marketStats.map((stat) => (
diff --git a/medcenter/src/components/MobileActionBar.tsx b/medcenter/src/components/MobileActionBar.tsx new file mode 100644 index 0000000..373fe85 --- /dev/null +++ b/medcenter/src/components/MobileActionBar.tsx @@ -0,0 +1,66 @@ +import { useEffect, useState } from 'react' +import { contacts } from '../data/content' +import { cx } from '../lib/cx' +import { ButtonLink, buttonClass } from './Button' +import { PhoneIcon } from './Icons' + +/** + * The primary CTA's home below 760px, where the header cannot hold it without + * crushing the logo. See `SiteHeader`. + * + * It waits for the hero — whose own two buttons say the same thing — to scroll + * away, and steps back down while the form is on screen, so it never sits on + * top of the fields it points at. That also keeps it clear of the submit + * button, which is the one control it could plausibly be mistaken for. + */ +export function MobileActionBar() { + const [shown, setShown] = useState(false) + + useEffect(() => { + const hero = document.getElementById('top') + const form = document.getElementById('proposal') + if (!hero || !form) return + + let heroOnScreen = true + let formOnScreen = false + + const observer = new IntersectionObserver((entries) => { + for (const entry of entries) { + if (entry.target === hero) heroOnScreen = entry.isIntersecting + if (entry.target === form) formOnScreen = entry.isIntersecting + } + setShown(!heroOnScreen && !formOnScreen) + }) + + observer.observe(hero) + observer.observe(form) + return () => observer.disconnect() + }, []) + + return ( +
+
+ + + + + Получить предложение + +
+
+ ) +} diff --git a/medcenter/src/components/ProgramsSection.tsx b/medcenter/src/components/ProgramsSection.tsx index d553a57..8683981 100644 --- a/medcenter/src/components/ProgramsSection.tsx +++ b/medcenter/src/components/ProgramsSection.tsx @@ -15,7 +15,7 @@ export function ProgramsSection() { lead="Действующие процедуры, ЛФК, массаж и EXO-технологии объединяются в курс под состояние пациента, этап реабилитации и утверждённую клиническую модель." /> -
+
{programs.map((program) => ( ))} diff --git a/medcenter/src/components/ProjectSection.tsx b/medcenter/src/components/ProjectSection.tsx index f97792b..be7b4cc 100644 --- a/medcenter/src/components/ProjectSection.tsx +++ b/medcenter/src/components/ProjectSection.tsx @@ -20,7 +20,7 @@ export function ProjectSection() {
diff --git a/medcenter/src/components/SiteFooter.tsx b/medcenter/src/components/SiteFooter.tsx index 4056f1e..684900e 100644 --- a/medcenter/src/components/SiteFooter.tsx +++ b/medcenter/src/components/SiteFooter.tsx @@ -3,7 +3,11 @@ import { Container } from './Layout' export function SiteFooter() { return ( -