import React from 'react'; import { Box, Typography, Paper, SxProps } from '@mui/material'; import { styled } from '@mui/material/styles'; interface QuoteContainerProps { size?: 'normal' | 'small'; } const QuoteContainer = styled(Paper, { shouldForwardProp: (prop) => prop !== 'size', })(({ theme, size = 'normal' }) => ({ position: 'relative', padding: size === 'small' ? theme.spacing(1) : theme.spacing(4), margin: size === 'small' ? theme.spacing(0.5) : theme.spacing(2), background: 'linear-gradient(135deg, #FFFFFF 0%, #D3CDBF 100%)', borderRadius: size === 'small' ? theme.spacing(1) : theme.spacing(2), boxShadow: '0 8px 32px rgba(26, 37, 54, 0.15)', overflow: 'hidden', border: '1px solid rgba(74, 122, 125, 0.2)', '&::before': { content: '""', position: 'absolute', top: 0, left: 0, right: 0, height: size === 'small' ? '2px' : '4px', background: 'linear-gradient(90deg, #4A7A7D 0%, #D4A017 100%)', }, })); const QuoteText = styled(Typography, { shouldForwardProp: (prop) => prop !== 'size', })(({ theme, size = 'normal' }) => ({ fontSize: size === 'small' ? '0.9rem' : '1.2rem', lineHeight: size === 'small' ? 1.4 : 1.6, fontStyle: 'italic', color: '#2E2E2E', // Charcoal Black position: 'relative', zIndex: 2, textAlign: 'center', fontFamily: '"Georgia", "Times New Roman", serif', fontWeight: 400, })); const QuoteMark = styled(Typography, { shouldForwardProp: (prop) => prop !== 'size', })(({ theme, size = 'normal' }) => ({ fontSize: size === 'small' ? '2.5rem' : '4rem', fontFamily: '"Georgia", "Times New Roman", serif', fontWeight: 'bold', opacity: 0.15, position: 'absolute', zIndex: 1, color: '#4A7A7D', // Dusty Teal userSelect: 'none', })); const OpeningQuote = styled(QuoteMark)(({ size = 'normal' }: QuoteContainerProps) => ({ top: size === 'small' ? '5px' : '10px', left: size === 'small' ? '8px' : '15px', })); const ClosingQuote = styled(QuoteMark)(({ size = 'normal' }: QuoteContainerProps) => ({ bottom: size === 'small' ? '5px' : '10px', right: size === 'small' ? '8px' : '15px', transform: 'rotate(180deg)', })); const AuthorText = styled(Typography, { shouldForwardProp: (prop) => prop !== 'size', })(({ theme, size = 'normal' }) => ({ marginTop: size === 'small' ? theme.spacing(1) : theme.spacing(2), textAlign: 'right', fontStyle: 'normal', fontWeight: 500, color: '#1A2536', // Midnight Blue fontSize: size === 'small' ? '0.8rem' : '0.95rem', '&::before': { content: '"— "', color: '#D4A017', // Golden Ochre dash }, })); const AccentLine = styled(Box, { shouldForwardProp: (prop) => prop !== 'size', })(({ theme, size = 'normal' }) => ({ width: size === 'small' ? '40px' : '60px', height: size === 'small' ? '1px' : '2px', background: 'linear-gradient(90deg, #D4A017 0%, #4A7A7D 100%)', // Golden Ochre to Dusty Teal margin: size === 'small' ? '0.5rem auto' : '1rem auto', borderRadius: '1px', })); interface QuoteProps { quote?: string; author?: string; size?: 'small' | 'normal'; sx?: SxProps; } const Quote = (props: QuoteProps) => { const { quote, author, size = 'normal', sx } = props; return ( " " {quote} {author && ( {author} )} ); }; export { Quote };