Escape apostrophes and use next/image in install guides

Escaped apostrophes in instructional text for consistency and to prevent JSX parsing issues. Replaced <img> tags with Next.js <Image> component in OsTabs and Socio4HealthNonCoder for optimized image handling and improved accessibility.

Author: dirreno

app/installation/components/Cube4HealthCoder.tsx

@@ -55,7 +55,7 @@ pip3 install --use-pep517 --no-build-isolation --no-cache-dir --force-reinstall
 							<li>
 								Verify numpy-based raster support has been installed:
 								<pre className="mt-2 bg-gray-50 border rounded p-3 overflow-x-auto"><code className="language-bash">{`python -c "from osgeo import gdal, gdal_array ; print(gdal.__version__)"`}</code></pre>
-								If this raises ImportError, numpy-based raster support wasn't installed correctly — consult the project's issues and GDAL binding docs.
+								If this raises ImportError, numpy-based raster support wasn&apos;t installed correctly — consult the project&apos;s issues and GDAL binding docs.
 							</li>
 						</ol>
 					</div>
@@ -118,7 +118,7 @@ source venv/bin/activate`}</code></pre>
 					</div>
 				</details>
 
-				<p className="mt-4 text-sm text-gray-600">Notes: cube4health depends on native GDAL libraries. If you run into import/build issues, check your system GDAL version, Python version (3.10 recommended for development), and consult the project's GitHub issues for platform-specific fixes.</p>
+				<p className="mt-4 text-sm text-gray-600">Notes: cube4health depends on native GDAL libraries. If you run into import/build issues, check your system GDAL version, Python version (3.10 recommended for development), and consult the project&apos;s GitHub issues for platform-specific fixes.</p>
 			</div>
 		</article>
 	);

app/installation/components/Land4HealthCoder.tsx

@@ -39,7 +39,7 @@ export default function Land4HealthCoder() {
           </summary>
           <div className="p-4">
             <p className="mt-2 text-gray-700">Use <code>pak</code> to install the development version from GitHub:</p>
-            <pre className="mt-2 bg-gray-50 border rounded p-3 overflow-x-auto"><code className="language-r">{`# install pak if you don't have it
+              <pre className="mt-2 bg-gray-50 border rounded p-3 overflow-x-auto"><code className="language-r">{`# install pak if you don\'t have it
 install.packages("pak")
 
 # install development version from GitHub
@@ -58,7 +58,7 @@ pak::pak("harmonize-tools/land4health")`}</code></pre>
 
 ee_Initialize(quiet = TRUE)`}</code></pre>
 
-            <p className="mt-2 text-gray-700">You'll see a brief welcome message similar to:</p>
+            <p className="mt-2 text-gray-700">You&apos;ll see a brief welcome message similar to:</p>
             <pre className="mt-2 bg-gray-50 border rounded p-3 overflow-x-auto"><code>{`── Welcome to land4health ────────────────────────────────────────────────────
 A tool of Harmonize Project to calculate and extract Remote Sensing Metrics
 for Spatial Health Analysis. Currently, land4health supports metrics in the
@@ -89,7 +89,7 @@ Attaching core land4health packages:
           </div>
         </details>
 
-        <p className="text-gray-700">You're now ready to use <code>land4health</code> for remote sensing metric extraction in spatial health analysis.</p>
+        <p className="text-gray-700">You&apos;re now ready to use <code>land4health</code> for remote sensing metric extraction in spatial health analysis.</p>
       </div>
     </article>
   );

app/installation/components/OsTabs.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import Image from 'next/image';
 
 export type OS = 'windows' | 'linux' | 'mac' | null;
 const mac_install_img = '/img/mac_install.png';
