merge

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "dependencies": {
     "@faceless-ui/slider": "^1.1.14",

frontend/src/App.js

@@ -33,8 +33,6 @@ const links = routes.filter(item => item.nav === true);
 
 function App() {
   //tabs for contact form
-  const [tab, setTab] = useState(true);
-  const [tabTitle, setTabTitle] = useState('Tell Us About Your Idea!');
   const link = useNavigate();
 
   //scroll to Contact segment
@@ -47,7 +45,8 @@ function App() {
   function scrollToView(event) {
     event.preventDefault();
     if (forwardedRef) {
-      forwardedRef.current.scrollIntoView({ behavior: 'smooth' });
+      //console.log(forwardedRef.current.offsetTop);
+      window.scrollTo({ behavior: 'smooth', top: forwardedRef.current.offsetTop })
     } else {
       link('/contact');
     }
@@ -74,7 +73,7 @@ function App() {
       ></Navigation>
       <Suspense fallback={<Loader />}>
         <Routes>
-          <Route exact path="/" element={<Home />}/>
+          <Route exact path="/" element={<Home forwardedRef={forwardedRef} />}/>
           <Route exact path="/workwithus" element={<WorkWithUs />}/>
           <Route exact path="/portfolio" element={<Portfolio />}/>
           <Route exact path="/process" element={<ProcessPage />}/>

frontend/src/components/shared/Navigation.jsx

@@ -8,7 +8,7 @@ import '../../App.css';
 import Wrapper from '../../layout/Wrapper';
 import menuIcon from './../../assets/icons/menu.svg';
 
-export default function Navigation({ links, scrollToView, activeLinks }) {
+export default function Navigation({ links, scrollToView, activeLinks, forwardedRef }) {
   const location = useLocation();
   const home = useNavigate();
   function handleLogo() {

frontend/src/index.css

@@ -5,6 +5,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  scroll-behavior: smooth;
+}
+
 
 html, body {
   scrollbar-face-color: rgb(210,210,210); /* Firefox 63 compatibility */

frontend/src/pages/Home.jsx

@@ -33,7 +33,6 @@ import useDataApi from '../hooks/useDataApi';
 
 const api_url = process.env.REACT_APP_API_URL;
 
-//const query = '';
 
 const strapiPopulate = [
   'Heading',
@@ -60,7 +59,7 @@ const stringBuilder = () => {
   return stringQuery;
 };
 
-export default function Home({ forwardedRef }) {
+export default function Home({forwardedRef}) {
   const [cnt, setCnt] = useState('');
   const [landingData, setLandingData] = useState(null);
   const [cardData, setCardData] = useState(null);
@@ -168,4 +167,4 @@ export default function Home({ forwardedRef }) {
       </PageLayout>
     );
   }
-}
+}