You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

ProductsHero.jsx 2.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. import { Container, Grid, Typography } from '@mui/material';
  2. import { Box } from '@mui/system';
  3. import ProductCard from '../product-card/ProductCard';
  4. import Sort from '../sort/sort';
  5. const ProductsHero = () => {
  6. return (
  7. <Box
  8. sx={{
  9. width: '100%',
  10. height: '100%',
  11. display: 'flex',
  12. flexDirection: 'column',
  13. }}
  14. >
  15. <Container
  16. sx={{
  17. width: '1273px',
  18. height: '300px',
  19. mt: 25,
  20. }}
  21. >
  22. <Typography
  23. fontFamily={'body1.fontFamily'}
  24. height="120px"
  25. fontSize="64px"
  26. align="center"
  27. color="primary.main"
  28. >
  29. Welcome to our Store!
  30. </Typography>
  31. <Typography fontSize="24px" align="center">
  32. Our focus is to bring you the very best in the world of coffee.
  33. Everything from fresh coffee beans, the best coffee powders and
  34. capsules as well as other miscellaneous items such as cups and mugs.
  35. Take a look to see if anything takes your fancy.
  36. </Typography>
  37. </Container>
  38. <Box textAlign="center" width="100%">
  39. <Sort />
  40. </Box>
  41. <Container
  42. sx={{
  43. mt: 25,
  44. }}
  45. >
  46. <Grid container spacing={2}>
  47. <Grid item md={4} xs={12} sx={{ height: '500px' }}>
  48. <ProductCard />
  49. </Grid>
  50. <Grid item md={4} xs={12}>
  51. <ProductCard />
  52. </Grid>
  53. <Grid item md={4} xs={12}>
  54. <ProductCard />
  55. </Grid>
  56. <Grid item md={4} xs={12}>
  57. <ProductCard />
  58. </Grid>
  59. <Grid item md={4} xs={12}>
  60. <ProductCard />
  61. </Grid>
  62. <Grid item md={4} xs={12}>
  63. <ProductCard />
  64. </Grid>
  65. <Grid item md={4} xs={12}>
  66. <ProductCard />
  67. </Grid>
  68. <Grid item md={4} xs={12}>
  69. <ProductCard />
  70. </Grid>
  71. <Grid item md={4} xs={12}>
  72. <ProductCard />
  73. </Grid>
  74. </Grid>
  75. </Container>
  76. </Box>
  77. );
  78. };
  79. export default ProductsHero;