```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link, Redirect } from 'react-router-dom';
import { motion } from 'framer-motion';
import {
  ChakraProvider,
  Box,
  Flex,
  Heading,
  Text,
  Button,
  Input,
  FormControl,
  FormLabel,
  Textarea,
  Select,
  Table,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,
  Image,
  useToast
} from '@chakra-ui/react';
import QRCode from 'qrcode.react';
import axios from 'axios';

// Animation variants
const pageVariants = {
  initial: { opacity: 0, x: -100 },
  in: { opacity: 1, x: 0 },
  out: { opacity: 0, x: 100 }
};

const pageTransition = {
  type: 'tween',
  ease: 'anticipate',
  duration: 0.5
};

// Home Component
const Home = () => {
  return (
    <motion.div
      initial="initial"
      animate="in"
      exit="out"
      variants={pageVariants}
      transition={pageTransition}
      style={{ textAlign: 'center', padding: '2rem' }}
    >
      <Heading as="h1" size="2xl" mb={6} color="teal.600">
        Welcome to TrustChain
      </Heading>
      <Text fontSize="xl" mb={10}>
        Blockchain-based Certificate Verification System
      </Text>
      <Flex justify="center" gap={8}>
        <Button as={Link} to="/university/login" colorScheme="teal" size="lg">
          University Portal
        </Button>
        <Button as={Link} to="/employer/verify" colorScheme="blue" size="lg">
          Employer Portal
        </Button>
      </Flex>
    </motion.div>
  );
};

// University Login Component
const UniversityLogin = () => {
  const [credentials, setCredentials] = React.useState({ username: '', password: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setCredentials(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Authentication logic here
  };

  return (
    <motion.div
      initial="initial"
      animate="in"
      exit="out"
      variants={pageVariants}
      transition={pageTransition}
      style={{ maxWidth: '500px', margin: '0 auto', padding: '2rem' }}
    >
      <Heading as="h2" size="xl" mb={6} textAlign="center">
        University Login
      </Heading>
      <form onSubmit={handleSubmit}>
        <FormControl mb={4}>
          <FormLabel>Username</FormLabel>
          <Input
            type="text"
            name="username"
            value={credentials.username}
            onChange={handleChange}
            required
          />
        </FormControl>
        <FormControl mb={6}>
          <FormLabel>Password</FormLabel>
          <Input
            type="password"
            name="password"
            value={credentials.password}
            onChange={handleChange}
            required
          />
        </FormControl>
        <Button type="submit" colorScheme="teal" width="full" mb={4}>
          Login
        </Button>
        <Text textAlign="center">
          Don't have an account? <Link to="/university/register" color="teal.500">Register</Link>
        </Text>
      </form>
    </motion.div>
  );
};

// ... (Other components would follow the same pattern)

// Main App Component
const App = () => {
  return (
    <ChakraProvider>
      <Router>
        <Box minH="100vh" bg="gray.50">
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/university/login" component={UniversityLogin} />
            {/* Add other routes here */}
          </Switch>
        </Box>
      </Router>
    </ChakraProvider>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```