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>

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',
+})

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,