feat(www): interactive DB viewer hero + max-w-7xl centering (#28)

Replace the static hero screenshot with a self-contained React mockup of the
full Gridline DB viewer (sidebar, table tree, tab bar, fake SQL editor,
data grid, queries/objects/schema-visualizer views, disabled Tools state).

- Add @astrojs/react and mount the island via client:visible
- 16:9 aspect-ratio mockup, hidden on mobile (static image fallback)
- JSON cell popover: solid surface, anchored within the mockup window,
  Escape/outside-click close
- Dependency-free HTML5 drag-to-reorder tabs
- Theme-aware app tokens (canvas, surface-raised, popover bg)
- Site-wide max-w-7xl (was max-w-[1200px]) so sections center on big screens
- Regenerate standalone www/bun.lock for deterministic Dokploy builds

www/src/layouts/Layout.astro

@@ -91,7 +91,7 @@ const isProd = import.meta.env.PROD;
   </head>
   <body>
     <nav id="nav" class="fixed top-0 inset-x-0 z-50 transition-all duration-300 border-b border-transparent">
-      <div class="max-w-[1200px] mx-auto px-6 py-4 flex items-center justify-between">
+      <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
         <a href="/" class="flex items-center gap-2.5 group">
           <img src="/gridline-icon.svg" alt="Gridline" class="w-7 h-7" />
           <span class="text-lg font-semibold tracking-tight">Gridline</span>
@@ -111,7 +111,7 @@ const isProd = import.meta.env.PROD;
     <slot />
 
     <footer class="border-t border-[var(--border)] mt-20 md:mt-28">
-      <div class="max-w-[1200px] mx-auto px-6 py-16 md:py-20">
+      <div class="max-w-7xl mx-auto px-6 py-16 md:py-20">
         <div class="grid md:grid-cols-4 gap-10 md:gap-8">
           <div class="md:col-span-1">
             <a href="/" class="flex items-center gap-2.5 mb-4">