Finished glossary

.editorconfig

@@ -11,3 +11,6 @@ trim_trailing_whitespace = true
 [*.py]
 indent_style = space
 indent_size = 4
+
+[*.{md,mdx}]
+trim_trailing_whitespace = false

apps/frontend/package.json

@@ -20,6 +20,7 @@
     "@fontsource-variable/recursive": "^5.1.0",
     "@fontsource-variable/roboto-flex": "^5.1.0",
     "@fontsource/roboto": "^5.1.0",
+    "@mdx-js/react": "^3.1.0",
     "@star4/react": "^0.1.7",
     "@star4/vanilla-extract": "^0.0.14",
     "@tanstack/react-router": "^1.82.2",
@@ -31,8 +32,10 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@mdx-js/rollup": "^3.1.0",
     "@tanstack/router-devtools": "^1.82.2",
     "@tanstack/router-plugin": "^1.81.9",
+    "@types/mdx": "^2.0.13",
     "@types/node": "^22.9.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

apps/frontend/src/components/accordion/accordion.module.sass

@@ -11,14 +11,19 @@
     position: relative
 
     border-radius: star4.shape(extra-small)
-    background-color: star4.color(surface-container-highest)
+    background-color: star4.color(secondary-container)
+    // background-color: star4.color(surface-container-highest)
 
     overflow: hidden
 
+    transition-property: border-radius
+    transition-duration: star4.duration(long2)
+    transition-timing-function: star4.easing(emphasized)
+
     &__header
       outline: none
       border: none
-      background-color: star4.color(surface-container-highest)
+      // background-color: star4.color(surface-container-highest)
       cursor: pointer
 
       position: relative
@@ -30,9 +35,17 @@
       transition-property: padding-block
       transition-duration: star4.duration(long2)
       transition-timing-function: star4.easing(emphasized)
+
+      color: star4.color(on-secondary-container)
+      --star4-component-ripple-hover-color: #{star4.color(on-secondary-container)}
+      --star4-component-ripple-pressed-color: #{star4.color(on-secondary-container)}
     &__headline
       @include star4.typescale(title, medium)
-      color: star4.color(on-surface)
+      font-family: var(--star4-typeface-brand)
+      transition-property: font-family, font-size, font-weight, line-height, letter-spacing
+      transition-duration: star4.duration(long2)
+      transition-timing-function: star4.easing(emphasized)
+
     &__icon
       position: relative
       display: flex
@@ -50,8 +63,9 @@
       display: grid
       grid-template-rows: 0fr
       overflow: hidden
+      opacity: 0
 
-      transition-property: grid-template-rows
+      transition-property: grid-template-rows, opacity
       transition-duration: star4.duration(long2)
       transition-timing-function: star4.easing(emphasized)
     &__content
@@ -68,10 +82,17 @@
       border-bottom-left-radius: star4.shape(medium)
       border-bottom-right-radius: star4.shape(medium)
     &--expanded
+      border-radius: star4.shape(extra-large)
+      background-color: star4.color(surface-container-highest)
       & .accordion__item__header
         padding-block: 24px
-        // background-color: star4.color(secondary-container)
+        color: star4.color(on-surface)
+        --star4-component-ripple-hover-color: #{star4.color(on-surface)}
+        --star4-component-ripple-pressed-color: #{star4.color(on-surface)}
+      & .accordion__item__headline
+        @include star4.typescale(title, large)
       & .accordion__item__icon
         transform: rotate(180deg)
       & .accordion__item__content-wrapper
         grid-template-rows: 1fr
+        opacity: 1

apps/frontend/src/components/glossary/budget.mdx

@@ -0,0 +1 @@
+Бюджет — это план или расчёт того, сколько денег получают и как планируют их тратить. Он помогает контролировать финансы и позволяет принимать информированные решения о том, как использовать ресурсы.

apps/frontend/src/components/glossary/economy.mdx

@@ -0,0 +1,9 @@
+Экономия — это бережливое отношение к расходованию денежных средств,
+при котором главный принцип — добиться наилучшего результата при наименьших затратах и приложенных усилий.\
+\
+Некоторые аспекты экономии денег:
+- Понимание, куда уходят деньги, учёт и контроль.
+- Подробное изучение расходов поможет понять, где можно сэкономить.
+- Поиск способов экономии на покупках и платежах без ущерба качеству. Например, покупки оптом или заказы с длительной доставкой, но низким ценником.
+- Выбор схемы планирования бюджета и строгое следование ей.
+- Важно помнить, что экономия — это процесс, требующий времени и усилий.

apps/frontend/src/components/glossary/finance-plan.mdx

