Promptcraft — Gradient CTA (teal→lime) navbar landing
A clean light-SaaS sticky navbar carried by one teal-to-lime gradient: a frosted white bar (white/85 + backdrop-blur over a hairline border) with a sparkle-tile 'Promptcraft' wordmark, five absolutely-centered nav links (Home, Library▾, Resources▾, Pricing, Blog) with a gradient underline that wipes in on hover, and a right cluster of a quiet 'Log in' link plus a gradient-filled 'Start free' CTA pill with a soft teal+lime glow shadow. Plus Jakarta Sans, Iconify Phosphor icons, gradient-text accent headline, and a hamburger reflow on mobile.
Summary
A clean, full-bleed light SaaS sticky navbar where the brand is carried by a single teal-to-lime gradient: a sparkle-tile wordmark 'Promptcraft' on the left, five centered nav links (Home, Library, Resources, Pricing, Blog) with two caret dropdowns and a gradient underline that wipes in on hover, and a right cluster of a quiet 'Log in' text link plus a gradient-filled 'Start free' CTA pill with a soft glowing colored shadow. The header is a frosted white bar (white/85 with backdrop-blur) over a thin hairline border, sitting above a full landing page (a mesh-tinted hero with a gradient-text headline, a floating browser-style preview card, a logo marquee, a feature triptych, and a big gradient CTA banner) so the sticky bar has real content to scroll over. Built on Plus Jakarta Sans with Iconify Phosphor icons; it reflows to a hamburger button on mobile.
Style
A modern, friendly light-SaaS aesthetic where one teal-to-lime (#14b8a6 -> #a3e635) gradient is the entire brand signature. The page is white with near-black teal-tinted ink text (#0c1a18) and muted slate-teal secondary text (#475a57); the gradient is reserved for brand moments only: the sparkle logo tile, the primary CTAs, the headline accent words (clipped gradient text), the nav-link underline, and the closing banner. Surfaces are soft and airy: large rounded corners (rounded-xl to rounded-3xl), hairline ink borders at very low opacity (ink/[0.06]-ink/15), and a faint two-spot radial 'mesh' glow tinting the hero. The signature lift is a colored CTA glow shadow (a teal + lime double drop-shadow) rather than a flat gray shadow, and CTAs nudge up 1px on hover. Typography is Plus Jakarta Sans throughout, extrabold (800) for the wordmark and headlines, medium/semibold for nav + body. No gradients on text except the deliberate accent words; no harsh shadows; everything reads light, rounded, and premium.
Layout & Structure
A `sticky top-0 z-50` frosted white `<header>` (`bg-white/85 backdrop-blur-xl` with a `supports-[backdrop-filter]:bg-white/70` fallback and a thin `border-b border-ink/[0.07]`) whose inner content centers in a `mx-auto max-w-[1200px] px-5 sm:px-8` column at a fixed `h-[68px]` row. The row is a `flex items-center justify-between` with three zones: a sparkle-tile + 'Promptcraft' wordmark pinned left (shrink-0), an `absolute left-1/2 -translate-x-1/2` centered nav of five links (lg-only), and a right action cluster (shrink-0) of a 'Log in' text link + a gradient 'Start free' CTA pill + a lg:hidden hamburger button. Beneath the header sits a full landing page (a mesh-tinted centered hero + floating preview card, a full-bleed logo marquee, a centered feature triptych, a gradient CTA banner, and a footer) so the sticky bar scrolls over real content.
Sticky frosted header shell
Sparkle-tile wordmark (left)
Centered nav links (desktop)
Right action cluster
Mesh hero + gradient-text headline
Floating preview card
Logo marquee + feature triptych + CTA banner + footer
Responsive reflow
Special Notes
Exact color tokens (Tailwind config): ink #0c1a18, ink-soft #475a57, ink-onbrand #16332e, teal #14b8a6, teal-deep #0f766e, lime #a3e635. The single brand gradient is `.grad` = linear-gradient(95deg, #14b8a6 0%, #2bbf94 38%, #6fd072 70%, #a3e635 100%) (fill on the logo tile, all primary CTAs, and the closing banner); `.grad-text` = linear-gradient(100deg, #14b8a6 0%, #a3e635 100%) clipped to text for accent words. The signature colored CTA glow is `.cta-shadow` = `0 10px 24px -8px rgba(20,184,166,.55), 0 2px 6px -2px rgba(163,230,53,.5)`. The nav-link underline = a 2px `linear-gradient(90deg, #14b8a6, #a3e635)` bar inset 10px, scaleX(0)->scaleX(1) on hover over .25s. `.mesh` = two radial spots (teal ~10% top-left, lime ~14% top-right). `.ring-soft` = `0 1px 0 rgba(12,26,24,.04), 0 12px 40px -22px rgba(12,26,24,.25)`. Font: Plus Jakarta Sans (Google Fonts, weights 400/500/600/700/800) as font-jakarta + body default, antialiased. Icons: Iconify Phosphor (ph:sparkle-fill, ph:caret-down-bold, ph:arrow-right-bold, ph:play-circle, ph:lightning-fill, ph:check-bold, ph:magic-wand-fill, ph:squares-four-fill, ph:code-fill, ph:list-bold, ph:x-logo, ph:github-logo, ph:discord-logo). The header is `sticky top-0 z-50 w-full`, frosted (bg-white/85 backdrop-blur-xl, supports-fallback bg-white/70) with a `border-b border-ink/[0.07]` hairline, centered in `mx-auto max-w-[1200px] px-5 sm:px-8` at `h-[68px]`; the centered nav is `absolute left-1/2 -translate-x-1/2 lg:flex`. Built with the Tailwind CDN + Iconify; corners are large rounded, borders are hairline ink at very low opacity, the gradient is reserved for brand moments only. The page beneath the bar (mesh hero with a gradient-text H1 + floating preview card, a logo marquee, a feature triptych, a gradient CTA banner, and a footer) is demo context so the sticky bar has something to scroll over; the prompt-library value is the navbar pattern itself.