Skip to content

Commit

Permalink
make homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
01lexandre committed May 25, 2022
1 parent 3234508 commit 63c8851
Show file tree
Hide file tree
Showing 17 changed files with 515 additions and 247 deletions.
15 changes: 15 additions & 0 deletions next-seo.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export default {
openGraph: {
type: 'website',
locale: process.env.APP_LANG,
url: 'https://www.naweby.com.br/',
site_name: process.env.APP_NAME,
title: process.env.APP_NAME + ' - ' + process.env.APP_SLOGAN,
},
defaultTitle: process.env.APP_NAME + ' - ' + process.env.APP_SLOGAN,
twitter: {
handle: '@naweby',
site: '@naweby',
cardType: 'summary_large_image',
},
};
4 changes: 2 additions & 2 deletions next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ module.exports = withImages({
APP_NAME: 'Naweby',
APP_SLOGAN: 'Gratuito para quem vende e preço certo para quem compra.',
APP_DESCRIPTION: 'O Naweby é a plataforma online fácil de gestão e controle financeiro, controle de estoque e emissão de nota fiscal de sua pequena empresa.',
APP_URL: 'https://naweby.com.br',
APP_URL: 'https://www.naweby.com.br',
APP_LANG: 'pt_BR',
APP_IMAGE_DESTAQUE: 'https://naweby.com.br/bg-naweby.jpg',
APP_IMAGE_DESTAQUE: 'https://www.naweby.com.br/bg-naweby.jpg',
},
})
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,13 @@
"@chakra-ui/theme-tools": "^1.3.6",
"@emotion/react": "11",
"@emotion/styled": "11",
"embla-carousel-autoplay": "^6.2.0",
"embla-carousel-react": "^6.2.0",
"formik": "^2.2.9",
"framer-motion": "6",
"next": "12.1.2",
"next-images": "^1.8.4",
"next-seo": "^5.4.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"sass": "^1.49.9",
Expand Down
53 changes: 53 additions & 0 deletions src/Components/Footer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import {
Box,
Container,
Grid,
GridItem,
IconButton,
Image,
Tag,
TagLabel,
useColorMode,
useColorModeValue
} from "@chakra-ui/react";
import logoPrincipal from "../assets/logo-princ.png";
import {MoonIcon, SunIcon} from "@chakra-ui/icons";

export default function Footer() {
const {colorMode, toggleColorMode} = useColorMode()
return (
<Box as={'footer'} textAlign={"center"} mt={'5rem'} pt={5} pb={5} bg={useColorModeValue('#F6F5FA', 'gray.900')}>
<Container maxW='container.lg'>
<Grid templateColumns='repeat(12, 1fr)' gap={6}>
<GridItem colSpan={[12, 6, 6]} textAlign={'left'}>
© {new Date().getFullYear()} Direitos Reservados
</GridItem>
<GridItem colSpan={[12, 6, 6]} textAlign={'right'}>
<Tag size="lg" borderRadius="full" ml={2}>
<TagLabel>
<Box display={"flex"} alignItems={"center"}>
Feito com
<Box ml={2} display={"flex"} alignItems={"center"}>
<Image
width={'20px'}
height={'20px'}
src={'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDU3Ljk0NyA1Ny45NDciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU3Ljk0NyA1Ny45NDc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNFNjRDM0M7IiBkPSJNMjguOTQ3LDU2LjQ4NmMxNS42ODUtMTEuMjc3LDIzLjUzMi0yMS41OTIsMjcuMjIyLTI5LjQ2YzQuMzExLTkuMTkzLDAuNTYxLTIwLjU4OS04Ljg0NS0yNC40MTMNCgkJQzM2LjI2OC0xLjg4LDI4Ljk0Nyw4LjQ4NiwyOC45NDcsOC40ODZTMjEuNjc4LTEuOTA3LDEwLjYyMywyLjU4OEMxLjIxNyw2LjQxMi0yLjUzMywxNy44MDgsMS43NzgsMjcuMDAxDQoJCUM1LjQ2OCwzNC44NjgsMTMuMjYyLDQ1LjIxLDI4Ljk0Nyw1Ni40ODZ6Ii8+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg=='}
alt='Amor'
/>
</Box>
</Box>
</TagLabel>
</Tag>
{
colorMode === 'light'
? (
<IconButton onClick={toggleColorMode} ml={2} size='sm' aria-label='mode color' icon={<MoonIcon/>}/>
)
: (<IconButton onClick={toggleColorMode} ml={2} size='sm' aria-label='mode color' icon={<SunIcon/>}/>)
}
</GridItem>
</Grid>
</Container>
</Box>
)
}
59 changes: 59 additions & 0 deletions src/Components/NavBar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import {Box, Button, Center, Container, Flex, Grid, GridItem, Spacer, useColorModeValue} from "@chakra-ui/react";
import Image from "next/image";
import logoPrincipal from "../assets/logo-princ.png";
import NextLink from "next/link";
import styles from "../styles/css.module.scss";

