frondend/components/Hero1.tsx

"use client";

import "animate.css/animate.compat.css"
import { useRef, useEffect, useState } from 'react';
import Link from "next/link";
const Hero1 = () => {
    const [paragraphOpacities, setParagraphOpacities] = useState<number[]>([]);
    const scrollRef = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
        const handleScroll = () => {
            if (scrollRef.current) {
                const container = scrollRef.current;
                const isAtBottom = Math.abs(container.scrollHeight - container.scrollTop - container.clientHeight) < 5;


                if (isAtBottom) {
                    // Set all paragraphs to full opacity when at the bottom
                    setParagraphOpacities(new Array(11).fill(1));
                } else {
                    const paragraphs = container.querySelectorAll('p');
                    const newOpacities = Array.from(paragraphs).map(p => {
                        const rect = p.getBoundingClientRect();
                        const yPosition = rect.top - container.getBoundingClientRect().top;
                        return yPosition > 30 ? 0 : 1;
                    });
                    setParagraphOpacities(newOpacities);
                }
            }
        };
        setParagraphOpacities(new Array(9).fill(0));
        if (scrollRef.current) {
            scrollRef.current.addEventListener('scroll', handleScroll);
            setTimeout(handleScroll, 100);

        }

        return () => {
            if (scrollRef.current) {
                scrollRef.current.removeEventListener('scroll', handleScroll);
            }
        };
    }, []);


    return (
        <div className=" relative flex flex-col items-center bg-gradient-to-b from-[#F4D7D7] to-[#e2b2c4]  max-sm:h-[94vh] max-lg:h-[170] md:h-[170vh] z-[10] w-full transition-all duration-200  " >
            {/* Existing content */}

            <div >
                <div className="flex flex-row items-center justify-center mt-[30vh]">
                    <div className='max-lg:text-6xl max-sm:text-3xl md:text-6xl'>
                        發掘你的
                    </div>
                    <div className=" bg-[url('/images/kid.png')]  max-lg:h-[60px]  max-lg:w-[140px] max-sm:h-[40px] max-sm:w-[95px] md:h-[60px] md:w-[140px] bg-cover  bg-no-repeat rounded-full " />
                    <div className='max-lg:text-6xl max-sm:text-3xl md:text-6xl'>
                        音樂之路
                    </div>
                </div>
            </div>
            <div className="max-lg: w-[61vh] h-[15vh] max-sm:w-[40vh]  mt-[5vh] items-center">
                <div className="flex-grow  h-[10vh]  overflow-y-auto items-center no-scrollbar" snap-mandatory snap-y ref={scrollRef}>
                    {[
                        "學音樂能陶冶性情，專注，舒緩壓力，放鬆心情。實際上是否做到呢？",
                        "我們認為音樂不單單是「睇五線譜」",
                        "我們可以透過不同方式",
                        "例如聆聽，唱歌，身體律動等學習音樂，令學習不再是沉悶艱難",
                        "真正做到「陶冶性情」",
                        "One & ALL Music 提供全面的音樂課程",
                        "我們相信每位學生都各有天賦",
                        "「誰都可發光 只要找對地方」",
                        "只要運用合適的教學法，同學必定能發揮所長",
                        " ",
                        " ",
                    ].map((text, index) => (
                        <p
                            key={index}
                            className={`text-black max-lg:text-2xl max-sm:text-lg md:text-2xl text-center ${paragraphOpacities[index] === 0 ? 'opacity-25' : ''}`}
                        >
                            {text}
                        </p>
                    ))}
                </div>
            </div>

            <div className="mt-[7vh] max-sm:hidden max-lg:block md:block">
                <div className="flex flex-row items-center justify-center mt-[30vh] ">
                    <div className='max-lg:text-6xl max-sm:text-4xl md:text-6xl'>
                        我們認為
                    </div>
                    <div className=" bg-[url('/images/piano2.png')]  max-lg:h-[60px]  max-lg:w-[140px] max-sm:h-[40px] max-sm:w-[95px] md:h-[60px] md:w-[140px] bg-cover  bg-no-repeat rounded-full " />
                </div>
            </div>
            <div className="w-[61vh] h-[19vh] mt-[5vh] items-center max-sm:hidden max-lg:block md:block">
                <p
                    className={`text-black text-2xl text-center `}
                >
                    {"音樂不單單是「睇五線譜」，我們可以透過不同方式，例如聆聽唱歌，身體律動等學習音樂，令學習不再是沉悶艱難，真正做到「陶治性情」。"}
                </p>
                <p
                    className={`text-black text-2xl text-center mt-[5vh]`}
                >
                    One & ALL Music 提供全面的音樂課程，我們相信每位學生都各有天赋，<br></br>「誰都可發光 只要找對地方」，只要運用合適的教學法，同學必定能發揮所長。
                </p>
            </div>
            <div className="max-lg:mt-[20vh] md:mt-[20vh] max-sm:mt-[5vh]">
                {/* <CustomButton text_and_button_size={" max-lg:px-14 max-lg:py-5 max-lg:text-md max-sm:px-8 max-sm:py-3 max-sm:text-sm md:px-14 md:py-5 md:text-md"} title={'關於我們更多'} handleClick={() => {
                    console.log('Button clicked');
                }} /> */}
                <Link
                    className={`middle none center rounded-full bg-[#D60050] max-lg:px-14 max-lg:py-5 max-lg:text-md max-sm:px-8 max-sm:py-3 max-sm:text-sm md:px-14 md:py-5 md:text-md font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40`}
                    href={'/aboutus'}
                >
                    {"關於我們更多"}
                </Link>
            </div>

            <div className="absolute bottom-0  bg-[url('/images/pianobackground2.png')]  max-lg:h-[30vh] max-sm:h-[15vh] md:h-[30vh] w-full bg-cover bg-center bg-no-repeat" style={{ opacity: 0.7, zIndex: -1 }}>
            </div>



        </div >
    );
}
export default Hero1