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 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>
   );

content/global/index.json

@@ -5,8 +5,9 @@
       "color": "orange",
       "style": "float"
     },
-    "name": "Tina Starter",
-    "color": "default",
+    "title": "PsychARThérapie",
+    "subtitle": "Pauline Vince",
+    "logoSrc": "/uploads/logo.png",
     "nav": [
       {
         "href": "",
@@ -19,6 +20,11 @@
       {
         "href": "posts",
         "label": "Blog"
+      },
+      {
+        "href": "https://www.rdv360.com/psychartherapie",
+        "label": "Rendez-vous",
+        "external": true
       }
     ]
   },

pages/_app.tsx

@@ -1,4 +1,4 @@
-import "../styles.css";
+import "../styles/styles.css";
 
 const App = ({ Component, pageProps }) => {
   return <Component {...pageProps} />;

styles.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

styles/anchoring.css

@@ -0,0 +1,16 @@
+.anchoring {
+    text-align: center;
+}
+
+.anchoring h1 {
+    margin-bottom: -35px;
+}
+
+.anchoring h1, .anchoring h1:hover {
+    color: white;
+}
+
+.anchoring img {
+    width: 128px;
+    height: 128px;
+}

styles/header.css

@@ -0,0 +1,35 @@
+.navbar {
+    font-family: 'Nunito', sans-serif;
+    background: var(--header-BackgroundColor);
+    color: var(--header-textColor);
+    z-index: 9999;
+}
+
+.navbar .navbar-brand h3 {
+    margin-bottom: 0;
+}
+
+.navbar .navbar-brand .title {
+    font-size: 1.5rem;
+}
+
+.navbar .navbar-brand .subtitle {
+    font-size: .9rem;
+}
+
+.navbar .nav-item .nav-link {
+    font-size: 1.4rem;
+    font-weight: 400;
+}
+
+.external-link-icon:after {
+    content: "";
+    position: relative;
+    display: inline-block;
+    left: 5px;
+    top: 2px;
+    background: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNzUuNzg4IDE4IDQ2LjU2NCA0Ny4yMjRhNC40MDIgNC40MDIgMCAwIDAgMCA2LjIyMyA0LjQwMyA0LjQwMyAwIDAgMCA2LjIyMyAwTDgyIDI0LjIzM3Y5Ljc3QTQuMDAxIDQuMDAxIDAgMCAwIDg2IDM4YzIuMjA1IDAgNC0xLjc5IDQtMy45OTdWMTMuOTk3YzAtMS4xMDEtLjQ0Ny0yLjEtMS4xNy0yLjgyNEEzLjk4MyAzLjk4MyAwIDAgMCA4Ni4wMDIgMTBINjUuOTk3QTQuMDAxIDQuMDAxIDAgMCAwIDYyIDE0YzAgMi4yMDUgMS43OSA0IDMuOTk3IDRoOS43OTFaTTkwIDU4VjM4Ljk4NSA4MC4wM2MwIDUuNTA2LTMuOTY3IDkuOTctOC44NjcgOS45N0gxOC44NjdDMTMuOTcgOTAgMTAgODUuNTI3IDEwIDgwLjAzVjE5Ljk3YzAtNS41MDYgMy45NjctOS45NyA4Ljg2Ny05Ljk3aDQyLjdINDJhNCA0IDAgMSAxIDAgOEgyMC4yNzhDMTkuMDA1IDE4IDE4IDE5LjE5NSAxOCAyMC42NjlWNzkuMzNDMTggODAuNzggMTkuMDIgODIgMjAuMjc4IDgyaDU5LjQ0NEM4MC45OTUgODIgODIgODAuODA1IDgyIDc5LjMzMVY1OGE0IDQgMCAxIDEgOCAwWiIgZmlsbD0iI2ZmZDM5YyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGFzcz0iZmlsbC0wMDAwMDAiPjwvcGF0aD48L3N2Zz4=') center center;
+    background-size: contain;
+    height: 16px;
+    width: 16px;
+}

styles/styles.css

@@ -0,0 +1,21 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
+@import "header.css";
+@import "anchoring.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+    scroll-padding-top: 7.25rem;
+
+    --body-BackgroundColor: #f5f5f5;
+    --primaryColor: #124498;
+    --header-BackgroundColor: var(--primaryColor);
+    --header-textColor: #ffd39c;
+}
+
+body {
+    font-family: 'Questrial', sans-serif;
+}

tina/config.tsx

@@ -4,7 +4,6 @@ import { featureBlockSchema } from "../components/blocks/features";
 import { heroBlockSchema } from "../components/blocks/hero";
 import { testimonialBlockSchema } from "../components/blocks/testimonial";
 import { ColorPickerInput } from "./fields/color";
-import { iconSchema } from "../components/util/icon";
 
 const config = defineConfig({
   clientId: process.env.NEXT_PUBLIC_TINA_CLIENT_ID!,
@@ -159,20 +158,20 @@ const config = defineConfig({
             label: "Header",
             name: "header",
             fields: [
-              iconSchema as any,
               {
                 type: "string",
-                label: "Name",
-                name: "name",
+                label: "Title",
+                name: "title",
               },
               {
                 type: "string",
-                label: "Color",
-                name: "color",
-                options: [
-                  { label: "Default", value: "default" },
-                  { label: "Primary", value: "primary" },
-                ],
+                label: "Subtitle",
+                name: "subtitle",
+              },
+              {
+                type: "image",
+                label: "Logo",
+                name: "logoSrc"
               },
               {
                 type: "object",
@@ -186,6 +185,7 @@ const config = defineConfig({
                   defaultItem: {
                     href: "home",
                     label: "Home",
+                    external: false
                   },
                 },
                 fields: [
@@ -199,6 +199,11 @@ const config = defineConfig({
                     label: "Label",
                     name: "label",
                   },
+                  {
+                    type: "boolean",
+                    label: "External",
+                    name: "external",
+                  }
                 ],
               },
             ],