Add Tokenization landing page

Co-authored by: Rome Reginelli <rome@ripple.com>, pdp2121 <71317875+pdp2121@users.noreply.github.com>

fix file names + small styling

fix top nav link

update nav list

fix security card and margin

add featured projects + fix margins

add related articles

update link and light mode

mobile view

add prev next buttons

small styling fixes

add unique key & zindex

Update docs/use-cases/tokenization/index.page.tsx

Update docs/use-cases/tokenization/index.page.tsx

Update docs/use-cases/tokenization/index.page.tsx

Update docs/use-cases/tokenization/index.page.tsx

Update styles/_use-cases.scss

Update styles/light/_light-theme.scss

add sidebar children back + styling changes

Fix tokenization frontmatter & security links

Add link from Tokenization to NTTs page

shared/components/nav-list.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { useTranslate } from "@portal/hooks";
+
+interface PageProps {
+  description: string;
+  link: string;
+}
+
+interface NavListProps {
+  pages: PageProps[];
+  bottomBorder?: boolean;
+}
+
+export const NavList: React.FC<NavListProps> = ({
+  pages,
+  bottomBorder = true,
+}) => {
+  const { translate } = useTranslate();
+  return (
+    <ul className="nav flex-column">
+      {pages.map((useCase, index) => (
+        <li className="nav-item" key={useCase.link}>
+          <a
+            href={useCase.link}
+            className={`nav-link ${
+              index === pages.length - 1 && !bottomBorder ? "border-none" : ""
+            }`}
+          >
+            {translate(useCase.description)}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+};