From 500066450dde06d5626d78b6825866b8b6eab490 Mon Sep 17 00:00:00 2001 From: andupetcu <47487320+andupetcu@users.noreply.github.com> Date: Sat, 20 Sep 2025 16:23:34 +0300 Subject: [PATCH] Improve home page layout and typography MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- app/[locale]/layout.tsx | 5 +++-- app/[locale]/page.tsx | 47 ++++++++++++++++++++++++++++++----------- lib/fonts.ts | 15 +++++++++++++ lib/theme.ts | 46 +++++++++++++++++++++++++++++++++++----- package-lock.json | 10 +++++++++ package.json | 1 + 6 files changed, 105 insertions(+), 19 deletions(-) create mode 100644 lib/fonts.ts diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index c9c026f..5ce12fa 100644 --- 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 ( - + diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index 4dbdca2..4bd24b4 100644 --- a/app/[locale]/page.tsx +++ b/app/[locale]/page.tsx @@ -135,12 +135,14 @@ export default function Home() { {t('features.subtitle')} - + {features.map((feature, index) => ( - + router.push(`/${locale}${feature.path}`)} > - - - {feature.icon} + + + + {feature.icon} + + + {feature.title} + + + {feature.description} + - - {feature.title} - - - {feature.description} - @@ -172,7 +195,7 @@ export default function Home() { {/* Stats Section */} - + 66 diff --git a/lib/fonts.ts b/lib/fonts.ts new file mode 100644 index 0000000..bed2eca --- /dev/null +++ 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', +}) \ No newline at end of file diff --git a/lib/theme.ts b/lib/theme.ts index 9904ad3..369bf99 100644 --- 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, diff --git a/package-lock.json b/package-lock.json index 10b6f6a..2c9fc00 100644 --- 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", diff --git a/package.json b/package.json index 80eecc2..bccb674 100644 --- 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",