MarketingHero = Hero + marketing-specific props
MarketingFeatures = Features + conversion tracking
MarketingPricing = Pricing + analytics events
MarketingCTA = CTA + conversion goals

import type { MarketingSite } from 'mdxui'

interface MarketingSite extends BaseSite {
  type: 'marketing'
  tracking?: {
    analytics?: string      // Analytics provider ID (e.g., GA tracking ID)
    conversion?: string      // Conversion tracking pixel ID
  }
  testing?: {
    enabled?: boolean        // Whether A/B testing is enabled
    provider?: string        // A/B testing provider (e.g., Optimizely, VWO)
  }
}

import { Site, LandingPage, Hero, Features, Pricing, CTA } from '@mdxui/beacon'

<Site
  type="marketing"
  name="Acme SaaS"
  tracking={{
    analytics: "G-XXXXXXXXXX",
    conversion: "AW-123456789"
  }}
>
  <LandingPage>
    <Hero
      title="Ship your SaaS faster"
      subtitle="Pre-built components for auth, billing, and admin"
      cta={{ text: "Start Free Trial", href: "/signup" }}
      secondaryCta={{ text: "View Demo", href: "/demo" }}
    />
    <Features {...featuresProps} />
    <Pricing {...pricingProps} />
    <CTA {...ctaProps} />
  </LandingPage>
</Site>

<Site
  type="marketing"
  name="Acme SaaS"
  tracking={{
    analytics: "G-XXXXXXXXXX"
  }}
  testing={{
    enabled: true,
    provider: "optimizely"
  }}
>
  {/* Components will automatically track experiments */}
</Site>

<Hero
  title="Turn visitors into customers"
  subtitle="The all-in-one marketing platform for growth"
  cta={{ text: "Start Free Trial", href: "/signup" }}
  secondaryCta={{ text: "Book Demo", href: "/demo" }}
  image="/hero-dashboard.png"
/>

<CTA
  title="Ready to get started?"
  subtitle="Join thousands of companies using Acme"
  cta={{ text: "Start Free Trial", href: "/signup" }}
  secondaryCta={{ text: "Talk to Sales", href: "/contact" }}
/>

<Features
  title="Everything you need to grow"
  subtitle="All the tools to turn visitors into customers"
  features={[
    {
      title: "Lead Capture",
      description: "Beautiful forms that convert",
      icon: "Users"
    },
    {
      title: "Email Marketing",
      description: "Automated campaigns that work",
      icon: "Mail"
    },
    {
      title: "Analytics",
      description: "Real-time insights and reporting",
      icon: "BarChart"
    }
  ]}
/>

<Pricing
  title="Simple, transparent pricing"
  subtitle="Choose the plan that fits your needs"
  plans={[
    {
      name: "Starter",
      price: "$29",
      interval: "month",
      features: ["Up to 1,000 contacts", "Email campaigns", "Basic analytics"],
      cta: { text: "Start Free", href: "/signup?plan=starter" }
    },
    {
      name: "Pro",
      price: "$99",
      interval: "month",
      popular: true,
      features: ["Up to 10,000 contacts", "Advanced automation", "Full analytics"],
      cta: { text: "Start Free", href: "/signup?plan=pro" }
    }
  ]}
/>

<Testimonials
  title="Loved by thousands of companies"
  testimonials={[
    {
      quote: "Acme helped us 3x our conversions in just 2 months",
      author: "Sarah Johnson",
      role: "VP of Marketing",
      company: "TechCorp",
      avatar: "/avatars/sarah.jpg"
    }
  ]}
/>

<FAQ
  title="Frequently asked questions"
  questions={[
    {
      question: "How long is the free trial?",
      answer: "14 days, no credit card required"
    },
    {
      question: "Can I cancel anytime?",
      answer: "Yes, cancel anytime with one click"
    }
  ]}
/>

