Wapsol | Focused Narrow Layout

# Wapsol | Focused Narrow Layout

{
  "summary": "Create a professional engineering and research landing page with a tightly constrained horizontal width of 896px. Use a primary blue (#5a8fee) accent, sharp square edges, and a sophisticated mix of technical sans-serif fonts. The design should emphasize intellectual property, product portfolios, and formal inquiry paths.",
  "style": {
    "description": "Technical and minimalist with a focus on square geometry and high-contrast information density. Uses Satoshi for body copy and General Sans for headings. Primary color is #5a8fee (Tech Blue), supported by a status-driven palette of success green (#059669), warning orange (#c2410c), and muted purple (#7c3aed). Animations are subtle, focusing on hover transitions (grayscale to color) and vertical translations (1-2px lift).",
    "prompt": "### Visual Style Specification\n- **Base Palette**: Primary Tech Blue (#5a8fee), Primary Dark (#4a7edb). Backgrounds: Ice Blue (#f8faff), White (#ffffff). Text: Slate 900 (#0f172a), Slate 600 (#475569).\n- **Typography**: \n  - Headings: 'General Sans', semi-bold/bold. H1 (60px, leading 1.1), H2 (36px).\n  - Body: 'Satoshi', 400/500/700 weight. \n  - Labels: 10px, uppercase, 0.2em letter-spacing, bold.\n- **Geometry**: Strict `rounded-none` on all elements (buttons, cards, inputs). \n- **Borders**: 1px solid using Slate 200 or Slate 100 for subtle division.\n- **Interactions**: \n  - Icons: Default `grayscale(1)` and `opacity: 0.6`, transitioning to `grayscale(0)` and `opacity: 1` over 500ms on hover.\n  - Cards: `translate-y-0` to `-translate-y-1` on hover with a border color shift to #5a8fee.\n- **Modals**: Backdrop blur (8px) with `rgba(15, 23, 42, 0.4)` overlay. Entry: `scale-98` to `scale-100` with 300ms ease-out."
  },
  "layout_and_structure": {
    "description": "Intimate, centered layout with a maximum width of 896px across all components. Sections are vertically stacked with generous padding (80-96px) to maintain clarity within the narrow container.",
    "prompts": [
      {
        "part": "Navigation",
        "prompt": "Sticky header with 80px height. Layout: 896px max-width container. Left: Square blue logo box with white layers icon + 'WAPSOL' text. Center: Bold font navigation links (text-sm, uppercase/bold) with 2px bottom-border active state. Right: Primary CTA button (square, blue background, white text)."
      },
      {
        "part": "Hero Section",
        "prompt": "Left-aligned content inside the 896px container. Large H1 (60px) with specific blue accent on key words. Subtitle (18px) in Slate 600. Bottom section contains horizontal 'badges' using #f8faff backgrounds and check-circle icons for certifications. A decorative 33% width skewed background element sits on the far right."
      },
      {
        "part": "IP & Statistics",
        "prompt": "Two-column grid (1:1). Left: Section label (10px uppercase blue), H2, and descriptive text. Right: Two offset square stat cards. Card A is higher, Card B is lower. Cards feature large #5a8fee numbers and 10px uppercase labels."
      },
      {
        "part": "Product Portfolio Grid",
        "prompt": "Centered H2 and intro text. 3-column grid of square cards. Each card contains: 1. Top-left: Grayscale logo in a square box. 2. Top-right: Color-coded status tag (e.g., green for Live, orange for R&D). 3. Title (H3) and brief description. 4. Bottom: 'Inquire' link with arrow icon that expands on hover."
      },
      {
        "part": "Footer",
        "prompt": "Background #1e293b. Multi-column layout within 896px constraint. Col 1: Logo and company mission. Col 2: Resource links. Col 3: Contact info with icons. Bottom: Full-width border-t with 11px uppercase copyright text and secondary links (Privacy/Terms)."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Status Tag Tooltip",
      "description": "Contextual help that appears above color-coded product tags.",
      "prompt": "Component: Absolute positioned box (bottom: 100%) above a tag. Style: White background, 1px Slate 100 border, square corners, shadow-xl. Micro-interaction: `opacity-0` and `translate-y-2` transition to `opacity-100` and `translate-y-0` when parent is hovered. Includes a 45-degree rotated square at the bottom for the arrow pointer."
    },
    {
      "component": "LinkedIn-Gated Inquiry Form",
      "description": "Access control modal requiring professional verification.",
      "prompt": "Layout: Vertical stack in a square modal. Input: Large padding, square, light blue background (#f8faff). Icon: LinkedIn logo inside the input field. Alert: A purple-themed information box (#f5f3ff bg, #7c3aed text) explaining the LinkedIn verification requirement for enterprise specifications."
    }
  ],
  "special_notes": "MUST: Maintain the 896px max-width (max-w-4xl) for the main content area to ensure the 'narrow layout' identity. MUST NOT: Use any border-radius; all corners must be sharp 90-degree angles. MUST: Use specific status colors for tags: Success (#059669 on #ecfdf5), R&D (#c2410c on #fff7ed), and Deprecated (#7c3aed on #f5f3ff)."
}