Agent-n8n/backups/exhibition-demo-backup-20250928-210916/src/App.tsx

import React, { useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import LandingPage from './pages/LandingPage';
import WorkflowPageV4 from './pages/WorkflowPageV4';
import ResultPageV2 from './pages/ResultPageV2';
import { useDemoStore } from './store/demoStore';

type PageType = 'landing' | 'workflow' | 'result';

function App() {
  const [currentPage, setCurrentPage] = useState<PageType>('landing');
  const { status } = useDemoStore();

  React.useEffect(() => {
    if (status === 'completed') {
      setCurrentPage('result');
    }
  }, [status]);

  const handleStartDemo = () => {
    setCurrentPage('workflow');
  };


  return (
    <div className="min-h-screen">
      <AnimatePresence mode="wait">
        {currentPage === 'landing' && (
          <motion.div
            key="landing"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.5 }}
          >
            <LandingPage onStart={handleStartDemo} />
          </motion.div>
        )}

        {currentPage === 'workflow' && (
          <motion.div
            key="workflow"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.5 }}
          >
            <WorkflowPageV4 />
          </motion.div>
        )}

        {currentPage === 'result' && (
          <motion.div
            key="result"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.5 }}
          >
            <ResultPageV2 />
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default App;