fix the width to auto fit the screen size and enhance the whole landing page to be more modern and MUI style with more design as currently the background color looks weird, sometimes grey, sometimes white, not match at all
give me the updated full code
import { useState, useEffect } from 'react'
import {
  Box,
  Container,
  Typography,
  Button,
  Grid,
  Card,
  CardContent,
  useTheme,
  alpha,
  Stack,
  IconButton,
  Tooltip,
  Chip,
  useMediaQuery,
  Divider
} from '@mui/material'
import {
  Analytics,
  TrendingUp,
  Speed,
  GitHub,
  LinkedIn,
  Email,
  ArrowForward,
  CheckCircleOutline,
  AutoGraph,
  ShowChart,
  Timeline
} from '@mui/icons-material'
import Header from './Header'
import { motion } from 'framer-motion'

const features = [
  {
    title: 'Real-time Analytics',
    description: 'Track your portfolio performance with live market data and advanced metrics',
    icon: AutoGraph,
    highlights: ['Live market data', 'Performance tracking', 'Custom alerts'],
    gradient: 'linear-gradient(135deg, #6B73FF 0%, #000DFF 100%)'
  },
  {
    title: 'Smart Insights',
    description: 'AI-powered recommendations to optimize your investment strategy',
    icon: ShowChart,
    highlights: ['AI predictions', 'Market trends', 'Smart alerts'],
    gradient: 'linear-gradient(135deg, #FF6B6B 0%, #FF000D 100%)'
  },
  {
    title: 'Risk Analysis',
    description: 'Comprehensive risk assessment and portfolio diversification tools',
    icon: Timeline,
    highlights: ['Risk metrics', 'Portfolio scoring', 'Market signals'],
    gradient: 'linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%)'
  }
]

const stats = [
  { label: 'Active Users', value: '10K+' },
  { label: 'Daily Trades', value: '1M+' },
  { label: 'Analysis Done', value: '500K+' }
]

const socialLinks = [
  { icon: GitHub, label: 'GitHub', url: 'https://github.com' },
  { icon: LinkedIn, label: 'LinkedIn', url: 'https://linkedin.com' },
  { icon: Email, label: 'Email', url: 'mailto:contact@example.com' }
]

