Fix homepage "How It Works" images not loading and distorted aspect ratio

Description

The four step screenshots in the homepage "How It Works" section rendered as empty dark boxes, and once loading was restored they were visibly squashed. All changes are in pages/index.tsx:

• Removed loading="lazy" from all 8 step images (dark + light variants). The attribute was introduced in 9c2380d ("Peformance, SEO, and GEO optimizations") as a performance tweak, but it was never really required here — these are small (~100–170KB) local static assets, so eager loading costs essentially nothing. Worse, it actively broke rendering: HeroUI's Image tracks load state via a detached new Image() preloader, and with loading="lazy" that preloader never fires onload for below-the-fold images, so data-loaded never becomes true and the visible <img> stays stuck at opacity-0 inside the skeleton wrapper.
• Added removeWrapper + disableSkeleton (renders a plain <img>, same pattern already used in image-carousel.tsx , no skeleton/opacity trap, no stray wrapper div interfering with the hidden/dark: visibility classes).
• Changed flex/dark:flex to block/dark:block (correct display for <img> elements).
• Changed height={180} to height={437} on all 8 images to preserve the native 391:683 portrait ratio of the source PNGs at 250px wide (250 × 683/391 = 436.7).

Verified with eslint (clean), prettier --check (clean), tsc --noEmit (no new errors, only pre-existing ones in packages/shopstr-mcp), and confirmed all 8 src paths exist in public/ with matching case-sensitive filenames.

Screenshots (if applicable)

Before:

After:

Affirmation

• My code follows the CONTRIBUTING.md guidelines