# 21st Dev MCP — Component Catalog for Site Replication

Catalogo completo de componentes disponiveis via `mcp__21st-magic__21st_magic_component_inspiration`.
Cada entrada inclui: nome, search query, uso tipico, e libs necessarias.

## Hero & Headlines

| Componente | Search Query | Uso | Libs |
|-----------|-------------|-----|------|
| Hero text reveal | `hero animation text reveal` | Headlines com animacao de entrada | motion/react |
| Scroll trigger animations | `scroll trigger animations` | Container que anima ao scroll (insetY, scale, translate) | motion/react, lenis |
| Text gradient | `text gradient animation` | Texto com gradiente animado | CSS |

## Scroll Animations

| Componente | Search Query | Uso | Libs |
|-----------|-------------|-----|------|
| Scroll Animation | `scroll fade in animation` | Fade + blur + slide (up/down/left/right) com useInView | motion/react |
| Section Component (FadeInOnScroll) | `section fade scroll` | Wrapper que faz fade-in quando entra na viewport | motion/react |
| StaggeredContainer | `stagger children animation` | Filhos aparecem sequencialmente com delay | motion/react |
| ContainerScrollAnimation | `scroll container parallax` | Parallax e inset ao scroll com Lenis smooth | motion/react, lenis |
| ContainerScrollScale | `scroll scale animation` | Elemento escala conforme scroll progress | motion/react |
| ContainerScrollTranslate | `scroll translate animation` | Elemento translada conforme scroll | motion/react |

### Codigo de Referencia — FadeInOnScroll
```tsx
const FadeInOnScroll = ({ children, delay = 0, direction = 'up' }) => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-100px' });
  const variants = {
    hidden: {
      opacity: 0,
      y: direction === 'up' ? 50 : direction === 'down' ? -50 : 0,
      x: direction === 'left' ? 50 : direction === 'right' ? -50 : 0,
    },
    visible: { opacity: 1, y: 0, x: 0 },
  };
  return (
    <motion.div ref={ref} initial="hidden" animate={isInView ? 'visible' : 'hidden'}
      variants={variants} transition={{ duration: 0.8, delay, ease: [0.25, 0.25, 0.25, 0.75] }}>
      {children}
    </motion.div>
  );
};
```

### Codigo de Referencia — Scroll Animation (Direction + Blur)
```tsx
const generateVariants = (direction) => {
  const axis = direction === 'left' || direction === 'right' ? 'x' : 'y';
  const value = direction === 'right' || direction === 'down' ? 100 : -100;
  return {
    hidden: { filter: 'blur(10px)', opacity: 0, [axis]: value },
    visible: { filter: 'blur(0px)', opacity: 1, [axis]: 0,
      transition: { duration: 0.5, ease: 'easeOut' } },
  };
};
// Usage: <ScrollAnimation direction="up"><Content /></ScrollAnimation>
```

## Animated Numbers & Counters

| Componente | Search Query | Uso | Libs |
|-----------|-------------|-----|------|
| Animated Counter | `animated counter` | Digitos que rolam com spring (slot machine) | motion/react |
| Animated Number (NumberFlow) | `animated number` | Contador suave com NumberFlow | @number-flow/react |
| Countdown | `countdown timer` | Timer regressivo animado | motion/react |

### Codigo de Referencia — Counter com viewport trigger
```tsx
const AnimatedNumber = ({ end, duration = 1 }) => {
  const [display, setDisplay] = useState(0);
  const spring = useSpring(0, { bounce: 0, duration: duration * 1000 });
  spring.on("change", (v) => setDisplay(Math.round(v)));
  return (
    <motion.div
      onViewportEnter={() => spring.set(end)}
      onViewportLeave={() => spring.set(0)}>
      {display}
    </motion.div>
  );
};
```

## Bar Charts & Comparisons

| Componente | Search Query | Uso | Libs |
|-----------|-------------|-----|------|
| Statistics Card (BarChart) | `animated bar chart progress` | Barras verticais animadas com NumberFlow | motion/react, @number-flow/react |
| Bar Chart (Recharts) | `bar chart recharts` | Graficos de barra interativos | recharts, motion/react |
| Horizontal Bar | `horizontal bar chart` | Barras horizontais com reaviz | reaviz |

### Codigo de Referencia — Barra Animada Simples
```tsx
const AnimatedBar = ({ value, label, color = 'bg-primary', delay = 0 }) => (
  <div className="relative h-full w-full">
    <div className="h-full w-full overflow-hidden rounded-2xl bg-gray-100">
      <motion.div
        initial={{ height: 0 }}
        animate={{ height: `${value}%` }}
        transition={{ duration: 0.5, type: 'spring', damping: 20, delay }}
        className={`absolute bottom-0 w-full rounded-2xl ${color} p-3 text-white`}>
        <div className="flex h-12 items-center justify-center rounded-full bg-white/20">
          <NumberFlow value={value} suffix="%" />
        </div>
      </motion.div>
    </div>
    <p className="mt-2 text-center text-sm text-gray-500">{label}</p>
  </div>
);
```

## Testimonials & Social Proof

| Componente | Search Query | Uso | Libs |
|-----------|-------------|-----|------|
| Testimonial Slider | `testimonial carousel animated` | Carousel com drag, autoplay, dots | motion/react |
| Animated Testimonials | `animated testimonials stacked` | Fotos empilhadas com rotacao + texto | motion/react |
| Testimonial (simple) | `testimonial card quote` | Card estatico com foto, nome, citacao | CSS |

