Create a high-converting, premium landing page for a product called "DropDock"—a modular wooden EDC (Everyday Carry) tray system.

Tech Stack:

• React (Functional Components with Hooks)
• Tailwind CSS for styling (use standard utility classes)
• Lucide-React for icons

Design System & Aesthetics:

• Vibe: Luxury minimalism, organic, masculine but sophisticated. Think "Apple meets artisan woodworking."
• Typography: Use a serif font (like Playfair Display) for headings to denote luxury, and a clean sans-serif (like Inter) for body text.
• Color Palette: Use the Tailwind stone palette heavily.
  • Backgrounds: bg-stone-50 (light), bg-stone-900 (dark).
  • Accents: Specific wood colors for the interactive section (Deep Walnut Brown, Light Oak/Beige, Warm Maple/Gold).
• Effects: Subtle shadows (shadow-2xl), rounded corners (rounded-2xl), and glassmorphism (backdrop-blur) for overlays.

Structure & Functionality:

1. Sticky Navbar:
   • Logo: "DropDock." in serif font.
   • Links: Shop, System, About.
   • Action: "Pre-order" button with a shopping bag icon.
   • Behavior: Transparent at the top, becomes white with a shadow when scrolled. Mobile responsive with a hamburger menu.
2. Hero Section:
   • Layout: Split screen (Text Left, Image Right).
   • Text:
     • Badge: "Now Shipping Worldwide" with a pulsing green dot.
     • Headline: "Organize beautifully" (make "beautifully" italic and grey).
     • Subtext: Description of the magnetic, swappable compartment system.
     • CTAs: Two buttons - "Build Your Dock" (Primary, Dark) and "Explore Packs" (Secondary, Outline).
   • Image Area: A large product image (use a placeholder or the provided URL).
   • Interactive Tooltips: Overlay small pulsing white dots on the product image. Hovering over them should reveal a glassmorphism card explaining features like "Watch Stand" or "Magnetic Base".
3. Features Section (Dark Mode):
   • Background: Dark (bg-stone-900), Text: Light.
   • Headline: "Designed for the obsessive."
   • Grid: 3 columns, 2 rows.
   • Cards: Each card has an icon (Magnet, Layers, Zap, etc.) inside a dark box, a title, and a short description. Hover effects should slightly lift the card or brighten the border.
4. Interactive Configurator (Key Feature):
   • Goal: Allow users to "build" their tray.
   • Layout: Left side controls, Right side visualization.
   • Controls:
     • Material Selector: Radio buttons for "Walnut", "White Oak", and "Hard Maple".
     • Layout Selector: Buttons to toggle between "Standard", "Minimalist", and "EDC Heavy" configurations.
     • Price: Updates or shows a static price (e.g., $145.00).
   • Visualization:
     • A large rectangle representing the tray base. Its background color must change immediately based on the Material selection (Dark Brown for Walnut, Beige for Oak, Gold for Maple).
     • Inside the base, render a grid of "modules" (squares/rectangles) that rearrange based on the Layout selection. Use CSS Grid or Flexbox to show different compartment arrangements.
5. Lifestyle Packs Section:
   • Display 3 distinct cards for specific personas: "The Watch Collector", "The Minimalist", and "EDC Enthusiast".
   • Each card should have a unique subtle background color (e.g., light blue, light stone, light orange).
   • Include price, icon, description, and a "View Pack" button.
6. Footer:
   • Dark background (bg-stone-900).
   • 4 Columns: Brand mission, Shop links, Support links, and a Newsletter signup form.
   • Social media icons and copyright info at the bottom.

Specific Content/Copy to use:

• Hero Headline: "Organize beautifully."
• Features: "Mag-Click™ System", "Premium Hardwoods", "Endless Layouts".