export default function NavBar() {
return (
<Box as={'nav'} bg={useColorModeValue('#F6F5FA', 'gray.900')}>
<Container maxW='container.xl'>
<Grid templateColumns='repeat(12, 1fr)' gap={6}>
<GridItem colSpan={[12, 12, 4]}>
<NextLink href="/" passHref>
<a>
<Image
width={225}
height={60}
src={logoPrincipal}
alt='Logo Naweby'
/>
</a>
</NextLink>
</GridItem>
<GridItem colSpan={[12, 12, 4]}>
<Box as={'ul'} className={styles.nav}>
<Box as={'li'}>
<NextLink href="/" passHref>
<a>Home</a>
</NextLink>
</Box>
<Box as={'li'}>
<NextLink href="#funcionalidades" passHref>
<a>Funcionalidades</a>
</NextLink>
</Box>
<Box as={'li'}>
<a href='https://blog.naweby.com.br/' target={"_blank"} rel={"noreferrer"}>
Blog
</a>
</Box>
</Box>
</GridItem>
<GridItem colSpan={[12, 12, 4]}>
<Box className={styles.navButton}>
<Button variant='ghost' mr={5}>
Entrar
</Button>
<NextLink href="/cadastre-se-gratis" passHref>
<Button colorScheme='primary' variant='outline'>
Cadastre-se Grátis
</Button>
</NextLink>
</Box>
</GridItem>
</Grid>
</Container>
</Box>
)
}
68 changes: 68 additions & 0 deletions src/Components/SlideHero.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import useEmblaCarousel from "embla-carousel-react";
import Autoplay from 'embla-carousel-autoplay'
import {useState, useCallback} from "react";
import styles from '../styles/css.module.scss'
import {Box, Button, Center, Flex, Grid, GridItem, Heading, Text, useColorModeValue} from "@chakra-ui/react";
import theme from "../styles/theme";
import { Image } from '@chakra-ui/react'
import { ArrowForwardIcon, ArrowBackIcon } from '@chakra-ui/icons'

export default function SlideHero() {
// emblaRef will be a reference to our carousel viewport
const [emblaRef, emblaApi] = useEmblaCarousel({loop: true}, [Autoplay()]);

const scrollPrev = useCallback(() => {
if (emblaApi) emblaApi.scrollPrev()
}, [emblaApi])
const scrollNext = useCallback(() => {
if (emblaApi) emblaApi.scrollNext()
}, [emblaApi])
const [arrayObjs, setArrayObjs] = useState([
{
title: 'Nota Fiscal',
description: 'Sed nibh elit, elementum ut nunc sit amet, sagittis imperdiet dui. Nunc lorem magna, pellentesque nec mattis ut, rhoncus efficitur est. Aenean ac felis interdum leo efficitur porttitor sed eget nunc. Aenean ac felis interdum leo efficitur porttitor sed eget nunc nec mattis ut, rhoncus efficitur est nec mattis ut, rhoncus efficitur est.',
src: 'https://via.placeholder.com/500x280'
},
{
title: 'Financeiro',
description: 'Sed nibh elit, elementum ut nunc sit amet, sagittis imperdiet dui. Nunc lorem magna, pellentesque nec mattis ut, rhoncus efficitur est. Aenean ac felis interdum leo efficitur porttitor sed eget nunc. Aenean ac felis interdum leo efficitur porttitor sed eget nunc nec mattis ut, rhoncus efficitur est nec mattis ut, rhoncus efficitur est.',
src: 'https://via.placeholder.com/500x280'
},
{
title: 'Cadastros',
description: 'Sed nibh elit, elementum ut nunc sit amet, sagittis imperdiet dui. Nunc lorem magna, pellentesque nec mattis ut, rhoncus efficitur est. Aenean ac felis interdum leo efficitur porttitor sed eget nunc. Aenean ac felis interdum leo efficitur porttitor sed eget nunc nec mattis ut, rhoncus efficitur est nec mattis ut, rhoncus efficitur est.',
src: 'https://via.placeholder.com/500x280'
},
]);
const colorTitle = useColorModeValue(theme.colors.primary['500'], theme.colors.primary['100'])
return (
<div className={styles.embla} ref={emblaRef}>
<Box className={styles.embla__container}>
{arrayObjs.map((obj, i) => (
<Box key={i} className={styles.embla__slide} pt={10} pb={10}>
<Grid templateColumns='repeat(5, 1fr)' gap={6}>
<GridItem colSpan={[5, 5, 3]}>
<Heading as='h3' size='lg' color={colorTitle}>
{obj.title}
</Heading>
<Text size='lg' mt={3} mb={3}>
{obj.description}
</Text>
<Button variant='link' mr={5}>
Teste gratuitamente {'->'}
</Button>
</GridItem>
<GridItem colSpan={[5, 5, 2]}>
<Image src={obj.src} alt={obj.title} />
</GridItem>
</Grid>
</Box>
))}
</Box>
<Flex justifyContent={'center'}>
<ArrowBackIcon w={6} h={6} onClick={scrollPrev} mr={2} cursor={'pointer'} />
<ArrowForwardIcon w={6} h={6} onClick={scrollNext} ml={2} cursor={'pointer'} />
</Flex>
</div>
)
}
Binary file removed src/assets/anun-princ-123.png
Binary file not shown.
Binary file removed src/assets/cota-naw-12333.png
Binary file not shown.
Binary file removed src/assets/cota-naw-4444433.png
Binary file not shown.
Binary file added src/assets/dfasda123.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 8 additions & 4 deletions src/pages/_app.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,13 @@ import themeShema from '../styles/theme'
import {ChakraProvider, extendTheme} from '@chakra-ui/react'
import {AnimatePresence} from "framer-motion";
import Script from 'next/script'

