Giter Club home page Giter Club logo

coffee-shop's Introduction

Coffee Shop

React + Vite + Ts + Mui

Created by

Sina Zinsaz

Ui/Ux

run project

npm run dev

coffee-shop's People

Contributors

sinazzzz avatar

Stargazers

avatar avatar avatar avatar

Watchers

avatar

coffee-shop's Issues

Component Title 

import { Box } from '@mui/material';

export default function Title() {
  return (
    <Box
        component='div'
        sx={{
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          textAlign: 'center',
        }}
      >
        <Box
          color="white"
          fontSize={37}
          fontWeight='600'
          mx='2rem'
          lineHeight='1.2'
        >
          Coffee so good, your taste buds will love it.
        </Box>
      </Box>
  )
}

component products card 

import { Box, Card, Grid, Typography } from "@mui/material";
import AddIcon from '@mui/icons-material/Add';
import { Product } from "../../../interfaces/Product";

const products: Product[] = [
    {
      id: 1,
      title: "Cappucino",
      description: "with Chocolate",
      price: 4.53,
      image: "https://s8.uupload.ir/files/rectangle_1706_i5d1.png"
    },
    {
      id: 2,
      title: "Espresso",
      description: "Strong and Dark",
      price: 3.99,
      image: "https://s8.uupload.ir/files/rectangle_1706_i5d1.png"
    },
    {
        id: 2,
        title: "Espresso",
        description: "Strong and Dark",
        price: 3.99,
        image: "https://s8.uupload.ir/files/rectangle_1706_i5d1.png"
      },
      {
        id: 2,
        title: "Espresso",
        description: "Strong and Dark",
        price: 3.99,
        image: "https://s8.uupload.ir/files/rectangle_1706_i5d1.png"
      },
  ];

export default function ProductCard() {
  return (
    <Grid container spacing={2} position='relative' zIndex='1'>
        {products.map((product) => (
        <Grid item key={product.id} xs={6} sm={6} md={6} lg={6}>
            <Card sx={{ width: '100%', display: 'flex', flexDirection: 'column', borderRadius: '20px' , my:'0.5rem' }}>
                {/* img */}
                <Box sx={{ width: '94%', m:'0.3rem'}} component='img' src={product.image} />
                <Box mx='1rem'>
                    {/* title */}
                    <Typography fontSize='1.2rem' fontWeight='bold'>{product.title}</Typography>
                    {/* des */}
                    <Typography fontSize='1rem' color='#9B9B9B'>{product.description}</Typography>
                    {/* price */}
                    <Box display='flex' justifyContent='space-between' alignItems='center' my='1rem'>
                    <Typography fontWeight='bold' fontSize='1.5rem'>$ {product.price.toFixed(2)}</Typography>
                    <Box
                    component='button'
                    sx={{
                        background: '#C67C4E',
                        color: 'white',
                        height: '2.5rem',
                        width: '2.5rem',
                        borderRadius: '15px',
                        border: 'none',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center'
                    }}
                    >
                        <AddIcon />
                    </Box>
                    </Box>
                </Box>
             </Card>
         </Grid>
         ))}
     </Grid>
  )
}

Background Home 

import { Box } from '@mui/material'

export default function Background() {
  return (
    <Box sx={{background: 'linear-gradient(to left bottom, #131313, #313131)' , zIndex:0}}
            width='100%' height='40vh'></Box>
  )
}

Profile 

import { Box, Grid, IconButton, Typography } from '@mui/material'
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';

export default function Profile() {
  return (
    <Grid container spacing={2} display='flex' justifyContent='center'      justifyItems='center' alignContent='center' alignItems='center' mb='2rem' mt='3rem'>
        <Grid item xs={10}>
            {/* Location */}
            <Typography color='#B7B7B7'>Location</Typography>
            <Box display='flex' alignItems='center'>
                <Typography color='#DDDDDD' sx={{fontWeight: 600, fontSize: '20px'}}>Iran, Kashan</Typography>
                <IconButton>
                    <KeyboardArrowDownIcon sx={{color:'white'}}/>
                </IconButton>
            </Box>
        </Grid>
        {/* profile */}
        <Grid item xs={2}>
            <Box component="img" src="https://s6.uupload.ir/files/user_0ek2.jpg"
            sx={{width:'3rem' , borderRadius:'10px'}} />
        </Grid>
    </Grid>
  )
}

