Added typography component and added more content to the home page

src/components/Typography/Typography.module.scss

@@ -0,0 +1,5 @@
+@import "styles/mixins";
+
+.vertical {
+  @include vertical-text;
+}

src/components/Typography/Typography.tsx

@@ -0,0 +1,17 @@
+import { TypographyProps } from "./types.ts"
+import { PropsWithChildren } from "react"
+import styles from './Typography.module.scss'
+import classNames from "classnames"
+import { useSettingsContext } from "modules/Settings/context/useSettingsContext.ts"
+
+const Typography = ({ children, className }: PropsWithChildren<TypographyProps>) => {
+  const { language } = useSettingsContext()
+
+  return (
+    <p className={classNames(className, { [styles.vertical]: language === 'jp' })}>
+      {children}
+    </p>
+  )
+}
+
+export default Typography

src/components/Typography/index.ts

@@ -0,0 +1 @@
+export { default } from './Typography.tsx'

src/components/Typography/types.ts

@@ -0,0 +1,3 @@
+export interface TypographyProps {
+    className?: string
+}

src/hooks/useLocale/useLocale.ts

@@ -3,7 +3,7 @@ import enLocale from "date-fns/locale/en-GB"
 import jpLocale from "date-fns/locale/ja"
 import { useSettingsContext } from "modules/Settings/context/useSettingsContext.ts"
 
-const useLocale = () => {
+const useLocale = (): Locale => {
   const { language } = useSettingsContext()
 
   return useMemo(() => {

src/locales/en/translation.json

@@ -62,14 +62,24 @@
         "feed-title": "Latest Japanese headlines",
         "body": "Nyusu.com is a small side-project of mine that aims to test your Japanese reading ability using headlines and excerpts from real Japanese news articles written by and for native Japanese people."
       },
-      "title": "ニュース。",
+      "title": [
+        "Most newspapers use only the 2136 characters in the jōyō kanji table.",
+        "The 5 major daily newspapers are the Yomiuri, Asahi, Mainichi, Sankei and Nihon Keizai Shimbun.",
+        "Today there are said to be 121 daily newspapers that are members of the NSK."
+      ],
       "newspaper": {
         "title": "Newspaper",
         "desc": "A full-page newspaper article excerpt."
       },
       "articles": {
         "title": "Articles",
-        "desc": "A library of short article headlines."
+        "desc": "A library of short article headlines.",
+        "cards": {
+          "body": "Browse lots of headlines at a glance. Sort by difficulty and filter by source to find the best material for you."
+        },
+        "newspaper": {
+          "body": "View a single headline in detail. Read related text from an excerpt from the article. See detailed information about the difficulty rating and export the contents into an Anki card."
+        }
       }
     }
   },

src/locales/jp/translation.json

@@ -56,14 +56,24 @@
         "feed-title": "最新の日本の見出しと記事",
         "body": "Nyusu.comは私の小さなサイドプロジェクトで、ネイティブの日本人によって書かれた実際の日本のニュース記事の見出しや抜粋を使って、日本語の読解力をテストすることを目的としている。"
       },
-      "title": ["ニュースの見出し。", "記事内容。", "読書の練習", "最新情報"],
+      "title": [
+        "ほとんどの新聞は常用漢字表の2136文字しか使わない。",
+        "5大日刊紙とは、読売新聞、朝日新聞、毎日新聞、産経新聞、日本経済新聞である。",
+        "現在、NSKに加盟している日刊紙は121紙と言われている。"
+      ],
       "newspaper": {
         "title": "新聞",
         "desc": "新聞記事の抜粋。"
       },
       "articles": {
         "title": "記事",
-        "desc": "短い記事の見出しのライブラリ。"
+        "desc": "短い記事の見出しのライブラリ。",
+        "cards": {
+          "body": "たくさんの見出しを一目で閲覧できる。難易度でソートし、ソースでフィルタリングして、あなたに最適な記事を見つけよう。"
+        },
+        "newspaper": {
+          "body": "見出しの詳細を見る。 記事の抜粋から関連する文章を読む。難易度の詳細情報を見て、内容をAnkiカードにエクスポートする。"
+        }
       }
     }
   },

src/styles/_colours.scss

@@ -1,6 +1,7 @@
 // TODO: Move colours here and establish themes
 
 $newspaper: #f9f7f1;
+$newspaper-secondary: #fffff8;
 $white: #ffffff;
 $black-ink: #2e2e2e;
 $muted: #686767;

src/views/HomeView/HomeView.module.scss