<LogoCloud
  title="Trusted by leading companies"
  logos={[
    { name: "TechCorp", src: "/logos/techcorp.svg" },
    { name: "StartupCo", src: "/logos/startupco.svg" },
    { name: "Enterprise Inc", src: "/logos/enterprise.svg" }
  ]}
/>

// Enhanced with:
- Conversion event tracking on CTA clicks
- A/B test variant support
- Heatmap integration
- Session recording triggers

// Enhanced with:
- Feature click tracking
- Scroll depth monitoring
- Time-on-section metrics
- Feature interest signals

// Enhanced with:
- Plan selection tracking
- Price hover events
- Upgrade path analytics
- Conversion funnel data

// Enhanced with:
- Goal completion tracking
- Multi-variant testing
- Conversion rate optimization
- Exit intent detection

// Page views
analytics.page('Landing Page', {
  title: document.title,
  url: window.location.href
})

// CTA clicks
analytics.track('CTA Clicked', {
  text: 'Start Free Trial',
  location: 'hero',
  destination: '/signup'
})

// Form submissions
analytics.track('Form Submitted', {
  form: 'contact',
  fields: ['email', 'company']
})

<Site
  type="marketing"
  tracking={{
    analytics: "G-XXXXXXXXXX",
    conversion: "AW-123456789"
  }}
>
  {/* Automatically tracks:
    - Sign-ups
    - Demo requests
    - Trial starts
    - Form submissions
  */}
</Site>

<Site
  type="marketing"
  testing={{
    enabled: true,
    provider: "optimizely"
  }}
>
  <Hero
    // Test variant automatically assigned
    title={experiment.variant === 'A'
      ? "Ship your SaaS faster"
      : "Build your SaaS in days"}
    cta={{ text: "Start Free Trial", href: "/signup" }}
  />
</Site>

import { Site, LandingPage, Hero, LogoCloud, Features, Testimonials, Pricing, FAQ, CTA } from '@mdxui/beacon'

<Site
  type="marketing"
  name="Acme SaaS"
  domain="acme.com"
  tracking={{
    analytics: "G-XXXXXXXXXX",
    conversion: "AW-123456789"
  }}
  testing={{
    enabled: true,
    provider: "optimizely"
  }}
>
  <LandingPage>
    {/* 1. Hook visitors */}
    <Hero
      title="Ship your SaaS in days, not months"
      subtitle="Pre-built components for auth, billing, admin, and more"
      cta={{ text: "Start Free Trial", href: "/signup" }}
      secondaryCta={{ text: "View Demo", href: "/demo" }}
      image="/hero-dashboard.png"
      variant="split"
    />

    {/* 2. Build credibility */}
    <LogoCloud
      title="Trusted by 10,000+ companies"
      logos={customerLogos}
    />

    {/* 3. Show value */}
    <Features
      title="Everything you need to launch"
      features={productFeatures}
    />

    {/* 4. Social proof */}
    <Testimonials
      title="Loved by founders and developers"
      testimonials={customerStories}
    />

    {/* 5. Convert */}
    <Pricing
      title="Simple, transparent pricing"
      plans={pricingPlans}
    />

    {/* 6. Handle objections */}
    <FAQ
      title="Frequently asked questions"
      questions={commonQuestions}
    />

    {/* 7. Final push */}
    <CTA
      title="Ready to ship faster?"
      subtitle="Join thousands of developers building with Acme"
      cta={{ text: "Start Free Trial", href: "/signup" }}
      secondaryCta={{ text: "Talk to Sales", href: "/contact" }}
    />
  </LandingPage>
</Site>

import { z } from 'zod'
import { BaseSiteSchema } from 'mdxui/zod'

export const MarketingSiteSchema = BaseSiteSchema.extend({
  type: z.literal('marketing'),
  tracking: z.object({
    analytics: z.string().optional(),
    conversion: z.string().optional(),
  }).optional(),
  testing: z.object({
    enabled: z.boolean().default(false),
    provider: z.string().optional(),
  }).optional(),
})

export type MarketingSite = z.infer<typeof MarketingSiteSchema>