feat: home page responsiveness

components/company-info/CompanyInfo.jsx

       <Box
         sx={{
           display: 'flex',
+          flexDirection: { xs: 'column', md: 'row' },
           backgroundColor: 'primary.main',
           height: '100%',
+          paddingTop: '64px',
+          paddingBottom: '62px',
         }}
       >
         <Box
           sx={{
-            width: '50%',
+            width: { xs: '100%', lg: '50%' },
             height: '100%',
             display: 'flex',
             flexDirection: 'column',
-            textAlign: 'center',
+            alignItems: 'center',
+            justifyContent: 'center',
+            paddingBottom: { xs: '60px', md: '0px' },
           }}
         >
           <Typography
             variant="h3"
             sx={{
+              fontSize: { xs: '32px', md: '38px', lg: '48px' },
               textAlign: 'center',
               width: '100%',
-              height: 70,
-              mt: 13,
               color: 'white',
             }}
           >
               height: 60,
             }}
           >
-            <Image
-              src="/images/Clock Icon.svg"
-              alt="map"
-              width={50}
-              height={50}
-            />
+            <Image src="/images/clock.svg" alt="map" width={50} height={50} />
             <Typography
               sx={{
                 color: 'white',
             </Typography>
           </Box>
         </Box>
-        <Box sx={{ width: '50%' }}>
-          <Box sx={{ pt: 1 }}>
-            <Image
-              src="/images/maps 1.svg"
-              alt="map"
-              width={700}
-              height={600}
-            />
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          sx={{ width: { xs: '100%', lg: '50%' } }}
+        >
+          <Box>
+            <Image src="/images/maps.svg" alt="map" width={1280} height={720} />
           </Box>
         </Box>
       </Box>

components/features/FeatureItem.jsx

+import { Container, Typography } from '@mui/material';
+import Image from 'next/image';
+
+const FeatureItem = ({ image, alt, description }) => {
+  return (
+    <Container
+      sx={{
+        textAlign: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        marginTop: { xs: '50px' },
+      }}
+    >
+      <Image src={image} alt={alt} width={100} height={100} />
+      <Typography
+        sx={{
+          mt: 6,
+          px: 6,
+        }}
+      >
+        {description}
+      </Typography>
+    </Container>
+  );
+};
+
+export default FeatureItem;

components/features/Features.jsx

 import { Container, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import Image from 'next/image';
+import FeatureItem from './FeatureItem';
+import items from './items';
 
 const Features = () => {
   return (
           display: 'flex',
           width: '100%',
 
-          height: '100vh',
+          height: {
+            xs: '100%',
+            sm: '100%',
+          },
           flexDirection: 'column',
+          paddingBottom: '50px',
         }}
       >
         <Container
         >
           <Typography
             variant="h1"
-            sx={{ color: 'primary.main', textAlign: 'center', mt: 5 }}
+            sx={{
+              fontSize: { xs: '36px', sm: '48px', md: '64px', lg: '86px' },
+              color: 'primary.main',
+              textAlign: 'center',
+              mt: 5,
+            }}
           >
             Natural coffee
           </Typography>
             height: 60,
           }}
         >
-          <Image
-            src="/images/Line 4.svg"
-            alt="profile"
-            width={150}
-            height={50}
-          />
+          <Image src="/images/line.svg" alt="profile" width={150} height={50} />
           <Image
             src="/images/coffee-beans-icon.svg"
             alt="profile"
             width={100}
             height={50}
           />
-          <Image
-            src="/images/Line 4.svg"
-            alt="profile"
-            width={150}
-            height={50}
-          />
+          <Image src="/images/line.svg" alt="profile" width={150} height={50} />
         </Container>
         <Box
           sx={{
             display: 'flex',
+            flexDirection: { xs: 'column', lg: 'row' },
             width: '100%',
             height: '100%',
-            pt: 10,
           }}
         >
-          <Container
-            sx={{
-              textAlign: 'center',
-              display: 'flex',
-              flexDirection: 'column',
-            }}
-          >
-            <Image
-              src="/images/factory.svg"
-              alt="profile"
-              width={100}
-              height={100}
-            />
-            <Typography
-              sx={{
-                mt: 6,
-                px: 6,
-              }}
-            >
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-              Suspendisse euismod libero sit amet dui fermentum, vulputate
-              interdum massa pulvinar. Etiam tincidunt elit sed euismod
-              tincidunt. Etiam maximus, justo molestie condimentum tincidunt,
-              arcu velit tempus est, at auctor risus lectus at nunc.
-            </Typography>
-          </Container>
-          <Container
-            sx={{
-              textAlign: 'center',
-              display: 'flex',
-              flexDirection: 'column',
-            }}
-          >
-            <Image
-              src="/images/coffee-machine.svg"
-              alt="profile"
-              width={100}
-              height={100}
-            />
-            <Typography
-              sx={{
-                mt: 6,
-                px: 6,
-              }}
-            >
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-              Suspendisse euismod libero sit amet dui fermentum, vulputate
-              interdum massa pulvinar. Etiam tincidunt elit sed euismod
-              tincidunt. Etiam maximus, justo molestie condimentum tincidunt,
-              arcu velit tempus est, at auctor risus lectus at nunc.
-            </Typography>
-          </Container>
-          <Container
-            sx={{
-              textAlign: 'center',
-              display: 'flex',
-              flexDirection: 'column',
-            }}
-          >
-            <Image
-              src="/images/coffee-beans.svg"
-              alt="profile"
-              width={100}
-              height={100}
+          {items.map((item) => (
+            <FeatureItem
+              key={item.id}
+              image={item.image}
+              alt={item.alt}
+              description={item.description}
             />
-            <Typography
-              sx={{
-                mt: 6,
-                px: 6,
-              }}
-            >
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-              Suspendisse euismod libero sit amet dui fermentum, vulputate
-              interdum massa pulvinar. Etiam tincidunt elit sed euismod
-              tincidunt. Etiam maximus, justo molestie condimentum tincidunt,
-              arcu velit tempus est, at auctor risus lectus at nunc.
-            </Typography>
-          </Container>
+          ))}
         </Box>
       </Box>
     </>

components/features/items.js

+const features = [
+  {
+    id: 1,
+    description:
+      'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, content here, making it look like readable English.',
+    alt: 'image description',
+    image: '/images/factory.svg',
+  },
+  {
+    id: 2,
+    description:
+      'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, content here, making it look like readable English.',
+    alt: 'image description',
+    image: '/images/coffee-machine.svg',
+  },
+  {
+    id: 3,
+    description:
+      'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, content here, making it look like readable English.',
+    alt: 'image description',
+    image: '/images/coffee-beans.svg',
+  },
+];
+
+export default features;

components/forms/contact/ContactPageForm.jsx

+import {
+  Box,
+  Button,
+  Container,
+  Grid,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useFormik } from 'formik';
+import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
+import PropType from 'prop-types';
+import React from 'react';
+import { BASE_PAGE } from '../../../constants/pages';
+import { contactPageSchema } from '../../../schemas/contactSchema';
+
+const ContactPageForm = () => {
+  const { t } = useTranslation('forms', 'contact', 'common');
+  //const [error] = useState({ hasError: false, errorMessage: '' });
+
+  const handleSubmit = async (values) => {
+    console.log(values);
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      message: '',
+    },
+    validationSchema: contactPageSchema,
+    onSubmit: handleSubmit,
+    validateOnBlur: true,
+    enableReinitialize: true,
+  });
+
+  return (
+    <Container component="main" maxWidth="md" sx={{ mb: '60px' }}>
+      <Box
+        sx={{
+          marginTop: 32,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Typography fontSize={48}>{t('contact:Title')}</Typography>
+        <Box
+          component="form"
+          onSubmit={formik.handleSubmit}
+          sx={{ position: 'relative', mt: 1, p: 1 }}
+        >
+          <TextField
+            name="firstName"
+            label={t('forms:FirstName')}
+            margin="normal"
+            value={formik.values.firstName}
+            onChange={formik.handleChange}
+            error={formik.touched.firstName && Boolean(formik.errors.firstName)}
+            helperText={formik.touched.firstName && formik.errors.firstName}
+            autoFocus
+            fullWidth
+          />
+          <TextField
+            name="lastName"
+            label={t('forms:LastName')}
+            margin="normal"
+            value={formik.values.lastName}
+            onChange={formik.handleChange}
+            error={formik.touched.lastName && Boolean(formik.errors.lastName)}
+            helperText={formik.touched.lastName && formik.errors.lastName}
+            autoFocus
+            fullWidth
+          />
+          <TextField
+            name="email"
+            label={t('forms:Email')}
+            margin="normal"
+            value={formik.values.email}
+            onChange={formik.handleChange}
+            error={formik.touched.email && Boolean(formik.errors.email)}
+            helperText={formik.touched.email && formik.errors.email}
+            autoFocus
+            fullWidth
+          />
+          <TextField
+            name="message"
+            label={t('forms:Message')}
+            multiline
+            margin="normal"
+            value={formik.values.message}
+            onChange={formik.handleChange}
+            error={formik.touched.message && Boolean(formik.errors.message)}
+            helperText={formik.touched.message && formik.errors.message}
+            rows={4}
+            autoFocus
+            fullWidth
+          />
+          <Button
+            type="submit"
+            variant="contained"
+            sx={{ mt: 3, mb: 2 }}
+            fullWidth
+          >
+            {t('contact:SendBtn')}
+          </Button>
+          <Grid container justifyContent="center">
+            <Link href={BASE_PAGE}>
+              <Typography>{t('common:Back')}</Typography>
+            </Link>
+          </Grid>
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+ContactPageForm.propTypes = {
+  submitHandler: PropType.func,
+};
+
+export default ContactPageForm;

components/hero/Hero.jsx

   const router = useRouter();
   return (
     <>
-      <Box sx={{ display: 'flex', width: '100%', height: '100vh' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column', md: 'row' },
+          width: '100%',
+          height: { xs: '100vh', md: '1024px' },
+        }}
+      >
         <Box
           sx={{
-            width: '50%',
+            width: { xs: '100%', md: '50%' },
             height: '100%',
             display: 'flex',
             flexDirection: 'column',
+            justifyContent: { xs: 'space-around', md: 'center' },
             backgroundColor: 'primary.light',
           }}
         >
+          <Box display="flex" flexDirection="column">
+            <Typography
+              variant="h1"
+              sx={{
+                fontSize: { xs: '96px', md: '64px', lg: '96px' },
+                ml: 10,
+                color: 'white',
+              }}
+            >
+              Its a
+            </Typography>
+            <Typography
+              variant="h1"
+              sx={{
+                fontSize: { xs: '96px', md: '64px', lg: '96px' },
+                ml: 10,
+                color: 'white',
+              }}
+            >
+              {' '}
+              Coffee Break
+            </Typography>
+          </Box>
           <Typography
-            variant="h1"
+            display="flex"
+            justifyItems="center"
             sx={{
+              fontSize: { xs: '22px', md: '18px' },
               ml: 10,
-              mt: '30%',
+              mt: { md: '50px' },
               color: 'white',
-              height: 100,
+              pr: '20%',
             }}
-          >
-            Its a
-          </Typography>
-          <Typography variant="h1" sx={{ ml: 10, color: 'white', height: 100 }}>
-            {' '}
-            Coffee Break
-          </Typography>
-          <Typography
-            sx={{ mt: 6, p: 'auto', px: '10%', color: 'white', pr: '20%' }}
           >
             If you drink coffee regulary you will know the difference between
             fresh coffee and old coffee. Our goal is to provide the freshest
           </Typography>
           <Box
             sx={{
+              mt: { md: '50px' },
               width: '100%',
               display: 'flex',
-              mt: 5,
+              flexDirection: { xs: 'column', sm: 'row' },
+              ml: { md: 10 },
+              justifyContent: { sm: 'space-evenly', md: 'flex-start' },
+              alignItems: { xs: 'center' },
             }}
           >
             <Button
               sx={{
                 backgroundColor: '#CBA213',
+                mr: { md: 4 },
                 height: 50,
                 width: 150,
                 textTransform: 'none',
-                ml: 10,
+
                 color: 'white',
               }}
               onClick={() => router.push(PRODUCTS_PAGE)}
             </Button>
             <Button
               sx={{
-                height: 72,
-                width: 250,
+                display: { xs: 'none', sm: 'flex' },
                 textTransform: 'none',
-                mt: -2,
-                ml: 2,
                 color: 'white',
               }}
               startIcon={
                 <Image
                   src="/images/Play.svg"
                   alt="profile"
-                  width={72}
-                  height={72}
+                  width={50}
+                  height={50}
                 />
               }
             >
             </Button>
           </Box>
         </Box>
-        <Box sx={{ width: '50%', backgroundColor: 'white' }}>
+        <Box
+          sx={{
+            display: { xs: 'none', md: 'flex' },
+            backgroundColor: 'white',
+          }}
+        >
           <Box sx={{ mt: 10, ml: -12 }}>
             <Image
               src="/images/Hero-Image.png"
               alt="profile"
-              width={700}
-              height={600}
+              width={818}
+              height={796}
             />
           </Box>
         </Box>

components/layout/navbar/Navbar.jsx

 import {
   BASE_PAGE,
   CART_PAGE,
+  CONTACT_PAGE,
   PRODUCTS_PAGE,
   PROFILE_PAGE,
 } from '../../../constants/pages';
             </Typography>
           </Link>
 
-          <Link key="contact" href={BASE_PAGE}>
+          <Link key="contact" href={CONTACT_PAGE}>
             <Typography
               textAlign="center"
               sx={{

components/product-card/ProductCard.jsx

         backgroundColor: '#F5ECD4',
       }}
     >
-      <Box width="100%">
+      <Box width="100%" sx={{ cursor: 'pointer' }}>
         <NextLink
           style={{ cursor: 'pointer' }}
           href={`/products/${product.customID}`}

components/product-type/ProductType.jsx

       <FormControl sx={{ width: '200px' }}>
         <InputLabel id="product-type-label">Product Type</InputLabel>
         <Select
+          MenuProps={{
+            disableScrollLock: true,
+          }}
           label="Product Type"
           labelId="product-type-label"
           id="product-type-label"

components/products/featured-product/FeaturedProduct.jsx

+import { Container } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { Box } from '@mui/system';
 import PropType from 'prop-types';
 import { useStore, useStoreUpdate } from '../../../store/cart-context';
 import ProductInfo from './ProductInfo';
 
 const FeaturedProduct = ({ product, bColor, image, side }) => {
+  const matches = useMediaQuery('(min-width: 900px)');
   const data = { name: product.name, description: product.description };
   const { addCartValue } = useStoreUpdate();
   const { cartStorage } = useStore();
     <Box
       sx={{
         width: '100%',
-        maxHeight: 500,
-        height: 500,
         backgroundColor: bColor === 'dark' ? 'primary.main' : 'primary.light',
         display: 'flex',
+        flexDirection: { xs: 'column', md: 'row' },
+        padding: '30px 0 30px 0',
+        alignItems: { md: 'center' },
       }}
     >
-      {side === 'left' ? (
-        <ProductImage image={image}></ProductImage>
-      ) : (
-        <ProductInfo
-          bColor={bColor}
-          side={side}
-          data={data}
-          addProductToCart={addProductToCart}
-          inCart={inCart}
-        ></ProductInfo>
-      )}
-      {side === 'left' ? (
-        <ProductInfo
-          bColor={bColor}
-          side={side}
-          data={data}
-          addProductToCart={addProductToCart}
-          inCart={inCart}
-        ></ProductInfo>
-      ) : (
-        <ProductImage image={image}></ProductImage>
-      )}
+      <Container
+        maxWidth="xl"
+        sx={{ display: { md: 'flex' }, alignItems: { md: 'center' } }}
+      >
+        {side === 'left' ? (
+          <ProductImage image={image}></ProductImage>
+        ) : !matches ? (
+          <ProductImage image={image}></ProductImage>
+        ) : (
+          <ProductInfo
+            bColor={bColor}
+            side={side}
+            data={data}
+            addProductToCart={addProductToCart}
+            inCart={inCart}
+          ></ProductInfo>
+        )}
+        {side === 'left' ? (
+          <ProductInfo
+            bColor={bColor}
+            side={side}
+            data={data}
+            addProductToCart={addProductToCart}
+            inCart={inCart}
+          ></ProductInfo>
+        ) : !matches ? (
+          <ProductInfo
+            bColor={bColor}
+            side={side}
+            data={data}
+            addProductToCart={addProductToCart}
+            inCart={inCart}
+          ></ProductInfo>
+        ) : (
+          <ProductImage image={image}></ProductImage>
+        )}
+      </Container>
     </Box>
   );
 };

components/products/featured-product/ProductImage.jsx

   return (
     <Box
       sx={{
-        width: '50%',
-        maxWidth: '50%',
+        display: 'flex',
+        width: { xs: '100%', md: '50%' },
         height: '100%',
-        pl: '10%',
-        zIndex: 5,
+        justifyContent: { xs: 'center' },
       }}
     >
-      <Box
-        sx={{
-          position: 'relative',
-          zIndex: 3,
-        }}
-      >
-        <Image src={image} alt="profile" width={500} height={500} />
-      </Box>
-      <Box
-        sx={{
-          position: 'relative',
-          zIndex: 4,
-          width: 300,
-          height: 300,
-          top: -230,
-          left: 200,
-        }}
-      >
-        <Image
-          src="/images/beans 1.png"
-          alt="profile"
-          width={300}
-          height={300}
-        />
-      </Box>
+      <Image src={image} alt="profile" width={500} height={500} />
     </Box>
   );
 };

components/products/featured-product/ProductInfo.jsx

 import PropType from 'prop-types';
 import { useState } from 'react';
 
-const ProductInfo = ({ data, bColor, side, addProductToCart, inCart }) => {
+const ProductInfo = ({ data, bColor, addProductToCart, inCart }) => {
   const [quantity, setQuantity] = useState(1);
 
   return (
       sx={{
         display: 'flex',
         flexDirection: 'column',
-        width: '50%',
-        maxWidth: '50%',
+        alignItems: { xs: 'center' },
+        width: { xs: '100%', md: '50%' },
         height: '100%',
-        pl: side === 'right' ? '10%' : 0,
       }}
     >
-      <Typography variant="h3" sx={{ height: 60, mt: 15, color: 'white' }}>
+      <Typography
+        variant="h3"
+        sx={{ height: 60, mt: { xs: 5 }, color: 'white' }}
+      >
         {data.name}
       </Typography>
       <Box
       </Box>
       <Typography
         sx={{
-          pr: '20%',
           color: 'white',
         }}
       >
           width: '100%',
           display: 'flex',
           mt: 4,
+          flexDirection: { xs: 'column', md: 'row' },
+          alignItems: { xs: 'center' },
+          justifyContent: { md: 'center' },
         }}
       >
         <ButtonGroup
           aria-label="small outlined button group"
           sx={{
             height: 50,
-            mr: 3,
             backgroundColor: bColor === 'light' ? '#664c47' : '#8f7772',
             color: 'white',
             border: 0,
         </ButtonGroup>
         <Button
           sx={{
+            mt: { xs: 2, md: 0 },
+            ml: { md: 2 },
             backgroundColor: '#CBA213',
             height: 50,
             width: 150,

components/products/featured-products-list/FeaturedPorductsList.jsx

     <Box
       sx={{
         width: '100%',
-        minHeight: 1000,
         display: 'flex',
         flexDirection: 'column',
       }}

constants/pages.js

 export const REGISTER_PAGE = '/auth/register';
 export const FORGOT_PASSWORD_PAGE = '/auth/forgot-password';
 export const SINGLE_DATA_PAGE = '/single-data/';
+export const CONTACT_PAGE = '/contact';

pages/contact/index.js → pages/contact.js

 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import ContactForm from '../../components/forms/contact/ContactForm';
+import ContactPageForm from '../components/forms/contact/ContactPageForm';
 
-const ContactPage = () => {
-  return <ContactForm />;
+const Contact = () => {
+  return <ContactPageForm />;
 };
 
 export async function getStaticProps({ locale }) {
   };
 }
 
-export default ContactPage;
+export default Contact;

pages/index.js

           <title>NextJS template</title>
           <meta name="description" content="Random data with pagination..." />
         </Head>
-        <Hero></Hero>
+        <Hero />
         <FeaturedProductsList
           featuredProducts={props.featuredProducts}
         ></FeaturedProductsList>
-        <Features></Features>
-        <CompanyInfo></CompanyInfo>
+        <Features />
+        <CompanyInfo />
       </Box>
     </>
   );

pages/products/index.js

 import { useInfiniteProducts } from '../../hooks/useInfiniteQuery';
 
 const Products = () => {
-  const [filter, setFilter] = useState('');
-  const [sort, setSort] = useState('');
+  const [filter, setFilter] = useState('All');
+  const [sort, setSort] = useState('asc');
   const { data, isLoading, fetchNextPage, hasNextPage } =
     useInfiniteProducts(filter);
 

public/images/Line 5.svg

-<svg width="120" height="3" viewBox="0 0 120 3" fill="none" xmlns="http://www.w3.org/2000/svg">
-<line y1="1.5" x2="120" y2="1.5" stroke="#8F7772" stroke-opacity="0.7" stroke-width="3"/>
-</svg>

schemas/contactSchema.js

 export const contactSchema = Yup.object().shape({
   email: Yup.string().email('Enter valid email').required('Email is required'),
 });
+
+export const contactPageSchema = Yup.object().shape({
+  firstName: Yup.string().required('First name is required'),
+  lastName: Yup.string().required('Last name is required'),
+  email: Yup.string().email('Enter valid email').required('Email is required'),
+  message: Yup.string().required('Message is required'),
+});