Glassmorphismus-Landingpage

Create a modern, single-page landing page using a glassmorphism design style: frosted, translucent panels floating over a vivid, atmospheric background. It should feel premium, airy and full of light.

Brief

Subject: Halo — a wind and wave forecast app for kitesurfers and sailors

Ground every visual and every word in this subject. Invent a plausible product name, real feature names, numbers, prices and testimonials — no lorem ipsum, no "Elevate your workflow" filler

The background should come from the subject's world (for a weather app: a dusk sky over water), not a generic purple wash

Design Requirements

Background: Full-viewport gradient (#0b3d5c → #1b8a9e → #f4a259) with two or three large, soft colour shapes behind the glass so the blur has something to refract — glass over a flat colour looks like nothing

Glass panels: rgba(255,255,255,0.15) fill, backdrop-filter: blur(16px) saturate(140%), 1px translucent white border and a faint top highlight. Vary panel size and depth by importance — not every box the same

Colour: White text on glass; accent (#ffd166) reserved for the primary CTA and one data highlight

Typography: Sora; hero heading 4–5rem with tight tracking, light weights for body, lines under 70 characters

Layout: A hero with a large glass "product" panel showing real UI from the subject, then content that steps down in scale

Sections to Include

Navigation Bar — Logo left, 3–4 links right; turns into a glass bar once you scroll

Hero — Headline that says what the product does, one line of subtext, primary CTA (accent fill) and secondary glass CTA, beside a large glass panel showing the product in use

Features — Three or four features as glass panels of different sizes (one wide, others compact), each with a small custom icon and a concrete benefit

Social Proof — Two or three testimonials from believable users, with names and context

Pricing — Three tiers on glass; the recommended tier more opaque and slightly raised

Footer — Minimal links and a newsletter field on glass

Technical Details

Responsive, mobile-first; panels stack and the blur radius drops on small screens

Solid fallback background where backdrop-filter isn't supported

Text on glass meets WCAG AA contrast — darken the glass or add a soft text shadow where needed

One orchestrated hero entrance (panels settle into place); hover is a gentle lift, not a glow on everything

Visible keyboard focus; honour prefers-reduced-motion

No all-caps eyebrow labels above headings, and don't colour a single word of the headline