Wope Hero Section

Summary

A centered dark violet hero with a large white headline, an inline domain input with a demo button, and a browser-framed app dashboard that fades out under a purple glow.

Visual description

The background is near-black violet, with a faint starfield and thin perspective lines fanning out from the top. A soft purple light blooms behind the product frame. Top nav: the wope logo at left, centered links "Products" and "Resources" (both with chevrons), "Pricing", "Download", and "Contact Us", and at right a "Log in" text link and an outlined "Sign up" pill. The headline "New Era of Rank Tracking" is set in a heavy grotesque sans with a white-to-silver fill, spanning nearly the full width. Two lines of light grey sub-copy follow. Below, a horizontal pill input with the placeholder "Enter your domain" and a "Try Demo" button inside the pill, then small grey microcopy: "No credit card required" and "14-days free trial". Beneath, a browser window frame shows a dark app UI with a left sidebar (Rank Tracker, Performance, Market) and a row of metric cards with sparklines. A circular play button sits over the middle of the dashboard, and the mockup fades toward its lower edge.

Key takeaway

• The domain input and "Try Demo" button sit directly under the headline, so the first action is in the hero itself.
• The product screenshot is framed as a real browser window and faded at the bottom, so it reads as working software without a full-page image.
• The play-button overlay on the dashboard signals a walkthrough, a useful device for demoing data products.

Reuse notes

Good for analytics, developer tools, or data products that need an immediate try-it input. The glow, starfield, and microcopy assume a dark background. Use a clean, real dashboard, since the fade depends on it. The logo band under the frame belongs to the next section and is not part of this hero pattern.