refactor: cleanup styles + move links in links.js to cleanup homepage

docs/learn/getting-started.mdx

@@ -7,91 +7,90 @@ title: 'Quick Start'
 import CallToActionButton from '@site/src/components/CallToActionButton';
 import Chip from '@site/src/components/Chip';
 import CardWithContent from '@site/src/components/CardWithContent';
-import LinksBox from '@site/src/components/LinksBox';
+import LinkCards from '@site/src/components/LinkCards';
+import Link from '@docusaurus/Link';
 
 import styles from './learn.module.scss';
 
-import DeveloperBannerImage from '../../static/img/learn/DEVELOPERS_dApp.png';
+import DappBannerImage from '../../static/img/learn/DEVELOPERS_dApp.png';
+import SmartContractBannerImage from '../../static/img/learn/DEVELOPERS_SmartContract.png';
+
+import { gettingStarted } from './links';
 
 # Developer Quickstart
 
 <div className={styles.containerQuickstartCards}>
 
-<CardWithContent title="Dapp Developer" image={DeveloperBannerImage}>
+<CardWithContent title="Dapp Developer" image={DappBannerImage}>
   <ul>
     <li>
-      <a href="#building-dapps-with-universal-profiles">
-        <span>Learn how to develop with Universal Profiles</span>
-      </a>
+      <Link to="#building-dapps-with-universal-profiles">
+        Learn how to develop with Universal Profiles
+      </Link>
     </li>
     <li>
-      <a
-        href="https://github.com/lukso-network/lukso-playground"
-        target="_blank"
-      >
-        <span>Explore code examples in the LUKSO playground</span>
-      </a>
+      <Link href="https://github.com/lukso-network/lukso-playground">
+        Explore code examples in the LUKSO playground
+      </Link>
     </li>
   </ul>
 </CardWithContent>
 
-<CardWithContent title="Smart Contract Developer" image={DeveloperBannerImage}>
+<CardWithContent
+  title="Smart Contract Developer"
+  image={SmartContractBannerImage}
+>
   <ul>
     <li>
-      <a href="../learn/digital-assets/getting-started">
-        <span>Get started with Tokens and NFTs</span>
-      </a>
+      <Link to="../learn/digital-assets/getting-started">
+        Get started with Tokens and NFTs
+      </Link>
     </li>
     <li>
-      <a href="../learn/digital-assets/token/create-lsp7-token">
-        <span>Create a token</span>
-      </a>
+      <Link to="../learn/digital-assets/token/create-lsp7-token">
+        Create a token
+      </Link>
     </li>
     <li>
-      <a href="../learn/universal-profile/universal-receiver/create-receiver-forwarder">
-        <span>Create an Automatic Token Forwarder for your UP</span>
-      </a>
+      <Link to="../learn/universal-profile/universal-receiver/create-receiver-forwarder">
+        Create an Automatic Token Forwarder for your UP
+      </Link>
     </li>
   </ul>
 </CardWithContent>
 
 <CardWithContent title="Quickstart Integration">
   <ul>
     <li>
-      <a href="../learn/migrate/migrate-to-lukso">Migrate to LUKSO</a>
+      <Link to="../learn/migrate/migrate-to-lukso">Migrate to LUKSO</Link>
     </li>
     <li>
-      <a href="../learn/migrate/migrate-erc20-to-lsp7">
-        <span>Refactor a Solidity ERC20 token to LSP7</span>
-      </a>
+      <Link to="../learn/migrate/migrate-erc20-to-lsp7">
+        Refactor a Solidity ERC20 token to LSP7
+      </Link>
     </li>
     <li>
-      <a href="../learn/migrate/migrate-erc721-to-lsp8">
-        <span>Refactor a Solidity ERC721 NFT to LSP8</span>
-      </a>
+      <Link to="../learn/migrate/migrate-erc721-to-lsp8">
+        Refactor a Solidity ERC721 NFT to LSP8
+      </Link>
     </li>
   </ul>
 </CardWithContent>
 
 <CardWithContent title="Join the Community">
   <ul>
     <li>
-      <a href="https://support.lukso.network/" target="_blank">
-        <span>Visit our support website</span>
-      </a>
+      <Link to="https://support.lukso.network/">Visit our support website</Link>
     </li>
     <li>
-      <a
-        href="https://discord.com/channels/359064931246538762/585786253992132609"
-        target="_blank"
-      >
-        <span>Join the Developer community on Discord</span>
-      </a>
+      <Link to="https://discord.com/channels/359064931246538762/585786253992132609">
+        Join the Developer community on Discord
+      </Link>
     </li>
     <li>
-      <a href="https://support.lukso.network/contact-us" target="_blank">
-        <span>Contact the tech team</span>
-      </a>
+      <Link to="https://support.lukso.network/contact-us">
+        Contact the tech team
+      </Link>
     </li>
   </ul>
 </CardWithContent>