Loading 

<Box
 component="div"
 display="flex"
 flexDirection="column"
 justifyContent="center"
 textAlign="center"
>
 <Box component="div" sx={{ fontWeight: "700", fontSize: "larger" }}>
   <Box component="p">Loading...</Box>
 </Box>
 <Box component="div" className="loading-child">
   <Box component="div" id="square1"></Box>
   <Box component="div" id="square2"></Box>
   <Box component="div" id="square3"></Box>
   <Box component="div" id="square4"></Box>
   <Box component="div" id="square5"></Box>
 </Box>
</Box>

style

/* loading */

.loading-child {
    --square: 26px;
    --offset: 30px;
    --duration: 2.4s;
    --delay: 0.2s;
    --timing-function: ease-in-out;
    --in-duration: 0.4s;
    --in-delay: 0.1s;
    --in-timing-function: ease-out;
    width: calc(3 * var(--offset) + var(--square));
    height: calc(2 * var(--offset) + var(--square));
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 30px;
    position: relative;
  }
  
  .loading-child div {
    display: inline-block;
    background: rgb(48, 48, 201);
    border: none;
    border-radius: 2px;
    width: var(--square);
    height: var(--square);
    position: absolute;
    padding: 0px;
    margin: 0px;
    font-size: 6pt;
    color: black;
  }
  
  .loading-child #square1 {
    left: calc(0 * var(--offset));
    top: calc(0 * var(--offset));
    animation: square1 var(--duration) var(--delay) var(--timing-function)
        infinite,
      squarefadein var(--in-duration) calc(1 * var(--in-delay))
        var(--in-timing-function) both;
  }
  
  .loading-child #square2 {
    left: calc(0 * var(--offset));
    top: calc(1 * var(--offset));
    animation: square2 var(--duration) var(--delay) var(--timing-function)
        infinite,
      squarefadein var(--in-duration) calc(1 * var(--in-delay))
        var(--in-timing-function) both;
  }
  
  .loading-child #square3 {
    left: calc(1 * var(--offset));
    top: calc(1 * var(--offset));
    animation: square3 var(--duration) var(--delay) var(--timing-function)
        infinite,
      squarefadein var(--in-duration) calc(2 * var(--in-delay))
        var(--in-timing-function) both;
  }
  
  .loading-child #square4 {
    left: calc(2 * var(--offset));
    top: calc(1 * var(--offset));
    animation: square4 var(--duration) var(--delay) var(--timing-function)
        infinite,
      squarefadein var(--in-duration) calc(3 * var(--in-delay))
        var(--in-timing-function) both;
  }
  
  .loading-child #square5 {
    left: calc(3 * var(--offset));
    top: calc(1 * var(--offset));
    animation: square5 var(--duration) var(--delay) var(--timing-function)
        infinite,
      squarefadein var(--in-duration) calc(4 * var(--in-delay))
        var(--in-timing-function) both;
  }
  
  @keyframes square1 {
    0% {
      left: calc(0 * var(--offset));
      top: calc(0 * var(--offset));
    }
  
    8.333% {
      left: calc(0 * var(--offset));
      top: calc(1 * var(--offset));
    }
  
    100% {
      left: calc(0 * var(--offset));
      top: calc(1 * var(--offset));
    }
  }
  
  @keyframes square2 {
    0% {
      left: calc(0 * var(--offset));
      top: calc(1 * var(--offset));
    }
  
    8.333% {
      left: calc(0 * var(--offset));
      top: calc(2 * var(--offset));
    }
  
    16.67% {
      left: calc(1 * var(--offset));
      top: calc(2 * var(--offset));
    }
  
    25.00% {
      left: calc(1 * var(--offset));
      top: calc(1 * var(--offset));
    }
  
    83.33% {
      left: calc(1 * var(--offset));
      top: calc(1 * var(--offset));
    }
  
    91.67% {
      left: calc(1 * var(--offset));
      top: calc(0 * var(--offset));
    }
  
    100% {
      left: calc(0 * var(--offset));
      top: calc(0 * var(--offset));
    }
  }
  
  @keyframes square3 {
    0%,
    100% {
      left: calc(1 * var(--offset));
      top: calc(1 * var(--offset));
    }
  
    16.67% {
      left: calc(1 * var(--offset));
      top: calc(1 * var(--offset));
    }
  
    25.00% {
      left: calc(1 * var(--offset));
      top: calc(0 * var(--offset));
    }
  
    33.33% {
      left: calc(2 * var(--offset));
      top: calc(0 * var(--offset));
    }
  
    41.67% {
      left: calc(2 * var(--offset));
      top: calc(1 * var(--offset));
    }
  
    66.67% {
      left: calc(2 * var(--offset));
      top: calc(1 * var(--offset));
    }
  
    75.00% {
      left: calc(2 * var(--offset));
      top: calc(2 * var(--offset));
    }
  
    83.33% {
      left: calc(1 * var(--offset));
      top: calc(2 * var(--offset));
    }
  
    91.67% {
      left: calc(1 * var(--offset));
      top: calc(1 * var(--offset));
    }
  }
  
  @keyframes square4 {
    0% {
      left: calc(2 * var(--offset));
      top: calc(1 * var(--offset));
    }
  
    33.33% {
      left: calc(2 * var(--offset));
      top: calc(1 * var(--offset));
    }
  
    41.67% {
      left: calc(2 * var(--offset));
      top: calc(2 * var(--offset));
    }
  
    50.00% {
      left: calc(3 * var(--offset));
      top: calc(2 * var(--offset));
    }
  
    58.33% {
      left: calc(3 * var(--offset));
      top: calc(1 * var(--offset));
    }
  
    100% {
      left: calc(3 * var(--offset));
      top: calc(1 * var(--offset));
    }
  }
  
  @keyframes square5 {
    0% {
      left: calc(3 * var(--offset));
      top: calc(1 * var(--offset));
    }
  
    50.00% {
      left: calc(3 * var(--offset));
      top: calc(1 * var(--offset));
    }
  
    58.33% {
      left: calc(3 * var(--offset));
      top: calc(0 * var(--offset));
    }
  
    66.67% {
      left: calc(2 * var(--offset));
      top: calc(0 * var(--offset));
    }
  
    75.00% {
      left: calc(2 * var(--offset));
      top: calc(1 * var(--offset));
    }
  
    100% {
      left: calc(2 * var(--offset));
      top: calc(1 * var(--offset));
    }
  }
  
  @keyframes squarefadein {
    0% {
      transform: scale(0.75);
      opacity: 0;
    }
  
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

Component GetStartBtn 

import { Box } from '@mui/material'

export default function GetStartBtn() {
  return (
    <Box
        component='div'
        sx={{
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        textAlign: 'center',
        }}
    >
    <Box component='button' 
      sx={{color:'white' , width:'90%' , height:'5rem' , border:'none' , mb:'3rem' ,
        borderRadius:'20px' , backgroundColor:'#C67C4E' , fontSize:24 , fontWeight:500}}>
       Get Started
    </Box>
  </Box>
  )
}

component Background 

import { Box } from "@mui/material";

export default function Background() {
  return (
    <>
        <Box component='img' src="https://s8.uupload.ir/files/image_3_ysrq.png" alt="intro img" 
        sx={{width:'100%'}} />
    </>
  )
}

interface Product 

export interface Product {
    id: number;
    title: string;
    description: string;
    price: number;
    image: string;
}

Component Description 

import { Box } from "@mui/material";

export default function Description() {
  return (
    <Box
    component='div'
    sx={{
      width: '100%',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      textAlign: 'center',
    }}
  >
    <Box
      color="#A9A9A9"
      fontSize={15}
      fontWeight='600'
      mx='3rem'
      my='1rem'
      lineHeight='1.2'
    >
      The best grain, the finest roast, the powerful flavor.
    </Box>
  </Box>
  )
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.