Weiter

components/hero.tsx

@@ -50,13 +50,14 @@ export function Hero({
           </div>
         </div>
         <div className={`mx-auto mt-12 flex max-w-2xl sm:mt-16 lg:ml-8 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-20 ${reverse ? 'lg:order-1' : ''}`}>
-          <div className="max-w-2xl flex-none sm:max-w-3xl lg:max-w-none">
+          <div className="max-w-3xl flex-none sm:max-w-4xl lg:max-w-none flex justify-center">
             <Image
               src={imageSrc}
               alt={imageAlt}
-              width={1200}
-              height={800}
-              className="w-[40rem] rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10"
+              width={1000}
+              height={500}
+              className="w-full max-w-2xl object-contain"
+              priority
             />
           </div>
         </div>