ntasicc
/
coffee
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

feat: landing page

pull/1/head
ntasicc 3 jaren geleden
bovenliggende
dceebbce37
commit
f3403c2721
34 gewijzigde bestanden met toevoegingen van 853 en 222 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 3
    0
      assets/images/svg/cart.svg
  2. 113
    0
      components/company-info/CompanyInfo.jsx
  3. 147
    0
      components/features/Features.jsx
  4. 97
    0
      components/hero/Hero.jsx
  5. 5
    2
      components/layout/base-layout/Layout.jsx
  6. 0
    0
      components/layout/footer/Footer.jsx
  7. 73
    182
      components/layout/navbar/Navbar.jsx
  8. 35
    0
      components/products/featured-product/FeaturedProduct.jsx
  9. 48
    0
      components/products/featured-product/ProductImage.jsx
  10. 111
    0
      components/products/featured-product/ProductInfo.jsx
  11. 28
    0
      components/products/featured-products-list/FeaturedPorductsList.jsx
  12. 1
    0
      models/user.js
  13. 16
    14
      pages/_app.js
  14. 25
    21
      pages/index.js
  15. 5
    0
      public/images/Clock Icon.svg
  16. BIN
      public/images/Hero-Image.png
  17. BIN
      public/images/Item 2.png
  18. 3
    0
      public/images/Line 4.svg
  19. 3
    0
      public/images/Line 5.svg
  20. 4
    0
      public/images/Play.svg
  21. 25
    0
      public/images/Stars.svg
  22. BIN
      public/images/beans 1.png
  23. 3
    0
      public/images/cart.svg
  24. BIN
      public/images/coffee-bag 1.png
  25. 9
    0
      public/images/coffee-beans-icon.svg
  26. 9
    0
      public/images/coffee-beans.svg
  27. 9
    0
      public/images/coffee-machine.svg
  28. 9
    0
      public/images/factory.svg
  29. 9
    0
      public/images/mail.svg
  30. 9
    0
      public/images/maps 1.svg
  31. 9
    0
      public/images/pin.svg
  32. 3
    0
      public/images/profile.svg
  33. 10
    3
      styles/globals.css
  34. 32
    0
      styles/muiTheme.js

+ 3
- 0
assets/images/svg/cart.svg Bestand weergeven

@@ -0,0 +1,3 @@
<svg width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.74999 7.08527V5.38527C4.74999 2.95767 6.64549 0.977173 8.99999 0.977173C11.3545 0.977173 13.25 2.95767 13.25 5.38527V7.08527H16.1876C16.3222 7.08537 16.4517 7.13646 16.5501 7.22825C16.6485 7.32005 16.7085 7.44572 16.718 7.57997L17.7278 22.455C17.7367 22.5955 17.6897 22.7339 17.597 22.8399C17.5043 22.9459 17.3735 23.011 17.2331 23.0211H0.802586C0.661915 23.0211 0.527006 22.9652 0.427537 22.8657C0.328067 22.7663 0.272186 22.6313 0.272186 22.4907V22.455L1.28199 7.57997C1.29103 7.44542 1.35083 7.31932 1.44929 7.22718C1.54775 7.13503 1.67753 7.0837 1.81239 7.08357L4.74999 7.08527ZM6.34459 7.08527H11.6571V5.38527C11.6571 3.82297 10.4671 2.57007 8.99999 2.57007C7.53289 2.57007 6.34459 3.82297 6.34459 5.38527V7.08527ZM1.93989 21.4299H16.0601L15.1965 8.67987H2.80519L1.93989 21.4299Z" fill="#664C47"/>
</svg>

+ 113
- 0
components/company-info/CompanyInfo.jsx Bestand weergeven

