feat(home): convert hero to two-column left/right layout

Restructure the homepage hero from a single centered block into a
responsive two-column grid: left column holds the left-aligned
headline, subtext, CTAs, click-to-call and trust line; right column
holds the framed product dashboard preview.

- Replace `max-w-5xl mx-auto text-center` with
  `grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center`.
- Scale headline down from text-5xl/8xl to a responsive
  text-4xl md:text-5xl lg:text-6xl so it no longer overflows.
- Left-align CTAs/links on desktop (justify-start, lg:text-left)
  while keeping centered stacking on mobile (grid-cols-1).
- Swap section min-h-screen for lg:min-h-[85vh] and py-24 lg:py-32
  so the hero fits the viewport instead of dominating it.
- Preserve existing background gradient and decorative blur elements,
  consistent with the about/portfolio heroes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/Header.astro

@@ -12,12 +12,12 @@ const { class: className } = Astro.props;
 
 const navLinks = [
   { name: 'Home', href: '/' },
+  { name: 'WRNexus', href: 'https://wrnexus.com/', external: true },
   { name: 'About', href: '/about' },
   { name: 'Services', href: '/services' },
   { name: 'Portfolio', href: '/portfolio' },
   { name: 'Blog', href: '/blog' },
   { name: 'Contact', href: '/contact' },
-  { name: 'WRNexus', href: 'https://wrnexus.com/', external: true },
 ];
 
 const currentPath = Astro.url.pathname;