juniauto · wedneyyuri · Nov 27, 2022 · Nov 27, 2022 · Nov 27, 2022 · Nov 27, 2022
diff --git a/.eslintrc b/.eslintrc
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
@@ -17,14 +17,20 @@
 
 # misc
 .DS_Store
+*.pem
 
 # debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
diff --git a/README.md b/README.md
@@ -1,21 +1,34 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). Here you can see the content behind the [juniauto.com.br](https://www.juniauto.com.br) website.
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-## Development
+## Getting Started
 
 First, run the development server:
 
 ```bash
+npm run dev
+# or
 yarn dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
-## Testing
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
 
-Run lint and build steps:
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
-```bash
-yarn run build
-```
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/_pages/404.tsx b/_pages/404.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Head from 'next/head'
+import Link from 'next/link';
+
+import PageContainer from '../components/page/container';
+import Whatsapp from '../components/contact/whatsappsection';
+import ContactSection from '../components/contact/contactsection';
+
+export default function ContactUsPage() {
+  return (
+      <PageContainer>
+
+        <Head>
+          <title>Página não encontrada</title>
+        </Head>
+
+              <main id="main" style={{ 'paddingTop': '60px' }}>
+
+                  <Whatsapp />
+
+                  <div id="about" className="about-area area-padding">
+                      <div className="container">
+                          <div className="row">
+                              <div className="col-md-12 col-sm-12 col-xs-12">
+                                  <div className="section-headline text-center">
+                                      <h1 className="h2">Página não encontrada</h1>
+                                  </div>
+                              </div>
+                          </div>
+                          <div className="row">
+                              <div className="col-md-12 col-sm-12 col-xs-12">
+                                  <div className="well-middle">
+                                      <div className="single-well">
+                                          <h4 className="sec-head">Página não encontrada</h4>
+
+                                          <p>
+                                              Essa página não existe, você pode <strong>voltar para a página inicial <Link passHref href="/">clicando aqui</Link></strong>.
+                                              Em caso de dúvida por favor nos mande uma mensagem.
+                      </p>
+                                      </div>
+                                  </div>
+                              </div>
+                          </div>
+
+                      </div>
+                  </div>
+
+                  <ContactSection />
+
+              </main>
+
+      </PageContainer>
+  );
+}
diff --git a/pages/_app.tsx → _pages/_app.tsx b/pages/_app.tsx → _pages/_app.tsx
@@ -4,8 +4,9 @@ import Script from 'next/script';
 import '../theme/bootstrap.scss';
 import '../public/assets/css/style.css';
 import { GA_TRACKING_ID, initialize } from '../lib/gtag';
+import { AppProps } from 'next/app';
 
-export default function MyApp({ Component, pageProps }) {
+export default function MyApp({ Component, pageProps }: AppProps) {
     useEffect(initialize, []);
 
     return <>

diff --git a/pages/_document.tsx → _pages/_document.tsx b/pages/_document.tsx → _pages/_document.tsx
diff --git a/pages/contato.tsx → _pages/contato.tsx b/pages/contato.tsx → _pages/contato.tsx
@@ -2,10 +2,7 @@ import React from 'react';
 import Head from 'next/head'
 
 import PageContainer from '../components/page/container';
-import ContactUsForm from '../components/contact/contactusform';
-import LazyIframe from '../components/LazyIframe';
 import Whatsapp from '../components/contact/whatsappsection';
-import ContactUs from '../components/contact/contactus';
 import ContactSection from '../components/contact/contactsection';
 
 export default function ContactUsPage() {

diff --git a/pages/localizacao.tsx → _pages/localizacao.tsx b/pages/localizacao.tsx → _pages/localizacao.tsx
@@ -3,9 +3,7 @@ import Head from 'next/head'
 
 import PageContainer from '../components/page/container';
 import ContactUsForm from '../components/contact/contactusform';
-
 import Whatsapp from '../components/contact/whatsappsection';
-import LazyIframe from '../components/LazyIframe';
 
 export default function Home() {
   return (
@@ -55,7 +53,7 @@ export default function Home() {
                 {/* Start Google Map */}
                 <div className="col-md-6 col-sm-6 col-xs-12">
                   {/* Start Map */}
-                  <LazyIframe loading="lazy" title="Mapa com a nossa área de atuação" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d117622.3592560307!2d-43.61882688731093!3d-22.887585060535006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9be17999363715%3A0x46c3f27867ad9332!2sCampo%20Grande%2C%20Rio%20de%20Janeiro%20-%20RJ!5e0!3m2!1spt-BR!2sbr!4v1595089607843!5m2!1spt-BR!2sbr" style={{ border: 0 }} allowFullScreen width="100%" height={380} frameBorder={0} />
+                  <iframe loading='lazy' title="Mapa com a nossa área de atuação" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d117622.3592560307!2d-43.61882688731093!3d-22.887585060535006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9be17999363715%3A0x46c3f27867ad9332!2sCampo%20Grande%2C%20Rio%20de%20Janeiro%20-%20RJ!5e0!3m2!1spt-BR!2sbr!4v1595089607843!5m2!1spt-BR!2sbr" style={{ border: 0 }} allowFullScreen width="100%" height={380} frameBorder={0} />
                   {/* End Map */}
                 </div>
                 {/* End Google Map */}

diff --git a/pages/login.tsx → _pages/login.tsx b/pages/login.tsx → _pages/login.tsx
diff --git a/pages/index.tsx → _pages/other.tsx b/pages/index.tsx → _pages/other.tsx
diff --git a/pages/servicos.tsx → _pages/servicos.tsx b/pages/servicos.tsx → _pages/servicos.tsx
diff --git a/app/head.tsx b/app/head.tsx
@@ -0,0 +1,9 @@
+export default function Head() {
+  return (
+    <>
+      <title></title>
+      <meta content="width=device-width, initial-scale=1" name="viewport" />
+      <link rel="icon" href="/favicon.ico" />
+    </>
+  )
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,12 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <head />
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/app/page.jsx b/app/page.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function TestPage() {
+    return <h1>Hello, Next.js!</h1>;
+}
diff --git a/components/LazyIframe/index.tsx b/components/LazyIframe/index.tsx
diff --git a/components/atoms/Logo.tsx b/components/atoms/Logo.tsx
@@ -1,11 +1,12 @@
 import React, { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
+import logo from '../../public/assets/svg/logo.svg'
 
 interface LogoIconProps extends DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
     height: number;
 };
 
 const LogoIcon = (props: LogoIconProps) => (
-    <img {...props} alt="Logo da Juniauto"  src={require('../../public/assets/svg/logo.svg')} />
+    <img {...props} alt="Logo da Juniauto"  src={logo.src} />
 );
 
 export default LogoIcon;
diff --git a/components/contact/contactsection.tsx b/components/contact/contactsection.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import ContactUsForm from './contactusform';
-import LazyIframe from '../LazyIframe';
 import PhoneIcon from '../icons/PhoneIcon';
 import EmailIcon from '../icons/EmailIcon';
 import WhatsappIcon from '../icons/WhatsappIcon';
@@ -72,7 +71,7 @@ export default function ContactSection() {
             {/* Start Google Map */}
             <div className="col-md-6 col-sm-6 col-xs-12">
               {/* Start Map */}
-              <LazyIframe loading="lazy" title="Mapa com a nossa área de atuação" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d117622.3592560307!2d-43.61882688731093!3d-22.887585060535006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9be17999363715%3A0x46c3f27867ad9332!2sCampo%20Grande%2C%20Rio%20de%20Janeiro%20-%20RJ!5e0!3m2!1spt-BR!2sbr!4v1595089607843!5m2!1spt-BR!2sbr" style={{ border: 0 }} allowFullScreen width="100%" height={380} frameBorder={0} />
+              <iframe loading="lazy" title="Mapa com a nossa área de atuação" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d117622.3592560307!2d-43.61882688731093!3d-22.887585060535006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9be17999363715%3A0x46c3f27867ad9332!2sCampo%20Grande%2C%20Rio%20de%20Janeiro%20-%20RJ!5e0!3m2!1spt-BR!2sbr!4v1595089607843!5m2!1spt-BR!2sbr" style={{ border: 0 }} allowFullScreen width="100%" height={380} frameBorder={0} />
               {/* End Map */}
             </div>
             {/* End Google Map */}

diff --git a/components/home/hero.tsx b/components/home/hero.tsx
@@ -1,12 +1,14 @@
-import React, { useState, CSSProperties, useEffect } from 'react';
+import Image from 'next/image';
+import React from 'react';
 import { onWhatsappClick } from '../../lib/gtag';
 import WhatsappIcon from '../icons/WhatsappIcon';
+import heroPic from '../../public/assets/img/slider/hero.webp';
 
 const HeroPicture = () => {
     const alternativeText = 'dois caminhões reboque transportando carros';
 
     return (
-        <picture className="background">
+        <div className="background">
             <style jsx>{`
                 .background {
                     height: 100%;
@@ -24,15 +26,12 @@ const HeroPicture = () => {
 
                 @media (min-width: 1024px) {
                     .background .image {
-                       filter: none;
+                        filter: none;
                     }
                 }
             `}</style>
-            <source media="(min-width:1024px)" srcSet={require('../../public/assets/img/slider/01_1749w.png?webp')} type="image/webp" />
-            <source media="(min-width:1024px)" srcSet={require('../../public/assets/img/slider/01_1749w.png')} type="image/png" />
-            <source srcSet={require('../../public/assets/img/slider/01_0360w.png?webp')} type="image/webp" />
-            <img className="image" alt={alternativeText} src={require('../../public/assets/img/slider/01_1749w.png')} />
-        </picture>
+            <img className="image" alt={alternativeText} src={heroPic.src} />
+        </div>
     )
 };
 
@@ -71,6 +70,7 @@ const WoW = () => {
                     position:relative;
                     min-height:50vh;
                     overflow: hidden;
+                    background-color: #000;
                 }
                 .bJkZLT {
                     position:absolute;

diff --git a/components/icons/BatteryAlertIcon.ts b/components/icons/BatteryAlertIcon.ts
@@ -1,3 +1,4 @@
 import createIcon from './createIcon';
+import batteryAlertSVG from './battery_alert.svg';
 
-export default createIcon(require('./battery_alert.svg'));
+export default createIcon(batteryAlertSVG);
diff --git a/components/icons/CarIcon.ts b/components/icons/CarIcon.ts
@@ -1,3 +1,4 @@
 import createIcon from './createIcon';
+import carSVG from './car.svg';
 
-export default createIcon(require('./car.svg'));
+export default createIcon(carSVG);
diff --git a/components/icons/EmailIcon.ts b/components/icons/EmailIcon.ts
@@ -1,3 +1,4 @@
 import createIcon from './createIcon';
+import emailSVG from './email.svg';
 
-export default createIcon(require('./email.svg'));
+export default createIcon(emailSVG);
diff --git a/components/icons/FacebookIcon.ts b/components/icons/FacebookIcon.ts
@@ -1,3 +1,4 @@
 import createIcon from './createIcon';
+import facebookSVG from './facebook.svg';
 
-export default createIcon(require('./facebook.svg'));
+export default createIcon(facebookSVG);
diff --git a/components/icons/GoogleIcon.ts b/components/icons/GoogleIcon.ts
@@ -1,3 +1,4 @@
 import createIcon from './createIcon';
+import facebookSVG from './facebook.svg';
 
-export default createIcon(require('./google.svg'));
+export default createIcon(facebookSVG);
diff --git a/components/icons/HelmetIcon.ts b/components/icons/HelmetIcon.ts
@@ -1,3 +1,4 @@
 import createIcon from './createIcon';
+import helmetSVG from './helmet.svg';
 
-export default createIcon(require('./helmet.svg'));
+export default createIcon(helmetSVG);
diff --git a/components/icons/LocalShippingIcon.ts b/components/icons/LocalShippingIcon.ts
@@ -1,3 +1,4 @@
 import createIcon from './createIcon';
+import localShippingSVG from './local_shipping.svg';
 
-export default createIcon(require('./local_shipping.svg'));
+export default createIcon(localShippingSVG);
diff --git a/components/icons/MotorcycleIcon.ts b/components/icons/MotorcycleIcon.ts
@@ -1,3 +1,3 @@
 import createIcon from './createIcon';
-
-export default createIcon(require('./motorcycle.svg'));
+import motorcycleSVG from './motorcycle.svg';
+export default createIcon(motorcycleSVG);
diff --git a/components/icons/PhoneIcon.ts b/components/icons/PhoneIcon.ts
@@ -1,3 +1,3 @@
 import createIcon from './createIcon';
-
-export default createIcon(require('./phone.svg'));
+import phoneSVG from './phone.svg';
+export default createIcon(phoneSVG);
diff --git a/components/icons/TractorIcon.ts b/components/icons/TractorIcon.ts
@@ -1,3 +1,4 @@
 import createIcon from './createIcon';
+import tractorSVG from './tractor.svg';
 
-export default createIcon(require('./tractor.svg'));
+export default createIcon(tractorSVG);
diff --git a/components/icons/WhatsappIcon.ts b/components/icons/WhatsappIcon.ts
@@ -1,3 +1,4 @@
 import createIcon from './createIcon';
+import whatsappSVG from './whatsapp.svg';
 
-export default createIcon(require('./whatsapp.svg'));
+export default createIcon(whatsappSVG);