@@ -0,0 +1,113 @@
import { Typography } from '@mui/material';
import { Box } from '@mui/system';
import Image from 'next/image';
const CompanyInfo = () => {
return (
<>
<Box sx={{ display: 'flex', backgroundColor: 'primary.main' }}>
<Box
sx={{
width: '50%',
height: '100%',
display: 'flex',
flexDirection: 'column',
textAlign: 'center',
}}
>
<Typography
variant="h3"
sx={{
textAlign: 'center',
width: '100%',
height: 70,
mt: 20,
color: 'white',
}}
>
We are waiting for you!
</Typography>
<Box
sx={{
mt: 3,
display: 'flex',
width: '100%',
justifyContent: 'center',
height: 60,
textAlign: 'center',
}}
>
<Image src="/images/pin.svg" alt="map" width={50} height={50} />
<Typography
sx={{
color: 'white',
pt: 2,
pl: 2,
}}
>
Nis, Zetska 36
</Typography>
</Box>
<Box
sx={{
mt: 3,
display: 'flex',
width: '100%',
justifyContent: 'center',
height: 60,
}}
>
<Image
src="/images/Clock Icon.svg"
alt="map"
width={50}
height={50}
/>
<Typography
sx={{
color: 'white',
pt: 2,
pl: 2,
mr: -4,
}}
>
Every day: 09 to 18
</Typography>
</Box>
<Box
sx={{
mt: 3,
display: 'flex',
width: '100%',
justifyContent: 'center',
height: 60,
}}
>
<Image src="/images/mail.svg" alt="map" width={50} height={50} />
<Typography
sx={{
color: 'white',
pt: 2,
pl: 2,
mr: -3,
}}
>
info@coffee.com
</Typography>
</Box>
</Box>
<Box sx={{ width: '50%' }}>
<Box sx={{ pt: 8 }}>
<Image
src="/images/maps 1.svg"
alt="map"
width={700}
height={600}
/>
</Box>
</Box>
</Box>
</>
);
};

export default CompanyInfo;

+ 147
- 0
components/features/Features.jsx Bestand weergeven

@@ -0,0 +1,147 @@
import { Container, Typography } from '@mui/material';
import { Box } from '@mui/system';
import Image from 'next/image';

