From 63c885120732462a413110a8a3a6980740dfb805 Mon Sep 17 00:00:00 2001
From: 01lexandre <01.lexandre@gmail.com>
Date: Wed, 25 May 2022 14:27:40 -0300
Subject: [PATCH] make homepage
---
next-seo.config.js | 15 ++
next.config.js | 4 +-
package.json | 4 +
src/Components/Footer.js | 53 +++++
src/Components/NavBar.js | 59 +++++
src/Components/SlideHero.js | 68 ++++++
src/assets/anun-princ-123.png | Bin 2650 -> 0 bytes
src/assets/cota-naw-12333.png | Bin 59667 -> 0 bytes
src/assets/cota-naw-4444433.png | Bin 43118 -> 0 bytes
src/assets/dfasda123.png | Bin 0 -> 109682 bytes
src/pages/_app.js | 12 +-
src/pages/_document.js | 32 +--
src/pages/cadastre-se-gratis.js | 4 +
src/pages/index.js | 374 ++++++++++++++------------------
src/styles/css.module.scss | 57 ++++-
src/styles/theme.js | 19 +-
yarn.lock | 61 +++++-
17 files changed, 515 insertions(+), 247 deletions(-)
create mode 100644 next-seo.config.js
create mode 100644 src/Components/Footer.js
create mode 100644 src/Components/NavBar.js
create mode 100644 src/Components/SlideHero.js
delete mode 100644 src/assets/anun-princ-123.png
delete mode 100644 src/assets/cota-naw-12333.png
delete mode 100644 src/assets/cota-naw-4444433.png
create mode 100644 src/assets/dfasda123.png
create mode 100644 src/pages/cadastre-se-gratis.js
diff --git a/next-seo.config.js b/next-seo.config.js
new file mode 100644
index 0000000..2354515
--- /dev/null
+++ b/next-seo.config.js
@@ -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',
+ },
+};
diff --git a/next.config.js b/next.config.js
index d0eeb45..0538381 100644
--- a/next.config.js
+++ b/next.config.js
@@ -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',
},
})
diff --git a/package.json b/package.json
index a0c4d43..03854a7 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/Components/Footer.js b/src/Components/Footer.js
new file mode 100644
index 0000000..eb451fd
--- /dev/null
+++ b/src/Components/Footer.js
@@ -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 (
+
+
+
+
+ © {new Date().getFullYear()} Direitos Reservados
+
+
+
+
+
+ Feito com
+
+
+
+
+
+
+ {
+ colorMode === 'light'
+ ? (
+ }/>
+ )
+ : (}/>)
+ }
+
+
+
+
+ )
+}
diff --git a/src/Components/NavBar.js b/src/Components/NavBar.js
new file mode 100644
index 0000000..8009e8b
--- /dev/null
+++ b/src/Components/NavBar.js
@@ -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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+
+ Funcionalidades
+
+
+
+
+ Blog
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/Components/SlideHero.js b/src/Components/SlideHero.js
new file mode 100644
index 0000000..3ae366f
--- /dev/null
+++ b/src/Components/SlideHero.js
@@ -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 (
+
+
+ {arrayObjs.map((obj, i) => (
+
+
+
+
+ {obj.title}
+
+
+ {obj.description}
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+