From 6c655d43ea5f3e0bc232539884d9c72abbbc16b5 Mon Sep 17 00:00:00 2001
From: Jennifer Aube <62511019+jaube05@users.noreply.github.com>
Date: Fri, 27 Sep 2024 10:03:53 -0400
Subject: [PATCH] cleaning up files, adjutsing translation pages

---
 package-lock.json                             |  1 -
 src/components/adopt.js                       |  2 +-
 src/components/footer.js                      |  6 +--
 src/components/foster.js                      |  2 +-
 src/components/fr/adopt.js                    |  2 +-
 src/components/fr/foster.js                   |  2 +-
 src/components/fr/volunteer.js                |  2 +-
 src/components/header.js                      |  8 ++--
 src/components/volunteer.js                   |  2 +-
 src/pages/{404.js => 404.en.js}               |  6 ++-
 src/pages/404.fr.js                           | 46 +++++++++++++++++++
 src/pages/about.en.js                         |  2 +-
 src/pages/about.fr.js                         |  2 +-
 src/pages/about/board-members.en.js           |  2 +-
 src/pages/about/board-members.fr.js           |  4 +-
 src/pages/about/spay-neuter.en.js             |  2 +-
 src/pages/about/spay-neuter.fr.js             |  8 ++--
 src/pages/about/volunteer.en.js               |  2 +-
 src/pages/about/volunteer.fr.js               |  8 ++--
 src/pages/adoption/adoption-application.en.js |  4 +-
 src/pages/adoption/adoption-application.fr.js |  6 +--
 src/pages/adoptions.en.js                     |  2 +-
 src/pages/adoptions.fr.js                     |  4 +-
 src/pages/contact.en.js                       |  8 +---
 src/pages/contact.fr.js                       | 19 ++++----
 src/pages/donate.en.js                        |  2 +-
 src/pages/donate.fr.js                        |  8 ++--
 src/pages/fosters.en.js                       |  2 +-
 src/pages/fosters.fr.js                       | 12 ++---
 src/pages/fosters/become-a-foster.en.js       |  2 +-
 src/pages/fosters/become-a-foster.fr.js       |  8 ++--
 src/pages/fosters/foster-application.en.js    |  4 +-
 src/pages/fosters/foster-application.fr.js    |  4 +-
 src/pages/index.en.js                         |  2 +-
 src/pages/index.fr.js                         |  2 +-
 src/pages/successstories.en.js                |  2 +-
 src/pages/successstories.fr.js                |  4 +-
 src/pages/thank-you.en.js                     |  2 +-
 src/pages/thank-you.fr.js                     |  2 +-
 39 files changed, 120 insertions(+), 88 deletions(-)
 rename src/pages/{404.js => 404.en.js} (83%)
 create mode 100644 src/pages/404.fr.js

diff --git a/package-lock.json b/package-lock.json
index 58cfb8f..6eaa6eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
       "version": "1.0.0",
       "dependencies": {
         "@contentful/rich-text-types": "^16.8.1",
-        "@parcel/watcher-linux-x64-glibc": "*",
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.3",
         "gatsby": "^5.13.5",
diff --git a/src/components/adopt.js b/src/components/adopt.js
index 0a3acb5..de4de08 100644
--- a/src/components/adopt.js
+++ b/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>
diff --git a/src/components/footer.js b/src/components/footer.js
index 10cbc37..d1c9b22 100644
--- a/src/components/footer.js
+++ b/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>
diff --git a/src/components/foster.js b/src/components/foster.js
index df59a73..dcb013f 100644
--- a/src/components/foster.js
+++ b/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>
     );
diff --git a/src/components/fr/adopt.js b/src/components/fr/adopt.js
index 9791398..f9d4cbb 100644
--- a/src/components/fr/adopt.js
+++ b/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>
diff --git a/src/components/fr/foster.js b/src/components/fr/foster.js
index 4b34471..7c6e37f 100644
--- a/src/components/fr/foster.js
+++ b/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>
     );
diff --git a/src/components/fr/volunteer.js b/src/components/fr/volunteer.js
index 7765818..c4021a5 100644
--- a/src/components/fr/volunteer.js
+++ b/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>
     );
diff --git a/src/components/header.js b/src/components/header.js
index b1bb7d1..ff49de7 100644
--- a/src/components/header.js
+++ b/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
diff --git a/src/components/volunteer.js b/src/components/volunteer.js
index 6700702..41a1b7c 100644
--- a/src/components/volunteer.js
+++ b/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>
     );
diff --git a/src/pages/404.js b/src/pages/404.en.js
similarity index 83%
rename from src/pages/404.js
rename to src/pages/404.en.js
index 9083926..39446bc 100644
--- a/src/pages/404.js
+++ b/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>
   )
 }
