Wapsol | Focused Narrow Layout
A high-precision, enterprise-focused landing page style characterized by a uniquely narrow 896px max-width layout (max-w-4xl). This aesthetic uses a 'tech blue' primary palette (#5a8fee) against a clean ice-white background (#f8faff), combining technical typography (General Sans/Satoshi) with brutalist-inspired square corners (rounded-none). Ideal for software engineering, deep-tech research, IP licensing firms, and B2B SaaS platforms requiring an authoritative, focused, and intimate reading experience. Features include grayscale-to-color micro-interactions, status-coded product tags with tooltips, and a LinkedIn-gated lead generation flow.
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
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).
Layout & Structure
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.
Navigation
Hero Section
IP & Statistics
Product Portfolio Grid
Footer
Components
Status Tag Tooltip
Contextual help that appears above color-coded product tags.
LinkedIn-Gated Inquiry Form
Access control modal requiring professional verification.
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).