11import React , { useState , useEffect } from 'react' ;
22import {
3- Box , Grid , Card , CardContent , Typography , Button , List , ListItem ,
4- ListItemIcon , ListItemText , Chip , Paper , Divider , Container , CircularProgress
3+ Box , Card , CardContent , Typography , Button , List , ListItem ,
4+ ListItemIcon , ListItemText , Chip , Paper , Divider , Container , CircularProgress , Grid
55} from '@mui/material' ;
66import { Check , Star , ArrowForward } from '@mui/icons-material' ;
77import { useTheme } from '../contexts/ThemeContext' ;
@@ -167,11 +167,26 @@ export default function TierComparison() {
167167 </ Box >
168168
169169 { /* Pricing Cards */ }
170- < Grid container spacing = { 3 } sx = { { mb : 6 } } >
170+ < Box
171+ sx = { {
172+ display : 'grid' ,
173+ gridTemplateColumns : {
174+ xs : '1fr' ,
175+ sm : 'repeat(2, 1fr)' ,
176+ md : `repeat(${ Math . min ( tiers . length , 5 ) } , 1fr)`
177+ } ,
178+ gap : 3 ,
179+ mb : 6 ,
180+ pt : 2 ,
181+ alignItems : 'stretch'
182+ } }
183+ >
171184 { tiers . map ( ( tier ) => (
172- < Grid item xs = { 12 } md = { 3 } key = { tier . name } >
185+ < Box key = { tier . name } sx = { { display : 'flex' , width : '100%' } } >
173186 < Card
174187 sx = { {
188+ width : '100%' ,
189+ minHeight : 560 ,
175190 height : '100%' ,
176191 display : 'flex' ,
177192 flexDirection : 'column' ,
@@ -186,6 +201,7 @@ export default function TierComparison() {
186201 ? 'linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%)'
187202 : undefined ,
188203 transition : 'all 0.3s ease' ,
204+ overflow : 'visible' ,
189205 '&:hover' : {
190206 transform : 'translateY(-8px)' ,
191207 boxShadow : 6
@@ -224,7 +240,14 @@ export default function TierComparison() {
224240 </ Box >
225241 ) }
226242
227- < CardContent sx = { { flexGrow : 1 , pt : tier . popular ? 4 : 3 } } >
243+ < CardContent
244+ sx = { {
245+ flexGrow : 1 ,
246+ pt : tier . popular ? 4 : 3 ,
247+ display : 'flex' ,
248+ flexDirection : 'column'
249+ } }
250+ >
228251 { /* Tier Name */ }
229252 < Typography variant = "h5" fontWeight = { 600 } gutterBottom sx = { { color : tier . popular ? 'rgb(209, 213, 219)' : undefined } } >
230253 { tier . name }
@@ -265,8 +288,8 @@ export default function TierComparison() {
265288 < Divider sx = { { mb : 2 } } />
266289
267290 { /* Features */ }
268- < List dense >
269- { tier . features . map ( ( feature , idx ) => (
291+ < List dense sx = { { flexGrow : 1 , minHeight : 240 } } >
292+ { tier . features . slice ( 0 , 6 ) . map ( ( feature , idx ) => (
270293 < ListItem key = { idx } disableGutters >
271294 < ListItemIcon sx = { { minWidth : 32 } } >
272295 < Check color = "success" fontSize = "small" />
@@ -280,23 +303,19 @@ export default function TierComparison() {
280303 />
281304 </ ListItem >
282305 ) ) }
306+ { tier . features . length > 6 && (
307+ < ListItem disableGutters >
308+ < ListItemText
309+ primary = { `+${ tier . features . length - 6 } more features` }
310+ primaryTypographyProps = { {
311+ variant : 'caption' ,
312+ sx : { color : 'text.secondary' , fontStyle : 'italic' }
313+ } }
314+ />
315+ </ ListItem >
316+ ) }
283317 </ List >
284318
285- { /* Limitations */ }
286- { tier . limitations . length > 0 && (
287- < >
288- < Divider sx = { { my : 2 } } />
289- < Typography variant = "caption" sx = { { color : 'rgb(209, 213, 219)' } } display = "block" gutterBottom >
290- Limitations:
291- </ Typography >
292- { tier . limitations . map ( ( limitation , idx ) => (
293- < Typography key = { idx } variant = "caption" color = "error" display = "block" >
294- • { limitation }
295- </ Typography >
296- ) ) }
297- </ >
298- ) }
299-
300319 { /* CTA Button */ }
301320 < Button
302321 variant = { tier . popular ? 'contained' : 'outlined' }
@@ -305,15 +324,15 @@ export default function TierComparison() {
305324 endIcon = { < ArrowForward /> }
306325 onClick = { ( ) => handleSelectPlan ( tier ) }
307326 disabled = { currentTier === tier . planId || checkoutLoading }
308- sx = { { mt : 3 } }
327+ sx = { { mt : 'auto' } }
309328 >
310329 { checkoutLoading ? 'Processing...' : currentTier === tier . planId ? 'Current Plan' : tier . cta }
311330 </ Button >
312331 </ CardContent >
313332 </ Card >
314- </ Grid >
333+ </ Box >
315334 ) ) }
316- </ Grid >
335+ </ Box >
317336
318337 { /* Feature Comparison Table */ }
319338 < Paper sx = { { p : 3 , mb : 4 } } >
0 commit comments