125 lines
6.0 KiB
TypeScript
125 lines
6.0 KiB
TypeScript
"use client";
|
||
|
||
import "animate.css/animate.compat.css"
|
||
import ScrollAnimation from 'react-animate-on-scroll';
|
||
import { useRef, useEffect, useState } from 'react';
|
||
import TextGradientScroll from './TextGradientScrollContext';
|
||
import Image from 'next/image';
|
||
import CustomButton from "./CustomButton";
|
||
|
||
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');
|
||
}} />
|
||
</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 }}>
|
||
</div>
|
||
|
||
|
||
|
||
</div >
|
||
);
|
||
}
|
||
export default Hero1
|