import NavBar from "../Components/NavBar";
import Footer from "../Components/Footer";
const theme = extendTheme(themeShema)

import { DefaultSeo } from 'next-seo';
import SEO from '../../next-seo.config';

// The handler to smoothly scroll the element into view
const handExitComplete = () => {
if (typeof window !== 'undefined') {
Expand Down Expand Up @@ -36,9 +40,7 @@ function MyApp({ Component, pageProps }) {
<ThemeProvider theme={theme}>
<AnimatePresence exitBeforeEnter onExitComplete={handExitComplete}>
<ChakraProvider theme={theme}>
<Head>
<title>{process.env.APP_NAME} - {process.env.APP_SLOGAN}</title>
</Head>
<DefaultSeo {...SEO} />
<Script
id="google-analytics"
src="https://www.googletagmanager.com/gtag/js?id=G-T7D3DX37BF"
Expand All @@ -49,8 +51,10 @@ function MyApp({ Component, pageProps }) {
gtag('config', 'G-T7D3DX37BF');
}}
/>
<NavBar />
<Component {...pageProps}/>
<GlobalStyle />
<Footer />
</ChakraProvider>
</AnimatePresence>
</ThemeProvider>
Expand Down
32 changes: 16 additions & 16 deletions src/pages/_document.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,22 +34,22 @@ export default class MyDocument extends Document {
<link rel="icon" href="/favicon.ico"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
rel="stylesheet"/>

<meta name="description"
content={process.env.APP_DESCRIPTION}/>
<meta property="og:title" content={process.env.APP_NAME + ' - ' + process.env.APP_SLOGAN}/>
<meta property="og:description" content={process.env.APP_DESCRIPTION}/>
<meta property="og:url" content={process.env.APP_URL}/>
<link rel="canonical" href={process.env.APP_URL}/>
<meta property="og:type" content="website"/>
<meta property="og:locale" content={process.env.APP_LANG}/>
<meta property="og:site_name" content={process.env.APP_NAME}/>
<meta property="og:image" content={process.env.APP_IMAGE_DESTAQUE}/>
<meta property="og:image:alt" content={process.env.APP_SLOGAN}/>
<meta name="twitter:card" content="summary_large_image"/>
<script type="application/ld+json">
{'{ "@context" : "http://schema.org", "@type" : "SoftwareApplication", "name" : "Naweby", "applicationCategory" : "Auto Peças" }'}
</script>
<meta name="theme-color" content="#3524cf" />
{/*<meta name="description"*/}
{/* content={process.env.APP_DESCRIPTION}/>*/}
{/*<meta property="og:title" content={process.env.APP_NAME + ' - ' + process.env.APP_SLOGAN}/>*/}
{/*<meta property="og:description" content={process.env.APP_DESCRIPTION}/>*/}
{/*<meta property="og:url" content={process.env.APP_URL}/>*/}
{/*<link rel="canonical" href={process.env.APP_URL}/>*/}
{/*<meta property="og:type" content="website"/>*/}
{/*<meta property="og:locale" content={process.env.APP_LANG}/>*/}
{/*<meta property="og:site_name" content={process.env.APP_NAME}/>*/}
{/*<meta property="og:image" content={process.env.APP_IMAGE_DESTAQUE}/>*/}
{/*<meta property="og:image:alt" content={process.env.APP_SLOGAN}/>*/}
{/*<meta name="twitter:card" content="summary_large_image"/>*/}
{/*<script type="application/ld+json">*/}
{/* {'{ "@context" : "http://schema.org", "@type" : "SoftwareApplication", "name" : "Naweby", "applicationCategory" : "Auto Peças" }'}*/}
{/*</script>*/}
</Head>
<body>
<ColorModeScript initialColorMode={theme.config.initialColorMode}/>
Expand Down
4 changes: 4 additions & 0 deletions src/pages/cadastre-se-gratis.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@

export default function cadastreSeGratis() {
return (<h1>Cadastre-seGratis</h1>)
}
Loading

0 comments on commit 63c8851

Please sign in to comment.