cleaning up files, adjutsing translation pages

src/components/adopt.js

@@ -7,7 +7,7 @@ const Volunteer = () => {
             <div className="container center">
                 <h2>Adopt a Rescue</h2>
                 <p>View a list of all of our rescues, and help join the community today.</p>
-                <a className='btn btn-primary' href='/adoptions'>
+                <a className='btn btn-primary' href='/en/adoptions'>
                     View Adoptions</a>
             </div>
         </div>

src/components/footer.js

@@ -11,19 +11,19 @@ const Footer = () => {
                     <img className='footer-logo' src={logo} alt='logo' />
 
                     <ul className="footer-menu">
-                        <li><a href='/about'>About</a>
+                        <li><a href='/en/about'>About</a>
                             <ul>
                                 <li><a href='/en/about/volunteer'>Volunteer</a></li>
                                 <li><a href='/en/about/board-members'>Board Members</a></li>
                                 <li><a href='/en/about/spay-neuter'>Low Cost Spay/Neuter</a></li>
                             </ul>
                         </li>
-                        <li><a href='/adoptions'>Adoption</a>
+                        <li><a href='/en/adoptions'>Adoption</a>
                             <ul>
                                 <li><a href='/en/adoption/adoption-application'>Application</a></li>
                             </ul>
                         </li>
-                        <li><a href='/fosters'>Fosters</a>
+                        <li><a href='/en/fosters'>Fosters</a>
                             <ul>
                                 <li><a href='/en/fosters/become-a-foster'>How to foster</a></li>
                                 <li><a href='/en/fosters/foster-application'>Application</a></li>

src/components/foster.js

@@ -7,7 +7,7 @@ const Foster = () => {
         <div className="container center apply">
             <h2>Become a Foster</h2>
             <p>Becoming a foster parent is a significant and rewarding commitment.</p>
-            <a className='btn btn-primary' href='/become-a-foster'>
+            <a className='btn btn-primary' href='/en/become-a-foster'>
                 Learn More</a>
         </div>
     );

src/components/fr/adopt.js

@@ -7,7 +7,7 @@ const Volunteer = () => {
             <div className="container center">
                 <h2>Adopter un sauvetage</h2>
                 <p>Consultez la liste de tous nos sauvetages et aidez-nous à rejoindre la communauté dès aujourd'hui.</p>
-                <a className='btn btn-primary' href='/adoptions'>
+                <a className='btn btn-primary' href='/fr/adoptions'>
                 Voir les adoptions</a>
             </div>
         </div>

src/components/fr/foster.js

@@ -7,7 +7,7 @@ const Foster = () => {
         <div className="container center apply">
             <h2>Devenir famille d'accueil</h2>
             <p>Devenir famille d’accueil est un engagement important et enrichissant.</p>
-            <a className='btn btn-primary' href='/fr/foster'>
+            <a className='btn btn-primary' href='/fr/fosters/become-a-foster'>
             Apprendre encore plus</a>
         </div>
     );

src/components/fr/volunteer.js

@@ -8,7 +8,7 @@ const Volunteer = () => {
             <h2>Nous avons besoin de bénévoles</h2>
             <p>Vous cherchez une façon significative de faire une différence dans votre communauté?
 Rejoignez-nous et devenez bénévole!</p>
-            <a className='btn btn-primary' href='/fr/volunteer'>
+            <a className='btn btn-primary' href='/fr/about/volunteer'>
             Apprendre encore plus</a>
         </div>
     );

src/components/header.js

@@ -5,16 +5,14 @@ import MainMenu from './menu/mainmenu'
 import MobileMenu from './menu/mobilemenu';
 import { Link } from "gatsby";
 
-
-const Header = () => {
+const Header = ({ page }) => {
 
     return (
 
         <header>
             <div className='header container'><div className='inner'>
-            <div className="row">
-
-                    <Link className='language-switcher' to='/fr'>Français</Link>
+                <div className="row">
+                    <Link className='language-switcher' to={page}>Français</Link>
                 </div>
                 <MainMenu />
                 <MobileMenu

src/components/volunteer.js

@@ -8,7 +8,7 @@ const Volunteer = () => {
             <h2>We need Volunteers</h2>
             <p>Are you looking for a meaningful way to make a difference in your community?<br></br>
 Join us and become a volunteer!</p>
-            <a className='btn btn-primary' href='/volunteer'>
+            <a className='btn btn-primary' href='/en/about/volunteer'>
                 Learn More</a>
         </div>
     );

src/pages/404.js → src/pages/404.en.js

@@ -1,5 +1,7 @@
 import * as React from "react"
 import { Link } from "gatsby"
+import Header from "../components/header"
+import Footer from "../components/footer"
 
 const pageStyles = {
   color: "#232129",
@@ -26,13 +28,15 @@ const codeStyles = {
 const NotFoundPage = () => {
   return (
     <main style={pageStyles}>
+      <Header />
       <h1 style={headingStyles}>Page not found</h1>
       <p style={paragraphStyles}>
         Sorry 😔, we couldn’t find what you were looking for.
 
         <br />
-        <Link to="/">Go home</Link>.
+        <Link to="/en">Go home</Link>.
       </p>
+      <Footer />
     </main>
   )
 }

src/pages/404.fr.js

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Link } from "gatsby"
+import Header from "../components/fr/header"
+import Footer from "../components/fr/footer"
+
+const pageStyles = {
+  color: "#232129",
+  padding: "96px",
+  fontFamily: "-apple-system, Roboto, sans-serif, serif",
+}
+const headingStyles = {
+  marginTop: 0,
+  marginBottom: 64,
+  maxWidth: 320,
+}
+
+const paragraphStyles = {
+  marginBottom: 48,
+}
+const codeStyles = {
+  color: "#8A6534",
+  padding: 4,
+  backgroundColor: "#FFF4DB",
+  fontSize: "1.25rem",
+  borderRadius: 4,
+}
+
+const NotFoundPage = () => {
+  return (
+    <main style={pageStyles}>
+      <Header />
+      <h1 style={headingStyles}>Page introuvable</h1>
+      <p style={paragraphStyles}>
+      Désolé 😔, nous n'avons pas trouvé ce que vous cherchiez.
+
+        <br />
+        <Link to="/fr">aller à la page d'accueil</Link>.
+      </p>
+      <Footer/>
+    </main>
+  )
+}
+
+export default NotFoundPage
+
+export const Head = () => <title>Page introuvable</title>

src/pages/about.en.js

@@ -11,7 +11,7 @@ import rightarrow from '../files/rightarrow.png';
 const About = () => {
   return (
     <main>
-      <Header />
+      <Header page='/fr/about'/>
       <div className="aboutus container">
         <div className="row">
           <h1>About Us</h1>

src/pages/about.fr.js

@@ -11,7 +11,7 @@ import rightarrow from '../files/rightarrow.png';
 const About = () => {
   return (
     <main>
-      <Header />
+      <Header page='/en/about'/>
       <div className="aboutus container">
         <div className="row">
           <h1>À propos de nous</h1>

src/pages/about/board-members.en.js

@@ -10,7 +10,7 @@ import imgGeorge from '../../files/george.jpg';
 const BoardMembers = () => {
   return (
     <main>
-      <Header />
+      <Header page='/fr/about/board-members'/>
       <div className="board-members container">
         <div className="row">
             <h1>Board Members</h1>

src/pages/about/board-members.fr.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import Header from '../../components/fr/header';
 import Footer from '../../components/fr/footer';
 import '../../sass/styles.scss';
-import Volunteer from "../../components/volunteer";
+import Volunteer from "../../components/fr/volunteer";
 import imgAllanna from '../../files/allanna.jpg';
 import imgDorothy from '../../files/dorothy.jpg';
 import imgGeorge from '../../files/george.jpg';
@@ -11,7 +11,7 @@ import imgGeorge from '../../files/george.jpg';
 const BoardMembers = () => {
   return (
     <main>
-      <Header />
+      <Header page='/en/about/board-members'/>
       <div className="board-members container">
         <div className="row">
             <h1>Membres du conseil d'administration</h1>

src/pages/about/spay-neuter.en.js

@@ -8,7 +8,7 @@ import Volunteer from "../../components/volunteer";
 const SpayNeuter = () => {
   return (
     <main>
-      <Header />
+      <Header page='/fr/about/spay-neuter'/>
       <div className="container">
         <div className="row">
             <h1>Low cost Spay/Neuter</h1>

src/pages/about/spay-neuter.fr.js

@@ -1,14 +1,14 @@
 import * as React from "react";
-import Header from '../../components/header';
+import Header from '../../components/fr/header';
 import '../../sass/styles.scss';
-import Footer from "../../components/footer";
-import Volunteer from "../../components/volunteer";
+import Footer from "../../components/fr/footer";
+import Volunteer from "../../components/fr/volunteer";
 
 
 const SpayNeuter = () => {
   return (
     <main>
-      <Header />
+      <Header page='/en/about/spay-neuter'/>
       <div className="container">
         <div className="row">
             <h1>Stérilisation à faible coût</h1>

src/pages/about/volunteer.en.js

@@ -8,7 +8,7 @@ import Foster from "../../components/foster";
 const Volunteer = () => {
   return (
     <main>
-      <Header />
+      <Header page='/fr/about/volunteer'/>
       <div className="container volunteer">
         <div className="row">
             <h1>Volunteering</h1>

src/pages/about/volunteer.fr.js

@@ -1,14 +1,14 @@
 import * as React from "react";
-import Header from '../../components/header';
-import Footer from '../../components/footer';
+import Header from '../../components/fr/header';
+import Footer from '../../components/fr/footer';
 import '../../sass/styles.scss';
-import Foster from "../../components/foster";
+import Foster from "../../components/fr/foster";
 
 
 const Volunteer = () => {
   return (
     <main>
-      <Header />
+      <Header page='/en/about/volunteer'/>
       <div className="container">
         <div className="row">
             <h1>Volontariat</h1>

src/pages/adoption/adoption-application.en.js

@@ -71,7 +71,7 @@ const AdoptionApplication = () => {
 };
   return (
     <main>
-      <Header />
+      <Header page='/fr/adoption/adoption-application'/>
       <div className="container">
             <h1>Adoption Application</h1>
             <form className='adoption-application-form' name="adoption-application" method="post" data-netlify="true" data-netlify-honeypot="bot-field"
@@ -219,8 +219,6 @@ const AdoptionApplication = () => {
                     </div>
                 </div>
             </form>
-            <div className="success" id="success"></div>
-            <div className="error"></div>
           </div>
           <section className='volunteers'>
             <Volunteer />

src/pages/adoption/adoption-application.fr.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import Header from '../../components/fr/header';
 import '../../sass/styles.scss';
 import Footer from '../../components/fr/footer';
-import Volunteer from '../../components/volunteer';
+import Volunteer from '../../components/fr/volunteer';
 import { navigate } from 'gatsby';
 
 
@@ -71,7 +71,7 @@ const AdoptionApplication = () => {
 };
   return (
     <main>
-      <Header />
+      <Header page='/en/adoption/adoption-application'/>
       <div className="container">
             <h1>Demande D'Adoption</h1>
             <form className='adoption-application-form' name="adoption-applicatoin" method="post" data-netlify="true" data-netlify-honeypot="bot-field"
@@ -221,8 +221,6 @@ const AdoptionApplication = () => {
                     </div>
                 </div>
             </form>
-            <div className="success" id="success"></div>
-            <div className="error"></div>
           </div>
           <section className='volunteers'>
             <Volunteer />

src/pages/adoptions.en.js

@@ -12,7 +12,7 @@ const Adoptions = ({data, pageContext}) => {
   return (
     <div> 
         <main>
-          <Header />
+          <Header page='/fr/adoptions'/>
           <div className="container adoptions">
             <h1>Adoptions</h1>
               {data.allContentfulAdoptions.nodes.map((item, index)  => {

src/pages/adoptions.fr.js

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { graphql } from 'gatsby';
-import Header from '../components/header.js';
+import Header from '../components/fr/header.js';
 import '../sass/styles.scss';
 import Footer from "../components/fr/footer";
 import { GatsbyImage, getImage } from 'gatsby-plugin-image';
@@ -13,7 +13,7 @@ const Adoptions = ({data, pageContext}) => {
   return (
     <div> 
         <main>
-          <Header />
+          <Header page='/en/adoptions'/>
           <div className="container adoptions">
             <h1>Adoptions</h1>
               {data.allContentfulAdoptions.nodes.map((item, index)  => {

src/pages/contact.en.js

@@ -20,9 +20,6 @@ const Contact = () => {
         body: new URLSearchParams(formData).toString(),
     })
         .then(() => {
-            // document.querySelector('.success').innerText =
-            //     "Thank you for reaching out to us, we will get back to you shortly.";
-            //     document.getElementById('success').scrollIntoView();
                 navigate("/en/thank-you/");
             // Clear form fields
             setName('');
@@ -33,7 +30,7 @@ const Contact = () => {
 };
   return (
     <main>
-      <Header />
+      <Header page='/fr/contact'/>
       <div className="container contact-us">
         <div className="row">
             <h1>Contact Us</h1>
@@ -66,8 +63,7 @@ const Contact = () => {
                     </div>
                 </div>
             </form>
-            <div className="success" id="success"></div>
-            <div className="error"></div>
+
         </div>
       </div>
       <section className='adopt-cta'>