Images converted to webP

src/components/BuildPage/BuildBanner.jsx

@@ -1,5 +1,5 @@
 import { Box, Button, Container, Text } from "@chakra-ui/react";
-import banner from "../../assets/images/BuildBanner.png";
+import banner from "../../assets/images/BuildBanner.webp";
 
 const BannerContent = [
   {
@@ -37,7 +37,7 @@ const BuildBanner = () => {
         maxW="container.xl"
         textAlign={"left"}
         marginTop={"2rem"}
-        paddingLeft={"5rem"}
+        paddingLeft={"4rem"}
         sx={{
           "@media (max-width: 435px)": {
             paddingLeft: "2rem",
@@ -107,7 +107,7 @@ const BuildBanner = () => {
         maxW="container.xl"
         textAlign={"left"}
         marginTop={"3rem"}
-        paddingLeft={"5rem"}
+        paddingLeft={"4rem"}
         sx={{
           "@media (max-width: 435px)": {
             paddingLeft: "2rem",

src/components/BuildPage/Tools.jsx

@@ -92,7 +92,7 @@ const Tools = () => {
                 <Card
                   background={"#131313"}
                   borderRadius={"10px"}
-                  minH={"270px"}
+                  height={"100%"}
                 >
                   <CardHeader display={"flex"} justifyContent={"center"}>
                     <Image src={item.img} />
@@ -130,7 +130,7 @@ const Tools = () => {
           position={"relative"}
           backgroundColor={"transparent"}
           cursor={"pointer"}
-          transition="0.3s ease-in-out"
+          transition="0.3s ease-in"
           color={"#fff"}
           width={"227px"}
           height={"60px"}
@@ -153,7 +153,7 @@ const Tools = () => {
               width: "65px",
               height: "65px",
               borderRadius: "50%",
-              transition: "0.35s linear",
+              transition: "0.35s ease-in",
               zIndex: -1,
               bgGradient:
                 "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",

src/components/BuildPage/WhyBuild.jsx

@@ -8,7 +8,7 @@ import {
   AccordionPanel,
   AccordionIcon,
 } from "@chakra-ui/react";
-import bg from "../../assets/images/whyRubix.png";
+import bg from "../../assets/images/whyRubix.webp";
 import cube from "../../assets/images/cube.png";
 
 const accordion = [
@@ -46,7 +46,7 @@ const WhyBuild = () => {
     >
       <Container
         maxW={"container.xl"}
-        padding={"5rem"}
+        padding={"4rem"}
         sx={{
           "@media (max-width: 1024px)": {
             padding: "3rem",

src/components/Contact/Form.jsx

@@ -21,12 +21,11 @@ import {
   ModalFooter,
   Button,
 } from "@chakra-ui/react";
-import BGimage from "../../assets/images/form.png";
+import BGimage from "../../assets/images/form.webp";
 import formx from "../../assets/images/formx.png";
 import formfb from "../../assets/images/formfb.png";
 import forml from "../../assets/images/forml.png";
 import { Link } from "react-router-dom";
-import { ChevronDownIcon } from "@chakra-ui/icons";
 
 const Contact = () => {
   const {

src/components/LearnPage/Faq.jsx

@@ -1,4 +1,4 @@
-import banner from "../../assets/images/faqBg.png";
+import banner from "../../assets/images/faqBg.webp";
 import {
   Accordion,
   AccordionButton,

src/components/LearnPage/LearnBanner.jsx

@@ -1,5 +1,5 @@
 import { Box, Button, Container, Text } from "@chakra-ui/react";
-import banner from "../../assets/images/learnBanner.png";
+import banner from "../../assets/images/learnBanner.webp";
 
 const BannerContent = [
   {

src/components/LearnPage/WhyRubix.jsx

@@ -6,7 +6,7 @@ import {
   AccordionPanel,
   AccordionIcon,
 } from "@chakra-ui/react";
-import bg from "../../assets/images/whyRubix.png";
+import bg from "../../assets/images/whyRubix.webp";
 import cube from "../../assets/images/cube.png";
 
 const accordion = [