diff --git a/docs/docs/homepage/how-it-works.ts b/docs/docs/homepage/how-it-works.ts index 59bcf1ba6b0..85c7262fcb2 100644 --- a/docs/docs/homepage/how-it-works.ts +++ b/docs/docs/homepage/how-it-works.ts @@ -7,7 +7,7 @@ export const HowItWorksContent = { }), descriptionParagraphOne: translate({ id: "homepage.featureList.lowLatency.description.paragraphOne", - message: `Traditional blockchain systems face scalability limitationsdue to + message: `Traditional blockchain systems face scalability limitations due to the trade-off between decentralization, security, and scalability (the blockchain trilemma). Cardano's consensus algorithm, while efficient, still requires massive global replication of state diff --git a/docs/helpers/debounce.ts b/docs/helpers/debounce.ts new file mode 100644 index 00000000000..a98547af2e0 --- /dev/null +++ b/docs/helpers/debounce.ts @@ -0,0 +1,10 @@ +export function debounce void>( + func: T, + wait: number +): (...args: Parameters) => void { + let timeout: ReturnType; + return function (...args: Parameters) { + clearTimeout(timeout); + timeout = setTimeout(() => func(...args), wait); + }; +} diff --git a/docs/src/components/homepage/HowItWorks.tsx b/docs/src/components/homepage/HowItWorks.tsx index 045601108d0..9408e440dd5 100644 --- a/docs/src/components/homepage/HowItWorks.tsx +++ b/docs/src/components/homepage/HowItWorks.tsx @@ -1,16 +1,21 @@ import React, { FC, useState } from "react"; - import clsx from "clsx"; import Arrow from "../icons/Arrow"; import { forLaptop, forTablet } from "../../../helpers/media-queries"; import useMediaQuery from "../../hooks/useMediaQuery"; import { motion } from "framer-motion"; import { HowItWorksContent } from "../../../docs/homepage/how-it-works"; +import { useWindowSize } from "../../hooks/useWindowResize"; const HowItWorks: FC = () => { + const windowSize = useWindowSize(300); const [expanded, setExpanded] = useState(false); const isTabletUp = useMediaQuery(forTablet); const isLaptopUp = useMediaQuery(forLaptop); + + // Reset inline height set by framer motion + const key = `${windowSize.width}-${windowSize.height}`; + return ( { >
/ HOW IT WORKS
-
-

+
+

{HowItWorksContent.title}

{HowItWorksContent.descriptionParagraphOne}

- - {HowItWorksContent.descriptionParagraphTwo} - - - {HowItWorksContent.descriptionParagraphThree} - +

{HowItWorksContent.descriptionParagraphTwo}

+

{HowItWorksContent.descriptionParagraphThree}

+ +
+ +
{isTabletUp && ( )} -
- -
); }; diff --git a/docs/src/hooks/useWindowResize.ts b/docs/src/hooks/useWindowResize.ts new file mode 100644 index 00000000000..f9899a90af8 --- /dev/null +++ b/docs/src/hooks/useWindowResize.ts @@ -0,0 +1,36 @@ +import { useLayoutEffect, useState } from "react"; +import { debounce } from "../../helpers/debounce"; + +export function useWindowSize(debounceTime?: number) { + const [size, setSize] = useState<{ + width: number | null; + height: number | null; + }>({ + width: null, + height: null, + }); + + useLayoutEffect(() => { + const handleResize = () => { + setSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + }; + + // Set initial size + handleResize(); + + const onResize = debounceTime + ? debounce(handleResize, debounceTime) + : handleResize; + + window.addEventListener("resize", onResize); + + return () => { + window.removeEventListener("resize", onResize); + }; + }, []); + + return size; +}