added : display image added

Author: faisal004

public/dashboard1.webp

@@ -1,6 +1,7 @@
 import Banner from '@/components/banner';
 import Footer from '@/components/footer';
 import { Icons } from '@/components/icons';
+import ImageDisplay from '@/components/image-display';
 import {
   PageActions,
   PageHeader,
@@ -39,7 +40,7 @@ const IndexPage = () => {
             </Link>
           </PageActions>
         </PageHeader>
-
+        <ImageDisplay />
         <Banner />
       </div>
       <Footer />

src/app/(app)/page.tsx

@@ -0,0 +1,20 @@
+import Image from 'next/image';
+
+const ImageDisplay = () => {
+  return (
+    <div className="flex items-center justify-center mb-20 bg-neutral-700 p-[16px] rounded-2xl relative ">
+      <div className="absolute inset-x-0 bottom-0 h-40 w-full bg-gradient-to-b from-transparent via-white to-white dark:via-black/50 dark:to-black  pointer-events-none"></div>
+      <div className="rounded-2xl p-1 bg-black">
+        <Image
+          src="/dashboard1.webp"
+          height={800}
+          width={1440}
+          alt="Dashboard"
+          className="rounded-2xl p-2"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ImageDisplay;