Merge branch 'main' of https://github.com/CarlTeclancing/chopasap-lp

CarlTeclancing · Dec 19, 2024 · 54dc948 · 54dc948
2 parents 3361285 + 16283da
commit 54dc948
Show file tree

Hide file tree

Showing 15 changed files with 76 additions and 28 deletions.
diff --git a/dist.zip b/dist.zip
diff --git a/src/App.css b/src/App.css
@@ -9,14 +9,13 @@ body{
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  padding: 24px;
   scroll-behavior: smooth;
 }
 .bi{
   font-size: 24px
 }
 #root {
-  max-width: 100%;
+  max-width: 95%;
   text-align: center;
   background-color: #FFF3CC;
   display: flex;

diff --git a/src/ScrollToTop.jsx b/src/ScrollToTop.jsx
@@ -0,0 +1,16 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+const ScrollToTop = () => {
+    const { pathname } = useLocation()
+    useEffect(() => {
+        console.log(pathname)
+        /* settimeout make sure this run after components have rendered. This will help fixing bug for some views where scroll to top not working perfectly */
+        setTimeout(() => {
+            window.scrollTo({ top: 0, behavior: 'smooth' })
+        }, 0)
+    }, [pathname])
+    return null
+}
+
+export default ScrollToTop
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -11,37 +11,37 @@ export default function Footer() {
 
                 <h4>Company</h4>
 
-                    <a className='nav-ell' href="/contact">About Us</a>
-                    <a className='nav-ell' href="/blog">Blog</a>
-                    <a className='nav-ell' href="/careeres">Carrers</a>
-                    <a className='nav-ell' href="https://www.crestlancing.com/partners" target='blank'>Partners</a>
+                    <Link className='nav-ell' to="/contact">About Us</Link>
+                    <Link className='nav-ell' to="/blog">Blog</Link>
+                    <Link className='nav-ell' to="/careeres">Carrers</Link>
+                    <Link className='nav-ell' to="https://www.crestlancing.com/partners" target='blank'>Partners</Link>
 
 
                 </div>
                 <div className="col-3">
                 <h4>Support</h4>
 
 
-                    <a href='/contact' className='nav-ell'>Contact Us</a>
-                    <a href='/faqs' className='nav-ell'>Help Center</a>
-                    <a href='/terms' className='nav-ell'>Terms of Service</a>
-                    <a href='/privacy-policy' className='nav-ell'>Privacy Policy</a>
+                    <Link to='/contact' className='nav-ell'>Contact Us</Link>
+                    <Link to='/faqs' className='nav-ell'>Help Center</Link>
+                    <Link to='/terms' className='nav-ell'>Terms of Service</Link>
+                    <Link to='/privacy-policy' className='nav-ell'>Privacy Policy</Link>
 
                 </div>
                 <div className="col-3">
                 <h4>Get the App</h4>
 
-                    <a href='#' className='nav-ell'>Download on the App Store</a>
-                    <a href='#' className='nav-ell'>Get it on Google Play</a>
+                    <Link to='#' className='nav-ell'>Download on the App Store</Link>
+                    <Link to='#' className='nav-ell'>Get it on Google Play</Link>
 
                 </div>
                 <div className="col-3">
                 <h4>Follow Us</h4>
 
-                    <a href='https://www.instagram.com/chop_asap?igsh=MnhzZTZpaDRodjgz' target='blank' className='nav-ell'>Facebook</a>
-                    <a href='https://www.instagram.com/chop_asap?igsh=MnhzZTZpaDRodjgz' target='blank' className='nav-ell'>Twitter</a>
-                    <a href='https://www.instagram.com/chop_asap?igsh=MnhzZTZpaDRodjgz' target='blank' className='nav-ell'>Instagram</a>
-                    <a href='https://www.instagram.com/chop_asap?igsh=MnhzZTZpaDRodjgz' target='blank' className='nav-ell'>LinkedIn</a>
+                    <Link to='https://www.instagram.com/chop_asap?igsh=MnhzZTZpaDRodjgz' target='blank' className='nav-ell'>Facebook</Link>
+                    <Link to='https://www.instagram.com/chop_asap?igsh=MnhzZTZpaDRodjgz' target='blank' className='nav-ell'>Twitter</Link>
+                    <Link to='https://www.instagram.com/chop_asap?igsh=MnhzZTZpaDRodjgz' target='blank' className='nav-ell'>Instagram</Link>
+                    <Link to='https://www.instagram.com/chop_asap?igsh=MnhzZTZpaDRodjgz' target='blank' className='nav-ell'>LinkedIn</Link>
 
                 </div>
             </div>

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -52,11 +52,11 @@ variety of restaurants ranging from African to Continental cuisines to satisfy y
         <div className="flex-row">
             <div className="row">
 
-                <h2 className='stroked-text'>Do</h2>
-                <h2 className='stroked-text'>You</h2>
+                <h2 className='stroked-text'>Do You</h2>
+                <h2 className='stroked-text'></h2>
                 <h2 className='stroked-text'>Own A</h2>
-                <h2 className='stroked-text'>Restaurant ?</h2>
-                <div className="btn-container">
+                <h2 className='stroked-text'>Restaurant?</h2>
+
                     <button className='btn'>
                         <img src={playstoreLogo} alt="" />
                         Download on Google Play
@@ -66,7 +66,7 @@ variety of restaurants ranging from African to Continental cuisines to satisfy y
                         <img src={appleLogo} alt="" />
                         Download on App Store
                     </button>
-                </div>
+
             </div>
             <div className="row">
                 <img src={heroimg2} className='img-full' alt="" />

diff --git a/src/main.jsx b/src/main.jsx
@@ -20,6 +20,8 @@ import SkeletonLoader from './components/SeletonLoader.jsx';
 import Layout from './components/Layout.jsx';
 import Ambasador from './pages/Ambasador.jsx'
 
+
+
 const router = createBrowserRouter([
   {
     path: "/",

diff --git a/src/media.css b/src/media.css
@@ -52,8 +52,8 @@
     .para-1{
         text-align: left;
         margin-top: 40px;
-        margin-left: -80px;
-        width: 380px;
+        margin-left: -90px;
+        width: 340px;
     }
 
     .row-narrow {
@@ -73,8 +73,20 @@
 
 
       }
-    .btn{
+      .row{
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+      .img-full{
         width: 100%;
+      }
+    .btn{
+        padding: 24px 64px;
+        height: auto;
+        width: 80%;
     }
 
     .contact {
@@ -89,7 +101,7 @@
     .flex-row{
         flex-wrap: wrap-reverse;
         margin-top: 0px;
-        padding: 24px;
+        width: 100%;
     }
     .img-full{
         width: 80%;
@@ -100,7 +112,7 @@
         margin-left: 24px;
     }
     .faq-container{
-      width: 100%;
+      width: 90%;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -113,8 +125,9 @@
         justify-content: center;
     }
     .faq-questions{
-        width: 100%;
-        margin: 2px;
+        width: 90%;
+        margin-top: 2px;
+        margin-left: -24px;
     }
     .footer{
         width: 95%;

diff --git a/src/pages/Blog.jsx b/src/pages/Blog.jsx
@@ -4,6 +4,7 @@ import cardImg from '../assets/cardImg.png';
 import FAQ from '../components/Faq';
 import Footer from '../components/Footer';
 import { Link } from 'react-router-dom';
+import ScrollToTop from '../ScrollToTop'
 
 export default function Blog() {
   const items = [
@@ -30,6 +31,7 @@ export default function Blog() {
   return (
     <div>
       <Navigation />
+      <ScrollToTop />
       <h1>Chop Asap Blog</h1>
       <div className="row-narrow">
         {items.map((item) => (

diff --git a/src/pages/Careeres.jsx b/src/pages/Careeres.jsx
@@ -4,11 +4,13 @@ import Footer from '../components/Footer'
 import FAQ from '../components/Faq'
 import cardImg from '../assets/cardImg.png'
 import CardComponent from '../components/CardComponent'
+import ScrollToTop from '../ScrollToTop'
 
 export default function Careeres() {
   return (
     <div>
         <Navigation />
+        <ScrollToTop />
         <h1>Join Chop ASAP</h1>
         <div className="row-narrow">
 

diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { db, collection, addDoc } from '../../firebase';
 import Navigation from '../components/Navigation';
 import Footer from '../components/Footer';
+import ScrollToTop from '../ScrollToTop'
 
 export default function Contact() {
     const [name, setName] = useState('');
@@ -38,6 +39,7 @@ export default function Contact() {
     return (
         <div>
             <Navigation />
+            <ScrollToTop />
             <h1>Contact Us</h1>
             <div className="container">
                 <form className='contact' onSubmit={handleSubmit}>

diff --git a/src/pages/Faqs.jsx b/src/pages/Faqs.jsx
@@ -2,11 +2,13 @@ import React from 'react'
 import Navigation from '../components/Navigation'
 import FAQ from '../components/Faq'
 import Footer from '../components/Footer';
+import ScrollToTop from '../ScrollToTop'
 
 export default function Faqs() {
   return (
     <div>
         <Navigation />
+        <ScrollToTop />
         <h1>Frequently Asked Questions</h1>
         <FAQ />
         <Footer />

diff --git a/src/pages/PrivacyPolicy.jsx b/src/pages/PrivacyPolicy.jsx
@@ -1,11 +1,13 @@
 import React from 'react'
 import Navigation from '../components/Navigation'
 import Footer from '../components/Footer'
+import ScrollToTop from '../ScrollToTop'
 
 export default function PrivacyPolicy() {
   return (
 
     <div className='container'>
+      <ScrollToTop />
       <Navigation />
       <h1>Privacy Policy</h1>
       <div className='container-narrow'>

diff --git a/src/pages/Services.jsx b/src/pages/Services.jsx
@@ -4,12 +4,14 @@ import FAQ from '../components/Faq'
 import cardImg from '../assets/cardImg.png'
 import Footer from '../components/Footer';
 import heroImg from '../assets/heroImage.png'
+import ScrollToTop from '../ScrollToTop'
 
 export default function Services() {
   return (
 
     <div>
       <Navigation />
+      <ScrollToTop />
       <div className="container">
           <h1>Our Services</h1>
           <div className='narrow'>

diff --git a/src/pages/Terms.jsx b/src/pages/Terms.jsx
@@ -1,11 +1,14 @@
 import React from 'react'
 import Navigation from '../components/Navigation'
 import Footer from '../components/Footer'
+import ScrollToTop from '../ScrollToTop'
 
 export default function Terms() {
   return (
     <div className='container'>
+
       <Navigation />
+      <ScrollToTop />
       <h1>Terms And Conditions</h1>
       <div className="container-narrow">
         <h3>Introduction</h3>

diff --git a/vite.config.js b/vite.config.js
@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  build: {
+    chunkSizeWarningLimit: 1600,
+  },
 })