Add Tokenization landing page

Co-authored by: Rome Reginelli <[email protected]>, pdp2121 <[email protected]>

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

Author: jonathanlei

about/uses.page.tsx

@@ -878,7 +878,7 @@ export default function Uses() {
               </div>
               {/* cards */}
               <div
-                className="right row col row-cols-lg-2 m-0 p-0"
+                className="right row col row-cols-lg-2 m-2 p-0"
                 id="use_case_companies_list"
               >
                 {filteredCards.map((card) => (

docs/index.page.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useTranslate } from '@portal/hooks';
+import { NavList } from "shared/components/nav-list";
 
 export const frontmatter = {
   seo: {
@@ -164,15 +165,7 @@ function UseCasesCard(props: {
     <div className="col">
       <img className={'use-cases-img img-fluid mb-2 shadow ' + useCase.imgClass} alt={useCase.title} id={useCase.id} />
       <h5 className="mt-4">{useCase.title}</h5>
-      <ul className="nav flex-column">
-        {useCase.subItems.map(item => (
-          <li key={item.link} className="nav-item">
-            <a href={item.link} className="nav-link">
-              {item.description}
-            </a>
-          </li>
-        ))}
-      </ul>
+      <NavList pages={useCase.subItems} />
     </div>
   );
 }
@@ -386,15 +379,7 @@ export default function Docs() {
           <div className="row card-grid card-grid-2xN">
             <div className="col" id="popular-topics">
               <h2 className="h4">{translate('Browse By Recommended Pages')}</h2>
-              <ul className="nav flex-column">
-                {recommendedPages.map(page => (
-                  <li className="nav-item" key={page.link}>
-                    <a href={page.link} className="nav-link">
-                      {translate(page.description)}
-                    </a>
-                  </li>
-                ))}
-              </ul>
+              <NavList pages={recommendedPages} />
             </div>
             <div className="col">
               <div className="card cta-card p-8-sm p-10-until-sm br-8">