Andrei
5b4389c84a
- Change hero section from pt: {xs: 12, md: 20}, pb: 0 to py: 6.25
- py: 6.25 equals 50px (6.25 × 8px)
- Applies 50px padding to both top and bottom of hero section
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
657 lines
19 KiB
TypeScript
657 lines
19 KiB
TypeScript
'use client'
|
|
import {
|
|
Container,
|
|
Typography,
|
|
Box,
|
|
Button,
|
|
Paper,
|
|
useTheme,
|
|
Divider,
|
|
Card,
|
|
CardContent,
|
|
List,
|
|
ListItem,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
} from '@mui/material'
|
|
import {
|
|
MenuBook,
|
|
Chat,
|
|
Favorite,
|
|
Search,
|
|
Language,
|
|
CloudOff,
|
|
Security,
|
|
AutoStories,
|
|
Public,
|
|
VolunteerActivism,
|
|
CheckCircle,
|
|
} from '@mui/icons-material'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useLocale } from 'next-intl'
|
|
|
|
export default function Home() {
|
|
const theme = useTheme()
|
|
const router = useRouter()
|
|
const locale = useLocale()
|
|
|
|
const features = [
|
|
{
|
|
icon: <Public sx={{ fontSize: 48 }} />,
|
|
title: 'A Global Bible Library',
|
|
description: '1,200+ versions, from ancient Hebrew to modern translations',
|
|
},
|
|
{
|
|
icon: <Language sx={{ fontSize: 48 }} />,
|
|
title: 'Multilingual Access',
|
|
description: '7 languages today, 40+ tomorrow',
|
|
},
|
|
{
|
|
icon: <Favorite sx={{ fontSize: 48 }} />,
|
|
title: 'A Prayer Wall Without Borders',
|
|
description: 'Believers praying for one another in real time',
|
|
},
|
|
{
|
|
icon: <Chat sx={{ fontSize: 48 }} />,
|
|
title: 'AI Bible Chat',
|
|
description: 'Answers grounded in Scripture, not opinion',
|
|
},
|
|
{
|
|
icon: <Security sx={{ fontSize: 48 }} />,
|
|
title: 'Complete Privacy',
|
|
description: 'No ads, no tracking, no data sale — ever',
|
|
},
|
|
{
|
|
icon: <CloudOff sx={{ fontSize: 48 }} />,
|
|
title: 'Offline Access',
|
|
description: 'Because the Word should reach even where the internet cannot',
|
|
},
|
|
]
|
|
|
|
return (
|
|
<Box>
|
|
{/* Hero Section */}
|
|
<Box
|
|
sx={{
|
|
background: 'linear-gradient(135deg, #009688 0%, #00796B 100%)',
|
|
color: 'white',
|
|
py: 6.25,
|
|
textAlign: 'center',
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<Container maxWidth="md">
|
|
<Typography
|
|
variant="h1"
|
|
sx={{
|
|
fontSize: { xs: '2.5rem', sm: '3.5rem', md: '4.5rem' },
|
|
fontWeight: 700,
|
|
mb: 3,
|
|
letterSpacing: '-0.02em',
|
|
}}
|
|
>
|
|
Biblical Guide
|
|
</Typography>
|
|
<Typography
|
|
variant="h4"
|
|
sx={{
|
|
fontSize: { xs: '1.25rem', sm: '1.75rem', md: '2rem' },
|
|
fontWeight: 400,
|
|
mb: 6,
|
|
opacity: 0.95,
|
|
letterSpacing: '-0.01em',
|
|
}}
|
|
>
|
|
Every Scripture. Every Language. Forever Free.
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', gap: 2, justifyContent: 'center', flexWrap: 'wrap' }}>
|
|
<Button
|
|
variant="contained"
|
|
size="large"
|
|
sx={{
|
|
bgcolor: 'white',
|
|
color: 'primary.main',
|
|
px: 4,
|
|
py: 1.5,
|
|
fontSize: '1.1rem',
|
|
fontWeight: 600,
|
|
'&:hover': { bgcolor: 'grey.100' },
|
|
textTransform: 'none',
|
|
}}
|
|
startIcon={<AutoStories />}
|
|
onClick={() => router.push(`/${locale}/bible`)}
|
|
>
|
|
Read the Bible
|
|
</Button>
|
|
<Button
|
|
variant="outlined"
|
|
size="large"
|
|
sx={{
|
|
borderColor: 'white',
|
|
color: 'white',
|
|
px: 4,
|
|
py: 1.5,
|
|
fontSize: '1.1rem',
|
|
fontWeight: 600,
|
|
'&:hover': {
|
|
borderColor: 'white',
|
|
bgcolor: 'rgba(255,255,255,0.1)',
|
|
},
|
|
textTransform: 'none',
|
|
}}
|
|
onClick={() => window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })}
|
|
>
|
|
Support the Mission
|
|
</Button>
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
|
|
{/* Mission Section */}
|
|
<Container maxWidth="md" sx={{ pt: { xs: 10, md: 16 }, pb: 0, textAlign: 'center' }}>
|
|
<Typography
|
|
variant="h2"
|
|
sx={{
|
|
fontSize: { xs: '2rem', md: '3rem' },
|
|
fontWeight: 700,
|
|
mb: 4,
|
|
letterSpacing: '-0.02em',
|
|
}}
|
|
>
|
|
The Word Should Never Have a Price Tag
|
|
</Typography>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
fontSize: { xs: '1.1rem', md: '1.5rem' },
|
|
fontWeight: 400,
|
|
lineHeight: 1.6,
|
|
color: 'text.secondary',
|
|
maxWidth: 700,
|
|
mx: 'auto',
|
|
}}
|
|
>
|
|
Most Bible apps today hide the Word of God behind ads, upgrades, or premium study tools.
|
|
</Typography>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
fontSize: { xs: '1.1rem', md: '1.5rem' },
|
|
fontWeight: 600,
|
|
lineHeight: 1.6,
|
|
mt: 3,
|
|
maxWidth: 700,
|
|
mx: 'auto',
|
|
}}
|
|
>
|
|
Biblical Guide is different.
|
|
</Typography>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
fontSize: { xs: '1.1rem', md: '1.5rem' },
|
|
fontWeight: 400,
|
|
lineHeight: 1.6,
|
|
mt: 2,
|
|
maxWidth: 700,
|
|
mx: 'auto',
|
|
}}
|
|
>
|
|
No subscriptions. No tracking. No paywalls.
|
|
</Typography>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
fontSize: { xs: '1.1rem', md: '1.5rem' },
|
|
fontWeight: 400,
|
|
lineHeight: 1.6,
|
|
mt: 2,
|
|
color: 'text.secondary',
|
|
maxWidth: 700,
|
|
mx: 'auto',
|
|
}}
|
|
>
|
|
Just Scripture — in every language, for every believer — free forever.
|
|
</Typography>
|
|
</Container>
|
|
|
|
<Divider sx={{ maxWidth: 200, mx: 'auto', borderColor: 'grey.300' }} />
|
|
|
|
{/* Donation Pitch Section */}
|
|
<Container maxWidth="md" sx={{ pt: { xs: 10, md: 16 }, pb: 0, textAlign: 'center' }}>
|
|
<Typography
|
|
variant="h2"
|
|
sx={{
|
|
fontSize: { xs: '2rem', md: '3rem' },
|
|
fontWeight: 700,
|
|
mb: 4,
|
|
letterSpacing: '-0.02em',
|
|
}}
|
|
>
|
|
Your Gift Keeps the Gospel Free
|
|
</Typography>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
fontSize: { xs: '1.1rem', md: '1.5rem' },
|
|
fontWeight: 400,
|
|
lineHeight: 1.8,
|
|
color: 'text.secondary',
|
|
mb: 5,
|
|
maxWidth: 700,
|
|
mx: 'auto',
|
|
}}
|
|
>
|
|
Every donation directly supports the servers, translations, and technology that make Biblical Guide possible.
|
|
</Typography>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
fontSize: { xs: '1.1rem', md: '1.5rem' },
|
|
fontWeight: 400,
|
|
lineHeight: 1.8,
|
|
color: 'text.secondary',
|
|
mb: 5,
|
|
maxWidth: 700,
|
|
mx: 'auto',
|
|
}}
|
|
>
|
|
When you give, you are not paying for access — you are keeping access open for millions who cannot afford to pay.
|
|
</Typography>
|
|
<Paper
|
|
elevation={0}
|
|
sx={{
|
|
bgcolor: 'primary.light',
|
|
color: 'white',
|
|
py: 4,
|
|
px: 3,
|
|
borderRadius: 3,
|
|
maxWidth: 600,
|
|
mx: 'auto',
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
fontSize: { xs: '1.1rem', md: '1.3rem' },
|
|
fontWeight: 500,
|
|
fontStyle: 'italic',
|
|
lineHeight: 1.6,
|
|
}}
|
|
>
|
|
Freely you have received; freely give.
|
|
</Typography>
|
|
<Typography variant="h6" sx={{ mt: 2, fontWeight: 600 }}>
|
|
— Matthew 10:8
|
|
</Typography>
|
|
</Paper>
|
|
</Container>
|
|
|
|
{/* Features Section */}
|
|
<Box sx={{ bgcolor: 'grey.50', pt: { xs: 10, md: 16 }, pb: 0 }}>
|
|
<Container maxWidth="lg">
|
|
<Typography
|
|
variant="h2"
|
|
sx={{
|
|
fontSize: { xs: '2rem', md: '3rem' },
|
|
fontWeight: 700,
|
|
mb: 3,
|
|
textAlign: 'center',
|
|
letterSpacing: '-0.02em',
|
|
}}
|
|
>
|
|
What Your Support Sustains
|
|
</Typography>
|
|
<Typography
|
|
variant="h6"
|
|
sx={{
|
|
textAlign: 'center',
|
|
color: 'text.secondary',
|
|
mb: 8,
|
|
maxWidth: 700,
|
|
mx: 'auto',
|
|
}}
|
|
>
|
|
Your donation keeps every verse, every prayer, every word — free to all.
|
|
</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(33.33% - 24px)' }, maxWidth: { xs: '100%', md: 400 } }}>
|
|
<Card
|
|
elevation={0}
|
|
sx={{
|
|
height: '100%',
|
|
textAlign: 'center',
|
|
bgcolor: 'white',
|
|
border: '1px solid',
|
|
borderColor: 'grey.200',
|
|
transition: 'transform 0.2s, box-shadow 0.2s',
|
|
'&:hover': {
|
|
transform: 'translateY(-4px)',
|
|
boxShadow: 2,
|
|
},
|
|
}}
|
|
>
|
|
<CardContent sx={{ p: 4 }}>
|
|
<Box sx={{ color: 'primary.main', mb: 2 }}>
|
|
{feature.icon}
|
|
</Box>
|
|
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>
|
|
{feature.title}
|
|
</Typography>
|
|
<Typography variant="body1" color="text.secondary" sx={{ lineHeight: 1.6 }}>
|
|
{feature.description}
|
|
</Typography>
|
|
</CardContent>
|
|
</Card>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
|
|
{/* Donation Options Section */}
|
|
<Container maxWidth="md" sx={{ pt: { xs: 10, md: 16 }, pb: 0, textAlign: 'center' }}>
|
|
<Typography
|
|
variant="h2"
|
|
sx={{
|
|
fontSize: { xs: '2rem', md: '3rem' },
|
|
fontWeight: 700,
|
|
mb: 6,
|
|
letterSpacing: '-0.02em',
|
|
}}
|
|
>
|
|
How You Can Support
|
|
</Typography>
|
|
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 500, mx: 'auto' }}>
|
|
<Button
|
|
variant="contained"
|
|
size="large"
|
|
sx={{
|
|
py: 2,
|
|
fontSize: '1.2rem',
|
|
fontWeight: 600,
|
|
textTransform: 'none',
|
|
bgcolor: 'primary.main',
|
|
'&:hover': { bgcolor: 'primary.dark' },
|
|
}}
|
|
startIcon={<span style={{ fontSize: '1.5rem' }}>💳</span>}
|
|
href="https://paypal.me/biblicalguide"
|
|
target="_blank"
|
|
>
|
|
Donate via PayPal
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outlined"
|
|
size="large"
|
|
sx={{
|
|
py: 2,
|
|
fontSize: '1.2rem',
|
|
fontWeight: 600,
|
|
textTransform: 'none',
|
|
borderColor: 'primary.main',
|
|
color: 'primary.main',
|
|
'&:hover': {
|
|
borderColor: 'primary.dark',
|
|
bgcolor: 'rgba(0, 150, 136, 0.04)',
|
|
},
|
|
}}
|
|
startIcon={<span style={{ fontSize: '1.5rem' }}>💰</span>}
|
|
onClick={() => router.push(`/${locale}/donate`)}
|
|
>
|
|
Donate by Card
|
|
</Button>
|
|
|
|
<Box sx={{ py: 2 }}>
|
|
<Typography variant="body1" color="text.secondary" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 1 }}>
|
|
<span style={{ fontSize: '1.5rem' }}>🎯</span>
|
|
<span>Support us on Kickstarter (coming soon)</span>
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Typography variant="body1" color="text.secondary" sx={{ mt: 6, fontSize: '1.1rem' }}>
|
|
Every contribution — big or small — helps keep Scripture open to everyone, everywhere.
|
|
</Typography>
|
|
</Container>
|
|
|
|
{/* Why It Matters Section */}
|
|
<Box sx={{ bgcolor: 'grey.900', color: 'white', pt: { xs: 10, md: 16 }, pb: 0 }}>
|
|
<Container maxWidth="md" sx={{ textAlign: 'center' }}>
|
|
<Typography
|
|
variant="h2"
|
|
sx={{
|
|
fontSize: { xs: '2rem', md: '3rem' },
|
|
fontWeight: 700,
|
|
mb: 6,
|
|
letterSpacing: '-0.02em',
|
|
}}
|
|
>
|
|
Why It Matters
|
|
</Typography>
|
|
|
|
<List sx={{ maxWidth: 700, mx: 'auto' }}>
|
|
<ListItem sx={{ py: 2, flexDirection: 'column', alignItems: 'flex-start' }}>
|
|
<Typography variant="h6" sx={{ fontSize: '1.2rem', mb: 1, lineHeight: 1.6 }}>
|
|
Each day, someone opens a Bible app and hits a paywall.
|
|
</Typography>
|
|
</ListItem>
|
|
<ListItem sx={{ py: 2, flexDirection: 'column', alignItems: 'flex-start' }}>
|
|
<Typography variant="h6" sx={{ fontSize: '1.2rem', mb: 1, lineHeight: 1.6 }}>
|
|
Each day, a believer loses connection and can't read the Word offline.
|
|
</Typography>
|
|
</ListItem>
|
|
<ListItem sx={{ py: 2, flexDirection: 'column', alignItems: 'flex-start' }}>
|
|
<Typography variant="h6" sx={{ fontSize: '1.2rem', mb: 1, lineHeight: 1.6 }}>
|
|
Each day, the Gospel becomes harder to reach for someone who needs it most.
|
|
</Typography>
|
|
</ListItem>
|
|
</List>
|
|
|
|
<Typography
|
|
variant="h4"
|
|
sx={{
|
|
fontSize: { xs: '1.5rem', md: '2rem' },
|
|
fontWeight: 700,
|
|
mt: 6,
|
|
mb: 3,
|
|
}}
|
|
>
|
|
Together, we can change that.
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
fontSize: { xs: '1.1rem', md: '1.3rem' },
|
|
fontWeight: 400,
|
|
lineHeight: 1.6,
|
|
opacity: 0.9,
|
|
}}
|
|
>
|
|
Your donation ensures that God's Word remains freely accessible — without cost, without barriers, without end.
|
|
</Typography>
|
|
</Container>
|
|
</Box>
|
|
|
|
{/* Join the Mission Section */}
|
|
<Container maxWidth="md" sx={{ pt: { xs: 10, md: 16 }, pb: 0, textAlign: 'center' }}>
|
|
<Typography
|
|
variant="h2"
|
|
sx={{
|
|
fontSize: { xs: '2rem', md: '3rem' },
|
|
fontWeight: 700,
|
|
mb: 4,
|
|
letterSpacing: '-0.02em',
|
|
}}
|
|
>
|
|
Join the Mission
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
fontSize: { xs: '1.1rem', md: '1.5rem' },
|
|
fontWeight: 400,
|
|
lineHeight: 1.8,
|
|
color: 'text.secondary',
|
|
mb: 2,
|
|
}}
|
|
>
|
|
Biblical Guide is built by one believer, sustained by many.
|
|
</Typography>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
fontSize: { xs: '1.1rem', md: '1.5rem' },
|
|
fontWeight: 400,
|
|
lineHeight: 1.8,
|
|
color: 'text.secondary',
|
|
mb: 6,
|
|
}}
|
|
>
|
|
No corporations. No investors. Just faith, code, and community.
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
fontSize: { xs: '1.1rem', md: '1.5rem' },
|
|
fontWeight: 600,
|
|
lineHeight: 1.8,
|
|
mb: 6,
|
|
}}
|
|
>
|
|
If this mission speaks to you — help keep the Bible free forever.
|
|
</Typography>
|
|
|
|
<Button
|
|
variant="contained"
|
|
size="large"
|
|
sx={{
|
|
py: 2.5,
|
|
px: 5,
|
|
fontSize: '1.4rem',
|
|
fontWeight: 700,
|
|
textTransform: 'none',
|
|
bgcolor: 'primary.main',
|
|
'&:hover': { bgcolor: 'primary.dark' },
|
|
mb: 2,
|
|
}}
|
|
href="https://paypal.me/biblicalguide"
|
|
target="_blank"
|
|
startIcon={<VolunteerActivism sx={{ fontSize: '2rem' }} />}
|
|
>
|
|
Donate Now
|
|
</Button>
|
|
|
|
<Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.95rem', fontStyle: 'italic' }}>
|
|
Every verse you read today stays free tomorrow.
|
|
</Typography>
|
|
</Container>
|
|
|
|
{/* Footer CTA */}
|
|
<Box
|
|
sx={{
|
|
background: 'linear-gradient(135deg, #009688 0%, #00796B 100%)',
|
|
color: 'white',
|
|
pt: 8,
|
|
pb: 0,
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
<Container maxWidth="md">
|
|
<Typography
|
|
variant="h3"
|
|
sx={{
|
|
fontSize: { xs: '1.75rem', md: '2.5rem' },
|
|
fontWeight: 700,
|
|
mb: 2,
|
|
letterSpacing: '-0.02em',
|
|
}}
|
|
>
|
|
Biblical-Guide.com
|
|
</Typography>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
fontSize: { xs: '1.1rem', md: '1.5rem' },
|
|
fontWeight: 400,
|
|
opacity: 0.95,
|
|
}}
|
|
>
|
|
Every Scripture. Every Language. Forever Free.
|
|
</Typography>
|
|
|
|
<Box sx={{ display: 'flex', gap: 3, justifyContent: 'center', mt: 6, flexWrap: 'wrap' }}>
|
|
<Button
|
|
variant="outlined"
|
|
sx={{
|
|
borderColor: 'white',
|
|
color: 'white',
|
|
'&:hover': {
|
|
borderColor: 'white',
|
|
bgcolor: 'rgba(255,255,255,0.1)',
|
|
},
|
|
textTransform: 'none',
|
|
}}
|
|
onClick={() => router.push(`/${locale}/bible`)}
|
|
>
|
|
Read Bible
|
|
</Button>
|
|
<Button
|
|
variant="outlined"
|
|
sx={{
|
|
borderColor: 'white',
|
|
color: 'white',
|
|
'&:hover': {
|
|
borderColor: 'white',
|
|
bgcolor: 'rgba(255,255,255,0.1)',
|
|
},
|
|
textTransform: 'none',
|
|
}}
|
|
onClick={() => router.push(`/${locale}/prayers`)}
|
|
>
|
|
Prayer Wall
|
|
</Button>
|
|
<Button
|
|
variant="outlined"
|
|
sx={{
|
|
borderColor: 'white',
|
|
color: 'white',
|
|
'&:hover': {
|
|
borderColor: 'white',
|
|
bgcolor: 'rgba(255,255,255,0.1)',
|
|
},
|
|
textTransform: 'none',
|
|
}}
|
|
onClick={() => window.dispatchEvent(new CustomEvent('floating-chat:open', { detail: { fullscreen: true } }))}
|
|
>
|
|
AI Chat
|
|
</Button>
|
|
<Button
|
|
variant="outlined"
|
|
sx={{
|
|
borderColor: 'white',
|
|
color: 'white',
|
|
'&:hover': {
|
|
borderColor: 'white',
|
|
bgcolor: 'rgba(255,255,255,0.1)',
|
|
},
|
|
textTransform: 'none',
|
|
}}
|
|
onClick={() => router.push(`/${locale}/contact`)}
|
|
>
|
|
Contact
|
|
</Button>
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|