"use client";
import React, { FC, ReactNode, useEffect } from "react";
import { motion, useAnimation } from "framer-motion";
import { useInView } from "react-intersection-observer";

interface RevealProps {
  direction?: "up" | "down" | "left" | "right";
  delay?: number;
  duration?: number;
  children: ReactNode;
  className?: string;
}

const Reveal: FC<RevealProps> = ({
  direction = "up",
  delay = 0.2,
  duration = 0.5,
  children,
  className,
}) => {
  const controls = useAnimation();
  const [ref, inView] = useInView({
    triggerOnce: true,
  });

  useEffect(() => {
    if (inView) {
      controls.start({
        opacity: 1,
        y: 0,
        x: 0,
        transition: { duration: duration, delay },
      });
    }
  }, [controls, inView, delay]);

  // Set initial styles before the animation
  const initialStyles = {
    opacity: 0,
    y: direction === "up" ? 20 : direction === "down" ? -20 : 0,
    x: direction === "left" ? 20 : direction === "right" ? -20 : 0,
  };

  return (
    <motion.Reveal
      className={className}
      ref={ref}
      initial={initialStyles}
      animate={controls}
    >
      {children}
    </motion.Reveal>
  );
};

export default Reveal;
              
              

import React from "react";
import Reveal from "../components/Reveal";
import HeroImg from "@/imgs/JRuiLogo.png";
import Image from "next/image";

const Hero = () => {
  return (
    <Reveal className="container h-[80dvh] w-full grid grid-cols-1 md:grid-cols-2 gap-0 md:gap-8 items-center">
      <Reveal className="text-center md:text-left">
        <Reveal direction="up">
          <h1 className=" text-6xl sm:text-9xl font-bold mb-4">
            JR
            <span className="bg-black text-primary font-normal">ui</span>
          </h1>
        </Reveal>
        <Reveal direction="left" delay={0.6}>
          <p className="text-sm md:text-base lg:text-lg mb-4">
            Introducing Jrui, the lovable mascot of our component library! With
            a penchant for mischief, Jrui keeps us on our toes, from turning CSS
            into spaghetti code to causing bugs that only appear on Fridays. But
            amidst the chaos, Jrui brings humor and charm to our coding
            adventures. So when you need a laugh or a reminder that coding is
            never dull, just look to Jrui!
          </p>
        </Reveal>

        <Reveal className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
          <Reveal delay={0.8}>
            <button className="border-gradient btn-hover py-2 px-4 ">
              Ooo ooo click me!
            </button>
          </Reveal>
          <Reveal delay={0.8}>
            <button className="border-gradient btn-hover py-2 px-4 ">
              No click me!
            </button>
          </Reveal>
        </Reveal>
      </Reveal>
      <Reveal>
        <Reveal className="flex justify-center" duration={1} delay={0}>
          <Image
            placeholder="blur"
            objectFit="fill"
            priority
            className="w-[300px] md:w-[420px]"
            src={HeroImg}
            alt="Jordan Ready AI created animated logo"
          />
        </Reveal>
      </Reveal>
    </Reveal>
  );
};

export default Hero;              

import React from "react";
import Reveal from "./Reveal"; // Adjust the import path as needed
import Hero from "./sections/Hero"; // Adjust the import path as needed

const Example: React.FC = () => {
  return (
    <Reveal>
      <Hero />
      // other page content
    </Reveal>
  );
};

export default Example;