Phase 4: Add Stats, Team, Newsletter components and update docs

New Components (Dual API):
- Stats: Display key metrics with multiple layouts (horizontal, vertical, compact)
- Team: Showcase team members with photos, bios, social links
- Newsletter: Email capture form with inline/stacked/card layouts

Documentation Updates:
- Added Pricing, CTA, Testimonials, FAQ documentation to README
- Added Meteors, Aurora, Warp background documentation
- Updated landing page example to showcase all 6 marketing components
- Updated MDX blog post example with new components
- Enhanced individual backgrounds usage examples

Features:
- All components support dual API (explicit props OR MDX children)
- Background integration via BackgroundContainer
- Responsive layouts with Tailwind CSS
- Dark mode support
- TypeScript interfaces for all props
- Form validation for Newsletter component
- Social media links for Team component (Twitter, LinkedIn, GitHub)

Built and tested:
- pnpm build ✓
- pnpm typecheck ✓
- Zero type errors

Total Component Library:
- 9 marketing components (Hero, Features, Pricing, CTA, Testimonials, FAQ, Stats, Team, Newsletter)
- 6 background types (Particles, Grid, Dots, Meteors, Aurora, Warp)

🤖 Generated with Claude Code
Co-Authored-By: Claude <[email protected]>

Author: nathanclevenger

packages/mdxui/react/README.md

@@ -161,6 +161,172 @@ Description
 **Columns (grid layout):**
 - `2` | `3` | `4`
 
+#### Pricing
+
+Pricing section with multiple tiers and feature comparison.
+
+**Props API:**
+```tsx
+<Pricing
+  title="Simple Pricing"
+  description="Choose the plan that's right for you"
+  tiers={[
+    {
+      name: "Starter",
+      price: "9",
+      currency: "$",
+      period: "per month",
+      description: "Perfect for getting started",
+      features: ["Feature 1", "Feature 2", "Feature 3"],
+      action: { text: "Get Started", href: "/signup" },
+      highlighted: false,
+      badge: "Popular"
+    }
+  ]}
+  layout="cards"
+  backgroundType="dots"
+/>
+```
+
+**MDX API:**
+```mdx
+<Pricing backgroundType="dots">
+## Simple Pricing
+
+### Starter
+$9 per month
+- Feature 1
+- Feature 2
+- Feature 3
+</Pricing>
+```
+
+**Layouts:**
+- `cards` - Card-based grid (default)
+
+#### CTA
+
+Call-to-action section to drive user actions.
+
+**Props API:**
+```tsx
+<CTA
+  headline="Ready to get started?"
+  description="Join thousands of users today"
+  primaryAction={{ text: "Sign Up", href: "/signup" }}
+  secondaryAction={{ text: "Learn More", href: "/learn" }}
+  layout="centered"
+  backgroundStyle="gradient"
+  backgroundType="particles"
+/>
+```
+
+**MDX API:**
+```mdx
+<CTA backgroundType="particles" backgroundStyle="gradient">
+# Ready to get started?
+Join thousands of users today
+</CTA>
+```
+
+**Layouts:**
+- `centered` - Centered content (default)
+- `split` - Content on left, actions on right
+- `banner` - Horizontal banner style
+
+**Background Styles:**
+- `solid` - Solid background
+- `gradient` - Gradient background
+- `pattern` - Pattern background
+
+#### Testimonials
+
+Customer testimonials and reviews section.
+
+**Props API:**
+```tsx
+<Testimonials
+  title="What Our Customers Say"
+  testimonials={[
+    {
+      quote: "Amazing product! The team is fantastic.",
+      author: {
+        name: "John Doe",
+        title: "CEO",
+        company: "Acme Corp",
+        avatar: "/avatar.jpg"
+      },
+      rating: 5
+    }
+  ]}
+  layout="grid"
+  columns={3}
+  showRatings={true}
+  showAvatars={true}
+/>
+```
+
+**MDX API:**
+```mdx
+<Testimonials backgroundType="aurora">
+## What Our Customers Say
+
+> Amazing product! The team is fantastic.
+> — John Doe, CEO at Acme Corp
+> ⭐⭐⭐⭐⭐
+</Testimonials>
+```
+
+**Layouts:**
+- `grid` - Grid layout (default)
+- `carousel` - Horizontal scrolling carousel
+- `wall` - Masonry-style wall
+- `single` - Single centered testimonial
+
+**Columns (grid layout):**
+- `2` | `3` | `4`
+
+#### FAQ
+
+Frequently asked questions with accordion interface.
+
+**Props API:**
+```tsx
+<FAQ
+  title="Frequently Asked Questions"
+  items={[
+    {
+      question: "How does it work?",
+      answer: "It works by leveraging modern web technologies..."
+    },
+    {
+      question: "Is it free?",
+      answer: "Yes, we offer a generous free tier."
+    }
+  ]}
+  layout="accordion"
+  allowMultiple={false}
+/>
+```
+
+**MDX API:**
+```mdx
+<FAQ backgroundType="grid">
+## Frequently Asked Questions
+
+### How does it work?
+It works by leveraging modern web technologies...
+
+### Is it free?
+Yes, we offer a generous free tier.
+</FAQ>
+```
+
+**Layouts:**
+- `accordion` - Single column accordion (default)
+- `two-column` - Two-column layout
+- `grid` - Grid layout
+
 ### Background Components
 
 #### BackgroundContainer
