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

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

@@ -135,12 +135,14 @@ export default function Home() {
{t('features.subtitle')} {t('features.subtitle')}
</Typography> </Typography>
<Grid container spacing={4}> <Grid container spacing={4} justifyContent="center">
{features.map((feature, index) => ( {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 <Card
sx={{ sx={{
height: '100%', height: '100%',
width: '100%',
maxWidth: 400,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out', 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}`)} onClick={() => router.push(`/${locale}${feature.path}`)}
> >
<CardContent sx={{ flexGrow: 1, textAlign: 'center', p: 3 }}> <CardContent sx={{
flexGrow: 1,
textAlign: 'center',
p: 4,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
height: 280,
width: '100%'
}}>
<Box>
<Box sx={{ mb: 2 }}> <Box sx={{ mb: 2 }}>
{feature.icon} {feature.icon}
</Box> </Box>
<Typography variant="h6" component="h3" gutterBottom> <Typography variant="h5" component="h3" sx={{ fontWeight: 600, mb: 2 }}>
{feature.title} {feature.title}
</Typography> </Typography>
<Typography variant="body2" color="text.secondary"> <Typography
variant="body1"
color="text.secondary"
sx={{
lineHeight: 1.6,
overflow: 'hidden',
display: '-webkit-box',
WebkitLineClamp: 3,
WebkitBoxOrient: 'vertical',
}}
>
{feature.description} {feature.description}
</Typography> </Typography>
</Box>
</CardContent> </CardContent>
</Card> </Card>
</Grid> </Grid>
@@ -172,7 +195,7 @@ export default function Home() {
{/* Stats Section */} {/* Stats Section */}
<Paper sx={{ bgcolor: 'background.paper', py: 6, mb: 8 }}> <Paper sx={{ bgcolor: 'background.paper', py: 6, mb: 8 }}>
<Container maxWidth="lg"> <Container maxWidth="lg">
<Grid container spacing={4} textAlign="center"> <Grid container spacing={4} textAlign="center" justifyContent="center">
<Grid item xs={12} sm={4}> <Grid item xs={12} sm={4}>
<Typography variant="h3" color="primary.main" gutterBottom> <Typography variant="h3" color="primary.main" gutterBottom>
66 66

15
lib/fonts.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Merriweather, Lato } from 'next/font/google'
export const merriweather = Merriweather({
subsets: ['latin'],
weight: ['300', '400', '700', '900'],
variable: '--font-merriweather',
display: 'swap',
})
export const lato = Lato({
subsets: ['latin'],
weight: ['300', '400', '700', '900'],
variable: '--font-lato',
display: 'swap',
})

46
lib/theme.ts
View File

@@ -1,5 +1,6 @@
'use client' 'use client'
import { createTheme } from '@mui/material/styles' import { createTheme } from '@mui/material/styles'
import { merriweather, lato } from './fonts'
export const theme = createTheme({ export const theme = createTheme({
palette: { palette: {
@@ -27,35 +28,70 @@ export const theme = createTheme({
divider: '#BDBDBD', // DIVIDER COLOR divider: '#BDBDBD', // DIVIDER COLOR
}, },
typography: { typography: {
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', fontFamily: lato.style.fontFamily,
h1: { h1: {
fontFamily: merriweather.style.fontFamily,
fontSize: '2.5rem', fontSize: '2.5rem',
fontWeight: 600, fontWeight: 700,
lineHeight: 1.2, lineHeight: 1.2,
}, },
h2: { h2: {
fontFamily: merriweather.style.fontFamily,
fontSize: '2rem', fontSize: '2rem',
fontWeight: 600, fontWeight: 700,
lineHeight: 1.3, lineHeight: 1.3,
}, },
h3: { h3: {
fontFamily: merriweather.style.fontFamily,
fontSize: '1.5rem', fontSize: '1.5rem',
fontWeight: 500, fontWeight: 700,
lineHeight: 1.4, lineHeight: 1.4,
}, },
h4: { h4: {
fontFamily: merriweather.style.fontFamily,
fontSize: '1.25rem', fontSize: '1.25rem',
fontWeight: 500, fontWeight: 700,
lineHeight: 1.4,
},
h5: {
fontFamily: merriweather.style.fontFamily,
fontSize: '1.125rem',
fontWeight: 700,
lineHeight: 1.4,
},
h6: {
fontFamily: merriweather.style.fontFamily,
fontSize: '1rem',
fontWeight: 700,
lineHeight: 1.4, lineHeight: 1.4,
}, },
body1: { body1: {
fontFamily: lato.style.fontFamily,
fontSize: '1rem', fontSize: '1rem',
fontWeight: 400,
lineHeight: 1.6, lineHeight: 1.6,
}, },
body2: { body2: {
fontFamily: lato.style.fontFamily,
fontSize: '0.875rem', fontSize: '0.875rem',
fontWeight: 400,
lineHeight: 1.5, lineHeight: 1.5,
}, },
button: {
fontFamily: lato.style.fontFamily,
fontWeight: 600,
},
caption: {
fontFamily: lato.style.fontFamily,
fontSize: '0.75rem',
fontWeight: 400,
},
overline: {
fontFamily: lato.style.fontFamily,
fontSize: '0.75rem',
fontWeight: 600,
textTransform: 'uppercase',
},
}, },
shape: { shape: {
borderRadius: 8, borderRadius: 8,

10
package-lock.json generated
View File

@@ -16,6 +16,7 @@
"@mui/material": "^7.3.2", "@mui/material": "^7.3.2",
"@mui/material-nextjs": "^7.3.2", "@mui/material-nextjs": "^7.3.2",
"@mui/system": "^7.3.2", "@mui/system": "^7.3.2",
"@next/font": "^14.2.15",
"@prisma/client": "^6.16.2", "@prisma/client": "^6.16.2",
"@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16", "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -2756,6 +2757,15 @@
"integrity": "sha512-RSEDTRqyihYXygx/OJXwvVupfr9m04+0vH8vyy0HfZ7keRto6VX9BbEk0J2PUk0VGy6YhklJUSrgForov5F9pw==", "integrity": "sha512-RSEDTRqyihYXygx/OJXwvVupfr9m04+0vH8vyy0HfZ7keRto6VX9BbEk0J2PUk0VGy6YhklJUSrgForov5F9pw==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/@next/font": {
"version": "14.2.15",
"resolved": "https://registry.npmjs.org/@next/font/-/font-14.2.15.tgz",
"integrity": "sha512-QopYhBmCDDrNDynbi+ZD1hDZXmQXVFo7TmAFp4DQgO/kogz1OLbQ92hPigJbj572eZ3GaaVxNIyYVn3/eAsehg==",
"license": "MIT",
"peerDependencies": {
"next": "*"
}
},
"node_modules/@next/swc-darwin-arm64": { "node_modules/@next/swc-darwin-arm64": {
"version": "15.5.3", "version": "15.5.3",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.3.tgz", "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.3.tgz",

1
package.json
View File

@@ -29,6 +29,7 @@
"@mui/material": "^7.3.2", "@mui/material": "^7.3.2",
"@mui/material-nextjs": "^7.3.2", "@mui/material-nextjs": "^7.3.2",
"@mui/system": "^7.3.2", "@mui/system": "^7.3.2",
"@next/font": "^14.2.15",
"@prisma/client": "^6.16.2", "@prisma/client": "^6.16.2",
"@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16", "@radix-ui/react-dropdown-menu": "^2.1.16",