@victusvinceere/saas-landing 0.1.0 → 0.1.1

package/README.md

@@ -0,0 +1,332 @@
+# @victusvinceere/saas-landing
+
+Landing page and marketing components for SaaS applications.
+
+## Installation
+
+```bash
+pnpm add @victusvinceere/saas-landing
+```
+
+## Components
+
+### Navbar
+
+Navigation bar with brand, links, and CTA button.
+
+```tsx
+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.
+
+```tsx
+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.
+
+```tsx
+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.
+
+```tsx
+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.
+
+```tsx
+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.
+
+```tsx
+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.
+
+```tsx
+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.
+
+```tsx
+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.
+
+```tsx
+import { Footer } from "@victusvinceere/saas-landing/components";
+
+<Footer
+  brand="MySaaS"
+  links={[
+    { label: "Privacy", href: "/privacy" },
+    { label: "Terms", href: "/terms" },
+    { label: "Contact", href: "mailto:hello@example.com" },
+  ]}
+  copyright="© 2024 MySaaS. All rights reserved."
+/>
+```
+
+## Full Page Example
+
+```tsx
+"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:
+
+```tsx
+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:
+
+```js
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@victusvinceere/saas-landing/dist/**/*.{js,mjs}",
+  ],
+  // ...
+};
+```
+
+## License
+
+MIT

package/dist/components/index.d.mts

