Optimized images and linting

app/projects/design/page.tsx

@@ -7,6 +7,7 @@ import { Canvas, useThree } from '@react-three/fiber';
 import { Suspense, useEffect, useState, useTransition } from 'react';
 import { TbCube3dSphere } from 'react-icons/tb';
 import * as THREE from 'three';
+import Image from 'next/image';
 
 const models = [
     { name: 'Wallet', src: 'Wallet' },
@@ -122,7 +123,13 @@ export default function DesignPage() {
                             />
 
                             <a href={`/models/${activeModel}.usdz`} rel="ar" className="absolute top-4 right-4 bg-black/50 backdrop-blur-md text-white text-sm px-4 py-2 rounded-full border border-white/10 hover:bg-white/20 transition-colors md:hidden z-10 flex items-center gap-2">
-                                <img src={`/models/${activeModel}.png`} alt="AR Preview" className="w-5 h-5 rounded-full object-cover" />
+                                <Image
+                                    src={`/models/${activeModel}.png`}
+                                    alt="AR Preview"
+                                    width={20}
+                                    height={20}
+                                    className="w-5 h-5 rounded-full object-cover"
+                                />
                                 View in AR
                             </a>
                         </div>