const Features = () => {
return (
<>
<Box
sx={{
display: 'flex',
width: '100%',
height: '100%',
flexDirection: 'column',
}}
>
<Container
sx={{
width: '100%',
height: 140,
}}
>
<Typography
variant="h1"
sx={{ color: 'primary.main', textAlign: 'center', mt: 5 }}
>
Natural coffee
</Typography>
</Container>
<Container
sx={{
width: '100%',
textAlign: 'center',
height: 60,
}}
>
<Image
src="/images/Line 4.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}
/>
</Container>
<Box
sx={{
display: 'flex',
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}
/>
<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>
</>
);
};

export default Features;

+ 97
- 0
components/hero/Hero.jsx Bestand weergeven

@@ -0,0 +1,97 @@
import { Button, Typography } from '@mui/material';
import { Box } from '@mui/system';
import Image from 'next/image';

const Hero = () => {
return (
<>
<Box sx={{ display: 'flex' }}>
<Box
sx={{
width: '50%',
height: '100%',
display: 'flex',
flexDirection: 'column',
backgroundColor: 'primary.light',
}}
>
<Typography
variant="h1"
sx={{
ml: 10,
mt: '30%',
color: 'white',
height: 100,
}}
>
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
coffee beans in each day.
</Typography>
<Box
sx={{
width: '100%',
display: 'flex',
}}
>
<Button
sx={{
backgroundColor: '#CBA213',
height: 50,
width: 150,
textTransform: 'none',
ml: 10,
color: 'white',
}}
>
{' '}
Explore the Shop
</Button>
<Button
sx={{
height: 72,
width: 250,
textTransform: 'none',
mt: -2,
ml: 2,
color: 'white',
}}
startIcon={
<Image
src="/images/Play.svg"
alt="profile"
width={72}
height={72}
/>
}
>
{' '}
How to make
</Button>
</Box>
</Box>
<Box sx={{ width: '50%', backgroundColor: 'white' }}>
<Box sx={{ mt: 10, ml: -12 }}>
<Image
src="/images/Hero-Image.png"
alt="profile"
width={700}
height={600}
/>
</Box>
</Box>
</Box>
</>
);
};

export default Hero;

+ 5
- 2
components/layout/base-layout/Layout.jsx Bestand weergeven

@@ -1,10 +1,13 @@
import { Box } from '@mui/material';
import Navbar from '../navbar/Navbar';

function Layout(props) {
return (
<>
<Navbar />
<main>{props.children}</main>
<Box sx={{ width: '100%' }}>
<Navbar />
<main>{props.children}</main>
</Box>
</>
);
}

+ 0
- 0
components/layout/footer/Footer.jsx Bestand weergeven


+ 73
- 182
components/layout/navbar/Navbar.jsx Bestand weergeven

@@ -1,207 +1,98 @@
import AdbIcon from '@mui/icons-material/Adb';
import MenuIcon from '@mui/icons-material/Menu';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import IconButton from '@mui/material/IconButton';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Toolbar from '@mui/material/Toolbar';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import { signOut, useSession } from 'next-auth/react';
import Image from 'next/image';
import Link from 'next/link';
import { useState } from 'react';
import { LOGIN_PAGE, PROFILE_PAGE } from '../../../constants/pages';

const pages = ['Link 1', 'Link 2', 'Link 3', 'Link4'];
const pages = ['Home', 'Menu', 'About', 'Store', 'Contact'];

const Navbar = () => {
const { data: session } = useSession();
const [anchorElNav, setAnchorElNav] = useState(null);
const [anchorElUser, setAnchorElUser] = useState(null);
// const { data: session } = useSession();
// const [anchorElNav, setAnchorElNav] = useState(null);
// const [anchorElUser, setAnchorElUser] = useState(null);

const handleOpenNavMenu = (event) => {
setAnchorElNav(event.currentTarget);
};
const handleOpenUserMenu = (event) => {
setAnchorElUser(event.currentTarget);
};
// const handleOpenNavMenu = (event) => {
// setAnchorElNav(event.currentTarget);
// };
// const handleOpenUserMenu = (event) => {
// setAnchorElUser(event.currentTarget);
// };

const handleCloseNavMenu = () => {
setAnchorElNav(null);
};
// const handleCloseNavMenu = () => {
// setAnchorElNav(null);
// };

const handleCloseUserMenu = () => {
setAnchorElUser(null);
};
// const handleCloseUserMenu = () => {
// setAnchorElUser(null);
// };

function logoutHandler() {
signOut();
}
// function logoutHandler() {
// signOut();
// }

return (
<AppBar
position="static"
sx={{ zIndex: 100, position: 'fixed', top: 0, left: 0 }}
position="absolute"
sx={{
zIndex: 100,
top: 20,
width: '100%',
backgroundColor: 'transparent',
boxShadow: 'none',
height: 40,
}}
>
<Container maxWidth="xl">
<Toolbar disableGutters>
<AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
<Typography
variant="h6"
noWrap
<Box sx={{ display: 'flex', width: '100%' }}>
<Box
sx={{
flexGrow: 1,
maxWidth: '50%',
height: 30,
display: { xs: 'none', md: 'flex' },
px: 10,
}}
>
{pages.map((page) => (
<Typography
key={page}
textAlign="center"
sx={{ mx: 'auto', fontSize: 20, fontWeight: 500 }}
>
{page}
</Typography>
))}
</Box>
<Box
sx={{
flexGrow: 1,
maxWidth: '50%',
height: 30,
display: { xs: 'none', md: 'flex' },
justifyContent: 'right',
pt: 0.5,
mr: 4,
}}
>
<Box
sx={{
mr: 2,
display: { xs: 'none', md: 'flex' },
fontFamily: 'monospace',
fontWeight: 700,
letterSpacing: '.3rem',
color: 'inherit',
textDecoration: 'none',
mx: 2,
}}
>
LOGO
</Typography>

<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: { xs: 'block', md: 'none' },
}}
>
{pages.map((page) => (
<MenuItem key={page} onClick={handleCloseNavMenu}>
<Typography textAlign="center">{page}</Typography>
</MenuItem>
))}
</Menu>
<Image
src="/images/profile.svg"
alt="profile"
width={24}
height={24}
/>
</Box>
<AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
<Typography
variant="h5"
noWrap
component="a"
href=""
<Box
sx={{
mr: 2,
display: { xs: 'flex', md: 'none' },
flexGrow: 1,
fontFamily: 'monospace',
fontWeight: 700,
letterSpacing: '.3rem',
color: 'inherit',
textDecoration: 'none',
mr: 6,
ml: 2,
}}
>
LOGO
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
{pages.map((page) => (
<Button
key={page}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: 'white', display: 'block' }}
>
{page}
</Button>
))}
</Box>