@@ -50,4 +50,18 @@
 
 .date {
   color: $black-ink;
+}
+
+.typeArticle {
+  &:hover {
+    border-radius: 5px;
+    cursor: pointer;
+    background-clip: content-box;
+    background-color: $newspaper-secondary;
+    transition: all ease-in-out 0.2s;
+  }
+}
+
+.article {
+  color: $black-ink;
 }

src/views/HomeView/HomeView.tsx

@@ -59,7 +59,7 @@ const HomeView = () => {
           <Headline headline={headline} />
         </Grid>
 
-        <Grid xs={12} justifyContent='center' alignItems='center'>
+        <Grid xs={12} justifyContent='center' alignItems='center' className={styles.body}>
           <ArticleContents
             contents={article.body}
             disclaimer={article.rights}
@@ -69,12 +69,12 @@ const HomeView = () => {
         </Grid>
 
         <Grid container spacing={{ xs: 4, md: 8 }} columns={12} sx={{ flexGrow: 1 }}>
-          <Grid xs={12} lg={6} sx={{ borderRight: "1px solid black" }}>
-            <NewspaperArticle />
+          <Grid xs={12} lg={6} sx={{ borderRight: "1px solid black" }} className={styles.typeArticle}>
+            <NewspaperArticle className={styles.article} />
           </Grid>
 
-          <Grid xs={12} lg={6}>
-            <CardsArticle />
+          <Grid xs={12} lg={6} className={styles.typeArticle}>
+            <CardsArticle className={styles.article} />
           </Grid>
         </Grid>
       </Grid>

src/views/HomeView/components/CardsArticle/CardsArticle.module.scss

@@ -0,0 +1,6 @@
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  max-height: 250px;
+}

src/views/HomeView/components/CardsArticle/CardsArticle.tsx

@@ -1,13 +1,20 @@
 import { useTranslation } from "react-i18next"
-import styles from "views/HomeView/components/NewspaperArticle/NewspaperArticle.module.scss"
 import cardsAnimation from "assets/cards.gif"
+import Typography from "components/Typography"
+import { CardsArticleProps } from "views/HomeView/components/CardsArticle/types.ts"
+import classNames from "classnames"
+import styles from './CardsArticle.module.scss'
 
-const CardsArticle = () => {
-  const { t } = useTranslation('translation', { keyPrefix: 'home.articles.cards' })
+const CardsArticle = ({ className }: CardsArticleProps) => {
+  const { t } = useTranslation('translation', { keyPrefix: 'views.home.articles.cards' })
 
   return (
-    <div data-testid='home-newspaper-article' className={styles.wrapper}>
-      <img  src={cardsAnimation} />
+    <div data-testid='home-newspaper-article' className={classNames(styles.wrapper, className)}>
+      <img src={cardsAnimation} alt='cards'/>
+
+      <Typography>
+        {t('body')}
+      </Typography>
     </div>
   )
 }

src/views/HomeView/components/CardsArticle/types.ts

@@ -0,0 +1,3 @@
+export interface CardsArticleProps {
+    className?: string
+}

src/views/HomeView/components/NewspaperArticle/NewspaperArticle.module.scss

@@ -0,0 +1,6 @@
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  max-height: 250px;
+}

src/views/HomeView/components/NewspaperArticle/NewspaperArticle.tsx

@@ -1,13 +1,20 @@
 import styles from './NewspaperArticle.module.scss'
 import { useTranslation } from "react-i18next"
 import newspaperAnimation from 'assets/newspaper.gif'
+import { NewspaperArticleProps } from "views/HomeView/components/NewspaperArticle/types.ts"
+import classNames from "classnames"
+import Typography from "components/Typography"
 
-const NewspaperArticle = () => {
-  const { t } = useTranslation('translation', { keyPrefix: 'home.articles.newspaper' })
+const NewspaperArticle = ({ className }: NewspaperArticleProps) => {
+  const { t } = useTranslation('translation', { keyPrefix: 'views.home.articles.newspaper' })
 
   return (
-    <div data-testid='home-newspaper-article' className={styles.wrapper}>
+    <div data-testid='home-newspaper-article' className={classNames(styles.wrapper, className)}>
       <img  src={newspaperAnimation} />
+
+      <Typography>
+        {t('body')}
+      </Typography>
     </div>
   )
 }

src/views/HomeView/components/NewspaperArticle/types.ts

@@ -0,0 +1,3 @@
+export interface NewspaperArticleProps {
+    className?: string
+}