refactoring in next components

components/icons/logo.tsx

@@ -1,6 +1,7 @@
+import Image from "next/image";
 
 export default function LogoIcon(props: React.ComponentProps<'img'>) {
   return (
-    <img src="/logo-square-black.png" alt="scape squared logo" />
+    <Image width="100" height="50" src="/logo-square-black.png" alt="scape squared logo" />
   );
 }

components/layout/footer.tsx

@@ -58,9 +58,9 @@ export default async function Footer() {
           <p>Designed in England</p>
           <p className="md:ml-auto">
             Crafted by{' '}
-            <a href="https://www.instagram.com/sammiisparkle" className="text-black dark:text-white" target="_blank">
+            <Link href="https://www.instagram.com/sammiisparkle" className="text-black dark:text-white" target="_blank">
               Sammii Sparkle
-            </a>
+            </Link>
           </p>
         </div>
       </div>

components/product/description-content.tsx

@@ -2,6 +2,7 @@ import { SCAPE } from 'constants/brand';
 import { productTypes } from 'constants/item-details';
 import { credentials, credentialsKeys } from 'constants/sustainability';
 import { Product } from 'lib/shopify/types';
+import Link from 'next/link';
 
 export function DescriptionContent({ product }: { product: Product }) {
   const productTypeKeys = Object.keys(productTypes);
@@ -23,10 +24,10 @@ export function DescriptionContent({ product }: { product: Product }) {
   }
 
   const certificationLink = (credType: keyof typeof credentials) => {
-    return <a 
+    return <Link 
     className='text-underline text-xs' 
     href={`#${getCertificationId(credType)}`}
-    > {credentials[credType].title} certified</a>
+    > {credentials[credType].title} certified</Link>
   }
 
   const commonDetailKeys = Object.keys(itemDetails.common)

components/product/sustainability-info.tsx

@@ -5,6 +5,7 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { credentials, credentialsKeys } from "constants/sustainability";
+import Link from "next/link";
 
 
 export function SustainabilityInfo() {
@@ -18,13 +19,13 @@ export function SustainabilityInfo() {
                 <AccordionTrigger className="text-xs py-3">{credentials[credential as keyof typeof credentials].title}</AccordionTrigger>
                 <AccordionContent>
                   "{credentials[credential as keyof typeof credentials].excerpt}" <br /><br/>
-                  <a 
+                  <Link 
                   className="text-bold pt-6" 
                   href={credentials[credential as keyof typeof credentials].link}
                   target="_blank"
                   >
                     Read more
-                  </a>
+                  </Link>
                 </AccordionContent>
               </AccordionItem>
             ))}