Improve home page layout and typography

- 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>
2025-09-20 16:23:34 +03:00
parent 51248b24f7
commit 500066450d
6 changed files with 105 additions and 19 deletions
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -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 />
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -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 }}>
+                <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="h6" component="h3" gutterBottom>
+                    <Typography variant="h5" component="h3" sx={{ fontWeight: 600, mb: 2 }}>
                      {feature.title}
                    </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}
                    </Typography>
+                  </Box>
                </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
--- a/lib/fonts.ts
+++ b/lib/fonts.ts
@@ -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',
+})
--- a/lib/theme.ts
+++ b/lib/theme.ts
@@ -1,5 +1,6 @@
 'use client'
 import { createTheme } from '@mui/material/styles'
+import { merriweather, lato } from './fonts'

 export const theme = createTheme({
  palette: {
@@ -27,35 +28,70 @@ export const theme = createTheme({
    divider: '#BDBDBD', // DIVIDER COLOR
  },
  typography: {
-    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    fontFamily: lato.style.fontFamily,
    h1: {
+      fontFamily: merriweather.style.fontFamily,
      fontSize: '2.5rem',
-      fontWeight: 600,
+      fontWeight: 700,
      lineHeight: 1.2,
    },
    h2: {
+      fontFamily: merriweather.style.fontFamily,
      fontSize: '2rem',
-      fontWeight: 600,
+      fontWeight: 700,
      lineHeight: 1.3,
    },
    h3: {
+      fontFamily: merriweather.style.fontFamily,
      fontSize: '1.5rem',
-      fontWeight: 500,
+      fontWeight: 700,
      lineHeight: 1.4,
    },
    h4: {
+      fontFamily: merriweather.style.fontFamily,
      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,
    },
    body1: {
+      fontFamily: lato.style.fontFamily,
      fontSize: '1rem',
+      fontWeight: 400,
      lineHeight: 1.6,
    },
    body2: {
+      fontFamily: lato.style.fontFamily,
      fontSize: '0.875rem',
+      fontWeight: 400,
      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: {
    borderRadius: 8,
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
        "@mui/material": "^7.3.2",
        "@mui/material-nextjs": "^7.3.2",
        "@mui/system": "^7.3.2",
+        "@next/font": "^14.2.15",
        "@prisma/client": "^6.16.2",
        "@radix-ui/react-dialog": "^1.1.15",
        "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -2756,6 +2757,15 @@
      "integrity": "sha512-RSEDTRqyihYXygx/OJXwvVupfr9m04+0vH8vyy0HfZ7keRto6VX9BbEk0J2PUk0VGy6YhklJUSrgForov5F9pw==",
      "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": {
      "version": "15.5.3",
      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.3.tgz",
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
    "@mui/material": "^7.3.2",
    "@mui/material-nextjs": "^7.3.2",
    "@mui/system": "^7.3.2",
+    "@next/font": "^14.2.15",
    "@prisma/client": "^6.16.2",
    "@radix-ui/react-dialog": "^1.1.15",
    "@radix-ui/react-dropdown-menu": "^2.1.16",