@@ -0,0 +1,9 @@
+Финансовый план — это стратегия управления личными финансами,
+где прописаны анализ доходов и расходов,
+суммы накоплений, конечная цель и сроки достижения.
+
+Личный финансовый план помогает:
+- разобраться с финансами;
+- управлять расходами;
+- регулярно откладывать и копить деньги;
+- ставить конкретные финансовые цели.

apps/frontend/src/components/glossary/glossary.module.sass

@@ -145,11 +145,14 @@ $shade-color: star4.color(surface-container)
     border-radius: star4.shape(small)
     border: 1px solid star4.color(outline)
   &__action
+    position: sticky
+    bottom: 0
     display: flex
     aling-items: center
     justify-content: center
     padding-inline: 16px
-    padding-block: 8px
+    padding-block: 16px
+    background-color: star4.color(surface-container)
 
     @include star4.layout(compact, medium)
       padding-inline: 16px

apps/frontend/src/components/glossary/glossary.tsx

@@ -8,6 +8,14 @@ import { Card } from "../card";
 import { THEME } from "~/theme";
 import { Accordion } from "../accordion";
 
+import Budget from "./budget.mdx";
+import FinancePlan from "./finance-plan.mdx";
+import Economy from "./economy.mdx";
+import IncomeExpenses from "./income-expenses.mdx";
+import Investments from "./investments.mdx";
+import Loans from "./loans.mdx";
+import Rate from "./rate.mdx";
+
 export namespace Glossary {
   export type Props = {}
 }
