500066450d
- 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>
127 lines
2.7 KiB
TypeScript
127 lines
2.7 KiB
TypeScript
'use client'
|
|
import { createTheme } from '@mui/material/styles'
|
|
import { merriweather, lato } from './fonts'
|
|
|
|
export const theme = createTheme({
|
|
palette: {
|
|
mode: 'light',
|
|
primary: {
|
|
main: '#009688', // PRIMARY COLOR
|
|
light: '#B2DFDB', // LIGHT PRIMARY COLOR
|
|
dark: '#00796B', // DARK PRIMARY COLOR
|
|
contrastText: '#FFFFFF', // TEXT / ICONS
|
|
},
|
|
secondary: {
|
|
main: '#FFC107', // ACCENT COLOR
|
|
light: '#FFECB3',
|
|
dark: '#FF8F00',
|
|
contrastText: '#212121',
|
|
},
|
|
background: {
|
|
default: '#FAFAFA',
|
|
paper: '#FFFFFF',
|
|
},
|
|
text: {
|
|
primary: '#212121', // PRIMARY TEXT
|
|
secondary: '#757575', // SECONDARY TEXT
|
|
},
|
|
divider: '#BDBDBD', // DIVIDER COLOR
|
|
},
|
|
typography: {
|
|
fontFamily: lato.style.fontFamily,
|
|
h1: {
|
|
fontFamily: merriweather.style.fontFamily,
|
|
fontSize: '2.5rem',
|
|
fontWeight: 700,
|
|
lineHeight: 1.2,
|
|
},
|
|
h2: {
|
|
fontFamily: merriweather.style.fontFamily,
|
|
fontSize: '2rem',
|
|
fontWeight: 700,
|
|
lineHeight: 1.3,
|
|
},
|
|
h3: {
|
|
fontFamily: merriweather.style.fontFamily,
|
|
fontSize: '1.5rem',
|
|
fontWeight: 700,
|
|
lineHeight: 1.4,
|
|
},
|
|
h4: {
|
|
fontFamily: merriweather.style.fontFamily,
|
|
fontSize: '1.25rem',
|
|
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,
|
|
},
|
|
components: {
|
|
MuiButton: {
|
|
styleOverrides: {
|
|
root: {
|
|
textTransform: 'none',
|
|
borderRadius: 8,
|
|
padding: '8px 16px',
|
|
},
|
|
},
|
|
},
|
|
MuiCard: {
|
|
styleOverrides: {
|
|
root: {
|
|
boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.1)',
|
|
borderRadius: 12,
|
|
},
|
|
},
|
|
},
|
|
MuiAppBar: {
|
|
styleOverrides: {
|
|
root: {
|
|
boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.1)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
})
|
|
|
|
export default theme |