chore: update GIFs and add potential image optimizations

src/components/Features0.jsx

@@ -5,9 +5,7 @@ import { CheckArrowIcon } from "../assets/icons/CheckArrowIcon";
 
 export const Features0 = () => {
     return (
-        <section
+        <section className="w-full bg-customDarkBg2 mt-20 mb-8 sm:mt-16 sm:mb-16 xl:mt-0">
-            className="w-full bg-customDarkBg2 mt-20 mb-8 sm:mt-16 sm:mb-16 xl:mt-0"
-        >
             <motion.div
                 initial={{ opacity: 0 }}
                 whileInView={{ opacity: 1 }}
@@ -39,7 +37,8 @@ export const Features0 = () => {
                                 <li className="mb-4 flex">
                                     <CheckArrowIcon />
                                     <span>
-                                        File formats: .csv, .xlsx, .tsv, .tab, .xls, .ods, .xlsm, .xlsb
+                                        File formats: .csv, .xlsx, .tsv, .tab,
+                                        .xls, .ods, .xlsm, .xlsb
                                     </span>
                                 </li>
                                 <li className="mb-4 flex">
@@ -52,8 +51,8 @@ export const Features0 = () => {
                                 <li className="mb-4 flex">
                                     <CheckArrowIcon />
                                     <span>
-                                        Begins scanning and analysis of compatible file data
+                                        Begins scanning and analysis of
-                                        after import
+                                        compatible file data after import
                                     </span>
                                 </li>
                                 <li className="mb-4 flex">

src/components/Features1.jsx

@@ -53,6 +53,8 @@ export const Features1 = () => {
                     </div>
                     <div className="w-full md:w-3/4 mb-8 md:mb-0 mx-auto lg:w-1/2 flex flex-wrap lg:-mx-4 sm:pr-8 justify-center">
                         <img
+                            decoding="async"  
+                            loading="lazy"
                             src={recipedemo.src}
                             alt="Recipe Demo"
                             className="rounded-xl custom-border-gray"

src/components/Features2.jsx

@@ -14,6 +14,8 @@ export const Features2 = () => (
             <div className="flex flex-wrap items-center 2xl:w-[1450px] xl:w-[1300px] w-11/12 mx-auto md:pl-4 xl:pr-16 xl:pl-16">
                 <div className="w-full md:w-1/2 mb-8 md:mb-0 lg:pl-16 flex justify-center mx-auto pt-16 lg:pt-0">
                     <img
+                        decoding="async"  
+                        loading="lazy"
                         src={uploadtockan.src}
                         alt="CKAN Upload Demo"
                         className="rounded-xl custom-border-gray"

src/components/Features3.jsx

@@ -60,6 +60,8 @@ export const Features3 = () => {
                     </div>
                     <div className="w-full md:w-3/4 mb-8 md:mb-0 mx-auto lg:w-1/2 flex flex-wrap lg:-mx-4 sm:pr-8 justify-center">
                         <img
+                            decoding="async"  
+                            loading="lazy"
                             src={recipedemo.src}
                             alt="Recipe Demo"
                             className="rounded-xl custom-border-gray"