<Box sx={{ flexGrow: 0 }}>
{session ? (
<>
<Tooltip title="Open settings">
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<Image
src="https://www.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png"
alt="profile picture"
width={40}
height={40}
style={{ borderRadius: '50%' }}
/>
</IconButton>
</Tooltip>
<Menu
sx={{ mt: '45px' }}
id="menu-appbar"
anchorEl={anchorElUser}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElUser)}
onClose={handleCloseUserMenu}
>
<MenuItem onClick={handleCloseUserMenu}>
<Link href={PROFILE_PAGE}>
<a
style={{
textDecoration: 'none',
color: 'inherit',
fontSize: 15,
marginLeft: 6,
}}
>
PROFILE
</a>
</Link>
</MenuItem>
<MenuItem onClick={handleCloseUserMenu}>
<Button color="inherit" onClick={logoutHandler}>
Logout
</Button>
</MenuItem>
</Menu>
</>
) : (
<Button color="inherit">
<Link href={LOGIN_PAGE}>
<a
style={{
textDecoration: 'none',
color: 'inherit',
fontSize: 17,
}}
>
Login
</a>
</Link>
</Button>
)}
<Image src="/images/cart.svg" alt="cart" width={24} height={24} />
</Box>
</Toolbar>
</Container>
</Box>
</Box>
</AppBar>
);
};

+ 35
- 0
components/products/featured-product/FeaturedProduct.jsx Bestand weergeven

@@ -0,0 +1,35 @@
import { Box } from '@mui/system';
import PropType from 'prop-types';
import ProductImage from './ProductImage';
import ProductInfo from './ProductInfo';

const FeaturedProduct = ({ bColor, image, side }) => {
return (
<Box
sx={{
width: '100%',
minHeight: 500,
backgroundColor: bColor === 'dark' ? 'primary.main' : 'primary.light',
display: 'flex',
}}
>
{side === 'left' ? (
<ProductImage image={image}></ProductImage>
) : (
<ProductInfo bColor={bColor} side={side}></ProductInfo>
)}
{side === 'left' ? (
<ProductInfo bColor={bColor} side={side}></ProductInfo>
) : (
<ProductImage image={image}></ProductImage>
)}
</Box>
);
};

FeaturedProduct.propTypes = {
bColor: PropType.string,
image: PropType.string,
side: PropType.string,
};
export default FeaturedProduct;

+ 48
- 0
components/products/featured-product/ProductImage.jsx Bestand weergeven

@@ -0,0 +1,48 @@
import { Box } from '@mui/system';
import Image from 'next/image';
import PropType from 'prop-types';

const ProductImage = ({ image }) => {
return (
<Box
sx={{
width: '50%',
maxWidth: '50%',
height: '100%',
pl: '10%',
zIndex: 5,
}}
>
<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>
</Box>
);
};

ProductImage.propTypes = {
image: PropType.string,
};
export default ProductImage;

+ 111
- 0
components/products/featured-product/ProductInfo.jsx Bestand weergeven

@@ -0,0 +1,111 @@
import { Button, ButtonGroup, Typography } from '@mui/material';
import { Box } from '@mui/system';
import Image from 'next/image';
import PropType from 'prop-types';