diff --git a/src/pages/404.fr.js b/src/pages/404.fr.js
new file mode 100644
index 0000000..0e5f9d9
--- /dev/null
+++ b/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>
diff --git a/src/pages/about.en.js b/src/pages/about.en.js
index 86c106d..f581955 100644
--- a/src/pages/about.en.js
+++ b/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>
diff --git a/src/pages/about.fr.js b/src/pages/about.fr.js
index 016225b..4638fcc 100644
--- a/src/pages/about.fr.js
+++ b/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>
diff --git a/src/pages/about/board-members.en.js b/src/pages/about/board-members.en.js
index 88b6449..32a0136 100644
--- a/src/pages/about/board-members.en.js
+++ b/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>
diff --git a/src/pages/about/board-members.fr.js b/src/pages/about/board-members.fr.js
index 3d75a96..b0e685c 100644
--- a/src/pages/about/board-members.fr.js
+++ b/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>
diff --git a/src/pages/about/spay-neuter.en.js b/src/pages/about/spay-neuter.en.js
index ea0f738..e34a357 100644
--- a/src/pages/about/spay-neuter.en.js
+++ b/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>
diff --git a/src/pages/about/spay-neuter.fr.js b/src/pages/about/spay-neuter.fr.js
index d10a3a1..e8e3324 100644
--- a/src/pages/about/spay-neuter.fr.js
+++ b/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>
diff --git a/src/pages/about/volunteer.en.js b/src/pages/about/volunteer.en.js
index bd74b67..580aa11 100644
--- a/src/pages/about/volunteer.en.js
+++ b/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>
diff --git a/src/pages/about/volunteer.fr.js b/src/pages/about/volunteer.fr.js
index 254487c..986efe2 100644
--- a/src/pages/about/volunteer.fr.js
+++ b/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>
diff --git a/src/pages/adoption/adoption-application.en.js b/src/pages/adoption/adoption-application.en.js
index 5fdd6cd..7722959 100644
--- a/src/pages/adoption/adoption-application.en.js
+++ b/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 />
diff --git a/src/pages/adoption/adoption-application.fr.js b/src/pages/adoption/adoption-application.fr.js
index fd9ca56..1470f5d 100644
--- a/src/pages/adoption/adoption-application.fr.js
+++ b/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 />
diff --git a/src/pages/adoptions.en.js b/src/pages/adoptions.en.js
index d513581..04be971 100644
--- a/src/pages/adoptions.en.js
+++ b/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)  => {
diff --git a/src/pages/adoptions.fr.js b/src/pages/adoptions.fr.js
index 98921c4..69ca655 100644
--- a/src/pages/adoptions.fr.js
+++ b/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)  => {
diff --git a/src/pages/contact.en.js b/src/pages/contact.en.js
index 06a095d..51bcad8 100644
--- a/src/pages/contact.en.js
+++ b/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'>
diff --git a/src/pages/contact.fr.js b/src/pages/contact.fr.js
index 69f8ae4..2f2cfcf 100644
--- a/src/pages/contact.fr.js
+++ b/src/pages/contact.fr.js
@@ -30,10 +30,9 @@ const Contact = () => {
 };
   return (
     <main>
-      <Header />
+      <Header page='/en/contact'/>
       <div className="container">
         <div className="row">
-          <div className="col-md-6">
             <h1>Contactez-nous</h1>
             <form className='contact-us-form' name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field"
               onSubmit={handleSubmit} id="contact-form">
@@ -41,21 +40,21 @@ const Contact = () => {
                 <input type="hidden" name="bot-field" />
                 <div className="row clearfix">
                     <div className=" form-group">
-                        <label className='col-3 col-sm-2 col-md-1'>Nom <span className='required'>*</span>
-                        <input  className='col-9 col-sm-10 col-md-11' onChange={({ target }) => setName(target.value)}
+                        <label for='name'>Nom <span className='required'>*</span>
+                        <input id='name' onChange={({ target }) => setName(target.value)}
                           type="text" required name="name" value={name} minLength="3" placeholder="Votre nom complet" /></label>
                     </div>
 
                     <div className="form-group">
-                        <label className='col-3 col-sm-2 col-md-1'>Email <span className='required'>*</span>
-                        <input className='col-9 col-sm-10 col-md-11' type="email"
+                        <label for='email'>Email <span className='required'>*</span>
+                        <input id='email' type="email"
                             name="email" value={email} required
                             onChange={({ target }) => setEmail(target.value)} placeholder="Votre Email" /></label>
                     </div>
 
                     <div className="form-group">
-                        <label className='col-3 col-sm-2 col-md-1'>Message <span className='required'>*</span>
-                        <textarea  className='col-9 col-sm-10 col-md-11' name="message" placeholder="Message" required onChange={({ target }) => setMessage(target.value)}
+                        <label for='message'>Message <span className='required'>*</span>
+                        <textarea id='message' name="message" placeholder="Message" required onChange={({ target }) => setMessage(target.value)}
                             value={message}></textarea></label>
                     </div>
 
@@ -64,10 +63,8 @@ const Contact = () => {
                     </div>
                 </div>
             </form>
-            <div className="success" id="success"></div>
-            <div className="error"></div>
           </div>
-        </div>
+        
       </div>
       <section className='adopt-cta'>
         <Adopt />
diff --git a/src/pages/donate.en.js b/src/pages/donate.en.js
index 9e6de69..99f1c8a 100644
--- a/src/pages/donate.en.js
+++ b/src/pages/donate.en.js
@@ -8,7 +8,7 @@ import Foster from "../components/foster";
 const Donate = () => {
   return (
     <main>
-      <Header />
+      <Header page='/fr/donate'/>
       <div className="container donations">
         <div className="row center">
             <h1>Donations</h1>
diff --git a/src/pages/donate.fr.js b/src/pages/donate.fr.js
index 75ee57f..4b7d7de 100644
--- a/src/pages/donate.fr.js
+++ b/src/pages/donate.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 Foster from "../components/foster";
+import Footer from "../components/fr/footer";
+import Foster from "../components/fr/foster";
 
 
 const Donate = () => {
   return (
     <main>
-      <Header />
+      <Header page='/en/donate'/>
       <div className="container">
         <div className="row center">
             <h1>Dons</h1>
diff --git a/src/pages/fosters.en.js b/src/pages/fosters.en.js
index be87640..342224b 100644
--- a/src/pages/fosters.en.js
+++ b/src/pages/fosters.en.js
@@ -12,7 +12,7 @@ const Fosters = ({data, pageContext }) => {
   console.log(data.allContentfulFosters.nodes);
   return (
     <main>
-      <Header />
+      <Header page='/fr/fosters'/>
       <div className="fosters container">
         <div className="row">
             <h1>Fosters</h1>
diff --git a/src/pages/fosters.fr.js b/src/pages/fosters.fr.js
index 6d28e7c..7c95f37 100644
--- a/src/pages/fosters.fr.js
+++ b/src/pages/fosters.fr.js
@@ -1,9 +1,9 @@
 import * as React from "react";
 import { graphql } from "gatsby";
-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";
 import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 import Pagination from "../components/pagination.js";
 
@@ -12,7 +12,7 @@ const Fosters = ({data, pageContext }) => {
   console.log(data.allContentfulFosters.nodes);
   return (
     <main>
-      <Header />
+      <Header page='/en/fosters'/>
       <div className="fosters container">
         <div className="row">
             <h1>Famille D'Accueil</h1>
@@ -21,10 +21,10 @@ const Fosters = ({data, pageContext }) => {
                       <div className="teaser-grid--wrapper col-lg-6" key={index}>
                         <div className="teaser-grid">
                             <div className="teaser-grid__name teaser__link row">
-                                <div className="teaser-grid__image col-md-3">
+                                <div className="teaser-grid__image col-md-4">
                                   <GatsbyImage image={getImage(item.image.gatsbyImageData)} aria-label={item.name} alt={''} />
                                 </div>
-                                <div className="teaser-grid__title col-md-3">{item.name}</div>
+                                <div className="teaser-grid__title col-md-6">{item.name}</div>
                                
                             
                             </div>
diff --git a/src/pages/fosters/become-a-foster.en.js b/src/pages/fosters/become-a-foster.en.js
index 815290d..2e18ee4 100644
--- a/src/pages/fosters/become-a-foster.en.js
+++ b/src/pages/fosters/become-a-foster.en.js
@@ -8,7 +8,7 @@ import Adopt from "../../components/adopt";
 const BecomeFosters = () => {
   return (
     <main>
-      <Header />
+      <Header page='/fr/fosters/become-a-foster'/>
       <div className="fostering container">
         <div className="row">
             <h1>How to Become a Foster</h1>
diff --git a/src/pages/fosters/become-a-foster.fr.js b/src/pages/fosters/become-a-foster.fr.js
index eef059f..70b5a9a 100644
--- a/src/pages/fosters/become-a-foster.fr.js
+++ b/src/pages/fosters/become-a-foster.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 Adopt from "../../components/adopt";
+import Adopt from "../../components/fr/adopt";
 
 
 const BecomeFosters = () => {
   return (
     <main>
-      <Header />
+      <Header page='/en/fosters/become-a-foster'/>
       <div className="fostering container">
         <div className="row">
             <h1>Comment devenir famille d'accueil</h1>
diff --git a/src/pages/fosters/foster-application.en.js b/src/pages/fosters/foster-application.en.js
index 8852c50..c5fef82 100644
--- a/src/pages/fosters/foster-application.en.js
+++ b/src/pages/fosters/foster-application.en.js
@@ -91,7 +91,7 @@ const FosterApplication = () => {
 };
   return (
     <main>
-      <Header />
+      <Header page='/fr/fosters/adoption-application'/>
       <div className="container">
             <h1>Foster Application</h1>
             <form className='foster-application-form' name="foster-application" method="post" data-netlify="true" data-netlify-honeypot="bot-field"
@@ -360,8 +360,6 @@ const FosterApplication = () => {
                     </div>
                 </div>
             </form>
-            <div className="success" id='success'></div>
-            <div className="error"></div>
           </div>
           <section className='volunteers'>
             <Volunteer />
diff --git a/src/pages/fosters/foster-application.fr.js b/src/pages/fosters/foster-application.fr.js
index b98c0f4..592158a 100644
--- a/src/pages/fosters/foster-application.fr.js
+++ b/src/pages/fosters/foster-application.fr.js
@@ -89,7 +89,7 @@ const FosterApplication = () => {
 };
   return (
     <main>
-      <Header />
+      <Header page='en/fosters/foster-application'/>
       <div className="container">
             <h1>Damille D'Accueil Application</h1>
             <form className='foster-application-form' name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field"
@@ -358,8 +358,6 @@ const FosterApplication = () => {
                     </div>
                 </div>
             </form>
-            <div className="success" id="success"></div>
-            <div className="error"></div>
           </div>
           <section className='volunteers'>
             <Volunteer />
diff --git a/src/pages/index.en.js b/src/pages/index.en.js
index e6973f7..2fd3465 100644
--- a/src/pages/index.en.js
+++ b/src/pages/index.en.js
@@ -26,7 +26,7 @@ const IndexPage = () => {
   }
   return (
     <main>
-      <Header />
+      <Header page='/fr/'/>
       <section>
         <div className="container">
           <div className="row">
diff --git a/src/pages/index.fr.js b/src/pages/index.fr.js
index e95dda4..2213b1d 100644
--- a/src/pages/index.fr.js
+++ b/src/pages/index.fr.js
@@ -25,7 +25,7 @@ const IndexPage = () => {
   }
   return (
     <main>
-      <Header />
+      <Header page='/en/'/>
       <section>
         <div className="container">
           <div className="row">
diff --git a/src/pages/successstories.en.js b/src/pages/successstories.en.js
index a40dabc..f959063 100644
--- a/src/pages/successstories.en.js
+++ b/src/pages/successstories.en.js
@@ -31,7 +31,7 @@ const SuccessStories = ({ data }) => {
 }
   return (
     <main>
-      <Header />
+      <Header page='/fr/successstories'/>
       <div className="container success">
         <div className="row">
             <h1>Sucess Stories</h1>
diff --git a/src/pages/successstories.fr.js b/src/pages/successstories.fr.js
index c348f1c..551c018 100644
--- a/src/pages/successstories.fr.js
+++ b/src/pages/successstories.fr.js
@@ -1,7 +1,7 @@
 
 import * as React from "react";
 import { graphql } from "gatsby";
-import Header from '../components/header';
+import Header from '../components/fr/header';
 import '../sass/styles.scss';
 import { INLINES, BLOCKS, MARKS } from '@contentful/rich-text-types';
 import { renderRichText } from 'gatsby-source-contentful/rich-text';
@@ -31,7 +31,7 @@ const SuccessStories = ({ data }) => {
 }
   return (
     <main>
-      <Header />
+      <Header page='/en/successstories'/>
       <div className="container success">
         <div className="row">
             <h1>Réussites</h1>
diff --git a/src/pages/thank-you.en.js b/src/pages/thank-you.en.js
index 26c0aa6..4e0efee 100644
--- a/src/pages/thank-you.en.js
+++ b/src/pages/thank-you.en.js
@@ -7,7 +7,7 @@ import Volunteer from "../components/volunteer";
 const Thankyou = () => {
   return (
     <main>
-        <Header />
+        <Header page='/fr/thank-you'/>
         <div className="container thank-you">
             <h1>Thank You for reaching out to us</h1>
             <p>We will get back to you shortly.</p>
diff --git a/src/pages/thank-you.fr.js b/src/pages/thank-you.fr.js
index 0285e29..4cd42b3 100644
--- a/src/pages/thank-you.fr.js
+++ b/src/pages/thank-you.fr.js
@@ -7,7 +7,7 @@ import Volunteer from "../components/fr/volunteer";
 const Thankyou = () => {
   return (
     <main>
-        <Header />
+        <Header page='/en/thank-you'/>
         <div className="container thank-you">
             <h1>Merci de nous avoir contactés</h1>
             <p>Nous vous répondrons sous peu.</p>