Init: projet by Cursor
This commit is contained in:
Michael
231
src/components/Footer.tsx
Normal file
231
src/components/Footer.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Typography,
|
||||
Link,
|
||||
IconButton,
|
||||
} from '@mui/material';
|
||||
|
||||
import DirectionsCarIcon from '@mui/icons-material/DirectionsCar';
|
||||
import SpeedIcon from '@mui/icons-material/Speed';
|
||||
import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
|
||||
|
||||
const Footer: React.FC = () => {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<Box
|
||||
component="footer"
|
||||
sx={{
|
||||
backgroundColor: 'rgba(26, 26, 26, 0.95)',
|
||||
borderTop: '2px solid #ff6b35',
|
||||
py: 4,
|
||||
mt: 'auto',
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg">
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: 'repeat(3, 1fr)' }, gap: 4 }}>
|
||||
{/* Logo et Description */}
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||||
<DirectionsCarIcon sx={{ fontSize: 40, color: '#ff6b35', mr: 2 }} />
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{
|
||||
color: '#ffffff',
|
||||
fontWeight: 700,
|
||||
fontFamily: '"Orbitron", monospace',
|
||||
}}
|
||||
>
|
||||
INITIAL D
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: '#cccccc',
|
||||
lineHeight: 1.6,
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
Découvrez l'univers de la course automobile japonaise avec les meilleurs pilotes du monde.
|
||||
Affrontez les circuits légendaires et établissez de nouveaux records.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Liens Rapides */}
|
||||
<Box>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
color: '#ff6b35',
|
||||
fontWeight: 600,
|
||||
mb: 3,
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
Liens Rapides
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Link
|
||||
href="/"
|
||||
sx={{
|
||||
color: '#cccccc',
|
||||
textDecoration: 'none',
|
||||
'&:hover': {
|
||||
color: '#ff6b35',
|
||||
},
|
||||
transition: 'color 0.3s ease',
|
||||
}}
|
||||
>
|
||||
Accueil
|
||||
</Link>
|
||||
<Link
|
||||
href="/ranking"
|
||||
sx={{
|
||||
color: '#cccccc',
|
||||
textDecoration: 'none',
|
||||
'&:hover': {
|
||||
color: '#ff6b35',
|
||||
},
|
||||
transition: 'color 0.3s ease',
|
||||
}}
|
||||
>
|
||||
Classement
|
||||
</Link>
|
||||
<Link
|
||||
href="#"
|
||||
sx={{
|
||||
color: '#cccccc',
|
||||
textDecoration: 'none',
|
||||
'&:hover': {
|
||||
color: '#ff6b35',
|
||||
},
|
||||
transition: 'color 0.3s ease',
|
||||
}}
|
||||
>
|
||||
Circuits
|
||||
</Link>
|
||||
<Link
|
||||
href="#"
|
||||
sx={{
|
||||
color: '#cccccc',
|
||||
textDecoration: 'none',
|
||||
'&:hover': {
|
||||
color: '#ff6b35',
|
||||
},
|
||||
transition: 'color 0.3s ease',
|
||||
}}
|
||||
>
|
||||
Voitures
|
||||
</Link>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Statistiques */}
|
||||
<Box>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
color: '#ff6b35',
|
||||
fontWeight: 600,
|
||||
mb: 3,
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
Statistiques
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<SpeedIcon sx={{ color: '#ff6b35', fontSize: 20 }} />
|
||||
<Typography variant="body2" sx={{ color: '#cccccc' }}>
|
||||
1,234+ Joueurs Actifs
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<EmojiEventsIcon sx={{ color: '#ff6b35', fontSize: 20 }} />
|
||||
<Typography variant="body2" sx={{ color: '#cccccc' }}>
|
||||
8 Circuits Légendaires
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<DirectionsCarIcon sx={{ color: '#ff6b35', fontSize: 20 }} />
|
||||
<Typography variant="body2" sx={{ color: '#cccccc' }}>
|
||||
50+ Voitures Disponibles
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Ligne de s<>paration */}
|
||||
<Box
|
||||
sx={{
|
||||
borderTop: '1px solid rgba(255, 107, 53, 0.3)',
|
||||
mt: 4,
|
||||
pt: 3,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Copyright et Liens Sociaux */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: '#888888',
|
||||
}}
|
||||
>
|
||||
© {currentYear} Initial D Arcade Stage. Tous droits réservés.
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<IconButton
|
||||
sx={{
|
||||
color: '#cccccc',
|
||||
'&:hover': {
|
||||
color: '#ff6b35',
|
||||
backgroundColor: 'rgba(255, 107, 53, 0.1)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2">SEGA</Typography>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
sx={{
|
||||
color: '#cccccc',
|
||||
'&:hover': {
|
||||
color: '#ff6b35',
|
||||
backgroundColor: 'rgba(255, 107, 53, 0.1)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2">Support</Typography>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
sx={{
|
||||
color: '#cccccc',
|
||||
'&:hover': {
|
||||
color: '#ff6b35',
|
||||
backgroundColor: 'rgba(255, 107, 53, 0.1)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2">Mentions Légales</Typography>
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
Reference in New Issue
Block a user