# SaaS Landing

> A complete SaaS landing page: navbar, hero, logo cloud, feature bento, testimonials, pricing, FAQ, CTA and footer.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/templates/saas-landing
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/saas-landing.json
```

Adds the page at `app/saas-landing/page.tsx` together with the components below. Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Components

- [Navbar](https://chromotion.dev/r/navbar.md): `@/components/navbar`
- [Hero Spotlight](https://chromotion.dev/r/hero-spotlight.md): `@/components/hero-spotlight`
- [Logo Cloud](https://chromotion.dev/r/logo-cloud.md): `@/components/logo-cloud`
- [Feature Bento](https://chromotion.dev/r/feature-bento.md): `@/components/feature-bento`
- [Testimonial Marquee](https://chromotion.dev/r/testimonial-marquee.md): `@/components/testimonial-marquee`
- [Pricing Cards](https://chromotion.dev/r/pricing-cards.md): `@/components/pricing-cards`
- [FAQ Accordion](https://chromotion.dev/r/faq-accordion.md): `@/components/faq-accordion`
- [CTA Banner](https://chromotion.dev/r/cta-banner.md): `@/components/cta-banner`
- [Site Footer](https://chromotion.dev/r/site-footer.md): `@/components/site-footer`

## Dependencies

```bash
npm install lucide-react
```

## Source

```tsx title="app/saas-landing/page.tsx"
import {
  Command,
  Feather,
  Gauge,
  Globe,
  Hexagon,
  Layers,
  Lock,
  Mail,
  Mountain,
  Orbit,
  Rss,
  Triangle,
  Users,
  Zap,
} from "lucide-react"

import { CtaBanner } from "@/components/cta-banner"
import { FaqAccordion } from "@/components/faq-accordion"
import { FeatureBento } from "@/components/feature-bento"
import { HeroSpotlight } from "@/components/hero-spotlight"
import { LogoCloud } from "@/components/logo-cloud"
import { Navbar } from "@/components/navbar"
import { PricingCards } from "@/components/pricing-cards"
import { SiteFooter } from "@/components/site-footer"
import { TestimonialMarquee } from "@/components/testimonial-marquee"

function GitHubIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className={className}>
      <path d="M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.52-1.33-1.28-1.69-1.28-1.69-1.04-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.76 2.7 1.25 3.36.96.1-.75.4-1.25.73-1.54-2.56-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 0 1 5.77 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.84 1.19 3.1 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .5Z" />
    </svg>
  )
}

function XIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className={className}>
      <path d="M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.67l7.73-8.84L1.25 2.25h6.83l4.71 6.23 5.45-6.23Zm-1.16 17.52h1.83L7.08 4.13H5.12l11.96 15.64Z" />
    </svg>
  )
}

// The theme's accent (ring) token, so the glows follow your theme
const accent = "var(--ring)"

const brand = (
  <>
    <Hexagon className="size-5 fill-primary text-primary" /> Hexa
  </>
)

const logos = [
  { name: "Vertex", icon: Triangle },
  { name: "Boltshift", icon: Zap },
  { name: "Layerstack", icon: Layers },
  { name: "Keystone", icon: Command },
  { name: "Quill", icon: Feather },
  { name: "Summit", icon: Mountain },
  { name: "Orbital", icon: Orbit },
]

const features = [
  {
    icon: Zap,
    title: "Instant deploys",
    description: "Push to git and your changes are live worldwide in seconds.",
    visual: (
      <div className="flex h-32 items-end gap-1.5 px-6 pb-4">
        {[40, 65, 45, 80, 60, 95, 70, 100].map((height, index) => (
          <div key={index} className="flex-1 rounded-t bg-foreground/15" style={{ height: `${height}%` }} />
        ))}
      </div>
    ),
  },
  { icon: Lock, title: "Secure by default", description: "Automatic HTTPS, DDoS protection and SSO." },
  { icon: Globe, title: "Edge network", description: "Served from 100+ regions close to your users." },
  { icon: Users, title: "Built for teams", description: "Preview every pull request and collect feedback in context." },
  { icon: Gauge, title: "Observability", description: "Real-time logs, traces and Web Vitals in one place." },
]

const testimonials = [
  { quote: "We rebuilt our marketing site in a weekend. Everything just works.", name: "Lena Park", role: "Design Engineer, Nimbus" },
  { quote: "Preview links on every pull request changed how we review design.", name: "Marco Rossi", role: "Frontend Lead, Orbit" },
  { quote: "Deploys went from twenty minutes to twenty seconds.", name: "Aisha Khan", role: "Founder, Tidy" },
  { quote: "The dashboard tells us about regressions before our users do.", name: "Tom Becker", role: "SRE, Loop" },
  { quote: "Our conversion rate went up after moving to the edge.", name: "Chen Wei", role: "Growth, Fieldnote" },
  { quote: "SSO and audit logs made the security review painless.", name: "Sara Novak", role: "Staff Engineer, Relay" },
]

