Implement complete multi-language support with Romanian/English
- Added next-intl for internationalization with Romanian as default locale - Restructured app directory with [locale] routing (/ro, /en) - Created comprehensive translation files for both languages - Fixed Next.js 15 async params compatibility in layout components - Updated all components to use proper i18n hooks and translations - Configured middleware for locale routing and fallbacks - Fixed FloatingChat component translation array handling - Restored complete home page with internationalized content - Fixed Material-UI Slide component prop error (mountOnExit → unmountOnExit) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
andupetcu
218
app/[locale]/page.tsx
Normal file
218
app/[locale]/page.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
'use client'
|
||||
import {
|
||||
Container,
|
||||
Grid,
|
||||
Card,
|
||||
CardContent,
|
||||
Typography,
|
||||
Box,
|
||||
Button,
|
||||
Paper,
|
||||
useTheme,
|
||||
} from '@mui/material'
|
||||
import {
|
||||
MenuBook,
|
||||
Chat,
|
||||
Favorite as Prayer,
|
||||
Search,
|
||||
AutoStories,
|
||||
Favorite,
|
||||
} from '@mui/icons-material'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useTranslations, useLocale } from 'next-intl'
|
||||
|
||||
export default function Home() {
|
||||
const theme = useTheme()
|
||||
const router = useRouter()
|
||||
const t = useTranslations('home')
|
||||
const locale = useLocale()
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: t('features.bible.title'),
|
||||
description: t('features.bible.description'),
|
||||
icon: <MenuBook sx={{ fontSize: 40, color: 'primary.main' }} />,
|
||||
path: '/bible',
|
||||
color: theme.palette.primary.main,
|
||||
},
|
||||
{
|
||||
title: t('features.chat.title'),
|
||||
description: t('features.chat.description'),
|
||||
icon: <Chat sx={{ fontSize: 40, color: 'secondary.main' }} />,
|
||||
path: '/chat',
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
{
|
||||
title: t('features.prayers.title'),
|
||||
description: t('features.prayers.description'),
|
||||
icon: <Prayer sx={{ fontSize: 40, color: 'success.main' }} />,
|
||||
path: '/prayers',
|
||||
color: theme.palette.success.main,
|
||||
},
|
||||
{
|
||||
title: t('features.search.title'),
|
||||
description: t('features.search.description'),
|
||||
icon: <Search sx={{ fontSize: 40, color: 'info.main' }} />,
|
||||
path: '/search',
|
||||
color: theme.palette.info.main,
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Hero Section */}
|
||||
<Box
|
||||
sx={{
|
||||
background: 'linear-gradient(135deg, #2C5F6B 0%, #5A8A96 100%)',
|
||||
color: 'white',
|
||||
py: 8,
|
||||
mb: 6,
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg">
|
||||
<Grid container spacing={4} alignItems="center">
|
||||
<Grid item xs={12} md={8}>
|
||||
<Typography variant="h2" component="h1" gutterBottom>
|
||||
{t('hero.title')}
|
||||
</Typography>
|
||||
<Typography variant="h5" component="h2" sx={{ mb: 3, opacity: 0.9 }}>
|
||||
{t('hero.subtitle')}
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ mb: 4, opacity: 0.8, maxWidth: 600 }}>
|
||||
{t('hero.description')}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
sx={{
|
||||
bgcolor: 'secondary.main',
|
||||
'&:hover': { bgcolor: 'secondary.dark' },
|
||||
}}
|
||||
startIcon={<AutoStories />}
|
||||
onClick={() => router.push(`/${locale}/bible`)}
|
||||
>
|
||||
{t('hero.cta.readBible')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="large"
|
||||
sx={{
|
||||
borderColor: 'white',
|
||||
color: 'white',
|
||||
'&:hover': {
|
||||
borderColor: 'white',
|
||||
bgcolor: 'rgba(255,255,255,0.1)',
|
||||
},
|
||||
}}
|
||||
startIcon={<Chat />}
|
||||
onClick={() => router.push(`/${locale}/chat`)}
|
||||
>
|
||||
{t('hero.cta.askAI')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Box sx={{ textAlign: 'center' }}>
|
||||
<MenuBook sx={{ fontSize: 120, opacity: 0.8 }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* Features Section */}
|
||||
<Container maxWidth="lg" sx={{ mb: 8 }}>
|
||||
<Typography variant="h3" component="h2" textAlign="center" sx={{ mb: 2 }}>
|
||||
{t('features.title')}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body1"
|
||||
textAlign="center"
|
||||
color="text.secondary"
|
||||
sx={{ mb: 6, maxWidth: 600, mx: 'auto' }}
|
||||
>
|
||||
{t('features.subtitle')}
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={4}>
|
||||
{features.map((feature, index) => (
|
||||
<Grid item xs={12} sm={6} md={3} key={index}>
|
||||
<Card
|
||||
sx={{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
transform: 'translateY(-4px)',
|
||||
boxShadow: 4,
|
||||
},
|
||||
}}
|
||||
onClick={() => router.push(`/${locale}${feature.path}`)}
|
||||
>
|
||||
<CardContent sx={{ flexGrow: 1, textAlign: 'center', p: 3 }}>
|
||||
<Box sx={{ mb: 2 }}>
|
||||
{feature.icon}
|
||||
</Box>
|
||||
<Typography variant="h6" component="h3" gutterBottom>
|
||||
{feature.title}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{feature.description}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
|
||||
{/* Stats Section */}
|
||||
<Paper sx={{ bgcolor: 'background.paper', py: 6, mb: 8 }}>
|
||||
<Container maxWidth="lg">
|
||||
<Grid container spacing={4} textAlign="center">
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Typography variant="h3" color="primary.main" gutterBottom>
|
||||
66
|
||||
</Typography>
|
||||
<Typography variant="h6">{t('stats.books')}</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Typography variant="h3" color="secondary.main" gutterBottom>
|
||||
31,000+
|
||||
</Typography>
|
||||
<Typography variant="h6">{t('stats.verses')}</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<Typography variant="h3" color="success.main" gutterBottom>
|
||||
24/7
|
||||
</Typography>
|
||||
<Typography variant="h6">{t('stats.aiAvailable')}</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Paper>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Container maxWidth="sm" sx={{ textAlign: 'center', mb: 8 }}>
|
||||
<Typography variant="h4" component="h2" gutterBottom>
|
||||
{t('cta.title')}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
|
||||
{t('cta.description')}
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
startIcon={<Favorite />}
|
||||
sx={{ mr: 2 }}
|
||||
onClick={() => router.push(`/${locale}/bible`)}
|
||||
>
|
||||
{t('cta.startNow')}
|
||||
</Button>
|
||||
</Container>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user