@@ -47,7 +48,7 @@ export function WindowsInstallDocker() {
               </li>
             </ol>
             <div className="mt-3">
-              <img src={windows_download_img} alt="Docker download page" style={{ width: 682 }} />
+              <Image src={windows_download_img} alt="Docker download page" width={682} height={420} className="rounded border" />
             </div>
           </li>
 
@@ -60,7 +61,7 @@ export function WindowsInstallDocker() {
           <li>
             Leave the recommended configuration and select ‘OK’.
             <div className="mt-3">
-              <img src={windows_config_img} alt="Docker installer recommended settings" style={{ width: 682 }} />
+              <Image src={windows_config_img} alt="Docker installer recommended settings" width={682} height={420} className="rounded border" />
             </div>
           </li>
 
@@ -93,15 +94,15 @@ export function MacInstallDocker() {
               <li>Click and drag the Docker icon to the Applications folder shortcut.</li>
             </ol>
             <div className="mt-3">
-              <img src={mac_install_img} alt="Docker mac installer" style={{ width: 682 }} />
+              <Image src={mac_install_img} alt="Docker mac installer" width={682} height={420} className="rounded border" />
             </div>
             <p className="mt-2">When prompted select ‘Use recommended settings’.</p>
           </li>
 
           <li className="mt-4">
             Once Docker Desktop is installed, accept the terms and conditions and create an account when redirected.
             <div className="mt-3">
-              <img src={mac_signin_img} alt="Docker sign in" style={{ width: 710 }} />
+              <Image src={mac_signin_img} alt="Docker sign in" width={710} height={440} className="rounded border" />
             </div>
           </li>
 
@@ -212,7 +213,7 @@ export function LinuxInstallDocker({ showDesktop = true }: { showDesktop?: boole
             </a>
           </li>
           <li className="mt-2">
-            Install Docker Engine by following steps 1-3 of the section “Install using the apt repository":
+            Install Docker Engine by following steps 1-3 of the section &quot;Install using the apt repository&quot;:
             <div className="mt-1">
               <a className="text-blue-600 underline" href="https://docs.docker.com/engine/install/ubuntu/#install-using-the-repository">
                 https://docs.docker.com/engine/install/ubuntu/#install-using-the-repository

app/installation/components/Socio4HealthCoder.tsx

@@ -27,7 +27,7 @@ export default function Socio4HealthCoder() {
           </summary>
           <div className="p-4">
             <div>
-              <p className="mt-2 text-gray-700">Google Colab comes with many libraries pre-installed, but you'll need to install <code className="bg-gray-100 px-1 rounded">socio4health</code> manually:</p>
+              <p className="mt-2 text-gray-700">Google Colab comes with many libraries pre-installed, but you&apos;ll need to install <code className="bg-gray-100 px-1 rounded">socio4health</code> manually:</p>
               <pre className="mt-2 bg-gray-50 border rounded p-3 overflow-x-auto"><code className="language-bash">{`!pip install socio`}</code></pre>
               <p className="mt-2 text-gray-700">After installation, import the library:</p>
               <pre className="mt-2 bg-gray-50 border rounded p-3 overflow-x-auto"><code className="language-python">{`import socio4health
@@ -71,12 +71,12 @@ print(socio4health.__version__)`}</code></pre>
             <ul className="list-disc pl-5 space-y-1 text-gray-800">
               <li>Check out the official <a href="https://harmonize-tools.github.io/socio4health/" target="_blank" rel="noopener noreferrer">package documentation</a></li>
               <li>PyPI package: Find the <a href="https://pypi.org/project/socio4health/" target="_blank" rel="noopener noreferrer">socio4health package on PyPI</a> for installation and version info</li>
-              <li>GitHub repository: browse the project's code and issues at <a href="https://github.com/harmonize-tools/socio4health" target="_blank" rel="noopener noreferrer">harmonize-tools/socio4health</a></li>
+              <li>GitHub repository: browse the project&apos;s code and issues at <a href="https://github.com/harmonize-tools/socio4health" target="_blank" rel="noopener noreferrer">harmonize-tools/socio4health</a></li>
             </ul>
           </div>
         </details>
 
-        <p className="text-gray-700">You're now ready to use the socio4health package!</p>
+        <p className="text-gray-700">You&apos;re now ready to use the socio4health package!</p>
       </div>
     </article>
   );

app/installation/components/Socio4HealthNonCoder.tsx

@@ -1,3 +1,5 @@
+import Image from 'next/image';
+
 export default function Socio4HealthNonCoder() {
   return (
     <article className="mt-4 rounded-lg bg-white p-6 shadow-sm">
@@ -11,7 +13,7 @@ export default function Socio4HealthNonCoder() {
           <span className="text-gray-600">▸</span>
         </summary>
         <div className="p-4">
-          <p className="text-gray-700">You can try the hosted Streamlit app (remember that the link can be down, for this see the section "Deploy yourself"):</p>
+          <p className="text-gray-700">You can try the hosted Streamlit app (remember that the link can be down, for this see the section &quot;Deploy yourself&quot;):</p>
           <div className="mt-3">
             <a
               href="https://socio4health.streamlit.app/"
@@ -50,10 +52,12 @@ source venv/bin/activate`}</code></pre>
           <p className="mt-3 text-gray-700"><strong>Step 4:</strong> Run the app:</p>
           <pre className="mt-2 bg-gray-50 border rounded p-3 overflow-x-auto"><code className="language-python">{`streamlit run Home.py --server.maxUploadSize=500`}</code></pre>
           <p className="mt-3 text-gray-700">Then open your browser and go to <strong>http://localhost:8501</strong> to access the app.</p>
-          <img
+          <Image
             src="/img/image.png"
             alt="Socio4Health Streamlit App Screenshot"
             className="mt-4 rounded border"
+            width={1200}
+            height={800}
           />
         </div>
       </details>
@@ -65,14 +69,14 @@ source venv/bin/activate`}</code></pre>
         </summary>
         <div className="p-4">
           <ul className="list-disc pl-5 space-y-1 text-gray-800">
-            <li>Official documentation: check the socio library's official docs for API reference</li>
-            <li>GitHub repository: browse the project's code and issues</li>
+            <li>Official documentation: check the socio library&apos;s official docs for API reference</li>
+            <li>GitHub repository: browse the project&apos;s code and issues</li>
             <li>Community support: join relevant forums or Discord channels for help</li>
           </ul>
         </div>
       </details>
 
-      <p className="text-gray-700">You're now ready to try Socio4Health — contact the project maintainers if you need help deploying.</p>
+      <p className="text-gray-700">You&apos;re now ready to try Socio4Health — contact the project maintainers if you need help deploying.</p>
     </article>
   );
 }