web_app/frontend/src/components/StartCard.jsx

// Import React and required components from Material-UI
import React from 'react';
import { Box, Grid, Card, CardContent, Typography } from '@mui/material';
import ButtonGrid from './ButtonGrid.jsx';

// Define the StartCard component with props
const StartCard = ({ inputText }) => {
  return (
    // Use Box component to add a wrapper with transition and opacity based on inputText
    <Box
      sx={{
        transition: 'all 0.5s',
        opacity: inputText !== '' ? 0 : 1, // Hide the component if inputText is not empty
      }}
    >
      {/* Grid container for layout */}
      <Grid container spacing={3}>
        <Grid item xs={12}>
          {/* Card component for the start section */}
          <Card
            sx={{
              my: 2,
              mb: -1,
              mt: 11,
              mx: 2,
              maxWidth: 'none',
            }}
          >
            {/* CardContent to contain the content of the card */}
            <CardContent>
              {/* Typography for the title */}
              <Typography
                variant="h6"
                sx={{
                  textAlign: 'center',
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent',
                  backgroundImage:
                    'linear-gradient(90deg, #F46737 0%, #FFA53C 30%, #FBFF3C 60%, #49C628 100%)', // Gradient text effect
                  pb: 0, // Remove bottom padding
                  mb: 0, // Remove bottom margin
                  mr: -10, // Adjust right margin
                }}
              >
                Unsure Where to Start?
              </Typography>
            </CardContent>
          </Card>
        </Grid>
        {/* Render the ButtonGrid component */}
        <ButtonGrid />
      </Grid>
    </Box>
  );
};

// Export the StartCard component as default
export default StartCard;