Minimalist SaaS Landing Page

A clean, modern landing page for a B2B software product with an animated gradient hero, floating product screenshots, pricing cards, and a smooth scroll sticky navigation.

Build a high-converting, strictly professional, and beautiful landing page for your SaaS product. This template utilizes vanilla CSS and lightweight Vanilla JavaScript to bring life to key conversion areas through subtle and premium animations.

Features

1. Sticky Navigation: Elegant top navigation bar with backdrop-blur and smooth scrolling anchor links.
2. Animated Gradient Hero: A captivating hero section with an infinite smooth-shifting gradient background.
3. Parallax UI Mockups: Floating 3D-like dashboard elements that gently react to mouse movement.
4. Interactive Pricing: Clean pricing tiers with premium hover states and feature emphasis.
5. Testimonials Carousel: Auto-scrolling row of customer feedback cards.

Core Structure

The layout is divided into semantic sections, utilizing id attributes to allow our smooth-scrolling sticky navbar to jump perfectly to different sections of the page.

<nav class="navbar" id="navbar">
  <div class="nav-container">
    <div class="logo">Saasify</div>
    <div class="nav-links">
      <a href="#features">Features</a>
      <a href="#pricing">Pricing</a>
      <a href="#testimonials">Testimonials</a>
    </div>
    <button class="nav-cta">Get Started</button>
  </div>
</nav>

<header class="hero" id="home">
  <div class="animated-gradient-bg"></div>
  <div class="hero-content">
    <h1>Future-Proof Your B2B Workflow</h1>
    <p>Streamline operations with our intuitive automation engine.</p>
    <div class="cta-group">
      <button class="btn btn-primary">Start Free Trial</button>
      <button class="btn btn-secondary">Watch Demo</button>
    </div>
  </div>
  <div class="hero-visual">
    <!-- Parallax floating UI cards will live here -->
  </div>
</header>

Advanced CSS Techniques

We harness CSS Custom Properties (variables) and @keyframes to create the endless gradient shift in the background.

.animated-gradient-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #0f172a, #1e293b, #3b82f6, #1d4ed8);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  z-index: -1;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Parallax JavaScript Effect

To give the UI mockups weight and realism, we use a simple linear interpolation function combined with mousemove listeners on the window. We carefully isolate the transform updates to the UI element classes to avoid triggering heavy document reflows.

const uiCards = document.querySelectorAll('.ui-card');
window.addEventListener('mousemove', (e) => {
  const x = (window.innerWidth / 2 - e.pageX) / 50;
  const y = (window.innerHeight / 2 - e.pageY) / 50;

  uiCards.forEach(card => {
    const depth = card.getAttribute('data-depth') || 1;
    card.style.transform = `translate(${x * depth}px, ${y * depth}px)`;
  });
});

Combine these elements with modern typography and deliberate whitespace to get a highly effective, modern SaaS layout ready for production.