### Codigo de Referencia — Testimonial Card
```tsx
const TestimonialCard = ({ quote, name, role, avatar }) => (
  <motion.div whileHover={{ y: -5 }}
    className="rounded-2xl border border-gray-100 bg-white p-6 shadow-lg">
    <p className="mb-6 text-gray-700 leading-relaxed">"{quote}"</p>
    <div className="flex items-center gap-3 border-t border-gray-100 pt-4">
      <img src={avatar} alt={name} className="h-10 w-10 rounded-full object-cover" />
      <div>
        <h4 className="font-bold text-gray-900">{name}</h4>
        <p className="text-sm text-gray-500">{role}</p>
      </div>
    </div>
  </motion.div>
);
```

## FAQ & Accordions

| Componente | Search Query | Uso | Libs |
|-----------|-------------|-----|------|
| FAQ Sections | `FAQ accordion animated` | Acordeao centralizado com chevron rotate | CSS transitions |
| Accordion (Framer) | `accordion expand collapse` | Acordeao com motion height auto | motion/react |
| Collapsible (Ark UI) | `collapsible FAQ style` | FAQ com @ark-ui/react | @ark-ui/react |

### Codigo de Referencia — FAQ Simples
```tsx
const FAQ = ({ items }) => {
  const [open, setOpen] = useState(null);
  return (
    <div className="max-w-2xl mx-auto">
      {items.map((item, i) => (
        <div key={i} className="border-b border-gray-200 py-4 cursor-pointer"
          onClick={() => setOpen(open === i ? null : i)}>
          <div className="flex items-center justify-between">
            <h3 className="font-medium">{item.question}</h3>
            <ChevronDown className={`transition-transform duration-300 ${open === i ? 'rotate-180' : ''}`} />
          </div>
          <motion.div initial={false}
            animate={{ height: open === i ? 'auto' : 0, opacity: open === i ? 1 : 0 }}
            transition={{ duration: 0.4 }} style={{ overflow: 'hidden' }}>
            <p className="pt-4 text-gray-500">{item.answer}</p>
          </motion.div>
        </div>
      ))}
    </div>
  );
};
```

## Pricing Cards

| Componente | Search Query | Uso | Libs |
|-----------|-------------|-----|------|
| Pricing Card | `pricing card CTA badge` | Card com preco, preco riscado, badge, CTA | CSS |
| Pricing (gradient CTA) | `pricing gradient button` | Card com botao gradiente | CSS |

### Codigo de Referencia — Pricing
```tsx
const PricingCard = ({ originalPrice, price, lot, ctaText, ctaHref }) => (
  <div className="rounded-2xl border border-gray-200 bg-white p-8 shadow-xl text-center">
    <span className="inline-block rounded-full bg-violet-100 px-3 py-1 text-sm font-medium text-violet-700">
      {lot}
    </span>
    <div className="mt-4">
      <span className="text-lg text-gray-400 line-through">R$ {originalPrice}</span>
      <div className="text-5xl font-bold text-gray-900">R$ {price}</div>
    </div>
    <a href={ctaHref}
      className="mt-6 block w-full rounded-full bg-gradient-to-b from-orange-500 to-orange-600 px-8 py-4 font-semibold text-white shadow-[0_10px_25px_rgba(255,107,0,0.3)] transition hover:scale-[1.02]">
      {ctaText}
    </a>
  </div>
);
```

## Timeline & Agenda

| Componente | Search Query | Uso | Libs |
|-----------|-------------|-----|------|
| Modern Timeline | `timeline schedule steps` | Timeline vertical com status e categorias | motion/react |
| Steps Timeline | `steps progress timeline` | Steps horizontais/verticais | CSS |

## CTA & Floating Elements

| Componente | Search Query | Uso | Libs |
|-----------|-------------|-----|------|
| Floating Consult Button | `floating consult button` | Botao fixo com texto rotativo + popup | motion/react |
| Call to Action | `call to action section` | Secao CTA com headline + botoes | CSS |
| Sticky CTA Bar | `sticky bottom bar CTA` | Barra fixa no bottom com botao | CSS |

### Codigo de Referencia — Sticky CTA
```tsx
const StickyCTA = ({ text, href }) => (
  <motion.div initial={{ y: 100 }} animate={{ y: 0 }}
    className="fixed bottom-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-lg border-t border-gray-200 p-4">
    <div className="mx-auto max-w-6xl flex items-center justify-between">
      <p className="font-medium text-gray-900">{text}</p>
      <a href={href}
        className="rounded-full bg-orange-500 px-6 py-3 font-semibold text-white shadow-lg">
        Comprar Agora
      </a>
    </div>
  </motion.div>
);
```

## Speaker / Team Bios

| Componente | Search Query | Uso | Libs |
|-----------|-------------|-----|------|
| Team Cards | `team member card` | Card com foto, nome, bio | CSS |
| Speaker Section | `speaker bio section` | Layout 2-3 colunas com foto + credenciais | CSS |

## Comparison Tables

| Componente | Search Query | Uso | Libs |
|-----------|-------------|-----|------|
| Comparison Table | `comparison table features` | Tabela com checkmarks lado a lado | CSS |
| VS Layout | `versus comparison layout` | Layout "X vs Y" com barras | CSS |

## Common Animation Patterns (Framer Motion)

```tsx
// Hover lift
whileHover={{ y: -5, scale: 1.02 }}

// Viewport fade-in
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-100px' }}
transition={{ duration: 0.6 }}

// Stagger children
const container = { hidden: {}, visible: { transition: { staggerChildren: 0.1 } } };
const item = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } };

// Scale on tap
whileTap={{ scale: 0.95 }}

// Smooth spring
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
```

## Dependencies Quick Reference

```json
{
  "dependencies": {
    "motion": "^12.0.0",
    "@number-flow/react": "^0.4.0",
    "lenis": "^1.1.0",
    "lucide-react": "^0.400.0"
  }
}
```