@@ -184,6 +350,9 @@ import { BackgroundContainer } from '@mdxui/react/backgrounds'
 - `particles` - Animated particles
 - `grid` - Grid lines
 - `dots` - Dot pattern
+- `meteors` - Shooting stars effect
+- `aurora` - Northern lights with flowing gradients
+- `warp` - Perspective grid warp
 
 **Configuration:**
 ```tsx
@@ -197,7 +366,20 @@ backgroundConfig={{
 
   // Dots
   spacing: 30,
-  size: 1
+  size: 1,
+
+  // Meteors
+  count: 20,
+  color: "rgb(59, 130, 246)",
+
+  // Aurora
+  color1: "rgb(59, 130, 246)",
+  color2: "rgb(147, 51, 234)",
+  color3: "rgb(219, 39, 119)",
+
+  // Warp
+  size: 50,
+  warpIntensity: 0.5
 }}
 ```
 
@@ -206,10 +388,26 @@ backgroundConfig={{
 Use background components directly:
 
 ```tsx
-import { Particles, Grid, Dots } from '@mdxui/react/backgrounds'
+import { Particles, Grid, Dots, Meteors, Aurora, Warp } from '@mdxui/react/backgrounds'
 
-<div className="relative">
+<div className="relative h-screen">
+  {/* Particles */}
   <Particles count={100} color="rgb(255, 255, 255)" opacity={0.5} />
+
+  {/* Meteors */}
+  <Meteors count={20} color="rgb(59, 130, 246)" opacity={0.6} />
+
+  {/* Aurora */}
+  <Aurora
+    color1="rgb(59, 130, 246)"
+    color2="rgb(147, 51, 234)"
+    color3="rgb(219, 39, 119)"
+    opacity={0.4}
+  />
+
+  {/* Warp */}
+  <Warp size={40} color="rgb(59, 130, 246)" opacity={0.3} warpIntensity={0.7} />
+
   <div className="relative z-10">{/* Content */}</div>
 </div>
 ```
@@ -352,7 +550,7 @@ import { cn } from '@mdxui/react'
 ### Landing Page
 
 ```tsx
-import { Hero, Features } from '@mdxui/react'
+import { Hero, Features, Pricing, Testimonials, FAQ, CTA } from '@mdxui/react'
 
 export default function LandingPage() {
   return (
@@ -389,6 +587,62 @@ export default function LandingPage() {
         layout="grid"
         columns={3}
       />
+
+      <Pricing
+        title="Simple Pricing"
+        tiers={[
+          {
+            name: "Starter",
+            price: "9",
+            currency: "$",
+            period: "per month",
+            features: ["Up to 10 users", "Basic features", "24/7 support"],
+            action: { text: "Get Started", href: "/signup" },
+          },
+          {
+            name: "Pro",
+            price: "29",
+            currency: "$",
+            period: "per month",
+            features: ["Up to 100 users", "Advanced features", "Priority support"],
+            action: { text: "Get Started", href: "/signup" },
+            highlighted: true,
+            badge: "Popular",
+          },
+        ]}
+        backgroundType="dots"
+      />
+
+      <Testimonials
+        title="What Our Customers Say"
+        testimonials={[
+          {
+            quote: "This product has transformed our workflow!",
+            author: { name: "John Doe", title: "CEO", company: "Acme Corp" },
+            rating: 5,
+          },
+        ]}
+        backgroundType="aurora"
+      />
+
+      <FAQ
+        title="Frequently Asked Questions"
+        items={[
+          {
+            question: "How does it work?",
+            answer: "It works by leveraging modern web technologies...",
+          },
+        ]}
+        backgroundType="grid"
+      />
+
+      <CTA
+        headline="Ready to get started?"
+        description="Join thousands of users today"
+        primaryAction={{ text: "Sign Up", href: "/signup" }}
+        backgroundStyle="gradient"
+        backgroundType="meteors"
+      />
     </>
   )
 }
@@ -397,7 +651,7 @@ export default function LandingPage() {
 ### MDX Blog Post
 
 ```mdx
-import { Hero, Features } from '@mdxui/react'
+import { Hero, Features, CTA, FAQ } from '@mdxui/react'
 
 <Hero backgroundType="grid">
 # Getting Started with MDX UI
@@ -419,6 +673,22 @@ Use pre-built components
 ### Customize
 Make it your own
 </Features>
+
+<FAQ backgroundType="warp">
+## Common Questions
+
+### How do I get started?
+Simply install the package and import the components you need.
+
+### Is it free?
+Yes, MDX UI is completely open source and free to use.
+</FAQ>
+
+<CTA backgroundType="meteors" backgroundStyle="gradient">
+# Start Building Today
+
+Get started with MDX UI and create beautiful interfaces in minutes.
+</CTA>
 ```
 
 ## Development