diff --git a/assets/img/logo.png b/assets/img/logo.png new file mode 100644 index 0000000..8a3f756 Binary files /dev/null and b/assets/img/logo.png differ diff --git a/components/blocks/anchoring.tsx b/components/blocks/anchoring.tsx new file mode 100644 index 0000000..bd18732 --- /dev/null +++ b/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 ( +
+
+ +

{ data.text }

+ + +
+
+ ); +}; diff --git a/components/layout/footer/footer.tsx b/components/layout/footer/footer.tsx index c8e1c69..480a3a5 100644 --- a/components/layout/footer/footer.tsx +++ b/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" > -
{data.social && data.social.facebook && ( diff --git a/components/layout/header.tsx b/components/layout/header.tsx index 2561ba7..7e70f6d 100644 --- a/components/layout/header.tsx +++ b/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 ( -