landing page ui revamp
This commit is contained in:
Joel Mathew Thomas
@@ -1,25 +1,32 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Typography,
|
||||
Container,
|
||||
Button,
|
||||
Paper,
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
Grid,
|
||||
useTheme
|
||||
import {
|
||||
Typography,
|
||||
Container,
|
||||
Button,
|
||||
Paper,
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
Grid,
|
||||
useTheme,
|
||||
Slide,
|
||||
Zoom,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
CloudUpload as CloudUploadIcon,
|
||||
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
|
||||
sx={{
|
||||
@@ -33,73 +40,163 @@ function LandingPage() {
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="md">
|
||||
<Paper
|
||||
elevation={3}
|
||||
sx={{
|
||||
padding: theme.spacing(6),
|
||||
textAlign: 'center',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h3" gutterBottom color="primary">
|
||||
Welcome to FreqSplit
|
||||
</Typography>
|
||||
<Typography variant="h5" paragraph color="textSecondary">
|
||||
Upload, preview, and process your audio files with ease
|
||||
</Typography>
|
||||
<Box sx={{ mt: 4 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="large"
|
||||
startIcon={<CloudUploadIcon />}
|
||||
onClick={() => navigate('/upload')}
|
||||
sx={{ mr: 2 }}
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Grid container spacing={4} sx={{ mt: 4 }}>
|
||||
<Slide direction="down" in={showContent} mountOnEnter unmountOnExit>
|
||||
<Paper
|
||||
elevation={3}
|
||||
sx={{
|
||||
padding: theme.spacing(6),
|
||||
textAlign: 'center',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h3" gutterBottom color="primary">
|
||||
Welcome to FreqSplit
|
||||
</Typography>
|
||||
<Typography variant="h5" paragraph color="textSecondary">
|
||||
Upload, preview, and process your audio files with ease
|
||||
</Typography>
|
||||
<Box sx={{ mt: 4 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="large"
|
||||
startIcon={<CloudUploadIcon />}
|
||||
onClick={() => navigate('/upload')}
|
||||
sx={{ mr: 2 }}
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Slide>
|
||||
|
||||
<Grid container spacing={4} sx={{ mt: 4, justifyContent: 'center' }}>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card sx={{ height: '100%' }}>
|
||||
<CardContent sx={{ textAlign: 'center' }}>
|
||||
<CloudUploadIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
|
||||
<Typography variant="h5" gutterBottom>
|
||||
Easy Upload
|
||||
</Typography>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
Drag and drop your media files for quick processing
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<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>
|
||||
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 item xs={12} md={4}>
|
||||
<Card sx={{ height: '100%' }}>
|
||||
<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
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<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.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Zoom>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card sx={{ height: '100%' }}>
|
||||
<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
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<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.
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user