Updated

src/Components/Contact.jsx

@@ -1,8 +1,10 @@
 import emailjs from "@emailjs/browser";
 import { motion } from "framer-motion";
 import React, { useState } from "react";
-import { Button, Input, Textarea, Typography } from "@material-tailwind/react";
+import { Button, Input, Textarea } from "@material-tailwind/react";
 import contactimg from "../assets/contact-img.svg";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import "react-lazy-load-image-component/src/effects/blur.css";
 
 const Contact = () => {
   const [message, showMessage] = useState(false);
@@ -85,7 +87,12 @@ const Contact = () => {
           transition={{ duration: 0.5 }}
           className="lg:w-[500px] lg-max:hidden"
         >
-          <img src={contactimg} alt="contactimg" />
+          <LazyLoadImage
+            effect="blur"
+            className="h-[300px] w-[300px] lg:h-[500px] lg:w-[500px]"
+            src={contactimg}
+            alt="contactimg"
+          />
         </motion.div>
       </div>
     </div>

src/Components/Social.jsx

@@ -1,6 +1,7 @@
 import { Tooltip } from "@material-tailwind/react";
 import React from "react";
 import { MdMailOutline } from "react-icons/md";
+import x from "../assets/x.png";
 const Social = () => {
   return (
     <section className="fixed xl:bottom-40 xl:left-4 2xl:bottom-80 2xl:left-10 hidden lg:flex flex-col gap-3 z-20">
@@ -33,11 +34,8 @@ const Social = () => {
         target="_blank"
         className="rounded-full text-2xl bg-gray-600 bg-opacity-20 hover:bg-opacity-50 w-10 h-10 flex items-center justify-center"
       >
-        <Tooltip content="Follow On Twitter" placement="right">
-          <img
-            src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/twitter/twitter-original.svg"
-            className="p-2"
-          />
+        <Tooltip content="Follow On X(Twitter)" placement="right">
+          <img src={x} className="p-2" />
         </Tooltip>
       </a>
       <a