ClickUp Acquisition Hero Landing Page

Overview

This landing page announces ClickUp's acquisition of Qatalog, serving as a high-intent transition page that blends news with product feature promotion. It is an excellent reference for cloning due to its sophisticated "AI-modern" aesthetic, leveraging dark-themed glassmorphism and clear visual hierarchies to communicate complex product integrations simply.

Design System

• Color Palette & Visual Hierarchy: The design uses a clean white background for the primary content, shifting to deep charcoal and black for the final CTA section. Accent colors include a signature purple-to-indigo gradient for the hero title and warm orange-red highlights within the integrated UI mockups. Hierarchy is established through large bold headings and a high-contrast "Get Started" button that stands out against the minimal surroundings.
• Typography: The system uses a clean sans-serif (likely a custom variation of Inter or similar) with a scale focused on readability. Major announcements use a display-2xl weight, while eyebrows use a caption-regular mono-spaced style in all-caps to denote technical sophistication.
• Page Structure:
  1. Two-Column Hero: Text content on the left, high-fidelity UI visual on the right.
  2. Social Proof: A "Trusted by the best" logo salad with monochrome logos.
  3. Impact Statement: A centered text section explaining the integration value.
  4. Feature Grid: A 2x2 "quadrant" layout describing specific AI features matched with a large media visual.
  5. Final CTA: A dark-themed "bento card" style section with decorative light leaks and gradients.
• Reusable Components:
  • Primary CTA Button: The button-large class features an arrow transition and high-contrast dark background.
  • The Quadrant Feature Grid: A versatile 2x2 layout perfect for technical product benefits.
  • The Dark CTA Card: Uses glow-vector and warm-vector image overlays with an SVG noise filter for a textured, premium look.
• Implementation Clues: The site is built using Next.js (#___next) with highly modularized classes (e.g., CuHeroV5_wrapper__1hWS5). It utilizes internal layout utilities like stack--v5Layout for consistent vertical spacing and CuTitle_gradient for the text styling.

Use Cases

• Who should clone this pattern: B2B SaaS companies announcing major product updates, acquisitions, or pivoting toward AI-centric features.
• What products can remix it effectively: Productivity tools, developer platforms, or any software suite that needs to show how multiple disparate features have "converged" into a single workflow.
• Practical remix directions: Builders can reuse the hero section for a clean product launch page by swapping the acquisition text for a value proposition. The bento-style bottom CTA is highly effective for converting users on pricing or sign-up pages. The "quadrant" layout in the body is an ideal pattern for a "Features" section on a homepage.
• Suggested clone scope: A quick section clone of the bottom dark-themed CTA card is recommended for its high-impact visual style. A full-page clone is ideal for those needing a professional, enterprise-ready announcement template.