Image fix

Author: naticampiglia

gatsby-config.ts

@@ -1,4 +1,4 @@
-import type { GatsbyConfig } from "gatsby";
+import type { GatsbyConfig } from 'gatsby';
 
 const config: GatsbyConfig = {
   siteMetadata: {
@@ -10,8 +10,9 @@ const config: GatsbyConfig = {
   // If you use VSCode you can also use the GraphQL plugin
   // Learn more at: https://gatsby.dev/graphql-typegen
   graphqlTypegen: true,
-  plugins: ["gatsby-plugin-sass",
-  `gatsby-plugin-postcss`,
+  plugins: [
+    'gatsby-plugin-sass',
+    `gatsby-plugin-postcss`,
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-image`,
     `gatsby-plugin-sharp`,
@@ -60,7 +61,7 @@ const config: GatsbyConfig = {
     // Use this plugin if you are deploying you site to Gatsby Cloud
     // To learn more, visit: https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-gatsby-cloud/
     // `gatsby-plugin-gatsby-cloud`,
-  ]
+  ],
 };
 
 export default config;

src/components/hero.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Button from './button';
 
 import EnergyPage from '../images/energy-page.png';
+import { StaticImage } from 'gatsby-plugin-image';
 
 const Hero = () => {
   return (
@@ -14,7 +15,8 @@ const Hero = () => {
             <div className='grid lg:grid-cols-12 grid-cols-1 xl:gap-8 items-center  relative'>
               <div className='hero-text lg:col-span-6 flex flex-col items-start pb-10 xl:pr-18 lg:pr-16 '>
                 <h2 className='lg:text-display-lg text-display-md font-semibold pb-4'>
-                  Empowering Sustainable Energy <br></br>Through Real-Time Monitoring
+                  Empowering Sustainable Energy <br></br>Through Real-Time
+                  Monitoring
                 </h2>
                 <p className='text-body-md font-normal text-neutral-600 pb-8'>
                   At Wia, we're redefining the future of energy. Our innovative
@@ -24,10 +26,13 @@ const Hero = () => {
                 </p>
                 <Button label='Speak to an Expert' link='/' size='lg' />
               </div>
-            
-              <div className='circle-background  flex relative'>
-                <img src={EnergyPage} alt='energy-page' className='rounded-lg' />
-               
+
+              <div className='circle-background flex relative'>
+                <StaticImage
+                  src='../images/energy-page.png'
+                  alt='energy-page'
+                  className='static-image rounded-lg'
+                />
               </div>
             </div>
           </div>

src/styles/styles.scss

@@ -16,7 +16,7 @@
   width: 592px;
   height: 592px;
 
-  img {
+  .static-image {
     position: absolute;
     height: 447px;
     width: 828px !important;
@@ -39,7 +39,7 @@
     width: 300px;
     height: 300px;
     right: -100px;
-    img {
+    .static-image {
       width: 414px !important;
       height: 223.5px;
       left: 38px;