andrei/biblical-guide.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve home page layout and typography

Browse Source 
- Fix feature cards layout: 2 columns desktop, 1 mobile with consistent sizing
- Add Google Fonts: Merriweather for headings, Lato for body text
- Improve card content structure and spacing
- Center feature cards and stats section for better alignment
- Group all card content (icon, title, description) in single container
- Set fixed card dimensions (400px max width, 280px height)
- Add text overflow handling for descriptions (3 lines max)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
andupetcu
2025-09-20 16:23:34 +03:00
parent 51248b24f7
commit 500066450d
6 changed files with 105 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/[locale]/layout.tsx
View File

@@ -6,6 +6,7 @@ import { notFound } from 'next/navigation'
import { MuiThemeProvider } from '@/components/providers/theme-provider'
import { Navigation } from '@/components/layout/navigation'
import FloatingChat from '@/components/chat/floating-chat'
import { merriweather, lato } from '@/lib/fonts'
export const metadata: Metadata = {
title: 'Ghid Biblic - Biblical Guide',
@@ -37,11 +38,11 @@ export default async function LocaleLayout({
notFound()
}
const messages = await getMessages()
const messages = await getMessages({ locale })
return (
<html lang={locale}>
<body>
<body className={`${merriweather.variable} ${lato.variable}`}>
<NextIntlClientProvider messages={messages} locale={locale}>
<MuiThemeProvider>
<Navigation />

47
app/[locale]/page.tsx
View File

@@ -135,12 +135,14 @@ export default function Home() {
{t('features.subtitle')}
</Typography>
<Grid container spacing={4}>
<Grid container spacing={4} justifyContent="center">
{features.map((feature, index) => (
<Grid item xs={12} sm={6} md={3} key={index}>
<Grid item xs={12} md={6} key={index} sx={{ 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',
@@ -152,16 +154,37 @@ export default function Home() {
}}
onClick={() => router.push(`/${locale}${feature.path}`)}
>
<CardContent sx={{ flexGrow: 1, textAlign: 'center', p: 3 }}>
<Box sx={{ mb: 2 }}>
{feature.icon}
<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>
<Typography variant="h6" component="h3" gutterBottom>
{feature.title}
</Typography>
<Typography variant="body2" color="text.secondary">
{feature.description}
</Typography>
</CardContent>
</Card>
</Grid>
@@ -172,7 +195,7 @@ export default function Home() {
{/* Stats Section */}
<Paper sx={{ bgcolor: 'background.paper', py: 6, mb: 8 }}>
<Container maxWidth="lg">
<Grid container spacing={4} textAlign="center">
<Grid container spacing={4} textAlign="center" justifyContent="center">
<Grid item xs={12} sm={4}>
<Typography variant="h3" color="primary.main" gutterBottom>
66