improve(public): ensure to use next/image

apps/public/components/sections/features/profiles-feature.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Image from 'next/image';
 import { useEffect, useState } from 'react';
 
 const PROFILES = [
@@ -74,7 +75,13 @@ export function ProfilesFeature() {
             className="w-full flex-shrink-0 p-8"
           >
             <div className="col md:row justify-center md:justify-start items-center gap-4">
-              <img src={profile.avatar} className="size-32 rounded-full" />
+              <Image
+                src={profile.avatar}
+                className="size-32 rounded-full"
+                width={128}
+                height={128}
+                alt={profile.name}
+              />
               <div>
                 <div className="text-3xl font-semibold">{profile.name}</div>
                 <div className="text-muted-foreground text-center md:text-left">

apps/public/components/sections/features/web-analytics-feature.tsx

@@ -5,8 +5,8 @@ import { cn } from '@/lib/utils';
 import NumberFlow from '@number-flow/react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { ArrowUpIcon } from 'lucide-react';
+import Image from 'next/image';
 import { useEffect, useState } from 'react';
-
 const TRAFFIC_SOURCES = [
   {
     icon: 'https://api.openpanel.dev/misc/favicon?url=https%3A%2F%2Fgoogle.com',
@@ -164,10 +164,12 @@ function BarCell({
       <div className="relative row justify-between ">
         <div className="row gap-2 items-center font-medium">
           {icon.startsWith('http') ? (
-            <img
+            <Image
               alt="serie icon"
               className="max-h-4 rounded-[2px] object-contain"
               src={icon}
+              width={16}
+              height={16}
             />
           ) : (
             <div className="text-2xl">{icon}</div>