@victusvinceere/saas-landing

Landing page and marketing components for SaaS applications.

Installation

pnpm add @victusvinceere/saas-landing

Components

Navbar

Navigation bar with brand, links, and CTA button.

import { Navbar } from "@victusvinceere/saas-landing/components";

<Navbar
  brand="MySaaS"
  links={[
    { label: "Features", href: "#features" },
    { label: "Pricing", href: "#pricing" },
    { label: "FAQ", href: "#faq" },
  ]}
  cta={{ label: "Get Started", href: "#waitlist" }}
/>

Hero

Hero section with badge, title, description, and CTAs.

import { Hero } from "@victusvinceere/saas-landing/components";

<Hero
  badge="Now in Beta"
  title="Your Amazing"
  highlight="Product"
  description="The best solution for your needs."
  primaryCta={{ label: "Get Started", href: "#waitlist" }}
  secondaryCta={{ label: "Learn More", href: "#features" }}
/>

Features

Feature grid with icons and descriptions.

import { Features } from "@victusvinceere/saas-landing/components";

<Features
  title="Features"
  subtitle="Everything you need to succeed"
  features={[
    {
      icon: "Zap",
      title: "Lightning Fast",
      description: "Built for speed and performance.",
    },
    {
      icon: "Shield",
      title: "Secure",
      description: "Enterprise-grade security.",
    },
  ]}
/>

Pricing

Pricing plans with feature lists.

import { Pricing } from "@victusvinceere/saas-landing/components";

<Pricing
  title="Simple Pricing"
  subtitle="Choose your plan"
  plans={[
    {
      name: "Starter",
      price: 29,
      period: "mo",
      description: "For individuals",
      features: ["Feature 1", "Feature 2"],
      cta: { label: "Get Started", href: "#" },
      highlighted: false,
    },
    {
      name: "Pro",
      price: 79,
      period: "mo",
      description: "For teams",
      features: ["Everything in Starter", "Feature 3"],
      cta: { label: "Get Started", href: "#" },
      highlighted: true,
    },
  ]}
/>

Faq

Accordion FAQ section.

import { Faq } from "@victusvinceere/saas-landing/components";

<Faq
  title="Frequently Asked Questions"
  subtitle="Everything you need to know"
  items={[
    {
      question: "What is this product?",
      answer: "It's the best SaaS solution.",
    },
    {
      question: "How much does it cost?",
      answer: "Plans start at $29/month.",
    },
  ]}
/>

Testimonials

Customer testimonials in a grid layout.

import { Testimonials } from "@victusvinceere/saas-landing/components";

<Testimonials
  title="What Our Customers Say"
  subtitle="Don't just take our word for it"
  testimonials={[
    {
      quote: "This product changed everything for us!",
      author: "Jane Smith",
      role: "CEO",
      company: "TechCorp",
      initial: "J",
      color: "from-blue-400 to-blue-600",
    },
    {
      quote: "The best investment we've made.",
      author: "John Doe",
      role: "CTO",
      company: "StartupXYZ",
      image: "/avatars/john.jpg", // Or use initial/color
    },
  ]}
/>

Waitlist

Email capture form with optional business type selector.

import { Waitlist } from "@victusvinceere/saas-landing/components";

<Waitlist
  title="Join the Waitlist"
  description="Be the first to know when we launch."
  badge="Early Access"
  submitText="Join Waitlist"
  successMessage="You're on the list!"
  endpoint="/api/waitlist"
  showBusinessType={true}
  businessTypes={[
    { value: "startup", label: "Startup" },
    { value: "enterprise", label: "Enterprise" },
  ]}
  tracking={{
    onFormStart: () => console.log("Form started"),
    onSubmit: (success, businessType) => console.log("Submitted", success),
  }}
/>

Cta

Call-to-action section.

import { Cta } from "@victusvinceere/saas-landing/components";

<Cta
  title="Ready to get started?"
  description="Join thousands of happy customers."
  cta={{ label: "Start Free Trial", href: "/signup" }}
/>

Footer

Footer with brand and links.

import { Footer } from "@victusvinceere/saas-landing/components";

<Footer
  brand="MySaaS"
  links={[
    { label: "Privacy", href: "/privacy" },
    { label: "Terms", href: "/terms" },
    { label: "Contact", href: "mailto:[email protected]" },
  ]}
  copyright="© 2024 MySaaS. All rights reserved."
/>

Full Page Example

"use client";

import {
  Navbar,
  Hero,
  Features,
  Pricing,
  Faq,
  Testimonials,
  Waitlist,
  Footer,
} from "@victusvinceere/saas-landing/components";
import { siteConfig } from "@/config/site";

export default function LandingPage() {
  return (
    <div className="min-h-screen">
      <Navbar
        brand={siteConfig.name}
        links={siteConfig.navigation}
        cta={{ label: "Get Started", href: "#waitlist" }}
      />

      <Hero
        badge={siteConfig.hero.badge}
        title={siteConfig.hero.title}
        highlight={siteConfig.hero.highlight}
        description={siteConfig.hero.description}
        primaryCta={siteConfig.hero.cta.primary}
        secondaryCta={siteConfig.hero.cta.secondary}
      />

      <Features
        title="Features"
        subtitle="Everything you need"
        features={siteConfig.features}
      />

      <Pricing
        title={siteConfig.pricing.title}
        subtitle={siteConfig.pricing.subtitle}
        plans={siteConfig.pricing.plans}
      />

      <Testimonials
        title="What Customers Say"
        testimonials={siteConfig.testimonials}
      />

      <Faq
        title="FAQ"
        items={siteConfig.faq}
      />

      <Waitlist
        title={siteConfig.waitlist.title}
        description={siteConfig.waitlist.description}
        badge={siteConfig.waitlist.badge}
        submitText={siteConfig.waitlist.submitText}
        businessTypes={siteConfig.waitlist.businessTypes}
      />

      <Footer
        brand={siteConfig.name}
        links={siteConfig.footer.links}
        copyright={`© ${new Date().getFullYear()} ${siteConfig.name}`}
      />
    </div>
  );
}

TypeScript Types

All components export their prop types:

import type {
  NavbarProps,
  NavLink,
  HeroProps,
  FeaturesProps,
  Feature,
  PricingProps,
  PricingPlan,
  FaqProps,
  FaqItem,
  TestimonialsProps,
  Testimonial,
  WaitlistProps,
  CtaProps,
  FooterProps,
  FooterLink,
} from "@victusvinceere/saas-landing/components";

Styling

Components use Tailwind CSS and CSS variables for theming. Make sure your tailwind.config.js includes the package:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@victusvinceere/saas-landing/dist/**/*.{js,mjs}",
  ],
  // ...
};

License

MIT