const ProductInfo = ({ bColor, side }) => {
return (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
width: '50%',
maxWidth: '50%',
height: '100%',
pl: side === 'right' ? '10%' : 0,
}}
>
<Typography variant="h3" sx={{ height: 100, mt: 15, color: 'white' }}>
Frapuccino coffee
</Typography>
<Box
sx={{
width: 100,
maxWidth: 100,
height: 60,
}}
>
<Image
src="/images/Stars.svg"
alt="reviews"
width={100}
height={50}
></Image>
</Box>
<Typography
sx={{
pr: '20%',
color: 'white',
}}
>
If you drink coffee regulary you will know the difference between fresh
coffee and old coffee. Our goal is to provide the freshest coffee beans
in each day.
</Typography>
<Box
sx={{
width: '100%',
display: 'flex',
}}
>
<ButtonGroup
size="small"
aria-label="small outlined button group"
sx={{
height: 50,
mr: 3,
backgroundColor: bColor === 'light' ? '#664c47' : '#8f7772',
color: 'white',
border: 0,
}}
>
<Button
sx={{
color: 'white',
fontSize: 20,
width: 50,
}}
onClick={() => {}}
>
-
</Button>
<Button
sx={{
color: 'white',
fontSize: 17,
width: 50,
}}
>
1
</Button>
<Button
sx={{
color: 'white',
fontSize: 20,
width: 50,
}}
onClick={() => {}}
>
+
</Button>
</ButtonGroup>
<Button
sx={{
backgroundColor: '#CBA213',
height: 50,
width: 150,
color: 'white',
}}
>
Add to cart
</Button>
</Box>
</Box>
);
};

ProductInfo.propTypes = {
bColor: PropType.string,
side: PropType.string,
};
export default ProductInfo;

+ 28
- 0
components/products/featured-products-list/FeaturedPorductsList.jsx Bestand weergeven

@@ -0,0 +1,28 @@
import { Box } from '@mui/system';
import FeaturedProduct from '../featured-product/FeaturedProduct';

const FeaturedProductsList = () => {
return (
<Box
sx={{
width: '100%',
minHeight: 1000,
display: 'flex',
flexDirection: 'column',
}}
>
<FeaturedProduct
bColor="dark"
image="/images/coffee-bag 1.png"
side="left"
></FeaturedProduct>
<FeaturedProduct
bColor="light"
image="/images/Item 2.png"
side="right"
></FeaturedProduct>
</Box>
);
};

export default FeaturedProductsList;

+ 1
- 0
models/user.js Bestand weergeven

