Dark SaaS Landing

1440px

Full size

Key Highlights

Premium dark aesthetic

Glassmorphism UI

Conversion optimized

Animated elements

About this template

A sophisticated dark-mode SaaS landing page designed for premium software products. Features stunning gradient accents, glassmorphism cards, animated statistics, and a modern tech aesthetic that builds trust and converts visitors.

What's included

Dark theme design

Glassmorphism effects

Animated counters

Gradient accents

Pricing table

Testimonials

Newsletter signup

Responsive layout

Best for

SaaS ProductsDeveloper ToolsTech StartupsAPI Products

Industries

SaaSTechnologyDeveloper Tools

AI Generation Prompt

Create a dark premium SaaS landing page:

1. HERO:
- Dark gradient background (#0f0f0f to #1a1a2e)
- Large headline with gradient text effect
- Subheadline explaining the product value
- Two CTAs: "Start Free Trial" (primary gradient) + "Watch Demo" (outline)
- Floating product mockup with glow effect
- Animated particles or grid background

2. LOGOS BAR:
- "Trusted by 500+ companies"
- 6 company logos in grayscale, subtle opacity
- Subtle scroll animation

3. FEATURES SECTION:
- Bento grid layout (2x3)
- Each card: glassmorphism effect, icon, title, description
- Gradient borders on hover
- Features: Analytics, Automation, Integration, Security, API, Support

4. METRICS:
- 4 large animated counters
- "99.9% Uptime", "10M+ API Calls", "500+ Integrations", "24/7 Support"
- Gradient accent colors

5. HOW IT WORKS:
- 3 steps with connecting lines
- Step number in gradient circle
- Icon, title, description for each

6. PRICING:
- 3 tiers on dark cards
- Monthly/Annual toggle
- Popular tier highlighted with gradient border
- Feature list with checkmarks

7. TESTIMONIALS:
- Large quote with gradient quotation mark
- Customer photo, name, title, company
- Star rating

8. CTA SECTION:
- Gradient background section
- "Ready to get started?" headline
- Email input + CTA button
- "No credit card required" text

9. FOOTER:
- Dark background
- Logo, navigation links, social icons
- Newsletter signup

COLORS:
- Background: #0f0f0f, #1a1a2e
- Gradient: #6366f1 to #8b5cf6 (indigo to purple)
- Text: #ffffff, #a1a1aa
- Cards: rgba(255,255,255,0.05)

TYPOGRAPHY:
- Headings: Inter (bold)
- Body: Inter (regular)


RESPONSIVE DESIGN (CRITICAL):
- Mobile-first approach: Design for 375px width first, then scale up
- Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
- Touch targets: Minimum 44x44px for all interactive elements
- Navigation: Hamburger menu on mobile, full nav on desktop
- Typography: Scale down headings on mobile (text-2xl → text-lg)
- Spacing: Reduce padding/margins on mobile (p-8 → p-4)
- Images: Use responsive images with srcset, object-fit: cover
- Grid: Stack columns on mobile (grid-cols-1), expand on desktop
- Hide non-essential elements on mobile with hidden md:block
- Test at 375px, 768px, 1024px, and 1440px widths

SEO & AI OPTIMIZATION (CRITICAL FOR DISCOVERABILITY):

1. HTML HEAD REQUIREMENTS:
- <title> tag: Primary keyword first, brand last (max 60 chars)
- <meta name="description"> : Action-oriented, include primary keyword (max 155 chars)
- <link rel="canonical" href="[full-url]">
- <meta name="robots" content="index, follow">
- Open Graph: og:title, og:description, og:image (1200x630), og:url, og:type
- Twitter Card: twitter:card="summary_large_image", twitter:title, twitter:description, twitter:image
- AI crawler discovery links in <head>:
  <link rel="alternate" type="text/markdown" href="[url].md" title="Markdown">
  <link rel="alternate" type="application/ld+json" href="[url].json" title="Structured Data">

2. SEMANTIC HTML STRUCTURE:
- Single <h1> containing primary keyword (first 40-60 words answer the page's main query)
- Logical heading hierarchy: h1 > h2 > h3 (never skip levels)
- Use <main>, <article>, <section>, <nav>, <header>, <footer>, <aside> landmarks
- Each <section> should have an aria-label or heading
- Use <figure> and <figcaption> for images with context

3. JSON-LD STRUCTURED DATA (in <script type="application/ld+json">):
- WebSite schema with SearchAction for site search
- Organization schema with logo, sameAs social links
- BreadcrumbList schema for navigation context
- Match primary schema to content type:
  - Landing pages: WebPage or Product
  - Blogs: Article with author, datePublished, dateModified
  - E-commerce: Product with offers, price, availability
  - FAQ sections: FAQPage schema (critical for AI answer engines)
  - Local business: LocalBusiness with address, hours, geo
  - Events: Event with startDate, location, offers

4. CONTENT STRUCTURE FOR AI CITATION (GEO/AEO):
- First paragraph (40-60 words): Direct answer to page's primary intent
- Use clear, factual language - AI prefers authoritative, non-fluffy content
- Include specific numbers, statistics, dates where relevant
- Each H2 section should stand alone as a complete answer
- Add statistics/facts every 150-200 words (increases citation likelihood)
- FAQ sections: Use consistent ## FAQ heading with ### Question / Answer pattern
- Use <hr> or --- between distinct content sections (helps AI chunking)

5. IMAGES & MEDIA:
- All <img> must have descriptive alt text (not "image" or "photo")
- Use loading="lazy" for below-fold images
- Include width and height attributes to prevent CLS
- Use WebP format with fallback, srcset for responsive
- Add structured data for key images (ImageObject schema)

6. PERFORMANCE (Core Web Vitals):
- Largest Contentful Paint: Hero image/text visible < 2.5s
- Cumulative Layout Shift: Reserve space for images, ads, embeds
- First Input Delay: Minimize JS blocking, defer non-critical scripts
- Use font-display: swap for web fonts
- Preload critical resources: <link rel="preload">

7. ACCESSIBILITY (also helps SEO):
- All interactive elements keyboard accessible
- Focus states visible on all focusable elements
- Color contrast ratio minimum 4.5:1 for text
- aria-label on icon-only buttons
- Skip link to main content

This prompt will be used to generate your project. Feel free to customize it in the builder.