diff --git a/apps/website/public/translations/en/translation.json b/apps/website/public/translations/en/translation.json index dcf49b840..70446c657 100644 --- a/apps/website/public/translations/en/translation.json +++ b/apps/website/public/translations/en/translation.json @@ -97,8 +97,7 @@ "get_started": "Get started" }, "components": { - "link_learn_more": "Learn more...", - "list_with_screenshot_alt": "Screenshot of the feature being selected" + "link_learn_more": "Learn more..." }, "download_now": { "text": "Download now ", diff --git a/apps/website/src/pages/Home/index.css b/apps/website/src/pages/Home/index.css index 614223991..a21442d2b 100644 --- a/apps/website/src/pages/Home/index.css +++ b/apps/website/src/pages/Home/index.css @@ -183,72 +183,43 @@ section.faq { display: flex; } + h3 { + color: var(--brand-1); + } + ul { list-style-type: none; margin: 0; padding: 0; + gap: 1em; + display: grid; + + @media (min-width: 720px) { + grid-template-columns: 1fr 1fr 1fr; + } li { - margin-bottom: 1em; - - &:last-of-type { - margin-bottom: 0; - } + margin: 0; .card { border: 1px solid transparent; - } - - &.selected .card { - border: 1px solid var(--brand-1); - } + height: 100%; + } } } .details { - flex-basis: 50%; - flex-shrink: 0; + max-height: 35vh; + overflow: hidden; + display: flex; + flex-direction: column; @media (max-width: 719px) { margin-top: 1em; } } - &.horizontal { - flex-direction: column-reverse; - - ul { - gap: 1em; - display: grid; - - @media (min-width: 720px) { - grid-template-columns: 1fr 1fr 1fr; - } - } - - li { - margin: 0; - } - - .card { - height: 100%; - } - - h3 { - color: var(--brand-1); - } - - .details { - max-height: 35vh; - overflow: hidden; - display: flex; - flex-direction: column; - - img { - height: 100%; - width: auto; - object-fit: contain; - } - } + img { + object-fit: contain; } } diff --git a/apps/website/src/pages/Home/index.tsx b/apps/website/src/pages/Home/index.tsx index f81704b01..50cb03dff 100644 --- a/apps/website/src/pages/Home/index.tsx +++ b/apps/website/src/pages/Home/index.tsx @@ -132,7 +132,7 @@ function NoteTypesSection() { const { t } = useTranslation(); return (
- +
    {items.map(item => ( -
  • +
  • setSelectedItem(item)} - onClick={() => setSelectedItem(item)} moreInfoUrl={item.moreInfo} iconSvg={item.iconSvg} + imageUrl={item.imageUrl} > {item.description}
  • ))}
- -
- {selectedItem && ( - <> - {t("components.list_with_screenshot_alt")} - - )} -
) }