adapt import

components/Homepage/Carousel/CarouselItem.tsx

@@ -1,4 +1,6 @@
 import React from 'react'
+import Image from 'next/image'
+
 
 interface CarouselItemProps {
   title: string;

components/Homepage/ExampleCard.tsx

@@ -4,6 +4,7 @@ import { combination } from '../../lib/utils';
 import { Tag } from './Tag';
 import { useRouter } from 'next/navigation';
 
+
 interface ExampleCardProps extends HTMLAttributes<HTMLButtonElement> {
   icon: "coinbase" | "cosmos" | "lido" | "moonpay-purple" | "objkt" | "solana";
   title: string;

components/Homepage/JourneyButton.tsx

@@ -1,4 +1,6 @@
 import { useState, useEffect, FC, HTMLAttributes } from 'react'
+import Image from 'next/image'
+
 
 interface JourneyButtonProps extends HTMLAttributes<HTMLDivElement> {
   hovered: boolean;

components/ui/Button-scroll.tsx

@@ -1,6 +1,8 @@
 import { FC, HTMLAttributes } from 'react'
 import { Link } from "react-scroll";
 import { combination } from '../../lib/utils';
+import Image from 'next/image'
+
 
 interface ButtonChildrenProps {
   label: string;

components/ui/Button.tsx

@@ -1,6 +1,7 @@
 import { FC, HTMLAttributes } from 'react'
 import { combination } from '../../lib/utils';
 import { useRouter } from 'next/navigation';
+import Image from 'next/image'
 
 
 interface ButtonChildrenProps {

pages/docs/clear-signing/erc7730.mdx

@@ -1,4 +1,5 @@
 import { Callout } from "nextra/components";
+import Image from 'next/image'
 
 # ERC-7730: How to implement clear signing
 

pages/docs/clear-signing/getting-started.mdx

@@ -1,3 +1,6 @@
+import Image from 'next/image'
+
+
 # Enhancing Security through Clear Signing
 
 ## Why does your dApp or Wallet need clear signing?

pages/docs/device-app/explanation/device-app-role.mdx

@@ -6,6 +6,8 @@ Description: "The steps to code your device app and submit it for a Ledger Live
 import Zoom from 'react-medium-image-zoom'
 import 'react-medium-image-zoom/dist/styles.css'
 import Glossary from '/components/features/tooltip-glossary'
+import Image from 'next/image'
+
 
 
 # What is a device app?

pages/docs/device-app/submission-process/deliverables/ui-flow-video.mdx

@@ -3,6 +3,9 @@ title: Demo
 description: For any app submission, you are required to submit a video demo of your Device App as described in this article.
 ---
 
+import Image from 'next/image'
+
+
 # Demo
 
 You are required to submit a video demo of your Device App as described below (For Ledger Nano only).

pages/docs/device-app/submission-process/process.mdx

@@ -1,6 +1,8 @@
 import Zoom from 'react-medium-image-zoom'
 import 'react-medium-image-zoom/dist/styles.css'
 import { Callout } from 'nextra/components'
+import Image from 'next/image'
+
 
 # How the submission of an app goes?
 

pages/docs/device-interaction/beginner/cosmos-app.mdx

@@ -5,6 +5,8 @@ description: In this section, we will guide you through the creation of a web ap
 
 import Zoom from 'react-medium-image-zoom'
 import 'react-medium-image-zoom/dist/styles.css'
+import Image from 'next/image'
+
 
 # Interact with the Cosmos App
 

pages/docs/device-interaction/beginner/personal-message.mdx

@@ -6,6 +6,8 @@ description: In this section, we will guide you through the creation of a web ap
 import { Callout } from 'nextra/components'
 import Zoom from 'react-medium-image-zoom'
 import 'react-medium-image-zoom/dist/styles.css'
+import Image from 'next/image'
+
 
 # Sign a personal message
 

pages/docs/device-interaction/beginner/smart-contract.mdx

@@ -4,6 +4,8 @@ description: In this section, we will guide you through the creation of an appli
 ---
 
 import { Callout } from 'nextra/components'
+import Image from 'next/image'
+
 
 # Call a Smart Contract
 

pages/docs/device-interaction/beginner/transfer-eth.mdx

@@ -3,6 +3,9 @@ title: Transfer of Ethers between accounts
 description: In this section, we will guide you through the creation of an application. This application will create a transaction that will be signed with the Ledger Nano before sending it to the blockchain.
 ---
 
+import Image from 'next/image'
+
+
 # Transfer of Ethers between accounts
 
 ## Introduction

pages/docs/device-interaction/beginner/transfer-sol.mdx

@@ -3,6 +3,9 @@ title: Transfer of Sol between accounts
 description: In this section, we will guide you through the creation of an application. This application will create a transaction that will be signed with the Ledger Nano before sending it to the blockchain.
 ---
 
+import Image from 'next/image'
+
+
 # Transfer of Sol between accounts
 
 ## Introduction

pages/docs/device-interaction/getting-started.mdx

@@ -1,4 +1,6 @@
 import { Callout } from 'nextra/components'
+import Image from 'next/image'
+
 
 # Getting started
 

pages/docs/device-interaction/integration/ledgerjs-transport/desktop-application/node-electron-hid.mdx

@@ -3,6 +3,9 @@ title: Node HID integration
 description: In this section, we will guide you through the creation of a desktop electron application. This application will be connected to your Nano to display the address of your account (eg. bitcoin account, ethereum account).
 ---
 
+import Image from 'next/image'
+
+
 # Node HID integration
 
 ## Introduction

pages/docs/device-interaction/integration/ledgerjs-transport/mobile-application/react-native-android-hid.mdx

@@ -4,6 +4,8 @@ description: In this section, you will see how to create a React Native applicat
 ---
 
 import { Callout } from 'nextra/components'
+import Image from 'next/image'
+
 
 # React Native HID (Android only)
 

pages/docs/device-interaction/integration/ledgerjs-transport/mobile-application/react-native-bluetooth-android.mdx

@@ -6,6 +6,8 @@ description: In this section you will see how to create a React Native applicati
 import { Callout } from 'nextra/components'
 import Zoom from 'react-medium-image-zoom'
 import 'react-medium-image-zoom/dist/styles.css'
+import Image from 'next/image'
+
 
 
 # React Native Bluetooth on Android (Nano X only)

pages/docs/device-interaction/integration/ledgerjs-transport/mobile-application/react-native-bluetooth-ios.mdx

@@ -6,6 +6,8 @@ description: In this section, you will see how to create a React Native applicat
 import { Callout } from 'nextra/components'
 import Zoom from 'react-medium-image-zoom'
 import 'react-medium-image-zoom/dist/styles.css'
+import Image from 'next/image'
+
 
 # React Native Bluetooth on iOS (Nano X only)
 

pages/docs/device-interaction/integration/ledgerjs-transport/web-application/web-bluetooth.mdx

@@ -4,6 +4,8 @@ description: In this section, we will guide you through the creation of an appli
 ---
 
 import { Callout } from 'nextra/components'
+import Image from 'next/image'
+
 
 # Web Bluetooth
 

pages/docs/device-interaction/integration/ledgerjs-transport/web-application/web-hid-usb.mdx

@@ -3,6 +3,7 @@ title: Web USB/HID
 description: In this section, we will guide you through the creation of a web application. This application will connect to your Nano to display the address of a Bitcoin account. If you want it for Ethereum you can easily modify it.
 ---
 
+import Image from 'next/image'
 import { Callout } from 'nextra/components'
 
 # Web USB/HID

pages/docs/device-interaction/references/logos.mdx

@@ -2,6 +2,9 @@
 title: Where can I find Ledger logos?
 ---
 
+import Image from 'next/image'
+
+
 # Ledger Logos
 
 ## PNG

pages/docs/ledger-live/accounts/explanation/architecture.mdx

@@ -1,5 +1,7 @@
 import Zoom from 'react-medium-image-zoom'
 import 'react-medium-image-zoom/dist/styles.css'
+import Image from 'next/image'
+
 
 # General architecture
 

pages/docs/ledger-live/accounts/integration/blockchain/create-module.mdx

@@ -3,6 +3,9 @@ title: "Add accounts: light sync"
 description: An account represents a wallet where a user detains crypto assets for a given crypto currency. Ledger Live model is essentially an array of Account because many accounts can be created, even within a same crypto currency.
 ---
 
+import Image from 'next/image'
+
+
 # 3 - Create Coin Module
 
 ## Organization

pages/docs/ledger-live/accounts/integration/blockchain/design-guidelines.mdx

@@ -5,6 +5,8 @@ description: In this page you can see the classic UI Flow used in Ledger Live. Y
 
 import Zoom from 'react-medium-image-zoom'
 import 'react-medium-image-zoom/dist/styles.css'
+import Image from 'next/image'
+
 
 
 # Design guidelines

pages/docs/ledger-live/exchange.mdx

@@ -1,6 +1,8 @@
 import { Cards } from 'nextra/components'
 import Zoom from 'react-medium-image-zoom'
 import { Callout } from 'nextra/components'
+import Image from 'next/image'
+
 
 # Get your exchange services in Ledger Live
 
@@ -28,27 +30,31 @@ To see if this integration is a good fit for your service, please get in touch w
     arrow
     title="Swap Integration" 
     href="/docs/exchange/swap">
-    <>![Cryptoassets Library](/blockchain-cover.jpg)</> 
-  />
+    /> 
+    <Image src={"/blockchain-cover.jpg"} />
+  </Cards.Card>
   <Cards.Card 
     image
     arrow
     title="Sell Integration" 
     href="/docs/exchange/sell">
-    <>![Cryptoassets Library](/blockchain-cover.jpg)</> 
-  />
+    /> 
+    <Image src={"/blockchain-cover.jpg"} />
+  </Cards.Card>
   <Cards.Card 
     image
     arrow
     title="Buy Integration" 
     href="/docs/exchange/buy">
-    <>![Cryptoassets Library](/blockchain-cover.jpg)</> 
-  />
+    /> 
+    <Image src={"/blockchain-cover.jpg"} />
+  </Cards.Card>
   <Cards.Card 
     image
     arrow
     title="Card Integration" 
     href="/docs/exchange/card">
-    <>![Cryptoassets Library](/blockchain-cover.jpg)</> 
-  />
+    /> 
+    <Image src={"/blockchain-cover.jpg"} />
+  </Cards.Card>
 </Cards>

pages/docs/ledger-live/exchange/buy/providers-liveapp.mdx

@@ -2,6 +2,8 @@ import { Tabs } from "nextra/components";
 import { Callout } from "nextra/components";
 import Zoom from "react-medium-image-zoom";
 import "react-medium-image-zoom/dist/styles.css";
+import Image from 'next/image'
+
 
 # Provider's LiveApp
 

pages/docs/ledger-live/exchange/card/providers-backend.mdx

@@ -4,6 +4,8 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import BackendIntro from '../../../../../public/exchange/import/backend-intro.mdx'
 import PayloadAndSignature from '../../../../../public/exchange/import/sell-payload-and-signature.mdx'
+import Image from 'next/image'
+
 
 # Backend
 

pages/docs/ledger-live/exchange/sell/providers-backend.mdx

@@ -4,6 +4,8 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import BackendIntro from '../../../../../public/exchange/import/backend-intro.mdx'
 import PayloadAndSignature from '../../../../../public/exchange/import/sell-payload-and-signature.mdx'
+ import Image from 'next/image'
+
 
 # Backend
 

pages/docs/ledger-live/exchange/swap/flow.mdx

@@ -1,6 +1,8 @@
 import Zoom from 'react-medium-image-zoom'
 import 'react-medium-image-zoom/dist/styles.css'
 import { Cards } from 'nextra/components'
+import Image from 'next/image'
+
 
 # Swap : CEX integrated as a LiveApp 
 

pages/docs/ledger-live/exchange/swap/flow/detailed-technical-flows.mdx

@@ -1,6 +1,8 @@
 import { Callout } from "nextra/components";
 import Zoom from "react-medium-image-zoom";
 import "react-medium-image-zoom/dist/styles.css";
+import Image from 'next/image'
+
 
 # Detailed Technical Flows
 

pages/docs/ledger-live/exchange/swap/flow/partner-live-app.mdx

@@ -1,5 +1,7 @@
 import Zoom from 'react-medium-image-zoom'
 import 'react-medium-image-zoom/dist/styles.css'
+import Image from 'next/image'
+
 
 # Partner LiveApp
 

pages/docs/ledger-live/exchange/swap/flow/transaction-status.mdx

@@ -1,5 +1,6 @@
 import Zoom from 'react-medium-image-zoom'
 import 'react-medium-image-zoom/dist/styles.css'
+import Image from 'next/image'
 
 # Transaction status
 

pages/docs/ledger-live/exchange/swap/providers-backend.mdx

@@ -4,6 +4,8 @@ import { Tabs } from 'nextra/components'
 import { Callout } from 'nextra/components'
 import BackendIntro from '../../../../../public/exchange/import/backend-intro.mdx'
 import PayloadAndSignature from '../../../../../public/exchange/import/payload-and-signature.mdx'
+import Image from 'next/image'
+
 
 # Backend
 

pages/docs/nft-display/optimized-images.mdx

@@ -3,6 +3,9 @@ title: Optimized images
 description: This series of articles are for NFT dApp developers and NFT creators who want to allow their audience to showcase their NFTs on the Ledger Stax device.
 ---
 
+import Image from 'next/image'
+
+
 # Optimized images
 
 This series of articles are for NFT dApp developers and NFT creators who want to allow their audience to showcase their NFTs on the Ledger Stax device.

pages/docs/nft-display/update-metadata.mdx

@@ -6,6 +6,8 @@ description: This guide will walk you through step-by-step instructions on how t
 import { Callout } from 'nextra/components'
 import Zoom from 'react-medium-image-zoom'
 import 'react-medium-image-zoom/dist/styles.css'
+import Image from 'next/image'
+
 
 # Update mutable metadata (in-depth guide)