72d39e74c8
Features implemented: 1. Enhanced Hero Section with live user counter (simulated) 2. Interactive Demo Section with chat preview 3. Daily Verse Section with actions (discuss, save, share) 4. How It Works 3-step process visualization 5. Community Prayer Wall with live prayer examples 6. Testimonials Section with 4 realistic testimonials 7. FAQ Section with 6 common questions and expandable answers 8. Enhanced Footer with newsletter signup, quick links, legal, and social Additional improvements: - Added live counter showing active users studying - Interactive demo showing AI chat conversation - Newsletter subscription form - Social media links and language indicators - Comprehensive translations in English and Romanian - Mobile-responsive design with flexbox layouts - Modern Material-UI components with animations - Enhanced visual hierarchy and user engagement
644 lines
26 KiB
TypeScript
644 lines
26 KiB
TypeScript
'use client'
|
|
import {
|
|
Container,
|
|
Card,
|
|
CardContent,
|
|
Typography,
|
|
Box,
|
|
Button,
|
|
Paper,
|
|
useTheme,
|
|
Accordion,
|
|
AccordionSummary,
|
|
AccordionDetails,
|
|
TextField,
|
|
Chip,
|
|
Avatar,
|
|
Divider,
|
|
IconButton,
|
|
Tooltip,
|
|
} from '@mui/material'
|
|
import {
|
|
MenuBook,
|
|
Chat,
|
|
Favorite as Prayer,
|
|
Search,
|
|
AutoStories,
|
|
Favorite,
|
|
ExpandMore,
|
|
PlayArrow,
|
|
Share,
|
|
Bookmark,
|
|
TrendingUp,
|
|
QuestionAnswer,
|
|
Facebook,
|
|
Twitter,
|
|
Instagram,
|
|
YouTube,
|
|
} from '@mui/icons-material'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useTranslations, useLocale } from 'next-intl'
|
|
import { useState, useEffect } from 'react'
|
|
|
|
export default function Home() {
|
|
const theme = useTheme()
|
|
const router = useRouter()
|
|
const t = useTranslations('home')
|
|
const locale = useLocale()
|
|
const [userCount, setUserCount] = useState(2847)
|
|
const [expandedFaq, setExpandedFaq] = useState<string | false>(false)
|
|
const [email, setEmail] = useState('')
|
|
|
|
// Simulate live user counter
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setUserCount(prev => prev + Math.floor(Math.random() * 3))
|
|
}, 5000)
|
|
return () => clearInterval(interval)
|
|
}, [])
|
|
|
|
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: '/__open-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, #009688 0%, #00796B 100%)',
|
|
color: 'white',
|
|
py: 8,
|
|
mb: 6,
|
|
}}
|
|
>
|
|
<Container maxWidth="lg">
|
|
<Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
<Box sx={{ flex: { xs: '1 1 100%', md: '1 1 60%' } }}>
|
|
<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: 3, opacity: 0.8, maxWidth: 600 }}>
|
|
{t('hero.description')}
|
|
</Typography>
|
|
<Box sx={{ mb: 4, p: 2, bgcolor: 'rgba(255,255,255,0.1)', borderRadius: 2 }}>
|
|
<Typography variant="body2" sx={{ opacity: 0.9 }}>
|
|
{t('hero.liveCounter').replace('{count}', userCount.toLocaleString())}
|
|
</Typography>
|
|
</Box>
|
|
<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={() => {
|
|
window.dispatchEvent(new CustomEvent('floating-chat:open', { detail: { fullscreen: true } }))
|
|
}}
|
|
>
|
|
{t('hero.cta.askAI')}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{ flex: { xs: '1 1 100%', md: '1 1 40%' } }}>
|
|
<Box sx={{ textAlign: 'center' }}>
|
|
<MenuBook sx={{ fontSize: 120, opacity: 0.8 }} />
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
|
|
{/* Interactive Demo Section */}
|
|
<Container maxWidth="lg" sx={{ mb: 8 }}>
|
|
<Typography variant="h3" component="h2" textAlign="center" sx={{ mb: 2 }}>
|
|
{t('demo.title')}
|
|
</Typography>
|
|
<Typography variant="body1" textAlign="center" color="text.secondary" sx={{ mb: 6 }}>
|
|
{t('demo.subtitle')}
|
|
</Typography>
|
|
|
|
<Paper elevation={3} sx={{ p: 4, maxWidth: 600, mx: 'auto', borderRadius: 3 }}>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, minHeight: 200 }}>
|
|
<Box sx={{ display: 'flex', gap: 2, alignItems: 'flex-start' }}>
|
|
<Avatar sx={{ bgcolor: 'primary.main' }}>
|
|
<Chat />
|
|
</Avatar>
|
|
<Paper sx={{ p: 2, bgcolor: 'grey.100', borderRadius: 2, flex: 1 }}>
|
|
<Typography variant="body2">{t('demo.userQuestion')}</Typography>
|
|
</Paper>
|
|
</Box>
|
|
<Box sx={{ display: 'flex', gap: 2, alignItems: 'flex-start', justifyContent: 'flex-end' }}>
|
|
<Paper sx={{ p: 2, bgcolor: 'primary.light', color: 'white', borderRadius: 2, flex: 1, maxWidth: '80%' }}>
|
|
<Typography variant="body2">{t('demo.aiResponse')}</Typography>
|
|
</Paper>
|
|
<Avatar sx={{ bgcolor: 'secondary.main' }}>
|
|
<AutoStories />
|
|
</Avatar>
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{ textAlign: 'center', mt: 3 }}>
|
|
<Button
|
|
variant="contained"
|
|
size="large"
|
|
startIcon={<PlayArrow />}
|
|
onClick={() => window.dispatchEvent(new CustomEvent('floating-chat:open', { detail: { fullscreen: true } }))}
|
|
>
|
|
{t('demo.tryButton')}
|
|
</Button>
|
|
</Box>
|
|
</Paper>
|
|
</Container>
|
|
|
|
{/* Daily Verse Section */}
|
|
<Paper sx={{ bgcolor: 'primary.light', color: 'white', py: 6, mb: 8 }}>
|
|
<Container maxWidth="md">
|
|
<Typography variant="h4" component="h2" textAlign="center" sx={{ mb: 1 }}>
|
|
{t('dailyVerse.title')}
|
|
</Typography>
|
|
<Typography variant="body2" textAlign="center" sx={{ mb: 4, opacity: 0.9 }}>
|
|
{t('dailyVerse.date')}
|
|
</Typography>
|
|
|
|
<Paper sx={{ p: 4, textAlign: 'center', bgcolor: 'rgba(255,255,255,0.95)', color: 'text.primary', borderRadius: 3 }}>
|
|
<Typography variant="h5" sx={{ mb: 3, fontStyle: 'italic', lineHeight: 1.6 }}>
|
|
{t('dailyVerse.verse')}
|
|
</Typography>
|
|
<Typography variant="h6" color="primary" sx={{ fontWeight: 600 }}>
|
|
{t('dailyVerse.reference')}
|
|
</Typography>
|
|
|
|
<Box sx={{ display: 'flex', gap: 1, justifyContent: 'center', mt: 3 }}>
|
|
<Tooltip title={t('dailyVerse.discuss')}>
|
|
<IconButton color="primary">
|
|
<QuestionAnswer />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title={t('dailyVerse.save')}>
|
|
<IconButton color="primary">
|
|
<Bookmark />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title={t('dailyVerse.share')}>
|
|
<IconButton color="primary">
|
|
<Share />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
</Paper>
|
|
|
|
<Box sx={{ textAlign: 'center', mt: 4 }}>
|
|
<Typography variant="body2" sx={{ mb: 2, opacity: 0.9 }}>
|
|
{t('dailyVerse.tomorrow')}
|
|
</Typography>
|
|
<Button variant="outlined" sx={{ color: 'white', borderColor: 'white' }}>
|
|
{t('dailyVerse.subscribe')}
|
|
</Button>
|
|
</Box>
|
|
</Container>
|
|
</Paper>
|
|
|
|
{/* How It Works Section */}
|
|
<Container maxWidth="lg" sx={{ mb: 8 }}>
|
|
<Typography variant="h3" component="h2" textAlign="center" sx={{ mb: 2 }}>
|
|
{t('howItWorks.title')}
|
|
</Typography>
|
|
<Typography variant="body1" textAlign="center" color="text.secondary" sx={{ mb: 6 }}>
|
|
{t('howItWorks.subtitle')}
|
|
</Typography>
|
|
|
|
<Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'center' }}>
|
|
{[
|
|
{ icon: <Chat sx={{ fontSize: 60 }} />, title: t('howItWorks.step1.title'), description: t('howItWorks.step1.description') },
|
|
{ icon: <MenuBook sx={{ fontSize: 60 }} />, title: t('howItWorks.step2.title'), description: t('howItWorks.step2.description') },
|
|
{ icon: <TrendingUp sx={{ fontSize: 60 }} />, title: t('howItWorks.step3.title'), description: t('howItWorks.step3.description') },
|
|
].map((step, index) => (
|
|
<Box key={index} sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(33.33% - 24px)' }, textAlign: 'center', maxWidth: 300 }}>
|
|
<Box sx={{ mb: 3, color: 'primary.main' }}>
|
|
{step.icon}
|
|
</Box>
|
|
<Typography variant="h5" sx={{ mb: 2, fontWeight: 600 }}>
|
|
{step.title}
|
|
</Typography>
|
|
<Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
|
|
{step.description}
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: 40, height: 40, borderRadius: '50%', bgcolor: 'primary.main', color: 'white', mx: 'auto', fontSize: '1.2rem', fontWeight: 600 }}>
|
|
{index + 1}
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
|
|
<Box sx={{ textAlign: 'center', mt: 6 }}>
|
|
<Button variant="contained" size="large" onClick={() => router.push(`/${locale}/bible`)}>
|
|
{t('howItWorks.getStarted')}
|
|
</Button>
|
|
</Box>
|
|
</Container>
|
|
|
|
{/* Community Prayer Wall */}
|
|
<Paper sx={{ bgcolor: 'background.paper', py: 6, mb: 8 }}>
|
|
<Container maxWidth="lg">
|
|
<Typography variant="h3" component="h2" textAlign="center" sx={{ mb: 6 }}>
|
|
{t('prayerWall.title')}
|
|
</Typography>
|
|
|
|
<Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap', justifyContent: 'center' }}>
|
|
{[
|
|
{ text: t('prayerWall.prayer1'), time: t('prayerWall.time1'), count: 32 },
|
|
{ text: t('prayerWall.prayer2'), time: t('prayerWall.time2'), count: 47 },
|
|
{ text: t('prayerWall.prayer3'), time: t('prayerWall.time3'), count: 89, type: 'celebration' },
|
|
].map((prayer, index) => (
|
|
<Card key={index} sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(33.33% - 16px)' }, maxWidth: 350 }}>
|
|
<CardContent>
|
|
<Typography variant="body1" sx={{ mb: 2 }}>
|
|
{prayer.text}
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<Typography variant="caption" color="text.secondary">
|
|
{prayer.time}
|
|
</Typography>
|
|
<Chip
|
|
label={prayer.type === 'celebration' ? `❤️ ${prayer.count} ${t('prayerWall.celebrating')}` : `🙏 ${prayer.count} ${t('prayerWall.praying')}`}
|
|
size="small"
|
|
color={prayer.type === 'celebration' ? 'success' : 'primary'}
|
|
variant="outlined"
|
|
/>
|
|
</Box>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</Box>
|
|
|
|
<Box sx={{ textAlign: 'center', mt: 4, display: 'flex', gap: 2, justifyContent: 'center', flexWrap: 'wrap' }}>
|
|
<Button variant="contained" onClick={() => router.push(`/${locale}/prayers`)}>
|
|
{t('prayerWall.shareRequest')}
|
|
</Button>
|
|
<Button variant="outlined" onClick={() => router.push(`/${locale}/prayers`)}>
|
|
{t('prayerWall.viewAll')}
|
|
</Button>
|
|
</Box>
|
|
</Container>
|
|
</Paper>
|
|
|
|
{/* 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>
|
|
|
|
<Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'center' }}>
|
|
{features.map((feature, index) => (
|
|
<Box key={index} sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 16px)' }, display: 'flex', justifyContent: 'center' }}>
|
|
<Card
|
|
sx={{
|
|
height: '100%',
|
|
width: '100%',
|
|
maxWidth: 400,
|
|
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={() => {
|
|
if (feature.path === '/__open-chat__') {
|
|
window.dispatchEvent(new CustomEvent('floating-chat:open', { detail: { fullscreen: true } }))
|
|
} else {
|
|
router.push(`/${locale}${feature.path}`)
|
|
}
|
|
}}
|
|
>
|
|
<CardContent sx={{
|
|
flexGrow: 1,
|
|
textAlign: 'center',
|
|
p: 4,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
height: 280,
|
|
width: '100%'
|
|
}}>
|
|
<Box>
|
|
<Box sx={{ mb: 2 }}>
|
|
{feature.icon}
|
|
</Box>
|
|
<Typography variant="h5" component="h3" sx={{ fontWeight: 600, mb: 2 }}>
|
|
{feature.title}
|
|
</Typography>
|
|
<Typography
|
|
variant="body1"
|
|
color="text.secondary"
|
|
sx={{
|
|
lineHeight: 1.6,
|
|
overflow: 'hidden',
|
|
display: '-webkit-box',
|
|
WebkitLineClamp: 3,
|
|
WebkitBoxOrient: 'vertical',
|
|
}}
|
|
>
|
|
{feature.description}
|
|
</Typography>
|
|
</Box>
|
|
</CardContent>
|
|
</Card>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Container>
|
|
|
|
{/* Testimonials Section */}
|
|
<Container maxWidth="lg" sx={{ mb: 8 }}>
|
|
<Typography variant="h3" component="h2" textAlign="center" sx={{ mb: 2 }}>
|
|
{t('testimonials.title')}
|
|
</Typography>
|
|
<Typography variant="body1" textAlign="center" color="text.secondary" sx={{ mb: 6 }}>
|
|
{t('testimonials.subtitle')}
|
|
</Typography>
|
|
|
|
<Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'center' }}>
|
|
{[
|
|
{ name: t('testimonials.testimonial1.name'), role: t('testimonials.testimonial1.role'), text: t('testimonials.testimonial1.text'), avatar: '👩' },
|
|
{ name: t('testimonials.testimonial2.name'), role: t('testimonials.testimonial2.role'), text: t('testimonials.testimonial2.text'), avatar: '👨💼' },
|
|
{ name: t('testimonials.testimonial3.name'), role: t('testimonials.testimonial3.role'), text: t('testimonials.testimonial3.text'), avatar: '👨' },
|
|
{ name: t('testimonials.testimonial4.name'), role: t('testimonials.testimonial4.role'), text: t('testimonials.testimonial4.text'), avatar: '👩🏫' },
|
|
].map((testimonial, index) => (
|
|
<Card key={index} sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 16px)' }, maxWidth: 500 }}>
|
|
<CardContent sx={{ p: 3 }}>
|
|
<Typography variant="body1" sx={{ mb: 3, fontStyle: 'italic', lineHeight: 1.6 }}>
|
|
"{testimonial.text}"
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
|
<Avatar sx={{ bgcolor: 'primary.main' }}>
|
|
{testimonial.avatar}
|
|
</Avatar>
|
|
<Box>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
|
|
{testimonial.name}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary">
|
|
{testimonial.role}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</Box>
|
|
|
|
<Box sx={{ textAlign: 'center', mt: 4 }}>
|
|
<Button variant="outlined">
|
|
{t('testimonials.shareStory')}
|
|
</Button>
|
|
</Box>
|
|
</Container>
|
|
|
|
{/* FAQ Section */}
|
|
<Container maxWidth="md" sx={{ mb: 8 }}>
|
|
<Typography variant="h3" component="h2" textAlign="center" sx={{ mb: 6 }}>
|
|
{t('faq.title')}
|
|
</Typography>
|
|
|
|
<Box>
|
|
{[
|
|
{ id: 'accurate', question: t('faq.questions.accurate'), answer: t('faq.answers.accurate') },
|
|
{ id: 'free', question: t('faq.questions.free'), answer: t('faq.answers.free') },
|
|
{ id: 'languages', question: t('faq.questions.languages'), answer: t('faq.answers.languages') },
|
|
{ id: 'offline', question: t('faq.questions.offline'), answer: t('faq.answers.offline') },
|
|
{ id: 'privacy', question: t('faq.questions.privacy'), answer: t('faq.answers.privacy') },
|
|
{ id: 'versions', question: t('faq.questions.versions'), answer: t('faq.answers.versions') },
|
|
].map((faq) => (
|
|
<Accordion
|
|
key={faq.id}
|
|
expanded={expandedFaq === faq.id}
|
|
onChange={(_, isExpanded) => setExpandedFaq(isExpanded ? faq.id : false)}
|
|
sx={{ mb: 1 }}
|
|
>
|
|
<AccordionSummary expandIcon={<ExpandMore />}>
|
|
<Typography variant="h6">{faq.question}</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Typography variant="body1" color="text.secondary">
|
|
{faq.answer}
|
|
</Typography>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
))}
|
|
</Box>
|
|
|
|
<Box sx={{ textAlign: 'center', mt: 4, display: 'flex', gap: 2, justifyContent: 'center', flexWrap: 'wrap' }}>
|
|
<Button variant="outlined">
|
|
{t('faq.contactSupport')}
|
|
</Button>
|
|
<Button variant="text">
|
|
{t('faq.viewAllFaqs')}
|
|
</Button>
|
|
</Box>
|
|
</Container>
|
|
|
|
{/* Stats Section */}
|
|
<Paper sx={{ bgcolor: 'background.paper', py: 6, mb: 8 }}>
|
|
<Container maxWidth="lg">
|
|
<Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', textAlign: 'center', justifyContent: 'center' }}>
|
|
<Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
|
|
<Typography variant="h3" color="primary.main" gutterBottom>
|
|
66
|
|
</Typography>
|
|
<Typography variant="h6">{t('stats.books')}</Typography>
|
|
</Box>
|
|
<Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
|
|
<Typography variant="h3" color="secondary.main" gutterBottom>
|
|
31,000+
|
|
</Typography>
|
|
<Typography variant="h6">{t('stats.verses')}</Typography>
|
|
</Box>
|
|
<Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
|
|
<Typography variant="h3" color="success.main" gutterBottom>
|
|
24/7
|
|
</Typography>
|
|
<Typography variant="h6">{t('stats.aiAvailable')}</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
</Paper>
|
|
|
|
{/* Newsletter CTA Section */}
|
|
<Paper sx={{ bgcolor: 'grey.50', py: 6, mb: 8 }}>
|
|
<Container maxWidth="md" sx={{ textAlign: 'center' }}>
|
|
<Typography variant="h4" component="h2" gutterBottom>
|
|
{t('newsletter.title')}
|
|
</Typography>
|
|
<Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
|
|
{t('newsletter.description')}
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', gap: 2, maxWidth: 400, mx: 'auto', flexWrap: 'wrap' }}>
|
|
<TextField
|
|
fullWidth
|
|
placeholder={t('newsletter.placeholder')}
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
sx={{ flex: 1, minWidth: 250 }}
|
|
/>
|
|
<Button variant="contained" size="large">
|
|
{t('newsletter.subscribe')}
|
|
</Button>
|
|
</Box>
|
|
</Container>
|
|
</Paper>
|
|
|
|
{/* Enhanced Footer */}
|
|
<Paper component="footer" sx={{ bgcolor: 'grey.900', color: 'white', py: 6 }}>
|
|
<Container maxWidth="lg">
|
|
<Box sx={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'space-between', mb: 4 }}>
|
|
{/* Brand */}
|
|
<Box sx={{ flex: { xs: '1 1 100%', md: '1 1 auto' } }}>
|
|
<Typography variant="h5" sx={{ mb: 2, fontWeight: 600 }}>
|
|
{t('footer.brand')}
|
|
</Typography>
|
|
<Typography variant="body2" color="grey.400" sx={{ maxWidth: 300 }}>
|
|
{t('footer.description')}
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* Quick Links */}
|
|
<Box sx={{ flex: { xs: '1 1 50%', md: '1 1 auto' } }}>
|
|
<Typography variant="h6" sx={{ mb: 2 }}>
|
|
{t('footer.quickLinks.title')}
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
|
<Button color="inherit" sx={{ justifyContent: 'flex-start', p: 0 }}>
|
|
{t('footer.quickLinks.about')}
|
|
</Button>
|
|
<Button color="inherit" sx={{ justifyContent: 'flex-start', p: 0 }}>
|
|
{t('footer.quickLinks.blog')}
|
|
</Button>
|
|
<Button color="inherit" sx={{ justifyContent: 'flex-start', p: 0 }}>
|
|
{t('footer.quickLinks.support')}
|
|
</Button>
|
|
<Button color="inherit" sx={{ justifyContent: 'flex-start', p: 0 }}>
|
|
{t('footer.quickLinks.api')}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Legal */}
|
|
<Box sx={{ flex: { xs: '1 1 50%', md: '1 1 auto' } }}>
|
|
<Typography variant="h6" sx={{ mb: 2 }}>
|
|
{t('footer.legal.title')}
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
|
<Button color="inherit" sx={{ justifyContent: 'flex-start', p: 0 }}>
|
|
{t('footer.legal.terms')}
|
|
</Button>
|
|
<Button color="inherit" sx={{ justifyContent: 'flex-start', p: 0 }}>
|
|
{t('footer.legal.privacy')}
|
|
</Button>
|
|
<Button color="inherit" sx={{ justifyContent: 'flex-start', p: 0 }}>
|
|
{t('footer.legal.cookies')}
|
|
</Button>
|
|
<Button color="inherit" sx={{ justifyContent: 'flex-start', p: 0 }}>
|
|
{t('footer.legal.gdpr')}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Social */}
|
|
<Box sx={{ flex: { xs: '1 1 100%', md: '1 1 auto' } }}>
|
|
<Typography variant="h6" sx={{ mb: 2 }}>
|
|
{t('footer.social.title')}
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', gap: 1 }}>
|
|
<IconButton color="inherit" size="small">
|
|
<Facebook />
|
|
</IconButton>
|
|
<IconButton color="inherit" size="small">
|
|
<Twitter />
|
|
</IconButton>
|
|
<IconButton color="inherit" size="small">
|
|
<Instagram />
|
|
</IconButton>
|
|
<IconButton color="inherit" size="small">
|
|
<YouTube />
|
|
</IconButton>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Divider sx={{ bgcolor: 'grey.700', mb: 3 }} />
|
|
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 2 }}>
|
|
<Typography variant="body2" color="grey.400">
|
|
{t('footer.copyright')}
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
|
|
<Chip label="🇷🇴 Română" size="small" variant="outlined" sx={{ color: 'white', borderColor: 'grey.600' }} />
|
|
<Chip label="🇺🇸 English" size="small" variant="outlined" sx={{ color: 'white', borderColor: 'grey.600' }} />
|
|
<Chip label="+20 more" size="small" variant="outlined" sx={{ color: 'white', borderColor: 'grey.600' }} />
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
</Paper>
|
|
</Box>
|
|
)
|
|
} |