Added an header and other components

components/blocks/anchoring.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import {useEffect, useRef, useState} from "react";
+
+interface AnchoringProps {
+  text: string, // Default: Découvrez-en plus !
+  linkTo: string // Default: #main-page
+}
+
+export const Anchoring = ({ data }: { data: AnchoringProps }) => {
+  const [opacity, setOpacity] = useState(1);
+  const anchoringRef = useRef(null);
+
+  const handleScroll = () => {
+    const scrollTop = window.scrollY || window.pageYOffset;
+    const elementHeight = anchoringRef.current.clientHeight;
+    const newOpacity = (elementHeight - scrollTop) / elementHeight;
+    setOpacity(newOpacity);
+  };
+
+  useEffect(() => {
+    handleScroll(); // Initialize opacity on mount
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  const anchoringStyle = {
+    opacity: opacity,
+    transition: 'opacity 0.3s', // You can add a transition for a smooth effect
+  };
+
+  return (
+      <div className="mx-auto">
+        <div
+            className="anchoring"
+            ref={anchoringRef}
+            style={anchoringStyle}
+        >
+          <a href={`${ data.linkTo }`}>
+            <h1>{ data.text }</h1>
+            <img
+                src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjI1OCAxNi4yNDItNi02YTEuMDUgMS4wNSAwIDEgMSAxLjQ4NC0xLjQ4NEwxMiAxNC4wMTVsNS4yNTgtNS4yNTdhMS4wNSAxLjA1IDAgMSAxIDEuNDg0IDEuNDg0bC02IDZhMS4wNSAxLjA1IDAgMCAxLTEuNDg0IDBaIiBmaWxsPSIjZmZmZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGNsYXNzPSJmaWxsLTAwMDAwMCI+PC9wYXRoPjwvc3ZnPg=="/>
+          </a>
+        </div>
+      </div>
+  );
+};

components/layout/footer/footer.tsx

@@ -45,15 +45,6 @@ export const Footer = ({ data, icon, rawData }) => {
             href="/"
             className="group mx-2 flex items-center font-bold tracking-tight text-gray-400 dark:text-gray-300 opacity-50 hover:opacity-100 transition duration-150 ease-out whitespace-nowrap"
           >
-            <Icon
-              parentColor={data.color}
-              data={{
-                name: icon.name,
-                color: data.color === "primary" ? "primary" : icon.color,
-                style: icon.style,
-              }}
-              className="inline-block h-10 w-auto group-hover:text-orange-500"
-            />
           </Link>
           <div className="flex gap-4">
             {data.social && data.social.facebook && (

components/layout/header.tsx

@@ -1,36 +1,23 @@
 import React from "react";
 import Link from "next/link";
-import { useRouter } from "next/router";
-import { Icon } from "../util/icon";
 import { tinaField } from "tinacms/dist/react";
-import { GlobalHeader } from "../../tina/__generated__/types";
+import defaultLogo from "../../assets/img/logo.png";
+import {GlobalHeader} from "../../tina/__generated__/types";
 
 export const Header = ({ data }: { data: GlobalHeader }) => {
-  const router = useRouter();
-
-  const [isClient, setIsClient] = React.useState(false);
-  React.useEffect(() => {
-    setIsClient(true);
-  }, []);
-
   return (
-    <nav className="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
-      <div className="container d-flex flex-column flex-md-row justify-content-between">
-        <div className="flex">
+    <nav className="navbar flex flex-wrap content-between sticky top-0 py-2">
+      <div className="flex grow justify-between px-6">
+        <div className="flex navbar-brand">
             <Link
               href="/"
-              className="navbar-brand container d-flex align-items-md-center"
+              className="container flex items-center"
             >
-              <Icon
-                tinaField={tinaField(data, "icon")}
-                parentColor={data.color}
-                data={{
-                  name: data.icon.name,
-                  color: data.icon.color,
-                  style: data.icon.style,
-                }}
-              />
-              <span data-tina-field={tinaField(data, "name")}>{data.name}</span>
+                <img src={ data.logoSrc || defaultLogo.src }/>
+                <div className="flex flex-col">
+                    <h3 className="title" data-tina-field={tinaField(data, "title")}>{data.title}</h3>
+                    <div className="subtitle" data-tina-field={tinaField(data, "subtitle")}>{data.subtitle}</div>
+                </div>
             </Link>
         </div>
         <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -38,8 +25,8 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
                 aria-label="Toggle navigation">
           <span className="navbar-toggler-icon"></span>
         </button>
-        <div className="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
-          <ul className="navbar-nav d-flex flex-column flex-md-row">
+        <div className={`flex items-center` } id="navbarSupportedContent">
+          <ul className="flex md:flex-row">
             {data.nav &&
               data.nav.map((item, i) => {
                 /*const activeItem =
@@ -53,24 +40,16 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
                   >
                     <Link
                       data-tina-field={tinaField(item, "label")}
-                      href={`/${item.href}`}
-                      className="nav-link p-2"
+                      href={`${ item.external? "" : "/" }${ item.href }`}
+                      className={`nav-link p-2 ${ item.external ? "external-link-icon" : ""}`}
                     >
                       {item.label}
                     </Link>
                   </li>
                 );
               })}
-            <li className="nav-item">
-              <a id="redirecting" className="nav-link p-2 pe-4" href="https://www.rdv360.com/psychartherapie">Rendez-vous</a>
-            </li>
           </ul>
         </div>
-        <div
-          className={`absolute h-1 bg-gradient-to-r from-transparent ${
-            data.color === "primary" ? `via-white` : `via-black dark:via-white`
-          } to-transparent bottom-0 left-4 right-4 -z-1 opacity-5`}
-        />
       </div>
     </nav>
   );