@@ -44,11 +52,15 @@ const GlossaryComponent = function Glossary(
   );
   return (
     <>
-      <IconButton
-        onClick={() => setIsOpen(prev => !prev)}
+      {/* <IconButton
+        onClick={() => setIsOpen(true)}
+        variant="filledTonal"
+        icon={<MaterialSymbol name="book" />} /> */}
+      <Button
+        onClick={() => setIsOpen(true)}
         variant="filledTonal"
-        selected={false}
-        icon={<MaterialSymbol name="help" />} />
+        icon={<MaterialSymbol name="book" />}
+        label="Глоссарий" />
       <Popover open={isMounted}>
         <div
           className={clsx(
@@ -89,22 +101,7 @@ const GlossaryComponent = function Glossary(
                       <IconButton icon={<MaterialSymbol name="search" />} />
                     } />
                   <div className={styles["glossary__content"]}>
-                    <Card variant="outlined"
-                      style={{
-                        padding: 16,
-                        "--star4-component-icon-size": "48px",
-                        "--star4-component-material-symbol-optical-size": "48",
-                      } as CSSProperties}>
-                      <MaterialSymbol name="payments" />
-                      <MaterialSymbol name="account_balance_wallet" />
-                      <MaterialSymbol name="medical_information" />
-                      <MaterialSymbol name="tram" />
-                    </Card>
-                    <h2 className={styles["glossary__h2"]}>Значки</h2>
-                    <p className={styles["glossary"]}>
-
-                    </p>
-                    <div className={styles["glossary__icons-card"]}>
+                    {/* <div className={styles["glossary__icons-card"]}>
                       <ListItem
                         multiline
                         leading={<MaterialSymbol name="payments" />}
@@ -141,28 +138,28 @@ const GlossaryComponent = function Glossary(
                             Выбор за тобой: низкая стоимость проезда либо комфорт
                           </span>
                         } />
-                    </div>
+                    </div> */}
                     <Accordion>
                       <Accordion.Item headline="Бюджет">
-                        <p>
-                          Бюджет — это план или расчёт того, сколько денег получают и как планируют их тратить.
-                          Он помогает контролировать финансы и позволяет принимать информированные решения о том, как использовать ресурсы.
-                        </p>
+                        <Budget />
                       </Accordion.Item>
                       <Accordion.Item headline="Финансовый план">
-                        <p>
-                          Финансовый план — это стратегия управления личными финансами,
-                          где прописаны анализ доходов и расходов,
-                          суммы накоплений, конечная цель и сроки достижения.
-                        </p>
-
-                        Личный финансовый план помогает:
-                        <ul>
-                          <li>разобраться с финансами;</li>
-                          <li>управлять расходами;</li>
-                          <li>регулярно откладывать и копить деньги;</li>
-                          <li>ставить конкретные финансовые цели.</li>
-                        </ul>
+                        <FinancePlan />
+                      </Accordion.Item>
+                      <Accordion.Item headline="Экономия средств">
+                        <Economy />
+                      </Accordion.Item>
+                      <Accordion.Item headline="Личные доходы и расходы">
+                        <IncomeExpenses />
+                      </Accordion.Item>
+                      <Accordion.Item headline="Инвестиции">
+                        <Investments />
+                      </Accordion.Item>
+                      <Accordion.Item headline="Кредиты, займы, ссуда">
+                        <Loans />
+                      </Accordion.Item>
+                      <Accordion.Item headline="Кредитная ставка, процент">
+                        <Rate />
                       </Accordion.Item>
                     </Accordion>
                   </div>

apps/frontend/src/components/glossary/income-expenses.mdx

@@ -0,0 +1,6 @@
+Доходы — это все положительные финансовые потоки,
+например, заработная плата (по основному месту работы, по совместительству),
+премиальные (в том числе по итогам работы за год), проценты от вкладов и инвестиций,
+доход от сдачи имущества в аренду и другие виды доходов.\
+\
+Расходы — это все отрицательные финансовые потоки (регулярные или разовые платежи)

apps/frontend/src/components/glossary/investments.mdx

@@ -0,0 +1,4 @@
+Инвестиции — это вложения денег для их сохранения и приумножения.
+Объектами инвестиций могут быть ценные бумаги, имущество, имущественные права, которые вкладывают в объекты предпринимательской или другой деятельности.
+Также это способ получения прибыли, то есть инвестировать нужно тем, кто хочет приумножить свой доход.
+У каждого инструмента инвестирования свой уровень доходности и риска.

apps/frontend/src/components/glossary/loans.mdx

@@ -0,0 +1,9 @@
+Кредит — это деньги или товары, которые банк или другая кредитная организация выдает заемщику в долг. 
+Обычно они выдаются под проценты, но бывают исключения — если это мера поддержки.\
+\
+Заем — это способ взять в долг небольшую сумму или имущество у знакомых или финансовых организаций.
+Он может быть процентным или беспроцентным. Порядок выплаты долга устанавливают в договоре.\
+\
+Ссуда — это бесплатная беспроцентная аренда имущества.
+Например, продавец шоколадок в форме Деда Мороза поставляет в магазин товар со специальной новогодней витриной.
+Магазин не платит за ее использование, но должен будет вернуть ее, когда закончатся праздники.

apps/frontend/src/components/glossary/rate.mdx

@@ -0,0 +1,10 @@
+Годовой процент по кредиту — надбавка, которую заемщик обязуется вернуть за использование выданной банком денежной суммы.
+Ее выплачивают постепенно вместе с ежемесячными платежами по основной сумме долга.\
+\
+Процентная ставка по кредиту в каждом банке своя. Ее размер зависит от нескольких факторов:
+- Ключевая ставка
+- Инфляция
+- Уровень безработицы
+- Характеристики займа
+- Кредитная история
+- Страхование

apps/frontend/src/routes/__root.tsx

@@ -1,8 +1,9 @@
-import { Lenis } from "@star4/react";
+import { Divider, Lenis } from "@star4/react";
 import { createRootRoute, Outlet } from "@tanstack/react-router";
-import { lazy, Suspense } from "react";
+import { lazy, Suspense, type HTMLAttributes } from "react";
 import { Glossary } from "~/components/glossary";
 import { Header } from "~/components/header";
+import { MDXProvider } from "@mdx-js/react";
 
 const TanStackRouterDevtools =
   import.meta.env.DEV
@@ -15,14 +16,17 @@ const TanStackRouterDevtools =
 
 export const Route = createRootRoute({
   component: () => (
-    <>
-      <Lenis>
-        <Header headline="Budget helper" trailing={<Glossary />} />
-        <Outlet />
-        <Suspense>
-          <TanStackRouterDevtools />
-        </Suspense>
-      </Lenis>
-    </>
+    <MDXProvider
+      components={{
+        hr: (props) => <Divider {...props as HTMLAttributes<HTMLElement>} />,
+      }}>
+        <Lenis>
+          <Header headline="Budget helper" trailing={<Glossary />} />
+          <Outlet />
+          <Suspense>
+            <TanStackRouterDevtools />
+          </Suspense>
+        </Lenis>
+    </MDXProvider>
   ),
 })

apps/frontend/vite.config.ts

@@ -2,17 +2,23 @@ import { defineConfig } from "vite";
 import { resolve } from "path";
 
 // Renaming all imported plugins to follow our naming convention
-import { TanStackRouterVite as tanStackRouter } from "@tanstack/router-plugin/vite";
 import { vanillaExtractPlugin as vanillaExtract } from "@vanilla-extract/vite-plugin";
+import { TanStackRouterVite as tanStackRouter } from "@tanstack/router-plugin/vite";
+import mdx from "@mdx-js/rollup";
 import react from "@vitejs/plugin-react-swc";
 
 export default defineConfig({
   plugins: [
+    vanillaExtract(),
     tanStackRouter({
       quoteStyle: "double",
       semicolons: true,
     }),
-    vanillaExtract(),
+    {
+      enforce: "pre",
+      ...mdx({}),
+    },
+    // react({include: /\.(jsx|js|mdx|md|tsx|ts)$/}),
     react(),
   ],
   resolve: {