From 918350ce0dfbf89a509644ecb269bd936c171b80 Mon Sep 17 00:00:00 2001 From: iamacook Date: Thu, 25 Jul 2024 10:44:44 +0200 Subject: [PATCH 01/13] Open branch From 9c09c69a0df8edfbead869c8b2998e939628d020 Mon Sep 17 00:00:00 2001 From: Malay Vasa Date: Tue, 30 Jul 2024 18:21:21 +0530 Subject: [PATCH 02/13] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20See=20More?= =?UTF-8?q?=20Section?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DataRoom/SeeMore/Wave.tsx | 73 ++++++++++++++++ src/components/DataRoom/SeeMore/index.tsx | 43 ++++++++++ .../DataRoom/SeeMore/styles.module.css | 83 +++++++++++++++++++ src/content/dataroom.json | 4 + 4 files changed, 203 insertions(+) create mode 100644 src/components/DataRoom/SeeMore/Wave.tsx create mode 100644 src/components/DataRoom/SeeMore/index.tsx create mode 100644 src/components/DataRoom/SeeMore/styles.module.css diff --git a/src/components/DataRoom/SeeMore/Wave.tsx b/src/components/DataRoom/SeeMore/Wave.tsx new file mode 100644 index 00000000..8203b980 --- /dev/null +++ b/src/components/DataRoom/SeeMore/Wave.tsx @@ -0,0 +1,73 @@ +import React, { useEffect, useRef, useState } from 'react' + +type WaveProps = { + height?: number + color?: string + amplitude?: number + frequency?: number + speed?: number +} + +const DEFAULT_HEIGHT = 600 +const DEFAULT_COLOR = '#12FF80' +const DEFAULT_AMPLITUDE = 100 +const DEFAULT_FREQUENCY = 1 +const DEFAULT_SPEED = 3 +const STROKE_WIDTH = 4 + +const Wave = ({ + height = DEFAULT_HEIGHT, + color = DEFAULT_COLOR, + amplitude = DEFAULT_AMPLITUDE, + frequency = DEFAULT_FREQUENCY, + speed = DEFAULT_SPEED, +}: WaveProps) => { + const containerRef = useRef(null) + const pathRef = useRef(null) + const requestRef = useRef() + const startTimeRef = useRef() + const [width, setWidth] = useState(0) + const pointsRef = useRef([]) + + useEffect(() => { + if (!containerRef.current) return + + const updateWidth = (entries: ResizeObserverEntry[]) => { + setWidth(entries[0].contentRect.width) + } + + const resizeObserver = new ResizeObserver(updateWidth) + resizeObserver.observe(containerRef.current) + + return () => resizeObserver.disconnect() + }, []) + + useEffect(() => { + const animate = (time: number) => { + if (!startTimeRef.current) startTimeRef.current = time + const elapsed = time - startTimeRef.current + + const path = Array.from({ length: width + 1 }, (_, i) => { + const y = height / 2 + amplitude * Math.sin((i / width) * 2 * Math.PI * frequency + (elapsed * speed) / 1000) + return `${i},${y}` + }).join(' L') + + pathRef.current?.setAttribute('d', `M${path}`) + + requestRef.current = requestAnimationFrame(animate) + } + + requestRef.current = requestAnimationFrame(animate) + return () => cancelAnimationFrame(requestRef.current!) + }, [width, height, amplitude, frequency, speed]) + + return ( +
+ + + +
+ ) +} + +export default Wave diff --git a/src/components/DataRoom/SeeMore/index.tsx b/src/components/DataRoom/SeeMore/index.tsx new file mode 100644 index 00000000..ff65bfae --- /dev/null +++ b/src/components/DataRoom/SeeMore/index.tsx @@ -0,0 +1,43 @@ +import type { BaseBlock } from '@/components/Home/types' +import { useIsMediumScreen } from '@/hooks/useMaxWidth' +import { useScroll, useTransform, motion } from 'framer-motion' +import css from './styles.module.css' +import { useRef } from 'react' +import Wave from './Wave' +import { Typography } from '@mui/material' + +const SeeMore = ({ text }: BaseBlock) => { + const backgroundRef = useRef(null) + const isMobile = useIsMediumScreen() + + const { scrollYProgress } = useScroll({ + target: backgroundRef, + offset: ['start end', 'end start'], + }) + + const opacity = useTransform(scrollYProgress, [0, 0.3, 0.6, 0.75], [0, 1, 1, 0]) + const opacitText = useTransform(scrollYProgress, [0, 0.3, 0.5, 0.75], [0, 1, 1, 0]) + const translate = useTransform(scrollYProgress, [0, 0.2, 0.55, 0.75], ['-250px', '0px', '0px', '250px']) + + return ( +
+
+ + {text} + +
+ + + + + + + + + +
+
+ ) +} + +export default SeeMore diff --git a/src/components/DataRoom/SeeMore/styles.module.css b/src/components/DataRoom/SeeMore/styles.module.css new file mode 100644 index 00000000..02bd6bde --- /dev/null +++ b/src/components/DataRoom/SeeMore/styles.module.css @@ -0,0 +1,83 @@ +.sectionContainer { + height: 200vh; +} + +.stickyContainer { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: sticky; + top: 0; +} + +.text { + z-index: 50; +} + +.gradientBox { + width: 100%; + height: 100%; + background: linear-gradient( + to right, + #121312 0%, + rgba(18, 19, 18, 0.8) 40%, + rgba(18, 19, 18, 0.4) 70%, + transparent 100% + ); + z-index: 40; + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +.wave1 { + position: absolute; + top: 50%; + width: 100%; + transform: translateY(-50%); + right: 0; + z-index: 30; +} + +.wave2 { + position: absolute; + top: 50%; + width: 100%; + transform: translateY(-50%); + right: 0; + z-index: 20; +} + +.wave3 { + position: absolute; + top: 50%; + width: 100%; + transform: translateY(-50%); + right: 0; + z-index: 10; +} + +@media (max-width: 900px) { + .text { + padding: 60px; + margin-top: 120px; + text-align: center; + } + .stickyContainer { + justify-content: start; + } + + .wave1 { + transform: translateY(-25%); + } + + .wave2 { + transform: translateY(-25%); + } + + .wave3 { + transform: translateY(-25%); + } +} diff --git a/src/content/dataroom.json b/src/content/dataroom.json index 8293537e..0d22435e 100644 --- a/src/content/dataroom.json +++ b/src/content/dataroom.json @@ -49,6 +49,10 @@ "href": "https://dune.com/queries/3737066" } }, + { + "component": "DataRoom/SeeMore", + "text": "Want to see more?" + }, { "component": "DataRoom/ExternalLinksGrid", "title": "Dune Boards", From 99aadbc2a66d1b2ede6329dd9bc3c1d343f3187d Mon Sep 17 00:00:00 2001 From: Malay Vasa Date: Thu, 1 Aug 2024 16:45:33 +0530 Subject: [PATCH 03/13] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20address=20PR?= =?UTF-8?q?=20comments?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DataRoom/SeeMore/Wave.tsx | 40 +++++++++--------------- src/hooks/useContainerSize.ts | 23 ++++++++++++++ 2 files changed, 38 insertions(+), 25 deletions(-) create mode 100644 src/hooks/useContainerSize.ts diff --git a/src/components/DataRoom/SeeMore/Wave.tsx b/src/components/DataRoom/SeeMore/Wave.tsx index 8203b980..8dd6275b 100644 --- a/src/components/DataRoom/SeeMore/Wave.tsx +++ b/src/components/DataRoom/SeeMore/Wave.tsx @@ -1,4 +1,5 @@ -import React, { useEffect, useRef, useState } from 'react' +import useContainerSize from '@/hooks/useContainerSize' +import React, { useEffect, useRef } from 'react' type WaveProps = { height?: number @@ -23,48 +24,37 @@ const Wave = ({ speed = DEFAULT_SPEED, }: WaveProps) => { const containerRef = useRef(null) - const pathRef = useRef(null) - const requestRef = useRef() - const startTimeRef = useRef() - const [width, setWidth] = useState(0) - const pointsRef = useRef([]) + const { width } = useContainerSize(containerRef) useEffect(() => { - if (!containerRef.current) return + let startTime: number | null = null + let animationFrameId: number - const updateWidth = (entries: ResizeObserverEntry[]) => { - setWidth(entries[0].contentRect.width) - } - - const resizeObserver = new ResizeObserver(updateWidth) - resizeObserver.observe(containerRef.current) - - return () => resizeObserver.disconnect() - }, []) - - useEffect(() => { const animate = (time: number) => { - if (!startTimeRef.current) startTimeRef.current = time - const elapsed = time - startTimeRef.current + if (!startTime) startTime = time + const elapsed = time - startTime const path = Array.from({ length: width + 1 }, (_, i) => { const y = height / 2 + amplitude * Math.sin((i / width) * 2 * Math.PI * frequency + (elapsed * speed) / 1000) return `${i},${y}` }).join(' L') - pathRef.current?.setAttribute('d', `M${path}`) + const pathElement = containerRef.current?.querySelector('path') + if (pathElement) { + pathElement.setAttribute('d', `M${path}`) + } - requestRef.current = requestAnimationFrame(animate) + animationFrameId = requestAnimationFrame(animate) } - requestRef.current = requestAnimationFrame(animate) - return () => cancelAnimationFrame(requestRef.current!) + animationFrameId = requestAnimationFrame(animate) + return () => cancelAnimationFrame(animationFrameId) }, [width, height, amplitude, frequency, speed]) return (
- +
) diff --git a/src/hooks/useContainerSize.ts b/src/hooks/useContainerSize.ts new file mode 100644 index 00000000..c7efe298 --- /dev/null +++ b/src/hooks/useContainerSize.ts @@ -0,0 +1,23 @@ +import { useState, useEffect, type RefObject } from 'react' + +function useContainerSize(ref: RefObject): { width: number; height: number } { + const [size, setSize] = useState({ width: 0, height: 0 }) + + useEffect(() => { + if (!ref.current) return + + const updateSize = (entries: ResizeObserverEntry[]) => { + const { width, height } = entries[0].contentRect + setSize({ width, height }) + } + + const resizeObserver = new ResizeObserver(updateSize) + resizeObserver.observe(ref.current) + + return () => resizeObserver.disconnect() + }, [ref]) + + return size +} + +export default useContainerSize From 1637ae0c5d08db8cb399076721d72d7872c2d24f Mon Sep 17 00:00:00 2001 From: Malay Vasa Date: Mon, 12 Aug 2024 10:44:44 +0530 Subject: [PATCH 04/13] =?UTF-8?q?fix:=20=F0=9F=90=9B=20address=20PR=20comm?= =?UTF-8?q?ents=20+=20import=20framer=20motion=20on=20client?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DataRoom/SeeMore/SlidingWave.tsx | 43 +++++++++++++++++++ src/components/DataRoom/SeeMore/index.tsx | 33 +++----------- .../DataRoom/SeeMore/styles.module.css | 37 +++++----------- 3 files changed, 59 insertions(+), 54 deletions(-) create mode 100644 src/components/DataRoom/SeeMore/SlidingWave.tsx diff --git a/src/components/DataRoom/SeeMore/SlidingWave.tsx b/src/components/DataRoom/SeeMore/SlidingWave.tsx new file mode 100644 index 00000000..fce2de39 --- /dev/null +++ b/src/components/DataRoom/SeeMore/SlidingWave.tsx @@ -0,0 +1,43 @@ +import type { BaseBlock } from '@/components/Home/types' +import { useIsMediumScreen } from '@/hooks/useMaxWidth' +import { Typography } from '@mui/material' +import { motion, useScroll, useTransform } from 'framer-motion' +import type { RefObject } from 'react' +import css from './styles.module.css' +import Wave from './Wave' + +export default function SlidingWave({ + text, + containerRef, +}: { + text: BaseBlock['text'] + containerRef: RefObject +}) { + const isMobile = useIsMediumScreen() + const { scrollYProgress } = useScroll({ + target: containerRef, + offset: ['start end', 'end start'], + }) + + const opacity = useTransform(scrollYProgress, [0, 0.3, 0.6, 0.75], [0, 1, 1, 0]) + const textOpacity = useTransform(scrollYProgress, [0, 0.3, 0.5, 0.75], [0, 1, 1, 0]) + const translate = useTransform(scrollYProgress, [0, 0.2, 0.55, 0.75], ['-250px', '0px', '0px', '250px']) + + return ( + <> + + {text} + +
+ + + + + + + + + + + ) +} diff --git a/src/components/DataRoom/SeeMore/index.tsx b/src/components/DataRoom/SeeMore/index.tsx index ff65bfae..46b0bd6e 100644 --- a/src/components/DataRoom/SeeMore/index.tsx +++ b/src/components/DataRoom/SeeMore/index.tsx @@ -1,40 +1,17 @@ import type { BaseBlock } from '@/components/Home/types' -import { useIsMediumScreen } from '@/hooks/useMaxWidth' -import { useScroll, useTransform, motion } from 'framer-motion' -import css from './styles.module.css' import { useRef } from 'react' -import Wave from './Wave' -import { Typography } from '@mui/material' +import dynamic from 'next/dynamic' +import css from './styles.module.css' + +const SlidingWave = dynamic(() => import('./SlidingWave')) const SeeMore = ({ text }: BaseBlock) => { const backgroundRef = useRef(null) - const isMobile = useIsMediumScreen() - - const { scrollYProgress } = useScroll({ - target: backgroundRef, - offset: ['start end', 'end start'], - }) - - const opacity = useTransform(scrollYProgress, [0, 0.3, 0.6, 0.75], [0, 1, 1, 0]) - const opacitText = useTransform(scrollYProgress, [0, 0.3, 0.5, 0.75], [0, 1, 1, 0]) - const translate = useTransform(scrollYProgress, [0, 0.2, 0.55, 0.75], ['-250px', '0px', '0px', '250px']) return (
- - {text} - -
- - - - - - - - - +
) diff --git a/src/components/DataRoom/SeeMore/styles.module.css b/src/components/DataRoom/SeeMore/styles.module.css index 02bd6bde..98c2dca6 100644 --- a/src/components/DataRoom/SeeMore/styles.module.css +++ b/src/components/DataRoom/SeeMore/styles.module.css @@ -32,31 +32,24 @@ transform: translateY(-50%); } -.wave1 { +.wave { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); right: 0; - z-index: 30; + --wave-index: 30; + z-index: calc(var(--wave-index) - (var(--n) * 10)); } -.wave2 { - position: absolute; - top: 50%; - width: 100%; - transform: translateY(-50%); - right: 0; - z-index: 20; +.wave:nth-child(1) { + --n: 0; } - -.wave3 { - position: absolute; - top: 50%; - width: 100%; - transform: translateY(-50%); - right: 0; - z-index: 10; +.wave:nth-child(2) { + --n: 1; +} +.wave:nth-child(3) { + --n: 2; } @media (max-width: 900px) { @@ -69,15 +62,7 @@ justify-content: start; } - .wave1 { - transform: translateY(-25%); - } - - .wave2 { - transform: translateY(-25%); - } - - .wave3 { + .wave { transform: translateY(-25%); } } From 209d11c76c942fe8c5808500e30db8ee1b405d46 Mon Sep 17 00:00:00 2001 From: Malay Vasa Date: Tue, 13 Aug 2024 11:50:39 +0530 Subject: [PATCH 05/13] =?UTF-8?q?fix:=20=F0=9F=90=9B=20address=20console?= =?UTF-8?q?=20error?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DataRoom/SeeMore/Wave.tsx | 27 ++++++++++++++---------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/components/DataRoom/SeeMore/Wave.tsx b/src/components/DataRoom/SeeMore/Wave.tsx index 8dd6275b..3a31f928 100644 --- a/src/components/DataRoom/SeeMore/Wave.tsx +++ b/src/components/DataRoom/SeeMore/Wave.tsx @@ -34,14 +34,17 @@ const Wave = ({ if (!startTime) startTime = time const elapsed = time - startTime - const path = Array.from({ length: width + 1 }, (_, i) => { - const y = height / 2 + amplitude * Math.sin((i / width) * 2 * Math.PI * frequency + (elapsed * speed) / 1000) - return `${i},${y}` - }).join(' L') - - const pathElement = containerRef.current?.querySelector('path') - if (pathElement) { - pathElement.setAttribute('d', `M${path}`) + // Only create the path if width is valid + if (width > 0) { + const path = Array.from({ length: width + 1 }, (_, i) => { + const y = height / 2 + amplitude * Math.sin((i / width) * 2 * Math.PI * frequency + (elapsed * speed) / 1000) + return `${i},${y}` + }).join(' L') + + const pathElement = containerRef.current?.querySelector('path') + if (pathElement) { + pathElement.setAttribute('d', `M${path}`) + } } animationFrameId = requestAnimationFrame(animate) @@ -53,9 +56,11 @@ const Wave = ({ return (
- - - + {width > 0 && ( + + + + )}
) } From f7e3fc3d847086d83d3d04d25566829e089dd9d5 Mon Sep 17 00:00:00 2001 From: Malay Vasa Date: Tue, 20 Aug 2024 13:23:52 +0530 Subject: [PATCH 06/13] =?UTF-8?q?fix:=20=F0=9F=90=9B=20moved=20the=20wav?= =?UTF-8?q?=20animation=20to=20pr=20#441?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DataRoom/SeeMore/SlidingWave.tsx | 14 +--- src/components/DataRoom/SeeMore/Wave.tsx | 68 ------------------- 2 files changed, 3 insertions(+), 79 deletions(-) delete mode 100644 src/components/DataRoom/SeeMore/Wave.tsx diff --git a/src/components/DataRoom/SeeMore/SlidingWave.tsx b/src/components/DataRoom/SeeMore/SlidingWave.tsx index fce2de39..57e60b32 100644 --- a/src/components/DataRoom/SeeMore/SlidingWave.tsx +++ b/src/components/DataRoom/SeeMore/SlidingWave.tsx @@ -4,7 +4,6 @@ import { Typography } from '@mui/material' import { motion, useScroll, useTransform } from 'framer-motion' import type { RefObject } from 'react' import css from './styles.module.css' -import Wave from './Wave' export default function SlidingWave({ text, @@ -28,16 +27,9 @@ export default function SlidingWave({ {text} -
- - - - - - - - - + { + //Moved the wave animation to PR #441 + } ) } diff --git a/src/components/DataRoom/SeeMore/Wave.tsx b/src/components/DataRoom/SeeMore/Wave.tsx deleted file mode 100644 index 3a31f928..00000000 --- a/src/components/DataRoom/SeeMore/Wave.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import useContainerSize from '@/hooks/useContainerSize' -import React, { useEffect, useRef } from 'react' - -type WaveProps = { - height?: number - color?: string - amplitude?: number - frequency?: number - speed?: number -} - -const DEFAULT_HEIGHT = 600 -const DEFAULT_COLOR = '#12FF80' -const DEFAULT_AMPLITUDE = 100 -const DEFAULT_FREQUENCY = 1 -const DEFAULT_SPEED = 3 -const STROKE_WIDTH = 4 - -const Wave = ({ - height = DEFAULT_HEIGHT, - color = DEFAULT_COLOR, - amplitude = DEFAULT_AMPLITUDE, - frequency = DEFAULT_FREQUENCY, - speed = DEFAULT_SPEED, -}: WaveProps) => { - const containerRef = useRef(null) - const { width } = useContainerSize(containerRef) - - useEffect(() => { - let startTime: number | null = null - let animationFrameId: number - - const animate = (time: number) => { - if (!startTime) startTime = time - const elapsed = time - startTime - - // Only create the path if width is valid - if (width > 0) { - const path = Array.from({ length: width + 1 }, (_, i) => { - const y = height / 2 + amplitude * Math.sin((i / width) * 2 * Math.PI * frequency + (elapsed * speed) / 1000) - return `${i},${y}` - }).join(' L') - - const pathElement = containerRef.current?.querySelector('path') - if (pathElement) { - pathElement.setAttribute('d', `M${path}`) - } - } - - animationFrameId = requestAnimationFrame(animate) - } - - animationFrameId = requestAnimationFrame(animate) - return () => cancelAnimationFrame(animationFrameId) - }, [width, height, amplitude, frequency, speed]) - - return ( -
- {width > 0 && ( - - - - )} -
- ) -} - -export default Wave From 44b8b93c710b316f03bda9587702277883687ea4 Mon Sep 17 00:00:00 2001 From: Malay Vasa Date: Tue, 20 Aug 2024 13:44:52 +0530 Subject: [PATCH 07/13] =?UTF-8?q?fix:=20=F0=9F=90=9B=20remove=20unused=20v?= =?UTF-8?q?ariables=20and=20imports?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DataRoom/SeeMore/SlidingWave.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/DataRoom/SeeMore/SlidingWave.tsx b/src/components/DataRoom/SeeMore/SlidingWave.tsx index 57e60b32..d4af1b4c 100644 --- a/src/components/DataRoom/SeeMore/SlidingWave.tsx +++ b/src/components/DataRoom/SeeMore/SlidingWave.tsx @@ -1,5 +1,4 @@ import type { BaseBlock } from '@/components/Home/types' -import { useIsMediumScreen } from '@/hooks/useMaxWidth' import { Typography } from '@mui/material' import { motion, useScroll, useTransform } from 'framer-motion' import type { RefObject } from 'react' @@ -12,13 +11,11 @@ export default function SlidingWave({ text: BaseBlock['text'] containerRef: RefObject }) { - const isMobile = useIsMediumScreen() const { scrollYProgress } = useScroll({ target: containerRef, offset: ['start end', 'end start'], }) - const opacity = useTransform(scrollYProgress, [0, 0.3, 0.6, 0.75], [0, 1, 1, 0]) const textOpacity = useTransform(scrollYProgress, [0, 0.3, 0.5, 0.75], [0, 1, 1, 0]) const translate = useTransform(scrollYProgress, [0, 0.2, 0.55, 0.75], ['-250px', '0px', '0px', '250px']) @@ -27,9 +24,6 @@ export default function SlidingWave({ {text} - { - //Moved the wave animation to PR #441 - } ) } From 97060b3ab620d670d81190fece7e67c64aec3097 Mon Sep 17 00:00:00 2001 From: Malay Vasa Date: Tue, 20 Aug 2024 13:45:14 +0530 Subject: [PATCH 08/13] =?UTF-8?q?fix:=20=F0=9F=90=9B=20remove=20unused=20c?= =?UTF-8?q?ss?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DataRoom/SeeMore/styles.module.css | 40 ------------------- 1 file changed, 40 deletions(-) diff --git a/src/components/DataRoom/SeeMore/styles.module.css b/src/components/DataRoom/SeeMore/styles.module.css index 98c2dca6..2846a0fe 100644 --- a/src/components/DataRoom/SeeMore/styles.module.css +++ b/src/components/DataRoom/SeeMore/styles.module.css @@ -16,42 +16,6 @@ z-index: 50; } -.gradientBox { - width: 100%; - height: 100%; - background: linear-gradient( - to right, - #121312 0%, - rgba(18, 19, 18, 0.8) 40%, - rgba(18, 19, 18, 0.4) 70%, - transparent 100% - ); - z-index: 40; - position: absolute; - top: 50%; - transform: translateY(-50%); -} - -.wave { - position: absolute; - top: 50%; - width: 100%; - transform: translateY(-50%); - right: 0; - --wave-index: 30; - z-index: calc(var(--wave-index) - (var(--n) * 10)); -} - -.wave:nth-child(1) { - --n: 0; -} -.wave:nth-child(2) { - --n: 1; -} -.wave:nth-child(3) { - --n: 2; -} - @media (max-width: 900px) { .text { padding: 60px; @@ -61,8 +25,4 @@ .stickyContainer { justify-content: start; } - - .wave { - transform: translateY(-25%); - } } From c40fc1e9f08ae9803325c1ea88ea141f9b4b701e Mon Sep 17 00:00:00 2001 From: Malay Vasa Date: Tue, 20 Aug 2024 13:45:46 +0530 Subject: [PATCH 09/13] =?UTF-8?q?fix:=20=F0=9F=90=9B=20remove=20unused=20h?= =?UTF-8?q?ook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useContainerSize.ts | 23 ----------------------- 1 file changed, 23 deletions(-) delete mode 100644 src/hooks/useContainerSize.ts diff --git a/src/hooks/useContainerSize.ts b/src/hooks/useContainerSize.ts deleted file mode 100644 index c7efe298..00000000 --- a/src/hooks/useContainerSize.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { useState, useEffect, type RefObject } from 'react' - -function useContainerSize(ref: RefObject): { width: number; height: number } { - const [size, setSize] = useState({ width: 0, height: 0 }) - - useEffect(() => { - if (!ref.current) return - - const updateSize = (entries: ResizeObserverEntry[]) => { - const { width, height } = entries[0].contentRect - setSize({ width, height }) - } - - const resizeObserver = new ResizeObserver(updateSize) - resizeObserver.observe(ref.current) - - return () => resizeObserver.disconnect() - }, [ref]) - - return size -} - -export default useContainerSize From 7a2a5f57c9c280b78b46cbc1ffb7b97cbce9881d Mon Sep 17 00:00:00 2001 From: Malay Vasa Date: Tue, 20 Aug 2024 14:02:15 +0530 Subject: [PATCH 10/13] Update src/components/DataRoom/SeeMore/SlidingWave.tsx Co-authored-by: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com> --- src/components/DataRoom/SeeMore/SlidingWave.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/DataRoom/SeeMore/SlidingWave.tsx b/src/components/DataRoom/SeeMore/SlidingWave.tsx index d4af1b4c..8042320b 100644 --- a/src/components/DataRoom/SeeMore/SlidingWave.tsx +++ b/src/components/DataRoom/SeeMore/SlidingWave.tsx @@ -20,10 +20,8 @@ export default function SlidingWave({ const translate = useTransform(scrollYProgress, [0, 0.2, 0.55, 0.75], ['-250px', '0px', '0px', '250px']) return ( - <> - - {text} - - + + {text} + ) } From 52c2e6f6d0a2898cf915e7ea6d1208e234c41789 Mon Sep 17 00:00:00 2001 From: Malay Vasa Date: Tue, 20 Aug 2024 14:12:22 +0530 Subject: [PATCH 11/13] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20rename=20compo?= =?UTF-8?q?nent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DataRoom/SeeMore/{SlidingWave.tsx => SlidingContent.tsx} | 2 +- src/components/DataRoom/SeeMore/index.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename src/components/DataRoom/SeeMore/{SlidingWave.tsx => SlidingContent.tsx} (95%) diff --git a/src/components/DataRoom/SeeMore/SlidingWave.tsx b/src/components/DataRoom/SeeMore/SlidingContent.tsx similarity index 95% rename from src/components/DataRoom/SeeMore/SlidingWave.tsx rename to src/components/DataRoom/SeeMore/SlidingContent.tsx index 8042320b..b87658b2 100644 --- a/src/components/DataRoom/SeeMore/SlidingWave.tsx +++ b/src/components/DataRoom/SeeMore/SlidingContent.tsx @@ -4,7 +4,7 @@ import { motion, useScroll, useTransform } from 'framer-motion' import type { RefObject } from 'react' import css from './styles.module.css' -export default function SlidingWave({ +export default function SlidingContent({ text, containerRef, }: { diff --git a/src/components/DataRoom/SeeMore/index.tsx b/src/components/DataRoom/SeeMore/index.tsx index 46b0bd6e..02140af5 100644 --- a/src/components/DataRoom/SeeMore/index.tsx +++ b/src/components/DataRoom/SeeMore/index.tsx @@ -3,7 +3,7 @@ import { useRef } from 'react' import dynamic from 'next/dynamic' import css from './styles.module.css' -const SlidingWave = dynamic(() => import('./SlidingWave')) +const SlidingContent = dynamic(() => import('./SlidingContent')) const SeeMore = ({ text }: BaseBlock) => { const backgroundRef = useRef(null) @@ -11,7 +11,7 @@ const SeeMore = ({ text }: BaseBlock) => { return (
- +
) From 30679d6b1d0d0757f62b3b9aff6f6cf4a57baf0b Mon Sep 17 00:00:00 2001 From: Malay Vasa Date: Tue, 20 Aug 2024 14:16:08 +0530 Subject: [PATCH 12/13] =?UTF-8?q?style:=20=F0=9F=92=84=20remove=20unused?= =?UTF-8?q?=20styles=20and=20update=20mobile=20styles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DataRoom/SeeMore/styles.module.css | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/DataRoom/SeeMore/styles.module.css b/src/components/DataRoom/SeeMore/styles.module.css index 2846a0fe..bf05317d 100644 --- a/src/components/DataRoom/SeeMore/styles.module.css +++ b/src/components/DataRoom/SeeMore/styles.module.css @@ -12,17 +12,9 @@ top: 0; } -.text { - z-index: 50; -} - @media (max-width: 900px) { .text { padding: 60px; - margin-top: 120px; text-align: center; } - .stickyContainer { - justify-content: start; - } } From cd998428e7faebae91a5f37fb66b0725aee18f66 Mon Sep 17 00:00:00 2001 From: Malay Vasa Date: Tue, 20 Aug 2024 15:45:43 +0530 Subject: [PATCH 13/13] =?UTF-8?q?fix:=20=F0=9F=90=9B=20fix=20text=20bounce?= =?UTF-8?q?=20back=20issue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DataRoom/SeeMore/SlidingContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DataRoom/SeeMore/SlidingContent.tsx b/src/components/DataRoom/SeeMore/SlidingContent.tsx index b87658b2..f3e84599 100644 --- a/src/components/DataRoom/SeeMore/SlidingContent.tsx +++ b/src/components/DataRoom/SeeMore/SlidingContent.tsx @@ -16,7 +16,7 @@ export default function SlidingContent({ offset: ['start end', 'end start'], }) - const textOpacity = useTransform(scrollYProgress, [0, 0.3, 0.5, 0.75], [0, 1, 1, 0]) + const textOpacity = useTransform(scrollYProgress, [0, 0.3, 0.5, 0.65], [0, 1, 1, 0]) const translate = useTransform(scrollYProgress, [0, 0.2, 0.55, 0.75], ['-250px', '0px', '0px', '250px']) return (