Merge pull request #12 from Igorcbraz/New-Design

New design

Author: Igorcbraz

.env.example

@@ -0,0 +1 @@
+REACT_APP_GA_TRACKING_ID=

.eslintrc.json

@@ -20,6 +20,11 @@
     "react/react-in-jsx-scope": "off",
     "quotes": ["error", "single"],
     "jsx-quotes": ["error", "prefer-single"],
-    "indent": ["error", 2]
+    "indent": ["error", 2],
+    "semi": ["error", "never"]
+  },
+  "globals": {
+    "process": true,
+    "module": true
   }
 }

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+.env
 
 # misc
 .DS_Store

netlify.toml

@@ -8,17 +8,22 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@vercel/speed-insights": "^1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
+    "react-lazy-load-image-component": "^1.6.3",
     "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
+    "react-waypoint": "^10.3.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint . --ext .js,.jsx --fix"
   },
   "eslintConfig": {
     "extends": [

package-lock.json

@@ -1,15 +1,22 @@
 import { Routes, Route } from 'react-router-dom'
+import { SpeedInsights } from '@vercel/speed-insights/react'
+
+import { MapProvider } from './context/MapContext'
+import { usePageViewTracker } from './hooks/usePageViewTracker'
 
 import { Home } from './pages/Home'
 
 function App() {
+  usePageViewTracker()
+
   return (
-    <div className='App'>
+    <MapProvider>
       <Routes>
         <Route path='/' element={ <Home/> } />
       </Routes>
-    </div>
-  );
+      <SpeedInsights/>
+    </MapProvider>
+  )
 }
 
-export default App;
+export default App

package.json

@@ -1,16 +1,27 @@
-import PropTypes from 'prop-types';
+import PropTypes from 'prop-types'
+import { useEffect } from 'react'
+import { useMap } from '../../context/MapContext'
 
 export const AddressMap = ({ className = 'w-full h-full' }) => {
-  return (
-    <iframe
-      src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3652.0478203500575!2d-46.86826018509086!3d-23.745674074309456!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cfb27e5a744885%3A0x333b13f0aa6db8b5!2sTemplo%20Enkoji!5e0!3m2!1spt-BR!2sbr!4v1672166189508!5m2!1spt-BR!2sbr'
-      className={className}
-      style={{ border:0 }}
-      allowFullScreen=''
-      loading='lazy'
-      referrerPolicy='no-referrer-when-downgrade'
-    />
-  )
+  const { mapIframe, setMapIframe } = useMap()
+
+  useEffect(() => {
+    if (!mapIframe) {
+      const iframe = (
+        <iframe
+          src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3652.0478203500575!2d-46.86826018509086!3d-23.745674074309456!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cfb27e5a744885%3A0x333b13f0aa6db8b5!2sTemplo%20Enkoji!5e0!3m2!1spt-BR!2sbr!4v1672166189508!5m2!1spt-BR!2sbr'
+          className={className}
+          style={{ border: 0 }}
+          allowFullScreen=''
+          loading='lazy'
+          referrerPolicy='no-referrer-when-downgrade'
+        />
+      )
+      setMapIframe(iframe)
+    }
+  }, [mapIframe, setMapIframe, className])
+
+  return mapIframe
 }
 
 AddressMap.propTypes = {

src/App.js

@@ -0,0 +1,43 @@
+import { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import { Waypoint } from 'react-waypoint'
+import { useSpring, animated } from '@react-spring/web'
+
+import { animationOptions } from '../../constants/animationOptions'
+
+export const Animation = ({
+  children,
+  type,
+  delay,
+  containerClass,
+  id,
+}) => {
+  const [inView, setInview] = useState(false)
+  const { to, from, ...animation } = animationOptions[type]
+
+  const animationStyle = useSpring({
+    to: inView ? to : from,
+    delay: delay || animation.delay,
+    ...animation
+  })
+
+  return (
+    <Waypoint
+      onEnter={() => setInview(true)}
+      onLeave={() => setInview(false)}
+    >
+      <animated.div style={animationStyle} className={containerClass} id={id}>
+        {children}
+      </animated.div>
+    </Waypoint>
+  )
+}
+
+Animation.propTypes = {
+  children: PropTypes.node.isRequired,
+  type: PropTypes.string.isRequired,
+  delay: PropTypes.number,
+  containerClass: PropTypes.string,
+  id: PropTypes.string
+}

src/assets/images/carrousel2.jpg

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types'
+
+export const Badge = ({
+  children
+}) => {
+  return (
+    <span
+      className='inline-block mb-3 sm:mb-0 shadow-sm shadow-primary-500 px-5 py-2 rounded-full text-xs md:text-sm font-body text-white transition border-primary-300 border-[1px] bg-primary-400 capitalize'
+    >
+      {children}
+    </span>
+  )
+}
+
+Badge.propTypes = {
+  children: PropTypes.node
+}