-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7dc5381
commit b782965
Showing
5 changed files
with
303 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| export const dataSource = [ | ||
| { | ||
| productMeta: { | ||
| title: 'Maserati Aventador', | ||
| desc: 'Id repellendus tempore facere eos unde praesentium hic aspernatur dolores.', | ||
| imageUrl: | ||
| 'https://images.pexels.com/photos/1148955/pexels-photo-1148955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', | ||
| price: '340.28', | ||
| }, | ||
| id: 'e3b2ebd', | ||
| }, | ||
| { | ||
| productMeta: { | ||
| title: 'Dodge Expedition', | ||
| desc: 'Et et laborum eveniet nam voluptatum consequatur architecto.', | ||
| imageUrl: | ||
| 'https://images.pexels.com/photos/1148955/pexels-photo-1148955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', | ||
| price: '202.18', | ||
| }, | ||
| id: '23f99f0', | ||
| }, | ||
| { | ||
| productMeta: { | ||
| title: 'Hyundai Accord', | ||
| desc: 'Ut iure repellat illo.', | ||
| imageUrl: | ||
| 'https://images.pexels.com/photos/1148955/pexels-photo-1148955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', | ||
| price: '863.65', | ||
| }, | ||
| id: '1afd20e', | ||
| }, | ||
| { | ||
| productMeta: { | ||
| title: 'Dodge Challenger', | ||
| desc: 'Inventore reprehenderit animi suscipit explicabo maxime omnis perspiciatis ut.', | ||
| imageUrl: | ||
| 'https://images.pexels.com/photos/1148955/pexels-photo-1148955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', | ||
| price: '512.95', | ||
| }, | ||
| id: 'de3b830', | ||
| }, | ||
| { | ||
| productMeta: { | ||
| title: 'Volvo Fiesta', | ||
| desc: 'Optio quae labore sint.', | ||
| imageUrl: | ||
| 'https://images.pexels.com/photos/1148955/pexels-photo-1148955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', | ||
| price: '874.02', | ||
| }, | ||
| id: '23b7226', | ||
| }, | ||
| { | ||
| productMeta: { | ||
| title: 'Cadillac Challenger', | ||
| desc: 'Nihil vel praesentium reiciendis praesentium quo.', | ||
| imageUrl: | ||
| 'https://images.pexels.com/photos/1148955/pexels-photo-1148955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', | ||
| price: '611.85', | ||
| }, | ||
| id: 'efbeaab', | ||
| }, | ||
| { | ||
| productMeta: { | ||
| title: 'Toyota Mustang', | ||
| desc: 'Aliquam quo et earum commodi porro commodi dolores voluptatem recusandae.', | ||
| imageUrl: | ||
| 'https://images.pexels.com/photos/1148955/pexels-photo-1148955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', | ||
| price: '779.00', | ||
| }, | ||
| id: '629e50f', | ||
| }, | ||
| { | ||
| productMeta: { | ||
| title: 'Porsche Roadster', | ||
| desc: 'Perspiciatis dolores dolorum unde aut ullam eveniet repellendus.', | ||
| imageUrl: | ||
| 'https://images.pexels.com/photos/1148955/pexels-photo-1148955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', | ||
| price: '486.57', | ||
| }, | ||
| id: '4c0af1e', | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import React from 'react'; | ||
| import { Box, Button, Typography, useTheme } from '@mui/material'; | ||
|
|
||
| import '../dashboard.styles.css'; | ||
|
|
||
| const Banner = () => { | ||
| const theme = useTheme(); | ||
| const classes = { | ||
| bannerContainer: { | ||
| height: '1007.93px', | ||
| background: "url('/assets/heroImage.png')", | ||
| backgroundRepeat: 'no-repeat', | ||
| backgroundSize: 'cover', | ||
| backgroundPosition: 'center', | ||
| opacity: '0.85', | ||
| position: 'relative', | ||
| zIndex: 1, | ||
| }, | ||
| bannerAdv: { | ||
| letterSpacing: '3px', | ||
| fontWeight: '600', | ||
| fontSize: '16px', | ||
| '&.MuiTypography-subtitle1': {}, | ||
| }, | ||
| bannerTitle: { | ||
| color: '#B88E2F', | ||
| fontSize: '52px', | ||
| fontStyle: 'normal', | ||
| fontWeight: '700', | ||
| lineHeight: '65px', | ||
| '&.MuiTypography-h6': {}, | ||
| }, | ||
| bannerDesc: { | ||
| width: '546px', | ||
| fontSize: '18px', | ||
| fontWeight: '500', | ||
| lineHeight: '24px', | ||
| letterSpacing: '1.2px', | ||
| m: '1rem 0', | ||
| '&.MuiTypography-body1': {}, | ||
| }, | ||
| button: { | ||
| backgroundColor: theme.palette.secondary.main, | ||
| color: theme.palette.primary.main, | ||
| p: '1.7rem 4rem', | ||
| width: '190px', | ||
| height: '24px', | ||
| textAlign: 'center', | ||
| borderRadius: 'none', | ||
| '&:hover': { | ||
| backgroundColor: theme.palette.secondary[400], | ||
| color: theme.palette.primary.main, | ||
| }, | ||
| }, | ||
| }; | ||
| return ( | ||
| <Box component='main' sx={classes.bannerContainer}> | ||
| <Box | ||
| display='flex' | ||
| flexDirection='column' | ||
| gap='1.5rem' | ||
| className='banner-box' | ||
| sx={{ backgroundColor: theme.palette.secondary[100] }} | ||
| > | ||
| <Box width='559px'> | ||
| <Typography variant='subtitle1' sx={classes.bannerAdv}> | ||
| New Arrival | ||
| </Typography> | ||
| <Typography variant='h6' sx={classes.bannerTitle}> | ||
| Discover Our New Collection | ||
| </Typography> | ||
| <Typography variant='body1' className='banner-main__desc' sx={classes.bannerDesc}> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec | ||
| ullamcorper mattis. | ||
| </Typography> | ||
| </Box> | ||
|
|
||
| <Button variant='contained' size='small' sx={classes.button}> | ||
| Buy Now | ||
| </Button> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default Banner; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| import { | ||
| Box, | ||
| Card, | ||
| CardMedia, | ||
| CardContent, | ||
| Typography, | ||
| CardActions, | ||
| Button, | ||
| Container, | ||
| useTheme, | ||
| Hidden, | ||
| Fade, | ||
| Backdrop, | ||
| } from '@mui/material'; | ||
| import { dataSource } from '../../../data'; | ||
| import { useState } from 'react'; | ||
|
|
||
| const FeaturedProducts = () => { | ||
| const theme = useTheme(); | ||
| const [hoveredCard, setHoveredCard] = useState<string | null>(null); | ||
|
|
||
| const handleCardHover = (cardId: string) => { | ||
| setHoveredCard(cardId); | ||
| }; | ||
|
|
||
| const handleCardLeave = () => { | ||
| setHoveredCard(null); | ||
| }; | ||
|
|
||
| const classes = { | ||
| card: { | ||
| maxWidth: '285px', | ||
| maxHeight: '446px', | ||
| gap: '1rem', | ||
| m: '1rem 0.5rem', | ||
| borderRadius: 'none', | ||
| }, | ||
| cardMedia: { | ||
| width: '285px', | ||
| height: '301px', | ||
| flexShrink: '0', | ||
| }, | ||
| cardContent: { | ||
| width: '285px', | ||
| height: '145px', | ||
| flexShrink: '0', | ||
| backgroundColor: 'var(--color-light-bg, #F4F5F7)', | ||
| }, | ||
| title: { | ||
| fontSize: '40px', | ||
| fontStyle: 'normal', | ||
| fontWeight: '700', | ||
| lineHeight: '120%', | ||
| m: '1.5rem', | ||
| }, | ||
| button: { | ||
| backgroundColor: theme.palette.primary.main, | ||
| color: theme.palette.secondary.main, | ||
| width: '202px', | ||
| height: '48px', | ||
| textAlign: 'center', | ||
| border: `1px solid ${theme.palette.secondary[200]}`, | ||
| '&:hover': { | ||
| backgroundColor: theme.palette.primary.main, | ||
| color: theme.palette.secondary.main[600], | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| return ( | ||
| <Box m='3.5rem 2.5rem'> | ||
| <Typography variant='h4' textAlign='center' sx={classes.title}> | ||
| Our Products | ||
| </Typography> | ||
| <Box display='flex' flexWrap='wrap' justifyContent='flex-start' gap='42px'> | ||
| {dataSource.map((item) => ( | ||
| <Box | ||
| key={item.id} | ||
| position='relative' | ||
| onMouseEnter={() => handleCardHover(item.id)} | ||
| onMouseLeave={handleCardLeave} | ||
| > | ||
| <Card sx={classes.card} elevation={0}> | ||
| <CardMedia | ||
| component='img' | ||
| alt='green iguana' | ||
| image={item?.productMeta?.imageUrl} | ||
| sx={classes.cardMedia} | ||
| /> | ||
| <CardContent sx={classes.cardContent}> | ||
| <Typography gutterBottom variant='h5' component='div'> | ||
| {item?.productMeta?.title} | ||
| </Typography> | ||
| <Typography variant='body2' color='text.secondary'> | ||
| {item?.productMeta?.desc} | ||
| </Typography> | ||
| </CardContent> | ||
| </Card> | ||
| <Fade in={hoveredCard === item.id}> | ||
| <Button | ||
| variant='contained' | ||
| size='small' | ||
| sx={{ | ||
| ...classes.button, | ||
| position: 'absolute', | ||
| top: '50%', | ||
| left: '50%', | ||
| transform: 'translate(-50%, -50%)', | ||
| }} | ||
| > | ||
| Add to cart | ||
| </Button> | ||
| </Fade> | ||
| </Box> | ||
| ))} | ||
| </Box> | ||
| <Box display='flex' justifyContent='center' m='2.5rem 0'> | ||
| <Button variant='contained' size='small' sx={classes.button}> | ||
| Show more | ||
| </Button> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default FeaturedProducts; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.