@@ -153,16 +152,20 @@ When building dApps on LUKSO, you are interacting with [Universal Profiles 🆙]
 
 <CardWithContent title="Using the Relayer API">
 
-If you are looking to build a dApp that needs to create Universal Profiles, you can use the [LUKSO Relayer API](../tools/services/relayer-developer.md) to do that easily programmatically.
+The [LUKSO Relayer API](../tools/services/relayer-developer.md) allows you to easily create and deploy Universal Profiles from your dApp in Javascript.
+
+Your users will benefit from a free monthly gas quota and will be able to submit transactions without requiring to pay for gas. A great way to onboard new users quickly and easily into your dApp!
 
-Your users will benefit from a free monthly gas quota and therefore, will be able to submit transactions without requiring to pay for gas. A great benefit for onboarding new users quickly and easily into your dApp!
+🔌 [**Deploy with the LUKSO Relayer API**](../tools/services/relayer-developer.md).
 
 </CardWithContent>
 
 <CardWithContent title="Manual Deployment">
-If you prefer to create a Universal Profile manually, use the LSP23 Linked Contracts Factory contract on LUKSO Mainnet. This factory contract can help you to deploy a Universal Profile + its Key Manager. Follow our guide:
+If you prefer to create a Universal Profile manually, use the LSP23 Linked Contracts Factory contract on LUKSO Mainnet.
+
+This factory contract can help you to deploy a Universal Profile + its Key Manager. However, you will have to set the metadata and permissions as well on deployment. Follow our guide below.
 
-➡️ [**Deploy 🆙 with LSP23 Linked Contract Factory**](./universal-profile/advanced-guides/deploy-up-with-lsp23.md).
+🏭 [**Deploy with LSP23 Linked Contract Factory**](./universal-profile/advanced-guides/deploy-up-with-lsp23.md).
 
 </CardWithContent>
 
@@ -193,7 +196,7 @@ LUKSO is a Layer 1 EVM Blockchain. All tools and tutorials for Ethereum also wor
 
 Developers building on LUKSO can write smart contracts in any EVM-based smart contract languages (Solidity, Vyper, etc...), and use existing standards already developed for other Ethereum networks.
 
-<LinksBox
+<LinkCards
   links={[
     {
       title: 'Tutorials for Universal Profiles',

docs/standards/introduction.md

@@ -39,20 +39,6 @@ The **[default implementation of these standards in Solidity](../contracts/intro
 
 > See the [Contracts](../contracts/introduction.md) section for the Solidity implementation of these standards and their ABI docs.
 
-:::info Questions? Want to learn more?
-
-<div class="discord-logo">
-
-![Discord logo](./discord-logo.png)
-
-</div>
-
-Feel free to join the [LUKSO **Discord server**](https://discord.com/channels/359064931246538762/620552532602912769), and ask your questions in the [#standards](https://discord.com/channels/359064931246538762/620552532602912769) channel.
-
-Our team and community members look forward to helping you understand the standards.
-
-:::
-
 ## LSP Standard Specifications
 
 See [LUKSO Improvement Proposals - LIPs (GitHub)](https://github.com/lukso-network/LIPs) if you are looking for the design and formal specifications of each LSP Standards.

docusaurus.config.js

@@ -439,7 +439,6 @@ export default {
           className: 'header-github-link',
           position: 'right',
         },
-        // TODO: add Discord icon (need to add the icon in `custom.css`)
         {
           href: 'https://discord.com/invite/lukso',
           className: 'header-discord-link',
@@ -451,7 +450,6 @@ export default {
       appId: '2C4F8KVKCI',
       apiKey: '27e4c8037f1e5b053cf1bf1d4d60c408',
       indexName: 'lukso_docs',
-      placeholder: 'Search anything...',
       contextualSearch: true,
       // Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.
       externalUrlRegex: 'docs\\.lukso\\.tech',

src/components/Accordion/index.tsx

@@ -37,10 +37,7 @@ const CustomAccordion: React.FC<AccordionData> = ({
       >
         <h3>
           {' '}
-          <Icon
-            icon={icon}
-            // style={{ width: '1.75em', height: '1.75em', marginRight: '0.5em' }}
-          />
+          <Icon icon={icon} />
           {summary}
         </h3>
       </AccordionSummary>

src/components/Box/Box.module.scss

@@ -1,15 +1,12 @@
 .card {
-  // color: var(--ifm-font-color-base);
   width: 100%;
   height: 100%;
   flex-direction: row;
-  margin-bottom: 1rem;
 
+  margin-bottom: 1rem;
   padding: 1rem;
   border-radius: 1.5625rem;
 
-  // background-color: var(--ifm-background-color);
-
   transition: all 200ms ease-out 10ms;
 
   .title {
@@ -21,10 +18,6 @@
     line-height: 1.25rem;
   }
 
-  // a {
-  //   max-width: 100%;
-  // }
-
   &:hover {
     transform: scale(1.05);
   }