updated bg and image for gs hero (#1001)

apps/web/src/components/GetStarted/Hero.tsx

@@ -1,7 +1,5 @@
 import Image from 'next/image';
-import { StaticImport } from 'next/dist/shared/lib/get-img-props';
-import gtcBackground from './images/gtc-background.svg';
-import getStartedHeroImage from './images/gs_hero_img.webp';
+import getStartedHeroImage from './images/getstarted-hero-img.png';
 
 const heroContainerClasses = `
   w-full
@@ -15,19 +13,15 @@ const heroContainerClasses = `
 const textContainerClasses = `
   max-w-full lg:max-w-[450px]
   mr-12 sm:mr-0
-  ml-12 sm:ml-16 lg:ml-24 2xl:ml-0
+  ml-12 sm:ml-16 lg:ml-24 2xl:ml-[100px]
   mt-12 sm:mt-16 lg:mt-24
   mb-6
 `;
 
 export default async function Hero() {
-  const backgroundStyles = {
-    backgroundImage: `url('${gtcBackground.src}')`,
-  };
-
   return (
-    <div className={heroContainerClasses} style={backgroundStyles}>
-      <div className="flex w-full max-w-[1440px] flex-col justify-between sm:flex-row">
+    <div className={heroContainerClasses}>
+      <div className="flex w-full max-w-[1536px] flex-col justify-between sm:flex-row">
         <div className={textContainerClasses}>
           <h1 className="mb-6 font-display text-4xl leading-tight sm:text-5xl lg:mb-10 lg:text-[80px] lg:leading-none">
             Resources for Builders
@@ -36,8 +30,10 @@ export default async function Hero() {
             Get help to build and grow your project on Base with our Builder Resource Kit
           </span>
         </div>
-        <div className="self-end">
-          <Image src={getStartedHeroImage as StaticImport} alt="onchain summer" />
+        <div className="self-end overflow-hidden">
+          <div className="max-h-[591px] max-w-[788px] mr-[-25px] 2xl:mr-0">
+            <Image src={getStartedHeroImage} alt="onchain summer" />
+          </div>
         </div>
       </div>
     </div>