Move2AM — Premium Tech Relocation Landing Page

# Move2AM — Premium Tech Relocation Landing Page

{
  "summary": "A professional dark-themed tech relocation landing page utilizing gold and blue accents, high-end typography, and glassmorphism elements to convey trust and expertise for founders and executives.",
  "style": {
    "description": "The style is 'Premium Tech Modern'. It uses a dark background strategy (#09090b) with high-contrast text and interactive elements. Typography pairings: 'Cabinet Grotesk' (Display/Bold) for headers and 'Satoshi' (Sans-serif) for body text. Colors: Gold highlight (#fbbf24), Brand Blue (#2563eb), and Zinc grays (#09090b to #f4f4f5). UI elements feature rounded corners (12px to 40px), 1px borders (rgba(63, 63, 70, 0.5)), and backdrop blurs (12px). Animations include subtle hover scaling (1.05x) and soft floating 'bounce-slow' motions for stats cards.",
    "prompt": "Create a design system with a dark-mode base using #09090b. \n- **Colors**: Primary Blue (#2563eb), Accent Gold (#fbbf24), Surface Dark (#18181b), Text Primary (#f4f4f5), Text Secondary (#a1a1aa). \n- **Typography**: Headers in 'Cabinet Grotesk', bold weights (700-800), tight letter-spacing. Body in 'Satoshi', weights (300-500), line-height 1.6. \n- **Effects**: 'Gold-glow' text-shadow (0 0 20px rgba(251, 191, 36, 0.3)). 'Blue-gradient' (linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%)). \n- **Components**: Use `card-glass` style (background: rgba(24, 24, 27, 0.6), border: 1px solid rgba(63, 63, 70, 0.5), backdrop-filter: blur(12px)). \n- **Interactions**: Buttons should have a 0.2s transition-all with a scale(1.05) on hover and scale(0.95) on active. Inputs use #fbbf24 for focus borders."
  },
  "layout_and_structure": {
    "description": "A comprehensive vertical-scroll layout featuring a fixed glass navigation bar, a high-impact split hero section, a three-column services grid, a comparison-style pricing table, and a centered lead-capture form.",
    "prompts": [
      {
        "part": "Navigation",
        "prompt": "Sticky header (h-20) with zinc-950/80 background and 12px backdrop-blur. Left: Logo with a 10x10 blue-gradient rounded icon. Center: Nav links in text-sm zinc-400 with amber-400 hover state. Right: 'Start Relocation' CTA button, rounded-full, bg-amber-400, text-black, font-bold."
      },
      {
        "part": "Hero Section",
        "prompt": "Two-column grid with pt-44 spacing. Left Column: Small badge (bg-blue-900/30, text-blue-400, uppercase) above a 7xl bold heading with 'Vision' highlighted in gold-glow. Primary CTA in blue-600 with right-arrow icon. Social proof section with 3 overlapping avatars and an italicized quote. Right Column: Aspect-square container with grayscale professional imagery (opacity-60), covered by a blue-glow background blur (#2563eb/10)."
      },
      {
        "part": "Services Overview",
        "prompt": "Three-column grid on bg-zinc-900/50. Each card (p-8, rounded-2xl, bg-zinc-950, border-zinc-800). Each card includes a 14x14 icon box with colored tints (blue or amber) and becomes scaled 1.1x on hover. Typography: h3 font-bold, p text-zinc-400."
      },
      {
        "part": "Pricing Section",
        "prompt": "Three-tier pricing grid. Middle card ('Scale Mode') is featured: scale-105 transform, 2px border-amber-400/50, shadow-amber-400/10, and a top-centered 'Recommended' pill in solid gold. Side cards use zinc-900/30 with zinc-800 borders. Prices in 4xl Cabinet Grotesk font."
      },
      {
        "part": "Contact CTA",
        "prompt": "Section with a centered container (rounded-[2.5rem], bg-zinc-900, p-20). 2-column grid form with zinc-950 input fields and 1px zinc-800 borders. Full-width blue-600 submit button with large shadow (shadow-blue-900/40). Footer icons for social (X, LinkedIn, Instagram) in zinc-500."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Floating Stats Card",
      "description": "A glassmorphism card that appears to float over hero imagery.",
      "prompt": "A container with the 'card-glass' class (blur-12px, semi-transparent dark bg). Positioned absolute with 'animate-bounce-slow' (custom keyframes for a 3-second gentle Y-axis translation). Content includes a label in uppercase zinc-400, a large value in amber-400, and a circular icon badge with blue-600/20 background."
    },
    {
      "component": "Interactive Relocation Form",
      "description": "A high-conversion lead form with specific focus states.",
      "prompt": "Input fields (bg-zinc-950, border-zinc-800, px-4, py-3) with labels in uppercase text-xs font-bold zinc-500. On :focus, the border-color must transition to #fbbf24 (amber gold) smoothly. The textarea should have rows-3 and the same styling."
    }
  ]
}