joel/freqsplit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

landing page ui revamp

Browse Source
This commit is contained in:
Joel Mathew Thomas
2025-03-21 16:50:13 +05:30
parent 5a76fd4708
commit 14a9f16b04
1 changed files with 173 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/Pages/LandingPage.tsx
+160 -63
View File
@@ -8,17 +8,24 @@ import {
Card, Card,
CardContent, CardContent,
Grid, Grid,
useTheme useTheme,
Slide,
Zoom,
} from '@mui/material'; } from '@mui/material';
import { import {
CloudUpload as CloudUploadIcon, CloudUpload as CloudUploadIcon,
PlayArrow as PlayArrowIcon, PlayArrow as PlayArrowIcon,
Check as CheckIcon Check as CheckIcon,
GraphicEq as GraphicEqIcon,
NoiseAware as NoiseAwareIcon,
MusicNote as MusicNoteIcon,
} from '@mui/icons-material'; } from '@mui/icons-material';
import { useState } from 'react';
function LandingPage() { function LandingPage() {
const navigate = useNavigate(); const navigate = useNavigate();
const theme = useTheme(); const theme = useTheme();
const [showContent, setShowContent] = useState(true);
return ( return (
<Box <Box
@@ -33,73 +40,163 @@ function LandingPage() {
}} }}
> >
<Container maxWidth="md"> <Container maxWidth="md">
<Paper <Slide direction="down" in={showContent} mountOnEnter unmountOnExit>
elevation={3} <Paper
sx={{ elevation={3}
padding: theme.spacing(6), sx={{
textAlign: 'center', padding: theme.spacing(6),
background: 'rgba(255, 255, 255, 0.9)', textAlign: 'center',
}} background: 'rgba(255, 255, 255, 0.9)',
> }}
<Typography variant="h3" gutterBottom color="primary"> >
Welcome to FreqSplit <Typography variant="h3" gutterBottom color="primary">
</Typography> Welcome to FreqSplit
<Typography variant="h5" paragraph color="textSecondary"> </Typography>
Upload, preview, and process your audio files with ease <Typography variant="h5" paragraph color="textSecondary">
</Typography> Upload, preview, and process your audio files with ease
<Box sx={{ mt: 4 }}> </Typography>
<Button <Box sx={{ mt: 4 }}>
variant="contained" <Button
color="primary" variant="contained"
size="large" color="primary"
startIcon={<CloudUploadIcon />} size="large"
onClick={() => navigate('/upload')} startIcon={<CloudUploadIcon />}
sx={{ mr: 2 }} onClick={() => navigate('/upload')}
> sx={{ mr: 2 }}
Get Started >
</Button> Get Started
</Box> </Button>
</Paper> </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}> <Grid item xs={12} md={4}>
<Card sx={{ height: '100%' }}> <Zoom in={showContent} style={{ transitionDelay: '100ms' }}>
<CardContent sx={{ textAlign: 'center' }}> <Card
<CloudUploadIcon color="primary" sx={{ fontSize: 60, mb: 2 }} /> sx={{
<Typography variant="h5" gutterBottom> height: '100%',
Easy Upload transition: 'transform 0.3s ease-in-out',
</Typography> '&:hover': { transform: 'scale(1.05)' },
<Typography variant="body1" color="textSecondary"> }}
Drag and drop your media files for quick processing >
</Typography> <CardContent sx={{ textAlign: 'center' }}>
</CardContent> <CloudUploadIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
</Card> <Typography variant="h5" gutterBottom>
Upload or Record
</Typography>
<Typography variant="body1" color="textSecondary">
Drag and drop your media files or record directly for quick processing.
</Typography>
</CardContent>
</Card>
</Zoom>
</Grid> </Grid>
<Grid item xs={12} md={4}> <Grid item xs={12} md={4}>
<Card sx={{ height: '100%' }}> <Zoom in={showContent} style={{ transitionDelay: '200ms' }}>
<CardContent sx={{ textAlign: 'center' }}> <Card
<PlayArrowIcon color="primary" sx={{ fontSize: 60, mb: 2 }} /> sx={{
<Typography variant="h5" gutterBottom> height: '100%',
Preview Media transition: 'transform 0.3s ease-in-out',
</Typography> '&:hover': { transform: 'scale(1.05)' },
<Typography variant="body1" color="textSecondary"> }}
Review your files before processing >
</Typography> <CardContent sx={{ textAlign: 'center' }}>
</CardContent> <PlayArrowIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
</Card> <Typography variant="h5" gutterBottom>
Preview Media
</Typography>
<Typography variant="body1" color="textSecondary">
Review your files before processing.
</Typography>
</CardContent>
</Card>
</Zoom>
</Grid> </Grid>
<Grid item xs={12} md={4}> <Grid item xs={12} md={4}>
<Card sx={{ height: '100%' }}> <Zoom in={showContent} style={{ transitionDelay: '300ms' }}>
<CardContent sx={{ textAlign: 'center' }}> <Card
<CheckIcon color="primary" sx={{ fontSize: 60, mb: 2 }} /> sx={{
<Typography variant="h5" gutterBottom> height: '100%',
View Results transition: 'transform 0.3s ease-in-out',
</Typography> '&:hover': { transform: 'scale(1.05)' },
<Typography variant="body1" color="textSecondary"> }}
Download and share your processed media >
</Typography> <CardContent sx={{ textAlign: 'center' }}>
</CardContent> <CheckIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
</Card> <Typography variant="h5" gutterBottom>
View Results
</Typography>
<Typography variant="body1" color="textSecondary">
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>
</Grid> </Grid>
</Container> </Container>