Personal_Trainer/Template-01/src/App.tsx

import { ThemeListener } from './components/layout/ThemeListener';
/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React from "react";
import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
import { AnimatePresence, motion } from "motion/react";
import Layout from "./components/Layout";
import Home from "./pages/Home";
import Sobre from "./pages/Sobre";
import Blog from "./pages/Blog";
import Contato from "./pages/Contato";
import BlogPost from "./pages/BlogPost";
import NotFound from "./pages/NotFound";

const PageTransition: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 15 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -15 }}
      transition={{ duration: 0.3, ease: "easeInOut" }}
      className="flex flex-col flex-grow w-full"
    >
      {children}
    </motion.div>
  );
}

function AnimatedRoutes() {
  const location = useLocation();
  return (
    <AnimatePresence mode="wait">
      <Routes location={location}>
        <Route path="/" element={<PageTransition key="home"><Home /></PageTransition>} />
        <Route path="/sobre" element={<PageTransition key="sobre"><Sobre /></PageTransition>} />
        <Route path="/blog" element={<PageTransition key="blog"><Blog /></PageTransition>} />
        <Route path="/blog/:slug" element={<PageTransition key="post"><BlogPost /></PageTransition>} />
        <Route path="/contato" element={<PageTransition key="contato"><Contato /></PageTransition>} />
        <Route path="*" element={<PageTransition key="notfound"><NotFound /></PageTransition>} />
      </Routes>
    </AnimatePresence>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <Layout>
        <AnimatedRoutes />
      </Layout>
    </BrowserRouter>
  );
}