Updated the website

components/blocks-renderer.tsx

@@ -4,6 +4,7 @@ import { Features } from "./blocks/features";
 import { Hero } from "./blocks/hero";
 import { Testimonial } from "./blocks/testimonial";
 import { tinaField } from "tinacms/dist/react";
+import {Carousel} from "./blocks/carousel";
 
 export const Blocks = (props: Omit<Page, "id" | "_sys" | "_values">) => {
   return (
@@ -31,6 +32,8 @@ const Block = (block: PageBlocks) => {
       return <Features data={block} />;
     case "PageBlocksTestimonial":
       return <Testimonial data={block} />;
+    case "PageBlocksCarousel":
+      return <Carousel data={block} />;
     default:
       return null;
   }

components/blocks/anchoring.tsx

@@ -1,50 +0,0 @@
-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/blocks/carousel.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { Section } from "../util/section";
+import {PageBlocksCarousel} from "../../tina/__generated__/types";
+import {Anchoring, anchoringSchema} from "../util/anchoring";
+import {Template} from "tinacms";
+
+export const Carousel = ({ data }: { data: PageBlocksCarousel }) => {
+    return (
+        <Section>
+            <div className="carousel flex w-[100%] items-end justify-center" style={ { backgroundImage: `url(${ data?.images?.[0] })` } }>
+                { data?.link?.enabled && <Anchoring { ...data.link }/> }
+            </div>
+        </Section>);
+};
+
+const defaultCarousel = "Here's Another Feature";
+
+export const carouselBlockSchema: Template = {
+    name: "carousel",
+    label: "Carousel",
+    ui: {
+        previewSrc: "/blocks/features.png",
+        defaultItem: [defaultCarousel, defaultCarousel, defaultCarousel],
+    },
+    fields: [
+        {
+            type: "image",
+            label: "Images du carousel",
+            name: "images",
+            list: true,
+        },
+        {
+            ...anchoringSchema
+        }
+    ],
+};

components/blocks/content.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
-import type { TinaTemplate } from "tinacms";
+import type {Template, TinaTemplate} from "tinacms";
 import { PageBlocksContent } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
 
@@ -23,7 +23,7 @@ export const Content = ({ data }: { data: PageBlocksContent }) => {
   );
 };
 
-export const contentBlockSchema: TinaTemplate = {
+export const contentBlockSchema: Template = {
   name: "content",
   label: "Content",
   ui: {

components/blocks/features.tsx

@@ -7,6 +7,7 @@ import {
   PageBlocksFeaturesItems,
 } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
+import {Template} from "tinacms";
 
 export const Feature = ({
   featuresColor,
@@ -74,7 +75,7 @@ const defaultFeature = {
   },
 };
 
-export const featureBlockSchema = {
+export const featureBlockSchema: Template = {
   name: "features",
   label: "Features",
   ui: {

components/blocks/hero.tsx

@@ -3,7 +3,7 @@ import { Actions } from "../util/actions";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
-import type { TinaTemplate } from "tinacms";
+import type {Template, TinaTemplate} from "tinacms";
 import { PageBlocksHero } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
 
@@ -85,7 +85,7 @@ export const Hero = ({ data }: { data: PageBlocksHero }) => {
   );
 };
 
-export const heroBlockSchema: TinaTemplate = {
+export const heroBlockSchema: Template = {
   name: "hero",
   label: "Hero",
   ui: {

components/blocks/testimonial.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
-import type { TinaTemplate } from "tinacms";
+import type {Template, TinaTemplate} from "tinacms";
 import { PageBlocksTestimonial } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
 
@@ -61,7 +61,7 @@ export const Testimonial = ({ data }: { data: PageBlocksTestimonial }) => {
   );
 };
 
-export const testimonialBlockSchema: TinaTemplate = {
+export const testimonialBlockSchema: Template = {
   name: "testimonial",
   label: "Testimonial",
   ui: {

components/layout/footer/footer.tsx

@@ -4,9 +4,8 @@ import { FaFacebookF, FaGithub, FaTwitter } from "react-icons/fa";
 import { AiFillInstagram } from "react-icons/ai";
 import { Container } from "../../util/container";
 import { RawRenderer } from "./rawRenderer";
-import { Icon } from "../../util/icon";
 
-export const Footer = ({ data, icon, rawData }) => {
+export const Footer = ({ data, rawData }) => {
   const socialIconClasses = "h-7 w-auto";
   const socialIconColorClasses = {
     blue: "text-blue-500 dark:text-blue-400 hover:text-blue-300",

components/layout/header.tsx

@@ -1,20 +1,20 @@
 import React from "react";
 import Link from "next/link";
 import { tinaField } from "tinacms/dist/react";
-import defaultLogo from "../../assets/img/logo.png";
+import defaultLogo from "../../public/logo.png";
 import {GlobalHeader} from "../../tina/__generated__/types";
 
 export const Header = ({ data }: { data: GlobalHeader }) => {
   return (
     <nav className="navbar flex flex-wrap content-between sticky top-0 py-2">
-      <div className="flex grow justify-between px-6">
+      <div className="flex grow justify-between px-6 h-full">
         <div className="flex navbar-brand">
             <Link
               href="/"
               className="container flex items-center"
             >
                 <img src={ data.logoSrc || defaultLogo.src }/>
-                <div className="flex flex-col">
+                <div className="flex flex-col px-6">
                     <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>

components/layout/layout.tsx

@@ -17,7 +17,7 @@ export const Layout = ({
   return (
     <>
       <Head>
-        <title>Tina</title>
+        <title>{data?.header?.pageTitle}</title>
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
 
         <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -37,7 +37,6 @@ export const Layout = ({
         <Footer
           rawData={rawData}
           data={data?.footer}
-          icon={data?.header.icon}
         />
       </div>
     </>

components/util/anchoring.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+import {useEffect, useRef, useState} from "react";
+import {tinaField} from "tinacms/dist/react";
+import {Template} from "tinacms";
+import {ObjectField} from "@tinacms/schema-tools/dist/types";
+
+interface AnchoringProps {
+  text?: string, // Default: Découvrez-en plus !
+  linkTo?: string // Default: #main-page
+}
+
+export const Anchoring = (props: AnchoringProps) => {
+  const [opacity, setOpacity] = useState(1);
+  const anchoringRef = useRef(null);
+
+  const handleScrollOpacity = () => {
+    const scrollTop = window.scrollY || window.pageYOffset;
+    const elementHeight = anchoringRef.current.clientHeight;
+    const newOpacity = (elementHeight - scrollTop) / elementHeight;
+    setOpacity(newOpacity);
+  };
+
+  const handleScrollClick = () => {
+    anchoringRef.current.scrollIntoView({
+      behavior: "smooth",
+      block: "start"
+    });
+  }
+
+  useEffect(() => {
+    handleScrollOpacity(); // Initialize opacity on mount
+
+    window.addEventListener('scroll', handleScrollOpacity);
+
+    return () => {
+      window.removeEventListener('scroll', handleScrollOpacity);
+    };
+  }, []);
+
+  return (
+      <div
+          className="anchoring"
+          ref={anchoringRef}
+          style={ { opacity: opacity } }
+      >
+        <a onClick={ handleScrollClick }>
+          <h1 data-tina-field={tinaField(props, "text")}>{ props.text }</h1>
+          <img
+              src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjI1OCAxNi4yNDItNi02YTEuMDUgMS4wNSAwIDEgMSAxLjQ4NC0xLjQ4NEwxMiAxNC4wMTVsNS4yNTgtNS4yNTdhMS4wNSAxLjA1IDAgMSAxIDEuNDg0IDEuNDg0bC02IDZhMS4wNSAxLjA1IDAgMCAxLTEuNDg0IDBaIiBmaWxsPSIjZmZmZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGNsYXNzPSJmaWxsLTAwMDAwMCI+PC9wYXRoPjwvc3ZnPg=="/>
+        </a>
+      </div>
+  );
+};
+
+export const anchoringSchema: ObjectField = {
+  type: "object",
+  label: "Lien",
+  name: "link",
+  ui: {
+    defaultItem: {
+      text: "Découvrez-en plus !",
+      linkTo: "#main-page",
+      enabled: true
+    },
+  },
+  fields: [
+    {
+      type: "boolean",
+      label: "Active",
+      name: "enabled"
+    },
+    {
+      type: "string",
+      label: "Texte",
+      name: "text"
+    },
+    {
+      type: "string",
+      label: "Lien",
+      name: "linkTo"
+    }
+  ]
+};

components/util/icon.tsx

@@ -2,6 +2,8 @@ import * as React from "react";
 import { ColorPickerInput } from "../../tina/fields/color";
 import { IconPickerInput } from "../../tina/fields/icon";
 import * as BoxIcons from "react-icons/bi";
+import {Template} from "tinacms";
+import {ObjectField} from "@tinacms/schema-tools/dist/types";
 
 export const IconOptions = {
   Tina: (props) => (
@@ -117,7 +119,7 @@ export const Icon = ({
   }
 };
 
-export const iconSchema = {
+export const iconSchema: ObjectField = {
   type: "object",
   label: "Icon",
   name: "icon",
@@ -127,7 +129,7 @@ export const iconSchema = {
       label: "Icon",
       name: "name",
       ui: {
-        component: IconPickerInput,
+        component: (props) => IconPickerInput(props),
       },
     },
     {
@@ -135,7 +137,7 @@ export const iconSchema = {
       label: "Color",
       name: "color",
       ui: {
-        component: ColorPickerInput,
+        component: () => ColorPickerInput,
       },
     },
     {