improve(public): ensure to use next/image

apps/public/components/hero-carousel.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from '@/lib/utils';
 import { motion } from 'framer-motion';
+import NextImage from 'next/image';
 import { useState } from 'react';
 import { Button } from './ui/button';
 
@@ -28,15 +29,19 @@ function LivePreview() {
 function Image({ src }: { src: string }) {
   return (
     <div>
-      <img
+      <NextImage
-        className="w-full  h-full block dark:hidden"
+        className="w-full h-full block dark:hidden"
         src={`/${src}-light.png`}
         alt={`${src} light`}
+        width={1200}
+        height={800}
       />
-      <img
+      <NextImage
-        className="w-full  h-full hidden dark:block"
+        className="w-full h-full hidden dark:block"
         src={`/${src}-dark.png`}
         alt={`${src} dark`}
+        width={1200}
+        height={800}
       />
     </div>
   );

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>

apps/public/components/twitter-card.tsx

@@ -46,7 +46,7 @@ export function TwitterCard({
       <div className="row gap-4">
         <div className="size-12 rounded-full bg-muted overflow-hidden shrink-0">
           {avatarUrl && (
-            <img src={avatarUrl} alt={name} width={48} height={48} />
+            <Image src={avatarUrl} alt={name} width={48} height={48} />
           )}
         </div>
         <div className="col gap-1">

apps/public/next.config.mjs

@@ -6,7 +6,7 @@ const withMDX = createMDX();
 const config = {
   reactStrictMode: false,
   images: {
-    domains: ['localhost', 'openpanel.dev'],
+    domains: ['localhost', 'openpanel.dev', 'api.openpanel.dev'],
   },
   serverExternalPackages: ['@hyperdx/node-opentelemetry'],
 };