Taskly

# Taskly — Liquid Glass Hero

Build a high-fidelity landing-page hero for **Taskly**, a task-management tool: a pure-white page with a soft blue glow in the top-left, a sticky "strong liquid glass" navbar, a headline column on the left and a glassy orb video on the right, with a row of partner logos along the bottom.

Reproduce this exactly — same copy, same values, same effects.

## Core layout

- `max-width: 1600px` hero section on a **pure white** background
- A subtle, layered gradient glow in the top-left, built from blurred ellipses in light blue **`#60B1FF`** and **`#319AFF`**
- Fully responsive: single column on mobile, two columns on desktop
- A `relative` wrapper holds the background glow; a **`z-10`** main container holds the content
- `-webkit-font-smoothing: antialiased`

## Typography

- Headlines and brand: **Fustat** Bold
- Body and UI: **Inter** Normal / Medium
- Hero headline **"Work smarter, achieve faster"** — 75px, `line-height: 1.05`, `-2px` tracking

## The "strong liquid glass" navbar

- `sticky`, `top-[30px]`, centred, `w-fit`
- `backdrop-blur-[50px]`, background `rgba(255,255,255,0.3)`, `rounded-[16px]`
- Outer stroke: `1px solid rgba(0,0,0,0.1)`
- Inner highlight: `inset 0px 4px 4px 0px rgba(255,255,255,0.25)`
- Items: the **Taskly** logo in Fustat, links **Home**, **Features**, **Company**, **Pricing**, and a glassy **SignUp** button with an arrow icon

## The glassy orb (hero right)

- Source: `https://future.co/images/homepage/glassy-orb/orb-purple.webm`
- Video tag: `autoPlay loop muted playsInline`
- Blend: **`mix-blend-screen`**, to filter out the black background
- Scale: **`scale-125`**, so it reads as massive and bleeds slightly off-centre
- Exact colour grade:

  ```css
  filter: hue-rotate(-55deg) saturate(250%) brightness(1.2) contrast(1.1);
  ```

  This turns the purple asset into a vibrant "electric brand blue" that matches the primary CTA.

## Hero content (hero left)

- **Social proof** — a **"Rated 4.9/5 by 2700+ customers"** badge with five orange **`#FF801E`** stars
- **Subheadline** — *"Effortlessly manage your projects, collaborate with your team, and achieve your goals with our intuitive task management tool."* 18px Inter, `-1px` tracking
- **Primary CTA** — **"Get Started Now"**
  - Background `rgba(0,132,255,0.8)` with `backdrop-blur-[2px]`
  - `rounded-[16px]`, white text, inner highlight `inset 0px 4px 4px 0px rgba(255,255,255,0.35)`, and a white circular arrow icon
  - `scale(1.02)` on hover with a smooth transition

## Footer logos

A **"Trusted by Top-tier product companies"** strip at the bottom: five grayscale SVG logos (placeholder tech-company marks), spaced at **`gap-[100px]`**.

## Quality Bar

