src/components/lessons/SlideContainer.jsx

import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';

export default function SlideContainer({ children, slideKey }) {
  return (
    <AnimatePresence mode="wait">

      <motion.div

        key={slideKey}

        initial={{ opacity: 0, x: 50 }}

        animate={{ opacity: 1, x: 0 }}

        exit={{ opacity: 0, x: -50 }}

        transition={{ duration: 0.4, ease: "easeOut" }}

        className="min-h-screen pt-24 pb-32 px-6"

      >

        <div className="max-w-4xl mx-auto">

          {children}

        </div>

      </motion.div>

    </AnimatePresence>
  );
}