From 4d8e735398aa9debc693536a234a333e63cc71b8 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Thu, 28 Aug 2025 14:29:04 -0600
Subject: [PATCH] Storybook Image fixes

---
 app/components/FeatureGrid.js | 1 +
 app/components/MiniCard.js    | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/components/FeatureGrid.js b/app/components/FeatureGrid.js
index fe91bb3..ecda70e 100644
--- a/app/components/FeatureGrid.js
+++ b/app/components/FeatureGrid.js
@@ -3,6 +3,7 @@
 import React from "react";
 import ContentLockup from "./ContentLockup";
 import MiniCard from "./MiniCard";
+import Image from "next/image";
 
 const FeatureGrid = ({ title, subtitle, className = "" }) => {
   return (
diff --git a/app/components/MiniCard.js b/app/components/MiniCard.js
index 9b5abf5..a1e2b3a 100644
--- a/app/components/MiniCard.js
+++ b/app/components/MiniCard.js
@@ -1,6 +1,7 @@
 "use client";
 
 import React from "react";
+import Image from "next/image";
 
 const MiniCard = ({
   children,
@@ -23,7 +24,7 @@ const MiniCard = ({
         {/* Content for the inner panel */}
         {panelContent && (
           <div className="flex items-center justify-center w-full h-full">
-            <img
+            <Image
               src={panelContent}
               alt={
                 ariaLabel ||
@@ -32,6 +33,10 @@ const MiniCard = ({
                 "Feature icon"
               }
               className="max-w-[58px] max-h-[58px] w-auto h-auto object-contain"
+              unoptimized
+              width={0}
+              height={0}
+              sizes="100vw"
             />
           </div>
         )}