File size: 1,906 Bytes
0509f82
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import React from 'react';
import { Route, Switch } from 'wouter';
import { CssBaseline, Box } from '@mui/material';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Home from './pages/Home';
import NotFound from './pages/not-found';
import Header from './components/Header';
import Footer from './components/Footer';

// Create a global theme with movie-themed colors
const theme = createTheme({
  palette: {
    primary: {
      main: '#2C3E50', // Navy blue
      contrastText: '#ffffff',
    },
    secondary: {
      main: '#E74C3C', // Review red
      contrastText: '#ffffff',
    },
    success: {
      main: '#2ECC71', // Positive green
      contrastText: '#ffffff',
    },
    warning: {
      main: '#F1C40F', // Neutral yellow
      contrastText: '#ffffff',
    },
    background: {
      default: '#F8F9FA',
      paper: '#ffffff',
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    h1: {
      fontSize: '2.5rem',
      fontWeight: 700,
      marginBottom: '1rem',
    },
    h2: {
      fontSize: '1.75rem',
      fontWeight: 600,
      marginBottom: '0.75rem',
    },
    h3: {
      fontSize: '1.5rem',
      fontWeight: 600,
      marginBottom: '0.5rem',
    },
  },
  shape: {
    borderRadius: 8,
  },
  spacing: 8,
});

function Router() {
  return (
    <Switch>

      <Route path="/" component={Home} />

      <Route component={NotFound} />

    </Switch>
  );
}

function App() {
  return (
    <ThemeProvider theme={theme}>

      <CssBaseline />

      <Box sx={{ 

        display: 'flex', 

        flexDirection: 'column', 

        minHeight: '100vh'

      }}>

        <Header />

        <Box sx={{ flex: 1 }}>

          <Router />

        </Box>

        <Footer />

      </Box>

    </ThemeProvider>
  );
}

export default App;