Optimised images

.gitignore

@@ -36,5 +36,6 @@ yarn-error.log*
 next-env.d.ts
 
 .env
+.venv
 
 settings.json

components/BrowseItem/BrowseItem.js

@@ -7,7 +7,7 @@ const BrowseItem = ({ projectData }) => {
     // Provide default values if projectData is not provided
     projectData = projectData || {
         status: "Accepted",
-        imageSrc: "/Images/img-2.jpg",
+        imageSrc: "/Images/img-2.webp",
         title: "Custom Silk Outfit with Embroidery",
         estimate: "Estimate Budget: INR 6,000 - INR 8,000",
         bidsInfo: {

components/CustomerSidebar/CustomerSidebar.js

@@ -7,13 +7,13 @@ export default function CustomerSidebar({ user }) {
         <div className="CustomerSidebar" >
             <div className="CustomerSidebar__top">
                 <div className="CustomerSidebar__top__row">
-                    <Image className="CustomerSidebar__top__row--image" src={'/Images/Customer/my_projects.png'} width={25} height={25} />
+                    <Image className="CustomerSidebar__top__row--image" src={'/Images/Customer/my_projects.webp'} width={25} height={25} />
                     <Link href="/customer/customerDashboard">
                         <p className="CustomerSidebar__top__row--text">My Projects</p>
                     </Link>
                 </div>
                 <div className="CustomerSidebar__top__row">
-                    <Image className="CustomerSidebar__top__row--image" src={'/Images/Customer/bid_management.png'} width={20} height={20} />
+                    <Image className="CustomerSidebar__top__row--image" src={'/Images/Customer/bid_management.webp'} width={20} height={20} />
                     <Link href="/customer/bidManagement">
                         <p className="CustomerSidebar__top__row--text">Bid Management</p>
                     </Link>
@@ -24,7 +24,7 @@ export default function CustomerSidebar({ user }) {
                     <p className="CustomerSidebar__bottom--column__name">{user.name}</p>
                     <p className="CustomerSidebar__bottom--column__email">{user.email}</p>
                 </div>
-                <Image className="CustomerSidebar__top__row--image" src={'/Images/Customer/logout.png'} width={20} height={20} />
+                <Image className="CustomerSidebar__top__row--image" src={'/Images/Customer/logout.webp'} width={20} height={20} />
             </div>
         </div>
     )

components/Hero/Hero.js

@@ -4,24 +4,24 @@ const Hero = () => {
     return (
         <div className='Hero'>
             <div className='Hero__images'>
-                <img className='Hero__images--image1' src='/Images/hero/image1.png' />
-                <img className='Hero__images--image2' src='/Images/hero/image2.png' />
-                <img className='Hero__images--image3' src='/Images/hero/image3.png' />
-                <img className='Hero__images--image4' src='/Images/hero/image4.png' />
-                <img className='Hero__images--image5' src='/Images/hero/image5.png' />
-                <img className='Hero__images--image6' src='/Images/hero/image6.png' />
+                <img className='Hero__images--image1' src='/Images/hero/image1.webp' />
+                <img className='Hero__images--image2' src='/Images/hero/image2.webp' />
+                <img className='Hero__images--image3' src='/Images/hero/image3.webp' />
+                <img className='Hero__images--image4' src='/Images/hero/image4.webp' />
+                <img className='Hero__images--image5' src='/Images/hero/image5.webp' />
+                <img className='Hero__images--image6' src='/Images/hero/image6.webp' />
             </div>
             <div className='Hero__content'>
                 <p className='Hero__content--text'><span>CUSTOMIZED</span><br />CLOTHING <span>FOR YOUR</span><br /><span>UNIQUE</span> IDENTITY</p>
                 <p className='Hero__content--text2'>Don't change to fit the fashion, change the fashion to fit you</p>
                 <div className='Hero__content--buttons'>
                     <div className='Hero__content--buttons__button'>
                         <p className='Hero__content--buttons__button--text'>Get Customized Style</p>
-                        <img src='/Images/hero/side_arrow.png' />
+                        <img src='/Images/hero/side_arrow.webp' />
                     </div>
                     <div className='Hero__content--buttons__button'>
                         <p className='Hero__content--buttons__button--text'>Showcase Your Creativity</p>
-                        <img src='/Images/hero/side_arrow.png' />
+                        <img src='/Images/hero/side_arrow.webp' />
                     </div>
                 </div>
             </div>

components/MainMeet/MainMeet.js

@@ -14,20 +14,20 @@ function MainMeet() {
             <div className="MainMeet__team">
                 <div className="SportsSlider">
                     <div className="SportsSlider__track">
-                        <Card name="Mansa Dash" photo="/Images/LandingPage/MansaCrop.jpg" />
-                        <Card name="Naisha Srivastav" photo="/Images/LandingPage/naishaCrop.jpg" />
-                        <Card name="Mahika Kathuria" photo="/Images/LandingPage/mahikaCrop.jpg" />
-                        <Card name="Devina Mehta" photo="/Images/LandingPage/devinaCrop.jpg" />
-                        <Card name="Ira Chawla" photo="/Images/LandingPage/IraCropped.jpg" />
-                        <Card name="Navya Mittal" photo="/Images/LandingPage/navyaCrop.jpg" />
-                        <Card name="Ramneek K Panesar" photo="/Images/LandingPage/RamneekCrop.jpg" />
-                        <Card name="Mansa Dash" photo="/Images/LandingPage/MansaCrop.jpg" />
-                        <Card name="Naisha Srivastav" photo="/Images/LandingPage/naishaCrop.jpg" />
-                        <Card name="Mahika Kathuria" photo="/Images/LandingPage/mahikaCrop.jpg" />
-                        <Card name="Devina Mehta" photo="/Images/LandingPage/devinaCrop.jpg" />
-                        <Card name="Ira Chawla" photo="/Images/LandingPage/IraCropped.jpg" />
-                        <Card name="Navya Mittal" photo="/Images/LandingPage/navyaCrop.jpg" />
-                        <Card name="Ramneek K Panesar" photo="/Images/LandingPage/RamneekCrop.jpg" />
+                        <Card name="Mansa Dash" photo="/Images/LandingPage/MansaCrop.webp" />
+                        <Card name="Naisha Srivastav" photo="/Images/LandingPage/naishaCrop.webp" />
+                        <Card name="Mahika Kathuria" photo="/Images/LandingPage/mahikaCrop.webp" />
+                        <Card name="Devina Mehta" photo="/Images/LandingPage/devinaCrop.webp" />
+                        <Card name="Ira Chawla" photo="/Images/LandingPage/IraCropped.webp" />
+                        <Card name="Navya Mittal" photo="/Images/LandingPage/navyaCrop.webp" />
+                        <Card name="Ramneek K Panesar" photo="/Images/LandingPage/RamneekCrop.webp" />
+                        <Card name="Mansa Dash" photo="/Images/LandingPage/MansaCrop.webp" />
+                        <Card name="Naisha Srivastav" photo="/Images/LandingPage/naishaCrop.webp" />
+                        <Card name="Mahika Kathuria" photo="/Images/LandingPage/mahikaCrop.webp" />
+                        <Card name="Devina Mehta" photo="/Images/LandingPage/devinaCrop.webp" />
+                        <Card name="Ira Chawla" photo="/Images/LandingPage/IraCropped.webp" />
+                        <Card name="Navya Mittal" photo="/Images/LandingPage/navyaCrop.webp" />
+                        <Card name="Ramneek K Panesar" photo="/Images/LandingPage/RamneekCrop.webp" />
                     </div>
                 </div>
             </div>

components/ProjectItem/ProjectItem.js

@@ -6,7 +6,7 @@ const ProjectItem = ({ projectData }) => {
     // Provide default values if projectData is not provided
     projectData = projectData || {
         status: "Accepted",
-        imageSrc: "/Images/img-2.jpg",
+        imageSrc: "/Images/img-2.webp",
         title: "Custom Silk Outfit with Embroidery",
         estimate: "Estimate Budget: INR 6,000 - INR 8,000",
         bidsInfo: {

components/Waste/Waste.js

@@ -3,7 +3,7 @@ import './Waste.scss'
 const Waste = () => {
     return (
         <div className='Waste'>
-            <img src='/Images/hero/waste.png' />
+            <img src='/Images/hero/waste.webp' />
         </div>
     )
 }

pages/customer/projectDescription.js

@@ -21,7 +21,7 @@ export default function ProjectDescription() {
                     </div>
                     <div className='ProjectDescription__bottom--box__attach'>
                         <div className='ProjectDescription__bottom--box__attach--logo'>
-                            <Image className='ProjectDescription__bottom--box__attach--logo__image' src='/Images/Customer/attach_files.png' width={30} height={30} />
+                            <Image className='ProjectDescription__bottom--box__attach--logo__image' src='/Images/Customer/attach_files.webp' width={30} height={30} />
                             <input type='file' />
                         </div>
                         <p className='ProjectDescription__bottom--box__attach--text'>Upload any images or documents that might be helpful in explaining your brief here (Max file size: 10MB)</p>

pages/customer/projectFinalize.js

@@ -21,7 +21,7 @@ export default function ProjectFinalize() {
                     </div>
                     <div className='ProjectDescription__bottom--box__attach'>
                         <div className='ProjectDescription__bottom--box__attach--logo'>
-                            <Image className='ProjectDescription__bottom--box__attach--logo__image' src='/Images/Customer/attach_files.png' width={30} height={30} />
+                            <Image className='ProjectDescription__bottom--box__attach--logo__image' src='/Images/Customer/attach_files.webp' width={30} height={30} />
                             <input type='file' />
                         </div>
                         <p className='ProjectDescription__bottom--box__attach--text'>Upload any images or documents that might be helpful in explaining your brief here (Max file size: 10MB)</p>

pages/designer/browse.js

@@ -1,7 +1,7 @@
 import '../../styles/routes/designer/Browse.scss';
 import BrowseItem from "@/components/BrowseItem/BrowseItem";
 import Filter from "@/components/Filter/Filter"
-import img from '../../public/Images/img.png';
+import img from '../../public/Images/img.webp';
 import Image from 'next/image';
 import Bid from '@/components/Bid/Bid';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -29,7 +29,7 @@ export default function ProjectTitle() {
                         </div>
                     </div>
                     <div className="Browse__top--box-child">
-                        <Image className="Browse__top--box--image" src={'/Images/img.png'} width={400} height={300} />
+                        <Image className="Browse__top--box--image" src={'/Images/img.webp'} width={400} height={300} />
                     </div>
                 </div>
             </div>

pages/designer/browseProject.js

@@ -19,9 +19,9 @@ export default function BrowseProject({ project }) {
         Additional Specifications: I have a specific request for the outfit's design, including detailed embroidery on the collar and cuffs, adding a touch of sophistication and elegance.
         I'm open to discussing the design further and considering various bids from talented designers. Please provide your proposals, including estimated costs, and I look forward to collaborating with the selected designer to create a truly remarkable piece.`,
         attachments: [
-            '/Images/attach1.jpg',
-            '/Images/attach2.jpg',
-            '/Images/attach3.jpg',
+            '/Images/attach1.webp',
+            '/Images/attach2.webp',
+            '/Images/attach3.webp',
         ],
     };
 

pages/index.js

@@ -85,7 +85,7 @@ export default function Home() {
             <MainHero />
           </div>
           <div className="section">
-            <img src="/Images/main_model.png" alt="main_model" className="Main__content--img" />
+            <img src="/Images/main_model.webp" alt="main_model" className="Main__content--img" />
           </div>
           <div className="section">
             <MainMission />
@@ -100,7 +100,7 @@ export default function Home() {
             <MainMeet />
           </div>
           <div className="section">
-            <img src="/Images/multiple_models.png" alt="main_model2" className="Main__content--img" />
+            <img src="/Images/multiple_models.webp" alt="main_model2" className="Main__content--img" />
           </div>
           <div className="section">
             <MainFoot />