ntasicc
/
coffee
Наблюдаван 1
Харесван 0
Разклонения 0
Код Задачи 0 Заявки за сливане 0 Версии 0 Уики Activity
Преглед на файлове

feat: landing page

pull/1/head
ntasicc преди 3 години
родител
dceebbce37
ревизия
f3403c2721
променени са 34 файла, в които са добавени 853 реда и са изтрити 222 реда
Разделен изглед Покажи статистика за разликите
  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. Двоични данни
      public/images/Hero-Image.png
  17. Двоични данни
      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. Двоични данни
      public/images/beans 1.png
  23. 3
    0
      public/images/cart.svg
  24. Двоични данни
      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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл


+ 73
- 182
components/layout/navbar/Navbar.jsx Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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>

Двоични данни
public/images/Hero-Image.png Целия файл


Двоични данни
public/images/Item 2.png Целия файл


+ 3
- 0
public/images/Line 4.svg Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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
Файловите разлики са ограничени, защото са твърде много
Целия файл


Двоични данни
public/images/beans 1.png Целия файл


+ 3
- 0
public/images/cart.svg Целия файл

@@ -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>

Двоични данни
public/images/coffee-bag 1.png Целия файл


+ 9
- 0
public/images/coffee-beans-icon.svg
Файловите разлики са ограничени, защото са твърде много
Целия файл


+ 9
- 0
public/images/coffee-beans.svg
Файловите разлики са ограничени, защото са твърде много
Целия файл


+ 9
- 0
public/images/coffee-machine.svg
Файловите разлики са ограничени, защото са твърде много
Целия файл


+ 9
- 0
public/images/factory.svg
Файловите разлики са ограничени, защото са твърде много
Целия файл


+ 9
- 0
public/images/mail.svg Целия файл

@@ -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
Файловите разлики са ограничени, защото са твърде много
Целия файл


+ 9
- 0
public/images/pin.svg
Файловите разлики са ограничени, защото са твърде много
Целия файл


+ 3
- 0
public/images/profile.svg Целия файл

@@ -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 Целия файл

@@ -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 Целия файл

@@ -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;

Write Preview
Loading…
Отказ
Запис