n8n_Demo/web_frontend/exhibition-demo/src/App.tsx

import React, { useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import LandingPage from './pages/LandingPage';
import WorkflowPage from './pages/WorkflowPage';
import ResultPage from './pages/ResultPage';
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');
  };

  const handleRestart = () => {
    useDemoStore.getState().reset();
    setCurrentPage('landing');
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-neutral-50 to-neutral-100 dark:from-neutral-950 dark:to-neutral-900">
      <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 }}
          >
            <WorkflowPage />
          </motion.div>
        )}

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

export default App;