fix image otimization

aura-nw · Feb 2, 2024 · 10aa534 · 10aa534
1 parent 86f68e2
commit 10aa534
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/sections/blogs/components/Card/index.tsx b/src/sections/blogs/components/Card/index.tsx
@@ -1,20 +1,21 @@
 import Image, { StaticImageData } from "next/image";
 
 type Card = {
+    key : string
     img: StaticImageData,
     title: string,
-    description: string
+    description: string,
 }
 
 type CardProps = {
     data: Card
 }
 
 function Card({ data }: CardProps) {
-    const { img, title, description } = data
+    const { img, title, description, key } = data
     return (
         <div className="flex flex-col w-[323px] min-h-[335px] xl:min-h-[474px] xl:w-[540px] items-start rounded-2xl border border-solid border-[rgba(254,119,108,0.12)] bg-[#181614]">
-            <Image className="rounded-t-2xl h-[167px] object-cover xl:h-[298px]" src={img} alt={title}></Image>
+            <Image className="rounded-t-2xl h-[167px] object-cover xl:h-[298px]" src={img} alt={key}></Image>
             <div className="flex flex-col gap-2 p-6 xl:px-10 xl:pt-8 xl:pb-12">
                 <span className="bg-brand-linear-gradient bg-clip-text text-transparent font-normal leading-6">{title}</span>
                 <span className="text-white font-ppmori-semibold text-[22px] font-semibold leading-8">{description}</span>

diff --git a/src/sections/blogs/components/Slider/index.tsx b/src/sections/blogs/components/Slider/index.tsx
@@ -14,16 +14,19 @@ import useWindowSize from '../../../../hooks/useWindowSize';
 import Card from '../Card';
 
 const blogsData = [{
+    key: "1",
     img: img_cosmos,
     title: "Announcement",
     description: "Monsterra, the first interchain GameFi on Cosmos via Aura Network"
 },
 {
+    key: "2",
     img: img_nft,
     title: "Announcement",
     description: "Monsterra, the first interchain GameFi on Cosmos via Aura Network"
 },
 {
+    key: "3",
     img: img_gateio,
     title: "Announcement",
     description: "Monsterra, the first interchain GameFi on Cosmos via Aura Network"

diff --git a/src/sections/blogs/index.tsx b/src/sections/blogs/index.tsx
@@ -6,7 +6,7 @@ import BlogsSlider from "./components/Slider";
 function Blogs() {
     const sliderRef = useRef<any>();
     return (
-        <div className="flex flex-col gap-8 items-center xl:mt-10 xl:pl-10 xl:w-full">
+        <div className="flex flex-col gap-8 items-center xl:mt-10 xl:w-full">
             <div className="flex w-full justify-center">
                 <div className="flex flex-col gap-4 items-center px-10 xl:px-0 xl:w-full xl:items-start">
                     <span className="text-light-yellow font-normal text-center xl:text-start xl:text-xl">Aura's Blog</span>