function LandingPage({ onGetStarted, isDarkMode, onToggleTheme }) {
  const theme = useTheme()
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))

  return (
    <Box sx={{ 
      minHeight: '100vh',
      background: theme => theme.palette.mode === 'dark'
        ? `linear-gradient(to bottom right, ${alpha(theme.palette.primary.dark, 0.2)}, ${theme.palette.background.default})`
        : `linear-gradient(to bottom right, ${alpha(theme.palette.primary.light, 0.1)}, ${theme.palette.background.default})`,
      overflow: 'hidden'
    }}>
      <Header 
        isDarkMode={isDarkMode}
        onToggleTheme={onToggleTheme}
        sx={{
          backdropFilter: 'blur(10px)',
          backgroundColor: 'transparent',
          borderBottom: 1,
          borderColor: 'divider'
        }}
      />

      {/* Hero Section */}
      <Box 
        sx={{ 
          width: '100%',
          pt: { xs: 8, md: 12 },
          pb: { xs: 8, md: 14 }
        }}
      >
        <Container maxWidth="xl">
          <Grid container spacing={6} alignItems="center">
            <Grid item xs={12} lg={6}>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8 }}
              >
                <Stack spacing={3}>
                  <Chip
                    label="Next-Gen Portfolio Analytics"
                    color="primary"
                    size="medium"
                    sx={{ 
                      width: 'fit-content',
                      fontWeight: 600,
                      fontSize: '0.9rem',
                      py: 1,
                      background: theme => `linear-gradient(45deg, ${alpha(theme.palette.primary.main, 0.8)}, ${alpha(theme.palette.secondary.main, 0.8)})`,
                      backdropFilter: 'blur(10px)'
                    }}
                  />
                  <Typography
                    variant="h1"
                    sx={{
                      fontSize: { xs: '2.5rem', sm: '3rem', md: '4rem' },
                      fontWeight: 800,
                      letterSpacing: '-0.02em',
                      background: theme => `linear-gradient(45deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                      backgroundClip: 'text',
                      WebkitBackgroundClip: 'text',
                      WebkitTextFillColor: 'transparent',
                      lineHeight: 1.1
                    }}
                  >
                    Transform Your Investment Strategy
                  </Typography>
                  <Typography
                    variant="h5"
                    sx={{ 
                      color: 'text.secondary',
                      maxWidth: 580,
                      lineHeight: 1.5,
                      fontSize: { xs: '1.1rem', md: '1.25rem' }
                    }}
                  >
                    Harness the power of AI and real-time analytics to make smarter investment decisions
                    and optimize your portfolio performance.
                  </Typography>

                  <Stack 
                    direction={{ xs: 'column', sm: 'row' }} 
                    spacing={2}
                    sx={{ pt: 2 }}
                  >
                    <Button
                      variant="contained"
                      size="large"
                      onClick={onGetStarted}
                      endIcon={<ArrowForward />}
                      sx={{
                        borderRadius: 3,
                        py: 1.5,
                        px: 4,
                        fontSize: '1.1rem',
                        background: theme => `linear-gradient(45deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                        boxShadow: `0 8px 24px ${alpha(theme.palette.primary.main, 0.25)}`,
                        '&:hover': {
                          transform: 'translateY(-2px)',
                          boxShadow: `0 12px 32px ${alpha(theme.palette.primary.main, 0.35)}`
                        },
                        transition: 'all 0.3s ease'
                      }}
                    >
                      Get Started Now
                    </Button>
                    <Button
                      variant="outlined"
                      size="large"
                      sx={{
                        borderRadius: 3,
                        py: 1.5,
                        px: 4,
                        fontSize: '1.1rem',
                        borderWidth: 2,
                        borderColor: theme => alpha(theme.palette.primary.main, 0.5),
                        '&:hover': {
                          borderWidth: 2,
                          transform: 'translateY(-2px)',
                          boxShadow: theme => `0 8px 24px ${alpha(theme.palette.primary.main, 0.15)}`
                        }
                      }}
                    >
                      Watch Demo
                    </Button>
                  </Stack>

                  <Stack 
                    direction="row" 
                    spacing={4} 
                    divider={<Divider orientation="vertical" flexItem />}
                    sx={{ 
                      pt: 4,
                      opacity: 0.9
                    }}
                  >
                    {stats.map((stat, index) => (
                      <Box key={index}>
                        <Typography 
                          variant="h3" 
                          sx={{ 
                            fontWeight: 700,
                            background: theme => `linear-gradient(45deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                            backgroundClip: 'text',
                            WebkitBackgroundClip: 'text',
                            WebkitTextFillColor: 'transparent',
                          }}
                        >
                          {stat.value}
                        </Typography>
                        <Typography variant="body2" color="text.secondary">
                          {stat.label}
                        </Typography>
                      </Box>
                    ))}
                  </Stack>
                </Stack>
              </motion.div>
            </Grid>

            <Grid item xs={12} lg={6}>
              <motion.div
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.8, delay: 0.2 }}
              >
                <Box
                  sx={{
                    position: 'relative',
                    height: { xs: 400, md: 500 },
                    borderRadius: 4,
                    overflow: 'hidden',
                    background: theme => `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,
                    backdropFilter: 'blur(20px)',
                    boxShadow: theme => `0 32px 64px ${alpha(theme.palette.primary.main, 0.2)}`,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}
                >
                  {/* Add animated chart/graph visualization here */}
                  <ShowChart sx={{ fontSize: 120, opacity: 0.1 }} />
                </Box>
              </motion.div>
            </Grid>
          </Grid>
        </Container>
      </Box>

      {/* Features Section */}
      <Box sx={{ 
        py: { xs: 8, md: 12 },
        background: theme => `linear-gradient(to bottom, ${alpha(theme.palette.background.paper, 0.8)}, ${alpha(theme.palette.background.paper, 0.9)})`,
        backdropFilter: 'blur(10px)'
      }}>
        <Container maxWidth="xl">
          <Grid container spacing={4}>
            {features.map((feature, index) => (
              <Grid item xs={12} md={4} key={feature.title}>
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  viewport={{ once: true }}
                >
                  <Card
                    elevation={0}
                    sx={{
                      height: '100%',
                      background: theme => alpha(theme.palette.background.paper, 0.8),
                      backdropFilter: 'blur(10px)',
                      borderRadius: 4,
                      transition: 'all 0.3s ease',
                      border: '1px solid',
                      borderColor: 'divider',
                      overflow: 'hidden',
                      '&:hover': {
                        transform: 'translateY(-8px)',
                        boxShadow: theme => `0 12px 32px ${alpha(theme.palette.primary.main, 0.15)}`
                      }
                    }}
                  >
                    <Box
                      sx={{
                        background: feature.gradient,
                        py: 1
                      }}
                    />
                    <CardContent sx={{ p: 4 }}>
                      <feature.icon
                        sx={{
                          fontSize: 48,
                          color: 'primary.main',
                          mb: 2
                        }}
                      />
                      <Typography variant="h5" gutterBottom fontWeight="bold">
                        {feature.title}
                      </Typography>
                      <Typography color="text.secondary" paragraph>
                        {feature.description}
                      </Typography>
                      <Stack spacing={1.5} mt={3}>
                        {feature.highlights.map((highlight, i) => (
                          <Stack key={i} direction="row" spacing={1.5} alignItems="center">
                            <CheckCircleOutline sx={{ fontSize: 20, color: 'success.main' }} />
                            <Typography variant="body2" color="text.secondary">
                              {highlight}
                            </Typography>
                          </Stack>
                        ))}
                      </Stack>
                    </CardContent>
                  </Card>
                </motion.div>
              </Grid>
            ))}
          </Grid>
        </Container>
      </Box>

      {/* Footer */}
      <Box
        component="footer"
        sx={{
          py: 4,
          background: theme => alpha(theme.palette.background.paper, 0.9),
          backdropFilter: 'blur(10px)',
          borderTop: 1,
          borderColor: 'divider'
        }}
      >
        <Container maxWidth="xl">
          <Stack
            direction="row"
            justifyContent="space-between"
            alignItems="center"
            spacing={2}
          >
            <Typography variant="body2" color="text.secondary">
              © {new Date().getFullYear()} Portfolio Analytics. All rights reserved.
            </Typography>
            <Stack direction="row" spacing={1}>
              {socialLinks.map(({ icon: Icon, label, url }) => (
                <Tooltip key={label} title={label}>
                  <IconButton
                    href={url}
                    target="_blank"
                    rel="noopener noreferrer"
                    sx={{
                      color: 'text.secondary',
                      '&:hover': {
                        color: 'primary.main',
                        transform: 'translateY(-2px)'
                      },
                      transition: 'all 0.2s ease'
                    }}
                  >
                    <Icon />
                  </IconButton>
                </Tooltip>
              ))}
            </Stack>
          </Stack>
        </Container>
      </Box>
    </Box>
  )
}

export default LandingPage