test test

components/Parallax/Parallax.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState, useRef, useLayoutEffect, ReactNode,
 } from 'react';
@@ -23,6 +25,7 @@ type ParallaxProps = {
  */
 export const Parallax = ({ children, offset = 60 }: ParallaxProps) => {
   const prefersReducedMotion = useReducedMotion();
+
   const { scrollY } = useScroll();
   const [elementTop, setElementTop] = useState(0);
   const [clientHeight, setClientHeight] = useState(0);
@@ -48,7 +51,7 @@ export const Parallax = ({ children, offset = 60 }: ParallaxProps) => {
 
   // Don't parallax if the user has "reduced motion" enabled
   if (prefersReducedMotion) {
-    return <div>{children}</div>;
+    return <>{children}</>;
   }
 
   return (

components/VerticalPoster/VerticalPoster.styles.ts

@@ -55,10 +55,10 @@ export const imageMobile = 'size-full object-cover object-center lg:hidden';
 
 // Parallax enabled styles
 export const parallaxWrapper = 'relative aspect-w-3 aspect-h-4';
-export const parallaxBgImage = (prefersReducedMotion: boolean) => cnb('w-full object-cover', {
+export const parallaxBgImage = (prefersReducedMotion: boolean) => cnb('relative w-full object-cover', {
   'lg:h-[120%] lg:-mt-[10%]': !prefersReducedMotion, // No background image parallax for < LG
 });
 export const parallaxForegroundWrapper = 'absolute top-0 right-0 z-10';
-export const parallaxImage = (prefersReducedMotion: boolean) => cnb('size-full', {
+export const parallaxImage = (prefersReducedMotion: boolean) => cnb('relative size-full', {
   'mt-[7%] lg:mt-[3vw]': !prefersReducedMotion,
 });

components/VerticalPoster/VerticalPoster.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { HTMLAttributes } from 'react';
 import { useReducedMotion } from 'framer-motion';
 import { useMediaQuery } from 'usehooks-ts';