Marketing Organisms
Available via @stackmates/ui-marketing
HeroSimple
Mobile-first hero section with headline, subheadline, and CTA button. The simplest hero variant.
Win More Contracts with AI-Powered Proposals
Turn complex RFPs into winning proposals in hours, not weeks. Your team focuses on strategy while AI handles the heavy lifting.
Build Better Products Faster
From idea to production in days with our intelligent development platform.
HeroSimpleProps
| Prop | Type | Default | Description |
|---|---|---|---|
| headline* | string | — | Primary headline addressing the visitor's pain point |
| subheadline | string | — | Supporting subheadline hinting at the solution |
| cta* | { href, label, variant?, onClick? } | — | Call-to-action button configuration |
| alignment | 'left' | 'center' | 'center' | Text alignment |
| background | 'default' | 'muted' | 'gradient' | 'default' | Background style variant |
Installation
import { HeroSimple } from '@stackmates/ui-marketing';Usage
Centered (default)
<HeroSimple
headline="Win More Contracts"
subheadline="AI-powered proposals in hours"
cta={{ href: '/signup', label: 'Start Free Trial' }}
/>Left-aligned with gradient
<HeroSimple
headline="Build Better Products"
subheadline="From idea to production in days"
cta={{ href: '/demo', label: 'Request Demo' }}
alignment="left"
background="gradient"
/>Accessibility
- Uses semantic <section> and <h1> elements
- CTA renders as Next.js Link wrapped in Button for keyboard access
- Responsive text sizing via mobile-first Tailwind classes
FeatureGrid
Responsive grid of FeatureCards with optional section title and description. Supports 2-4 columns.
Everything You Need to Win
A complete platform for proposal management, team collaboration, and AI-powered analysis.
AI Requirement Analysis
Automatically extract and categorize requirements from any RFP document format.
Team Collaboration
Assign sections to subject matter experts and track progress in real time.
Smart Templates
Reuse winning content with AI-powered template matching and suggestions.
Compliance Checking
Verify every requirement is addressed before submission with automated compliance checks.
Analytics Dashboard
Track win rates, response times, and team productivity across all proposals.
Secure Sharing
Share proposals with stakeholders using granular access controls and audit trails.
FeatureGridProps
| Prop | Type | Default | Description |
|---|---|---|---|
| features* | Feature[] | — | Array of { id, title, description, icon? } objects |
| title | string | — | Section title above the grid |
| description | string | — | Section description below the title |
| columns | 2 | 3 | 4 | 3 | Number of grid columns |
| cardVariant | 'default' | 'bordered' | 'filled' | 'default' | Visual style of individual FeatureCards |
| background | 'default' | 'muted' | 'default' | Section background color |
Installation
import { FeatureGrid } from '@stackmates/ui-marketing';Usage
Three column grid
<FeatureGrid
title="Key Features"
features={features}
columns={3}
cardVariant="bordered"
/>Accessibility
- Grid uses CSS grid for proper reflow on screen readers
- Each FeatureCard uses <h3> for heading hierarchy under section <h2>
StatsCounter
Social proof section displaying key metrics. Supports row or grid layout with dark background inversion.
Trusted by Industry Leaders
StatsCounterProps
| Prop | Type | Default | Description |
|---|---|---|---|
| stats* | Stat[] | — | Array of { id, value, label, prefix?, suffix? } objects |
| title | string | — | Section title above the stats |
| layout | 'row' | 'grid' | 'row' | Layout variant for stat items |
| background | 'default' | 'muted' | 'dark' | 'default' | Section background color |
Installation
import { StatsCounter } from '@stackmates/ui-marketing';Usage
Row layout
<StatsCounter
title="Our Numbers"
stats={[
{ id: '1', value: '500', suffix: '+', label: 'Proposals' },
{ id: '2', value: '92', suffix: '%', label: 'Win Rate' },
]}
/>Dark background
<StatsCounter stats={stats} layout="grid" background="dark" />Accessibility
- Stats use tabular-nums for consistent number rendering
- Dark background variant inverts text colors for contrast
- Prefix/suffix are inline with value for screen reader flow
CTABanner
Full-width conversion banner with headline, description, and primary/secondary CTAs. Three background variants.
Ready to Win More Contracts?
Join 500+ teams already using Stackmates to streamline their proposal process.
Questions? Let's Talk.
Our team is here to help you evaluate if Stackmates is the right fit.
CTABannerProps
| Prop | Type | Default | Description |
|---|---|---|---|
| headline* | string | — | Banner headline text |
| description | string | — | Supporting description text |
| cta* | { href, label, variant?, onClick? } | — | Primary call-to-action button |
| secondaryCta | { href, label, variant?, onClick? } | — | Optional secondary call-to-action |
| background | 'primary' | 'dark' | 'gradient' | 'primary' | Background color variant |
| alignment | 'left' | 'center' | 'center' | Text alignment |
Installation
import { CTABanner } from '@stackmates/ui-marketing';Usage
With secondary CTA
<CTABanner
headline="Ready to Start?"
description="Join 500+ teams already using Stackmates."
cta={{ href: '/signup', label: 'Start Free Trial' }}
secondaryCta={{ href: '/demo', label: 'Schedule Demo' }}
/>Dark left-aligned
<CTABanner
headline="Talk to Sales"
cta={{ href: '/contact', label: 'Contact Us' }}
background="dark"
alignment="left"
/>Accessibility
- Buttons invert color scheme for contrast against colored backgrounds
- CTA renders as Next.js Link for keyboard navigation
- Semantic <section> wrapping for landmark navigation
FAQSection
Accordion FAQ with Schema.org JSON-LD markup for SEO. Single or multiple items open at once.
Frequently Asked Questions
Everything you need to know about getting started.
FAQSectionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | { question: string, answer: string }[] | — | Array of FAQ question/answer pairs |
| headline | string | — | Section headline |
| subheadline | string | — | Section subheadline |
| allowMultiple | boolean | false | Allow multiple accordion items open simultaneously |
Installation
import { FAQSection } from '@stackmates/ui-marketing';Usage
Basic
<FAQSection
headline="FAQ"
items={[
{ question: 'How does it work?', answer: 'Upload your RFP...' },
{ question: 'Is there a free trial?', answer: 'Yes, 14 days...' },
]}
/>Allow multiple open
<FAQSection items={items} allowMultiple />Accessibility
- Uses Radix Accordion with proper ARIA attributes
- Schema.org FAQPage JSON-LD for search engine rich results
- Keyboard accessible — Enter/Space toggles, Arrow keys navigate
PricingTable
Tier-based pricing comparison with feature checklists, highlighted recommended tier, and optional monthly/annual toggle.
Simple, Transparent Pricing
Start free. Scale as you grow. No surprises.
Starter
For individuals and small teams getting started.
- 5 proposals per month - included
- AI requirement extraction - included
- Basic templates - included
- Team collaboration - not included
- Analytics dashboard - not included
- Priority support - not included
Professional
For growing teams that need collaboration tools.
- Unlimited proposals - included
- AI requirement extraction - included
- Custom templates - included
- Team collaboration (up to 10) - included
- Analytics dashboard - included
- Priority support - not included
Enterprise
For organizations that need advanced security and support.
- Unlimited proposals - included
- AI requirement extraction - included
- Custom templates - included
- Unlimited team members - included
- Advanced analytics - included
- 24/7 priority support - included
PricingTableProps
| Prop | Type | Default | Description |
|---|---|---|---|
| tiers* | PricingTier[] | — | Array of pricing tiers with name, price, period, features, cta |
| headline | string | — | Section headline |
| subheadline | string | — | Section subheadline |
| billingToggle | boolean | false | Show monthly/annual billing toggle |
| onBillingChange | (annual: boolean) => void | — | Callback when billing period changes |
Installation
import { PricingTable } from '@stackmates/ui-marketing';
import type { PricingTier } from '@stackmates/ui-marketing';Usage
With billing toggle
<PricingTable
headline="Pricing"
billingToggle
tiers={[
{ name: 'Free', price: '$0', period: '/mo', features: [...], cta: { href: '/signup', label: 'Start' } },
{ name: 'Pro', price: '$99', annualPrice: '$79', period: '/mo', highlighted: true, badge: 'Popular', features: [...], cta: { href: '/signup', label: 'Try Free' } },
]}
/>Accessibility
- Billing toggle uses role="switch" with aria-checked
- Feature inclusion uses Check/X icons plus sr-only text
- CTA buttons are Links for keyboard navigation
- Highlighted tier uses border + ring, not color alone