improvements

modules/home/downloadCard/downloadCard.module.scss

@@ -0,0 +1,189 @@
+.card {
+  --background: #d8e2ff;
+  --on-background: #122f60;
+  --on-background-secondary: #2c4678;
+  position: relative;
+  min-height: 390px;
+}
+.textWrapper {
+  width: calc(100% - 440px);
+}
+.title {
+  max-width: 680px;
+  font-size: 2.75rem;
+  line-height: 1.25;
+}
+.subtitle {
+  max-width: 640px;
+  margin-top: 16px;
+  line-height: 1.7;
+}
+.content {
+  margin-top: 28px;
+  justify-content: flex-start;
+}
+.actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  position: relative;
+  z-index: 1;
+  width: calc(100% - 440px);
+}
+.download {
+  background: #fff;
+  border-radius: 20px;
+  padding: 4px;
+  max-width: 100%;
+  a {
+    line-height: 1.5;
+    svg {
+      flex-shrink: 0;
+    }
+  }
+  a:focus-visible {
+    outline: 3px solid #122f60;
+    outline-offset: 4px;
+    border-radius: 16px;
+  }
+}
+.note {
+  color: var(--on-background-secondary);
+  font-size: 0.85rem;
+  line-height: 1.6;
+  font-weight: 600;
+}
+.illustration {
+  position: absolute;
+  width: 520px;
+  height: 390px;
+  right: 0;
+  bottom: 0;
+}
+.star {
+  position: absolute;
+  width: 390px;
+  height: 390px;
+  right: -50px;
+  bottom: -70px;
+  color: #aec6ff;
+  transform: rotate(12deg);
+}
+.logo {
+  position: absolute;
+  width: 300px;
+  max-width: none;
+  height: auto;
+  top: 25px;
+  right: 5px;
+  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.sticker {
+  position: absolute;
+  right: 32px;
+  bottom: 48px;
+  max-width: 320px;
+  padding: 16px 24px;
+  border-radius: 40px;
+  background: #ddf9d0;
+  color: #254817;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5;
+  transform: rotate(-6deg);
+  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.card:hover .phone {
+  transform: translateY(-6px);
+}
+.card:hover .sticker {
+  transform: rotate(-3deg) translateY(-4px);
+}
+@media (max-width: 1100px) {
+  .textWrapper,
+  .actions {
+    width: calc(100% - 340px);
+  }
+  .title {
+    font-size: 2.25rem;
+  }
+  .illustration {
+    right: -70px;
+  }
+  .sticker {
+    right: 90px;
+    max-width: 250px;
+  }
+}
+@media (max-width: 730px) {
+  .card {
+    min-height: 0;
+  }
+  .textWrapper,
+  .actions {
+    width: 100%;
+  }
+  .title {
+    font-size: 2rem;
+  }
+  .content {
+    gap: 24px;
+  }
+  .illustration {
+    position: relative;
+    width: 100%;
+    height: 260px;
+    right: auto;
+    margin-bottom: -36px;
+  }
+  .phone {
+    width: 300px;
+    left: calc(50% - 250px);
+    right: auto;
+    top: 0;
+  }
+  .star {
+    width: 300px;
+    height: 300px;
+    right: calc(50% - 180px);
+    bottom: -70px;
+  }
+  .sticker {
+    right: 0;
+    bottom: 20px;
+    max-width: 100%;
+    font-size: 0.85rem;
+    padding: 12px 20px;
+  }
+}
+@media (max-width: 500px) {
+  .card {
+    padding: 24px;
+  }
+  .title {
+    font-size: 1.8rem;
+  }
+  .subtitle {
+    font-size: 0.95rem;
+  }
+  .illustration {
+    margin-bottom: -24px;
+  }
+  .download a {
+    font-size: 0.9rem;
+    padding: 14px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .phone,
+  .sticker {
+    transition: none;
+  }
+  .card:hover .phone {
+    transform: none;
+  }
+  .card:hover .sticker {
+    transform: rotate(-6deg);
+  }
+}

modules/home/downloadCard/downloadCard.tsx

@@ -0,0 +1,45 @@
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { Card } from '@/components/card';
+import { GooglePlayLink } from '@/components/googlePlayLink';
+import Star from '@/assets/images/thick-round-star-6.svg';
+import Logo from '@/assets/images/logo-alt.svg';
+import useLocale from '@/utils/useLocale';
+import { locales } from './locales';
+import styles from './downloadCard.module.scss';
+
+export function DownloadCard() {
+  const t = useLocale(locales);
+  const { locale } = useRouter();
+
+  return (
+    <section aria-label={t('title')}>
+      <Card
+        className={styles.card}
+        title={t('title')}
+        subtitle={t('description')}
+        classes={{
+          title: styles.title,
+          subtitle: styles.subtitle,
+          textWrapper: styles.textWrapper,
+          content: styles.content,
+        }}
+      >
+        <div className={styles.actions}>
+          <GooglePlayLink className={styles.download} />
+          <p className={styles.note}>{t('note')}</p>
+        </div>
+        <div className={styles.illustration} aria-hidden="true">
+          <Star className={styles.star} />
+          <Logo
+            className={styles.logo}
+            alt=""
+            width={650}
+            sizes="(max-width: 730px) 500px, 650px"
+          />
+          <span className={styles.sticker}>{t('sticker')}</span>
+        </div>
+      </Card>
+    </section>
+  );
+}

modules/home/downloadCard/locales.ts

@@ -0,0 +1,18 @@
+import type { LocalesMap } from '@/utils/useLocale';
+
+export const locales: LocalesMap = {
+  ru: {
+    title: 'Расписание — в вашем кармане',
+    description:
+      'Смотрите расписание, сохраняйте любимые остановки и находите маршрут от А до Б. RideBus рядом, куда бы вы ни собирались.',
+    note: 'Для Android. Бесплатно и без рекламы.',
+    sticker: 'С вами на каждой остановке',
+  },
+  en: {
+    title: 'Your timetable, in your pocket',
+    description:
+      'Check timetables, save your favourite stops and find a route from A to B. Take RideBus wherever you’re headed.',
+    note: 'For Android. Free, with no ads.',
+    sticker: 'With you at every stop',
+  },
+};