@@ -1,135 +1,56 @@
+export { Cta, CtaProps, Faq, FaqItem, FaqProps, Feature, Features, FeaturesProps, Footer, FooterColumn, FooterLink, FooterProps, Hero, HeroProps, HeroStat, NavLink, Navbar, NavbarProps, Pricing, PricingPlan, PricingProps } from '../index.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { LucideIcon } from 'lucide-react';
-import { ReactNode } from 'react';
-
-interface HeroStat {
-    value: string;
-    label: string;
-}
-interface HeroProps {
-    badge?: {
-        text: string;
-        icon?: LucideIcon;
-    };
-    title: ReactNode;
-    subtitle: string;
-    stats?: HeroStat[];
-    primaryCta?: {
-        text: string;
-        href: string;
-    };
-    secondaryCta?: {
-        text: string;
-        href: string;
-    };
-    trustedBy?: string[];
-    children?: ReactNode;
-    className?: string;
-}
-declare function Hero({ badge, title, subtitle, stats, primaryCta, secondaryCta, trustedBy, children, className, }: HeroProps): react_jsx_runtime.JSX.Element;
-
-interface Feature {
-    name: string;
-    description: string;
-    icon: LucideIcon;
+import 'lucide-react';
+import 'react';
+
+interface Testimonial {
+    quote: string;
+    author: string;
+    role: string;
+    company?: string;
+    initial?: string;
+    image?: string;
     color?: string;
-    bg?: string;
-}
-interface FeaturesProps {
-    badge?: string;
-    title: string;
-    subtitle?: string;
-    features: Feature[];
-    techStack?: Array<{
-        name: string;
-        color: string;
-        textColor?: string;
-        label: string;
-    }>;
-    className?: string;
 }
-declare function Features({ badge, title, subtitle, features, techStack, className, }: FeaturesProps): react_jsx_runtime.JSX.Element;
-
-interface PricingPlan {
-    name: string;
-    price: string;
-    period?: string;
-    description: string;
-    features: string[];
-    cta: string;
-    href: string;
-    popular?: boolean;
-}
-interface PricingProps {
+interface TestimonialsProps {
     title?: string;
     subtitle?: string;
-    plans: PricingPlan[];
+    testimonials: Testimonial[];
     className?: string;
 }
-declare function Pricing({ title, subtitle, plans, className, }: PricingProps): react_jsx_runtime.JSX.Element;
+declare function Testimonials({ title, subtitle, testimonials, className, }: TestimonialsProps): react_jsx_runtime.JSX.Element;
 
-interface FaqItem {
-    question: string;
-    answer: string;
-}
-interface FaqProps {
+interface WaitlistProps {
+    /** API endpoint for waitlist signup */
+    endpoint?: string;
+    /** Section title */
     title?: string;
-    subtitle?: string;
-    items: FaqItem[];
-    className?: string;
-}
-declare function Faq({ title, subtitle, items, className, }: FaqProps): react_jsx_runtime.JSX.Element;
-
-interface CtaProps {
-    title: string;
-    subtitle?: string;
-    primaryCta?: {
-        text: string;
-        href: string;
-    };
-    secondaryCta?: {
-        text: string;
-        href: string;
-    };
-    className?: string;
-}
-declare function Cta({ title, subtitle, primaryCta, secondaryCta, className, }: CtaProps): react_jsx_runtime.JSX.Element;
-
-interface FooterLink {
-    label: string;
-    href: string;
-}
-interface FooterColumn {
-    title: string;
-    links: FooterLink[];
-}
-interface FooterProps {
-    logo?: ReactNode;
-    siteName?: string;
-    description?: string;
-    columns?: FooterColumn[];
-    socialLinks?: Array<{
-        icon: ReactNode;
-        href: string;
+    /** Section description */
+    description?: React.ReactNode;
+    /** Badge text */
+    badge?: string;
+    /** Submit button text */
+    submitText?: string;
+    /** Success message */
+    successMessage?: string;
+    /** Show business type selector */
+    showBusinessType?: boolean;
+    /** Business types list */
+    businessTypes?: Array<{
+        value: string;
         label: string;
     }>;
-    copyright?: string;
-    className?: string;
-}
-declare function Footer({ logo, siteName, description, columns, socialLinks, copyright, className, }: FooterProps): react_jsx_runtime.JSX.Element;
-
-interface NavLink {
-    label: string;
-    href: string;
-}
-interface NavbarProps {
-    logo?: ReactNode;
-    siteName?: string;
-    links?: NavLink[];
-    ctaText?: string;
-    ctaHref?: string;
+    /** Tracking callbacks */
+    tracking?: {
+        onFormStart?: () => void;
+        onFieldFocus?: (field: string) => void;
+        onSubmit?: (success: boolean, businessType?: string) => void;
+    };
+    /** Additional data to send with the form */
+    additionalData?: Record<string, unknown>;
+    /** Custom class for the section */
     className?: string;
 }
-declare function Navbar({ logo, siteName, links, ctaText, ctaHref, className, }: NavbarProps): react_jsx_runtime.JSX.Element;
+declare function Waitlist({ endpoint, title, description, badge, submitText, successMessage, showBusinessType, businessTypes, tracking, additionalData, className, }: WaitlistProps): react_jsx_runtime.JSX.Element;
 
-export { Cta, type CtaProps, Faq, type FaqItem, type FaqProps, type Feature, Features, type FeaturesProps, Footer, type FooterColumn, type FooterLink, type FooterProps, Hero, type HeroProps, type HeroStat, type NavLink, Navbar, type NavbarProps, Pricing, type PricingPlan, type PricingProps };
+export { type Testimonial, Testimonials, type TestimonialsProps, Waitlist, type WaitlistProps };

package/dist/components/index.d.ts

@@ -1,135 +1,56 @@
+export { Cta, CtaProps, Faq, FaqItem, FaqProps, Feature, Features, FeaturesProps, Footer, FooterColumn, FooterLink, FooterProps, Hero, HeroProps, HeroStat, NavLink, Navbar, NavbarProps, Pricing, PricingPlan, PricingProps } from '../index.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { LucideIcon } from 'lucide-react';
-import { ReactNode } from 'react';
-
-interface HeroStat {
-    value: string;
-    label: string;
-}
-interface HeroProps {
-    badge?: {
-        text: string;
-        icon?: LucideIcon;
-    };
-    title: ReactNode;
-    subtitle: string;
-    stats?: HeroStat[];
-    primaryCta?: {
-        text: string;
-        href: string;
-    };
-    secondaryCta?: {
-        text: string;
-        href: string;
-    };
-    trustedBy?: string[];
-    children?: ReactNode;
-    className?: string;
-}
-declare function Hero({ badge, title, subtitle, stats, primaryCta, secondaryCta, trustedBy, children, className, }: HeroProps): react_jsx_runtime.JSX.Element;
-
-interface Feature {
-    name: string;
-    description: string;
-    icon: LucideIcon;
+import 'lucide-react';
+import 'react';
+
+interface Testimonial {
+    quote: string;
+    author: string;
+    role: string;
+    company?: string;
+    initial?: string;
+    image?: string;
     color?: string;
-    bg?: string;
-}
-interface FeaturesProps {
-    badge?: string;
-    title: string;
-    subtitle?: string;
-    features: Feature[];
-    techStack?: Array<{
-        name: string;
-        color: string;
-        textColor?: string;
-        label: string;
-    }>;
-    className?: string;
 }
-declare function Features({ badge, title, subtitle, features, techStack, className, }: FeaturesProps): react_jsx_runtime.JSX.Element;
-
-interface PricingPlan {
-    name: string;
-    price: string;
-    period?: string;
-    description: string;
-    features: string[];
-    cta: string;
-    href: string;
-    popular?: boolean;
-}
-interface PricingProps {
+interface TestimonialsProps {
     title?: string;
     subtitle?: string;
-    plans: PricingPlan[];
+    testimonials: Testimonial[];
     className?: string;
 }
-declare function Pricing({ title, subtitle, plans, className, }: PricingProps): react_jsx_runtime.JSX.Element;
+declare function Testimonials({ title, subtitle, testimonials, className, }: TestimonialsProps): react_jsx_runtime.JSX.Element;
 
-interface FaqItem {
-    question: string;
-    answer: string;
-}
-interface FaqProps {
+interface WaitlistProps {
+    /** API endpoint for waitlist signup */
+    endpoint?: string;
+    /** Section title */
     title?: string;
-    subtitle?: string;
-    items: FaqItem[];
-    className?: string;
-}
-declare function Faq({ title, subtitle, items, className, }: FaqProps): react_jsx_runtime.JSX.Element;
-
-interface CtaProps {
-    title: string;
-    subtitle?: string;
-    primaryCta?: {
-        text: string;
-        href: string;
-    };
-    secondaryCta?: {
-        text: string;
-        href: string;
-    };
-    className?: string;
-}
-declare function Cta({ title, subtitle, primaryCta, secondaryCta, className, }: CtaProps): react_jsx_runtime.JSX.Element;
-
-interface FooterLink {
-    label: string;
-    href: string;
-}
-interface FooterColumn {
-    title: string;
-    links: FooterLink[];
-}
-interface FooterProps {
-    logo?: ReactNode;
-    siteName?: string;
-    description?: string;
-    columns?: FooterColumn[];
-    socialLinks?: Array<{
-        icon: ReactNode;
-        href: string;
+    /** Section description */
+    description?: React.ReactNode;
+    /** Badge text */
+    badge?: string;
+    /** Submit button text */
+    submitText?: string;
+    /** Success message */
+    successMessage?: string;
+    /** Show business type selector */
+    showBusinessType?: boolean;
+    /** Business types list */
+    businessTypes?: Array<{
+        value: string;
         label: string;
     }>;
-    copyright?: string;
-    className?: string;
-}
-declare function Footer({ logo, siteName, description, columns, socialLinks, copyright, className, }: FooterProps): react_jsx_runtime.JSX.Element;
-
-interface NavLink {
-    label: string;
-    href: string;
-}
-interface NavbarProps {
-    logo?: ReactNode;
-    siteName?: string;
-    links?: NavLink[];
-    ctaText?: string;
-    ctaHref?: string;
+    /** Tracking callbacks */
+    tracking?: {
+        onFormStart?: () => void;
+        onFieldFocus?: (field: string) => void;
+        onSubmit?: (success: boolean, businessType?: string) => void;
+    };
+    /** Additional data to send with the form */
+    additionalData?: Record<string, unknown>;
+    /** Custom class for the section */
     className?: string;
 }
-declare function Navbar({ logo, siteName, links, ctaText, ctaHref, className, }: NavbarProps): react_jsx_runtime.JSX.Element;
+declare function Waitlist({ endpoint, title, description, badge, submitText, successMessage, showBusinessType, businessTypes, tracking, additionalData, className, }: WaitlistProps): react_jsx_runtime.JSX.Element;
 
-export { Cta, type CtaProps, Faq, type FaqItem, type FaqProps, type Feature, Features, type FeaturesProps, Footer, type FooterColumn, type FooterLink, type FooterProps, Hero, type HeroProps, type HeroStat, type NavLink, Navbar, type NavbarProps, Pricing, type PricingPlan, type PricingProps };
+export { type Testimonial, Testimonials, type TestimonialsProps, Waitlist, type WaitlistProps };