diff --git a/packages_rs/nextclade-web/src/components/Main/Title.tsx b/packages_rs/nextclade-web/src/components/Main/Title.tsx index d1fd27a33..ba42eb27b 100644 --- a/packages_rs/nextclade-web/src/components/Main/Title.tsx +++ b/packages_rs/nextclade-web/src/components/Main/Title.tsx @@ -1,4 +1,6 @@ import React from 'react' +import { LinkSmart } from 'src/components/Link/LinkSmart' +import { useTranslationSafe } from 'src/helpers/useTranslationSafe' import styled from 'styled-components' @@ -48,8 +50,9 @@ const LetterSpan = styled.span<{ pos: number }>` ` export function Title() { + const { t } = useTranslationSafe() return ( - + {'Nextclade'.split('').map((letter, i) => ( // eslint-disable-next-line react/no-array-index-key @@ -58,14 +61,26 @@ export function Title() { ))} - {PACKAGE_VERSION && {`v${PACKAGE_VERSION}`}} + +
+ + {{t('What is this?')}} + + {PACKAGE_VERSION && {`v${PACKAGE_VERSION}`}} + + +
) } +const AboutLink = styled(LinkSmart)` + margin-bottom: auto; +` + export const Subtitle = styled.h2` text-align: center; - font-size: 2rem; + font-size: 1.5rem; font-weight: 300; @media (max-width: 991.98px) {