Redesign version home pages (#1346)

* Hide table of contents

* Add `react-lite-youtube-embed`

* Add additional styles for home page contents

* Refactor home page components

* Adjust links of version home page (iteration 1)

* Remove page title

Remove title since it stands out awkwardly

* Adjust links/layout for version home page (iteration 2)

* Remove semi-bold from version home page links

* Fix FOUC issue with Font Awesome icon for new docs

When the page loads, a flash of unstyled content (FOUC) occurs, which makes the Font Awesome icon appear large until the page fully loads. This commit fixes that issue.

* Add links to category labels

* Add home-page-background.avif

* Add background image to hero section

* Revise `.new-docs-icon` style

* Change Font Awesome icon implementation method

* Revert "Add links to category labels"

This reverts commit 7c4cf99.

* Add support for multiple links per cell

* Add support for multiple links per cell

Cells should automatically know when a cell contains one link or multiple links and apply the necessary styles based on logic.

* Revise links and add new ones

* Reduce opacity of background image in hero section

Reduce the opacity of the background image in the hero section of the version home pages.

* Add comments for clarity

* Remove empty link/title placeholders in arrays

Keeping empty link/title placeholders causes links to not work when the site is built.

* Fix links

* Remove unused styles

* Adjust table spacing for home page links on mobile

* Adjust `min-width` for hero section on home page

This style shows the second paragraph depending on if the visitor's screen is wide enough to show the content and not make it look disproportionate (basically, the text gets longer but the video stays the same height).

* Adjust category label spacing on home page

* Move comments for readability

* Fix FOUC for new docs icon

* Remove over-spacing before and after hero section

* Change `new docs` related parts to `new content`

The section will contain new docs and docs that have new content, so "content" is more appropriate here.

* Add new line at bottom of file

* Add `youtube-embed` style for mobile

Without this style, the embedded YouTube video makes the mobile view horizontally scrollable, which is weird behavior.

* Fix horizontal scrolling issue on version homepages

* Remove second row of category links for now

* Change link title

* Revise layout and design

Revise layout and design according to feedback at https://scalar-labs.slack.com/archives/CDSFWGSTZ/p1750044409557389?thread_ts=1750041895.129159&cid=CDSFWGSTZ.

* Increase hero text font size on home page

Change made according to discussion on June 17.

* Make YouTube video on version home page bigger

Change made according to discussion on June 17.

* Change hero section background color on version home pages

Change made according to discussion on June 17.

* Change hero text color on version home pages

Change made according to discussion on June 17.

* Remove unnecessary style

* Remove background from main hero text, reduce padding in hero section

Remove background from hero text and reduce padding around hero section, according to feedback at: https://scalar-labs.slack.com/archives/CDSFWGSTZ/p1750218637894259?thread_ts=1750041895.129159&cid=CDSFWGSTZ

Also fix spacing issue around video on mobile after changing the padding mentioned.

* Shrink `category table` font; enlarge `hero-section` font

* Re-add hidable home page text

* Refactor design

* Refactor to accommodate new design

* Remove duplicate style

* Move home page card styles

* Fix comment

* Add missing link

Author: josh-wong

docs/index.mdx

@@ -5,38 +5,10 @@ tags:
   - Enterprise Premium
 displayed_sidebar: docsEnglish
 image: img/scalardb-social-card-preview.png
+hide_table_of_contents: true
+title: ""
 ---
 
-# ScalarDB
+import CategoryGrid from '/src/components/Cards/3.15';
 
-import { CardRowAbout, CardRowQuickstart, CardRowDevelop, CardRowDeploy, CardRowMigrate, CardRowManage, CardRowReference } from '/src/components/Cards/3.15';
-
-ScalarDB is a cross-database HTAP engine. It achieves ACID transactions and real-time analytics across diverse databases to simplify the complexity of managing multiple databases.
-
-**About ScalarDB**
-
-<CardRowAbout />
-
-**Quickstart**
-
-<CardRowQuickstart />
-
-**Develop**
-
-<CardRowDevelop />
-
-**Deploy**
-
-<CardRowDeploy />
-
-**Migrate**
-
-<CardRowMigrate />
-
-**Manage**
-
-<CardRowManage />
-
-**Troubleshoot & Reference**
-
-<CardRowReference />
+<CategoryGrid />

i18n/versioned_docs/ja-jp/docusaurus-plugin-content-docs/current/index.mdx

@@ -5,38 +5,10 @@ tags:
   - Enterprise Premium
 displayed_sidebar: docsJapanese
 image: img/scalardb-social-card-preview.png
+hide_table_of_contents: true
+title: ""
 ---
 
-# ScalarDB
+import CategoryGrid from '/src/components/Cards/ja-jp/3.15';
 
-import { CardRowAbout, CardRowQuickstart, CardRowDevelop, CardRowDeploy, CardRowMigrate, CardRowManage, CardRowReference } from '/src/components/Cards/ja-jp/3.15';
-
-ScalarDB は、さまざまなデータベース向けのハイブリッドトランザクション/分析処理 (HTAP) エンジンです。データベース上でミドルウェアとして実行され、ACID トランザクションとリアルタイム分析を実現することでさまざまなデータベースを仮想的に統合し、複数のデータベースまたは単一のデータベースの複数のインスタンスの管理の複雑さを簡素化します。
-
-**ScalarDB について**
-
-<CardRowAbout />
-
-**はじめる**
-
-<CardRowQuickstart />
-
-**開発**
-
-<CardRowDevelop />
-
-**デプロイ**
-
-<CardRowDeploy />
-
-**移行**
-
-<CardRowMigrate />
-
-**管理**
-
-<CardRowManage />
-
-**トラブルシューティングと参照**
-
-<CardRowReference />
+<CategoryGrid />

i18n/versioned_docs/ja-jp/docusaurus-plugin-content-docs/version-3.13/index.mdx

@@ -5,38 +5,10 @@ tags:
   - Enterprise Premium
 displayed_sidebar: docsJapanese
 image: img/scalardb-social-card-preview.png
+hide_table_of_contents: true
+title: ""
 ---
 
-# ScalarDB
+import CategoryGrid from '/src/components/Cards/ja-jp/3.13';
 
-import { CardRowAbout, CardRowQuickstart, CardRowDevelop, CardRowDeploy, CardRowMigrate, CardRowManage, CardRowReference } from '/src/components/Cards/ja-jp/3.14';
-
-ScalarDB は、さまざまなデータベース向けのハイブリッドトランザクション/分析処理 (HTAP) エンジンです。データベース上でミドルウェアとして実行され、ACID トランザクションとリアルタイム分析を実現することでさまざまなデータベースを仮想的に統合し、複数のデータベースまたは単一のデータベースの複数のインスタンスの管理の複雑さを簡素化します。
-
-**ScalarDB について**
-
-<CardRowAbout />
-
-**はじめる**
-
-<CardRowQuickstart />
-
-**開発**
-
-<CardRowDevelop />
-
-**デプロイ**
-
-<CardRowDeploy />
-
-**移行**
-
-<CardRowMigrate />
-
-**管理**
-
-<CardRowManage />
-
-**トラブルシューティングと参照**
-
-<CardRowReference />
+<CategoryGrid />

i18n/versioned_docs/ja-jp/docusaurus-plugin-content-docs/version-3.14/index.mdx

@@ -5,38 +5,10 @@ tags:
   - Enterprise Premium
 displayed_sidebar: docsJapanese
 image: img/scalardb-social-card-preview.png
+hide_table_of_contents: true
+title: ""
 ---
 
-# ScalarDB
+import CategoryGrid from '/src/components/Cards/ja-jp/3.14';
 
-import { CardRowAbout, CardRowQuickstart, CardRowDevelop, CardRowDeploy, CardRowMigrate, CardRowManage, CardRowReference } from '/src/components/Cards/ja-jp/3.14';
-
-ScalarDB は、さまざまなデータベース向けのハイブリッドトランザクション/分析処理 (HTAP) エンジンです。データベース上でミドルウェアとして実行され、ACID トランザクションとリアルタイム分析を実現することでさまざまなデータベースを仮想的に統合し、複数のデータベースまたは単一のデータベースの複数のインスタンスの管理の複雑さを簡素化します。
-
-**ScalarDB について**
-
-<CardRowAbout />
-
-**はじめる**
-
-<CardRowQuickstart />
-
-**開発**
-
-<CardRowDevelop />
-
-**デプロイ**
-
-<CardRowDeploy />
-
-**移行**
-
-<CardRowMigrate />
-
-**管理**
-
-<CardRowManage />
-
-**トラブルシューティングと参照**
-
-<CardRowReference />
+<CategoryGrid />

package-lock.json

@@ -37,6 +37,7 @@
     "react": "^18.0.0",
     "react-cookie-consent": "9.0.0",
     "react-dom": "^18.0.0",
+    "react-lite-youtube-embed": "^2.4.0",
     "@typebot.io/react": "0.3.47"
   },
   "devDependencies": {