const plans = [
  {
    name: "Hobby",
    description: "For personal projects",
    monthly: 0,
    yearly: 0,
    cta: "Get started",
    features: ["3 projects", "Community support", "Basic analytics"],
  },
  {
    name: "Pro",
    description: "For growing teams",
    monthly: 20,
    yearly: 16,
    cta: "Start free trial",
    highlighted: true,
    features: ["Unlimited projects", "Priority support", "Advanced analytics", "Custom domains"],
  },
  {
    name: "Enterprise",
    description: "For large organizations",
    monthly: 60,
    yearly: 48,
    cta: "Contact sales",
    features: ["Everything in Pro", "SSO & SAML", "Audit logs", "Dedicated manager"],
  },
]

const faqs = [
  {
    question: "Is there a free plan?",
    answer: "Yes. The Hobby plan is free forever for personal projects, with no credit card required.",
  },
  {
    question: "Can I bring my own domain?",
    answer: "Every paid plan includes custom domains with automatic HTTPS certificates.",
  },
  {
    question: "How does billing work for teams?",
    answer: "You pay per seat, billed monthly or yearly. Add or remove seats at any time and we prorate the difference.",
  },
  {
    question: "Do you offer an SLA?",
    answer: "Enterprise plans come with a 99.99% uptime SLA, a dedicated manager and priority incident response.",
  },
]

const footerColumns = [
  {
    title: "Product",
    links: [
      { label: "Features", href: "#features" },
      { label: "Pricing", href: "#pricing" },
      { label: "Changelog", href: "#" },
    ],
  },
  {
    title: "Resources",
    links: [
      { label: "Docs", href: "#" },
      { label: "Guides", href: "#" },
      { label: "Status", href: "#" },
    ],
  },
  {
    title: "Company",
    links: [
      { label: "About", href: "#" },
      { label: "Blog", href: "#" },
      { label: "Careers", href: "#" },
    ],
  },
]

function SectionHeading({ eyebrow, title, description }: { eyebrow: string; title: string; description: string }) {
  return (
    <div className="mx-auto flex max-w-2xl flex-col items-center gap-3 px-6 text-center">
      <p className="text-sm font-medium text-primary">{eyebrow}</p>
      <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">{title}</h2>
      <p className="text-pretty text-muted-foreground">{description}</p>
    </div>
  )
}

export default function SaasLanding() {
  return (
    <div className="min-h-svh bg-background text-foreground">
      <Navbar
        className="bg-background"
        brand={brand}
        links={[
          { label: "Features", href: "#features" },
          { label: "Customers", href: "#customers" },
          { label: "Pricing", href: "#pricing" },
          { label: "FAQ", href: "#faq" },
        ]}
        secondaryAction={{ label: "Sign in", href: "#" }}
        primaryAction={{ label: "Get started", href: "#pricing" }}
      />

      <main>
        <HeroSpotlight
          badge={{ label: "Hexa 2.0 is live", href: "#features" }}
          title="Ship your product to the edge in seconds"
          description="Git-based deploys, preview links for every change and built-in observability. Everything your team needs to move fast."
          primaryAction={{ label: "Start for free", href: "#pricing" }}
          secondaryAction={{ label: "Book a demo", href: "#" }}
          spotlightColor={accent}
        />

        <div className="mx-auto max-w-5xl px-6 pb-8">
          <LogoCloud logos={logos} title="Trusted by fast-moving teams worldwide" />
        </div>

        <FeatureBento
          id="features"
          className="scroll-mt-14"
          eyebrow="Features"
          title="Everything you need to ship"
          description="One platform for building, deploying and scaling modern web apps."
          features={features}
        />

        <section id="customers" className="scroll-mt-14 py-16">
          <SectionHeading
            eyebrow="Customers"
            title="Loved by teams who ship"
            description="Thousands of teams deploy with Hexa every day."
          />
          <TestimonialMarquee testimonials={testimonials} className="mt-10" />
        </section>

        <section id="pricing" className="scroll-mt-14 pt-16">
          <SectionHeading
            eyebrow="Pricing"
            title="Simple pricing that scales with you"
            description="Start free, upgrade when your team grows. No hidden fees."
          />
          <PricingCards plans={plans} className="pt-10" />
        </section>

        <section id="faq" className="scroll-mt-14 px-6 py-16">
          <div className="mx-auto max-w-2xl">
            <h2 className="mb-8 text-center text-3xl font-semibold tracking-tight">Frequently asked questions</h2>
            <FaqAccordion items={faqs} />
          </div>
        </section>

        <div className="px-6 pb-20">
          <CtaBanner
            className="mx-auto max-w-5xl"
            title="Ready to ship faster?"
            description="Deploy your first project in under a minute. No credit card required."
            primaryAction={{ label: "Start for free", href: "#pricing" }}
            secondaryAction={{ label: "Talk to sales", href: "#" }}
            glowColor={accent}
          />
        </div>
      </main>

      <SiteFooter
        brand={<span className="flex items-center gap-2">{brand}</span>}
        tagline="The deployment platform for teams who care about speed."
        columns={footerColumns}
        socials={[
          { label: "GitHub", href: "#", icon: GitHubIcon },
          { label: "X", href: "#", icon: XIcon },
          { label: "RSS", href: "#", icon: Rss },
          { label: "Email", href: "#", icon: Mail },
        ]}
        legal="© 2026 Hexa Labs, Inc. All rights reserved."
        bottomLinks={[
          { label: "Privacy", href: "#" },
          { label: "Terms", href: "#" },
        ]}
        wordmark="HEXA"
      />
    </div>
  )
}
```