back to top, main card

src/components/main-card/MainCard.jsx

@@ -20,17 +20,13 @@ const MainCard = ({ imageURL, title, description, url }) => {
 	const options = {
 		reverse: true,
 		speed: 1200,
-		reset: false,
+		easing:  'cubic-bezier(.09,.67,.54,.76)'
+		// reset: false,
 	};
 
 	return (
-		<a
-			href={url}
-			target='_blank'
-			rel='noopener noreferrer'
-			style={{ textDecoration: 'none' }}>
 		<Tilt
-				// onClick={(e) => handleClick(e)}
+			// style={{ padding: 0, margin: 0 }}
 			options={options}
 			children={
 				<Card
@@ -44,14 +40,16 @@ const MainCard = ({ imageURL, title, description, url }) => {
 						// 	boxShadow: `1px 1px 20px 10px ${shadowColor}`,
 						// },
 					}}>
-						<CardActionArea>
 					<CardMedia
 						component='img'
 						height='150'
 						image={imageURL}
 						alt={title}
 					/>
-							<CardContent color='white'>
+					<CardActionArea>
+						<CardContent
+							color='white'
+							onClick={() => window.open(url, '_blank')}>
 							<Typography gutterBottom variant='h6' component='div'>
 								{title}
 							</Typography>
@@ -63,9 +61,7 @@ const MainCard = ({ imageURL, title, description, url }) => {
 					</CardActionArea>
 				</Card>
 			}
-				style={{ padding: 0, margin: 0 }}
 		/>
-		</a>
 	);
 };
 

src/layouts/common/backToTop/BackToTop.jsx

@@ -1,14 +1,15 @@
 import React from 'react';
 
-import useScrollTrigger from '@mui/material/useScrollTrigger';
+import { Grid, Grow, useScrollTrigger } from '@mui/material';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import { Grid, Grow, Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 
-
 function ScrollTop(props) {
 	const { children, window } = props;
 
+	// Note that you normally won't need to set the window ref as useScrollTrigger
+	// will default to window.
+	// This is only being set here because the demo is in an iframe.
 	const trigger = useScrollTrigger({
 		target: window ? window() : undefined,
 		disableHysteresis: true,
@@ -26,22 +27,28 @@ function ScrollTop(props) {
 	};
 
 	return (
-		<Grow
-			in={trigger}
-			style={{ transformOrigin: '0 0 0' }}
-			{...(trigger ? { timeout: 1000 } : {})}>
-			<Box onClick={handleClick} role='presentation'>
+		<Grow in={trigger}>
+			<div onClick={handleClick} role='presentation'>
 				{children}
-			</Box>
+			</div>
 		</Grow>
 	);
 }
 
-const Footer = (props) => {
+const BackToTop = (props) => {
 	const theme = useTheme();
 	return (
-		<Grid container justifyContent='center' alignItems='center' id='footer'>
-			<ScrollTop {...props} >
+		<Grid
+			sx={{
+				position: 'fixed',
+				bottom: theme.spacing(2),
+				right: theme.spacing(2),
+			}}
+			container
+			justifyContent='center'
+			alignItems='center'
+			id='footer'>
+			<ScrollTop {...props}>
 				<KeyboardArrowUpIcon
 					sx={{
 						width: '5rem',
@@ -53,4 +60,4 @@ const Footer = (props) => {
 		</Grid>
 	);
 };
-export default Footer;
+export default BackToTop;

src/layouts/common/backToTop/index.js

@@ -0,0 +1 @@
+export { default } from './BackToTop';

src/layouts/landing/LandingLayout.jsx

@@ -6,7 +6,7 @@ import { ColorModeContext } from 'App';
 import { LandingWhite } from 'themes/Theme';
 import FullScreenContainer from 'layouts/common/fullScreenContainer';
 
-import Footer from './components/footer';
+import BackToTop from '../common/backToTop';
 import Header from './components/header';
 
 const LandingLayout = (props) => {
@@ -19,8 +19,10 @@ const LandingLayout = (props) => {
 			<ThemeProvider theme={LandingWhite}>
 				<div id='back-to-top-anchor' />
 				<Header />
-				<FullScreenContainer>{children}</FullScreenContainer>
-				<Footer />
+				<FullScreenContainer>
+					{children}
+					<BackToTop />
+				</FullScreenContainer>
 			</ThemeProvider>
 		</ColorModeContext.Provider>
 	);

src/layouts/landing/components/footer/index.js

@@ -1 +0,0 @@
-export { default } from './Footer';

src/layouts/main/MainLayout.jsx

@@ -3,21 +3,21 @@ import React from 'react';
 import Header from './components/header';
 import Footer from './components/footer';
 import FullScreenContainer from 'layouts/common/fullScreenContainer';
+import BackToTop from '../common/backToTop';
 
 const MainLayout = (props) => {
 	const { children } = props;
 
 	return (
-		<div
-			sx={{
-				minHeight: '100vh',
-				display: 'flex',
-				flexDirection: 'column',
-			}}>
+		<>
+			<div id='back-to-top-anchor' />
 			<Header />
-			<FullScreenContainer>{children}</FullScreenContainer>
+			<FullScreenContainer>
+				{children}
+				<BackToTop />
+			</FullScreenContainer>
 			<Footer />
-		</div>
+		</>
 	);
 };