landing page ui revamp

client/src/Pages/LandingPage.tsx

@@ -8,17 +8,24 @@ import {
   Card,
   CardContent,
   Grid,
-  useTheme 
+  useTheme,
+  Slide,
+  Zoom,
 } from '@mui/material';
 import {
   CloudUpload as CloudUploadIcon,
   PlayArrow as PlayArrowIcon,
-  Check as CheckIcon 
+  Check as CheckIcon,
+  GraphicEq as GraphicEqIcon,
+  NoiseAware as NoiseAwareIcon,
+  MusicNote as MusicNoteIcon,
 } from '@mui/icons-material';
+import { useState } from 'react';
 
 function LandingPage() {
   const navigate = useNavigate();
   const theme = useTheme();
+  const [showContent, setShowContent] = useState(true);
 
   return (
     <Box
@@ -33,6 +40,7 @@ function LandingPage() {
       }}
     >
       <Container maxWidth="md">
+        <Slide direction="down" in={showContent} mountOnEnter unmountOnExit>
           <Paper
             elevation={3}
             sx={{
@@ -60,46 +68,135 @@ function LandingPage() {
               </Button>
             </Box>
           </Paper>
+        </Slide>
 
-        <Grid container spacing={4} sx={{ mt: 4 }}>
+        <Grid container spacing={4} sx={{ mt: 4, justifyContent: 'center' }}>
           <Grid item xs={12} md={4}>
-            <Card sx={{ height: '100%' }}>
+            <Zoom in={showContent} style={{ transitionDelay: '100ms' }}>
+              <Card
+                sx={{
+                  height: '100%',
+                  transition: 'transform 0.3s ease-in-out',
+                  '&:hover': { transform: 'scale(1.05)' },
+                }}
+              >
                 <CardContent sx={{ textAlign: 'center' }}>
                   <CloudUploadIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
                   <Typography variant="h5" gutterBottom>
-                  Easy Upload
+                    Upload or Record
                   </Typography>
                   <Typography variant="body1" color="textSecondary">
-                  Drag and drop your media files for quick processing
+                    Drag and drop your media files or record directly for quick processing.
                   </Typography>
                 </CardContent>
               </Card>
+            </Zoom>
           </Grid>
           <Grid item xs={12} md={4}>
-            <Card sx={{ height: '100%' }}>
+            <Zoom in={showContent} style={{ transitionDelay: '200ms' }}>
+              <Card
+                sx={{
+                  height: '100%',
+                  transition: 'transform 0.3s ease-in-out',
+                  '&:hover': { transform: 'scale(1.05)' },
+                }}
+              >
                 <CardContent sx={{ textAlign: 'center' }}>
                   <PlayArrowIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
                   <Typography variant="h5" gutterBottom>
                     Preview Media
                   </Typography>
                   <Typography variant="body1" color="textSecondary">
-                  Review your files before processing
+                    Review your files before processing.
                   </Typography>
                 </CardContent>
               </Card>
+            </Zoom>
           </Grid>
           <Grid item xs={12} md={4}>
-            <Card sx={{ height: '100%' }}>
+            <Zoom in={showContent} style={{ transitionDelay: '300ms' }}>
+              <Card
+                sx={{
+                  height: '100%',
+                  transition: 'transform 0.3s ease-in-out',
+                  '&:hover': { transform: 'scale(1.05)' },
+                }}
+              >
                 <CardContent sx={{ textAlign: 'center' }}>
                   <CheckIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
                   <Typography variant="h5" gutterBottom>
                     View Results
                   </Typography>
                   <Typography variant="body1" color="textSecondary">
-                  Download and share your processed media
+                    Download and share your processed media.
                   </Typography>
                 </CardContent>
               </Card>
+            </Zoom>
+          </Grid>
+
+          <Grid item xs={12} md={4}>
+            <Zoom in={showContent} style={{ transitionDelay: '400ms' }}>
+              <Card
+                sx={{
+                  height: '100%',
+                  transition: 'transform 0.3s ease-in-out',
+                  '&:hover': { transform: 'scale(1.05)' },
+                }}
+              >
+                <CardContent sx={{ textAlign: 'center' }}>
+                  <GraphicEqIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
+                  <Typography variant="h5" gutterBottom>
+                    Audio Source Separation (Demucs)
+                  </Typography>
+                  <Typography variant="body1" color="textSecondary">
+                    Separate audio sources with state-of-the-art Demucs.
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Zoom>
+          </Grid>
+          <Grid item xs={12} md={4}>
+            <Zoom in={showContent} style={{ transitionDelay: '500ms' }}>
+              <Card
+                sx={{
+                  height: '100%',
+                  transition: 'transform 0.3s ease-in-out',
+                  '&:hover': { transform: 'scale(1.05)' },
+                }}
+              >
+                <CardContent sx={{ textAlign: 'center' }}>
+                  <NoiseAwareIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
+                  <Typography variant="h5" gutterBottom>
+                    Noise Reduction (DeepFilterNet)
+                  </Typography>
+                  <Typography variant="body1" color="textSecondary">
+                    Reduce noise effectively using DeepFilterNet.
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Zoom>
+          </Grid>
+          <Grid item xs={12} md={4}>
+            <Zoom in={showContent} style={{ transitionDelay: '600ms' }}>
+              <Card
+                sx={{
+                  height: '100%',
+                  transition: 'transform 0.3s ease-in-out',
+                  '&:hover': { transform: 'scale(1.05)' },
+                }}
+              >
+                <CardContent sx={{ textAlign: 'center' }}>
+                  <MusicNoteIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
+                  <Typography variant="h5" gutterBottom>
+                    Audio Processing (Librosa)
+                  </Typography>
+                  <Typography variant="body1" color="textSecondary">
+                    Advanced audio processing and manipulation with Librosa.
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Zoom>
           </Grid>
         </Grid>
       </Container>