Actual basic footer. Need to add everything tina related.

assets/img/facebook.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M449.446 0C483.971 0 512 28.03 512 62.554v386.892C512 483.97 483.97 512 449.446 512H342.978V319.085h66.6l12.672-82.621h-79.272v-53.617c0-22.603 11.073-44.636 46.58-44.636H425.6v-70.34s-32.71-5.582-63.982-5.582c-65.288 0-107.96 39.569-107.96 111.204v62.971h-72.573v82.621h72.573V512H62.554C28.03 512 0 483.97 0 449.446V62.554C0 28.03 28.029 0 62.554 0h386.892Z" fill="#124498" class="fill-000000"></path></svg>

assets/img/instagram.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M449.446 0C483.971 0 512 28.03 512 62.554v386.892C512 483.97 483.97 512 449.446 512H62.554C28.03 512 0 483.97 0 449.446V62.554C0 28.03 28.029 0 62.554 0h386.892ZM256 81c-47.527 0-53.487.201-72.152 1.053-18.627.85-31.348 3.808-42.48 8.135-11.508 4.472-21.267 10.456-30.996 20.184-9.729 9.729-15.713 19.489-20.185 30.996-4.326 11.132-7.284 23.853-8.135 42.48C81.201 202.513 81 208.473 81 256s.201 53.487 1.052 72.152c.851 18.627 3.809 31.348 8.135 42.48 4.472 11.507 10.456 21.267 20.185 30.996s19.488 15.713 30.996 20.185c11.132 4.326 23.853 7.284 42.48 8.134C202.513 430.799 208.473 431 256 431s53.487-.201 72.152-1.053c18.627-.85 31.348-3.808 42.48-8.134 11.507-4.472 21.267-10.456 30.996-20.185s15.713-19.489 20.185-30.996c4.326-11.132 7.284-23.853 8.134-42.48C430.799 309.487 431 303.527 431 256s-.201-53.487-1.053-72.152c-.85-18.627-3.808-31.348-8.134-42.48-4.472-11.507-10.456-21.267-20.185-30.996-9.729-9.728-19.489-15.712-30.996-20.184-11.132-4.327-23.853-7.285-42.48-8.135C309.487 81.201 303.527 81 256 81Zm0 31.532c46.727 0 52.262.178 70.715 1.02 17.062.779 26.328 3.63 32.495 6.025 8.169 3.175 13.998 6.968 20.122 13.091 6.124 6.124 9.916 11.954 13.091 20.122 2.396 6.167 5.247 15.433 6.025 32.495.842 18.453 1.021 23.988 1.021 70.715 0 46.727-.179 52.262-1.021 70.715-.778 17.062-3.629 26.328-6.025 32.495-3.175 8.169-6.967 13.998-13.091 20.122-6.124 6.124-11.953 9.916-20.122 13.091-6.167 2.396-15.433 5.247-32.495 6.025-18.45.842-23.985 1.021-70.715 1.021-46.73 0-52.264-.179-70.715-1.021-17.062-.778-26.328-3.629-32.495-6.025-8.169-3.175-13.998-6.967-20.122-13.091-6.124-6.124-9.917-11.953-13.091-20.122-2.396-6.167-5.247-15.433-6.026-32.495-.842-18.453-1.02-23.988-1.02-70.715 0-46.727.178-52.262 1.02-70.715.779-17.062 3.63-26.328 6.026-32.495 3.174-8.168 6.967-13.998 13.091-20.122 6.124-6.123 11.953-9.916 20.122-13.091 6.167-2.395 15.433-5.246 32.495-6.025 18.453-.842 23.988-1.02 70.715-1.02Zm0 53.603c-49.631 0-89.865 40.234-89.865 89.865 0 49.631 40.234 89.865 89.865 89.865 49.631 0 89.865-40.234 89.865-89.865 0-49.631-40.234-89.865-89.865-89.865Zm0 148.198c-32.217 0-58.333-26.116-58.333-58.333s26.116-58.333 58.333-58.333 58.333 26.116 58.333 58.333-26.116 58.333-58.333 58.333Zm114.416-151.748c0 11.598-9.403 20.999-21.001 20.999-11.597 0-20.999-9.401-20.999-20.999 0-11.598 9.402-21 20.999-21 11.598 0 21.001 9.402 21.001 21Z" fill="#124498" class="fill-000000"></path></svg>

components/blocks/carousel.tsx

