feat: 🎸 Add See More Section

src/components/DataRoom/SeeMore/Wave.tsx

@@ -0,0 +1,63 @@
+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<HTMLDivElement>(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
+
+      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 (
+    <div ref={containerRef} style={{ width: '100%' }}>
+      <svg width={width} height={height}>
+        <path fill="none" stroke={color} strokeWidth={STROKE_WIDTH} />
+      </svg>
+    </div>
+  )
+}
+
+export default Wave

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<HTMLDivElement>(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 (
+    <div ref={backgroundRef} className={css.sectionContainer}>
+      <div className={css.stickyContainer}>
+        <motion.div style={{ opacity: opacitText, translateY: translate }} className={css.text}>
+          <Typography variant="h1">{text}</Typography>
+        </motion.div>
+        <div className={css.gradientBox}></div>
+        <motion.div style={{ opacity }} className={css.wave1}>
+          <Wave color="#12FF80" amplitude={isMobile ? 100 : 200} />
+        </motion.div>
+        <motion.div style={{ opacity }} className={css.wave2}>
+          <Wave color="#008A40" amplitude={isMobile ? 90 : 170} />
+        </motion.div>
+        <motion.div style={{ opacity }} className={css.wave3}>
+          <Wave color="#003C1C" amplitude={isMobile ? 80 : 140} />
+        </motion.div>
+      </div>
+    </div>
+  )
+}
+
+export default SeeMore

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%);
+  }
+}

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",

src/hooks/useContainerSize.ts

@@ -0,0 +1,23 @@
+import { useState, useEffect, type RefObject } from 'react'
+
+function useContainerSize(ref: RefObject<HTMLElement>): { 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