Styles to match that of the 'How It Works' section, copied from `sectionHeading` and `howItWorksText` in RecentProjectActivity

[noahdahlman]

Styles to match that of the 'How It Works' section, copied from sectionHeading and howItWorksText:

const styles = {
  recentActivity: {
    py: 10,
  },
  header: {
    mb: 5,
    fontSize: '3rem',
    '@media (min-width: 600px)': {
      fontSize: '4rem',
    },
  },
  subheader: {
    fontSize: '1.5rem',
    mb: 7,
    '@media (min-width: 600px)': {
      fontSize: '1.75rem',
      mb: 10,
    },
  }
}

The component JSX should be refactored to be as so:

return (
  <Box sx={styles.recentActivity} component="section">
    <Typography variant="h2" sx={styles.header}>Recent Activity</Typography>
    <Typography sx={styles.subheader}>Check out a few of the most recently updated projects on Arbor.</Typography>
    <Grid container spacing={3}>
    {projects.map(project => (
      <Grid item xs={12} sm={4} key={project._id}>
        <ProjectCard details={project} />
      </Grid>
    ))}
    </Grid>         
  </section>
)

Or if you're importing the styles to this file, then you can just reuse those variables stated above as the styles in sx.

_Originally posted by @drewcook in https://github.com/arbor-protocol/ui/pull/229#discussion_r1051632730_

[0xlws]

this commit was where i did the styles and refactoring (still has the container which i removed after in the second PR , it differs a bit from your example as i took it as it was in the index page:

return (
    <Box sx={styles.recentActivity} component="section">
        <Container maxWidth="xl">
            <Typography variant="h2" sx={styles.header}>
                Recent Activity
            </Typography>
            <Typography sx={styles.subheader}>Check out a few of the most recently updated projects on Arbor.</Typography>
            <Grid container spacing={3}>
                {projects.map(project => (
                    <Grid item xs={12} sm={4} key={project._id}>
                        <ProjectCard details={project} />
                    </Grid>
                ))}
            </Grid>
        </Container>
    </Box>