improvements

modules/contribute/addCityCard/addCityCard.tsx

@@ -0,0 +1,97 @@
+import clsx from 'clsx';
+import { Card, CardLink } from '@/components/card';
+import Star from '@/assets/images/thick-round-star-6.svg';
+import useLocale, { LocalesMap } from '@/utils/useLocale';
+import { caveat } from '@/styles/fonts';
+import styles from './addCityCard.module.scss';
+
+const locales: LocalesMap = {
+  ru: {
+    title: 'Помогите добавить свой город',
+    description:
+      'Знаете, где найти расписание транспорта в вашем городе? Поделитесь источником — это поможет расширить RideBus.',
+    city: 'Название города',
+    cityDescription: 'Расскажите, для какого города нужно расписание.',
+    source: 'Источник расписания',
+    sourceDescription:
+      'Пришлите ссылку на сайт перевозчика или актуальное расписание.',
+    details: 'Полезные подробности',
+    detailsDescription:
+      'Если знаете, добавьте номера маршрутов и названия остановок.',
+    handwritten: 'Начнём с вашего города',
+    contact: 'Напишите в Telegram',
+    contactDescription: 'Пришлите название города и источник расписания',
+    email: 'Или напишите на почту',
+    emailSubject: 'Новый город для RideBus',
+    emailBody:
+      'Город: \nИсточник расписания: \nМаршруты и остановки (если известны): \n',
+  },
+  en: {
+    title: 'Help add your city',
+    description:
+      'Know where to find your city’s transport timetable? Share a source to help bring RideBus to more cities.',
+    city: 'Your city',
+    cityDescription: 'Tell us which city needs a timetable.',
+    source: 'A timetable source',
+    sourceDescription:
+      'Send a link to the transport operator’s website or a current timetable.',
+    details: 'Helpful details',
+    detailsDescription:
+      'Include route numbers and stop names if you know them.',
+    handwritten: 'Let’s start with your city',
+    contact: 'Get in touch on Telegram',
+    contactDescription: 'Send your city’s name and a timetable source',
+    email: 'Or send an email',
+    emailSubject: 'A new city for RideBus',
+    emailBody: 'City: \nTimetable source: \nRoutes and stops (if known): \n',
+  },
+};
+
+export function AddCityCard() {
+  const t = useLocale(locales);
+  const email = `mailto:xtimms@live.com?subject=${encodeURIComponent(t('emailSubject'))}&body=${encodeURIComponent(t('emailBody'))}`;
+  return (
+    <section aria-label={t('title')}>
+      <Card
+        className={styles.card}
+        title={t('title')}
+        subtitle={t('description')}
+        classes={{ content: styles.content }}
+      >
+        <Star className={styles.star} aria-hidden="true" />
+        <ol className={styles.steps}>
+          {['city', 'source', 'details'].map((step, index) => (
+            <li key={step}>
+              <span className={styles.number} aria-hidden="true">
+                {index + 1}
+              </span>
+              <div>
+                <h4>{t(step)}</h4>
+                <p>{t(`${step}Description`)}</p>
+              </div>
+            </li>
+          ))}
+        </ol>
+        <div className={styles.contact}>
+          {/* <span className={clsx(styles.handwritten, caveat.className)}>
+            {t('handwritten')}
+          </span> */}
+          <div className={styles.links}>
+            <CardLink
+              title={t('contact')}
+              hrefTitle={t('contactDescription')}
+              href="https://t.me/xtimms"
+              className={styles.link}
+            />
+            <CardLink
+              title={t('email')}
+              hrefTitle="xtimms@live.com"
+              href={email}
+              className={styles.link}
+            />
+          </div>
+        </div>
+      </Card>
+    </section>
+  );
+}