Updated the website

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: {