Role: You are an expert Senior Frontend Engineer and UI/UX Designer specializing in high-end, dark-themed SaaS interfaces.

Objective: Create a comprehensive, production-ready landing page template for a premium SaaS product. The design must feel institutional, fast, and expensive.

1. Design System & Aesthetics
Color Palette (Zinc Monochromatic): Background: zinc-950 (deep charcoal/black). Surfaces: zinc-900 for cards with a subtle zinc-800 border (1px). Typography: Primary text in white (#FFFFFF), secondary/muted text in zinc-400. Accents: Pure white for primary CTAs; subtle zinc-500 for icons.

Typography: Display: Cal Sans for Hero headlines (tight letter spacing, semi-bold). Headers: Instrument Sans for section titles (clean, modern). Body: Manrope for readability (optimized line-height: 1.6).

Foundations: Border Radius: 2xl (16px) for cards; full (pill-shape) for buttons and tags. Texture: Apply a subtle, low-opacity noise/grain overlay (1-2% opacity) to the entire background.

2. Layout & Navigation
Navbar: Fixed, pill-shaped glassmorphic bar. Effects: backdrop-blur-md, bg-zinc-900/40, and a 1px border in zinc-800. Interactions: Links should have a "magnetic" hover effect.

Hero Section: Min-height 100vh. Centered vertical layout. Headline: Massive text-7xl display type with "Text Mask" animation. Primary CTA: High-contrast white button with subtle shimmer/pulse animation. Social Proof: Overlapping avatars with staggered reveal animation.

3. Micro-Animations & Interactions
Smooth Scroll: Integrate Lenis for high-inertia, silky scrolling. Hover States: Cards: 1.02x scale up + border color transition. Buttons: Magnetic pull effect. Scroll-Triggered Reveals: Framer Motion variants to fade in and slide up with spring physics.

4. Component Specs
Bento Grid (Features): Non-uniform grid layout with live-updating animations, keyboard command visuals, and self-drawing line charts.
Infinite Marquee: Logo cloud for "Trusted By" sections with fade-in/out masks.
Pricing: Pro Tier with "Border Beam" animation. Smooth sliding toggle for billing options.

5. Technical Requirements
Framework: Next.js (App Router), Tailwind CSS. Animations: Framer Motion, GSAP. Icons: Lucide React (stroke width: 1.5px). Optimization: next/font for local fonts, zero Layout Shift.

Related Prompts

View all

Isometric Digital Ecosystem Landing Page

Role: Lead Creative Technologist & Motion Designer (specializing in 3D-for-web and interactive story...

IsometricFramer Motion

Agency Landing Page

Build a modern, premium agency landing page with the following specifications: ## Overall Theme & S...

AgencyGlassmorphism

Y Combinator Style Startup Landing

Create a clean, conversion-focused startup landing page inspired by Y Combinator portfolio companies...

StartupConversion

Apple-Style Product Launch Page

Create a premium product launch landing page inspired by Apple's product pages. Visual Design: - La...

Product LaunchApple

Role: You are an expert Senior Frontend Engineer and UI/UX Designer specializing in high-end, dark-themed SaaS interfaces. Objective: Create a comprehensive, production-ready landing page template for a premium SaaS product. The design must feel institutional, fast, and expensive. 1. Design System & Aesthetics Color Palette (Zinc Monochromatic): Background: zinc-950 (deep charcoal/black). Surfaces: zinc-900 for cards with a subtle zinc-800 border (1px). Typography: Primary text in white (#FFFFFF), secondary/muted text in zinc-400. Accents: Pure white for primary CTAs; subtle zinc-500 for icons. Typography: Display: Cal Sans for Hero headlines (tight letter spacing, semi-bold). Headers: Instrument Sans for section titles (clean, modern). Body: Manrope for readability (optimized line-height: 1.6). Foundations: Border Radius: 2xl (16px) for cards; full (pill-shape) for buttons and tags. Texture: Apply a subtle, low-opacity noise/grain overlay (1-2% opacity) to the entire background. 2. Layout & Navigation Navbar: Fixed, pill-shaped glassmorphic bar. Effects: backdrop-blur-md, bg-zinc-900/40, and a 1px border in zinc-800. Interactions: Links should have a "magnetic" hover effect. Hero Section: Min-height 100vh. Centered vertical layout. Headline: Massive text-7xl display type with "Text Mask" animation. Primary CTA: High-contrast white button with subtle shimmer/pulse animation. Social Proof: Overlapping avatars with staggered reveal animation. 3. Micro-Animations & Interactions Smooth Scroll: Integrate Lenis for high-inertia, silky scrolling. Hover States: Cards: 1.02x scale up + border color transition. Buttons: Magnetic pull effect. Scroll-Triggered Reveals: Framer Motion variants to fade in and slide up with spring physics. 4. Component Specs Bento Grid (Features): Non-uniform grid layout with live-updating animations, keyboard command visuals, and self-drawing line charts. Infinite Marquee: Logo cloud for "Trusted By" sections with fade-in/out masks. Pricing: Pro Tier with "Border Beam" animation. Smooth sliding toggle for billing options. 5. Technical Requirements Framework: Next.js (App Router), Tailwind CSS. Animations: Framer Motion, GSAP. Icons: Lucide React (stroke width: 1.5px). Optimization: next/font for local fonts, zero Layout Shift.