- **`mix-blend-screen` is not doing what the spec says it does — and in this layout it cannot.** The WebM at that URL carries a VP9 alpha channel (`ALPHA_MODE=1`): decoded with alpha, **48.2% of every frame is fully transparent**. There is no black background to filter. Rendered side by side in Chrome, the orb with `mix-blend-mode: screen` and the orb with `mix-blend-mode: normal` render **identically** — the blend is a no-op, and the alpha channel is doing all the work.
- **It is only a harmless no-op because of an accident of stacking.** The spec's `relative z-10` content container creates a stacking context, so the orb blends against that context's *transparent* backdrop rather than against the page. Take that away — drop the `z-index`, move the orb outside the container, add a white panel behind it — and the blend reaches the **pure white** page, where `screen` is mathematically incapable of showing anything: `screen(white, x) = white`. Verified in the same side-by-side render: blended against the white page, the orb **disappears completely**. The design's centrepiece is one refactor away from vanishing.
- **In Safari the orb is a black square.** Safari does not render VP9 alpha — the transparent surround decodes as solid black. Inside the `z-10` stacking context, `screen` then blends that black against a transparent backdrop, which leaves it black: verified with the same asset decoded without its alpha plane, the result is a **black box around the orb** on a white page. (Blended against the page instead, it vanishes, as above.) `screen` only removes black over a *dark* backdrop — confirmed in the same render — which this page never has. Ship alpha that every engine reads: HEVC-with-alpha `.mp4` for Safari listed before the WebM, or a `mask-image`/luma mask, rather than a blend mode.
- **The colour grade is correct.** Applied with the exact CSS filter matrices, the orb's purple (mean hue **270°**) lands at hue **199–204°** across its shadows, midtones and highlights — within **5–10°** of the CTA's **209°**. The one part of the orb spec that does exactly what it claims.
- **The orb is somebody else's production asset.** `future.co/images/homepage/glassy-orb/orb-purple.webm` is the homepage artwork of an unrelated company, served with `cache-control: public, max-age=0` — so every visit to your page revalidates against *their* origin, and it breaks the day they redesign. A hotlink is not a licence. Commission or render your own orb. (The file also carries an Opus audio track, for a silent 500×500 decorative loop.)
- **`scale-125` cannot make the orb "bleed off-centre".** `transform-origin` defaults to `center`, so `scale(1.25)` grows the orb equally in every direction around its own centre: measured, a 560px layout box paints at **700×700**, 70px out on each side. If off-centre is the intent, set `transform-origin` or offset it with `translate`.
- **The primary CTA's label fails contrast.** `rgba(0,132,255,0.8)` over the white page composites to `rgb(51,157,255)`, and white 16px text on that measures **2.83:1** against a 4.5:1 requirement. The 0.8 alpha makes it worse by letting the white through — even fully opaque, `rgb(0,132,255)` only reaches **3.66:1**. A blue that clears it: `#0070E0` measures **4.78:1**, `#0066CC` **5.57:1**. This is the most important control on the page.
- **The body copy is tracked tighter than the headline.** `-2px` on the 75px headline is `-0.027em`; `-1px` on the 18px subheadline is **`-0.056em` — 2.1× tighter, relative to its size**. Negative tracking is a display-size tool; at 18px it closes up counters and hurts reading. Keep the headline's tracking and set the body at 0 or slightly positive.
- **The sticky navbar has nothing to stick through.** Measured at 1440×900, the whole page scrolls **9px**. `position: sticky` on a one-screen hero is decorative; either the page is longer than the spec shows, or the nav may as well be `absolute`.
- **`gap-[100px]` turns into a 560px tower on a phone.** `gap` sets the row gap as well as the column gap, and five ~150px logos with 100px between them cannot fit two to a row at 390px wide. Measured with the spec's value unchanged: the strip wraps to **5 rows, 560px tall**, with 100px of dead space between every logo — on a design that is supposed to be "fully responsive". Use `gap-x-[100px]` with a much smaller `gap-y`, or step the gap down at breakpoints.
- **The orange stars sit at 2.51:1 on white.** `#FF801E` is under the 3:1 non-text threshold. They are decorative — the "4.9/5" is in the text beside them — so this is not blocking, but they will look faint on low-contrast displays.
- **The button is labelled "SignUp".** One word, no space, in a spec whose other labels are ordinary English ("Get Started Now"). If it is a brand choice, keep it; if it is a typo, it is on the most prominent button in the navbar.
- **Every control has a hover state and none has a focus state.** Seven focusable controls — the logo, four nav links, SignUp and the CTA — and no `:focus-visible` rule anywhere in the spec.
- **There is no `prefers-reduced-motion` branch.** A permanently looping orb plus a hover scale. Pause the orb on its first frame and drop the scale when that setting is on.