Insta icon added and avif images deleted

Author: jency1

public/AboutUS/image1.avif

@@ -71,11 +71,16 @@
 
 import styles from "./FollowOnInstagram.module.css";
 
+import { RxInstagramLogo } from "react-icons/rx";
+
 function FollowOnInstagram() {
   return (
     <div className="flex flex-col items-center">
-      <div className="lg:mt-4 mb-4 text-success font-bold text-2xl md:text-3xl lg:text-4xl text-center">
-        Follow us on Instagram
+      <div className="mt-9 md:mt-16 mb-4 font-bold text-xl md:text-3xl lg:text-4xl text-center flex justify-center items-center gap-2">
+        <div className="text-success">Follow us on Instagram</div>
+        <div className="cursor-pointer">
+          <RxInstagramLogo />
+        </div>
       </div>
       <div
         className={`${styles["main-container"]} grid h-full w-full md:h-4/6 md:w-5/6 grid-cols-12 px-8 mx-8 mt-2 mb-5`}

public/AboutUS/image3.avif

@@ -21,18 +21,15 @@ export default function AboutUs() {
           {/* Feature 1 */}
           <div className="bg-gray-50 rounded-lg p-0.3 border-r border-b last:border-r-0 last:md:border-b-0 md:last:border-r-0">
             <div className="bg-cover bg-center">
-              <img
-                src="/AboutUS/image1.jpg"
-                alt="Friendly and fast support"
-              />
+              <img src="/AboutUS/image1.jpg" alt="Friendly and fast support" />
             </div>
           </div>
 
           {/* Feature 2 */}
           <div className="bg-gray-50 rounded-lg p-6 border-b md:last:border-b-0 flex justify-center flex-col">
             <div className="flex justify-center mb-4">
               <img
-                src="/AboutUS/image2.jpg"
+                src="/AboutUS/image2.png"
                 alt="Organic and seed grown plants"
                 className="w-40 h-40 object-contain"
               />
@@ -51,18 +48,15 @@ export default function AboutUs() {
           {/* Feature 3 */}
           <div className="bg-gray-50 rounded-lg p-0.3 border-b last:border-b-0 md:last:border-r-0">
             <div className="bg-cover bg-center">
-              <img
-                src="/AboutUS/image3.jpg"
-                alt="Friendly and fast support"
-              />
+              <img src="/AboutUS/image3.jpg" alt="Friendly and fast support" />
             </div>
           </div>
 
           {/* Feature 4 */}
           <div className="bg-gray-50 rounded-lg p-6 border-r border-b last:border-r-0 md:border-b-0 md:last:border-r-0 flex justify-center flex-col">
             <div className="flex justify-center mb-4">
               <img
-                src="/AboutUS/image4.jpg"
+                src="/AboutUS/image4.png"
                 alt="Friendly and fast support"
                 className="w-40 h-40 object-contain"
               />
@@ -93,7 +87,7 @@ export default function AboutUs() {
           <div className="bg-gray-50 rounded-lg p-6 border-b last:border-b-0 md:last:border-r-0 flex justify-center flex-col">
             <div className="flex justify-center mb-4">
               <img
-                src="/AboutUS/image6.jpg"
+                src="/AboutUS/image6.png"
                 alt="Expert Guidance"
                 className="w-40 h-40 object-contain"
               />