Michi
0ebe7fa13d
Some checks failed
🚀 Continuous Integration / 🔧 Backend Tests (18.x) (push) Has been cancelled
🚀 Continuous Integration / 🔧 Backend Tests (20.x) (push) Has been cancelled
🚀 Continuous Integration / 🎨 Frontend Tests (18.x) (push) Has been cancelled
🚀 Continuous Integration / 🎨 Frontend Tests (20.x) (push) Has been cancelled
🚀 Continuous Integration / 🔍 Code Quality (push) Has been cancelled
🚀 Continuous Integration / 🔒 Security Checks (push) Has been cancelled
🚀 Continuous Integration / 🎨 Theme Tests (push) Has been cancelled
🚀 Continuous Integration / ♿ Accessibility Tests (push) Has been cancelled
🚀 Continuous Integration / 📱 Cross-Browser Tests (push) Has been cancelled
🚀 Continuous Integration / 🏗️ Build Tests (push) Has been cancelled
🚀 Continuous Integration / 📊 Performance Tests (push) Has been cancelled
🚀 Continuous Integration / 🎯 Integration Tests (push) Has been cancelled
🚀 Continuous Integration / ✅ All Tests Passed (push) Has been cancelled
345 lines
11 KiB
JavaScript
345 lines
11 KiB
JavaScript
import React from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import {
|
||
Box,
|
||
Container,
|
||
Typography,
|
||
Button,
|
||
Grid,
|
||
Card,
|
||
CardContent,
|
||
AppBar,
|
||
Toolbar,
|
||
useTheme,
|
||
useMediaQuery
|
||
} from '@mui/material';
|
||
import EmojiEvents from '@mui/icons-material/EmojiEvents';
|
||
import Assignment from '@mui/icons-material/Assignment';
|
||
import FamilyRestroom from '@mui/icons-material/FamilyRestroom';
|
||
import Star from '@mui/icons-material/Star';
|
||
import PlayArrow from '@mui/icons-material/PlayArrow';
|
||
import Login from '@mui/icons-material/Login';
|
||
import PersonAdd from '@mui/icons-material/PersonAdd';
|
||
import ChildCare from '@mui/icons-material/ChildCare';
|
||
import { motion } from 'framer-motion';
|
||
import { useFirebaseAuth } from '../contexts/FirebaseAuthContext';
|
||
|
||
const LandingPage = () => {
|
||
const navigate = useNavigate();
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
||
const { currentUser } = useFirebaseAuth();
|
||
|
||
// Wenn bereits angemeldet, zum Dashboard weiterleiten
|
||
React.useEffect(() => {
|
||
if (currentUser) {
|
||
navigate('/dashboard');
|
||
}
|
||
}, [currentUser, navigate]);
|
||
|
||
const features = [
|
||
{
|
||
icon: <Assignment sx={{ fontSize: 48, color: theme.palette.primary.main }} />,
|
||
title: 'Aufgaben-Management',
|
||
description: 'Erstelle und verwalte Aufgaben für deine Kinder. Von Hausarbeit bis Hausaufgaben - alles an einem Ort.'
|
||
},
|
||
{
|
||
icon: <EmojiEvents sx={{ fontSize: 48, color: theme.palette.secondary.main }} />,
|
||
title: 'Belohnungs-System',
|
||
description: 'Motiviere deine Kinder mit einem spielerischen Punktesystem und individuellen Belohnungen.'
|
||
},
|
||
{
|
||
icon: <FamilyRestroom sx={{ fontSize: 48, color: theme.palette.success.main }} />,
|
||
title: 'Familien-Dashboard',
|
||
description: 'Behalte den Überblick über alle Familienmitglieder und deren Fortschritte an einem Ort.'
|
||
},
|
||
{
|
||
icon: <Star sx={{ fontSize: 48, color: theme.palette.warning.main }} />,
|
||
title: 'Gamification',
|
||
description: 'Verwandle alltägliche Aufgaben in spannende Herausforderungen mit Levels und Achievements.'
|
||
}
|
||
];
|
||
|
||
return (
|
||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default' }}>
|
||
{/* Navigation */}
|
||
<AppBar position="static" elevation={0} sx={{ bgcolor: 'transparent' }}>
|
||
<Toolbar>
|
||
<Typography
|
||
variant="h5"
|
||
sx={{
|
||
flexGrow: 1,
|
||
fontWeight: 800,
|
||
background: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
|
||
backgroundClip: 'text',
|
||
WebkitBackgroundClip: 'text',
|
||
WebkitTextFillColor: 'transparent'
|
||
}}
|
||
>
|
||
🏆 Familien-Held
|
||
</Typography>
|
||
|
||
<Button
|
||
color="primary"
|
||
startIcon={<Login />}
|
||
onClick={() => navigate('/login')}
|
||
sx={{ mr: 1 }}
|
||
>
|
||
Anmelden
|
||
</Button>
|
||
|
||
<Button
|
||
variant="contained"
|
||
startIcon={<PersonAdd />}
|
||
onClick={() => navigate('/register')}
|
||
>
|
||
Registrieren
|
||
</Button>
|
||
</Toolbar>
|
||
</AppBar>
|
||
|
||
{/* Hero Section */}
|
||
<Container maxWidth="lg" sx={{ py: 8 }}>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
>
|
||
<Box sx={{ textAlign: 'center', mb: 8 }}>
|
||
<Typography
|
||
variant={isMobile ? 'h3' : 'h2'}
|
||
sx={{
|
||
fontWeight: 800,
|
||
mb: 3,
|
||
background: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
|
||
backgroundClip: 'text',
|
||
WebkitBackgroundClip: 'text',
|
||
WebkitTextFillColor: 'transparent'
|
||
}}
|
||
>
|
||
Verwandle Aufgaben in Abenteuer! 🚀
|
||
</Typography>
|
||
|
||
<Typography
|
||
variant="h5"
|
||
color="text.secondary"
|
||
sx={{ mb: 4, maxWidth: 600, mx: 'auto' }}
|
||
>
|
||
Die spielerische To-Do- & Belohnungs-App für Familien.
|
||
Motiviere deine Kinder und bringe Spaß in den Alltag!
|
||
</Typography>
|
||
|
||
<Box sx={{ display: 'flex', gap: 2, justifyContent: 'center', flexWrap: 'wrap' }}>
|
||
<Button
|
||
variant="contained"
|
||
size="large"
|
||
startIcon={<PlayArrow />}
|
||
onClick={() => navigate('/register')}
|
||
sx={{
|
||
py: 2,
|
||
px: 4,
|
||
fontSize: '1.1rem',
|
||
fontWeight: 600,
|
||
borderRadius: 3
|
||
}}
|
||
>
|
||
Jetzt kostenlos starten
|
||
</Button>
|
||
|
||
<Button
|
||
variant="outlined"
|
||
size="large"
|
||
onClick={() => navigate('/login')}
|
||
sx={{
|
||
py: 2,
|
||
px: 4,
|
||
fontSize: '1.1rem',
|
||
borderRadius: 3
|
||
}}
|
||
>
|
||
Bereits registriert?
|
||
</Button>
|
||
</Box>
|
||
|
||
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
|
||
💡 Tipp: Probiere die Demo mit dem Account "demo@familie.de" und Passwort "demo123"
|
||
</Typography>
|
||
</Box>
|
||
</motion.div>
|
||
|
||
{/* Features Section */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.8, delay: 0.3 }}
|
||
>
|
||
<Typography
|
||
variant="h3"
|
||
sx={{
|
||
textAlign: 'center',
|
||
fontWeight: 700,
|
||
mb: 6,
|
||
color: 'text.primary'
|
||
}}
|
||
>
|
||
Warum Familien-Held? ✨
|
||
</Typography>
|
||
|
||
<Grid container spacing={4}>
|
||
{features.map((feature, index) => (
|
||
<Grid size={{ xs: 12, md: 6 }} key={index}>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.1 * index }}
|
||
>
|
||
<Card
|
||
sx={{
|
||
height: '100%',
|
||
position: 'relative',
|
||
overflow: 'visible',
|
||
'&:hover': {
|
||
transform: 'translateY(-8px)',
|
||
transition: 'transform 0.3s ease-in-out'
|
||
}
|
||
}}
|
||
>
|
||
<CardContent sx={{ p: 4, textAlign: 'center' }}>
|
||
<Box sx={{ mb: 3 }}>
|
||
{feature.icon}
|
||
</Box>
|
||
|
||
<Typography variant="h5" sx={{ fontWeight: 600, mb: 2 }}>
|
||
{feature.title}
|
||
</Typography>
|
||
|
||
<Typography variant="body1" color="text.secondary">
|
||
{feature.description}
|
||
</Typography>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</Grid>
|
||
))}
|
||
</Grid>
|
||
</motion.div>
|
||
|
||
{/* Call to Action */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.6 }}
|
||
>
|
||
<Card
|
||
sx={{
|
||
mt: 8,
|
||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||
color: 'white',
|
||
position: 'relative',
|
||
overflow: 'hidden'
|
||
}}
|
||
>
|
||
<CardContent sx={{ p: 6, textAlign: 'center', position: 'relative', zIndex: 1 }}>
|
||
<Typography variant="h4" sx={{ fontWeight: 700, mb: 2 }}>
|
||
Bereit für das Abenteuer? 🎯
|
||
</Typography>
|
||
|
||
<Typography variant="h6" sx={{ mb: 4, opacity: 0.9 }}>
|
||
Starte noch heute und verwandle dein Zuhause in eine Spielwelt voller Motivation!
|
||
</Typography>
|
||
|
||
<Box sx={{ display: 'flex', gap: 2, justifyContent: 'center', flexWrap: 'wrap' }}>
|
||
<Button
|
||
variant="contained"
|
||
size="large"
|
||
onClick={() => navigate('/register')}
|
||
sx={{
|
||
bgcolor: 'white',
|
||
color: 'primary.main',
|
||
py: 2,
|
||
px: 4,
|
||
fontSize: '1.1rem',
|
||
fontWeight: 600,
|
||
borderRadius: 3,
|
||
'&:hover': {
|
||
bgcolor: 'grey.100'
|
||
}
|
||
}}
|
||
>
|
||
Familien-Held werden! 🚀
|
||
</Button>
|
||
|
||
<Button
|
||
variant="outlined"
|
||
size="large"
|
||
startIcon={<ChildCare />}
|
||
onClick={() => navigate('/child-login')}
|
||
sx={{
|
||
borderColor: 'white',
|
||
color: 'white',
|
||
py: 2,
|
||
px: 4,
|
||
fontSize: '1.1rem',
|
||
fontWeight: 600,
|
||
borderRadius: 3,
|
||
'&:hover': {
|
||
borderColor: 'white',
|
||
bgcolor: 'rgba(255, 255, 255, 0.1)'
|
||
}
|
||
}}
|
||
>
|
||
Ich bin ein Kind! 👦
|
||
</Button>
|
||
</Box>
|
||
</CardContent>
|
||
|
||
{/* Dekorative Elemente */}
|
||
<Box
|
||
sx={{
|
||
position: 'absolute',
|
||
top: -20,
|
||
right: -20,
|
||
width: 100,
|
||
height: 100,
|
||
borderRadius: '50%',
|
||
bgcolor: 'rgba(255, 255, 255, 0.1)'
|
||
}}
|
||
/>
|
||
<Box
|
||
sx={{
|
||
position: 'absolute',
|
||
bottom: -30,
|
||
left: -30,
|
||
width: 80,
|
||
height: 80,
|
||
borderRadius: '50%',
|
||
bgcolor: 'rgba(255, 255, 255, 0.05)'
|
||
}}
|
||
/>
|
||
</Card>
|
||
</motion.div>
|
||
</Container>
|
||
|
||
{/* Footer */}
|
||
<Box
|
||
sx={{
|
||
bgcolor: 'grey.100',
|
||
py: 4,
|
||
mt: 8,
|
||
textAlign: 'center'
|
||
}}
|
||
>
|
||
<Container maxWidth="lg">
|
||
<Typography variant="body1" color="text.secondary">
|
||
© 2024 Familien-Held - Verwandle Aufgaben in Abenteuer! 🏆
|
||
</Typography>
|
||
<Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
|
||
Entwickelt mit ❤️ für Familien
|
||
</Typography>
|
||
</Container>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default LandingPage; |