@@ -29,7 +29,7 @@ export const Carousel: PageBlockFunction<PageBlocksCarousel> = ({ data }) => {
                     dynamicHeight={ false }
                     interval={ data.speed || 3000 }>
                     { data?.images?.map(imageUrl => (
-                        <div className="carousel-image" style={ { backgroundImage: `url(${ imageUrl })` } }/>
+                        <div key={ imageUrl } className="carousel-image" style={ { backgroundImage: `url(${ imageUrl })` } }/>
                     )) }
                 </ReactCarousel>
 

components/layout/footer/footer.tsx

@@ -1,29 +1,34 @@
 import React from "react";
-import Link from "next/link";
-import { FaFacebookF, FaGithub, FaTwitter } from "react-icons/fa";
-import { AiFillInstagram } from "react-icons/ai";
 import { Container } from "../../util/container";
-import { RawRenderer } from "./rawRenderer";
 import { ObjectField } from "@tinacms/schema-tools/dist/types";
-import TagManager from "react-gtm-module";
+import facebookImage from "../../../assets/img/facebook.svg";
+import instagramImage from "../../../assets/img/instagram.svg";
 
 export const Footer = ({ data, rawData }) => {
     return (
-        <footer className={ "" }>
+        <footer>
             <Container className="relative" size="small">
-                <div>
+                <div className={ "flex flex-row justify-between" }>
-                    <p>Contact :<br/><a href="mailto:psychartherapie@gmail.com" onClick={ () => { /* window.dataLayer.push({ event: "mail-click" });*/ } }>psychartherapie@gmail.com</a><br/><b>06 49 23 02 90</b></p>
+                    <div>
-                    <p>SIRET 911 883 338 00012<br/><a href="legals.html">Mentions légales</a></p>
+                        <p>Contact :<br/>
-                    <div id="socials" className="d-flex d-column">
+                            <a href="mailto:psychartherapie@gmail.com" onClick={ () => { /* window.dataLayer.push({ event: "mail-click" });*/ } }>
-                        <a href="https://www.facebook.com/psychartherapie.gard" onClick={ () => { /* window.dataLayer.push({ socials: "fb-click" });*/ } } className="py-2 me-2">
+                                psychartherapie@gmail.com
-                            <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjIiPjxwYXRoIGQ9Ik00NDkuNDQ2IDBDNDgzLjk3MSAwIDUxMiAyOC4wMyA1MTIgNjIuNTU0djM4Ni44OTJDNTEyIDQ4My45NyA0ODMuOTcgNTEyIDQ0OS40NDYgNTEySDM0Mi45NzhWMzE5LjA4NWg2Ni42bDEyLjY3Mi04Mi42MjFoLTc5LjI3MnYtNTMuNjE3YzAtMjIuNjAzIDExLjA3My00NC42MzYgNDYuNTgtNDQuNjM2SDQyNS42di03MC4zNHMtMzIuNzEtNS41ODItNjMuOTgyLTUuNTgyYy02NS4yODggMC0xMDcuOTYgMzkuNTY5LTEwNy45NiAxMTEuMjA0djYyLjk3MWgtNzIuNTczdjgyLjYyMWg3Mi41NzNWNTEySDYyLjU1NEMyOC4wMyA1MTIgMCA0ODMuOTcgMCA0NDkuNDQ2VjYyLjU1NEMwIDI4LjAzIDI4LjAyOSAwIDYyLjU1NCAwaDM4Ni44OTJaIiBmaWxsPSIjMTI0NDk4IiBjbGFzcz0iZmlsbC0wMDAwMDAiPjwvcGF0aD48L3N2Zz4=" alt="Facebook"/>
+                            </a>
-                        </a>
+                            <br/>
-                        <a href="https://www.instagram.com/psychartherapie" onClick={ () => { /* window.dataLayer.push({ socials: "insta-click" });*/ } } className="py-2">
+                            <b>06 49 23 02 90</b>
-                            <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjIiPjxwYXRoIGQ9Ik00NDkuNDQ2IDBDNDgzLjk3MSAwIDUxMiAyOC4wMyA1MTIgNjIuNTU0djM4Ni44OTJDNTEyIDQ4My45NyA0ODMuOTcgNTEyIDQ0OS40NDYgNTEySDYyLjU1NEMyOC4wMyA1MTIgMCA0ODMuOTcgMCA0NDkuNDQ2VjYyLjU1NEMwIDI4LjAzIDI4LjAyOSAwIDYyLjU1NCAwaDM4Ni44OTJaTTI1NiA4MWMtNDcuNTI3IDAtNTMuNDg3LjIwMS03Mi4xNTIgMS4wNTMtMTguNjI3Ljg1LTMxLjM0OCAzLjgwOC00Mi40OCA4LjEzNS0xMS41MDggNC40NzItMjEuMjY3IDEwLjQ1Ni0zMC45OTYgMjAuMTg0LTkuNzI5IDkuNzI5LTE1LjcxMyAxOS40ODktMjAuMTg1IDMwLjk5Ni00LjMyNiAxMS4xMzItNy4yODQgMjMuODUzLTguMTM1IDQyLjQ4QzgxLjIwMSAyMDIuNTEzIDgxIDIwOC40NzMgODEgMjU2cy4yMDEgNTMuNDg3IDEuMDUyIDcyLjE1MmMuODUxIDE4LjYyNyAzLjgwOSAzMS4zNDggOC4xMzUgNDIuNDggNC40NzIgMTEuNTA3IDEwLjQ1NiAyMS4yNjcgMjAuMTg1IDMwLjk5NnMxOS40ODggMTUuNzEzIDMwLjk5NiAyMC4xODVjMTEuMTMyIDQuMzI2IDIzLjg1MyA3LjI4NCA0Mi40OCA4LjEzNEMyMDIuNTEzIDQzMC43OTkgMjA4LjQ3MyA0MzEgMjU2IDQzMXM1My40ODctLjIwMSA3Mi4xNTItMS4wNTNjMTguNjI3LS44NSAzMS4zNDgtMy44MDggNDIuNDgtOC4xMzQgMTEuNTA3LTQuNDcyIDIxLjI2Ny0xMC40NTYgMzAuOTk2LTIwLjE4NXMxNS43MTMtMTkuNDg5IDIwLjE4NS0zMC45OTZjNC4zMjYtMTEuMTMyIDcuMjg0LTIzLjg1MyA4LjEzNC00Mi40OEM0MzAuNzk5IDMwOS40ODcgNDMxIDMwMy41MjcgNDMxIDI1NnMtLjIwMS01My40ODctMS4wNTMtNzIuMTUyYy0uODUtMTguNjI3LTMuODA4LTMxLjM0OC04LjEzNC00Mi40OC00LjQ3Mi0xMS41MDctMTAuNDU2LTIxLjI2Ny0yMC4xODUtMzAuOTk2LTkuNzI5LTkuNzI4LTE5LjQ4OS0xNS43MTItMzAuOTk2LTIwLjE4NC0xMS4xMzItNC4zMjctMjMuODUzLTcuMjg1LTQyLjQ4LTguMTM1QzMwOS40ODcgODEuMjAxIDMwMy41MjcgODEgMjU2IDgxWm0wIDMxLjUzMmM0Ni43MjcgMCA1Mi4yNjIuMTc4IDcwLjcxNSAxLjAyIDE3LjA2Mi43NzkgMjYuMzI4IDMuNjMgMzIuNDk1IDYuMDI1IDguMTY5IDMuMTc1IDEzLjk5OCA2Ljk2OCAyMC4xMjIgMTMuMDkxIDYuMTI0IDYuMTI0IDkuOTE2IDExLjk1NCAxMy4wOTEgMjAuMTIyIDIuMzk2IDYuMTY3IDUuMjQ3IDE1LjQzMyA2LjAyNSAzMi40OTUuODQyIDE4LjQ1MyAxLjAyMSAyMy45ODggMS4wMjEgNzAuNzE1IDAgNDYuNzI3LS4xNzkgNTIuMjYyLTEuMDIxIDcwLjcxNS0uNzc4IDE3LjA2Mi0zLjYyOSAyNi4zMjgtNi4wMjUgMzIuNDk1LTMuMTc1IDguMTY5LTYuOTY3IDEzLjk5OC0xMy4wOTEgMjAuMTIyLTYuMTI0IDYuMTI0LTExLjk1MyA5LjkxNi0yMC4xMjIgMTMuMDkxLTYuMTY3IDIuMzk2LTE1LjQzMyA1LjI0Ny0zMi40OTUgNi4wMjUtMTguNDUuODQyLTIzLjk4NSAxLjAyMS03MC43MTUgMS4wMjEtNDYuNzMgMC01Mi4yNjQtLjE3OS03MC43MTUtMS4wMjEtMTcuMDYyLS43NzgtMjYuMzI4LTMuNjI5LTMyLjQ5NS02LjAyNS04LjE2OS0zLjE3NS0xMy45OTgtNi45NjctMjAuMTIyLTEzLjA5MS02LjEyNC02LjEyNC05LjkxNy0xMS45NTMtMTMuMDkxLTIwLjEyMi0yLjM5Ni02LjE2Ny01LjI0Ny0xNS40MzMtNi4wMjYtMzIuNDk1LS44NDItMTguNDUzLTEuMDItMjMuOTg4LTEuMDItNzAuNzE1IDAtNDYuNzI3LjE3OC01Mi4yNjIgMS4wMi03MC43MTUuNzc5LTE3LjA2MiAzLjYzLTI2LjMyOCA2LjAyNi0zMi40OTUgMy4xNzQtOC4xNjggNi45NjctMTMuOTk4IDEzLjA5MS0yMC4xMjIgNi4xMjQtNi4xMjMgMTEuOTUzLTkuOTE2IDIwLjEyMi0xMy4wOTEgNi4xNjctMi4zOTUgMTUuNDMzLTUuMjQ2IDMyLjQ5NS02LjAyNSAxOC40NTMtLjg0MiAyMy45ODgtMS4wMiA3MC43MTUtMS4wMlptMCA1My42MDNjLTQ5LjYzMSAwLTg5Ljg2NSA0MC4yMzQtODkuODY1IDg5Ljg2NSAwIDQ5LjYzMSA0MC4yMzQgODkuODY1IDg5Ljg2NSA4OS44NjUgNDkuNjMxIDAgODkuODY1LTQwLjIzNCA4OS44NjUtODkuODY1IDAtNDkuNjMxLTQwLjIzNC04OS44NjUtODkuODY1LTg5Ljg2NVptMCAxNDguMTk4Yy0zMi4yMTcgMC01OC4zMzMtMjYuMTE2LTU4LjMzMy01OC4zMzNzMjYuMTE2LTU4LjMzMyA1OC4zMzMtNTguMzMzIDU4LjMzMyAyNi4xMTYgNTguMzMzIDU4LjMzMy0yNi4xMTYgNTguMzMzLTU4LjMzMyA1OC4zMzNabTExNC40MTYtMTUxLjc0OGMwIDExLjU5OC05LjQwMyAyMC45OTktMjEuMDAxIDIwLjk5OS0xMS41OTcgMC0yMC45OTktOS40MDEtMjAuOTk5LTIwLjk5OSAwLTExLjU5OCA5LjQwMi0yMSAyMC45OTktMjEgMTEuNTk4IDAgMjEuMDAxIDkuNDAyIDIxLjAwMSAyMVoiIGZpbGw9IiMxMjQ0OTgiIGNsYXNzPSJmaWxsLTAwMDAwMCI+PC9wYXRoPjwvc3ZnPg==" alt="Instagram"/>
+                        </p>
-                        </a>
+                        <p>SIRET 911 883 338 00012<br/><a href="legals.html">Mentions légales</a></p>
+                        <div id="socials" className="flex flex-row">
+                            <a href="https://www.facebook.com/psychartherapie.gard" onClick={ () => { /* window.dataLayer.push({ socials: "fb-click" });*/ } } className="py-2 me-2">
+                                <img src={ facebookImage.src } alt="Facebook"/>
+                            </a>
+                            <a href="https://www.instagram.com/psychartherapie" onClick={ () => { /* window.dataLayer.push({ socials: "insta-click" });*/ } } className="py-2">
+                                <img src={ instagramImage.src } alt="Instagram"/>
+                            </a>
+                        </div>
                     </div>
                     <div>
-                        <p>&copy; 2021 &#8211; Fait avec amour par <a className="mx-1" href="https://www.linkedin.com/in/nolwenn-meyer/">Nolwenn Meyer</a></p>
+                        <p>&copy; 2023 &#8211; Fait avec amour par <a className="mx-1" href="https://www.linkedin.com/in/nolwenn-meyer/">Nolwenn Meyer</a></p>
                     </div>
                 </div>
             </Container>

components/layout/layout.tsx

@@ -31,7 +31,7 @@ export const Layout = ({
                 className={ "min-h-screen flex flex-col" }
             >
                 <Header data={ data?.header } />
-                <div className="flex-1 text-gray-800 bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-1000 flex flex-col">
+                <div className="flex-1 flex flex-col">
                     { children }
                 </div>
                 <Footer

styles/_styles.scss

@@ -5,6 +5,7 @@
 @import "carousel";
 @import "image";
 @import "main-title";
+@import "footer";
 
 @tailwind base;
 @tailwind components;
@@ -20,6 +21,11 @@ html {
     scroll-padding-top: var(--header-Height);
 }
 
+// TODO: Try to do this in a better way if possible
+.prose :where(p:first-of-type):not(:where([class~="not-prose"] *)) {
+    font-size: initial;
+}
+
 .container-large {
     max-width: 75rem;
 }

styles/footer.scss

@@ -0,0 +1,19 @@
+#socials img {
+  width: 2rem;
+  height: 2rem;
+}
+
+footer {
+  color: #5975a3;
+
+  p {
+    text-align: justify;
+    hyphens: auto;
+    font-size: 1.05rem;
+    margin-bottom: 1rem;
+  }
+
+  a {
+    color: #d8ac74;
+  }
+}