f8b8f53d54
- Add Next.js frontend service (nextjs) with Dockerfile and source - Update docker-compose.yml: image names, Drupal 11.3.3, nextjs service - Add docker-compose.override.yml.disabled for dev hot-reload - Add install-headless-modules.sh for OAuth/JSON:API module setup - Add README.md with full setup and configuration guide - Update nginx/Dockerfile and nginx.conf.template for cms. subdomain - Update drupal/Dockerfile PHP-FPM build args - Gitignore **/.vscode/ to prevent IDE workspace files from being tracked
38 lines
871 B
TypeScript
38 lines
871 B
TypeScript
"use client"
|
|
|
|
import { useEffect, useRef, useState, type ReactNode } from "react"
|
|
|
|
interface ScrollRevealCardProps {
|
|
children: ReactNode
|
|
}
|
|
|
|
export function ScrollRevealCard({ children }: ScrollRevealCardProps) {
|
|
const ref = useRef<HTMLDivElement>(null)
|
|
const [isVisible, setIsVisible] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const el = ref.current
|
|
if (!el) return
|
|
|
|
const observer = new IntersectionObserver(
|
|
([entry]) => {
|
|
if (entry.isIntersecting) setIsVisible(true)
|
|
},
|
|
{ threshold: 0.35, rootMargin: "0px 0px -120px 0px" }
|
|
)
|
|
|
|
observer.observe(el)
|
|
return () => observer.disconnect()
|
|
}, [])
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={`transition-all duration-700 ease-out ${
|
|
isVisible ? "translate-y-0 opacity-100" : "translate-y-12 opacity-20"
|
|
}`}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|