Build a React.js frontend for a blockchain-based certificate verification system with two main portals: University Portal and Employer Portal (use React Router for navigation).

University Portal features:
1. Login page (username, password) with link to registration.
2. Registration page: University name, wallet address, public key input, email verification flow.
3. Dashboard with sidebar for navigation (Issue Certificate, View All Certificates, Revoke Certificate).
4. Issue Certificate: Form for certificate details, upload signed PDF, QR code generation, "Send to Student" button opens Gmail compose with filled email.
5. View All Certificates: Table/list of issued certificates (search/filter, clickable for details).
6. Revoke Certificate: Form for certificate ID, show details, revoke button.

Employer Portal features:
1. Verification page: Input for certificate ID or scan QR code.
2. Result page: Certificate details, signature verification result, status (Valid/Revoked/Not Found).

Use Material-UI or Chakra UI for clean styling (optional), Axios for backend/footer API calls, and qrcode.react for QR code.

Create sample React components and router structure for all required pages and flows.

Make the website visually aesthetic with a lot of animations and the name of the website is TrustChain

App.jsx

@@ -0,0 +1,150 @@
+```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'));
+```

index.html

@@ -1,19 +1,37 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>TrustChain - Blockchain Certificate Verification</title>
+  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    body {
+      font-family: 'Poppins', sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f5f7fa;
+      color: #333;
+    }
+    #root {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
+  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <script src="https://unpkg.com/react-router-dom@5/dist/react-router-dom.js"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <script src="https://unpkg.com/qrcode.react@1.0.1/dist/index.js"></script>
+  <script src="https://unpkg.com/framer-motion@6/dist/framer-motion.js"></script>
+  <script src="https://unpkg.com/@chakra-ui/react@1.8.6/dist/chakra-ui-react.min.js"></script>
+  <script type="text/babel" src="App.jsx"></script>
+</body>
 </html>

style.css

@@ -1,28 +1,49 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+```css
+/* Global animations */
+.fade-in {
+  animation: fadeIn 0.5s ease-in;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Certificate card animation */
+.certificate-card {
+  transition: all 0.3s ease;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.certificate-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Button animations */
+.btn-pulse {
+  animation: pulse 2s infinite;
 }
+
+@keyframes pulse {
+  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
+  70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
+}
+
+/* Loading spinner */
+.spinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Responsive layout adjustments */
+@media (max-width: 768px) {
+  .responsive-flex {
+    flex-direction: column;
+  }
+}
+```