update best sales&spv

components/landing-page/header-about.tsx

@@ -156,28 +156,26 @@ export default function HeaderAbout() {
           Best Sales of The Month & SPV of The Month
         </motion.h2>
 
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
+        <div className="flex flex-wrap justify-center gap-6">
-          {["/Asset18.png", "/Asset19.png", "/Asset20.png", "/Asset21.png"].map(
+          {["/spvbest1.jpeg", "/spvbest2.jpeg"].map((src, index) => (
-            (src, index) => (
+            <motion.div
-              <motion.div
+              key={src}
-                key={src}
+              initial={{ opacity: 0, scale: 0.95 }}
-                initial={{ opacity: 0, scale: 0.95 }}
+              whileInView={{ opacity: 1, scale: 1 }}
-                whileInView={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+              viewport={{ once: true }}
-                viewport={{ once: true }}
+              className="w-full sm:w-[45%] md:w-[300px] relative overflow-hidden rounded-xl"
-                className="relative w-full overflow-hidden rounded-xl"
+            >
-              >
+              <Image
-                <Image
+                src={src}
-                  src={src}
+                alt={`static-gallery-${index}`}
-                  alt={`static-gallery-${index}`}
+                width={800}
-                  width={800}
+                height={1000}
-                  height={1000}
+                className="w-full h-auto rounded-xl hover:scale-105 transition-transform duration-500"
-                  className="w-full h-[auto] rounded-xl hover:scale-105 transition-transform duration-500"
+                sizes="(max-width: 768px) 100vw, 300px"
-                  sizes="(max-width: 768px) 100vw, 400px"
+              />
-                />
+            </motion.div>
-              </motion.div>
+          ))}
-            ),
-          )}
         </div>
       </div>
     </section>