Untitled
unknown
plain_text
5 months ago
2.4 kB
5
Indexable
import React, { useEffect, useRef, useState } from 'react' export default function ArtCultureSection() { const [isIntersecting, setIsIntersecting] = useState(false) const sectionRef = useRef<HTMLElement>(null) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { setIsIntersecting(entry.isIntersecting) }, { threshold: 0.3 } ) if (sectionRef.current) { observer.observe(sectionRef.current) } return () => { if (sectionRef.current) { observer.unobserve(sectionRef.current) } } }, []) return ( <section ref={sectionRef} className="flex flex-col md:flex-row items-center justify-center min-h-[100vh] p-4 overflow-hidden" > <div className="w-full md:w-1/2 h-64 md:h-auto relative mb-4 md:mb-0"> <img src="/placeholder.svg?height=400&width=600&text=Art" alt="Art gallery showcasing various artistic expressions" className="w-full h-full object-cover rounded-lg shadow-lg" /> <div className={`absolute inset-0 bg-black transition-all duration-1000 ease-in-out ${ isIntersecting ? 'opacity-0' : 'opacity-70' }`} ></div> <div className={`absolute inset-0 border-4 border-white transition-all duration-1000 ease-in-out ${ isIntersecting ? 'scale-105 opacity-100' : 'scale-100 opacity-0' }`} > <div className="absolute inset-0 animate-pulse-slow bg-gradient-to-r from-purple-500 to-pink-500 opacity-50"></div> </div> </div> <div className="w-full md:w-1/2 p-4 md:p-8 relative"> <div className={`absolute inset-0 bg-black transition-all duration-1000 ease-in-out ${ isIntersecting ? 'opacity-0' : 'opacity-70' }`} ></div> <div className={`relative z-10 transition-all duration-500 ${ isIntersecting ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4' }`}> <h2 className="text-xl sm:text-2xl md:text-3xl font-bold mb-4">Art & Culture</h2> <p className="text-base sm:text-lg">Dive into the world of art and culture. Experience creativity in its purest form through various artistic expressions.</p> </div> </div> </section> ) }
Editor is loading...
Leave a Comment