@@ -71,6 +71,7 @@ const UserSchema = new mongoose.Schema({
},
},
postcode: {
type: String,
required: [true, 'Please provide a postal code.'],
validate(value) {
if (!validator.isPostalCode(value)) {

+ 16
- 14
pages/_app.js Bestand weergeven

@@ -1,9 +1,9 @@
import { ThemeProvider } from '@mui/material/styles';
import {
Hydrate,
QueryClient,
QueryClientProvider,
} from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { SessionProvider } from 'next-auth/react';
import { appWithTranslation } from 'next-i18next';
import Head from 'next/head';
@@ -11,6 +11,7 @@ import { useState } from 'react';
import Layout from '../components/layout/base-layout/Layout';
import CircularIndeterminate from '../components/loader/route-loader/CircularIndeterminate';
import '../styles/globals.css';
import theme from '../styles/muiTheme';

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
const [queryClient] = useState(() => new QueryClient());
@@ -19,20 +20,21 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) {
<QueryClientProvider client={queryClient}>
<Hydrate state={pageProps.dehydratedState}>
<SessionProvider session={session}>
<Layout>
<Head>
<title>NextJS template</title>
<meta name="description" content="NextJS template" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
</Head>
<CircularIndeterminate />
<Component {...pageProps} />
</Layout>
<ThemeProvider theme={theme}>
<Layout>
<Head>
<title>NextJS template</title>
<meta name="description" content="NextJS template" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
</Head>
<CircularIndeterminate />
<Component {...pageProps} />
</Layout>
</ThemeProvider>
</SessionProvider>
<ReactQueryDevtools initialIsOpen={false} />
</Hydrate>
</QueryClientProvider>
);

+ 25
- 21
pages/index.js Bestand weergeven

@@ -1,34 +1,38 @@
import { dehydrate, QueryClient } from '@tanstack/react-query';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { Box } from '@mui/system';
import Head from 'next/head';
import HoverImageCard from '../components/cards/hover-image-card/HoverImageCard';
import PaginationComponentRQ from '../components/pagination/react-query/PaginationComponentRQ';
import { getData } from '../requests/dataRequest';
import CompanyInfo from '../components/company-info/CompanyInfo';
import Features from '../components/features/Features';
import Hero from '../components/hero/Hero';
import FeaturedProductsList from '../components/products/featured-products-list/FeaturedPorductsList';

const Home = () => {
return (
<>
<Head>
<title>NextJS template</title>
<meta name="description" content="Random data with pagination..." />
</Head>
<PaginationComponentRQ></PaginationComponentRQ>
<HoverImageCard />
<Box sx={{ width: '100%', height: '100%' }}>
<Head>
<title>NextJS template</title>
<meta name="description" content="Random data with pagination..." />
</Head>
<Hero></Hero>
<FeaturedProductsList></FeaturedProductsList>
<Features></Features>
<CompanyInfo></CompanyInfo>
</Box>
</>
);
};

export async function getStaticProps({ locale }) {
const queryClient = new QueryClient();
// export async function getStaticProps({ locale }) {
// const queryClient = new QueryClient();

await queryClient.prefetchQuery(['randomData', 1], () => getData(1));
// await queryClient.prefetchQuery(['randomData', 1], () => getData(1));

return {
props: {
dehydratedState: dehydrate(queryClient),
...(await serverSideTranslations(locale, ['pagination'])),
},
};
}
// return {
// props: {
// dehydratedState: dehydrate(queryClient),
// ...(await serverSideTranslations(locale, ['pagination'])),
// },
// };
// }

export default Home;

+ 5
- 0
public/images/Clock Icon.svg Bestand weergeven

@@ -0,0 +1,5 @@
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="24.5" stroke="white"/>
<line x1="24.5" y1="7" x2="24.5" y2="25" stroke="white"/>
<line x1="25.1936" y1="25.0256" x2="11.7117" y2="31.6011" stroke="white"/>
</svg>

BIN
public/images/Hero-Image.png Bestand weergeven


BIN
public/images/Item 2.png Bestand weergeven


+ 3
- 0
public/images/Line 4.svg Bestand weergeven

@@ -0,0 +1,3 @@
<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>

+ 3
- 0
public/images/Line 5.svg Bestand weergeven

@@ -0,0 +1,3 @@
<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>

+ 4
- 0
public/images/Play.svg Bestand weergeven

@@ -0,0 +1,4 @@
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="36" cy="36" r="36" fill="#FFFAF5"/>
<path d="M50 36L29 48.1244L29 23.8756L50 36Z" fill="#CBA213"/>
</svg>

+ 25
- 0
public/images/Stars.svg
Diff onderdrukt omdat het te groot bestand
Bestand weergeven


BIN
public/images/beans 1.png Bestand weergeven


+ 3
- 0
public/images/cart.svg Bestand weergeven

@@ -0,0 +1,3 @@
<svg width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.74999 7.08527V5.38527C4.74999 2.95767 6.64549 0.977173 8.99999 0.977173C11.3545 0.977173 13.25 2.95767 13.25 5.38527V7.08527H16.1876C16.3222 7.08537 16.4517 7.13646 16.5501 7.22825C16.6485 7.32005 16.7085 7.44572 16.718 7.57997L17.7278 22.455C17.7367 22.5955 17.6897 22.7339 17.597 22.8399C17.5043 22.9459 17.3735 23.011 17.2331 23.0211H0.802586C0.661915 23.0211 0.527006 22.9652 0.427537 22.8657C0.328067 22.7663 0.272186 22.6313 0.272186 22.4907V22.455L1.28199 7.57997C1.29103 7.44542 1.35083 7.31932 1.44929 7.22718C1.54775 7.13503 1.67753 7.0837 1.81239 7.08357L4.74999 7.08527ZM6.34459 7.08527H11.6571V5.38527C11.6571 3.82297 10.4671 2.57007 8.99999 2.57007C7.53289 2.57007 6.34459 3.82297 6.34459 5.38527V7.08527ZM1.93989 21.4299H16.0601L15.1965 8.67987H2.80519L1.93989 21.4299Z" fill="#664C47"/>
</svg>

BIN
public/images/coffee-bag 1.png Bestand weergeven


+ 9
- 0
public/images/coffee-beans-icon.svg
Diff onderdrukt omdat het te groot bestand
Bestand weergeven


+ 9
- 0
public/images/coffee-beans.svg
Diff onderdrukt omdat het te groot bestand
Bestand weergeven


+ 9
- 0
public/images/coffee-machine.svg
Diff onderdrukt omdat het te groot bestand
Bestand weergeven


+ 9
- 0
public/images/factory.svg
Diff onderdrukt omdat het te groot bestand
Bestand weergeven


+ 9
- 0
public/images/mail.svg Bestand weergeven

@@ -0,0 +1,9 @@
<svg width="70" height="66" viewBox="0 0 70 66" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="70" height="66" transform="matrix(-1 0 0 1 70 0)" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_64_24" transform="translate(0 -0.030303) scale(0.00390625 0.00414299)"/>
</pattern>
<image id="image0_64_24" width="256" height="256" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>

+ 9
- 0
public/images/maps 1.svg
Diff onderdrukt omdat het te groot bestand
Bestand weergeven


+ 9
- 0
public/images/pin.svg
Diff onderdrukt omdat het te groot bestand
Bestand weergeven


+ 3
- 0
public/images/profile.svg Bestand weergeven

@@ -0,0 +1,3 @@
<svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9663 12.3465C15.3663 12.3465 18.0931 9.58612 18.0931 6.21978C18.0931 2.85345 15.3663 0.0593872 11.9663 0.0593872C8.56634 0.0593872 5.83961 2.81978 5.83961 6.18612C5.83961 9.55246 8.56634 12.3465 11.9663 12.3465ZM11.9663 1.67523C14.4574 1.67523 16.4772 3.69503 16.4772 6.18612C16.4772 8.67721 14.4574 10.697 11.9663 10.697C9.47525 10.697 7.45545 8.71087 7.45545 6.21978C7.45545 3.72869 9.47525 1.67523 11.9663 1.67523ZM1.32872 21.9406H22.6713C23.1089 21.9406 23.4792 21.5703 23.4792 21.1327C23.4792 16.8911 20.0119 13.4237 15.7703 13.4237H8.22971C3.98812 13.4237 0.520798 16.8911 0.520798 21.1327C0.520798 21.5703 0.891095 21.9406 1.32872 21.9406ZM8.22971 15.0396H15.7703C18.8673 15.0396 21.3921 17.3287 21.796 20.3247H2.20397C2.60793 17.3287 5.13268 15.0396 8.22971 15.0396Z" fill="#664C47"/>
</svg>

+ 10
- 3
styles/globals.css Bestand weergeven

@@ -1,12 +1,19 @@
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Open+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

* {
box-sizing: border-box;
margin: 0;
height: 100%;
}

body {
font-family: 'Open Sans', 'Lato', sans-serif;
font-family: 'Roboto', sans-serif;
--brick: #c6453e;
--dark-brown: #664c47;
--light-brown: #8f7772;
--dark: #1f1c1a;
height: 100%;
}

h1,
@@ -15,5 +22,5 @@ h3,
h4,
h5,
h6 {
font-family: 'Lato', sans-serif;
font-family: 'Indie Flower', cursive;
}

+ 32
- 0
styles/muiTheme.js Bestand weergeven

@@ -0,0 +1,32 @@
import { createTheme } from '@mui/material/styles';

const theme = createTheme({
typography: {
h1: {
fontFamily: ['Indie Flower', 'cursive'].join(','),
textTransform: '',
fontSize: '82px',
},
h3: {
fontFamily: ['Indie Flower', 'cursive'].join(','),
},
h2: {
fontFamily: ['Indie Flower', 'cursive'].join(','),
},
},
body1: {
fontFamily: ['Roboto', 'sans-serif'].join(','),
},
palette: {
primary: {
main: '#664c47',
light: '#8f7772',
},
secondary: {
dark: '#1f1c1a',
main: '#c6453e',
},
},
});

export default theme;

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan